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.

VAutocomplete.js 12KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305
  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/_autocompletes.styl';
  4. // Extensions
  5. import VSelect, { defaultMenuProps as VSelectMenuProps } from '../VSelect/VSelect';
  6. import VTextField from '../VTextField/VTextField';
  7. // Utils
  8. import { keyCodes } from '../../util/helpers';
  9. var defaultMenuProps = _extends({}, VSelectMenuProps, {
  10. offsetY: true,
  11. offsetOverflow: true,
  12. transition: false
  13. });
  14. /* @vue/component */
  15. export default VSelect.extend({
  16. name: 'v-autocomplete',
  17. props: {
  18. allowOverflow: {
  19. type: Boolean,
  20. default: true
  21. },
  22. browserAutocomplete: {
  23. type: String,
  24. default: 'off'
  25. },
  26. filter: {
  27. type: Function,
  28. default: function _default(item, queryText, itemText) {
  29. return itemText.toLocaleLowerCase().indexOf(queryText.toLocaleLowerCase()) > -1;
  30. }
  31. },
  32. hideNoData: Boolean,
  33. noFilter: Boolean,
  34. searchInput: {
  35. default: undefined
  36. },
  37. menuProps: {
  38. type: VSelect.options.props.menuProps.type,
  39. default: function _default() {
  40. return defaultMenuProps;
  41. }
  42. },
  43. autoSelectFirst: {
  44. type: Boolean,
  45. default: false
  46. }
  47. },
  48. data: function data(vm) {
  49. return {
  50. attrsInput: null,
  51. lazySearch: vm.searchInput
  52. };
  53. },
  54. computed: {
  55. classes: function classes() {
  56. return Object.assign({}, VSelect.options.computed.classes.call(this), {
  57. 'v-autocomplete': true,
  58. 'v-autocomplete--is-selecting-index': this.selectedIndex > -1
  59. });
  60. },
  61. computedItems: function computedItems() {
  62. return this.filteredItems;
  63. },
  64. selectedValues: function selectedValues() {
  65. var _this = this;
  66. return this.selectedItems.map(function (item) {
  67. return _this.getValue(item);
  68. });
  69. },
  70. hasDisplayedItems: function hasDisplayedItems() {
  71. var _this2 = this;
  72. return this.hideSelected ? this.filteredItems.some(function (item) {
  73. return !_this2.hasItem(item);
  74. }) : this.filteredItems.length > 0;
  75. },
  76. /**
  77. * The range of the current input text
  78. *
  79. * @return {Number}
  80. */
  81. currentRange: function currentRange() {
  82. if (this.selectedItem == null) return 0;
  83. return this.getText(this.selectedItem).toString().length;
  84. },
  85. filteredItems: function filteredItems() {
  86. var _this3 = this;
  87. if (!this.isSearching || this.noFilter || this.internalSearch == null) return this.allItems;
  88. return this.allItems.filter(function (item) {
  89. return _this3.filter(item, _this3.internalSearch.toString(), _this3.getText(item).toString());
  90. });
  91. },
  92. internalSearch: {
  93. get: function get() {
  94. return this.lazySearch;
  95. },
  96. set: function set(val) {
  97. this.lazySearch = val;
  98. this.$emit('update:searchInput', val);
  99. }
  100. },
  101. isAnyValueAllowed: function isAnyValueAllowed() {
  102. return false;
  103. },
  104. isDirty: function isDirty() {
  105. return this.searchIsDirty || this.selectedItems.length > 0;
  106. },
  107. isSearching: function isSearching() {
  108. if (this.multiple) return this.searchIsDirty;
  109. return this.searchIsDirty && this.internalSearch !== this.getText(this.selectedItem);
  110. },
  111. menuCanShow: function menuCanShow() {
  112. if (!this.isFocused) return false;
  113. return this.hasDisplayedItems || !this.hideNoData;
  114. },
  115. $_menuProps: function $_menuProps() {
  116. var props = VSelect.options.computed.$_menuProps.call(this);
  117. props.contentClass = ('v-autocomplete__content ' + (props.contentClass || '')).trim();
  118. return _extends({}, defaultMenuProps, props);
  119. },
  120. searchIsDirty: function searchIsDirty() {
  121. return this.internalSearch != null && this.internalSearch !== '';
  122. },
  123. selectedItem: function selectedItem() {
  124. var _this4 = this;
  125. if (this.multiple) return null;
  126. return this.selectedItems.find(function (i) {
  127. return _this4.valueComparator(_this4.getValue(i), _this4.getValue(_this4.internalValue));
  128. });
  129. },
  130. listData: function listData() {
  131. var data = VSelect.options.computed.listData.call(this);
  132. Object.assign(data.props, {
  133. items: this.virtualizedItems,
  134. noFilter: this.noFilter || !this.isSearching || !this.filteredItems.length,
  135. searchInput: this.internalSearch
  136. });
  137. return data;
  138. }
  139. },
  140. watch: {
  141. filteredItems: function filteredItems(val) {
  142. this.onFilteredItemsChanged(val);
  143. },
  144. internalValue: function internalValue() {
  145. this.setSearch();
  146. },
  147. isFocused: function isFocused(val) {
  148. if (val) {
  149. this.$refs.input && this.$refs.input.select();
  150. } else {
  151. this.updateSelf();
  152. }
  153. },
  154. isMenuActive: function isMenuActive(val) {
  155. if (val || !this.hasSlot) return;
  156. this.lazySearch = null;
  157. },
  158. items: function items(val, oldVal) {
  159. // If we are focused, the menu
  160. // is not active, hide no data is enabled,
  161. // and items change
  162. // User is probably async loading
  163. // items, try to activate the menu
  164. if (!(oldVal && oldVal.length) && this.hideNoData && this.isFocused && !this.isMenuActive && val.length) this.activateMenu();
  165. },
  166. searchInput: function searchInput(val) {
  167. this.lazySearch = val;
  168. },
  169. internalSearch: function internalSearch(val) {
  170. this.onInternalSearchChanged(val);
  171. },
  172. itemText: function itemText() {
  173. this.updateSelf();
  174. }
  175. },
  176. created: function created() {
  177. this.setSearch();
  178. },
  179. methods: {
  180. onFilteredItemsChanged: function onFilteredItemsChanged(val) {
  181. var _this5 = this;
  182. this.setMenuIndex(-1);
  183. this.$nextTick(function () {
  184. _this5.setMenuIndex(val.length > 0 && (val.length === 1 || _this5.autoSelectFirst) ? 0 : -1);
  185. });
  186. },
  187. onInternalSearchChanged: function onInternalSearchChanged(val) {
  188. this.updateMenuDimensions();
  189. },
  190. updateMenuDimensions: function updateMenuDimensions() {
  191. if (this.isMenuActive && this.$refs.menu) {
  192. this.$refs.menu.updateDimensions();
  193. }
  194. },
  195. changeSelectedIndex: function changeSelectedIndex(keyCode) {
  196. // Do not allow changing of selectedIndex
  197. // when search is dirty
  198. if (this.searchIsDirty) return;
  199. if (![keyCodes.backspace, keyCodes.left, keyCodes.right, keyCodes.delete].includes(keyCode)) return;
  200. var indexes = this.selectedItems.length - 1;
  201. if (keyCode === keyCodes.left) {
  202. this.selectedIndex = this.selectedIndex === -1 ? indexes : this.selectedIndex - 1;
  203. } else if (keyCode === keyCodes.right) {
  204. this.selectedIndex = this.selectedIndex >= indexes ? -1 : this.selectedIndex + 1;
  205. } else if (this.selectedIndex === -1) {
  206. this.selectedIndex = indexes;
  207. return;
  208. }
  209. var currentItem = this.selectedItems[this.selectedIndex];
  210. if ([keyCodes.backspace, keyCodes.delete].includes(keyCode) && !this.getDisabled(currentItem)) {
  211. var newIndex = this.selectedIndex === indexes ? this.selectedIndex - 1 : this.selectedItems[this.selectedIndex + 1] ? this.selectedIndex : -1;
  212. if (newIndex === -1) {
  213. this.setValue(this.multiple ? [] : undefined);
  214. } else {
  215. this.selectItem(currentItem);
  216. }
  217. this.selectedIndex = newIndex;
  218. }
  219. },
  220. clearableCallback: function clearableCallback() {
  221. this.internalSearch = undefined;
  222. VSelect.options.methods.clearableCallback.call(this);
  223. },
  224. genInput: function genInput() {
  225. var input = VTextField.options.methods.genInput.call(this);
  226. input.data.attrs.role = 'combobox';
  227. input.data.domProps.value = this.internalSearch;
  228. return input;
  229. },
  230. genSelections: function genSelections() {
  231. return this.hasSlot || this.multiple ? VSelect.options.methods.genSelections.call(this) : [];
  232. },
  233. onClick: function onClick() {
  234. if (this.isDisabled) return;
  235. this.selectedIndex > -1 ? this.selectedIndex = -1 : this.onFocus();
  236. this.activateMenu();
  237. },
  238. onEnterDown: function onEnterDown() {
  239. // Avoid invoking this method
  240. // will cause updateSelf to
  241. // be called emptying search
  242. },
  243. onInput: function onInput(e) {
  244. if (this.selectedIndex > -1) return;
  245. // If typing and menu is not currently active
  246. if (e.target.value) {
  247. this.activateMenu();
  248. if (!this.isAnyValueAllowed) this.setMenuIndex(0);
  249. }
  250. this.mask && this.resetSelections(e.target);
  251. this.internalSearch = e.target.value;
  252. this.badInput = e.target.validity && e.target.validity.badInput;
  253. },
  254. onKeyDown: function onKeyDown(e) {
  255. var keyCode = e.keyCode;
  256. VSelect.options.methods.onKeyDown.call(this, e);
  257. // The ordering is important here
  258. // allows new value to be updated
  259. // and then moves the index to the
  260. // proper location
  261. this.changeSelectedIndex(keyCode);
  262. },
  263. onTabDown: function onTabDown(e) {
  264. VSelect.options.methods.onTabDown.call(this, e);
  265. this.updateSelf();
  266. },
  267. setSelectedItems: function setSelectedItems() {
  268. VSelect.options.methods.setSelectedItems.call(this);
  269. // #4273 Don't replace if searching
  270. // #4403 Don't replace if focused
  271. if (!this.isFocused) this.setSearch();
  272. },
  273. setSearch: function setSearch() {
  274. var _this6 = this;
  275. // Wait for nextTick so selectedItem
  276. // has had time to update
  277. this.$nextTick(function () {
  278. _this6.internalSearch = _this6.multiple && _this6.internalSearch && _this6.isMenuActive ? _this6.internalSearch : !_this6.selectedItems.length || _this6.multiple || _this6.hasSlot ? null : _this6.getText(_this6.selectedItem);
  279. });
  280. },
  281. updateSelf: function updateSelf() {
  282. this.updateAutocomplete();
  283. },
  284. updateAutocomplete: function updateAutocomplete() {
  285. if (!this.searchIsDirty && !this.internalValue) return;
  286. if (!this.valueComparator(this.internalSearch, this.getValue(this.internalValue))) {
  287. this.setSearch();
  288. }
  289. },
  290. hasItem: function hasItem(item) {
  291. return this.selectedValues.indexOf(this.getValue(item)) > -1;
  292. }
  293. }
  294. });
  295. //# sourceMappingURL=VAutocomplete.js.map