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