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

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