Newer
Older
KaiFengPC / scripts / new_node_modules / element-plus / es / components / input / src / input2.mjs
@zhangdeliang zhangdeliang on 23 May 26 KB 初始化项目
  1. import {
  2. defineComponent,
  3. useAttrs,
  4. useSlots,
  5. computed,
  6. shallowRef,
  7. ref,
  8. nextTick,
  9. watch,
  10. onMounted,
  11. toRef,
  12. withDirectives,
  13. openBlock,
  14. createElementBlock,
  15. mergeProps,
  16. unref,
  17. createCommentVNode,
  18. Fragment,
  19. normalizeClass,
  20. renderSlot,
  21. createElementVNode,
  22. createBlock,
  23. withCtx,
  24. resolveDynamicComponent,
  25. withModifiers,
  26. createVNode,
  27. toDisplayString,
  28. normalizeStyle,
  29. vShow,
  30. } from 'vue';
  31. import { useResizeObserver, isClient } from '@vueuse/core';
  32. import { isNil } from 'lodash-unified';
  33. import { ElIcon } from '../../icon/index.mjs';
  34. import { View, Hide, CircleClose } from '@element-plus/icons-vue';
  35. import '../../../utils/index.mjs';
  36. import '../../../hooks/index.mjs';
  37. import '../../../constants/index.mjs';
  38. import { calcTextareaHeight } from './utils.mjs';
  39. import { inputProps, inputEmits } from './input.mjs';
  40. import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
  41. import { useAttrs as useAttrs$1 } from '../../../hooks/use-attrs/index.mjs';
  42. import { useFormItem, useFormItemInputId } from '../../../hooks/use-form-item/index.mjs';
  43. import { useSize, useDisabled } from '../../../hooks/use-common-props/index.mjs';
  44. import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
  45. import { ValidateComponentsMap } from '../../../utils/vue/icon.mjs';
  46. import { useCursor } from '../../../hooks/use-cursor/index.mjs';
  47. import { isObject, NOOP } from '@vue/shared';
  48. import { UPDATE_MODEL_EVENT } from '../../../constants/event.mjs';
  49. import { isKorean } from '../../../utils/i18n.mjs';
  50. import { debugWarn } from '../../../utils/error.mjs';
  51.  
  52. const _hoisted_1 = ['role'];
  53. const _hoisted_2 = [
  54. 'id',
  55. 'type',
  56. 'disabled',
  57. 'formatter',
  58. 'parser',
  59. 'readonly',
  60. 'autocomplete',
  61. 'tabindex',
  62. 'aria-label',
  63. 'placeholder',
  64. 'form',
  65. ];
  66. const _hoisted_3 = ['id', 'tabindex', 'disabled', 'readonly', 'autocomplete', 'aria-label', 'placeholder', 'form'];
  67. const __default__ = defineComponent({
  68. name: 'ElInput',
  69. inheritAttrs: false,
  70. });
  71. const _sfc_main = /* @__PURE__ */ defineComponent({
  72. ...__default__,
  73. props: inputProps,
  74. emits: inputEmits,
  75. setup(__props, { expose, emit }) {
  76. const props = __props;
  77. const rawAttrs = useAttrs();
  78. const slots = useSlots();
  79. const containerAttrs = computed(() => {
  80. const comboBoxAttrs = {};
  81. if (props.containerRole === 'combobox') {
  82. comboBoxAttrs['aria-haspopup'] = rawAttrs['aria-haspopup'];
  83. comboBoxAttrs['aria-owns'] = rawAttrs['aria-owns'];
  84. comboBoxAttrs['aria-expanded'] = rawAttrs['aria-expanded'];
  85. }
  86. return comboBoxAttrs;
  87. });
  88. const containerKls = computed(() => [
  89. props.type === 'textarea' ? nsTextarea.b() : nsInput.b(),
  90. nsInput.m(inputSize.value),
  91. nsInput.is('disabled', inputDisabled.value),
  92. nsInput.is('exceed', inputExceed.value),
  93. {
  94. [nsInput.b('group')]: slots.prepend || slots.append,
  95. [nsInput.bm('group', 'append')]: slots.append,
  96. [nsInput.bm('group', 'prepend')]: slots.prepend,
  97. [nsInput.m('prefix')]: slots.prefix || props.prefixIcon,
  98. [nsInput.m('suffix')]: slots.suffix || props.suffixIcon || props.clearable || props.showPassword,
  99. [nsInput.bm('suffix', 'password-clear')]: showClear.value && showPwdVisible.value,
  100. },
  101. rawAttrs.class,
  102. ]);
  103. const wrapperKls = computed(() => [nsInput.e('wrapper'), nsInput.is('focus', focused.value)]);
  104. const attrs = useAttrs$1({
  105. excludeKeys: computed(() => {
  106. return Object.keys(containerAttrs.value);
  107. }),
  108. });
  109. const { form, formItem } = useFormItem();
  110. const { inputId } = useFormItemInputId(props, {
  111. formItemContext: formItem,
  112. });
  113. const inputSize = useSize();
  114. const inputDisabled = useDisabled();
  115. const nsInput = useNamespace('input');
  116. const nsTextarea = useNamespace('textarea');
  117. const input = shallowRef();
  118. const textarea = shallowRef();
  119. const focused = ref(false);
  120. const hovering = ref(false);
  121. const isComposing = ref(false);
  122. const passwordVisible = ref(false);
  123. const countStyle = ref();
  124. const textareaCalcStyle = shallowRef(props.inputStyle);
  125. const _ref = computed(() => input.value || textarea.value);
  126. const needStatusIcon = computed(() => {
  127. var _a;
  128. return (_a = form == null ? void 0 : form.statusIcon) != null ? _a : false;
  129. });
  130. const validateState = computed(() => (formItem == null ? void 0 : formItem.validateState) || '');
  131. const validateIcon = computed(() => validateState.value && ValidateComponentsMap[validateState.value]);
  132. const passwordIcon = computed(() => (passwordVisible.value ? View : Hide));
  133. const containerStyle = computed(() => [rawAttrs.style, props.inputStyle]);
  134. const textareaStyle = computed(() => [props.inputStyle, textareaCalcStyle.value, { resize: props.resize }]);
  135. const nativeInputValue = computed(() => (isNil(props.modelValue) ? '' : String(props.modelValue)));
  136. const showClear = computed(
  137. () =>
  138. props.clearable &&
  139. !inputDisabled.value &&
  140. !props.readonly &&
  141. !!nativeInputValue.value &&
  142. (focused.value || hovering.value)
  143. );
  144. const showPwdVisible = computed(
  145. () =>
  146. props.showPassword &&
  147. !inputDisabled.value &&
  148. !props.readonly &&
  149. !!nativeInputValue.value &&
  150. (!!nativeInputValue.value || focused.value)
  151. );
  152. const isWordLimitVisible = computed(
  153. () =>
  154. props.showWordLimit &&
  155. !!attrs.value.maxlength &&
  156. (props.type === 'text' || props.type === 'textarea') &&
  157. !inputDisabled.value &&
  158. !props.readonly &&
  159. !props.showPassword
  160. );
  161. const textLength = computed(() => Array.from(nativeInputValue.value).length);
  162. const inputExceed = computed(() => !!isWordLimitVisible.value && textLength.value > Number(attrs.value.maxlength));
  163. const suffixVisible = computed(
  164. () =>
  165. !!slots.suffix ||
  166. !!props.suffixIcon ||
  167. showClear.value ||
  168. props.showPassword ||
  169. isWordLimitVisible.value ||
  170. (!!validateState.value && needStatusIcon.value)
  171. );
  172. const [recordCursor, setCursor] = useCursor(input);
  173. useResizeObserver(textarea, entries => {
  174. if (!isWordLimitVisible.value || props.resize !== 'both') return;
  175. const entry = entries[0];
  176. const { width } = entry.contentRect;
  177. countStyle.value = {
  178. right: `calc(100% - ${width + 15 + 6}px)`,
  179. };
  180. });
  181. const resizeTextarea = () => {
  182. const { type, autosize } = props;
  183. if (!isClient || type !== 'textarea') return;
  184. if (autosize) {
  185. const minRows = isObject(autosize) ? autosize.minRows : void 0;
  186. const maxRows = isObject(autosize) ? autosize.maxRows : void 0;
  187. textareaCalcStyle.value = {
  188. ...calcTextareaHeight(textarea.value, minRows, maxRows),
  189. };
  190. } else {
  191. textareaCalcStyle.value = {
  192. minHeight: calcTextareaHeight(textarea.value).minHeight,
  193. };
  194. }
  195. };
  196. const setNativeInputValue = () => {
  197. const input2 = _ref.value;
  198. if (!input2 || input2.value === nativeInputValue.value) return;
  199. input2.value = nativeInputValue.value;
  200. };
  201. const handleInput = async event => {
  202. recordCursor();
  203. let { value } = event.target;
  204. if (props.formatter) {
  205. value = props.parser ? props.parser(value) : value;
  206. value = props.formatter(value);
  207. }
  208. if (isComposing.value) return;
  209. if (value === nativeInputValue.value) {
  210. setNativeInputValue();
  211. return;
  212. }
  213. emit(UPDATE_MODEL_EVENT, value);
  214. emit('input', value);
  215. await nextTick();
  216. setNativeInputValue();
  217. setCursor();
  218. };
  219. const handleChange = event => {
  220. emit('change', event.target.value);
  221. };
  222. const handleCompositionStart = event => {
  223. emit('compositionstart', event);
  224. isComposing.value = true;
  225. };
  226. const handleCompositionUpdate = event => {
  227. var _a;
  228. emit('compositionupdate', event);
  229. const text = (_a = event.target) == null ? void 0 : _a.value;
  230. const lastCharacter = text[text.length - 1] || '';
  231. isComposing.value = !isKorean(lastCharacter);
  232. };
  233. const handleCompositionEnd = event => {
  234. emit('compositionend', event);
  235. if (isComposing.value) {
  236. isComposing.value = false;
  237. handleInput(event);
  238. }
  239. };
  240. const handlePasswordVisible = () => {
  241. passwordVisible.value = !passwordVisible.value;
  242. focus();
  243. };
  244. const focus = async () => {
  245. var _a;
  246. await nextTick();
  247. (_a = _ref.value) == null ? void 0 : _a.focus();
  248. };
  249. const blur = () => {
  250. var _a;
  251. return (_a = _ref.value) == null ? void 0 : _a.blur();
  252. };
  253. const handleFocus = event => {
  254. focused.value = true;
  255. emit('focus', event);
  256. };
  257. const handleBlur = event => {
  258. var _a;
  259. focused.value = false;
  260. emit('blur', event);
  261. if (props.validateEvent) {
  262. (_a = formItem == null ? void 0 : formItem.validate) == null
  263. ? void 0
  264. : _a.call(formItem, 'blur').catch(err => debugWarn(err));
  265. }
  266. };
  267. const handleMouseLeave = evt => {
  268. hovering.value = false;
  269. emit('mouseleave', evt);
  270. };
  271. const handleMouseEnter = evt => {
  272. hovering.value = true;
  273. emit('mouseenter', evt);
  274. };
  275. const handleKeydown = evt => {
  276. if (evt instanceof Event) {
  277. emit('keydown', evt);
  278. }
  279. };
  280. const select = () => {
  281. var _a;
  282. (_a = _ref.value) == null ? void 0 : _a.select();
  283. };
  284. const clear = () => {
  285. emit(UPDATE_MODEL_EVENT, '');
  286. emit('change', '');
  287. emit('clear');
  288. emit('input', '');
  289. };
  290. watch(
  291. () => props.modelValue,
  292. () => {
  293. var _a;
  294. nextTick(() => resizeTextarea());
  295. if (props.validateEvent) {
  296. (_a = formItem == null ? void 0 : formItem.validate) == null
  297. ? void 0
  298. : _a.call(formItem, 'change').catch(err => debugWarn(err));
  299. }
  300. }
  301. );
  302. watch(nativeInputValue, () => setNativeInputValue());
  303. watch(
  304. () => props.type,
  305. async () => {
  306. await nextTick();
  307. setNativeInputValue();
  308. resizeTextarea();
  309. }
  310. );
  311. onMounted(() => {
  312. if (!props.formatter && props.parser) {
  313. debugWarn('ElInput', 'If you set the parser, you also need to set the formatter.');
  314. }
  315. setNativeInputValue();
  316. nextTick(resizeTextarea);
  317. });
  318. expose({
  319. input,
  320. textarea,
  321. ref: _ref,
  322. textareaStyle,
  323. autosize: toRef(props, 'autosize'),
  324. focus,
  325. blur,
  326. select,
  327. clear,
  328. resizeTextarea,
  329. });
  330. return (_ctx, _cache) => {
  331. return withDirectives(
  332. (openBlock(),
  333. createElementBlock(
  334. 'div',
  335. mergeProps(unref(containerAttrs), {
  336. class: unref(containerKls),
  337. style: unref(containerStyle),
  338. role: _ctx.containerRole,
  339. onMouseenter: handleMouseEnter,
  340. onMouseleave: handleMouseLeave,
  341. }),
  342. [
  343. createCommentVNode(' input '),
  344. _ctx.type !== 'textarea'
  345. ? (openBlock(),
  346. createElementBlock(
  347. Fragment,
  348. { key: 0 },
  349. [
  350. createCommentVNode(' prepend slot '),
  351. _ctx.$slots.prepend
  352. ? (openBlock(),
  353. createElementBlock(
  354. 'div',
  355. {
  356. key: 0,
  357. class: normalizeClass(unref(nsInput).be('group', 'prepend')),
  358. },
  359. [renderSlot(_ctx.$slots, 'prepend')],
  360. 2
  361. ))
  362. : createCommentVNode('v-if', true),
  363. createElementVNode(
  364. 'div',
  365. {
  366. class: normalizeClass(unref(wrapperKls)),
  367. },
  368. [
  369. createCommentVNode(' prefix slot '),
  370. _ctx.$slots.prefix || _ctx.prefixIcon
  371. ? (openBlock(),
  372. createElementBlock(
  373. 'span',
  374. {
  375. key: 0,
  376. class: normalizeClass(unref(nsInput).e('prefix')),
  377. },
  378. [
  379. createElementVNode(
  380. 'span',
  381. {
  382. class: normalizeClass(unref(nsInput).e('prefix-inner')),
  383. onClick: focus,
  384. },
  385. [
  386. renderSlot(_ctx.$slots, 'prefix'),
  387. _ctx.prefixIcon
  388. ? (openBlock(),
  389. createBlock(
  390. unref(ElIcon),
  391. {
  392. key: 0,
  393. class: normalizeClass(unref(nsInput).e('icon')),
  394. },
  395. {
  396. default: withCtx(() => [
  397. (openBlock(), createBlock(resolveDynamicComponent(_ctx.prefixIcon))),
  398. ]),
  399. _: 1,
  400. },
  401. 8,
  402. ['class']
  403. ))
  404. : createCommentVNode('v-if', true),
  405. ],
  406. 2
  407. ),
  408. ],
  409. 2
  410. ))
  411. : createCommentVNode('v-if', true),
  412. createElementVNode(
  413. 'input',
  414. mergeProps(
  415. {
  416. id: unref(inputId),
  417. ref_key: 'input',
  418. ref: input,
  419. class: unref(nsInput).e('inner'),
  420. },
  421. unref(attrs),
  422. {
  423. type: _ctx.showPassword ? (passwordVisible.value ? 'text' : 'password') : _ctx.type,
  424. disabled: unref(inputDisabled),
  425. formatter: _ctx.formatter,
  426. parser: _ctx.parser,
  427. readonly: _ctx.readonly,
  428. autocomplete: _ctx.autocomplete,
  429. tabindex: _ctx.tabindex,
  430. 'aria-label': _ctx.label,
  431. placeholder: _ctx.placeholder,
  432. style: _ctx.inputStyle,
  433. form: props.form,
  434. onCompositionstart: handleCompositionStart,
  435. onCompositionupdate: handleCompositionUpdate,
  436. onCompositionend: handleCompositionEnd,
  437. onInput: handleInput,
  438. onFocus: handleFocus,
  439. onBlur: handleBlur,
  440. onChange: handleChange,
  441. onKeydown: handleKeydown,
  442. }
  443. ),
  444. null,
  445. 16,
  446. _hoisted_2
  447. ),
  448. createCommentVNode(' suffix slot '),
  449. unref(suffixVisible)
  450. ? (openBlock(),
  451. createElementBlock(
  452. 'span',
  453. {
  454. key: 1,
  455. class: normalizeClass(unref(nsInput).e('suffix')),
  456. },
  457. [
  458. createElementVNode(
  459. 'span',
  460. {
  461. class: normalizeClass(unref(nsInput).e('suffix-inner')),
  462. onClick: focus,
  463. },
  464. [
  465. !unref(showClear) || !unref(showPwdVisible) || !unref(isWordLimitVisible)
  466. ? (openBlock(),
  467. createElementBlock(
  468. Fragment,
  469. { key: 0 },
  470. [
  471. renderSlot(_ctx.$slots, 'suffix'),
  472. _ctx.suffixIcon
  473. ? (openBlock(),
  474. createBlock(
  475. unref(ElIcon),
  476. {
  477. key: 0,
  478. class: normalizeClass(unref(nsInput).e('icon')),
  479. },
  480. {
  481. default: withCtx(() => [
  482. (openBlock(), createBlock(resolveDynamicComponent(_ctx.suffixIcon))),
  483. ]),
  484. _: 1,
  485. },
  486. 8,
  487. ['class']
  488. ))
  489. : createCommentVNode('v-if', true),
  490. ],
  491. 64
  492. ))
  493. : createCommentVNode('v-if', true),
  494. unref(showClear)
  495. ? (openBlock(),
  496. createBlock(
  497. unref(ElIcon),
  498. {
  499. key: 1,
  500. class: normalizeClass([unref(nsInput).e('icon'), unref(nsInput).e('clear')]),
  501. onMousedown: withModifiers(unref(NOOP), ['prevent']),
  502. onClick: clear,
  503. },
  504. {
  505. default: withCtx(() => [createVNode(unref(CircleClose))]),
  506. _: 1,
  507. },
  508. 8,
  509. ['class', 'onMousedown']
  510. ))
  511. : createCommentVNode('v-if', true),
  512. unref(showPwdVisible)
  513. ? (openBlock(),
  514. createBlock(
  515. unref(ElIcon),
  516. {
  517. key: 2,
  518. class: normalizeClass([unref(nsInput).e('icon'), unref(nsInput).e('password')]),
  519. onClick: handlePasswordVisible,
  520. },
  521. {
  522. default: withCtx(() => [
  523. (openBlock(), createBlock(resolveDynamicComponent(unref(passwordIcon)))),
  524. ]),
  525. _: 1,
  526. },
  527. 8,
  528. ['class']
  529. ))
  530. : createCommentVNode('v-if', true),
  531. unref(isWordLimitVisible)
  532. ? (openBlock(),
  533. createElementBlock(
  534. 'span',
  535. {
  536. key: 3,
  537. class: normalizeClass(unref(nsInput).e('count')),
  538. },
  539. [
  540. createElementVNode(
  541. 'span',
  542. {
  543. class: normalizeClass(unref(nsInput).e('count-inner')),
  544. },
  545. toDisplayString(unref(textLength)) +
  546. ' / ' +
  547. toDisplayString(unref(attrs).maxlength),
  548. 3
  549. ),
  550. ],
  551. 2
  552. ))
  553. : createCommentVNode('v-if', true),
  554. unref(validateState) && unref(validateIcon) && unref(needStatusIcon)
  555. ? (openBlock(),
  556. createBlock(
  557. unref(ElIcon),
  558. {
  559. key: 4,
  560. class: normalizeClass([
  561. unref(nsInput).e('icon'),
  562. unref(nsInput).e('validateIcon'),
  563. unref(nsInput).is('loading', unref(validateState) === 'validating'),
  564. ]),
  565. },
  566. {
  567. default: withCtx(() => [
  568. (openBlock(), createBlock(resolveDynamicComponent(unref(validateIcon)))),
  569. ]),
  570. _: 1,
  571. },
  572. 8,
  573. ['class']
  574. ))
  575. : createCommentVNode('v-if', true),
  576. ],
  577. 2
  578. ),
  579. ],
  580. 2
  581. ))
  582. : createCommentVNode('v-if', true),
  583. ],
  584. 2
  585. ),
  586. createCommentVNode(' append slot '),
  587. _ctx.$slots.append
  588. ? (openBlock(),
  589. createElementBlock(
  590. 'div',
  591. {
  592. key: 1,
  593. class: normalizeClass(unref(nsInput).be('group', 'append')),
  594. },
  595. [renderSlot(_ctx.$slots, 'append')],
  596. 2
  597. ))
  598. : createCommentVNode('v-if', true),
  599. ],
  600. 64
  601. ))
  602. : (openBlock(),
  603. createElementBlock(
  604. Fragment,
  605. { key: 1 },
  606. [
  607. createCommentVNode(' textarea '),
  608. createElementVNode(
  609. 'textarea',
  610. mergeProps(
  611. {
  612. id: unref(inputId),
  613. ref_key: 'textarea',
  614. ref: textarea,
  615. class: unref(nsTextarea).e('inner'),
  616. },
  617. unref(attrs),
  618. {
  619. tabindex: _ctx.tabindex,
  620. disabled: unref(inputDisabled),
  621. readonly: _ctx.readonly,
  622. autocomplete: _ctx.autocomplete,
  623. style: unref(textareaStyle),
  624. 'aria-label': _ctx.label,
  625. placeholder: _ctx.placeholder,
  626. form: props.form,
  627. onCompositionstart: handleCompositionStart,
  628. onCompositionupdate: handleCompositionUpdate,
  629. onCompositionend: handleCompositionEnd,
  630. onInput: handleInput,
  631. onFocus: handleFocus,
  632. onBlur: handleBlur,
  633. onChange: handleChange,
  634. onKeydown: handleKeydown,
  635. }
  636. ),
  637. null,
  638. 16,
  639. _hoisted_3
  640. ),
  641. unref(isWordLimitVisible)
  642. ? (openBlock(),
  643. createElementBlock(
  644. 'span',
  645. {
  646. key: 0,
  647. style: normalizeStyle(countStyle.value),
  648. class: normalizeClass(unref(nsInput).e('count')),
  649. },
  650. toDisplayString(unref(textLength)) + ' / ' + toDisplayString(unref(attrs).maxlength),
  651. 7
  652. ))
  653. : createCommentVNode('v-if', true),
  654. ],
  655. 64
  656. )),
  657. ],
  658. 16,
  659. _hoisted_1
  660. )),
  661. [[vShow, _ctx.type !== 'hidden']]
  662. );
  663. };
  664. },
  665. });
  666. var Input = /* @__PURE__ */ _export_sfc(_sfc_main, [
  667. ['__file', '/home/runner/work/element-plus/element-plus/packages/components/input/src/input.vue'],
  668. ]);
  669.  
  670. export { Input as default };
  671. //# sourceMappingURL=input2.mjs.map