hongluan-ui
Version:
Hongluan Component Library for Vue 3
448 lines (443 loc) • 17 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var lodashUnified = require('lodash-unified');
require('../../../hooks/index.js');
require('../../../constants/index.js');
require('../../../utils/index.js');
var core = require('@vueuse/core');
require('../../../tokens/index.js');
var index = require('../../icon/index.js');
require('../../system-icon/index.js');
var utils = require('./utils.js');
var input = require('./input.js');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
var close = require('../../system-icon/src/close.js');
var show = require('../../system-icon/src/show.js');
var hidden = require('../../system-icon/src/hidden.js');
var event = require('../../../constants/event.js');
var index$1 = require('../../../hooks/use-namespace/index.js');
var index$2 = require('../../../hooks/use-attrs/index.js');
var form = require('../../../tokens/form.js');
var index$3 = require('../../../hooks/use-focus-controller/index.js');
var error = require('../../../utils/error.js');
var index$4 = require('../../../hooks/use-consistent-prop/index.js');
var index$5 = require('../../../hooks/use-cursor/index.js');
var index$6 = require('../../../hooks/use-form-item/index.js');
var shared = require('@vue/shared');
var index$7 = require('../../../hooks/use-composition/index.js');
const _sfc_main = vue.defineComponent({
name: "Input",
components: {
HlIcon: index.HlIcon,
SystemClose: close["default"],
SystemShow: show["default"],
SystemHidden: hidden["default"]
},
inheritAttrs: false,
props: input.inputProps,
emits: [
event.UPDATE_MODEL_EVENT,
"input",
"change",
"focus",
"blur",
"clear",
"mouseleave",
"mouseenter",
"keydown",
"compositionstart",
"compositionupdate",
"compositionend"
],
setup(props, { emit, slots, attrs: rawAttrs }) {
const { namespace } = index$1.useNamespace("input");
const containerAttrs = vue.computed(() => {
const comboBoxAttrs = {};
if (props.containerRole === "combobox") {
comboBoxAttrs["aria-haspopup"] = rawAttrs["aria-haspopup"];
comboBoxAttrs["aria-owns"] = rawAttrs["aria-owns"];
comboBoxAttrs["aria-expanded"] = rawAttrs["aria-expanded"];
}
return comboBoxAttrs;
});
const attrs = index$2.useAttrs({
excludeKeys: vue.computed(() => {
return Object.keys(containerAttrs.value);
})
});
const form$1 = vue.inject(form.formContextKey, {});
const formItem = vue.inject(form.formItemContextKey, {});
const input = vue.ref();
const textarea = vue.ref();
const countStyle = vue.ref();
const hovering = vue.ref(false);
const passwordVisible = vue.ref(false);
const _textareaCalcStyle = vue.shallowRef(props.inputStyle);
const inputOrTextarea = vue.computed(() => input.value || textarea.value);
const { wrapperRef, isFocused, handleFocus, handleBlur } = index$3.useFocusController(inputOrTextarea, {
afterBlur() {
var _a;
if (props.validateEvent) {
(_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "blur").catch((err) => error.debugWarn(err));
}
}
});
const { size: inputSize, disabled: inputDisabled, fill: inputFill } = index$4.useConsistentProp();
const needStatusIcon = vue.computed(() => form$1.statusIcon);
const validateState = vue.computed(() => formItem.validateState || "");
const textareaStyle = vue.computed(() => [
props.inputStyle,
_textareaCalcStyle.value,
{ resize: props.resize }
]);
const nativeInputValue = vue.computed(() => lodashUnified.isNil(props.modelValue) ? "" : String(props.modelValue));
const showClear = vue.computed(() => {
return props.clearable && !inputDisabled.value && !props.readonly && !!nativeInputValue.value && (isFocused.value || hovering.value);
});
const showPwdVisible = vue.computed(() => {
return props.showPassword && !inputDisabled.value && !props.readonly && !!nativeInputValue.value && (!!nativeInputValue.value || isFocused.value);
});
const isWordLimitVisible = vue.computed(() => {
return props.showWordLimit && !!props.maxlength && (props.nativeType === "text" || props.nativeType === "textarea") && !inputDisabled.value && !props.readonly && !props.showPassword;
});
const textLength = vue.computed(() => nativeInputValue.value.length);
const inputExceed = vue.computed(() => {
return isWordLimitVisible.value && textLength.value > Number(props.maxlength);
});
const [recordCursor, setCursor] = index$5.useCursor(input);
const { inputId } = index$6.useFormItemInputId(props, {
formItemContext: formItem
});
core.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 { nativeType, autosize } = props;
if (!core.isClient || nativeType !== "textarea" || !textarea.value)
return;
if (autosize) {
const minRows = shared.isObject(autosize) ? autosize.minRows : void 0;
const maxRows = shared.isObject(autosize) ? autosize.maxRows : void 0;
const textareaStyle2 = utils.calcTextareaHeight(textarea.value, minRows, maxRows);
_textareaCalcStyle.value = {
overflowY: "hidden",
...textareaStyle2
};
vue.nextTick(() => {
textarea.value.offsetHeight;
_textareaCalcStyle.value = textareaStyle2;
});
} else {
_textareaCalcStyle.value = {
minHeight: utils.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) {
resizeTextarea2();
isInit = true;
}
};
};
const onceInitSizeTextarea = createOnceInitResize(resizeTextarea);
const setNativeInputValue = () => {
const input2 = inputOrTextarea.value;
const formatterValue = props.formatter ? props.formatter(nativeInputValue.value) : nativeInputValue.value;
if (!input2 || input2.value === formatterValue)
return;
input2.value = formatterValue;
};
const handleInput = (event$1) => {
recordCursor();
let { value } = event$1.target;
if (props.formatter) {
value = props.parser ? props.parser(value) : value;
}
if (isComposing.value)
return;
if (value === nativeInputValue.value) {
setNativeInputValue();
return;
}
emit(event.UPDATE_MODEL_EVENT, value);
emit("input", value, event$1);
vue.nextTick(setNativeInputValue);
setCursor();
};
const handleChange = (event) => {
emit("change", event.target.value);
};
const focus = () => {
vue.nextTick(() => {
var _a;
(_a = inputOrTextarea.value) == null ? void 0 : _a.focus();
});
};
const blur = () => {
var _a;
(_a = inputOrTextarea.value) == null ? void 0 : _a.blur();
};
const select = () => {
var _a;
(_a = inputOrTextarea.value) == null ? void 0 : _a.select();
};
const {
isComposing,
handleCompositionStart,
handleCompositionUpdate,
handleCompositionEnd
} = index$7.useComposition({ emit, afterComposition: handleInput });
const clear = () => {
emit(event.UPDATE_MODEL_EVENT, "");
emit("change", "");
emit("clear");
emit("input", "");
};
const handlePasswordVisible = () => {
passwordVisible.value = !passwordVisible.value;
focus();
};
const getSuffixVisible = () => {
return slots.suffix || props.clearable || validateState.value && needStatusIcon.value;
};
const getPwdVisible = () => {
return props.showPassword || validateState.value && needStatusIcon.value;
};
vue.watch(() => props.modelValue, () => {
var _a;
vue.nextTick(() => resizeTextarea());
if (props.validateEvent) {
(_a = formItem.validate) == null ? void 0 : _a.call(formItem, form.FormItemEvents.change).catch((err) => error.debugWarn(err));
}
});
vue.watch(nativeInputValue, () => {
setNativeInputValue();
});
vue.watch(() => props.nativeType, () => {
vue.nextTick(() => {
setNativeInputValue();
resizeTextarea();
});
});
vue.onMounted(() => {
if (!props.formatter && props.parser) {
error.debugWarn("Input", "If you set the parser, you also need to set the formatter.");
}
setNativeInputValue();
vue.nextTick(resizeTextarea);
});
const handleMouseLeave = (e) => {
hovering.value = false;
emit("mouseleave", e);
};
const handleMouseEnter = (e) => {
hovering.value = true;
emit("mouseenter", e);
};
const handleKeydown = (e) => {
emit("keydown", e);
};
return {
namespace,
isComposing,
input,
inputId,
textarea,
attrs,
containerAttrs,
inputSize,
validateState,
textareaStyle,
countStyle,
resizeTextarea,
inputDisabled,
inputFill,
showClear,
showPwdVisible,
isWordLimitVisible,
textLength,
hovering,
inputExceed,
passwordVisible,
inputOrTextarea,
wrapperRef,
handleInput,
handleChange,
handleFocus,
handleBlur,
handleCompositionStart,
handleCompositionUpdate,
handleCompositionEnd,
handlePasswordVisible,
clear,
select,
focus,
blur,
isFocused,
getSuffixVisible,
getPwdVisible,
handleMouseLeave,
handleMouseEnter,
handleKeydown
};
}
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_system_close = vue.resolveComponent("system-close");
const _component_hl_icon = vue.resolveComponent("hl-icon");
const _component_system_hidden = vue.resolveComponent("system-hidden");
const _component_system_show = vue.resolveComponent("system-show");
return vue.openBlock(), vue.createElementBlock("div", vue.mergeProps(_ctx.containerAttrs, {
class: [
_ctx.namespace,
_ctx.inputSize ? _ctx.inputSize : "",
`as-${_ctx.nativeType}`,
_ctx.type ? _ctx.type : "",
_ctx.nativeType === "hidden" ? "display-none" : "",
{
"is-disabled": _ctx.inputDisabled,
"is-exceed": _ctx.inputExceed,
"is-focus": _ctx.isFocused,
"has-password-visible": _ctx.getPwdVisible(),
"has-suffix": _ctx.getSuffixVisible(),
"round": _ctx.round,
"fill": _ctx.inputFill,
"block": _ctx.block,
"thin": _ctx.thin
},
_ctx.$attrs.class
],
style: _ctx.$attrs.style,
role: _ctx.containerRole,
onMouseenter: _ctx.handleMouseEnter,
onMouseleave: _ctx.handleMouseLeave
}), [
_ctx.nativeType !== "textarea" ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
ref: "wrapperRef",
class: "input-wrapper"
}, [
vue.renderSlot(_ctx.$slots, "tags"),
_ctx.nativeType !== "textarea" ? (vue.openBlock(), vue.createElementBlock("input", vue.mergeProps({
key: 0,
id: _ctx.inputId,
ref: "input"
}, _ctx.attrs, {
minlength: _ctx.minlength,
maxlength: _ctx.maxlength,
type: _ctx.showPassword ? _ctx.passwordVisible ? "text" : "password" : _ctx.nativeType,
disabled: _ctx.inputDisabled,
readonly: _ctx.readonly,
autocomplete: _ctx.autocomplete,
tabindex: _ctx.tabindex,
"aria-label": _ctx.label || _ctx.ariaLabel,
placeholder: _ctx.placeholder,
style: _ctx.inputStyle,
form: _ctx.form,
class: "input-inner",
autofocus: _ctx.autofocus,
onCompositionstart: _ctx.handleCompositionStart,
onCompositionupdate: _ctx.handleCompositionUpdate,
onCompositionend: _ctx.handleCompositionEnd,
onInput: _ctx.handleInput,
onFocus: _ctx.handleFocus,
onBlur: _ctx.handleBlur,
onChange: _ctx.handleChange,
onKeydown: _ctx.handleKeydown
}), null, 16, ["id", "minlength", "maxlength", "type", "disabled", "readonly", "autocomplete", "tabindex", "aria-label", "placeholder", "form", "autofocus", "onCompositionstart", "onCompositionupdate", "onCompositionend", "onInput", "onFocus", "onBlur", "onChange", "onKeydown"])) : vue.createCommentVNode("v-if", true),
_ctx.$slots.prefix ? (vue.openBlock(), vue.createElementBlock("span", {
key: 1,
class: "input-affixe prefix"
}, [
vue.renderSlot(_ctx.$slots, "prefix")
])) : vue.createCommentVNode("v-if", true),
_ctx.getSuffixVisible() ? (vue.openBlock(), vue.createElementBlock("span", {
key: 2,
class: "input-affixe suffix"
}, [
!_ctx.showClear ? vue.renderSlot(_ctx.$slots, "suffix", { key: 0 }) : vue.createCommentVNode("v-if", true),
_ctx.showClear ? (vue.openBlock(), vue.createBlock(_component_hl_icon, {
key: 1,
class: "input-close",
onMousedown: vue.withModifiers(() => {
}, ["prevent"]),
onClick: _ctx.clear
}, {
default: vue.withCtx(() => [
vue.createVNode(_component_system_close)
]),
_: 1
}, 8, ["onMousedown", "onClick"])) : vue.createCommentVNode("v-if", true)
])) : vue.createCommentVNode("v-if", true),
_ctx.getPwdVisible() ? (vue.openBlock(), vue.createElementBlock("span", {
key: 3,
class: "input-affixe password-visible"
}, [
_ctx.showPwdVisible ? (vue.openBlock(), vue.createBlock(_component_hl_icon, {
key: 0,
onClick: _ctx.handlePasswordVisible
}, {
default: vue.withCtx(() => [
_ctx.passwordVisible ? (vue.openBlock(), vue.createBlock(_component_system_hidden, { key: 0 })) : vue.createCommentVNode("v-if", true),
!_ctx.passwordVisible ? (vue.openBlock(), vue.createBlock(_component_system_show, { key: 1 })) : vue.createCommentVNode("v-if", true)
]),
_: 1
}, 8, ["onClick"])) : vue.createCommentVNode("v-if", true)
])) : vue.createCommentVNode("v-if", true),
_ctx.isWordLimitVisible ? (vue.openBlock(), vue.createElementBlock("span", {
key: 4,
style: vue.normalizeStyle(_ctx.countStyle),
class: "input-count"
}, vue.toDisplayString(_ctx.textLength) + " / " + vue.toDisplayString(_ctx.maxlength), 5)) : vue.createCommentVNode("v-if", true)
], 512)) : (vue.openBlock(), vue.createElementBlock("textarea", vue.mergeProps({
key: 1,
id: _ctx.inputId,
ref: "textarea",
class: [`input-inner`, _ctx.type, _ctx.isFocused ? "is-focus" : ""]
}, _ctx.attrs, {
minlength: _ctx.minlength,
maxlength: _ctx.maxlength,
tabindex: _ctx.tabindex,
disabled: _ctx.inputDisabled,
readonly: _ctx.readonly,
autocomplete: _ctx.autocomplete,
style: _ctx.textareaStyle,
"aria-label": _ctx.label || _ctx.ariaLabel,
placeholder: _ctx.placeholder,
form: _ctx.form,
rows: _ctx.rows,
autofocus: _ctx.autofocus,
onCompositionstart: _ctx.handleCompositionStart,
onCompositionupdate: _ctx.handleCompositionUpdate,
onCompositionend: _ctx.handleCompositionEnd,
onInput: _ctx.handleInput,
onFocus: _ctx.handleFocus,
onBlur: _ctx.handleBlur,
onChange: _ctx.handleChange,
onKeydown: _ctx.handleKeydown
}), "\n ", 16, ["id", "minlength", "maxlength", "tabindex", "disabled", "readonly", "autocomplete", "aria-label", "placeholder", "form", "rows", "autofocus", "onCompositionstart", "onCompositionupdate", "onCompositionend", "onInput", "onFocus", "onBlur", "onChange", "onKeydown"])),
_ctx.isWordLimitVisible && _ctx.nativeType === "textarea" ? (vue.openBlock(), vue.createElementBlock("span", {
key: 2,
style: vue.normalizeStyle(_ctx.countStyle),
class: "input-count"
}, vue.toDisplayString(_ctx.textLength) + " / " + vue.toDisplayString(_ctx.maxlength), 5)) : vue.createCommentVNode("v-if", true)
], 16, ["role", "onMouseenter", "onMouseleave"]);
}
var Input = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render]]);
exports["default"] = Input;
//# sourceMappingURL=input2.js.map