5d8186f6e41957b7457b6383fffa2d7613b0d4cee7fd7ac60e80c29c7b0e0002a72f921c8fbdbb17f19e05938e34bb2a573e0e33488ff8553c828df3706f7a 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. var vue = require('vue');
  4. var core = require('@vueuse/core');
  5. var lodashUnified = require('lodash-unified');
  6. var index$4 = require('../../icon/index.js');
  7. var iconsVue = require('@element-plus/icons-vue');
  8. var utils = require('./utils.js');
  9. var input = require('./input.js');
  10. var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
  11. var index = require('../../../hooks/use-attrs/index.js');
  12. var useFormItem = require('../../form/src/hooks/use-form-item.js');
  13. var useFormCommonProps = require('../../form/src/hooks/use-form-common-props.js');
  14. var index$2 = require('../../../hooks/use-focus-controller/index.js');
  15. var icon = require('../../../utils/vue/icon.js');
  16. var index$3 = require('../../../hooks/use-composition/index.js');
  17. var event = require('../../../constants/event.js');
  18. var index$5 = require('../../../hooks/use-cursor/index.js');
  19. var index$1 = require('../../../hooks/use-namespace/index.js');
  20. var error = require('../../../utils/error.js');
  21. var shared = require('@vue/shared');
  22. const COMPONENT_NAME = "ElInput";
  23. const __default__ = vue.defineComponent({
  24. name: COMPONENT_NAME,
  25. inheritAttrs: false
  26. });
  27. const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  28. ...__default__,
  29. props: input.inputProps,
  30. emits: input.inputEmits,
  31. setup(__props, { expose, emit }) {
  32. const props = __props;
  33. const rawAttrs = vue.useAttrs();
  34. const attrs = index.useAttrs();
  35. const slots = vue.useSlots();
  36. const containerKls = vue.computed(() => [
  37. props.type === "textarea" ? nsTextarea.b() : nsInput.b(),
  38. nsInput.m(inputSize.value),
  39. nsInput.is("disabled", inputDisabled.value),
  40. nsInput.is("exceed", inputExceed.value),
  41. {
  42. [nsInput.b("group")]: slots.prepend || slots.append,
  43. [nsInput.m("prefix")]: slots.prefix || props.prefixIcon,
  44. [nsInput.m("suffix")]: slots.suffix || props.suffixIcon || props.clearable || props.showPassword,
  45. [nsInput.bm("suffix", "password-clear")]: showClear.value && showPwdVisible.value,
  46. [nsInput.b("hidden")]: props.type === "hidden"
  47. },
  48. rawAttrs.class
  49. ]);
  50. const wrapperKls = vue.computed(() => [
  51. nsInput.e("wrapper"),
  52. nsInput.is("focus", isFocused.value)
  53. ]);
  54. const { form: elForm, formItem: elFormItem } = useFormItem.useFormItem();
  55. const { inputId } = useFormItem.useFormItemInputId(props, {
  56. formItemContext: elFormItem
  57. });
  58. const inputSize = useFormCommonProps.useFormSize();
  59. const inputDisabled = useFormCommonProps.useFormDisabled();
  60. const nsInput = index$1.useNamespace("input");
  61. const nsTextarea = index$1.useNamespace("textarea");
  62. const input = vue.shallowRef();
  63. const textarea = vue.shallowRef();
  64. const hovering = vue.ref(false);
  65. const passwordVisible = vue.ref(false);
  66. const countStyle = vue.ref();
  67. const textareaCalcStyle = vue.shallowRef(props.inputStyle);
  68. const _ref = vue.computed(() => input.value || textarea.value);
  69. const { wrapperRef, isFocused, handleFocus, handleBlur } = index$2.useFocusController(_ref, {
  70. disabled: inputDisabled,
  71. afterBlur() {
  72. var _a;
  73. if (props.validateEvent) {
  74. (_a = elFormItem == null ? void 0 : elFormItem.validate) == null ? void 0 : _a.call(elFormItem, "blur").catch((err) => error.debugWarn());
  75. }
  76. }
  77. });
  78. const needStatusIcon = vue.computed(() => {
  79. var _a;
  80. return (_a = elForm == null ? void 0 : elForm.statusIcon) != null ? _a : false;
  81. });
  82. const validateState = vue.computed(() => (elFormItem == null ? void 0 : elFormItem.validateState) || "");
  83. const validateIcon = vue.computed(() => validateState.value && icon.ValidateComponentsMap[validateState.value]);
  84. const passwordIcon = vue.computed(() => passwordVisible.value ? iconsVue.View : iconsVue.Hide);
  85. const containerStyle = vue.computed(() => [
  86. rawAttrs.style
  87. ]);
  88. const textareaStyle = vue.computed(() => [
  89. props.inputStyle,
  90. textareaCalcStyle.value,
  91. { resize: props.resize }
  92. ]);
  93. const nativeInputValue = vue.computed(() => lodashUnified.isNil(props.modelValue) ? "" : String(props.modelValue));
  94. const showClear = vue.computed(() => props.clearable && !inputDisabled.value && !props.readonly && !!nativeInputValue.value && (isFocused.value || hovering.value));
  95. const showPwdVisible = vue.computed(() => props.showPassword && !inputDisabled.value && !!nativeInputValue.value);
  96. const isWordLimitVisible = vue.computed(() => props.showWordLimit && !!props.maxlength && (props.type === "text" || props.type === "textarea") && !inputDisabled.value && !props.readonly && !props.showPassword);
  97. const textLength = vue.computed(() => nativeInputValue.value.length);
  98. const inputExceed = vue.computed(() => !!isWordLimitVisible.value && textLength.value > Number(props.maxlength));
  99. const suffixVisible = vue.computed(() => !!slots.suffix || !!props.suffixIcon || showClear.value || props.showPassword || isWordLimitVisible.value || !!validateState.value && needStatusIcon.value);
  100. const [recordCursor, setCursor] = index$5.useCursor(input);
  101. core.useResizeObserver(textarea, (entries) => {
  102. onceInitSizeTextarea();
  103. if (!isWordLimitVisible.value || props.resize !== "both")
  104. return;
  105. const entry = entries[0];
  106. const { width } = entry.contentRect;
  107. countStyle.value = {
  108. right: `calc(100% - ${width + 15 + 6}px)`
  109. };
  110. });
  111. const resizeTextarea = () => {
  112. const { type, autosize } = props;
  113. if (!core.isClient || type !== "textarea" || !textarea.value)
  114. return;
  115. if (autosize) {
  116. const minRows = shared.isObject(autosize) ? autosize.minRows : void 0;
  117. const maxRows = shared.isObject(autosize) ? autosize.maxRows : void 0;
  118. const textareaStyle2 = utils.calcTextareaHeight(textarea.value, minRows, maxRows);
  119. textareaCalcStyle.value = {
  120. overflowY: "hidden",
  121. ...textareaStyle2
  122. };
  123. vue.nextTick(() => {
  124. textarea.value.offsetHeight;
  125. textareaCalcStyle.value = textareaStyle2;
  126. });
  127. } else {
  128. textareaCalcStyle.value = {
  129. minHeight: utils.calcTextareaHeight(textarea.value).minHeight
  130. };
  131. }
  132. };
  133. const createOnceInitResize = (resizeTextarea2) => {
  134. let isInit = false;
  135. return () => {
  136. var _a;
  137. if (isInit || !props.autosize)
  138. return;
  139. const isElHidden = ((_a = textarea.value) == null ? void 0 : _a.offsetParent) === null;
  140. if (!isElHidden) {
  141. setTimeout(resizeTextarea2);
  142. isInit = true;
  143. }
  144. };
  145. };
  146. const onceInitSizeTextarea = createOnceInitResize(resizeTextarea);
  147. const setNativeInputValue = () => {
  148. const input2 = _ref.value;
  149. const formatterValue = props.formatter ? props.formatter(nativeInputValue.value) : nativeInputValue.value;
  150. if (!input2 || input2.value === formatterValue)
  151. return;
  152. input2.value = formatterValue;
  153. };
  154. const handleInput = async (event$1) => {
  155. recordCursor();
  156. let { value } = event$1.target;
  157. if (props.formatter && props.parser) {
  158. value = props.parser(value);
  159. }
  160. if (isComposing.value)
  161. return;
  162. if (value === nativeInputValue.value) {
  163. setNativeInputValue();
  164. return;
  165. }
  166. emit(event.UPDATE_MODEL_EVENT, value);
  167. emit(event.INPUT_EVENT, value);
  168. await vue.nextTick();
  169. setNativeInputValue();
  170. setCursor();
  171. };
  172. const handleChange = (event$1) => {
  173. let { value } = event$1.target;
  174. if (props.formatter && props.parser) {
  175. value = props.parser(value);
  176. }
  177. emit(event.CHANGE_EVENT, value);
  178. };
  179. const {
  180. isComposing,
  181. handleCompositionStart,
  182. handleCompositionUpdate,
  183. handleCompositionEnd
  184. } = index$3.useComposition({ emit, afterComposition: handleInput });
  185. const handlePasswordVisible = () => {
  186. recordCursor();
  187. passwordVisible.value = !passwordVisible.value;
  188. setTimeout(setCursor);
  189. };
  190. const focus = () => {
  191. var _a;
  192. return (_a = _ref.value) == null ? void 0 : _a.focus();
  193. };
  194. const blur = () => {
  195. var _a;
  196. return (_a = _ref.value) == null ? void 0 : _a.blur();
  197. };
  198. const handleMouseLeave = (evt) => {
  199. hovering.value = false;
  200. emit("mouseleave", evt);
  201. };
  202. const handleMouseEnter = (evt) => {
  203. hovering.value = true;
  204. emit("mouseenter", evt);
  205. };
  206. const handleKeydown = (evt) => {
  207. emit("keydown", evt);
  208. };
  209. const select = () => {
  210. var _a;
  211. (_a = _ref.value) == null ? void 0 : _a.select();
  212. };
  213. const clear = () => {
  214. emit(event.UPDATE_MODEL_EVENT, "");
  215. emit(event.CHANGE_EVENT, "");
  216. emit("clear");
  217. emit(event.INPUT_EVENT, "");
  218. };
  219. vue.watch(() => props.modelValue, () => {
  220. var _a;
  221. vue.nextTick(() => resizeTextarea());
  222. if (props.validateEvent) {
  223. (_a = elFormItem == null ? void 0 : elFormItem.validate) == null ? void 0 : _a.call(elFormItem, "change").catch((err) => error.debugWarn());
  224. }
  225. });
  226. vue.watch(nativeInputValue, () => setNativeInputValue());
  227. vue.watch(() => props.type, async () => {
  228. await vue.nextTick();
  229. setNativeInputValue();
  230. resizeTextarea();
  231. });
  232. vue.onMounted(() => {
  233. if (!props.formatter && props.parser) ;
  234. setNativeInputValue();
  235. vue.nextTick(resizeTextarea);
  236. });
  237. expose({
  238. input,
  239. textarea,
  240. ref: _ref,
  241. textareaStyle,
  242. autosize: vue.toRef(props, "autosize"),
  243. isComposing,
  244. focus,
  245. blur,
  246. select,
  247. clear,
  248. resizeTextarea
  249. });
  250. return (_ctx, _cache) => {
  251. return vue.openBlock(), vue.createElementBlock("div", {
  252. class: vue.normalizeClass([
  253. vue.unref(containerKls),
  254. {
  255. [vue.unref(nsInput).bm("group", "append")]: _ctx.$slots.append,
  256. [vue.unref(nsInput).bm("group", "prepend")]: _ctx.$slots.prepend
  257. }
  258. ]),
  259. style: vue.normalizeStyle(vue.unref(containerStyle)),
  260. onMouseenter: handleMouseEnter,
  261. onMouseleave: handleMouseLeave
  262. }, [
  263. vue.createCommentVNode(" input "),
  264. _ctx.type !== "textarea" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
  265. vue.createCommentVNode(" prepend slot "),
  266. _ctx.$slots.prepend ? (vue.openBlock(), vue.createElementBlock("div", {
  267. key: 0,
  268. class: vue.normalizeClass(vue.unref(nsInput).be("group", "prepend"))
  269. }, [
  270. vue.renderSlot(_ctx.$slots, "prepend")
  271. ], 2)) : vue.createCommentVNode("v-if", true),
  272. vue.createElementVNode("div", {
  273. ref_key: "wrapperRef",
  274. ref: wrapperRef,
  275. class: vue.normalizeClass(vue.unref(wrapperKls))
  276. }, [
  277. vue.createCommentVNode(" prefix slot "),
  278. _ctx.$slots.prefix || _ctx.prefixIcon ? (vue.openBlock(), vue.createElementBlock("span", {
  279. key: 0,
  280. class: vue.normalizeClass(vue.unref(nsInput).e("prefix"))
  281. }, [
  282. vue.createElementVNode("span", {
  283. class: vue.normalizeClass(vue.unref(nsInput).e("prefix-inner"))
  284. }, [
  285. vue.renderSlot(_ctx.$slots, "prefix"),
  286. _ctx.prefixIcon ? (vue.openBlock(), vue.createBlock(vue.unref(index$4.ElIcon), {
  287. key: 0,
  288. class: vue.normalizeClass(vue.unref(nsInput).e("icon"))
  289. }, {
  290. default: vue.withCtx(() => [
  291. (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.prefixIcon)))
  292. ]),
  293. _: 1
  294. }, 8, ["class"])) : vue.createCommentVNode("v-if", true)
  295. ], 2)
  296. ], 2)) : vue.createCommentVNode("v-if", true),
  297. vue.createElementVNode("input", vue.mergeProps({
  298. id: vue.unref(inputId),
  299. ref_key: "input",
  300. ref: input,
  301. class: vue.unref(nsInput).e("inner")
  302. }, vue.unref(attrs), {
  303. name: _ctx.name,
  304. minlength: _ctx.minlength,
  305. maxlength: _ctx.maxlength,
  306. type: _ctx.showPassword ? passwordVisible.value ? "text" : "password" : _ctx.type,
  307. disabled: vue.unref(inputDisabled),
  308. readonly: _ctx.readonly,
  309. autocomplete: _ctx.autocomplete,
  310. tabindex: _ctx.tabindex,
  311. "aria-label": _ctx.ariaLabel,
  312. placeholder: _ctx.placeholder,
  313. style: _ctx.inputStyle,
  314. form: _ctx.form,
  315. autofocus: _ctx.autofocus,
  316. role: _ctx.containerRole,
  317. inputmode: _ctx.inputmode,
  318. onCompositionstart: vue.unref(handleCompositionStart),
  319. onCompositionupdate: vue.unref(handleCompositionUpdate),
  320. onCompositionend: vue.unref(handleCompositionEnd),
  321. onInput: handleInput,
  322. onChange: handleChange,
  323. onKeydown: handleKeydown
  324. }), null, 16, ["id", "name", "minlength", "maxlength", "type", "disabled", "readonly", "autocomplete", "tabindex", "aria-label", "placeholder", "form", "autofocus", "role", "inputmode", "onCompositionstart", "onCompositionupdate", "onCompositionend"]),
  325. vue.createCommentVNode(" suffix slot "),
  326. vue.unref(suffixVisible) ? (vue.openBlock(), vue.createElementBlock("span", {
  327. key: 1,
  328. class: vue.normalizeClass(vue.unref(nsInput).e("suffix"))
  329. }, [
  330. vue.createElementVNode("span", {
  331. class: vue.normalizeClass(vue.unref(nsInput).e("suffix-inner"))
  332. }, [
  333. !vue.unref(showClear) || !vue.unref(showPwdVisible) || !vue.unref(isWordLimitVisible) ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
  334. vue.renderSlot(_ctx.$slots, "suffix"),
  335. _ctx.suffixIcon ? (vue.openBlock(), vue.createBlock(vue.unref(index$4.ElIcon), {
  336. key: 0,
  337. class: vue.normalizeClass(vue.unref(nsInput).e("icon"))
  338. }, {
  339. default: vue.withCtx(() => [
  340. (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.suffixIcon)))
  341. ]),
  342. _: 1
  343. }, 8, ["class"])) : vue.createCommentVNode("v-if", true)
  344. ], 64)) : vue.createCommentVNode("v-if", true),
  345. vue.unref(showClear) ? (vue.openBlock(), vue.createBlock(vue.unref(index$4.ElIcon), {
  346. key: 1,
  347. class: vue.normalizeClass([vue.unref(nsInput).e("icon"), vue.unref(nsInput).e("clear")]),
  348. onMousedown: vue.withModifiers(vue.unref(shared.NOOP), ["prevent"]),
  349. onClick: clear
  350. }, {
  351. default: vue.withCtx(() => [
  352. (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.clearIcon)))
  353. ]),
  354. _: 1
  355. }, 8, ["class", "onMousedown"])) : vue.createCommentVNode("v-if", true),
  356. vue.unref(showPwdVisible) ? (vue.openBlock(), vue.createBlock(vue.unref(index$4.ElIcon), {
  357. key: 2,
  358. class: vue.normalizeClass([vue.unref(nsInput).e("icon"), vue.unref(nsInput).e("password")]),
  359. onClick: handlePasswordVisible
  360. }, {
  361. default: vue.withCtx(() => [
  362. (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(passwordIcon))))
  363. ]),
  364. _: 1
  365. }, 8, ["class"])) : vue.createCommentVNode("v-if", true),
  366. vue.unref(isWordLimitVisible) ? (vue.openBlock(), vue.createElementBlock("span", {
  367. key: 3,
  368. class: vue.normalizeClass(vue.unref(nsInput).e("count"))
  369. }, [
  370. vue.createElementVNode("span", {
  371. class: vue.normalizeClass(vue.unref(nsInput).e("count-inner"))
  372. }, vue.toDisplayString(vue.unref(textLength)) + " / " + vue.toDisplayString(_ctx.maxlength), 3)
  373. ], 2)) : vue.createCommentVNode("v-if", true),
  374. vue.unref(validateState) && vue.unref(validateIcon) && vue.unref(needStatusIcon) ? (vue.openBlock(), vue.createBlock(vue.unref(index$4.ElIcon), {
  375. key: 4,
  376. class: vue.normalizeClass([
  377. vue.unref(nsInput).e("icon"),
  378. vue.unref(nsInput).e("validateIcon"),
  379. vue.unref(nsInput).is("loading", vue.unref(validateState) === "validating")
  380. ])
  381. }, {
  382. default: vue.withCtx(() => [
  383. (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(validateIcon))))
  384. ]),
  385. _: 1
  386. }, 8, ["class"])) : vue.createCommentVNode("v-if", true)
  387. ], 2)
  388. ], 2)) : vue.createCommentVNode("v-if", true)
  389. ], 2),
  390. vue.createCommentVNode(" append slot "),
  391. _ctx.$slots.append ? (vue.openBlock(), vue.createElementBlock("div", {
  392. key: 1,
  393. class: vue.normalizeClass(vue.unref(nsInput).be("group", "append"))
  394. }, [
  395. vue.renderSlot(_ctx.$slots, "append")
  396. ], 2)) : vue.createCommentVNode("v-if", true)
  397. ], 64)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
  398. vue.createCommentVNode(" textarea "),
  399. vue.createElementVNode("textarea", vue.mergeProps({
  400. id: vue.unref(inputId),
  401. ref_key: "textarea",
  402. ref: textarea,
  403. class: [vue.unref(nsTextarea).e("inner"), vue.unref(nsInput).is("focus", vue.unref(isFocused))]
  404. }, vue.unref(attrs), {
  405. minlength: _ctx.minlength,
  406. maxlength: _ctx.maxlength,
  407. tabindex: _ctx.tabindex,
  408. disabled: vue.unref(inputDisabled),
  409. readonly: _ctx.readonly,
  410. autocomplete: _ctx.autocomplete,
  411. style: vue.unref(textareaStyle),
  412. "aria-label": _ctx.ariaLabel,
  413. placeholder: _ctx.placeholder,
  414. form: _ctx.form,
  415. autofocus: _ctx.autofocus,
  416. rows: _ctx.rows,
  417. role: _ctx.containerRole,
  418. onCompositionstart: vue.unref(handleCompositionStart),
  419. onCompositionupdate: vue.unref(handleCompositionUpdate),
  420. onCompositionend: vue.unref(handleCompositionEnd),
  421. onInput: handleInput,
  422. onFocus: vue.unref(handleFocus),
  423. onBlur: vue.unref(handleBlur),
  424. onChange: handleChange,
  425. onKeydown: handleKeydown
  426. }), null, 16, ["id", "minlength", "maxlength", "tabindex", "disabled", "readonly", "autocomplete", "aria-label", "placeholder", "form", "autofocus", "rows", "role", "onCompositionstart", "onCompositionupdate", "onCompositionend", "onFocus", "onBlur"]),
  427. vue.unref(isWordLimitVisible) ? (vue.openBlock(), vue.createElementBlock("span", {
  428. key: 0,
  429. style: vue.normalizeStyle(countStyle.value),
  430. class: vue.normalizeClass(vue.unref(nsInput).e("count"))
  431. }, vue.toDisplayString(vue.unref(textLength)) + " / " + vue.toDisplayString(_ctx.maxlength), 7)) : vue.createCommentVNode("v-if", true)
  432. ], 64))
  433. ], 38);
  434. };
  435. }
  436. });
  437. var Input = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "input.vue"]]);
  438. exports["default"] = Input;
  439. //# sourceMappingURL=input2.js.map