autocomplete.js 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947
  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 = 65);
  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. /***/ 14:
  192. /***/ (function(module, exports) {
  193. module.exports = require("element-ui/lib/scrollbar");
  194. /***/ }),
  195. /***/ 17:
  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. /***/ 65:
  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.handleChange,
  251. focus: _vm.handleFocus,
  252. blur: _vm.handleBlur,
  253. clear: _vm.handleClear
  254. },
  255. nativeOn: {
  256. keydown: [
  257. function($event) {
  258. if (
  259. !("button" in $event) &&
  260. _vm._k($event.keyCode, "up", 38, $event.key, [
  261. "Up",
  262. "ArrowUp"
  263. ])
  264. ) {
  265. return null
  266. }
  267. $event.preventDefault()
  268. _vm.highlight(_vm.highlightedIndex - 1)
  269. },
  270. function($event) {
  271. if (
  272. !("button" in $event) &&
  273. _vm._k($event.keyCode, "down", 40, $event.key, [
  274. "Down",
  275. "ArrowDown"
  276. ])
  277. ) {
  278. return null
  279. }
  280. $event.preventDefault()
  281. _vm.highlight(_vm.highlightedIndex + 1)
  282. },
  283. function($event) {
  284. if (
  285. !("button" in $event) &&
  286. _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")
  287. ) {
  288. return null
  289. }
  290. return _vm.handleKeyEnter($event)
  291. },
  292. function($event) {
  293. if (
  294. !("button" in $event) &&
  295. _vm._k($event.keyCode, "tab", 9, $event.key, "Tab")
  296. ) {
  297. return null
  298. }
  299. return _vm.close($event)
  300. }
  301. ]
  302. }
  303. },
  304. "el-input",
  305. [_vm.$props, _vm.$attrs],
  306. false
  307. ),
  308. [
  309. _vm.$slots.prepend
  310. ? _c("template", { slot: "prepend" }, [_vm._t("prepend")], 2)
  311. : _vm._e(),
  312. _vm.$slots.append
  313. ? _c("template", { slot: "append" }, [_vm._t("append")], 2)
  314. : _vm._e(),
  315. _vm.$slots.prefix
  316. ? _c("template", { slot: "prefix" }, [_vm._t("prefix")], 2)
  317. : _vm._e(),
  318. _vm.$slots.suffix
  319. ? _c("template", { slot: "suffix" }, [_vm._t("suffix")], 2)
  320. : _vm._e()
  321. ],
  322. 2
  323. ),
  324. _c(
  325. "el-autocomplete-suggestions",
  326. {
  327. ref: "suggestions",
  328. class: [_vm.popperClass ? _vm.popperClass : ""],
  329. attrs: {
  330. "visible-arrow": "",
  331. "popper-options": _vm.popperOptions,
  332. "append-to-body": _vm.popperAppendToBody,
  333. placement: _vm.placement,
  334. id: _vm.id
  335. }
  336. },
  337. _vm._l(_vm.suggestions, function(item, index) {
  338. return _c(
  339. "li",
  340. {
  341. key: index,
  342. class: { highlighted: _vm.highlightedIndex === index },
  343. attrs: {
  344. id: _vm.id + "-item-" + index,
  345. role: "option",
  346. "aria-selected": _vm.highlightedIndex === index
  347. },
  348. on: {
  349. click: function($event) {
  350. _vm.select(item)
  351. }
  352. }
  353. },
  354. [
  355. _vm._t(
  356. "default",
  357. [
  358. _vm._v("\n " + _vm._s(item[_vm.valueKey]) + "\n ")
  359. ],
  360. { item: item }
  361. )
  362. ],
  363. 2
  364. )
  365. }),
  366. 0
  367. )
  368. ],
  369. 1
  370. )
  371. }
  372. var staticRenderFns = []
  373. render._withStripped = true
  374. // CONCATENATED MODULE: ./packages/autocomplete/src/autocomplete.vue?vue&type=template&id=152f2ee6&
  375. // EXTERNAL MODULE: external "throttle-debounce/debounce"
  376. var debounce_ = __webpack_require__(17);
  377. var debounce_default = /*#__PURE__*/__webpack_require__.n(debounce_);
  378. // EXTERNAL MODULE: external "element-ui/lib/input"
  379. var input_ = __webpack_require__(10);
  380. var input_default = /*#__PURE__*/__webpack_require__.n(input_);
  381. // EXTERNAL MODULE: external "element-ui/lib/utils/clickoutside"
  382. var clickoutside_ = __webpack_require__(12);
  383. var clickoutside_default = /*#__PURE__*/__webpack_require__.n(clickoutside_);
  384. // 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&
  385. var autocomplete_suggestionsvue_type_template_id_cd10dcf0_render = function() {
  386. var _vm = this
  387. var _h = _vm.$createElement
  388. var _c = _vm._self._c || _h
  389. return _c(
  390. "transition",
  391. { attrs: { name: "el-zoom-in-top" }, on: { "after-leave": _vm.doDestroy } },
  392. [
  393. _c(
  394. "div",
  395. {
  396. directives: [
  397. {
  398. name: "show",
  399. rawName: "v-show",
  400. value: _vm.showPopper,
  401. expression: "showPopper"
  402. }
  403. ],
  404. staticClass: "el-autocomplete-suggestion el-popper",
  405. class: {
  406. "is-loading": !_vm.parent.hideLoading && _vm.parent.loading
  407. },
  408. style: { width: _vm.dropdownWidth },
  409. attrs: { role: "region" }
  410. },
  411. [
  412. _c(
  413. "el-scrollbar",
  414. {
  415. attrs: {
  416. tag: "ul",
  417. "wrap-class": "el-autocomplete-suggestion__wrap",
  418. "view-class": "el-autocomplete-suggestion__list"
  419. }
  420. },
  421. [
  422. !_vm.parent.hideLoading && _vm.parent.loading
  423. ? _c("li", [_c("i", { staticClass: "el-icon-loading" })])
  424. : _vm._t("default")
  425. ],
  426. 2
  427. )
  428. ],
  429. 1
  430. )
  431. ]
  432. )
  433. }
  434. var autocomplete_suggestionsvue_type_template_id_cd10dcf0_staticRenderFns = []
  435. autocomplete_suggestionsvue_type_template_id_cd10dcf0_render._withStripped = true
  436. // CONCATENATED MODULE: ./packages/autocomplete/src/autocomplete-suggestions.vue?vue&type=template&id=cd10dcf0&
  437. // EXTERNAL MODULE: external "element-ui/lib/utils/vue-popper"
  438. var vue_popper_ = __webpack_require__(5);
  439. var vue_popper_default = /*#__PURE__*/__webpack_require__.n(vue_popper_);
  440. // EXTERNAL MODULE: external "element-ui/lib/mixins/emitter"
  441. var emitter_ = __webpack_require__(4);
  442. var emitter_default = /*#__PURE__*/__webpack_require__.n(emitter_);
  443. // EXTERNAL MODULE: external "element-ui/lib/scrollbar"
  444. var scrollbar_ = __webpack_require__(14);
  445. var scrollbar_default = /*#__PURE__*/__webpack_require__.n(scrollbar_);
  446. // 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&
  447. //
  448. //
  449. //
  450. //
  451. //
  452. //
  453. //
  454. //
  455. //
  456. //
  457. //
  458. //
  459. //
  460. //
  461. //
  462. //
  463. //
  464. //
  465. //
  466. /* harmony default export */ var autocomplete_suggestionsvue_type_script_lang_js_ = ({
  467. components: { ElScrollbar: scrollbar_default.a },
  468. mixins: [vue_popper_default.a, emitter_default.a],
  469. componentName: 'ElAutocompleteSuggestions',
  470. data: function data() {
  471. return {
  472. parent: this.$parent,
  473. dropdownWidth: ''
  474. };
  475. },
  476. props: {
  477. options: {
  478. default: function _default() {
  479. return {
  480. gpuAcceleration: false
  481. };
  482. }
  483. },
  484. id: String
  485. },
  486. methods: {
  487. select: function select(item) {
  488. this.dispatch('ElAutocomplete', 'item-click', item);
  489. }
  490. },
  491. updated: function updated() {
  492. var _this = this;
  493. this.$nextTick(function (_) {
  494. _this.popperJS && _this.updatePopper();
  495. });
  496. },
  497. mounted: function mounted() {
  498. this.$parent.popperElm = this.popperElm = this.$el;
  499. this.referenceElm = this.$parent.$refs.input.$refs.input;
  500. this.referenceList = this.$el.querySelector('.el-autocomplete-suggestion__list');
  501. this.referenceList.setAttribute('role', 'listbox');
  502. this.referenceList.setAttribute('id', this.id);
  503. },
  504. created: function created() {
  505. var _this2 = this;
  506. this.$on('visible', function (val, inputWidth) {
  507. _this2.dropdownWidth = inputWidth + 'px';
  508. _this2.showPopper = val;
  509. });
  510. }
  511. });
  512. // CONCATENATED MODULE: ./packages/autocomplete/src/autocomplete-suggestions.vue?vue&type=script&lang=js&
  513. /* harmony default export */ var src_autocomplete_suggestionsvue_type_script_lang_js_ = (autocomplete_suggestionsvue_type_script_lang_js_);
  514. // EXTERNAL MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
  515. var componentNormalizer = __webpack_require__(0);
  516. // CONCATENATED MODULE: ./packages/autocomplete/src/autocomplete-suggestions.vue
  517. /* normalize component */
  518. var component = Object(componentNormalizer["a" /* default */])(
  519. src_autocomplete_suggestionsvue_type_script_lang_js_,
  520. autocomplete_suggestionsvue_type_template_id_cd10dcf0_render,
  521. autocomplete_suggestionsvue_type_template_id_cd10dcf0_staticRenderFns,
  522. false,
  523. null,
  524. null,
  525. null
  526. )
  527. /* hot reload */
  528. if (false) { var api; }
  529. component.options.__file = "packages/autocomplete/src/autocomplete-suggestions.vue"
  530. /* harmony default export */ var autocomplete_suggestions = (component.exports);
  531. // EXTERNAL MODULE: external "element-ui/lib/mixins/migrating"
  532. var migrating_ = __webpack_require__(11);
  533. var migrating_default = /*#__PURE__*/__webpack_require__.n(migrating_);
  534. // EXTERNAL MODULE: external "element-ui/lib/utils/util"
  535. var util_ = __webpack_require__(3);
  536. // EXTERNAL MODULE: external "element-ui/lib/mixins/focus"
  537. var focus_ = __webpack_require__(22);
  538. var focus_default = /*#__PURE__*/__webpack_require__.n(focus_);
  539. // 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&
  540. //
  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. /* harmony default export */ var autocompletevue_type_script_lang_js_ = ({
  599. name: 'ElAutocomplete',
  600. mixins: [emitter_default.a, focus_default()('input'), migrating_default.a],
  601. inheritAttrs: false,
  602. componentName: 'ElAutocomplete',
  603. components: {
  604. ElInput: input_default.a,
  605. ElAutocompleteSuggestions: autocomplete_suggestions
  606. },
  607. directives: { Clickoutside: clickoutside_default.a },
  608. props: {
  609. valueKey: {
  610. type: String,
  611. default: 'value'
  612. },
  613. popperClass: String,
  614. popperOptions: Object,
  615. placeholder: String,
  616. clearable: {
  617. type: Boolean,
  618. default: false
  619. },
  620. disabled: Boolean,
  621. name: String,
  622. size: String,
  623. value: String,
  624. maxlength: Number,
  625. minlength: Number,
  626. autofocus: Boolean,
  627. fetchSuggestions: Function,
  628. triggerOnFocus: {
  629. type: Boolean,
  630. default: true
  631. },
  632. customItem: String,
  633. selectWhenUnmatched: {
  634. type: Boolean,
  635. default: false
  636. },
  637. prefixIcon: String,
  638. suffixIcon: String,
  639. label: String,
  640. debounce: {
  641. type: Number,
  642. default: 300
  643. },
  644. placement: {
  645. type: String,
  646. default: 'bottom-start'
  647. },
  648. hideLoading: Boolean,
  649. popperAppendToBody: {
  650. type: Boolean,
  651. default: true
  652. },
  653. highlightFirstItem: {
  654. type: Boolean,
  655. default: false
  656. }
  657. },
  658. data: function data() {
  659. return {
  660. activated: false,
  661. suggestions: [],
  662. loading: false,
  663. highlightedIndex: -1,
  664. suggestionDisabled: false
  665. };
  666. },
  667. computed: {
  668. suggestionVisible: function suggestionVisible() {
  669. var suggestions = this.suggestions;
  670. var isValidData = Array.isArray(suggestions) && suggestions.length > 0;
  671. return (isValidData || this.loading) && this.activated;
  672. },
  673. id: function id() {
  674. return 'el-autocomplete-' + Object(util_["generateId"])();
  675. }
  676. },
  677. watch: {
  678. suggestionVisible: function suggestionVisible(val) {
  679. var $input = this.getInput();
  680. if ($input) {
  681. this.broadcast('ElAutocompleteSuggestions', 'visible', [val, $input.offsetWidth]);
  682. }
  683. }
  684. },
  685. methods: {
  686. getMigratingConfig: function getMigratingConfig() {
  687. return {
  688. props: {
  689. 'custom-item': 'custom-item is removed, use scoped slot instead.',
  690. 'props': 'props is removed, use value-key instead.'
  691. }
  692. };
  693. },
  694. getData: function getData(queryString) {
  695. var _this = this;
  696. if (this.suggestionDisabled) {
  697. return;
  698. }
  699. this.loading = true;
  700. this.fetchSuggestions(queryString, function (suggestions) {
  701. _this.loading = false;
  702. if (_this.suggestionDisabled) {
  703. return;
  704. }
  705. if (Array.isArray(suggestions)) {
  706. _this.suggestions = suggestions;
  707. _this.highlightedIndex = _this.highlightFirstItem ? 0 : -1;
  708. } else {
  709. console.error('[Element Error][Autocomplete]autocomplete suggestions must be an array');
  710. }
  711. });
  712. },
  713. handleChange: function handleChange(value) {
  714. this.$emit('input', value);
  715. this.suggestionDisabled = false;
  716. if (!this.triggerOnFocus && !value) {
  717. this.suggestionDisabled = true;
  718. this.suggestions = [];
  719. return;
  720. }
  721. this.debouncedGetData(value);
  722. },
  723. handleFocus: function handleFocus(event) {
  724. this.activated = true;
  725. this.$emit('focus', event);
  726. if (this.triggerOnFocus) {
  727. this.debouncedGetData(this.value);
  728. }
  729. },
  730. handleBlur: function handleBlur(event) {
  731. this.$emit('blur', event);
  732. },
  733. handleClear: function handleClear() {
  734. this.activated = false;
  735. this.$emit('clear');
  736. },
  737. close: function close(e) {
  738. this.activated = false;
  739. },
  740. handleKeyEnter: function handleKeyEnter(e) {
  741. var _this2 = this;
  742. if (this.suggestionVisible && this.highlightedIndex >= 0 && this.highlightedIndex < this.suggestions.length) {
  743. e.preventDefault();
  744. this.select(this.suggestions[this.highlightedIndex]);
  745. } else if (this.selectWhenUnmatched) {
  746. this.$emit('select', { value: this.value });
  747. this.$nextTick(function (_) {
  748. _this2.suggestions = [];
  749. _this2.highlightedIndex = -1;
  750. });
  751. }
  752. },
  753. select: function select(item) {
  754. var _this3 = this;
  755. this.$emit('input', item[this.valueKey]);
  756. this.$emit('select', item);
  757. this.$nextTick(function (_) {
  758. _this3.suggestions = [];
  759. _this3.highlightedIndex = -1;
  760. });
  761. },
  762. highlight: function highlight(index) {
  763. if (!this.suggestionVisible || this.loading) {
  764. return;
  765. }
  766. if (index < 0) {
  767. this.highlightedIndex = -1;
  768. return;
  769. }
  770. if (index >= this.suggestions.length) {
  771. index = this.suggestions.length - 1;
  772. }
  773. var suggestion = this.$refs.suggestions.$el.querySelector('.el-autocomplete-suggestion__wrap');
  774. var suggestionList = suggestion.querySelectorAll('.el-autocomplete-suggestion__list li');
  775. var highlightItem = suggestionList[index];
  776. var scrollTop = suggestion.scrollTop;
  777. var offsetTop = highlightItem.offsetTop;
  778. if (offsetTop + highlightItem.scrollHeight > scrollTop + suggestion.clientHeight) {
  779. suggestion.scrollTop += highlightItem.scrollHeight;
  780. }
  781. if (offsetTop < scrollTop) {
  782. suggestion.scrollTop -= highlightItem.scrollHeight;
  783. }
  784. this.highlightedIndex = index;
  785. var $input = this.getInput();
  786. $input.setAttribute('aria-activedescendant', this.id + '-item-' + this.highlightedIndex);
  787. },
  788. getInput: function getInput() {
  789. return this.$refs.input.getInput();
  790. }
  791. },
  792. mounted: function mounted() {
  793. var _this4 = this;
  794. this.debouncedGetData = debounce_default()(this.debounce, this.getData);
  795. this.$on('item-click', function (item) {
  796. _this4.select(item);
  797. });
  798. var $input = this.getInput();
  799. $input.setAttribute('role', 'textbox');
  800. $input.setAttribute('aria-autocomplete', 'list');
  801. $input.setAttribute('aria-controls', 'id');
  802. $input.setAttribute('aria-activedescendant', this.id + '-item-' + this.highlightedIndex);
  803. },
  804. beforeDestroy: function beforeDestroy() {
  805. this.$refs.suggestions.$destroy();
  806. }
  807. });
  808. // CONCATENATED MODULE: ./packages/autocomplete/src/autocomplete.vue?vue&type=script&lang=js&
  809. /* harmony default export */ var src_autocompletevue_type_script_lang_js_ = (autocompletevue_type_script_lang_js_);
  810. // CONCATENATED MODULE: ./packages/autocomplete/src/autocomplete.vue
  811. /* normalize component */
  812. var autocomplete_component = Object(componentNormalizer["a" /* default */])(
  813. src_autocompletevue_type_script_lang_js_,
  814. render,
  815. staticRenderFns,
  816. false,
  817. null,
  818. null,
  819. null
  820. )
  821. /* hot reload */
  822. if (false) { var autocomplete_api; }
  823. autocomplete_component.options.__file = "packages/autocomplete/src/autocomplete.vue"
  824. /* harmony default export */ var autocomplete = (autocomplete_component.exports);
  825. // CONCATENATED MODULE: ./packages/autocomplete/index.js
  826. /* istanbul ignore next */
  827. autocomplete.install = function (Vue) {
  828. Vue.component(autocomplete.name, autocomplete);
  829. };
  830. /* harmony default export */ var packages_autocomplete = __webpack_exports__["default"] = (autocomplete);
  831. /***/ })
  832. /******/ });