Ohm-Management - Projektarbeit B-ME
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

VBtn.js 5.6KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
  2. var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
  3. function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
  4. // Styles
  5. import '../../../src/stylus/components/_buttons.styl';
  6. import mixins from '../../util/mixins';
  7. // Components
  8. import VProgressCircular from '../VProgressCircular';
  9. // Mixins
  10. import Colorable from '../../mixins/colorable';
  11. import { factory as GroupableFactory } from '../../mixins/groupable';
  12. import Positionable from '../../mixins/positionable';
  13. import Routable from '../../mixins/routable';
  14. import Themeable from '../../mixins/themeable';
  15. import { factory as ToggleableFactory } from '../../mixins/toggleable';
  16. // Utilities
  17. import { getObjectValueByPath } from '../../util/helpers';
  18. var baseMixins = mixins(Colorable, Routable, Positionable, Themeable, GroupableFactory('btnToggle'), ToggleableFactory('inputValue')
  19. /* @vue/component */
  20. );
  21. export default baseMixins.extend().extend({
  22. name: 'v-btn',
  23. props: {
  24. activeClass: {
  25. type: String,
  26. default: 'v-btn--active'
  27. },
  28. block: Boolean,
  29. depressed: Boolean,
  30. fab: Boolean,
  31. flat: Boolean,
  32. icon: Boolean,
  33. large: Boolean,
  34. loading: Boolean,
  35. outline: Boolean,
  36. ripple: {
  37. type: [Boolean, Object],
  38. default: null
  39. },
  40. round: Boolean,
  41. small: Boolean,
  42. tag: {
  43. type: String,
  44. default: 'button'
  45. },
  46. type: {
  47. type: String,
  48. default: 'button'
  49. },
  50. value: null
  51. },
  52. computed: {
  53. classes: function classes() {
  54. var _extends2;
  55. return _extends((_extends2 = {
  56. 'v-btn': true
  57. }, _defineProperty(_extends2, this.activeClass, this.isActive), _defineProperty(_extends2, 'v-btn--absolute', this.absolute), _defineProperty(_extends2, 'v-btn--block', this.block), _defineProperty(_extends2, 'v-btn--bottom', this.bottom), _defineProperty(_extends2, 'v-btn--disabled', this.disabled), _defineProperty(_extends2, 'v-btn--flat', this.flat), _defineProperty(_extends2, 'v-btn--floating', this.fab), _defineProperty(_extends2, 'v-btn--fixed', this.fixed), _defineProperty(_extends2, 'v-btn--icon', this.icon), _defineProperty(_extends2, 'v-btn--large', this.large), _defineProperty(_extends2, 'v-btn--left', this.left), _defineProperty(_extends2, 'v-btn--loader', this.loading), _defineProperty(_extends2, 'v-btn--outline', this.outline), _defineProperty(_extends2, 'v-btn--depressed', this.depressed && !this.flat || this.outline), _defineProperty(_extends2, 'v-btn--right', this.right), _defineProperty(_extends2, 'v-btn--round', this.round), _defineProperty(_extends2, 'v-btn--router', this.to), _defineProperty(_extends2, 'v-btn--small', this.small), _defineProperty(_extends2, 'v-btn--top', this.top), _extends2), this.themeClasses);
  58. },
  59. computedRipple: function computedRipple() {
  60. var defaultRipple = this.icon || this.fab ? { circle: true } : true;
  61. if (this.disabled) return false;else return this.ripple !== null ? this.ripple : defaultRipple;
  62. }
  63. },
  64. watch: {
  65. '$route': 'onRouteChange'
  66. },
  67. methods: {
  68. // Prevent focus to match md spec
  69. click: function click(e) {
  70. !this.fab && e.detail && this.$el.blur();
  71. this.$emit('click', e);
  72. this.btnToggle && this.toggle();
  73. },
  74. genContent: function genContent() {
  75. return this.$createElement('div', { 'class': 'v-btn__content' }, this.$slots.default);
  76. },
  77. genLoader: function genLoader() {
  78. return this.$createElement('span', {
  79. class: 'v-btn__loading'
  80. }, this.$slots.loader || [this.$createElement(VProgressCircular, {
  81. props: {
  82. indeterminate: true,
  83. size: 23,
  84. width: 2
  85. }
  86. })]);
  87. },
  88. onRouteChange: function onRouteChange() {
  89. var _this = this;
  90. if (!this.to || !this.$refs.link) return;
  91. var path = '_vnode.data.class.' + this.activeClass;
  92. this.$nextTick(function () {
  93. if (getObjectValueByPath(_this.$refs.link, path)) {
  94. _this.toggle();
  95. }
  96. });
  97. }
  98. },
  99. render: function render(h) {
  100. var setColor = !this.outline && !this.flat && !this.disabled ? this.setBackgroundColor : this.setTextColor;
  101. var _generateRouteLink = this.generateRouteLink(this.classes),
  102. tag = _generateRouteLink.tag,
  103. data = _generateRouteLink.data;
  104. var children = [this.genContent(), this.loading && this.genLoader()];
  105. if (tag === 'button') data.attrs.type = this.type;
  106. data.attrs.value = ['string', 'number'].includes(_typeof(this.value)) ? this.value : JSON.stringify(this.value);
  107. if (this.btnToggle) {
  108. data.ref = 'link';
  109. }
  110. return h(tag, setColor(this.color, data), children);
  111. }
  112. });
  113. //# sourceMappingURL=VBtn.js.map