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.

VCombobox.js 7.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
  1. 'use strict';
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. require('../../../src/stylus/components/_autocompletes.styl');
  6. var _VSelect = require('../VSelect/VSelect');
  7. var _VSelect2 = _interopRequireDefault(_VSelect);
  8. var _VAutocomplete = require('../VAutocomplete/VAutocomplete');
  9. var _VAutocomplete2 = _interopRequireDefault(_VAutocomplete);
  10. var _helpers = require('../../util/helpers');
  11. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  12. /* @vue/component */
  13. // Styles
  14. exports.default = {
  15. name: 'v-combobox',
  16. extends: _VAutocomplete2.default,
  17. props: {
  18. delimiters: {
  19. type: Array,
  20. default: function _default() {
  21. return [];
  22. }
  23. },
  24. returnObject: {
  25. type: Boolean,
  26. default: true
  27. }
  28. },
  29. data: function data() {
  30. return {
  31. editingIndex: -1
  32. };
  33. },
  34. computed: {
  35. counterValue: function counterValue() {
  36. return this.multiple ? this.selectedItems.length : (this.internalSearch || '').toString().length;
  37. },
  38. hasSlot: function hasSlot() {
  39. return _VSelect2.default.options.computed.hasSlot.call(this) || this.multiple;
  40. },
  41. isAnyValueAllowed: function isAnyValueAllowed() {
  42. return true;
  43. },
  44. menuCanShow: function menuCanShow() {
  45. if (!this.isFocused) return false;
  46. return this.hasDisplayedItems || !!this.$slots['no-data'] && !this.hideNoData;
  47. }
  48. },
  49. methods: {
  50. onFilteredItemsChanged: function onFilteredItemsChanged() {
  51. // nop
  52. },
  53. onInternalSearchChanged: function onInternalSearchChanged(val) {
  54. if (val && this.multiple && this.delimiters.length) {
  55. var delimiter = this.delimiters.find(function (d) {
  56. return val.endsWith(d);
  57. });
  58. if (delimiter != null) {
  59. this.internalSearch = val.slice(0, val.length - delimiter.length);
  60. this.updateTags();
  61. }
  62. }
  63. this.updateMenuDimensions();
  64. },
  65. genChipSelection: function genChipSelection(item, index) {
  66. var _this = this;
  67. var chip = _VSelect2.default.options.methods.genChipSelection.call(this, item, index);
  68. // Allow user to update an existing value
  69. if (this.multiple) {
  70. chip.componentOptions.listeners.dblclick = function () {
  71. _this.editingIndex = index;
  72. _this.internalSearch = _this.getText(item);
  73. _this.selectedIndex = -1;
  74. };
  75. }
  76. return chip;
  77. },
  78. onChipInput: function onChipInput(item) {
  79. _VSelect2.default.options.methods.onChipInput.call(this, item);
  80. this.editingIndex = -1;
  81. },
  82. // Requires a manual definition
  83. // to overwrite removal in v-autocomplete
  84. onEnterDown: function onEnterDown(e) {
  85. e.preventDefault();
  86. _VSelect2.default.options.methods.onEnterDown.call(this);
  87. // If has menu index, let v-select-list handle
  88. if (this.getMenuIndex() > -1) return;
  89. this.updateSelf();
  90. },
  91. onKeyDown: function onKeyDown(e) {
  92. var keyCode = e.keyCode;
  93. _VSelect2.default.options.methods.onKeyDown.call(this, e);
  94. // If user is at selection index of 0
  95. // create a new tag
  96. if (this.multiple && keyCode === _helpers.keyCodes.left && this.$refs.input.selectionStart === 0) {
  97. this.updateSelf();
  98. }
  99. // The ordering is important here
  100. // allows new value to be updated
  101. // and then moves the index to the
  102. // proper location
  103. this.changeSelectedIndex(keyCode);
  104. },
  105. onTabDown: function onTabDown(e) {
  106. // When adding tags, if searching and
  107. // there is not a filtered options,
  108. // add the value to the tags list
  109. if (this.multiple && this.internalSearch && this.getMenuIndex() === -1) {
  110. e.preventDefault();
  111. e.stopPropagation();
  112. return this.updateTags();
  113. }
  114. _VAutocomplete2.default.options.methods.onTabDown.call(this, e);
  115. },
  116. selectItem: function selectItem(item) {
  117. // Currently only supports items:<string[]>
  118. if (this.editingIndex > -1) {
  119. this.updateEditing();
  120. } else {
  121. _VSelect2.default.options.methods.selectItem.call(this, item);
  122. }
  123. },
  124. setSelectedItems: function setSelectedItems() {
  125. if (this.internalValue == null || this.internalValue === '') {
  126. this.selectedItems = [];
  127. } else {
  128. this.selectedItems = this.multiple ? this.internalValue : [this.internalValue];
  129. }
  130. },
  131. setValue: function setValue() {
  132. var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.internalSearch;
  133. _VSelect2.default.options.methods.setValue.call(this, value);
  134. },
  135. updateEditing: function updateEditing() {
  136. var value = this.internalValue.slice();
  137. value[this.editingIndex] = this.internalSearch;
  138. this.setValue(value);
  139. this.editingIndex = -1;
  140. },
  141. updateCombobox: function updateCombobox() {
  142. var isUsingSlot = Boolean(this.$scopedSlots.selection) || this.hasChips;
  143. // If search is not dirty and is
  144. // using slot, do nothing
  145. if (isUsingSlot && !this.searchIsDirty) return;
  146. // The internal search is not matching
  147. // the internal value, update the input
  148. if (this.internalSearch !== this.getText(this.internalValue)) this.setValue();
  149. // Reset search if using slot
  150. // to avoid a double input
  151. if (isUsingSlot) this.internalSearch = undefined;
  152. },
  153. updateSelf: function updateSelf() {
  154. this.multiple ? this.updateTags() : this.updateCombobox();
  155. },
  156. updateTags: function updateTags() {
  157. var menuIndex = this.getMenuIndex();
  158. // If the user is not searching
  159. // and no menu item is selected
  160. // do nothing
  161. if (menuIndex < 0 && !this.searchIsDirty) return;
  162. if (this.editingIndex > -1) {
  163. return this.updateEditing();
  164. }
  165. var index = this.selectedItems.indexOf(this.internalSearch);
  166. // If it already exists, do nothing
  167. // this might need to change to bring
  168. // the duplicated item to the last entered
  169. if (index > -1) {
  170. var internalValue = this.internalValue.slice();
  171. internalValue.splice(index, 1);
  172. this.setValue(internalValue);
  173. }
  174. // If menu index is greater than 1
  175. // the selection is handled elsewhere
  176. // TODO: find out where
  177. if (menuIndex > -1) return this.internalSearch = null;
  178. this.selectItem(this.internalSearch);
  179. this.internalSearch = null;
  180. }
  181. }
  182. };
  183. // Utils
  184. // Extensions
  185. //# sourceMappingURL=VCombobox.js.map