input.js 28 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990
  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 = 76);
  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. /***/ 11:
  180. /***/ (function(module, exports) {
  181. module.exports = require("element-ui/lib/mixins/migrating");
  182. /***/ }),
  183. /***/ 21:
  184. /***/ (function(module, exports) {
  185. module.exports = require("element-ui/lib/utils/shared");
  186. /***/ }),
  187. /***/ 4:
  188. /***/ (function(module, exports) {
  189. module.exports = require("element-ui/lib/mixins/emitter");
  190. /***/ }),
  191. /***/ 76:
  192. /***/ (function(module, __webpack_exports__, __webpack_require__) {
  193. "use strict";
  194. __webpack_require__.r(__webpack_exports__);
  195. // CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./packages/input/src/input.vue?vue&type=template&id=343dd774&
  196. var render = function() {
  197. var _vm = this
  198. var _h = _vm.$createElement
  199. var _c = _vm._self._c || _h
  200. return _c(
  201. "div",
  202. {
  203. class: [
  204. _vm.type === "textarea" ? "el-textarea" : "el-input",
  205. _vm.inputSize ? "el-input--" + _vm.inputSize : "",
  206. {
  207. "is-disabled": _vm.inputDisabled,
  208. "is-exceed": _vm.inputExceed,
  209. "el-input-group": _vm.$slots.prepend || _vm.$slots.append,
  210. "el-input-group--append": _vm.$slots.append,
  211. "el-input-group--prepend": _vm.$slots.prepend,
  212. "el-input--prefix": _vm.$slots.prefix || _vm.prefixIcon,
  213. "el-input--suffix":
  214. _vm.$slots.suffix ||
  215. _vm.suffixIcon ||
  216. _vm.clearable ||
  217. _vm.showPassword
  218. }
  219. ],
  220. on: {
  221. mouseenter: function($event) {
  222. _vm.hovering = true
  223. },
  224. mouseleave: function($event) {
  225. _vm.hovering = false
  226. }
  227. }
  228. },
  229. [
  230. _vm.type !== "textarea"
  231. ? [
  232. _vm.$slots.prepend
  233. ? _c(
  234. "div",
  235. { staticClass: "el-input-group__prepend" },
  236. [_vm._t("prepend")],
  237. 2
  238. )
  239. : _vm._e(),
  240. _vm.type !== "textarea"
  241. ? _c(
  242. "input",
  243. _vm._b(
  244. {
  245. ref: "input",
  246. staticClass: "el-input__inner",
  247. attrs: {
  248. tabindex: _vm.tabindex,
  249. type: _vm.showPassword
  250. ? _vm.passwordVisible
  251. ? "text"
  252. : "password"
  253. : _vm.type,
  254. disabled: _vm.inputDisabled,
  255. readonly: _vm.readonly,
  256. autocomplete: _vm.autoComplete || _vm.autocomplete,
  257. "aria-label": _vm.label
  258. },
  259. on: {
  260. compositionstart: _vm.handleCompositionStart,
  261. compositionupdate: _vm.handleCompositionUpdate,
  262. compositionend: _vm.handleCompositionEnd,
  263. input: _vm.handleInput,
  264. focus: _vm.handleFocus,
  265. blur: _vm.handleBlur,
  266. change: _vm.handleChange
  267. }
  268. },
  269. "input",
  270. _vm.$attrs,
  271. false
  272. )
  273. )
  274. : _vm._e(),
  275. _vm.$slots.prefix || _vm.prefixIcon
  276. ? _c(
  277. "span",
  278. { staticClass: "el-input__prefix" },
  279. [
  280. _vm._t("prefix"),
  281. _vm.prefixIcon
  282. ? _c("i", {
  283. staticClass: "el-input__icon",
  284. class: _vm.prefixIcon
  285. })
  286. : _vm._e()
  287. ],
  288. 2
  289. )
  290. : _vm._e(),
  291. _vm.getSuffixVisible()
  292. ? _c("span", { staticClass: "el-input__suffix" }, [
  293. _c(
  294. "span",
  295. { staticClass: "el-input__suffix-inner" },
  296. [
  297. !_vm.showClear ||
  298. !_vm.showPwdVisible ||
  299. !_vm.isWordLimitVisible
  300. ? [
  301. _vm._t("suffix"),
  302. _vm.suffixIcon
  303. ? _c("i", {
  304. staticClass: "el-input__icon",
  305. class: _vm.suffixIcon
  306. })
  307. : _vm._e()
  308. ]
  309. : _vm._e(),
  310. _vm.showClear
  311. ? _c("i", {
  312. staticClass:
  313. "el-input__icon el-icon-circle-close el-input__clear",
  314. on: {
  315. mousedown: function($event) {
  316. $event.preventDefault()
  317. },
  318. click: _vm.clear
  319. }
  320. })
  321. : _vm._e(),
  322. _vm.showPwdVisible
  323. ? _c("i", {
  324. staticClass:
  325. "el-input__icon el-icon-view el-input__clear",
  326. on: { click: _vm.handlePasswordVisible }
  327. })
  328. : _vm._e(),
  329. _vm.isWordLimitVisible
  330. ? _c("span", { staticClass: "el-input__count" }, [
  331. _c(
  332. "span",
  333. { staticClass: "el-input__count-inner" },
  334. [
  335. _vm._v(
  336. "\n " +
  337. _vm._s(_vm.textLength) +
  338. "/" +
  339. _vm._s(_vm.upperLimit) +
  340. "\n "
  341. )
  342. ]
  343. )
  344. ])
  345. : _vm._e()
  346. ],
  347. 2
  348. ),
  349. _vm.validateState
  350. ? _c("i", {
  351. staticClass: "el-input__icon",
  352. class: ["el-input__validateIcon", _vm.validateIcon]
  353. })
  354. : _vm._e()
  355. ])
  356. : _vm._e(),
  357. _vm.$slots.append
  358. ? _c(
  359. "div",
  360. { staticClass: "el-input-group__append" },
  361. [_vm._t("append")],
  362. 2
  363. )
  364. : _vm._e()
  365. ]
  366. : _c(
  367. "textarea",
  368. _vm._b(
  369. {
  370. ref: "textarea",
  371. staticClass: "el-textarea__inner",
  372. style: _vm.textareaStyle,
  373. attrs: {
  374. tabindex: _vm.tabindex,
  375. disabled: _vm.inputDisabled,
  376. readonly: _vm.readonly,
  377. autocomplete: _vm.autoComplete || _vm.autocomplete,
  378. "aria-label": _vm.label
  379. },
  380. on: {
  381. compositionstart: _vm.handleCompositionStart,
  382. compositionupdate: _vm.handleCompositionUpdate,
  383. compositionend: _vm.handleCompositionEnd,
  384. input: _vm.handleInput,
  385. focus: _vm.handleFocus,
  386. blur: _vm.handleBlur,
  387. change: _vm.handleChange
  388. }
  389. },
  390. "textarea",
  391. _vm.$attrs,
  392. false
  393. )
  394. ),
  395. _vm.isWordLimitVisible && _vm.type === "textarea"
  396. ? _c("span", { staticClass: "el-input__count" }, [
  397. _vm._v(_vm._s(_vm.textLength) + "/" + _vm._s(_vm.upperLimit))
  398. ])
  399. : _vm._e()
  400. ],
  401. 2
  402. )
  403. }
  404. var staticRenderFns = []
  405. render._withStripped = true
  406. // CONCATENATED MODULE: ./packages/input/src/input.vue?vue&type=template&id=343dd774&
  407. // EXTERNAL MODULE: external "element-ui/lib/mixins/emitter"
  408. var emitter_ = __webpack_require__(4);
  409. var emitter_default = /*#__PURE__*/__webpack_require__.n(emitter_);
  410. // EXTERNAL MODULE: external "element-ui/lib/mixins/migrating"
  411. var migrating_ = __webpack_require__(11);
  412. var migrating_default = /*#__PURE__*/__webpack_require__.n(migrating_);
  413. // CONCATENATED MODULE: ./packages/input/src/calcTextareaHeight.js
  414. var hiddenTextarea = void 0;
  415. var HIDDEN_STYLE = '\n height:0 !important;\n visibility:hidden !important;\n overflow:hidden !important;\n position:absolute !important;\n z-index:-1000 !important;\n top:0 !important;\n right:0 !important\n';
  416. var CONTEXT_STYLE = ['letter-spacing', 'line-height', 'padding-top', 'padding-bottom', 'font-family', 'font-weight', 'font-size', 'text-rendering', 'text-transform', 'width', 'text-indent', 'padding-left', 'padding-right', 'border-width', 'box-sizing'];
  417. function calculateNodeStyling(targetElement) {
  418. var style = window.getComputedStyle(targetElement);
  419. var boxSizing = style.getPropertyValue('box-sizing');
  420. var paddingSize = parseFloat(style.getPropertyValue('padding-bottom')) + parseFloat(style.getPropertyValue('padding-top'));
  421. var borderSize = parseFloat(style.getPropertyValue('border-bottom-width')) + parseFloat(style.getPropertyValue('border-top-width'));
  422. var contextStyle = CONTEXT_STYLE.map(function (name) {
  423. return name + ':' + style.getPropertyValue(name);
  424. }).join(';');
  425. return { contextStyle: contextStyle, paddingSize: paddingSize, borderSize: borderSize, boxSizing: boxSizing };
  426. }
  427. function calcTextareaHeight(targetElement) {
  428. var minRows = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
  429. var maxRows = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
  430. if (!hiddenTextarea) {
  431. hiddenTextarea = document.createElement('textarea');
  432. document.body.appendChild(hiddenTextarea);
  433. }
  434. var _calculateNodeStyling = calculateNodeStyling(targetElement),
  435. paddingSize = _calculateNodeStyling.paddingSize,
  436. borderSize = _calculateNodeStyling.borderSize,
  437. boxSizing = _calculateNodeStyling.boxSizing,
  438. contextStyle = _calculateNodeStyling.contextStyle;
  439. hiddenTextarea.setAttribute('style', contextStyle + ';' + HIDDEN_STYLE);
  440. hiddenTextarea.value = targetElement.value || targetElement.placeholder || '';
  441. var height = hiddenTextarea.scrollHeight;
  442. var result = {};
  443. if (boxSizing === 'border-box') {
  444. height = height + borderSize;
  445. } else if (boxSizing === 'content-box') {
  446. height = height - paddingSize;
  447. }
  448. hiddenTextarea.value = '';
  449. var singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;
  450. if (minRows !== null) {
  451. var minHeight = singleRowHeight * minRows;
  452. if (boxSizing === 'border-box') {
  453. minHeight = minHeight + paddingSize + borderSize;
  454. }
  455. height = Math.max(minHeight, height);
  456. result.minHeight = minHeight + 'px';
  457. }
  458. if (maxRows !== null) {
  459. var maxHeight = singleRowHeight * maxRows;
  460. if (boxSizing === 'border-box') {
  461. maxHeight = maxHeight + paddingSize + borderSize;
  462. }
  463. height = Math.min(maxHeight, height);
  464. }
  465. result.height = height + 'px';
  466. hiddenTextarea.parentNode && hiddenTextarea.parentNode.removeChild(hiddenTextarea);
  467. hiddenTextarea = null;
  468. return result;
  469. };
  470. // EXTERNAL MODULE: external "element-ui/lib/utils/merge"
  471. var merge_ = __webpack_require__(9);
  472. var merge_default = /*#__PURE__*/__webpack_require__.n(merge_);
  473. // EXTERNAL MODULE: external "element-ui/lib/utils/shared"
  474. var shared_ = __webpack_require__(21);
  475. // CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./packages/input/src/input.vue?vue&type=script&lang=js&
  476. //
  477. //
  478. //
  479. //
  480. //
  481. //
  482. //
  483. //
  484. //
  485. //
  486. //
  487. //
  488. //
  489. //
  490. //
  491. //
  492. //
  493. //
  494. //
  495. //
  496. //
  497. //
  498. //
  499. //
  500. //
  501. //
  502. //
  503. //
  504. //
  505. //
  506. //
  507. //
  508. //
  509. //
  510. //
  511. //
  512. //
  513. //
  514. //
  515. //
  516. //
  517. //
  518. //
  519. //
  520. //
  521. //
  522. //
  523. //
  524. //
  525. //
  526. //
  527. //
  528. //
  529. //
  530. //
  531. //
  532. //
  533. //
  534. //
  535. //
  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. /* harmony default export */ var inputvue_type_script_lang_js_ = ({
  586. name: 'ElInput',
  587. componentName: 'ElInput',
  588. mixins: [emitter_default.a, migrating_default.a],
  589. inheritAttrs: false,
  590. inject: {
  591. elForm: {
  592. default: ''
  593. },
  594. elFormItem: {
  595. default: ''
  596. }
  597. },
  598. data: function data() {
  599. return {
  600. textareaCalcStyle: {},
  601. hovering: false,
  602. focused: false,
  603. isComposing: false,
  604. passwordVisible: false
  605. };
  606. },
  607. props: {
  608. value: [String, Number],
  609. size: String,
  610. resize: String,
  611. form: String,
  612. disabled: Boolean,
  613. readonly: Boolean,
  614. type: {
  615. type: String,
  616. default: 'text'
  617. },
  618. autosize: {
  619. type: [Boolean, Object],
  620. default: false
  621. },
  622. autocomplete: {
  623. type: String,
  624. default: 'off'
  625. },
  626. /** @Deprecated in next major version */
  627. autoComplete: {
  628. type: String,
  629. validator: function validator(val) {
  630. false && false;
  631. return true;
  632. }
  633. },
  634. validateEvent: {
  635. type: Boolean,
  636. default: true
  637. },
  638. suffixIcon: String,
  639. prefixIcon: String,
  640. label: String,
  641. clearable: {
  642. type: Boolean,
  643. default: false
  644. },
  645. showPassword: {
  646. type: Boolean,
  647. default: false
  648. },
  649. showWordLimit: {
  650. type: Boolean,
  651. default: false
  652. },
  653. tabindex: String
  654. },
  655. computed: {
  656. _elFormItemSize: function _elFormItemSize() {
  657. return (this.elFormItem || {}).elFormItemSize;
  658. },
  659. validateState: function validateState() {
  660. return this.elFormItem ? this.elFormItem.validateState : '';
  661. },
  662. needStatusIcon: function needStatusIcon() {
  663. return this.elForm ? this.elForm.statusIcon : false;
  664. },
  665. validateIcon: function validateIcon() {
  666. return {
  667. validating: 'el-icon-loading',
  668. success: 'el-icon-circle-check',
  669. error: 'el-icon-circle-close'
  670. }[this.validateState];
  671. },
  672. textareaStyle: function textareaStyle() {
  673. return merge_default()({}, this.textareaCalcStyle, { resize: this.resize });
  674. },
  675. inputSize: function inputSize() {
  676. return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
  677. },
  678. inputDisabled: function inputDisabled() {
  679. return this.disabled || (this.elForm || {}).disabled;
  680. },
  681. nativeInputValue: function nativeInputValue() {
  682. return this.value === null || this.value === undefined ? '' : String(this.value);
  683. },
  684. showClear: function showClear() {
  685. return this.clearable && !this.inputDisabled && !this.readonly && this.nativeInputValue && (this.focused || this.hovering);
  686. },
  687. showPwdVisible: function showPwdVisible() {
  688. return this.showPassword && !this.inputDisabled && !this.readonly && (!!this.nativeInputValue || this.focused);
  689. },
  690. isWordLimitVisible: function isWordLimitVisible() {
  691. return this.showWordLimit && this.$attrs.maxlength && (this.type === 'text' || this.type === 'textarea') && !this.inputDisabled && !this.readonly && !this.showPassword;
  692. },
  693. upperLimit: function upperLimit() {
  694. return this.$attrs.maxlength;
  695. },
  696. textLength: function textLength() {
  697. if (typeof this.value === 'number') {
  698. return String(this.value).length;
  699. }
  700. return (this.value || '').length;
  701. },
  702. inputExceed: function inputExceed() {
  703. // show exceed style if length of initial value greater then maxlength
  704. return this.isWordLimitVisible && this.textLength > this.upperLimit;
  705. }
  706. },
  707. watch: {
  708. value: function value(val) {
  709. this.$nextTick(this.resizeTextarea);
  710. if (this.validateEvent) {
  711. this.dispatch('ElFormItem', 'el.form.change', [val]);
  712. }
  713. },
  714. // native input value is set explicitly
  715. // do not use v-model / :value in template
  716. // see: https://github.com/ElemeFE/element/issues/14521
  717. nativeInputValue: function nativeInputValue() {
  718. this.setNativeInputValue();
  719. },
  720. // when change between <input> and <textarea>,
  721. // update DOM dependent value and styles
  722. // https://github.com/ElemeFE/element/issues/14857
  723. type: function type() {
  724. var _this = this;
  725. this.$nextTick(function () {
  726. _this.setNativeInputValue();
  727. _this.resizeTextarea();
  728. _this.updateIconOffset();
  729. });
  730. }
  731. },
  732. methods: {
  733. focus: function focus() {
  734. this.getInput().focus();
  735. },
  736. blur: function blur() {
  737. this.getInput().blur();
  738. },
  739. getMigratingConfig: function getMigratingConfig() {
  740. return {
  741. props: {
  742. 'icon': 'icon is removed, use suffix-icon / prefix-icon instead.',
  743. 'on-icon-click': 'on-icon-click is removed.'
  744. },
  745. events: {
  746. 'click': 'click is removed.'
  747. }
  748. };
  749. },
  750. handleBlur: function handleBlur(event) {
  751. this.focused = false;
  752. this.$emit('blur', event);
  753. if (this.validateEvent) {
  754. this.dispatch('ElFormItem', 'el.form.blur', [this.value]);
  755. }
  756. },
  757. select: function select() {
  758. this.getInput().select();
  759. },
  760. resizeTextarea: function resizeTextarea() {
  761. if (this.$isServer) return;
  762. var autosize = this.autosize,
  763. type = this.type;
  764. if (type !== 'textarea') return;
  765. if (!autosize) {
  766. this.textareaCalcStyle = {
  767. minHeight: calcTextareaHeight(this.$refs.textarea).minHeight
  768. };
  769. return;
  770. }
  771. var minRows = autosize.minRows;
  772. var maxRows = autosize.maxRows;
  773. this.textareaCalcStyle = calcTextareaHeight(this.$refs.textarea, minRows, maxRows);
  774. },
  775. setNativeInputValue: function setNativeInputValue() {
  776. var input = this.getInput();
  777. if (!input) return;
  778. if (input.value === this.nativeInputValue) return;
  779. input.value = this.nativeInputValue;
  780. },
  781. handleFocus: function handleFocus(event) {
  782. this.focused = true;
  783. this.$emit('focus', event);
  784. },
  785. handleCompositionStart: function handleCompositionStart() {
  786. this.isComposing = true;
  787. },
  788. handleCompositionUpdate: function handleCompositionUpdate(event) {
  789. var text = event.target.value;
  790. var lastCharacter = text[text.length - 1] || '';
  791. this.isComposing = !Object(shared_["isKorean"])(lastCharacter);
  792. },
  793. handleCompositionEnd: function handleCompositionEnd(event) {
  794. if (this.isComposing) {
  795. this.isComposing = false;
  796. this.handleInput(event);
  797. }
  798. },
  799. handleInput: function handleInput(event) {
  800. // should not emit input during composition
  801. // see: https://github.com/ElemeFE/element/issues/10516
  802. if (this.isComposing) return;
  803. // hack for https://github.com/ElemeFE/element/issues/8548
  804. // should remove the following line when we don't support IE
  805. if (event.target.value === this.nativeInputValue) return;
  806. this.$emit('input', event.target.value);
  807. // ensure native input value is controlled
  808. // see: https://github.com/ElemeFE/element/issues/12850
  809. this.$nextTick(this.setNativeInputValue);
  810. },
  811. handleChange: function handleChange(event) {
  812. this.$emit('change', event.target.value);
  813. },
  814. calcIconOffset: function calcIconOffset(place) {
  815. var elList = [].slice.call(this.$el.querySelectorAll('.el-input__' + place) || []);
  816. if (!elList.length) return;
  817. var el = null;
  818. for (var i = 0; i < elList.length; i++) {
  819. if (elList[i].parentNode === this.$el) {
  820. el = elList[i];
  821. break;
  822. }
  823. }
  824. if (!el) return;
  825. var pendantMap = {
  826. suffix: 'append',
  827. prefix: 'prepend'
  828. };
  829. var pendant = pendantMap[place];
  830. if (this.$slots[pendant]) {
  831. el.style.transform = 'translateX(' + (place === 'suffix' ? '-' : '') + this.$el.querySelector('.el-input-group__' + pendant).offsetWidth + 'px)';
  832. } else {
  833. el.removeAttribute('style');
  834. }
  835. },
  836. updateIconOffset: function updateIconOffset() {
  837. this.calcIconOffset('prefix');
  838. this.calcIconOffset('suffix');
  839. },
  840. clear: function clear() {
  841. this.$emit('input', '');
  842. this.$emit('change', '');
  843. this.$emit('clear');
  844. },
  845. handlePasswordVisible: function handlePasswordVisible() {
  846. this.passwordVisible = !this.passwordVisible;
  847. this.focus();
  848. },
  849. getInput: function getInput() {
  850. return this.$refs.input || this.$refs.textarea;
  851. },
  852. getSuffixVisible: function getSuffixVisible() {
  853. return this.$slots.suffix || this.suffixIcon || this.showClear || this.showPassword || this.isWordLimitVisible || this.validateState && this.needStatusIcon;
  854. }
  855. },
  856. created: function created() {
  857. this.$on('inputSelect', this.select);
  858. },
  859. mounted: function mounted() {
  860. this.setNativeInputValue();
  861. this.resizeTextarea();
  862. this.updateIconOffset();
  863. },
  864. updated: function updated() {
  865. this.$nextTick(this.updateIconOffset);
  866. }
  867. });
  868. // CONCATENATED MODULE: ./packages/input/src/input.vue?vue&type=script&lang=js&
  869. /* harmony default export */ var src_inputvue_type_script_lang_js_ = (inputvue_type_script_lang_js_);
  870. // EXTERNAL MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
  871. var componentNormalizer = __webpack_require__(0);
  872. // CONCATENATED MODULE: ./packages/input/src/input.vue
  873. /* normalize component */
  874. var component = Object(componentNormalizer["a" /* default */])(
  875. src_inputvue_type_script_lang_js_,
  876. render,
  877. staticRenderFns,
  878. false,
  879. null,
  880. null,
  881. null
  882. )
  883. /* hot reload */
  884. if (false) { var api; }
  885. component.options.__file = "packages/input/src/input.vue"
  886. /* harmony default export */ var input = (component.exports);
  887. // CONCATENATED MODULE: ./packages/input/index.js
  888. /* istanbul ignore next */
  889. input.install = function (Vue) {
  890. Vue.component(input.name, input);
  891. };
  892. /* harmony default export */ var packages_input = __webpack_exports__["default"] = (input);
  893. /***/ }),
  894. /***/ 9:
  895. /***/ (function(module, exports) {
  896. module.exports = require("element-ui/lib/utils/merge");
  897. /***/ })
  898. /******/ });