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.

VItemGroup.js 6.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
  1. 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; };
  2. // Styles
  3. import '../../../src/stylus/components/_item-group.styl';
  4. import Proxyable from '../../mixins/proxyable';
  5. import Themeable from '../../mixins/themeable';
  6. // Utilities
  7. import mixins from '../../util/mixins';
  8. import { consoleWarn } from '../../util/console';
  9. export var BaseItemGroup = mixins(Proxyable, Themeable).extend({
  10. name: 'base-item-group',
  11. props: {
  12. activeClass: {
  13. type: String,
  14. default: 'v-item--active'
  15. },
  16. mandatory: Boolean,
  17. max: {
  18. type: [Number, String],
  19. default: null
  20. },
  21. multiple: Boolean
  22. },
  23. data: function data() {
  24. return {
  25. // As long as a value is defined, show it
  26. // Otherwise, check if multiple
  27. // to determine which default to provide
  28. internalLazyValue: this.value !== undefined ? this.value : this.multiple ? [] : undefined,
  29. items: []
  30. };
  31. },
  32. computed: {
  33. classes: function classes() {
  34. return _extends({}, this.themeClasses);
  35. },
  36. selectedItems: function selectedItems() {
  37. var _this = this;
  38. return this.items.filter(function (item, index) {
  39. return _this.toggleMethod(_this.getValue(item, index));
  40. });
  41. },
  42. selectedValues: function selectedValues() {
  43. return Array.isArray(this.internalValue) ? this.internalValue : [this.internalValue];
  44. },
  45. toggleMethod: function toggleMethod() {
  46. var _this2 = this;
  47. if (!this.multiple) {
  48. return function (v) {
  49. return _this2.internalValue === v;
  50. };
  51. }
  52. var internalValue = this.internalValue;
  53. if (Array.isArray(internalValue)) {
  54. return function (v) {
  55. return internalValue.includes(v);
  56. };
  57. }
  58. return function () {
  59. return false;
  60. };
  61. }
  62. },
  63. watch: {
  64. internalValue: function internalValue() {
  65. // https://github.com/vuetifyjs/vuetify/issues/5352
  66. this.$nextTick(this.updateItemsState);
  67. }
  68. },
  69. created: function created() {
  70. if (this.multiple && !Array.isArray(this.internalValue)) {
  71. consoleWarn('Model must be bound to an array if the multiple property is true.', this);
  72. }
  73. },
  74. methods: {
  75. getValue: function getValue(item, i) {
  76. return item.value == null || item.value === '' ? i : item.value;
  77. },
  78. onClick: function onClick(item, index) {
  79. this.updateInternalValue(this.getValue(item, index));
  80. },
  81. register: function register(item) {
  82. var _this3 = this;
  83. var index = this.items.push(item) - 1;
  84. item.$on('change', function () {
  85. return _this3.onClick(item, index);
  86. });
  87. // If no value provided and mandatory,
  88. // assign first registered item
  89. if (this.mandatory && this.internalLazyValue == null) {
  90. this.updateMandatory();
  91. }
  92. this.updateItem(item, index);
  93. },
  94. unregister: function unregister(item) {
  95. if (this._isDestroyed) return;
  96. var index = this.items.indexOf(item);
  97. var value = this.getValue(item, index);
  98. this.items.splice(index, 1);
  99. var valueIndex = this.selectedValues.indexOf(value);
  100. // Items is not selected, do nothing
  101. if (valueIndex < 0) return;
  102. // If not mandatory, use regular update process
  103. if (!this.mandatory) {
  104. return this.updateInternalValue(value);
  105. }
  106. // Remove the value
  107. if (this.multiple && Array.isArray(this.internalValue)) {
  108. this.internalValue = this.internalValue.filter(function (v) {
  109. return v !== value;
  110. });
  111. } else {
  112. this.internalValue = undefined;
  113. }
  114. // If mandatory and we have no selection
  115. // add the last item as value
  116. /* istanbul ignore else */
  117. if (!this.selectedItems.length) {
  118. this.updateMandatory(true);
  119. }
  120. },
  121. updateItem: function updateItem(item, index) {
  122. var value = this.getValue(item, index);
  123. item.isActive = this.toggleMethod(value);
  124. },
  125. updateItemsState: function updateItemsState() {
  126. if (this.mandatory && !this.selectedItems.length) {
  127. return this.updateMandatory();
  128. }
  129. // TODO: Make this smarter so it
  130. // doesn't have to iterate every
  131. // child in an update
  132. this.items.forEach(this.updateItem);
  133. },
  134. updateInternalValue: function updateInternalValue(value) {
  135. this.multiple ? this.updateMultiple(value) : this.updateSingle(value);
  136. },
  137. updateMandatory: function updateMandatory(last) {
  138. if (!this.items.length) return;
  139. var index = last ? this.items.length - 1 : 0;
  140. this.updateInternalValue(this.getValue(this.items[index], index));
  141. },
  142. updateMultiple: function updateMultiple(value) {
  143. var defaultValue = Array.isArray(this.internalValue) ? this.internalValue : [];
  144. var internalValue = defaultValue.slice();
  145. var index = internalValue.findIndex(function (val) {
  146. return val === value;
  147. });
  148. if (this.mandatory &&
  149. // Item already exists
  150. index > -1 &&
  151. // value would be reduced below min
  152. internalValue.length - 1 < 1) return;
  153. if (
  154. // Max is set
  155. this.max != null &&
  156. // Item doesn't exist
  157. index < 0 &&
  158. // value would be increased above max
  159. internalValue.length + 1 > this.max) return;
  160. index > -1 ? internalValue.splice(index, 1) : internalValue.push(value);
  161. this.internalValue = internalValue;
  162. },
  163. updateSingle: function updateSingle(value) {
  164. var isSame = value === this.internalValue;
  165. if (this.mandatory && isSame) return;
  166. this.internalValue = isSame ? undefined : value;
  167. }
  168. },
  169. render: function render(h) {
  170. return h('div', {
  171. staticClass: 'v-item-group',
  172. class: this.classes
  173. }, this.$slots.default);
  174. }
  175. });
  176. export default BaseItemGroup.extend({
  177. name: 'v-item-group',
  178. provide: function provide() {
  179. return {
  180. itemGroup: this
  181. };
  182. }
  183. });
  184. //# sourceMappingURL=VItemGroup.js.map