vuux
Version:
Vue3 Nuxt3 Nuxt4 组件库
99 lines (98 loc) • 3.88 kB
JavaScript
import { defineComponent as j, createElementBlock as c, openBlock as d, normalizeStyle as q, unref as e, createElementVNode as t, createVNode as i, Fragment as h, renderList as f, createBlock as p, withCtx as V, createTextVNode as b, toDisplayString as g, normalizeClass as v } from "vue";
import { CheckBox as r } from "../../CheckBox/index.mjs";
import { useTransfer as G } from "./hook/useTransfer.mjs";
import { Icon as k } from "@vuux/icons";
const H = { class: "transfer-panel" }, J = { class: "transfer-panel-top" }, M = { class: "transfer-panel-body" }, O = { class: "transfer-panel-action" }, P = { class: "transfer-panel" }, Q = { class: "transfer-panel-top" }, W = { class: "transfer-panel-body" }, le = /* @__PURE__ */ j({
name: "Transfer",
__name: "index",
props: {
modelValue: { default: () => [] },
list: {},
height: { default: 260 },
width: { default: 160 },
label: { default: "label" },
value: { default: "value" },
disabled: { default: "disabled" },
theme: { default: "var(--app-theme)" }
},
emits: ["update:modelValue", "change"],
setup(u, { emit: C }) {
const a = u, _ = C, { labelKey: n, valueKey: s, rightList: y, styles: L, leftList: U, leftCheckedValues: x, rightCheckedValues: R, isLeftChecked: I, onLeftCheck: T, isLeftAllSelected: A, isLeftIndeterminate: B, toggleLeftAll: S, isRightChecked: N, onRightCheck: w, isRightAllSelected: z, isRightIndeterminate: E, toggleRightAll: K, moveToRight: D, moveToLeft: F } = G(a, _);
return (X, o) => (d(), c("div", {
class: "app-transfer",
style: q(e(L))
}, [
t("div", H, [
t("div", J, [
i(e(r), {
modelValue: e(A),
indeterminate: e(B),
"onUpdate:modelValue": e(S),
theme: a.theme
}, null, 8, ["modelValue", "indeterminate", "onUpdate:modelValue", "theme"]),
o[0] || (o[0] = t("span", null, "可选项", -1))
]),
t("div", M, [
(d(!0), c(h, null, f(e(U), (l) => (d(), p(e(r), {
key: l[e(s)],
label: l[e(n)],
value: l[e(s)],
disabled: l[u.disabled],
modelValue: e(I)(l),
"onUpdate:modelValue": (m) => e(T)(l, m),
theme: a.theme
}, {
default: V(() => [
b(g(l[e(n)]), 1)
]),
_: 2
}, 1032, ["label", "value", "disabled", "modelValue", "onUpdate:modelValue", "theme"]))), 128))
])
]),
t("div", O, [
i(e(k), {
name: "Icon6657361",
opacity: 0.8,
class: v({ "is-disabled": e(x).length === 0 }),
onClick: e(D)
}, null, 8, ["class", "onClick"]),
i(e(k), {
name: "Icon3498333",
opacity: 0.8,
class: v({ "is-disabled": e(R).length === 0 }),
onClick: e(F)
}, null, 8, ["class", "onClick"])
]),
t("div", P, [
t("div", Q, [
i(e(r), {
modelValue: e(z),
indeterminate: e(E),
"onUpdate:modelValue": e(K),
theme: a.theme
}, null, 8, ["modelValue", "indeterminate", "onUpdate:modelValue", "theme"]),
o[1] || (o[1] = t("span", null, "已选项", -1))
]),
t("div", W, [
(d(!0), c(h, null, f(e(y), (l) => (d(), p(e(r), {
key: l[e(s)],
label: l[e(n)],
value: l[e(s)],
disabled: l[u.disabled],
modelValue: e(N)(l),
"onUpdate:modelValue": (m) => e(w)(l, m),
theme: a.theme
}, {
default: V(() => [
b(g(l[e(n)]), 1)
]),
_: 2
}, 1032, ["label", "value", "disabled", "modelValue", "onUpdate:modelValue", "theme"]))), 128))
])
])
], 4));
}
});
export {
le as default
};