vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
130 lines (129 loc) • 5.1 kB
JavaScript
import { defineComponent as S, ref as u, computed as $, watchEffect as f, createElementBlock as D, openBlock as U, normalizeStyle as k, createVNode as v, unref as m, mergeProps as y } from "vue";
import g from "../select/index.js";
const L = /* @__PURE__ */ S({
__name: "Cascader",
props: {
options: { default: () => [] },
label: { default: "label" },
value: { default: "value" },
children: { default: "children" },
placeholder: { default: "请选择" },
disabled: { type: [Boolean, Array], default: !1 },
width: { default: "auto" },
height: { default: void 0 },
size: { default: "middle" },
gap: { default: void 0 },
changeOnSelect: { type: Boolean, default: !1 },
allowClear: { type: Boolean, default: !1 },
search: { type: Boolean, default: !1 },
filter: { type: [Function, Boolean], default: !0 },
maxDisplay: { default: 6 },
modelValue: { default: () => [] }
},
emits: ["update:modelValue", "change"],
setup(w, { emit: c }) {
const i = w, l = u([]), o = u([]), n = u([]), t = u([]), h = u([]), s = c, A = $(() => {
const e = {
small: 4,
middle: 6,
large: 8
};
return i.gap !== void 0 ? `${i.gap}px` : `${e[i.size]}px`;
});
f(() => {
n.value = [...i.options];
}), f(() => {
l.value = [...i.modelValue];
}), f(() => {
V(l.value), C(l.value);
});
function b(e, a) {
const r = e.length;
for (let d = 0; d < r; d++)
if (e[d][i.value] === l.value[a])
return e[d][i.children] || [];
return [];
}
function V(e) {
t.value = b(n.value, 0), h.value = [], e.length > 1 && (h.value = b(t.value, 1));
}
function p(e, a) {
const r = e.length;
for (let d = 0; d < r; d++)
if (e[d][i.value] === l.value[a])
return e[d][i.label];
return l.value[a];
}
function C(e) {
o.value[0] = p(n.value, 0), e.length > 1 && (o.value[1] = p(t.value, 1)), e.length > 2 && (o.value[2] = p(h.value, 2));
}
function z(e, a) {
i.changeOnSelect ? (s("update:modelValue", [e]), s("change", [e], [a])) : (l.value = [e], o.value = [a]);
}
function B(e, a) {
i.changeOnSelect ? (s("update:modelValue", [l.value[0], e]), s("change", [l.value[0], e], [o.value[0], a])) : (l.value = [l.value[0], e], o.value = [o.value[0], a]);
}
function O(e, a) {
s("update:modelValue", [...l.value.slice(0, 2), e]), s("change", [...l.value.slice(0, 2), e], [...o.value.slice(0, 2), a]);
}
return (e, a) => (U(), D("div", {
class: "cascader-wrap",
style: k(`--cascader-select-gap: ${A.value};`)
}, [
v(m(g), y({
options: n.value,
label: e.label,
value: e.value,
placeholder: Array.isArray(e.placeholder) ? e.placeholder[0] : e.placeholder,
disabled: Array.isArray(e.disabled) ? e.disabled[0] : e.disabled,
width: Array.isArray(e.width) ? e.width[0] : e.width,
height: e.height,
size: e.size,
"allow-clear": e.allowClear,
search: e.search,
filter: e.filter,
"max-display": e.maxDisplay,
modelValue: l.value[0],
"onUpdate:modelValue": a[0] || (a[0] = (r) => l.value[0] = r),
onChange: z
}, e.$attrs), null, 16, ["options", "label", "value", "placeholder", "disabled", "width", "height", "size", "allow-clear", "search", "filter", "max-display", "modelValue"]),
v(m(g), y({
options: t.value,
label: e.label,
value: e.value,
placeholder: Array.isArray(e.placeholder) ? e.placeholder[1] : e.placeholder,
disabled: Array.isArray(e.disabled) ? e.disabled[1] : e.disabled,
width: Array.isArray(e.width) ? e.width[1] : e.width,
height: e.height,
size: e.size,
"allow-clear": e.allowClear,
search: e.search,
filter: e.filter,
"max-display": e.maxDisplay,
modelValue: l.value[1],
"onUpdate:modelValue": a[1] || (a[1] = (r) => l.value[1] = r),
onChange: B
}, e.$attrs), null, 16, ["options", "label", "value", "placeholder", "disabled", "width", "height", "size", "allow-clear", "search", "filter", "max-display", "modelValue"]),
v(m(g), y({
options: h.value,
label: e.label,
value: e.value,
placeholder: Array.isArray(e.placeholder) ? e.placeholder[2] : e.placeholder,
disabled: Array.isArray(e.disabled) ? e.disabled[2] : e.disabled,
width: Array.isArray(e.width) ? e.width[2] : e.width,
height: e.height,
size: e.size,
"allow-clear": e.allowClear,
search: e.search,
filter: e.filter,
"max-display": e.maxDisplay,
modelValue: l.value[2],
"onUpdate:modelValue": a[2] || (a[2] = (r) => l.value[2] = r),
onChange: O
}, e.$attrs), null, 16, ["options", "label", "value", "placeholder", "disabled", "width", "height", "size", "allow-clear", "search", "filter", "max-display", "modelValue"])
], 4));
}
});
export {
L as default
};