input.js 27 KB

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