@opensig/opendesign
Version:
<p align="center"><img src="../docs/public/opendesign-logo-light.png"/></p> <h1 align="center">opendesign</h1> <p align="center">一个 Vue 3 组件库</p> <p align="center"><b>皮肤可定制，使用 TypeScript</b></p>
231 lines (230 loc) • 9.08 kB
JavaScript
;
const vue = require("vue");
const types = require("./types.js");
const icons = require("../../_utils/icons.js");
const useInput = require("../../_headless/use-input.js");
const useInputPassword = require("../../_headless/use-input-password.js");
const index = require("../../locale/index.js");
const is = require("../../_utils/is.js");
const _hoisted_1 = ["for"];
const _hoisted_2 = ["date-value"];
const _hoisted_3 = ["id", "value", "type", "placeholder", "readonly", "disabled"];
const _hoisted_4 = {
key: 0,
class: "o_input-suffix-icon"
};
const _hoisted_5 = ["innerHTML"];
const _hoisted_6 = { key: 4 };
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
__name: "InInput",
props: types.inInputProps,
emits: ["update:modelValue", "change", "input", "focus", "blur", "clear", "pressEnter"],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const slots = vue.useSlots();
const emits = __emit;
const { t } = index.useI18n();
const { disabled, type, modelValue, inputOnOutlimit, maxLength, minLength } = vue.toRefs(props);
const {
displayValue,
clearValue: clear,
isValid,
inputValueLength,
isOutLengthLimit,
handleBlur,
handleInput,
handleFocus,
handlePressEnter,
handleClear,
inputEl
} = useInput.useInput({
emits,
maxLength,
minLength,
inputOnOutlimit,
modelValue,
defaultValue: props.defaultValue ?? "",
emitUpdate: (value) => {
emits("update:modelValue", value);
},
format: props.format,
validate: props.validate,
valueOnInvalidChange: props.valueOnInvalidChange,
calculateLength: props.getLength
});
const { showPassword, onEyeMouseDown, onEyeClick } = useInputPassword.useInputPassword({
type,
disabled,
showPasswordEvent: props.showPasswordEvent
});
const inputType = vue.ref(props.type);
const togglePassword = (visible) => {
if (is.isUndefined(visible)) {
if (inputType.value === "text") {
inputType.value = "password";
} else {
inputType.value = "text";
}
} else {
inputType.value = visible ? "text" : "password";
}
};
vue.watchEffect(() => {
togglePassword(showPassword.value);
});
const isClearable = vue.computed(() => props.clearable && !props.disabled && !props.readonly);
const focus = () => {
var _a;
(_a = inputEl.value) == null ? void 0 : _a.focus();
};
const blur = () => {
var _a;
(_a = inputEl.value) == null ? void 0 : _a.blur();
};
const autoWidth = vue.computed(() => props.autoWidth);
const mirrorValue = vue.computed(() => {
if (props.type === "password") {
return displayValue.value.replace(/./g, props.passwordPlaceholder);
}
return displayValue.value;
});
__expose({
inputEl,
focus,
blur,
clear,
togglePassword
});
return (_ctx, _cache) => {
var _a, _b, _c, _d;
return vue.openBlock(), vue.createElementBlock("label", {
class: vue.normalizeClass(["o_input", {
"o_input-clearable": isClearable.value && vue.unref(displayValue) !== "",
"o_input-disabled": props.disabled,
"o_input-readonly": props.readonly,
"o_input-password": props.type === "password",
"o_input-invalid": !vue.unref(isValid),
"o_input-auto-width": autoWidth.value
}]),
for: props.inputId
}, [
((_a = slots.prefix) == null ? void 0 : _a.call(slots)) ? (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 0,
class: "o_input-prefix",
onMousedown: _cache[0] || (_cache[0] = vue.withModifiers(() => {
}, ["prevent"]))
},
[
vue.renderSlot(_ctx.$slots, "prefix")
],
32
/* NEED_HYDRATION */
)) : vue.createCommentVNode("v-if", true),
vue.createElementVNode("div", {
class: vue.normalizeClass(["o_input-wrap", { "o_input-wrap-auto-width": autoWidth.value }]),
"date-value": mirrorValue.value
}, [
vue.createElementVNode("input", {
id: props.inputId,
ref_key: "inputEl",
ref: inputEl,
class: "o_input-input",
value: vue.unref(displayValue),
type: inputType.value,
placeholder: props.placeholder,
readonly: props.readonly,
disabled: props.disabled,
onFocus: _cache[1] || (_cache[1] = //@ts-ignore
(...args) => vue.unref(handleFocus) && vue.unref(handleFocus)(...args)),
onBlur: _cache[2] || (_cache[2] = //@ts-ignore
(...args) => vue.unref(handleBlur) && vue.unref(handleBlur)(...args)),
onInput: _cache[3] || (_cache[3] = //@ts-ignore
(...args) => vue.unref(handleInput) && vue.unref(handleInput)(...args)),
onKeydown: _cache[4] || (_cache[4] = //@ts-ignore
(...args) => vue.unref(handlePressEnter) && vue.unref(handlePressEnter)(...args))
}, null, 40, _hoisted_3)
], 10, _hoisted_2),
((_b = slots.suffix) == null ? void 0 : _b.call(slots)) || isClearable.value || props.type === "password" || props.maxLength ? (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 1,
class: "o_input-suffix",
onMousedown: _cache[10] || (_cache[10] = vue.withModifiers(() => {
}, ["prevent"]))
},
[
vue.createCommentVNode(" 自定义图标 "),
((_c = slots.suffix) == null ? void 0 : _c.call(slots)) ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4, [
vue.renderSlot(_ctx.$slots, "suffix")
])) : vue.createCommentVNode("v-if", true),
vue.createCommentVNode(" 清除图标 "),
isClearable.value ? (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 1,
class: "o_input-clear",
onClick: _cache[5] || (_cache[5] = //@ts-ignore
(...args) => vue.unref(handleClear) && vue.unref(handleClear)(...args)),
onMousedown: _cache[6] || (_cache[6] = vue.withModifiers(() => {
}, ["prevent"]))
},
[
vue.createVNode(vue.unref(icons.IconClose), { class: "o_input-clear-icon" })
],
32
/* NEED_HYDRATION */
)) : vue.createCommentVNode("v-if", true),
vue.createCommentVNode(" 密码图标 "),
props.type === "password" ? (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 2,
class: "o_input-eye",
onClick: _cache[7] || (_cache[7] = vue.withModifiers(
//@ts-ignore
(...args) => vue.unref(onEyeClick) && vue.unref(onEyeClick)(...args),
["prevent", "stop"]
)),
onMousedown: _cache[8] || (_cache[8] = vue.withModifiers(
//@ts-ignore
(...args) => vue.unref(onEyeMouseDown) && vue.unref(onEyeMouseDown)(...args),
["prevent", "stop"]
)),
onTouchstart: _cache[9] || (_cache[9] = vue.withModifiers(
//@ts-ignore
(...args) => vue.unref(onEyeMouseDown) && vue.unref(onEyeMouseDown)(...args),
["stop"]
))
},
[
vue.unref(showPassword) ? (vue.openBlock(), vue.createBlock(vue.unref(icons.IconEyeOn), {
key: 0,
class: "o_input-eye-icon"
})) : (vue.openBlock(), vue.createBlock(vue.unref(icons.IconEyeOff), {
key: 1,
class: "o_input-eye-icon"
}))
],
32
/* NEED_HYDRATION */
)) : vue.createCommentVNode("v-if", true),
vue.createCommentVNode(" 长度限制 "),
props.maxLength ? (vue.openBlock(), vue.createElementBlock("div", {
key: 3,
class: vue.normalizeClass(["o_input-limit", { "o_input-limit-error": vue.unref(isOutLengthLimit) }]),
innerHTML: vue.unref(t)("input.limit", vue.unref(inputValueLength), props.maxLength)
}, null, 10, _hoisted_5)) : vue.createCommentVNode("v-if", true),
((_d = slots.extra) == null ? void 0 : _d.call(slots)) ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_6, [
vue.renderSlot(_ctx.$slots, "extra")
])) : vue.createCommentVNode("v-if", true)
],
32
/* NEED_HYDRATION */
)) : vue.createCommentVNode("v-if", true)
], 10, _hoisted_1);
};
}
});
module.exports = _sfc_main;