song-ui-u
Version:
vue3 + js的PC前端组件库
466 lines (450 loc) • 17.4 kB
JavaScript
;
var vue = require('vue');
var index$3 = require('../../../hook/use-namespace/index.cjs');
var index$2 = require('../../../hook/use-style/index.cjs');
var index = require('../../../hook/use-event/index.cjs');
var index$1 = require('../../../hook/use-expose/index.cjs');
require('../../../hook/use-zindex/index.cjs');
require('../../button/index.cjs');
require('../../buttonGroup/index.cjs');
var index$4 = require('../../icon/index.cjs');
require('../index.cjs');
require('../../textarea/index.cjs');
require('../../row/index.cjs');
require('../../col/index.cjs');
require('../../container/index.cjs');
require('../../checkbox/index.cjs');
require('../../switch/index.cjs');
require('../../form/index.cjs');
require('../../message/index.cjs');
require('../../mask/src/mask.cjs');
require('../../modal/index.cjs');
require('../../messageBox/index.cjs');
require('../../drawer/index.cjs');
require('../../badge/index.cjs');
require('../../space/index.cjs');
require('../../image/index.cjs');
require('../../radio/index.cjs');
require('../../divider/index.cjs');
require('../../chat/index.cjs');
require('../../progress/index.cjs');
require('../../upload/index.cjs');
require('../../vTree/index.cjs');
require('../../table/index.cjs');
require('../../tabs/index.cjs');
require('../../menu/index.cjs');
require('../../steps/index.cjs');
require('../../header/index.cjs');
require('../../breadcrumble/index.cjs');
require('../../datePicker/index.cjs');
require('../../tooltip/index.cjs');
require('../../popover/index.cjs');
require('../../timePicker/index.cjs');
require('../../select/index.cjs');
require('../../collapse/index.cjs');
require('../../card/index.cjs');
require('../../timeline/index.cjs');
require('../../tag/index.cjs');
require('../../result/index.cjs');
require('../../sender/index.cjs');
var icons = require('song-ui-pro-icon');
var _pluginVue_exportHelper = require('../../../_virtual/_plugin-vue_export-helper.cjs');
var useFormItem = require('../../form/src/composables/use-form-item.cjs');
// useFormItem
const __default__ = { name: "x-input" };
const _sfc_main = /*#__PURE__*/Object.assign(__default__, {
props: /*#__PURE__*/vue.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__*/vue.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.useFormItem();
// input
const _ref = vue.shallowRef(null);
const { focusExpose, blurExpose, selectExpose } = index$1.useExpose(_ref);
const ns = index$3.useNamespace("input");
const slots = vue.useSlots();
// event
const {
isFocus,
isBlur,
isHover,
isComposition,
focusEvent,
blurEvent,
mouseenterEvent,
mouselevelEvent,
compositionStartEvent,
compositionUpdateEvent,
compositionEndEvent,
changeEvent,
keydownEvent,
keyupEvent,
} = index.useEvent({
// 失焦后
afterBlur() {
props.validateEvent && formItemContent?.validate("blur");
},
});
// style
const uStyle = index$2.useStyle();
// defineModel
let modelValue = vue.useModel(__props, "modelValue");
// emits
const emit = __emit;
/** props */
const props = __props;
const styleWidth = vue.computed(() => uStyle.width(props.width));
// ref
const passwordVisible = vue.ref(false);
// passwordIcon
const passwordIcon = vue.computed(() => {
return passwordVisible.value ? icons.Eye : icons.EyeOff;
});
// clearIcon
const showClear = vue.computed(() => {
return (
props.clearance &&
modelValue.value &&
!props.disabled &&
props.type === "text"
);
});
// showLimit
const showLimit = vue.computed(
() => props.count && !props.disabled && props.maxlength
);
// 文本长度
const valueLength = vue.computed(() => modelValue.value.length);
const isColorError = vue.computed(() => {
return props.maxlength && props.count && valueLength.value > props.maxlength;
});
// 是否有前置、后置内容
const isAside = vue.computed(() => {
return isPrepend.value || isAppend.value;
});
// 前置内容
const isPrepend = vue.computed(() => {
return slots.prepend || props.prepend;
});
// 后置内容
const isAppend = vue.computed(() => {
return slots.append || props.append;
});
const isPrefix = vue.computed(() => {
return props.prefixIcon || props.prefixIconfont || props.prefix;
});
const isSuffix = vue.computed(() => {
return (
props.suffixIcon ||
props.suffixIconfont ||
props.suffix ||
props.showPassword ||
showClear.value ||
showLimit.value
);
});
const controlSize = vue.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();
};
vue.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: vue.ref, computed: vue.computed, useSlots: vue.useSlots, shallowRef: vue.shallowRef, watch: vue.watch, get useNamespace() { return index$3.useNamespace }, get useStyle() { return index$2.useStyle }, get useEvent() { return index.useEvent }, get useExpose() { return index$1.useExpose }, get XIcon() { return index$4.XIcon }, get useFormItem() { return useFormItem.useFormItem }, get XCircleFill() { return icons.XCircleFill }, get Eye() { return icons.Eye }, get EyeOff() { return icons.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 (vue.openBlock(), vue.createElementBlock("div", {
style: vue.normalizeStyle([$setup.styleWidth]),
class: vue.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)))
}, [
vue.createCommentVNode(" 前置 "),
($setup.isPrepend)
? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: vue.normalizeClass([$setup.ns.e('aside-wrapper')])
}, [
vue.createElementVNode("div", {
class: vue.normalizeClass([
$setup.ns.e('prepend'),
($props.prepend || $props.append || $setup.isPrepend || $setup.isAppend) && $setup.ns.e('aside'),
])
}, [
(_ctx.$slots.prepend)
? vue.renderSlot(_ctx.$slots, "prepend", { key: 0 })
: vue.createCommentVNode("v-if", true),
($props.prepend)
? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, vue.toDisplayString($props.prepend), 1 /* TEXT */))
: vue.createCommentVNode("v-if", true)
], 2 /* CLASS */)
], 2 /* CLASS */))
: vue.createCommentVNode("v-if", true),
vue.createElementVNode("div", {
class: vue.normalizeClass([
$setup.ns.e('wrapper'),
$setup.ns.is('aside-prepend', $setup.isPrepend),
$setup.ns.is('aside-append', $setup.isAppend),
])
}, [
vue.createCommentVNode(" 前缀 "),
($setup.isPrefix)
? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: vue.normalizeClass([$setup.ns.e('fix-wrapper')])
}, [
vue.createElementVNode("div", {
class: vue.normalizeClass([$setup.ns.e('fix'), $setup.ns.e('prefix')])
}, [
($props.prefix)
? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2, vue.toDisplayString($props.prefix), 1 /* TEXT */))
: vue.createCommentVNode("v-if", true),
($props.prefixIcon)
? (vue.openBlock(), vue.createBlock($setup["XIcon"], { key: 1 }, {
default: vue.withCtx(() => [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.prefixIcon)))
]),
_: 1 /* STABLE */
}))
: vue.createCommentVNode("v-if", true),
($props.prefixIconfont)
? (vue.openBlock(), vue.createBlock($setup["XIcon"], { key: 2 }, {
default: vue.withCtx(() => [
vue.createElementVNode("i", {
class: vue.normalizeClass(["iconfont", $props.prefixIconfont])
}, null, 2 /* CLASS */)
]),
_: 1 /* STABLE */
}))
: vue.createCommentVNode("v-if", true)
], 2 /* CLASS */)
], 2 /* CLASS */))
: vue.createCommentVNode("v-if", true),
vue.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: vue.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),
vue.createCommentVNode(" 后缀 "),
($setup.isSuffix)
? (vue.openBlock(), vue.createElementBlock("div", {
key: 1,
class: vue.normalizeClass([$setup.ns.e('fix-wrapper')])
}, [
vue.createElementVNode("div", {
class: vue.normalizeClass([$setup.ns.e('fix'), $setup.ns.e('suffix')])
}, [
(!$props.showPassword || !$setup.showClear || !$setup.showLimit)
? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
($props.suffix)
? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4, vue.toDisplayString($props.suffix), 1 /* TEXT */))
: vue.createCommentVNode("v-if", true),
($props.suffixIcon)
? (vue.openBlock(), vue.createBlock($setup["XIcon"], { key: 1 }, {
default: vue.withCtx(() => [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.suffixIcon)))
]),
_: 1 /* STABLE */
}))
: vue.createCommentVNode("v-if", true),
($props.suffixIconfont)
? (vue.openBlock(), vue.createBlock($setup["XIcon"], { key: 2 }, {
default: vue.withCtx(() => [
vue.createElementVNode("i", {
class: vue.normalizeClass(["iconfont", $props.suffixIconfont])
}, null, 2 /* CLASS */)
]),
_: 1 /* STABLE */
}))
: vue.createCommentVNode("v-if", true)
], 64 /* STABLE_FRAGMENT */))
: vue.createCommentVNode("v-if", true),
($props.showPassword)
? (vue.openBlock(), vue.createBlock($setup["XIcon"], {
key: 1,
class: "pointer",
onClick: _cache[7] || (_cache[7] = $event => ($setup.passwordVisible = !$setup.passwordVisible))
}, {
default: vue.withCtx(() => [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($setup.passwordIcon)))
]),
_: 1 /* STABLE */
}))
: vue.createCommentVNode("v-if", true),
($setup.showClear)
? (vue.openBlock(), vue.createBlock($setup["XIcon"], {
key: 2,
class: "pointer",
onClick: $setup.handlerClear
}, {
default: vue.withCtx(() => [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($setup.XCircleFill)))
]),
_: 1 /* STABLE */
}))
: vue.createCommentVNode("v-if", true),
($setup.showLimit)
? (vue.openBlock(), vue.createElementBlock("div", {
key: 3,
class: vue.normalizeClass([$setup.ns.e('count')])
}, vue.toDisplayString($setup.valueLength) + " / " + vue.toDisplayString($props.maxlength), 3 /* TEXT, CLASS */))
: vue.createCommentVNode("v-if", true)
], 2 /* CLASS */)
], 2 /* CLASS */))
: vue.createCommentVNode("v-if", true)
], 2 /* CLASS */),
vue.createCommentVNode(" 后置 "),
($setup.isAppend)
? (vue.openBlock(), vue.createElementBlock("div", {
key: 1,
class: vue.normalizeClass([$setup.ns.e('aside-wrapper')])
}, [
vue.createElementVNode("div", {
class: vue.normalizeClass([
$setup.ns.e('append'),
($props.prepend || $props.append || $setup.isPrepend || $setup.isAppend) && $setup.ns.e('aside'),
])
}, [
(_ctx.$slots.append)
? vue.renderSlot(_ctx.$slots, "append", { key: 0 })
: vue.createCommentVNode("v-if", true),
($props.append)
? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, vue.toDisplayString($props.append), 1 /* TEXT */))
: vue.createCommentVNode("v-if", true)
], 2 /* CLASS */)
], 2 /* CLASS */))
: vue.createCommentVNode("v-if", true)
], 38 /* CLASS, STYLE, NEED_HYDRATION */))
}
var Input = /*#__PURE__*/_pluginVue_exportHelper(_sfc_main, [['render',_sfc_render],['__file',"E:\\code\\my-code\\song-ui-ultra\\packages\\components\\input\\src\\index.vue"]]);
module.exports = Input;
//# sourceMappingURL=index.vue.cjs.map