321 lines
22 KiB
Plaintext
321 lines
22 KiB
Plaintext
import { w as withInstall } from "../badge/index2.js";
|
|
import { defineComponent, shallowRef, ref, reactive, computed, watch, nextTick, onMounted, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, toDisplayString, renderSlot, createCommentVNode, Fragment, renderList, createBlock, mergeProps, withCtx, createTextVNode, createVNode, normalizeStyle, withKeys, withModifiers } from "vue";
|
|
import { _ as _sfc_main$1 } from "../tag/index2.js";
|
|
import { _ as _sfc_main$2 } from "../tooltip/index2.js";
|
|
import { r as reactiveOmit, i as isObject, a as useResizeObserver } from "../_chunks/@vueuse/index.js";
|
|
import { _ as _sfc_main$2E } from "../checkbox/index2.js";
|
|
var index = /* @__PURE__ */ (() => '.layui-tag{--layui-tag-bg-color: #fafafa;--layui-tag-border-color: #f0f0f0;--layui-tag-hover-color: #FFF;--layui-tag-text-color: currentColor;display:inline-flex;align-items:baseline;vertical-align:middle;box-sizing:border-box;height:26px;line-height:26px;padding:0 8px;font-size:14px;font-weight:500;color:var(--layui-tag-text-color);background-color:var(--layui-tag-bg-color);border-width:1px;border-style:solid;border-color:transparent;border-radius:var(--global-border-radius)}.layui-tag-icon{margin-right:4px}.layui-tag-bordered{border-color:var(--layui-tag-border-color)}.layui-tag-disabled{opacity:.4;cursor:not-allowed}.layui-tag-disabled .layui-tag-close-icon .layui-icon:hover{cursor:not-allowed!important;opacity:1}.layui-tag-shap-square{border-radius:var(--global-border-radius)}.layui-tag-shap-round{border-radius:12px}.layui-tag-ellipsis .layui-tag-text{display:inline-block;white-space:nowrap;word-wrap:normal;overflow:hidden;text-overflow:ellipsis}.layui-tag .layui-tag-close-icon{margin-left:4px;font-size:14px}.layui-tag .layui-tag-close-icon .layui-icon:hover{cursor:pointer;opacity:.5}.layui-tag-size-lg{height:30px;font-size:14px;line-height:30px}.layui-tag-size-md{height:26px;font-size:14px;line-height:26px}.layui-tag .layui-icon{font-size:14px}.layui-tag-size-sm{height:22px;font-size:12px;line-height:22px}.layui-tag-size-xs{height:18px;font-size:12px;line-height:18px}.layui-tag .layui-icon{font-size:12px}.layui-tag-primary{--layui-tag-bg-color: #009688;--layui-tag-border-color: transparent;--layui-tag-hover-color: #009688;--layui-tag-text-color: #FFF}.layui-tag-primary-bordered{--layui-tag-border-color: #009688}.layui-tag-primary.layui-tag-variant-light{--layui-tag-bg-color: #e6f5f3;--layui-tag-border-color: transparent;--layui-tag-hover-color: #e6f5f3;--layui-tag-text-color: #009688}.layui-tag-primary.layui-tag-variant-light-bordered{--layui-tag-border-color: #80cbc4}.layui-tag-primary.layui-tag-variant-plain{--layui-tag-bg-color: transparent;--layui-tag-hover-color: transparent;--layui-tag-text-color: #009688;--layui-tag-border-color: transparent}.layui-tag-primary.layui-tag-variant-plain-bordered{--layui-tag-border-color: #009688}.layui-tag-normal{--layui-tag-bg-color: #1e9fff;--layui-tag-border-color: transparent;--layui-tag-hover-color: #1e9fff;--layui-tag-text-color: #FFF}.layui-tag-normal-bordered{--layui-tag-border-color: #1e9fff}.layui-tag-normal.layui-tag-variant-light{--layui-tag-bg-color: #e9f5ff;--layui-tag-border-color: transparent;--layui-tag-hover-color: #e9f5ff;--layui-tag-text-color: #1e9fff}.layui-tag-normal.layui-tag-variant-light-bordered{--layui-tag-border-color: #8fcfff}.layui-tag-normal.layui-tag-variant-plain{--layui-tag-bg-color: transparent;--layui-tag-hover-color: transparent;--layui-tag-text-color: #1e9fff;--layui-tag-border-color: transparent}.layui-tag-normal.layui-tag-variant-plain-bordered{--layui-tag-border-color: #1e9fff}.layui-tag-warm{--layui-tag-bg-color: #ffb800;--layui-tag-border-color: transparent;--layui-tag-hover-color: #ffb800;--layui-tag-text-color: #FFF}.layui-tag-warm-bordered{--layui-tag-border-color: #ffb800}.layui-tag-warm.layui-tag-variant-light{--layui-tag-bg-color: #fff8e6;--layui-tag-border-color: transparent;--layui-tag-hover-color: #fff8e6;--layui-tag-text-color: #ffb800}.layui-tag-warm.layui-tag-variant-light-bordered{--layui-tag-border-color: #ffdc80}.layui-tag-warm.layui-tag-variant-plain{--layui-tag-bg-color: transparent;--layui-tag-hover-color: transparent;--layui-tag-text-color: #ffb800;--layui-tag-border-color: transparent}.layui-tag-warm.layui-tag-variant-plain-bordered{--layui-tag-border-color: #ffb800}.layui-tag-danger{--layui-tag-bg-color: #ff5722;--layui-tag-border-color: transparent;--layui-tag-hover-color: #ff5722;--layui-tag-text-color: #FFF}.layui-tag-danger-bordered{--layui-tag-border-color: #ff5722}.layui-tag-danger.layui-tag-variant-light{--layui-tag-bg-color: #ffeee9;--layui-tag-border-color: transparent;--layui-tag-hover-color: #ffeee9;--layui-tag-text-color: #ff5722}.layui-tag-danger.layui-tag-variant-light-bordered{--layui-tag-border-color: #ffab91}.layui-tag-danger.layui-tag-variant-plain{--layui-tag-bg-color: transparent;--layui-tag-hover-color: transparent;--layui-tag-text-color: #ff5722;--layui-tag-border-color: transparent}.layui-tag-danger.layui-tag-variant-plain-bordered{--layui-tag-border-color: #ff5722}.layui-popper{position:fixed;padding:10px;border-radius:3px;word-wrap:break-word;min-width:12px;min-height:12px;font-size:14px;box-sizing:border-box;box-shadow:0 2px 12px #00000026;background-color:#fff;color:#3a3a3a;border:1px solid #cecece;max-width:300px;z-index:99999}.layui-popper[position=top]{margin-bottom:6px}.layui-popper[position=top] .layui-popper-arrow{bottom:-6px;border-bottom-width:0;border-top-color:#cecece}.layui-popper[position=top] .layui-popper-arrow:after{bottom:1px;border-bottom-width:0;margin-left:-6px;border-top-color:#fff}.layui-popper[position=bottom]{margin-top:6px}.layui-popper[position=bottom] .layui-popper-arrow{top:-6px;border-top-width:0;border-bottom-color:#cecece}.layui-popper[position=bottom] .layui-popper-arrow:after{top:1px;border-top-width:0;margin-left:-6px;border-bottom-color:#fff}.layui-popper[position=right]{margin-left:6px}.layui-popper[position=right] .layui-popper-arrow{left:-6px;border-left-width:0;border-right-color:#cecece}.layui-popper[position=right] .layui-popper-arrow:after{left:1px;border-left-width:0;margin-top:-6px;border-right-color:#fff}.layui-popper[position=left]{margin-right:6px}.layui-popper[position=left] .layui-popper-arrow{right:-6px;border-right-width:0;border-left-color:#cecece}.layui-popper[position=left] .layui-popper-arrow:after{right:1px;border-right-width:0;margin-top:-6px;border-left-color:#fff}.layui-popper[position=top] .layui-popper-arrow,.layui-popper[position=bottom] .layui-popper-arrow{left:-moz-calc(44%);left:-webkit-calc(44%);left:calc(50% - 6px)}.layui-popper[position=left] .layui-popper-arrow,.layui-popper[position=right] .layui-popper-arrow{top:-moz-calc(44%);top:-webkit-calc(44%);top:calc(50% - 6px)}.layui-popper:after{content:" ";position:absolute;display:block}.layui-popper[position=top]:after{bottom:-7px;left:0;width:100%;height:7px}.layui-popper[position=bottom]:after{top:-7px;left:0;width:100%;height:7px}.layui-popper[position=left]:after{right:-7px;bottom:0;height:100%;width:7px}.layui-popper[position=right]:after{left:-7px;bottom:0;height:100%;width:7px}.layui-popper .layui-popper-arrow,.layui-popper .layui-popper-arrow:after{position:absolute;display:block;width:0;height:0;border-width:6px;border-style:solid;border-color:transparent}.layui-popper .layui-popper-arrow:after{content:" "}.layui-popper.layui-dark{background-color:#353535;color:#fff;border:1px solid #353535}.layui-popper.layui-dark[position=top]{margin-bottom:6px}.layui-popper.layui-dark[position=top] .layui-popper-arrow{bottom:-6px;border-bottom-width:0;border-top-color:#353535}.layui-popper.layui-dark[position=top] .layui-popper-arrow:after{bottom:1px;border-bottom-width:0;margin-left:-6px;border-top-color:#353535}.layui-popper.layui-dark[position=bottom]{margin-top:6px}.layui-popper.layui-dark[position=bottom] .layui-popper-arrow{top:-6px;border-top-width:0;border-bottom-color:#353535}.layui-popper.layui-dark[position=bottom] .layui-popper-arrow:after{top:1px;border-top-width:0;margin-left:-6px;border-bottom-color:#353535}.layui-popper.layui-dark[position=right]{margin-left:6px}.layui-popper.layui-dark[position=right] .layui-popper-arrow{left:-6px;border-left-width:0;border-right-color:#353535}.layui-popper.layui-dark[position=right] .layui-popper-arrow:after{left:1px;border-left-width:0;margin-top:-6px;border-right-color:#353535}.layui-popper.layui-dark[position=left]{margin-right:6px}.layui-popper.layui-dark[position=left] .layui-popper-arrow{right:-6px;border-right-width:0;border-left-color:#353535}.layui-popper.layui-dark[position=left] .layui-popper-arrow:after{right:1px;border-right-width:0;margin-top:-6px;border-left-color:#353535}.lay-tooltip-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}.layui-tag-input{display:inline-flex;box-sizing:border-box;width:100%;border-width:1px;border-style:solid;border-color:var(--input-border-color);border-radius:var(--input-border-radius);cursor:text}.layui-tag-input-inner{flex:1;overflow:hidden;line-height:0;padding:2px 0}.layui-tag-input-mirror{position:absolute;top:0;left:0;white-space:pre;visibility:hidden;pointer-events:none}.layui-tag-input-clear{flex:none;display:flex;align-items:center;padding:0 10px;color:#00000073;cursor:pointer;visibility:hidden}.layui-tag-input-clear:hover{opacity:.8}.layui-tag-input .layui-tag-input-inner-input{box-sizing:border-box;border:none}.layui-tag-input-disabled{cursor:not-allowed;opacity:.6}.layui-tag-input-disabled *{cursor:not-allowed}.layui-tag-input .layui-tag{margin-right:5px;margin-top:2px;margin-bottom:2px;white-space:pre-wrap}.layui-tag-input-collapsed-panel{white-space:normal;display:flex;align-items:center;flex-wrap:wrap;width:fit-content;height:auto;overflow:hidden}.layui-tag-input-collapsed-panel .layui-tag{margin-right:5px;margin-bottom:4px}.layui-tag-input.layui-tag-input-lg{min-height:44px}.layui-tag-input.layui-tag-input-lg .layui-tag-input-inner-input{height:38px;vertical-align:middle}.layui-tag-input.layui-tag-input-lg .layui-tag-input-inner{padding:2px 5px}.layui-tag-input.layui-tag-input-lg .layui-tag{margin-top:2px;margin-bottom:2px}.layui-tag-input.layui-tag-input-md{min-height:38px}.layui-tag-input.layui-tag-input-md .layui-tag-input-inner-input{height:32px;vertical-align:middle}.layui-tag-input.layui-tag-input-md .layui-tag-input-inner{padding:2px 5px}.layui-tag-input.layui-tag-input-md .layui-tag{margin-top:2px;margin-bottom:2px}.layui-tag-input.layui-tag-input-sm{min-height:32px}.layui-tag-input.layui-tag-input-sm .layui-tag-input-inner-input{height:28px;vertical-align:middle}.layui-tag-input.layui-tag-input-sm .layui-tag-input-inner{padding:1px 5px}.layui-tag-input.layui-tag-input-sm .layui-tag{margin-top:1px;margin-bottom:1px}.layui-tag-input.layui-tag-input-xs{min-height:26px}.layui-tag-input.layui-tag-input-xs .layui-tag-input-inner-input{height:22px;vertical-align:middle}.layui-tag-input.layui-tag-input-xs .layui-tag-input-inner{padding:1px 5px}.layui-tag-input.layui-tag-input-xs .layui-tag{margin-top:1px;margin-bottom:1px}.layui-tag-input-suffix{display:flex;flex:none;align-items:center;padding:0 10px}.layui-tag-input:not(.layui-tag-input-disabled):hover,.layui-tag-input:not(.layui-tag-input-disabled):focus-within{border-color:#d2d2d2!important}.layui-tag-input:not(.layui-tag-input-disabled):hover .layui-tag-input-clear,.layui-tag-input:not(.layui-tag-input-disabled):focus-within .layui-tag-input-clear{visibility:visible}\n')();
|
|
const _hoisted_1 = { key: 0 };
|
|
const _hoisted_2 = { class: "layui-tag-input-inner" };
|
|
const _hoisted_3 = { class: "layui-tag-input-collapsed-panel" };
|
|
const _hoisted_4 = ["disabled", "placeholder", "readonly", "onKeydown"];
|
|
const _hoisted_5 = {
|
|
key: 1,
|
|
class: "layui-tag-input-clear"
|
|
};
|
|
const _hoisted_6 = {
|
|
key: 2,
|
|
class: "layui-tag-input-suffix"
|
|
};
|
|
const __default__ = {
|
|
name: "LayTagInput"
|
|
};
|
|
const _sfc_main = defineComponent({
|
|
...__default__,
|
|
props: {
|
|
modelValue: null,
|
|
inputValue: null,
|
|
disabled: { type: Boolean },
|
|
placeholder: { default: void 0 },
|
|
readonly: { type: Boolean },
|
|
allowClear: { type: Boolean },
|
|
max: null,
|
|
minCollapsedNum: { default: 0 },
|
|
collapseTagsTooltip: { type: Boolean },
|
|
size: { default: "md" },
|
|
tagProps: null,
|
|
disabledInput: { type: Boolean }
|
|
},
|
|
emits: [
|
|
"update:modelValue",
|
|
"update:inputValue",
|
|
"change",
|
|
"inputValueChange",
|
|
"remove",
|
|
"clear",
|
|
"focus",
|
|
"blur",
|
|
"pressEnter"
|
|
],
|
|
setup(__props, { expose, emit }) {
|
|
var _a;
|
|
const props = __props;
|
|
const mirrorRefEl = shallowRef(void 0);
|
|
const inputRefEl = shallowRef(void 0);
|
|
const oldInputValue = ref("");
|
|
const compositionValue = ref("");
|
|
const isComposing = ref(false);
|
|
const inputStyle = reactive({ width: "15px" });
|
|
const _tagProps = reactive((_a = props.tagProps) != null ? _a : {});
|
|
const tagProps = reactiveOmit(_tagProps, "closable", "size", "disabled");
|
|
const inputValue = computed({
|
|
get() {
|
|
return props.inputValue;
|
|
},
|
|
set(val) {
|
|
emit("update:inputValue", val);
|
|
emit("inputValueChange", val);
|
|
}
|
|
});
|
|
const tagData = computed({
|
|
get() {
|
|
return props.modelValue;
|
|
},
|
|
set(val) {
|
|
emit("update:modelValue", val);
|
|
emit("change", val);
|
|
}
|
|
});
|
|
const normalizedTags = computed(() => {
|
|
var _a2;
|
|
return normalizedTagData((_a2 = tagData.value) != null ? _a2 : []);
|
|
});
|
|
const computedTagData = computed(() => {
|
|
var _a2;
|
|
if (!normalizedTags.value)
|
|
return;
|
|
return props.minCollapsedNum ? (_a2 = normalizedTags.value) == null ? void 0 : _a2.slice(0, props.minCollapsedNum) : normalizedTags.value;
|
|
});
|
|
const collapsedTagData = computed(() => {
|
|
var _a2, _b;
|
|
if (!normalizedTags.value)
|
|
return;
|
|
return props.minCollapsedNum && ((_a2 = normalizedTags.value) == null ? void 0 : _a2.length) > props.minCollapsedNum ? (_b = normalizedTags.value) == null ? void 0 : _b.slice(props.minCollapsedNum) : [];
|
|
});
|
|
const handleInput = function(e) {
|
|
if (isComposing.value) {
|
|
return;
|
|
}
|
|
inputValue.value = e.target.value;
|
|
};
|
|
const handleComposition = (e) => {
|
|
var _a2;
|
|
if (e.type === "compositionend") {
|
|
isComposing.value = false;
|
|
compositionValue.value = "";
|
|
handleInput(e);
|
|
} else {
|
|
isComposing.value = true;
|
|
compositionValue.value = inputValue.value + ((_a2 = e.data) != null ? _a2 : "");
|
|
}
|
|
};
|
|
const handleEnter = (e) => {
|
|
var _a2;
|
|
e.preventDefault();
|
|
const valueStr = inputValue.value ? String(inputValue.value).trim() : "";
|
|
if (!valueStr || !tagData.value)
|
|
return;
|
|
const isLimit = props.max && ((_a2 = tagData.value) == null ? void 0 : _a2.length) >= props.max;
|
|
if (!isLimit) {
|
|
tagData.value = tagData.value instanceof Array ? tagData.value.concat(String(valueStr)) : [valueStr];
|
|
inputValue.value = "";
|
|
}
|
|
emit("pressEnter", inputValue.value, e);
|
|
};
|
|
const handleBackspaceKeyUp = (e) => {
|
|
var _a2;
|
|
if (!tagData.value || !tagData.value.length)
|
|
return;
|
|
if (!oldInputValue.value && ["Backspace", "Delete"].includes(e.code)) {
|
|
const lastIndex = normalizedTags.value.length - 1;
|
|
handleClose(normalizedTags.value[lastIndex].value, lastIndex, e);
|
|
}
|
|
oldInputValue.value = (_a2 = inputValue.value) != null ? _a2 : "";
|
|
};
|
|
const handleFocus = (e) => {
|
|
var _a2;
|
|
emit("focus", e);
|
|
(_a2 = inputRefEl.value) == null ? void 0 : _a2.focus();
|
|
};
|
|
const handleBlur = (e) => {
|
|
var _a2;
|
|
emit("blur", e);
|
|
(_a2 = inputRefEl.value) == null ? void 0 : _a2.blur();
|
|
};
|
|
const handleClearClick = (e) => {
|
|
if (props.disabled || props.readonly || !props.allowClear) {
|
|
return;
|
|
}
|
|
tagData.value = [];
|
|
emit("clear", e);
|
|
};
|
|
const handleClose = (value, index2, e) => {
|
|
if (!tagData.value)
|
|
return;
|
|
const arr = [...tagData.value];
|
|
arr.splice(index2, 1);
|
|
tagData.value = arr;
|
|
emit("remove", value, e);
|
|
};
|
|
const handleMouseDown = (e) => {
|
|
if (inputRefEl.value) {
|
|
e.preventDefault();
|
|
inputRefEl.value.focus();
|
|
}
|
|
};
|
|
const setInputWidth = (width) => {
|
|
if (width > 15) {
|
|
inputStyle.width = `${width}px`;
|
|
} else {
|
|
inputStyle.width = "15px";
|
|
}
|
|
};
|
|
const handleResize = () => {
|
|
if (mirrorRefEl.value) {
|
|
setInputWidth(mirrorRefEl.value.offsetWidth);
|
|
}
|
|
};
|
|
const cls = computed(() => [
|
|
`layui-tag-input`,
|
|
`layui-tag-input-${props.size}`,
|
|
{
|
|
"layui-tag-input-disabled": props.disabled
|
|
}
|
|
]);
|
|
const normalizedTagData = (value) => value.map((item) => {
|
|
if (isObject(item))
|
|
return item;
|
|
return {
|
|
value: item,
|
|
label: String(item),
|
|
closable: true
|
|
};
|
|
});
|
|
useResizeObserver(mirrorRefEl, () => {
|
|
handleResize();
|
|
});
|
|
watch(() => inputValue.value, (val) => {
|
|
if (inputRefEl.value && !isComposing.value) {
|
|
nextTick(() => {
|
|
inputRefEl.value.value = val != null ? val : "";
|
|
});
|
|
}
|
|
});
|
|
const moreCount = computed(() => {
|
|
if (tagData.value && computedTagData.value) {
|
|
return tagData.value.length - computedTagData.value.length;
|
|
}
|
|
});
|
|
onMounted(() => {
|
|
handleResize();
|
|
});
|
|
expose({
|
|
focus: handleFocus,
|
|
blur: handleBlur
|
|
});
|
|
return (_ctx, _cache) => {
|
|
var _a2, _b, _c;
|
|
return openBlock(), createElementBlock("div", {
|
|
class: normalizeClass(unref(cls)),
|
|
onMousedown: handleMouseDown
|
|
}, [
|
|
createElementVNode("span", {
|
|
ref_key: "mirrorRefEl",
|
|
ref: mirrorRefEl,
|
|
class: "layui-tag-input-mirror"
|
|
}, toDisplayString(compositionValue.value || unref(inputValue) || __props.placeholder), 513),
|
|
_ctx.$slots.prefix ? (openBlock(), createElementBlock("span", _hoisted_1, [
|
|
renderSlot(_ctx.$slots, "prefix")
|
|
])) : createCommentVNode("", true),
|
|
createElementVNode("span", _hoisted_2, [
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(computedTagData), (item, index2) => {
|
|
return openBlock(), createBlock(_sfc_main$1, mergeProps({
|
|
key: `${item}-${index2}`
|
|
}, unref(tagProps), {
|
|
closable: !__props.readonly && !__props.disabled && item.closable,
|
|
size: __props.size,
|
|
onClose: ($event) => handleClose(item.value, index2, $event)
|
|
}), {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(item.label), 1)
|
|
]),
|
|
_: 2
|
|
}, 1040, ["closable", "size", "onClose"]);
|
|
}), 128)),
|
|
((_a2 = unref(computedTagData)) == null ? void 0 : _a2.length) != ((_b = unref(tagData)) == null ? void 0 : _b.length) ? (openBlock(), createBlock(_sfc_main$2, {
|
|
key: 0,
|
|
isDark: false,
|
|
trigger: "hover",
|
|
popperStyle: "padding:6px",
|
|
disabled: !__props.collapseTagsTooltip
|
|
}, {
|
|
content: withCtx(() => [
|
|
createElementVNode("div", _hoisted_3, [
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(collapsedTagData), (item, index2) => {
|
|
return openBlock(), createBlock(_sfc_main$1, mergeProps({
|
|
key: `${item}-${index2}`
|
|
}, unref(tagProps), {
|
|
closable: !__props.readonly && !__props.disabled && item.closable,
|
|
size: __props.size,
|
|
onClose: ($event) => {
|
|
var _a3;
|
|
return handleClose(item.value, index2 + ((_a3 = __props.minCollapsedNum) != null ? _a3 : 0), $event);
|
|
}
|
|
}), {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(item.label), 1)
|
|
]),
|
|
_: 2
|
|
}, 1040, ["closable", "size", "onClose"]);
|
|
}), 128))
|
|
])
|
|
]),
|
|
default: withCtx(() => [
|
|
createVNode(_sfc_main$1, mergeProps(unref(tagProps), {
|
|
key: "more",
|
|
closable: false,
|
|
size: __props.size
|
|
}), {
|
|
default: withCtx(() => [
|
|
createTextVNode(" +" + toDisplayString(unref(moreCount)) + "... ", 1)
|
|
]),
|
|
_: 1
|
|
}, 16, ["size"])
|
|
]),
|
|
_: 1
|
|
}, 8, ["disabled"])) : createCommentVNode("", true),
|
|
!__props.disabledInput ? (openBlock(), createElementBlock("input", {
|
|
key: 1,
|
|
ref_key: "inputRefEl",
|
|
ref: inputRefEl,
|
|
class: "layui-tag-input-inner-input",
|
|
style: normalizeStyle(inputStyle),
|
|
disabled: __props.disabled,
|
|
placeholder: __props.placeholder,
|
|
readonly: __props.readonly,
|
|
onKeydown: withKeys(handleEnter, ["enter"]),
|
|
onKeyup: handleBackspaceKeyUp,
|
|
onInput: handleInput,
|
|
onFocus: handleFocus,
|
|
onBlur: handleBlur,
|
|
onCompositionstart: handleComposition,
|
|
onCompositionupdate: handleComposition,
|
|
onCompositionend: handleComposition
|
|
}, null, 44, _hoisted_4)) : createCommentVNode("", true)
|
|
]),
|
|
__props.allowClear && ((_c = unref(tagData)) == null ? void 0 : _c.length) && !__props.disabled ? (openBlock(), createElementBlock("span", _hoisted_5, [
|
|
createVNode(unref(_sfc_main$2E), {
|
|
type: "layui-icon-close-fill",
|
|
onClick: withModifiers(handleClearClick, ["stop"])
|
|
}, null, 8, ["onClick"])
|
|
])) : createCommentVNode("", true),
|
|
_ctx.$slots.suffix ? (openBlock(), createElementBlock("span", _hoisted_6, [
|
|
renderSlot(_ctx.$slots, "suffix")
|
|
])) : createCommentVNode("", true)
|
|
], 34);
|
|
};
|
|
}
|
|
});
|
|
const component = withInstall(_sfc_main);
|
|
export { _sfc_main as _, component as c };
|