autocomplete.js 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952
  1. module.exports =
  2. /******/ (function(modules) { // webpackBootstrap
  3. /******/ // The module cache
  4. /******/ var installedModules = {};
  5. /******/
  6. /******/ // The require function
  7. /******/ function __webpack_require__(moduleId) {
  8. /******/
  9. /******/ // Check if module is in cache
  10. /******/ if(installedModules[moduleId]) {
  11. /******/ return installedModules[moduleId].exports;
  12. /******/ }
  13. /******/ // Create a new module (and put it into the cache)
  14. /******/ var module = installedModules[moduleId] = {
  15. /******/ i: moduleId,
  16. /******/ l: false,
  17. /******/ exports: {}
  18. /******/ };
  19. /******/
  20. /******/ // Execute the module function
  21. /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
  22. /******/
  23. /******/ // Flag the module as loaded
  24. /******/ module.l = true;
  25. /******/
  26. /******/ // Return the exports of the module
  27. /******/ return module.exports;
  28. /******/ }
  29. /******/
  30. /******/
  31. /******/ // expose the modules object (__webpack_modules__)
  32. /******/ __webpack_require__.m = modules;
  33. /******/
  34. /******/ // expose the module cache
  35. /******/ __webpack_require__.c = installedModules;
  36. /******/
  37. /******/ // define getter function for harmony exports
  38. /******/ __webpack_require__.d = function(exports, name, getter) {
  39. /******/ if(!__webpack_require__.o(exports, name)) {
  40. /******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
  41. /******/ }
  42. /******/ };
  43. /******/
  44. /******/ // define __esModule on exports
  45. /******/ __webpack_require__.r = function(exports) {
  46. /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
  47. /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
  48. /******/ }
  49. /******/ Object.defineProperty(exports, '__esModule', { value: true });
  50. /******/ };
  51. /******/
  52. /******/ // create a fake namespace object
  53. /******/ // mode & 1: value is a module id, require it
  54. /******/ // mode & 2: merge all properties of value into the ns
  55. /******/ // mode & 4: return value when already ns object
  56. /******/ // mode & 8|1: behave like require
  57. /******/ __webpack_require__.t = function(value, mode) {
  58. /******/ if(mode & 1) value = __webpack_require__(value);
  59. /******/ if(mode & 8) return value;
  60. /******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
  61. /******/ var ns = Object.create(null);
  62. /******/ __webpack_require__.r(ns);
  63. /******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
  64. /******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
  65. /******/ return ns;
  66. /******/ };
  67. /******/
  68. /******/ // getDefaultExport function for compatibility with non-harmony modules
  69. /******/ __webpack_require__.n = function(module) {
  70. /******/ var getter = module && module.__esModule ?
  71. /******/ function getDefault() { return module['default']; } :
  72. /******/ function getModuleExports() { return module; };
  73. /******/ __webpack_require__.d(getter, 'a', getter);
  74. /******/ return getter;
  75. /******/ };
  76. /******/
  77. /******/ // Object.prototype.hasOwnProperty.call
  78. /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
  79. /******/
  80. /******/ // __webpack_public_path__
  81. /******/ __webpack_require__.p = "/dist/";
  82. /******/
  83. /******/
  84. /******/ // Load entry module and return exports
  85. /******/ return __webpack_require__(__webpack_require__.s = 64);
  86. /******/ })
  87. /************************************************************************/
  88. /******/ ({
  89. /***/ 0:
  90. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  91. "use strict";
  92. /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return normalizeComponent; });
  93. /* globals __VUE_SSR_CONTEXT__ */
  94. // IMPORTANT: Do NOT use ES2015 features in this file (except for modules).
  95. // This module is a runtime utility for cleaner component module output and will
  96. // be included in the final webpack user bundle.
  97. function normalizeComponent (
  98. scriptExports,
  99. render,
  100. staticRenderFns,
  101. functionalTemplate,
  102. injectStyles,
  103. scopeId,
  104. moduleIdentifier, /* server only */
  105. shadowMode /* vue-cli only */
  106. ) {
  107. // Vue.extend constructor export interop
  108. var options = typeof scriptExports === 'function'
  109. ? scriptExports.options
  110. : scriptExports
  111. // render functions
  112. if (render) {
  113. options.render = render
  114. options.staticRenderFns = staticRenderFns
  115. options._compiled = true
  116. }
  117. // functional template
  118. if (functionalTemplate) {
  119. options.functional = true
  120. }
  121. // scopedId
  122. if (scopeId) {
  123. options._scopeId = 'data-v-' + scopeId
  124. }
  125. var hook
  126. if (moduleIdentifier) { // server build
  127. hook = function (context) {
  128. // 2.3 injection
  129. context =
  130. context || // cached call
  131. (this.$vnode && this.$vnode.ssrContext) || // stateful
  132. (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional
  133. // 2.2 with runInNewContext: true
  134. if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
  135. context = __VUE_SSR_CONTEXT__
  136. }
  137. // inject component styles
  138. if (injectStyles) {
  139. injectStyles.call(this, context)
  140. }
  141. // register component module identifier for async chunk inferrence
  142. if (context && context._registeredComponents) {
  143. context._registeredComponents.add(moduleIdentifier)
  144. }
  145. }
  146. // used by ssr in case component is cached and beforeCreate
  147. // never gets called
  148. options._ssrRegister = hook
  149. } else if (injectStyles) {
  150. hook = shadowMode
  151. ? function () { injectStyles.call(this, this.$root.$options.shadowRoot) }
  152. : injectStyles
  153. }
  154. if (hook) {
  155. if (options.functional) {
  156. // for template-only hot-reload because in that case the render fn doesn't
  157. // go through the normalizer
  158. options._injectStyles = hook
  159. // register for functioal component in vue file
  160. var originalRender = options.render
  161. options.render = function renderWithStyleInjection (h, context) {
  162. hook.call(context)
  163. return originalRender(h, context)
  164. }
  165. } else {
  166. // inject component registration as beforeCreate hook
  167. var existing = options.beforeCreate
  168. options.beforeCreate = existing
  169. ? [].concat(existing, hook)
  170. : [hook]
  171. }
  172. }
  173. return {
  174. exports: scriptExports,
  175. options: options
  176. }
  177. }
  178. /***/ }),
  179. /***/ 10:
  180. /***/ (function(module, exports) {
  181. module.exports = require("element-ui/lib/input");
  182. /***/ }),
  183. /***/ 11:
  184. /***/ (function(module, exports) {
  185. module.exports = require("element-ui/lib/mixins/migrating");
  186. /***/ }),
  187. /***/ 12:
  188. /***/ (function(module, exports) {
  189. module.exports = require("element-ui/lib/utils/clickoutside");
  190. /***/ }),
  191. /***/ 15:
  192. /***/ (function(module, exports) {
  193. module.exports = require("element-ui/lib/scrollbar");
  194. /***/ }),
  195. /***/ 18:
  196. /***/ (function(module, exports) {
  197. module.exports = require("throttle-debounce/debounce");
  198. /***/ }),
  199. /***/ 22:
  200. /***/ (function(module, exports) {
  201. module.exports = require("element-ui/lib/mixins/focus");
  202. /***/ }),
  203. /***/ 3:
  204. /***/ (function(module, exports) {
  205. module.exports = require("element-ui/lib/utils/util");
  206. /***/ }),
  207. /***/ 4:
  208. /***/ (function(module, exports) {
  209. module.exports = require("element-ui/lib/mixins/emitter");
  210. /***/ }),
  211. /***/ 5:
  212. /***/ (function(module, exports) {
  213. module.exports = require("element-ui/lib/utils/vue-popper");
  214. /***/ }),
  215. /***/ 64:
  216. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  217. "use strict";
  218. __webpack_require__.r(__webpack_exports__);
  219. // CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./packages/autocomplete/src/autocomplete.vue?vue&type=template&id=152f2ee6&
  220. var render = function() {
  221. var _vm = this
  222. var _h = _vm.$createElement
  223. var _c = _vm._self._c || _h
  224. return _c(
  225. "div",
  226. {
  227. directives: [
  228. {
  229. name: "clickoutside",
  230. rawName: "v-clickoutside",
  231. value: _vm.close,
  232. expression: "close"
  233. }
  234. ],
  235. staticClass: "el-autocomplete",
  236. attrs: {
  237. "aria-haspopup": "listbox",
  238. role: "combobox",
  239. "aria-expanded": _vm.suggestionVisible,
  240. "aria-owns": _vm.id
  241. }
  242. },
  243. [
  244. _c(
  245. "el-input",
  246. _vm._b(
  247. {
  248. ref: "input",
  249. on: {
  250. input: _vm.handleInput,
  251. change: _vm.handleChange,
  252. focus: _vm.handleFocus,
  253. blur: _vm.handleBlur,
  254. clear: _vm.handleClear
  255. },
  256. nativeOn: {
  257. keydown: [
  258. function($event) {
  259. if (
  260. !("button" in $event) &&
  261. _vm._k($event.keyCode, "up", 38, $event.key, [
  262. "Up",
  263. "ArrowUp"
  264. ])
  265. ) {
  266. return null
  267. }
  268. $event.preventDefault()
  269. _vm.highlight(_vm.highlightedIndex - 1)
  270. },
  271. function($event) {
  272. if (
  273. !("button" in $event) &&
  274. _vm._k($event.keyCode, "down", 40, $event.key, [
  275. "Down",
  276. "ArrowDown"
  277. ])
  278. ) {
  279. return null
  280. }
  281. $event.preventDefault()
  282. _vm.highlight(_vm.highlightedIndex + 1)
  283. },
  284. function($event) {
  285. if (
  286. !("button" in $event) &&
  287. _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")
  288. ) {
  289. return null
  290. }
  291. return _vm.handleKeyEnter($event)
  292. },
  293. function($event) {
  294. if (
  295. !("button" in $event) &&
  296. _vm._k($event.keyCode, "tab", 9, $event.key, "Tab")
  297. ) {
  298. return null
  299. }
  300. return _vm.close($event)
  301. }
  302. ]
  303. }
  304. },
  305. "el-input",
  306. [_vm.$props, _vm.$attrs],
  307. false
  308. ),
  309. [
  310. _vm.$slots.prepend
  311. ? _c("template", { slot: "prepend" }, [_vm._t("prepend")], 2)
  312. : _vm._e(),
  313. _vm.$slots.append
  314. ? _c("template", { slot: "append" }, [_vm._t("append")], 2)
  315. : _vm._e(),
  316. _vm.$slots.prefix
  317. ? _c("template", { slot: "prefix" }, [_vm._t("prefix")], 2)
  318. : _vm._e(),
  319. _vm.$slots.suffix
  320. ? _c("template", { slot: "suffix" }, [_vm._t("suffix")], 2)
  321. : _vm._e()
  322. ],
  323. 2
  324. ),
  325. _c(
  326. "el-autocomplete-suggestions",
  327. {
  328. ref: "suggestions",
  329. class: [_vm.popperClass ? _vm.popperClass : ""],
  330. attrs: {
  331. "visible-arrow": "",
  332. "popper-options": _vm.popperOptions,
  333. "append-to-body": _vm.popperAppendToBody,
  334. placement: _vm.placement,
  335. id: _vm.id
  336. }
  337. },
  338. _vm._l(_vm.suggestions, function(item, index) {
  339. return _c(
  340. "li",
  341. {
  342. key: index,
  343. class: { highlighted: _vm.highlightedIndex === index },
  344. attrs: {
  345. id: _vm.id + "-item-" + index,
  346. role: "option",
  347. "aria-selected": _vm.highlightedIndex === index
  348. },
  349. on: {
  350. click: function($event) {
  351. _vm.select(item)
  352. }
  353. }
  354. },
  355. [
  356. _vm._t(
  357. "default",
  358. [
  359. _vm._v("\n " + _vm._s(item[_vm.valueKey]) + "\n ")
  360. ],
  361. { item: item }
  362. )
  363. ],
  364. 2
  365. )
  366. }),
  367. 0
  368. )
  369. ],
  370. 1
  371. )
  372. }
  373. var staticRenderFns = []
  374. render._withStripped = true
  375. // CONCATENATED MODULE: ./packages/autocomplete/src/autocomplete.vue?vue&type=template&id=152f2ee6&
  376. // EXTERNAL MODULE: external "throttle-debounce/debounce"
  377. var debounce_ = __webpack_require__(18);
  378. var debounce_default = /*#__PURE__*/__webpack_require__.n(debounce_);
  379. // EXTERNAL MODULE: external "element-ui/lib/input"
  380. var input_ = __webpack_require__(10);
  381. var input_default = /*#__PURE__*/__webpack_require__.n(input_);
  382. // EXTERNAL MODULE: external "element-ui/lib/utils/clickoutside"
  383. var clickoutside_ = __webpack_require__(12);
  384. var clickoutside_default = /*#__PURE__*/__webpack_require__.n(clickoutside_);
  385. // CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./packages/autocomplete/src/autocomplete-suggestions.vue?vue&type=template&id=cd10dcf0&
  386. var autocomplete_suggestionsvue_type_template_id_cd10dcf0_render = function() {
  387. var _vm = this
  388. var _h = _vm.$createElement
  389. var _c = _vm._self._c || _h
  390. return _c(
  391. "transition",
  392. { attrs: { name: "el-zoom-in-top" }, on: { "after-leave": _vm.doDestroy } },
  393. [
  394. _c(
  395. "div",
  396. {
  397. directives: [
  398. {
  399. name: "show",
  400. rawName: "v-show",
  401. value: _vm.showPopper,
  402. expression: "showPopper"
  403. }
  404. ],
  405. staticClass: "el-autocomplete-suggestion el-popper",
  406. class: {
  407. "is-loading": !_vm.parent.hideLoading && _vm.parent.loading
  408. },
  409. style: { width: _vm.dropdownWidth },
  410. attrs: { role: "region" }
  411. },
  412. [
  413. _c(
  414. "el-scrollbar",
  415. {
  416. attrs: {
  417. tag: "ul",
  418. "wrap-class": "el-autocomplete-suggestion__wrap",
  419. "view-class": "el-autocomplete-suggestion__list"
  420. }
  421. },
  422. [
  423. !_vm.parent.hideLoading && _vm.parent.loading
  424. ? _c("li", [_c("i", { staticClass: "el-icon-loading" })])
  425. : _vm._t("default")
  426. ],
  427. 2
  428. )
  429. ],
  430. 1
  431. )
  432. ]
  433. )
  434. }
  435. var autocomplete_suggestionsvue_type_template_id_cd10dcf0_staticRenderFns = []
  436. autocomplete_suggestionsvue_type_template_id_cd10dcf0_render._withStripped = true
  437. // CONCATENATED MODULE: ./packages/autocomplete/src/autocomplete-suggestions.vue?vue&type=template&id=cd10dcf0&
  438. // EXTERNAL MODULE: external "element-ui/lib/utils/vue-popper"
  439. var vue_popper_ = __webpack_require__(5);
  440. var vue_popper_default = /*#__PURE__*/__webpack_require__.n(vue_popper_);
  441. // EXTERNAL MODULE: external "element-ui/lib/mixins/emitter"
  442. var emitter_ = __webpack_require__(4);
  443. var emitter_default = /*#__PURE__*/__webpack_require__.n(emitter_);
  444. // EXTERNAL MODULE: external "element-ui/lib/scrollbar"
  445. var scrollbar_ = __webpack_require__(15);
  446. var scrollbar_default = /*#__PURE__*/__webpack_require__.n(scrollbar_);
  447. // CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./packages/autocomplete/src/autocomplete-suggestions.vue?vue&type=script&lang=js&
  448. //
  449. //
  450. //
  451. //
  452. //
  453. //
  454. //
  455. //
  456. //
  457. //
  458. //
  459. //
  460. //
  461. //
  462. //
  463. //
  464. //
  465. //
  466. //
  467. /* harmony default export */ var autocomplete_suggestionsvue_type_script_lang_js_ = ({
  468. components: { ElScrollbar: scrollbar_default.a },
  469. mixins: [vue_popper_default.a, emitter_default.a],
  470. componentName: 'ElAutocompleteSuggestions',
  471. data: function data() {
  472. return {
  473. parent: this.$parent,
  474. dropdownWidth: ''
  475. };
  476. },
  477. props: {
  478. options: {
  479. default: function _default() {
  480. return {
  481. gpuAcceleration: false
  482. };
  483. }
  484. },
  485. id: String
  486. },
  487. methods: {
  488. select: function select(item) {
  489. this.dispatch('ElAutocomplete', 'item-click', item);
  490. }
  491. },
  492. updated: function updated() {
  493. var _this = this;
  494. this.$nextTick(function (_) {
  495. _this.popperJS && _this.updatePopper();
  496. });
  497. },
  498. mounted: function mounted() {
  499. this.$parent.popperElm = this.popperElm = this.$el;
  500. this.referenceElm = this.$parent.$refs.input.$refs.input || this.$parent.$refs.input.$refs.textarea;
  501. this.referenceList = this.$el.querySelector('.el-autocomplete-suggestion__list');
  502. this.referenceList.setAttribute('role', 'listbox');
  503. this.referenceList.setAttribute('id', this.id);
  504. },
  505. created: function created() {
  506. var _this2 = this;
  507. this.$on('visible', function (val, inputWidth) {
  508. _this2.dropdownWidth = inputWidth + 'px';
  509. _this2.showPopper = val;
  510. });
  511. }
  512. });
  513. // CONCATENATED MODULE: ./packages/autocomplete/src/autocomplete-suggestions.vue?vue&type=script&lang=js&
  514. /* harmony default export */ var src_autocomplete_suggestionsvue_type_script_lang_js_ = (autocomplete_suggestionsvue_type_script_lang_js_);
  515. // EXTERNAL MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
  516. var componentNormalizer = __webpack_require__(0);
  517. // CONCATENATED MODULE: ./packages/autocomplete/src/autocomplete-suggestions.vue
  518. /* normalize component */
  519. var component = Object(componentNormalizer["a" /* default */])(
  520. src_autocomplete_suggestionsvue_type_script_lang_js_,
  521. autocomplete_suggestionsvue_type_template_id_cd10dcf0_render,
  522. autocomplete_suggestionsvue_type_template_id_cd10dcf0_staticRenderFns,
  523. false,
  524. null,
  525. null,
  526. null
  527. )
  528. /* hot reload */
  529. if (false) { var api; }
  530. component.options.__file = "packages/autocomplete/src/autocomplete-suggestions.vue"
  531. /* harmony default export */ var autocomplete_suggestions = (component.exports);
  532. // EXTERNAL MODULE: external "element-ui/lib/mixins/migrating"
  533. var migrating_ = __webpack_require__(11);
  534. var migrating_default = /*#__PURE__*/__webpack_require__.n(migrating_);
  535. // EXTERNAL MODULE: external "element-ui/lib/utils/util"
  536. var util_ = __webpack_require__(3);
  537. // EXTERNAL MODULE: external "element-ui/lib/mixins/focus"
  538. var focus_ = __webpack_require__(22);
  539. var focus_default = /*#__PURE__*/__webpack_require__.n(focus_);
  540. // CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./packages/autocomplete/src/autocomplete.vue?vue&type=script&lang=js&
  541. //
  542. //
  543. //
  544. //
  545. //
  546. //
  547. //
  548. //
  549. //
  550. //
  551. //
  552. //
  553. //
  554. //
  555. //
  556. //
  557. //
  558. //
  559. //
  560. //
  561. //
  562. //
  563. //
  564. //
  565. //
  566. //
  567. //
  568. //
  569. //
  570. //
  571. //
  572. //
  573. //
  574. //
  575. //
  576. //
  577. //
  578. //
  579. //
  580. //
  581. //
  582. //
  583. //
  584. //
  585. //
  586. //
  587. //
  588. //
  589. //
  590. //
  591. //
  592. //
  593. //
  594. //
  595. //
  596. //
  597. //
  598. //
  599. //
  600. /* harmony default export */ var autocompletevue_type_script_lang_js_ = ({
  601. name: 'ElAutocomplete',
  602. mixins: [emitter_default.a, focus_default()('input'), migrating_default.a],
  603. inheritAttrs: false,
  604. componentName: 'ElAutocomplete',
  605. components: {
  606. ElInput: input_default.a,
  607. ElAutocompleteSuggestions: autocomplete_suggestions
  608. },
  609. directives: { Clickoutside: clickoutside_default.a },
  610. props: {
  611. valueKey: {
  612. type: String,
  613. default: 'value'
  614. },
  615. popperClass: String,
  616. popperOptions: Object,
  617. placeholder: String,
  618. clearable: {
  619. type: Boolean,
  620. default: false
  621. },
  622. disabled: Boolean,
  623. name: String,
  624. size: String,
  625. value: String,
  626. maxlength: Number,
  627. minlength: Number,
  628. autofocus: Boolean,
  629. fetchSuggestions: Function,
  630. triggerOnFocus: {
  631. type: Boolean,
  632. default: true
  633. },
  634. customItem: String,
  635. selectWhenUnmatched: {
  636. type: Boolean,
  637. default: false
  638. },
  639. prefixIcon: String,
  640. suffixIcon: String,
  641. label: String,
  642. debounce: {
  643. type: Number,
  644. default: 300
  645. },
  646. placement: {
  647. type: String,
  648. default: 'bottom-start'
  649. },
  650. hideLoading: Boolean,
  651. popperAppendToBody: {
  652. type: Boolean,
  653. default: true
  654. },
  655. highlightFirstItem: {
  656. type: Boolean,
  657. default: false
  658. }
  659. },
  660. data: function data() {
  661. return {
  662. activated: false,
  663. suggestions: [],
  664. loading: false,
  665. highlightedIndex: -1,
  666. suggestionDisabled: false
  667. };
  668. },
  669. computed: {
  670. suggestionVisible: function suggestionVisible() {
  671. var suggestions = this.suggestions;
  672. var isValidData = Array.isArray(suggestions) && suggestions.length > 0;
  673. return (isValidData || this.loading) && this.activated;
  674. },
  675. id: function id() {
  676. return 'el-autocomplete-' + Object(util_["generateId"])();
  677. }
  678. },
  679. watch: {
  680. suggestionVisible: function suggestionVisible(val) {
  681. var $input = this.getInput();
  682. if ($input) {
  683. this.broadcast('ElAutocompleteSuggestions', 'visible', [val, $input.offsetWidth]);
  684. }
  685. }
  686. },
  687. methods: {
  688. getMigratingConfig: function getMigratingConfig() {
  689. return {
  690. props: {
  691. 'custom-item': 'custom-item is removed, use scoped slot instead.',
  692. 'props': 'props is removed, use value-key instead.'
  693. }
  694. };
  695. },
  696. getData: function getData(queryString) {
  697. var _this = this;
  698. if (this.suggestionDisabled) {
  699. return;
  700. }
  701. this.loading = true;
  702. this.fetchSuggestions(queryString, function (suggestions) {
  703. _this.loading = false;
  704. if (_this.suggestionDisabled) {
  705. return;
  706. }
  707. if (Array.isArray(suggestions)) {
  708. _this.suggestions = suggestions;
  709. _this.highlightedIndex = _this.highlightFirstItem ? 0 : -1;
  710. } else {
  711. console.error('[Element Error][Autocomplete]autocomplete suggestions must be an array');
  712. }
  713. });
  714. },
  715. handleInput: function handleInput(value) {
  716. this.$emit('input', value);
  717. this.suggestionDisabled = false;
  718. if (!this.triggerOnFocus && !value) {
  719. this.suggestionDisabled = true;
  720. this.suggestions = [];
  721. return;
  722. }
  723. this.debouncedGetData(value);
  724. },
  725. handleChange: function handleChange(value) {
  726. this.$emit('change', value);
  727. },
  728. handleFocus: function handleFocus(event) {
  729. this.activated = true;
  730. this.$emit('focus', event);
  731. if (this.triggerOnFocus) {
  732. this.debouncedGetData(this.value);
  733. }
  734. },
  735. handleBlur: function handleBlur(event) {
  736. this.$emit('blur', event);
  737. },
  738. handleClear: function handleClear() {
  739. this.activated = false;
  740. this.$emit('clear');
  741. },
  742. close: function close(e) {
  743. this.activated = false;
  744. },
  745. handleKeyEnter: function handleKeyEnter(e) {
  746. var _this2 = this;
  747. if (this.suggestionVisible && this.highlightedIndex >= 0 && this.highlightedIndex < this.suggestions.length) {
  748. e.preventDefault();
  749. this.select(this.suggestions[this.highlightedIndex]);
  750. } else if (this.selectWhenUnmatched) {
  751. this.$emit('select', { value: this.value });
  752. this.$nextTick(function (_) {
  753. _this2.suggestions = [];
  754. _this2.highlightedIndex = -1;
  755. });
  756. }
  757. },
  758. select: function select(item) {
  759. var _this3 = this;
  760. this.$emit('input', item[this.valueKey]);
  761. this.$emit('select', item);
  762. this.$nextTick(function (_) {
  763. _this3.suggestions = [];
  764. _this3.highlightedIndex = -1;
  765. });
  766. },
  767. highlight: function highlight(index) {
  768. if (!this.suggestionVisible || this.loading) {
  769. return;
  770. }
  771. if (index < 0) {
  772. this.highlightedIndex = -1;
  773. return;
  774. }
  775. if (index >= this.suggestions.length) {
  776. index = this.suggestions.length - 1;
  777. }
  778. var suggestion = this.$refs.suggestions.$el.querySelector('.el-autocomplete-suggestion__wrap');
  779. var suggestionList = suggestion.querySelectorAll('.el-autocomplete-suggestion__list li');
  780. var highlightItem = suggestionList[index];
  781. var scrollTop = suggestion.scrollTop;
  782. var offsetTop = highlightItem.offsetTop;
  783. if (offsetTop + highlightItem.scrollHeight > scrollTop + suggestion.clientHeight) {
  784. suggestion.scrollTop += highlightItem.scrollHeight;
  785. }
  786. if (offsetTop < scrollTop) {
  787. suggestion.scrollTop -= highlightItem.scrollHeight;
  788. }
  789. this.highlightedIndex = index;
  790. var $input = this.getInput();
  791. $input.setAttribute('aria-activedescendant', this.id + '-item-' + this.highlightedIndex);
  792. },
  793. getInput: function getInput() {
  794. return this.$refs.input.getInput();
  795. }
  796. },
  797. mounted: function mounted() {
  798. var _this4 = this;
  799. this.debouncedGetData = debounce_default()(this.debounce, this.getData);
  800. this.$on('item-click', function (item) {
  801. _this4.select(item);
  802. });
  803. var $input = this.getInput();
  804. $input.setAttribute('role', 'textbox');
  805. $input.setAttribute('aria-autocomplete', 'list');
  806. $input.setAttribute('aria-controls', 'id');
  807. $input.setAttribute('aria-activedescendant', this.id + '-item-' + this.highlightedIndex);
  808. },
  809. beforeDestroy: function beforeDestroy() {
  810. this.$refs.suggestions.$destroy();
  811. }
  812. });
  813. // CONCATENATED MODULE: ./packages/autocomplete/src/autocomplete.vue?vue&type=script&lang=js&
  814. /* harmony default export */ var src_autocompletevue_type_script_lang_js_ = (autocompletevue_type_script_lang_js_);
  815. // CONCATENATED MODULE: ./packages/autocomplete/src/autocomplete.vue
  816. /* normalize component */
  817. var autocomplete_component = Object(componentNormalizer["a" /* default */])(
  818. src_autocompletevue_type_script_lang_js_,
  819. render,
  820. staticRenderFns,
  821. false,
  822. null,
  823. null,
  824. null
  825. )
  826. /* hot reload */
  827. if (false) { var autocomplete_api; }
  828. autocomplete_component.options.__file = "packages/autocomplete/src/autocomplete.vue"
  829. /* harmony default export */ var autocomplete = (autocomplete_component.exports);
  830. // CONCATENATED MODULE: ./packages/autocomplete/index.js
  831. /* istanbul ignore next */
  832. autocomplete.install = function (Vue) {
  833. Vue.component(autocomplete.name, autocomplete);
  834. };
  835. /* harmony default export */ var packages_autocomplete = __webpack_exports__["default"] = (autocomplete);
  836. /***/ })
  837. /******/ });