| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439 |
- import { defineComponent, useAttrs, useSlots, computed, shallowRef, ref, watch, nextTick, onMounted, toRef, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, createCommentVNode, Fragment, renderSlot, createElementVNode, createBlock, withCtx, resolveDynamicComponent, mergeProps, withModifiers, toDisplayString } from 'vue';
- import { useResizeObserver, isClient } from '@vueuse/core';
- import { isNil } from 'lodash-unified';
- import { ElIcon } from '../../icon/index.mjs';
- import { View, Hide } from '@element-plus/icons-vue';
- import { calcTextareaHeight } from './utils.mjs';
- import { inputProps, inputEmits } from './input.mjs';
- import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
- import { useAttrs as useAttrs$1 } from '../../../hooks/use-attrs/index.mjs';
- import { useFormItem, useFormItemInputId } from '../../form/src/hooks/use-form-item.mjs';
- import { useFormSize, useFormDisabled } from '../../form/src/hooks/use-form-common-props.mjs';
- import { useFocusController } from '../../../hooks/use-focus-controller/index.mjs';
- import { ValidateComponentsMap } from '../../../utils/vue/icon.mjs';
- import { useComposition } from '../../../hooks/use-composition/index.mjs';
- import { UPDATE_MODEL_EVENT, INPUT_EVENT, CHANGE_EVENT } from '../../../constants/event.mjs';
- import { useCursor } from '../../../hooks/use-cursor/index.mjs';
- import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
- import { debugWarn } from '../../../utils/error.mjs';
- import { NOOP, isObject } from '@vue/shared';
- const COMPONENT_NAME = "ElInput";
- const __default__ = defineComponent({
- name: COMPONENT_NAME,
- inheritAttrs: false
- });
- const _sfc_main = /* @__PURE__ */ defineComponent({
- ...__default__,
- props: inputProps,
- emits: inputEmits,
- setup(__props, { expose, emit }) {
- const props = __props;
- const rawAttrs = useAttrs();
- const attrs = useAttrs$1();
- const slots = useSlots();
- const containerKls = computed(() => [
- props.type === "textarea" ? nsTextarea.b() : nsInput.b(),
- nsInput.m(inputSize.value),
- nsInput.is("disabled", inputDisabled.value),
- nsInput.is("exceed", inputExceed.value),
- {
- [nsInput.b("group")]: slots.prepend || slots.append,
- [nsInput.m("prefix")]: slots.prefix || props.prefixIcon,
- [nsInput.m("suffix")]: slots.suffix || props.suffixIcon || props.clearable || props.showPassword,
- [nsInput.bm("suffix", "password-clear")]: showClear.value && showPwdVisible.value,
- [nsInput.b("hidden")]: props.type === "hidden"
- },
- rawAttrs.class
- ]);
- const wrapperKls = computed(() => [
- nsInput.e("wrapper"),
- nsInput.is("focus", isFocused.value)
- ]);
- const { form: elForm, formItem: elFormItem } = useFormItem();
- const { inputId } = useFormItemInputId(props, {
- formItemContext: elFormItem
- });
- const inputSize = useFormSize();
- const inputDisabled = useFormDisabled();
- const nsInput = useNamespace("input");
- const nsTextarea = useNamespace("textarea");
- const input = shallowRef();
- const textarea = shallowRef();
- const hovering = ref(false);
- const passwordVisible = ref(false);
- const countStyle = ref();
- const textareaCalcStyle = shallowRef(props.inputStyle);
- const _ref = computed(() => input.value || textarea.value);
- const { wrapperRef, isFocused, handleFocus, handleBlur } = useFocusController(_ref, {
- disabled: inputDisabled,
- afterBlur() {
- var _a;
- if (props.validateEvent) {
- (_a = elFormItem == null ? void 0 : elFormItem.validate) == null ? void 0 : _a.call(elFormItem, "blur").catch((err) => debugWarn());
- }
- }
- });
- const needStatusIcon = computed(() => {
- var _a;
- return (_a = elForm == null ? void 0 : elForm.statusIcon) != null ? _a : false;
- });
- const validateState = computed(() => (elFormItem == null ? void 0 : elFormItem.validateState) || "");
- const validateIcon = computed(() => validateState.value && ValidateComponentsMap[validateState.value]);
- const passwordIcon = computed(() => passwordVisible.value ? View : Hide);
- const containerStyle = computed(() => [
- rawAttrs.style
- ]);
- const textareaStyle = computed(() => [
- props.inputStyle,
- textareaCalcStyle.value,
- { resize: props.resize }
- ]);
- const nativeInputValue = computed(() => isNil(props.modelValue) ? "" : String(props.modelValue));
- const showClear = computed(() => props.clearable && !inputDisabled.value && !props.readonly && !!nativeInputValue.value && (isFocused.value || hovering.value));
- const showPwdVisible = computed(() => props.showPassword && !inputDisabled.value && !!nativeInputValue.value);
- const isWordLimitVisible = computed(() => props.showWordLimit && !!props.maxlength && (props.type === "text" || props.type === "textarea") && !inputDisabled.value && !props.readonly && !props.showPassword);
- const textLength = computed(() => nativeInputValue.value.length);
- const inputExceed = computed(() => !!isWordLimitVisible.value && textLength.value > Number(props.maxlength));
- const suffixVisible = computed(() => !!slots.suffix || !!props.suffixIcon || showClear.value || props.showPassword || isWordLimitVisible.value || !!validateState.value && needStatusIcon.value);
- const [recordCursor, setCursor] = useCursor(input);
- useResizeObserver(textarea, (entries) => {
- onceInitSizeTextarea();
- if (!isWordLimitVisible.value || props.resize !== "both")
- return;
- const entry = entries[0];
- const { width } = entry.contentRect;
- countStyle.value = {
- right: `calc(100% - ${width + 15 + 6}px)`
- };
- });
- const resizeTextarea = () => {
- const { type, autosize } = props;
- if (!isClient || type !== "textarea" || !textarea.value)
- return;
- if (autosize) {
- const minRows = isObject(autosize) ? autosize.minRows : void 0;
- const maxRows = isObject(autosize) ? autosize.maxRows : void 0;
- const textareaStyle2 = calcTextareaHeight(textarea.value, minRows, maxRows);
- textareaCalcStyle.value = {
- overflowY: "hidden",
- ...textareaStyle2
- };
- nextTick(() => {
- textarea.value.offsetHeight;
- textareaCalcStyle.value = textareaStyle2;
- });
- } else {
- textareaCalcStyle.value = {
- minHeight: calcTextareaHeight(textarea.value).minHeight
- };
- }
- };
- const createOnceInitResize = (resizeTextarea2) => {
- let isInit = false;
- return () => {
- var _a;
- if (isInit || !props.autosize)
- return;
- const isElHidden = ((_a = textarea.value) == null ? void 0 : _a.offsetParent) === null;
- if (!isElHidden) {
- setTimeout(resizeTextarea2);
- isInit = true;
- }
- };
- };
- const onceInitSizeTextarea = createOnceInitResize(resizeTextarea);
- const setNativeInputValue = () => {
- const input2 = _ref.value;
- const formatterValue = props.formatter ? props.formatter(nativeInputValue.value) : nativeInputValue.value;
- if (!input2 || input2.value === formatterValue)
- return;
- input2.value = formatterValue;
- };
- const handleInput = async (event) => {
- recordCursor();
- let { value } = event.target;
- if (props.formatter && props.parser) {
- value = props.parser(value);
- }
- if (isComposing.value)
- return;
- if (value === nativeInputValue.value) {
- setNativeInputValue();
- return;
- }
- emit(UPDATE_MODEL_EVENT, value);
- emit(INPUT_EVENT, value);
- await nextTick();
- setNativeInputValue();
- setCursor();
- };
- const handleChange = (event) => {
- let { value } = event.target;
- if (props.formatter && props.parser) {
- value = props.parser(value);
- }
- emit(CHANGE_EVENT, value);
- };
- const {
- isComposing,
- handleCompositionStart,
- handleCompositionUpdate,
- handleCompositionEnd
- } = useComposition({ emit, afterComposition: handleInput });
- const handlePasswordVisible = () => {
- recordCursor();
- passwordVisible.value = !passwordVisible.value;
- setTimeout(setCursor);
- };
- const focus = () => {
- var _a;
- return (_a = _ref.value) == null ? void 0 : _a.focus();
- };
- const blur = () => {
- var _a;
- return (_a = _ref.value) == null ? void 0 : _a.blur();
- };
- const handleMouseLeave = (evt) => {
- hovering.value = false;
- emit("mouseleave", evt);
- };
- const handleMouseEnter = (evt) => {
- hovering.value = true;
- emit("mouseenter", evt);
- };
- const handleKeydown = (evt) => {
- emit("keydown", evt);
- };
- const select = () => {
- var _a;
- (_a = _ref.value) == null ? void 0 : _a.select();
- };
- const clear = () => {
- emit(UPDATE_MODEL_EVENT, "");
- emit(CHANGE_EVENT, "");
- emit("clear");
- emit(INPUT_EVENT, "");
- };
- watch(() => props.modelValue, () => {
- var _a;
- nextTick(() => resizeTextarea());
- if (props.validateEvent) {
- (_a = elFormItem == null ? void 0 : elFormItem.validate) == null ? void 0 : _a.call(elFormItem, "change").catch((err) => debugWarn());
- }
- });
- watch(nativeInputValue, () => setNativeInputValue());
- watch(() => props.type, async () => {
- await nextTick();
- setNativeInputValue();
- resizeTextarea();
- });
- onMounted(() => {
- if (!props.formatter && props.parser) ;
- setNativeInputValue();
- nextTick(resizeTextarea);
- });
- expose({
- input,
- textarea,
- ref: _ref,
- textareaStyle,
- autosize: toRef(props, "autosize"),
- isComposing,
- focus,
- blur,
- select,
- clear,
- resizeTextarea
- });
- return (_ctx, _cache) => {
- return openBlock(), createElementBlock("div", {
- class: normalizeClass([
- unref(containerKls),
- {
- [unref(nsInput).bm("group", "append")]: _ctx.$slots.append,
- [unref(nsInput).bm("group", "prepend")]: _ctx.$slots.prepend
- }
- ]),
- style: normalizeStyle(unref(containerStyle)),
- onMouseenter: handleMouseEnter,
- onMouseleave: handleMouseLeave
- }, [
- createCommentVNode(" input "),
- _ctx.type !== "textarea" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
- createCommentVNode(" prepend slot "),
- _ctx.$slots.prepend ? (openBlock(), createElementBlock("div", {
- key: 0,
- class: normalizeClass(unref(nsInput).be("group", "prepend"))
- }, [
- renderSlot(_ctx.$slots, "prepend")
- ], 2)) : createCommentVNode("v-if", true),
- createElementVNode("div", {
- ref_key: "wrapperRef",
- ref: wrapperRef,
- class: normalizeClass(unref(wrapperKls))
- }, [
- createCommentVNode(" prefix slot "),
- _ctx.$slots.prefix || _ctx.prefixIcon ? (openBlock(), createElementBlock("span", {
- key: 0,
- class: normalizeClass(unref(nsInput).e("prefix"))
- }, [
- createElementVNode("span", {
- class: normalizeClass(unref(nsInput).e("prefix-inner"))
- }, [
- renderSlot(_ctx.$slots, "prefix"),
- _ctx.prefixIcon ? (openBlock(), createBlock(unref(ElIcon), {
- key: 0,
- class: normalizeClass(unref(nsInput).e("icon"))
- }, {
- default: withCtx(() => [
- (openBlock(), createBlock(resolveDynamicComponent(_ctx.prefixIcon)))
- ]),
- _: 1
- }, 8, ["class"])) : createCommentVNode("v-if", true)
- ], 2)
- ], 2)) : createCommentVNode("v-if", true),
- createElementVNode("input", mergeProps({
- id: unref(inputId),
- ref_key: "input",
- ref: input,
- class: unref(nsInput).e("inner")
- }, unref(attrs), {
- name: _ctx.name,
- minlength: _ctx.minlength,
- maxlength: _ctx.maxlength,
- type: _ctx.showPassword ? passwordVisible.value ? "text" : "password" : _ctx.type,
- disabled: unref(inputDisabled),
- readonly: _ctx.readonly,
- autocomplete: _ctx.autocomplete,
- tabindex: _ctx.tabindex,
- "aria-label": _ctx.ariaLabel,
- placeholder: _ctx.placeholder,
- style: _ctx.inputStyle,
- form: _ctx.form,
- autofocus: _ctx.autofocus,
- role: _ctx.containerRole,
- inputmode: _ctx.inputmode,
- onCompositionstart: unref(handleCompositionStart),
- onCompositionupdate: unref(handleCompositionUpdate),
- onCompositionend: unref(handleCompositionEnd),
- onInput: handleInput,
- onChange: handleChange,
- onKeydown: handleKeydown
- }), null, 16, ["id", "name", "minlength", "maxlength", "type", "disabled", "readonly", "autocomplete", "tabindex", "aria-label", "placeholder", "form", "autofocus", "role", "inputmode", "onCompositionstart", "onCompositionupdate", "onCompositionend"]),
- createCommentVNode(" suffix slot "),
- unref(suffixVisible) ? (openBlock(), createElementBlock("span", {
- key: 1,
- class: normalizeClass(unref(nsInput).e("suffix"))
- }, [
- createElementVNode("span", {
- class: normalizeClass(unref(nsInput).e("suffix-inner"))
- }, [
- !unref(showClear) || !unref(showPwdVisible) || !unref(isWordLimitVisible) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
- renderSlot(_ctx.$slots, "suffix"),
- _ctx.suffixIcon ? (openBlock(), createBlock(unref(ElIcon), {
- key: 0,
- class: normalizeClass(unref(nsInput).e("icon"))
- }, {
- default: withCtx(() => [
- (openBlock(), createBlock(resolveDynamicComponent(_ctx.suffixIcon)))
- ]),
- _: 1
- }, 8, ["class"])) : createCommentVNode("v-if", true)
- ], 64)) : createCommentVNode("v-if", true),
- unref(showClear) ? (openBlock(), createBlock(unref(ElIcon), {
- key: 1,
- class: normalizeClass([unref(nsInput).e("icon"), unref(nsInput).e("clear")]),
- onMousedown: withModifiers(unref(NOOP), ["prevent"]),
- onClick: clear
- }, {
- default: withCtx(() => [
- (openBlock(), createBlock(resolveDynamicComponent(_ctx.clearIcon)))
- ]),
- _: 1
- }, 8, ["class", "onMousedown"])) : createCommentVNode("v-if", true),
- unref(showPwdVisible) ? (openBlock(), createBlock(unref(ElIcon), {
- key: 2,
- class: normalizeClass([unref(nsInput).e("icon"), unref(nsInput).e("password")]),
- onClick: handlePasswordVisible
- }, {
- default: withCtx(() => [
- (openBlock(), createBlock(resolveDynamicComponent(unref(passwordIcon))))
- ]),
- _: 1
- }, 8, ["class"])) : createCommentVNode("v-if", true),
- unref(isWordLimitVisible) ? (openBlock(), createElementBlock("span", {
- key: 3,
- class: normalizeClass(unref(nsInput).e("count"))
- }, [
- createElementVNode("span", {
- class: normalizeClass(unref(nsInput).e("count-inner"))
- }, toDisplayString(unref(textLength)) + " / " + toDisplayString(_ctx.maxlength), 3)
- ], 2)) : createCommentVNode("v-if", true),
- unref(validateState) && unref(validateIcon) && unref(needStatusIcon) ? (openBlock(), createBlock(unref(ElIcon), {
- key: 4,
- class: normalizeClass([
- unref(nsInput).e("icon"),
- unref(nsInput).e("validateIcon"),
- unref(nsInput).is("loading", unref(validateState) === "validating")
- ])
- }, {
- default: withCtx(() => [
- (openBlock(), createBlock(resolveDynamicComponent(unref(validateIcon))))
- ]),
- _: 1
- }, 8, ["class"])) : createCommentVNode("v-if", true)
- ], 2)
- ], 2)) : createCommentVNode("v-if", true)
- ], 2),
- createCommentVNode(" append slot "),
- _ctx.$slots.append ? (openBlock(), createElementBlock("div", {
- key: 1,
- class: normalizeClass(unref(nsInput).be("group", "append"))
- }, [
- renderSlot(_ctx.$slots, "append")
- ], 2)) : createCommentVNode("v-if", true)
- ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
- createCommentVNode(" textarea "),
- createElementVNode("textarea", mergeProps({
- id: unref(inputId),
- ref_key: "textarea",
- ref: textarea,
- class: [unref(nsTextarea).e("inner"), unref(nsInput).is("focus", unref(isFocused))]
- }, unref(attrs), {
- minlength: _ctx.minlength,
- maxlength: _ctx.maxlength,
- tabindex: _ctx.tabindex,
- disabled: unref(inputDisabled),
- readonly: _ctx.readonly,
- autocomplete: _ctx.autocomplete,
- style: unref(textareaStyle),
- "aria-label": _ctx.ariaLabel,
- placeholder: _ctx.placeholder,
- form: _ctx.form,
- autofocus: _ctx.autofocus,
- rows: _ctx.rows,
- role: _ctx.containerRole,
- onCompositionstart: unref(handleCompositionStart),
- onCompositionupdate: unref(handleCompositionUpdate),
- onCompositionend: unref(handleCompositionEnd),
- onInput: handleInput,
- onFocus: unref(handleFocus),
- onBlur: unref(handleBlur),
- onChange: handleChange,
- onKeydown: handleKeydown
- }), null, 16, ["id", "minlength", "maxlength", "tabindex", "disabled", "readonly", "autocomplete", "aria-label", "placeholder", "form", "autofocus", "rows", "role", "onCompositionstart", "onCompositionupdate", "onCompositionend", "onFocus", "onBlur"]),
- unref(isWordLimitVisible) ? (openBlock(), createElementBlock("span", {
- key: 0,
- style: normalizeStyle(countStyle.value),
- class: normalizeClass(unref(nsInput).e("count"))
- }, toDisplayString(unref(textLength)) + " / " + toDisplayString(_ctx.maxlength), 7)) : createCommentVNode("v-if", true)
- ], 64))
- ], 38);
- };
- }
- });
- var Input = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "input.vue"]]);
- export { Input as default };
- //# sourceMappingURL=input2.mjs.map
|