lc-vue-select-input
Version:
313 lines (312 loc) • 10.6 kB
JavaScript
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".multiple-input.is-clearable:not(.is-disabled):hover .clear-btn[data-v-be13deb0]{display:inline}.multiple-input.is-clearable:not(.is-disabled):hover .info-btn[data-v-be13deb0]{display:none}.multiple-input.is-clearable:not(.is-disabled) .clear-btn[data-v-be13deb0]{display:none}.el-input .el-input__inner.tags-list[data-v-be13deb0]{min-height:var(--el-input-inner-height);height:auto;padding:2px 0;position:relative;display:flex;flex-wrap:wrap;align-items:center;min-width:0;gap:6px}.el-input .el-input__inner.multiple-line[data-v-be13deb0]{position:relative;display:flex;flex-wrap:wrap;align-items:center;min-width:0;gap:6px}.el-input .el-input__inner[data-v-be13deb0] .el-icon{vertical-align:middle}.select-input[data-v-8f4f5a83]{width:100%}.select-input[data-v-8f4f5a83] .el-input .el-input__inner,.select-input[data-v-8f4f5a83] .el-input .el-input__suffix-inner{cursor:pointer}.select-input[data-v-8f4f5a83] .el-input.is-disabled .el-input__inner,.select-input[data-v-8f4f5a83] .el-input.is-disabled .el-input__suffix-inner{cursor:not-allowed}.select-input[data-v-8f4f5a83] .el-input.is-disabled .el-input__suffix-inner i{color:var(--el-input-placeholder-color)}.select-input.clearable:not(.disabled):hover .clear-btn[data-v-8f4f5a83]{display:inline}.select-input.clearable:not(.disabled):hover .info-btn[data-v-8f4f5a83]{display:none}.select-input .clear-btn[data-v-8f4f5a83]{display:none}.select-input[data-v-8f4f5a83] .el-icon{vertical-align:middle}")),document.head.appendChild(e)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}})();
import { openBlock as a, createElementBlock as s, createElementVNode as u, defineComponent as L, computed as y, resolveComponent as b, normalizeClass as I, unref as d, Fragment as B, createVNode as i, withCtx as r, createTextVNode as x, toDisplayString as C, createBlock as g, createCommentVNode as w, renderList as T, withModifiers as S, renderSlot as V, pushScopeId as D, popScopeId as E } from "vue";
/*! Element Plus Icons Vue v2.1.0 */
var z = (e, o) => {
let l = e.__vccOpts || e;
for (let [c, n] of o)
l[c] = n;
return l;
}, O = {
name: "ArrowDown"
}, R = {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 1024 1024"
}, U = /* @__PURE__ */ u(
"path",
{
fill: "currentColor",
d: "M831.872 340.864 512 652.672 192.128 340.864a30.592 30.592 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.592 30.592 0 0 0-42.752 0z"
},
null,
-1
/* HOISTED */
), F = [
U
];
function j(e, o, l, c, n, _) {
return a(), s("svg", R, F);
}
var A = /* @__PURE__ */ z(O, [["render", j], ["__file", "arrow-down.vue"]]), q = {
name: "CircleClose"
}, G = {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 1024 1024"
}, H = /* @__PURE__ */ u(
"path",
{
fill: "currentColor",
d: "m466.752 512-90.496-90.496a32 32 0 0 1 45.248-45.248L512 466.752l90.496-90.496a32 32 0 1 1 45.248 45.248L557.248 512l90.496 90.496a32 32 0 1 1-45.248 45.248L512 557.248l-90.496 90.496a32 32 0 0 1-45.248-45.248L466.752 512z"
},
null,
-1
/* HOISTED */
), J = /* @__PURE__ */ u(
"path",
{
fill: "currentColor",
d: "M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768zm0 64a448 448 0 1 1 0-896 448 448 0 0 1 0 896z"
},
null,
-1
/* HOISTED */
), K = [
H,
J
];
function P(e, o, l, c, n, _) {
return a(), s("svg", G, K);
}
var M = /* @__PURE__ */ z(q, [["render", P], ["__file", "circle-close.vue"]]);
const Q = (e) => (D("data-v-be13deb0"), e = e(), E(), e), W = {
class: "el-input__wrapper",
tabindex: "-1"
}, X = ["placeholder"], Y = {
key: 0,
class: "el-input__inner multiple-line"
}, Z = {
key: 1,
class: "el-input__inner tags-list"
}, ee = { class: "el-input__suffix" }, le = { class: "el-input__suffix-inner" }, te = ["onClick"], ae = /* @__PURE__ */ Q(() => /* @__PURE__ */ u("i", { class: "el-icon-circle-close" }, null, -1)), oe = {
style: { "margin-left": "8px" },
class: "info-btn"
}, ne = /* @__PURE__ */ L({
__name: "index",
props: {
modelValue: {
type: Array,
default: void 0
},
placeholder: {
type: String,
default: "请选择"
},
disabled: {
type: Boolean,
default: !1
},
multipleLine: {
type: Boolean,
default: !0
},
clearable: {
type: Boolean,
default: !1
}
},
emits: ["clear-click", "tag-remove"],
setup(e, { emit: o }) {
const l = e, c = y(() => Array.isArray(l.modelValue) && l.modelValue.length > 0), n = y(() => l.clearable && !l.disabled && c.value), _ = () => {
o("clear-click");
}, h = (p) => {
o("tag-remove", p);
};
return (p, f) => {
const m = b("el-tag"), t = b("el-icon");
return a(), s("div", {
class: I(["el-input el-input--suffix multiple-input", {
"is-disabled": e.disabled,
"is-clearable": d(n)
}])
}, [
u("div", W, [
d(c) ? (a(), s(B, { key: 1 }, [
e.multipleLine ? (a(), s("div", Z, [
(a(!0), s(B, null, T(e.modelValue, (k, v) => (a(), g(m, {
key: v,
closable: !e.disabled,
type: "info",
class: "tag-item",
onClose: ($) => h(v)
}, {
default: r(() => [
x(C(k), 1)
]),
_: 2
}, 1032, ["closable", "onClose"]))), 128))
])) : (a(), s("div", Y, [
i(m, {
closable: !e.disabled,
type: "info",
class: "tag-item",
onClose: f[0] || (f[0] = (k) => h(0))
}, {
default: r(() => [
x(C(e.modelValue[0]), 1)
]),
_: 1
}, 8, ["closable"]),
e.modelValue.length > 1 ? (a(), g(m, {
key: 0,
type: "info",
class: "tag-item-close"
}, {
default: r(() => [
x(" +" + C(e.modelValue.length - 1), 1)
]),
_: 1
})) : w("", !0)
]))
], 64)) : (a(), s("input", {
key: 0,
class: "el-input__inner",
type: "text",
readonly: "",
autocomplete: "off",
tabindex: "0",
placeholder: e.placeholder
}, null, 8, X)),
u("span", ee, [
u("span", le, [
d(n) ? (a(), s("span", {
key: 0,
class: "clear-btn",
onClick: S(_, ["stop", "prevent"])
}, [
ae,
i(t, { style: { "vertical-align": "middle" } }, {
default: r(() => [
i(d(M))
]),
_: 1
})
], 8, te)) : w("", !0),
u("span", oe, [
V(p.$slots, "icon", {}, () => [
i(t, { style: { "vertical-align": "middle" } }, {
default: r(() => [
i(d(A))
]),
_: 1
})
], !0)
])
])
])
])
], 2);
};
}
});
const N = (e, o) => {
const l = e.__vccOpts || e;
for (const [c, n] of o)
l[c] = n;
return l;
}, se = /* @__PURE__ */ N(ne, [["__scopeId", "data-v-be13deb0"]]), ce = ["onClick"], de = {
style: { "margin-left": "8px" },
class: "info-btn"
}, ie = /* @__PURE__ */ L({
__name: "index",
props: {
modelValue: {
type: [
String,
Number,
Array
],
default: void 0
},
placeholder: {
type: String,
default: "请选择"
},
disabled: {
type: Boolean,
default: !1
},
multiple: {
type: Boolean,
default: !1
},
multipleLine: {
type: Boolean,
default: !0
},
clearable: {
type: Boolean,
default: !1
}
},
emits: [
"update:modelValue",
"change",
"click",
"clear-click",
"multiple-tag-remove"
],
setup(e, { emit: o }) {
const l = e, c = y(() => l.modelValue && l.modelValue !== ""), n = y(() => l.clearable && !l.disabled && c.value), _ = (t) => {
o("update:modelValue", t);
}, h = (...t) => {
o("change", ...t);
}, p = (...t) => {
l.disabled || o("click", ...t);
}, f = (...t) => {
l.disabled || o("clear-click", ...t);
}, m = (t) => {
o("multiple-tag-remove", t);
};
return (t, k) => {
const v = b("el-icon"), $ = b("el-input");
return a(), s("div", {
class: I(["select-input", { clearable: d(n), disabled: e.disabled }]),
onClick: p
}, [
e.multiple ? (a(), g(se, {
key: 0,
"model-value": e.modelValue,
readonly: "",
clearable: e.clearable,
placeholder: e.placeholder,
disabled: e.disabled,
"multiple-line": e.multipleLine,
onTagRemove: m,
onClearClick: f
}, {
icon: r(() => [
V(t.$slots, "icon", {}, void 0, !0)
]),
_: 3
}, 8, ["model-value", "clearable", "placeholder", "disabled", "multiple-line"])) : (a(), g($, {
key: 1,
"model-value": e.modelValue,
readonly: "",
placeholder: e.placeholder,
disabled: e.disabled,
onChange: h,
"onUpdate:modelValue": _
}, {
suffix: r(() => [
d(n) ? (a(), s("span", {
key: 0,
class: "clear-btn",
onClick: S(f, ["stop", "prevent"])
}, [
i(v, null, {
default: r(() => [
i(d(M))
]),
_: 1
})
], 8, ce)) : w("", !0),
u("span", de, [
V(t.$slots, "icon", {}, () => [
i(v, null, {
default: r(() => [
i(d(A))
]),
_: 1
})
], !0)
])
]),
_: 3
}, 8, ["model-value", "placeholder", "disabled"]))
], 2);
};
}
});
const ue = /* @__PURE__ */ N(ie, [["__scopeId", "data-v-8f4f5a83"]]);
export {
ue as SelectInput
};