song-ui-u
Version:
vue3 + js的PC前端组件库
464 lines (449 loc) • 16.9 kB
JavaScript
import { mergeModels, shallowRef, useSlots, useModel, computed, ref, watch, openBlock, createElementBlock, normalizeStyle, normalizeClass, createCommentVNode, createElementVNode, renderSlot, toDisplayString, createBlock, withCtx, resolveDynamicComponent, Fragment } from 'vue';
import { useNamespace } from '../../../hook/use-namespace/index.mjs';
import { useStyle } from '../../../hook/use-style/index.mjs';
import { useEvent } from '../../../hook/use-event/index.mjs';
import { useExpose } from '../../../hook/use-expose/index.mjs';
import '../../../hook/use-zindex/index.mjs';
import '../../button/index.mjs';
import '../../buttonGroup/index.mjs';
import { XIcon } from '../../icon/index.mjs';
import '../index.mjs';
import '../../textarea/index.mjs';
import '../../row/index.mjs';
import '../../col/index.mjs';
import '../../container/index.mjs';
import '../../checkbox/index.mjs';
import '../../switch/index.mjs';
import '../../form/index.mjs';
import '../../message/index.mjs';
import '../../mask/src/mask.mjs';
import '../../modal/index.mjs';
import '../../messageBox/index.mjs';
import '../../drawer/index.mjs';
import '../../badge/index.mjs';
import '../../space/index.mjs';
import '../../image/index.mjs';
import '../../radio/index.mjs';
import '../../divider/index.mjs';
import '../../chat/index.mjs';
import '../../progress/index.mjs';
import '../../upload/index.mjs';
import '../../vTree/index.mjs';
import '../../table/index.mjs';
import '../../tabs/index.mjs';
import '../../menu/index.mjs';
import '../../steps/index.mjs';
import '../../header/index.mjs';
import '../../breadcrumble/index.mjs';
import '../../datePicker/index.mjs';
import '../../tooltip/index.mjs';
import '../../popover/index.mjs';
import '../../timePicker/index.mjs';
import '../../select/index.mjs';
import '../../collapse/index.mjs';
import '../../card/index.mjs';
import '../../timeline/index.mjs';
import '../../tag/index.mjs';
import '../../result/index.mjs';
import '../../sender/index.mjs';
import { Eye, EyeOff, XCircleFill } from 'song-ui-pro-icon';
import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.mjs';
import { useFormItem } from '../../form/src/composables/use-form-item.mjs';
// useFormItem
const __default__ = { name: "x-input" };
const _sfc_main = /*#__PURE__*/Object.assign(__default__, {
props: /*#__PURE__*/mergeModels({
type: {
type: String,
default: "text",
},
placeholder: {
type: String,
default: "请输入",
},
maxlength: {
type: String,
default: "",
},
size: {
type: String,
default: "",
},
width: {
type: String,
default: "",
},
disabled: Boolean, // 禁用
round: Boolean, // 圆角
showPassword: Boolean, // 密码
clearance: Boolean, // 清除
count: Boolean, // 统计
prefixIcon: {
type: [String, Object],
default: "",
},
suffixIcon: {
type: [String, Object],
default: "",
},
prepend: {
type: String,
default: "",
},
append: {
type: String,
default: "",
},
prefixIconfont: {
type: String,
default: "",
},
suffixIconfont: {
type: String,
default: "",
},
prefix: {
type: String,
default: "",
},
suffix: {
type: String,
default: "",
},
validateEvent: {
type: Boolean,
default: true,
},
}, {
"modelValue": {},
"modelModifiers": {},
}),
emits: /*#__PURE__*/mergeModels([
"input",
"clear",
"focus",
"blur",
"mouseenter",
"mouselevel",
"compositionstart",
"compositionupdate",
"compositionend",
"change",
"keydown",
"keyup",
], ["update:modelValue"]),
setup(__props, { expose: __expose, emit: __emit }) {
const { formContent, formItemContent } = useFormItem();
// input
const _ref = shallowRef(null);
const { focusExpose, blurExpose, selectExpose } = useExpose(_ref);
const ns = useNamespace("input");
const slots = useSlots();
// event
const {
isFocus,
isBlur,
isHover,
isComposition,
focusEvent,
blurEvent,
mouseenterEvent,
mouselevelEvent,
compositionStartEvent,
compositionUpdateEvent,
compositionEndEvent,
changeEvent,
keydownEvent,
keyupEvent,
} = useEvent({
// 失焦后
afterBlur() {
props.validateEvent && formItemContent?.validate("blur");
},
});
// style
const uStyle = useStyle();
// defineModel
let modelValue = useModel(__props, "modelValue");
// emits
const emit = __emit;
/** props */
const props = __props;
const styleWidth = computed(() => uStyle.width(props.width));
// ref
const passwordVisible = ref(false);
// passwordIcon
const passwordIcon = computed(() => {
return passwordVisible.value ? Eye : EyeOff;
});
// clearIcon
const showClear = computed(() => {
return (
props.clearance &&
modelValue.value &&
!props.disabled &&
props.type === "text"
);
});
// showLimit
const showLimit = computed(
() => props.count && !props.disabled && props.maxlength
);
// 文本长度
const valueLength = computed(() => modelValue.value.length);
const isColorError = computed(() => {
return props.maxlength && props.count && valueLength.value > props.maxlength;
});
// 是否有前置、后置内容
const isAside = computed(() => {
return isPrepend.value || isAppend.value;
});
// 前置内容
const isPrepend = computed(() => {
return slots.prepend || props.prepend;
});
// 后置内容
const isAppend = computed(() => {
return slots.append || props.append;
});
const isPrefix = computed(() => {
return props.prefixIcon || props.prefixIconfont || props.prefix;
});
const isSuffix = computed(() => {
return (
props.suffixIcon ||
props.suffixIconfont ||
props.suffix ||
props.showPassword ||
showClear.value ||
showLimit.value
);
});
const controlSize = computed(() => formContent?.size?.value || props?.size);
const handlerCompositionEnd = (e) => {
compositionEndEvent(e).then(() => {
handlerInput(e);
});
};
const handlerInput = (e) => {
const value = e.target.value;
modelValue.value = value;
// emit input
emit("input", value, e);
};
// 清除
const handlerClear = () => {
modelValue.value = "";
emit("input", "");
emit("clear");
focusExpose();
};
watch(
() => modelValue.value,
() => {
props.validateEvent && formItemContent?.validate("change");
}
);
__expose({
ref: _ref, // 输入框对象
focus: focusExpose,
blur: blurExpose,
select: selectExpose,
clear: handlerClear,
});
const __returned__ = { formContent, formItemContent, _ref, focusExpose, blurExpose, selectExpose, ns, slots, isFocus, isBlur, isHover, isComposition, focusEvent, blurEvent, mouseenterEvent, mouselevelEvent, compositionStartEvent, compositionUpdateEvent, compositionEndEvent, changeEvent, keydownEvent, keyupEvent, uStyle, get modelValue() { return modelValue }, set modelValue(v) { modelValue = v; }, emit, props, styleWidth, passwordVisible, passwordIcon, showClear, showLimit, valueLength, isColorError, isAside, isPrepend, isAppend, isPrefix, isSuffix, controlSize, handlerCompositionEnd, handlerInput, handlerClear, ref, computed, useSlots, shallowRef, watch, get useNamespace() { return useNamespace }, get useStyle() { return useStyle }, get useEvent() { return useEvent }, get useExpose() { return useExpose }, get XIcon() { return XIcon }, get useFormItem() { return useFormItem }, get XCircleFill() { return XCircleFill }, get Eye() { return Eye }, get EyeOff() { return EyeOff } };
Object.defineProperty(__returned__, '__isScriptSetup', { enumerable: false, value: true });
return __returned__
}
});
const _hoisted_1 = { key: 1 };
const _hoisted_2 = { key: 0 };
const _hoisted_3 = ["value", "type", "disabled", "placeholder", "maxlength"];
const _hoisted_4 = { key: 0 };
const _hoisted_5 = { key: 1 };
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return (openBlock(), createElementBlock("div", {
style: normalizeStyle([$setup.styleWidth]),
class: normalizeClass([
$setup.ns.b(),
$setup.ns.is('focus', $setup.isFocus),
$setup.ns.is('disabled', $props.disabled),
$setup.ns.m('size', $setup.controlSize),
$setup.ns.is('round', $props.round),
]),
onMouseenter: _cache[8] || (_cache[8] = (...args) => ($setup.mouseenterEvent && $setup.mouseenterEvent(...args))),
onMouseleave: _cache[9] || (_cache[9] = (...args) => ($setup.mouselevelEvent && $setup.mouselevelEvent(...args)))
}, [
createCommentVNode(" 前置 "),
($setup.isPrepend)
? (openBlock(), createElementBlock("div", {
key: 0,
class: normalizeClass([$setup.ns.e('aside-wrapper')])
}, [
createElementVNode("div", {
class: normalizeClass([
$setup.ns.e('prepend'),
($props.prepend || $props.append || $setup.isPrepend || $setup.isAppend) && $setup.ns.e('aside'),
])
}, [
(_ctx.$slots.prepend)
? renderSlot(_ctx.$slots, "prepend", { key: 0 })
: createCommentVNode("v-if", true),
($props.prepend)
? (openBlock(), createElementBlock("div", _hoisted_1, toDisplayString($props.prepend), 1 /* TEXT */))
: createCommentVNode("v-if", true)
], 2 /* CLASS */)
], 2 /* CLASS */))
: createCommentVNode("v-if", true),
createElementVNode("div", {
class: normalizeClass([
$setup.ns.e('wrapper'),
$setup.ns.is('aside-prepend', $setup.isPrepend),
$setup.ns.is('aside-append', $setup.isAppend),
])
}, [
createCommentVNode(" 前缀 "),
($setup.isPrefix)
? (openBlock(), createElementBlock("div", {
key: 0,
class: normalizeClass([$setup.ns.e('fix-wrapper')])
}, [
createElementVNode("div", {
class: normalizeClass([$setup.ns.e('fix'), $setup.ns.e('prefix')])
}, [
($props.prefix)
? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString($props.prefix), 1 /* TEXT */))
: createCommentVNode("v-if", true),
($props.prefixIcon)
? (openBlock(), createBlock($setup["XIcon"], { key: 1 }, {
default: withCtx(() => [
(openBlock(), createBlock(resolveDynamicComponent($props.prefixIcon)))
]),
_: 1 /* STABLE */
}))
: createCommentVNode("v-if", true),
($props.prefixIconfont)
? (openBlock(), createBlock($setup["XIcon"], { key: 2 }, {
default: withCtx(() => [
createElementVNode("i", {
class: normalizeClass(["iconfont", $props.prefixIconfont])
}, null, 2 /* CLASS */)
]),
_: 1 /* STABLE */
}))
: createCommentVNode("v-if", true)
], 2 /* CLASS */)
], 2 /* CLASS */))
: createCommentVNode("v-if", true),
createElementVNode("input", {
ref: "_ref",
onInput: $setup.handlerInput,
onFocus: _cache[0] || (_cache[0] = (...args) => ($setup.focusEvent && $setup.focusEvent(...args))),
onBlur: _cache[1] || (_cache[1] = (...args) => ($setup.blurEvent && $setup.blurEvent(...args))),
onCompositionstart: _cache[2] || (_cache[2] = (...args) => ($setup.compositionStartEvent && $setup.compositionStartEvent(...args))),
onCompositionupdate: _cache[3] || (_cache[3] = (...args) => ($setup.compositionUpdateEvent && $setup.compositionUpdateEvent(...args))),
onCompositionend: $setup.handlerCompositionEnd,
onChange: _cache[4] || (_cache[4] = (...args) => ($setup.changeEvent && $setup.changeEvent(...args))),
onKeydown: _cache[5] || (_cache[5] = (...args) => ($setup.keydownEvent && $setup.keydownEvent(...args))),
onKeyup: _cache[6] || (_cache[6] = (...args) => ($setup.keyupEvent && $setup.keyupEvent(...args))),
value: $setup.modelValue,
type: $props.showPassword ? ($setup.passwordVisible ? 'text' : 'password') : $props.type,
disabled: $props.disabled,
class: normalizeClass([$setup.ns.e('inner'), $setup.ns.is('color-danger', $setup.isColorError)]),
placeholder: $props.placeholder,
maxlength: $props.maxlength
}, null, 42 /* CLASS, PROPS, NEED_HYDRATION */, _hoisted_3),
createCommentVNode(" 后缀 "),
($setup.isSuffix)
? (openBlock(), createElementBlock("div", {
key: 1,
class: normalizeClass([$setup.ns.e('fix-wrapper')])
}, [
createElementVNode("div", {
class: normalizeClass([$setup.ns.e('fix'), $setup.ns.e('suffix')])
}, [
(!$props.showPassword || !$setup.showClear || !$setup.showLimit)
? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
($props.suffix)
? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString($props.suffix), 1 /* TEXT */))
: createCommentVNode("v-if", true),
($props.suffixIcon)
? (openBlock(), createBlock($setup["XIcon"], { key: 1 }, {
default: withCtx(() => [
(openBlock(), createBlock(resolveDynamicComponent($props.suffixIcon)))
]),
_: 1 /* STABLE */
}))
: createCommentVNode("v-if", true),
($props.suffixIconfont)
? (openBlock(), createBlock($setup["XIcon"], { key: 2 }, {
default: withCtx(() => [
createElementVNode("i", {
class: normalizeClass(["iconfont", $props.suffixIconfont])
}, null, 2 /* CLASS */)
]),
_: 1 /* STABLE */
}))
: createCommentVNode("v-if", true)
], 64 /* STABLE_FRAGMENT */))
: createCommentVNode("v-if", true),
($props.showPassword)
? (openBlock(), createBlock($setup["XIcon"], {
key: 1,
class: "pointer",
onClick: _cache[7] || (_cache[7] = $event => ($setup.passwordVisible = !$setup.passwordVisible))
}, {
default: withCtx(() => [
(openBlock(), createBlock(resolveDynamicComponent($setup.passwordIcon)))
]),
_: 1 /* STABLE */
}))
: createCommentVNode("v-if", true),
($setup.showClear)
? (openBlock(), createBlock($setup["XIcon"], {
key: 2,
class: "pointer",
onClick: $setup.handlerClear
}, {
default: withCtx(() => [
(openBlock(), createBlock(resolveDynamicComponent($setup.XCircleFill)))
]),
_: 1 /* STABLE */
}))
: createCommentVNode("v-if", true),
($setup.showLimit)
? (openBlock(), createElementBlock("div", {
key: 3,
class: normalizeClass([$setup.ns.e('count')])
}, toDisplayString($setup.valueLength) + " / " + toDisplayString($props.maxlength), 3 /* TEXT, CLASS */))
: createCommentVNode("v-if", true)
], 2 /* CLASS */)
], 2 /* CLASS */))
: createCommentVNode("v-if", true)
], 2 /* CLASS */),
createCommentVNode(" 后置 "),
($setup.isAppend)
? (openBlock(), createElementBlock("div", {
key: 1,
class: normalizeClass([$setup.ns.e('aside-wrapper')])
}, [
createElementVNode("div", {
class: normalizeClass([
$setup.ns.e('append'),
($props.prepend || $props.append || $setup.isPrepend || $setup.isAppend) && $setup.ns.e('aside'),
])
}, [
(_ctx.$slots.append)
? renderSlot(_ctx.$slots, "append", { key: 0 })
: createCommentVNode("v-if", true),
($props.append)
? (openBlock(), createElementBlock("div", _hoisted_5, toDisplayString($props.append), 1 /* TEXT */))
: createCommentVNode("v-if", true)
], 2 /* CLASS */)
], 2 /* CLASS */))
: createCommentVNode("v-if", true)
], 38 /* CLASS, STYLE, NEED_HYDRATION */))
}
var Input = /*#__PURE__*/_export_sfc(_sfc_main, [['render',_sfc_render],['__file',"E:\\code\\my-code\\song-ui-ultra\\packages\\components\\input\\src\\index.vue"]]);
export { Input as default };
//# sourceMappingURL=index.vue.mjs.map