sci-pro
Version:
164 lines (163 loc) • 7.48 kB
JavaScript
import { defineComponent as x, ref as p, watch as _, computed as I, openBlock as v, createElementBlock as h, createElementVNode as s, toDisplayString as f, withDirectives as C, vModelText as A, createTextVNode as $, Fragment as b, renderList as m, normalizeClass as U, vModelCheckbox as O, createStaticVNode as N } from "vue";
import "./style/index.css";
const R = { class: "sci-transfer-container" }, T = { class: "sci-transfer-list-header" }, F = { class: "sci-transfer-content" }, j = { class: "sci-transfer-list-content" }, q = { class: "sci-transfer-operation-content" }, G = { class: "sci-transfer-list scroll-y" }, J = { class: "sci-checkbox-input" }, K = ["onUpdate:modelValue", "disabled", "onChange"], P = /* @__PURE__ */ s("span", { class: "sci-checkbox__inner" }, null, -1), Q = { class: "sci-transfer-item-text ellipsis" }, W = /* @__PURE__ */ N('<div class="sci-transfer-icon"><i><svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" color="#8E8E8E"><path d="M107 391.25h814v50H107zM107 590.75h814v50H107z" fill="currentColor"></path><path d="M124.71 408.79l167.58-167.58" fill="currentColor"></path><path d="M107.032 391.112l167.584-167.584 35.355 35.355-167.584 167.585z" fill="currentColor"></path><path d="M735.71 790.79l167.58-167.58" fill="currentColor"></path><path d="M718.029 773.115l167.584-167.584 35.355 35.355L753.384 808.47z" fill="currentColor"></path></svg></i></div>', 1), X = { class: "ellipsis" }, Y = ["onClick"], Z = /* @__PURE__ */ s("svg", {
viewBox: "0 0 1024 1024",
xmlns: "http://www.w3.org/2000/svg",
width: "20",
height: "20"
}, [
/* @__PURE__ */ s("path", {
d: "M721.92 333.418l0.91 440.65c0 23.104-9.546 35.475-32.746 35.475l-336.554-0.908c-23.181 0-33.383-10.552-33.383-33.655V333.418H268v441.731c0 46.334 37.705 84.012 84.047 84.012h336.044c46.344 0 84.068-37.678 84.068-84.012V333.418H721.92z",
fill: "currentColor"
}),
/* @__PURE__ */ s("path", {
d: "M390.46 427.958v312.805c0 2.036 0.291 4.003 0.815 5.88 15.392-0.012 30.785-0.047 46.174-0.102 0.509-1.847 0.789-3.78 0.789-5.781V428.094c-15.925-0.064-31.851-0.109-47.778-0.136zM601.398 429.091v311.672c0 1.627 0.187 3.212 0.529 4.743 15.564-0.068 31.133-0.118 46.7-0.147 0.32-1.486 0.496-3.023 0.496-4.601V429.22c-15.908-0.023-31.816-0.066-47.725-0.129zM859.49 248.742H672.856v-52.638c0.854-42.386-34.059-52.608-68.913-52.608H436.238c-43.288 0-67.972 16.28-67.972 51.153l-0.182 54.092H178.493v51.423h680.996l0.001-51.422z m-234.377 0H415.046v-36.809c0-11.664 8.225-21.831 19.917-21.831l168.054 0.909c11.671 0 21.945 8.383 21.945 20.047l0.151 37.684zM497.612 429.124v311.671c0 1.627 0.186 3.215 0.524 4.744 15.426-0.068 30.854-0.116 46.282-0.146 0.318-1.485 0.492-3.022 0.492-4.603V429.253c-15.765-0.024-31.533-0.065-47.298-0.129z",
fill: "currentColor"
})
], -1), ee = [
Z
], te = x({ name: "sci-transfer" }), ae = /* @__PURE__ */ x({
...te,
props: {
data: { default: () => [] },
title: { default: () => ["Column Chooser", "Column Selected"] }
},
emits: ["change"],
setup(y, { emit: w }) {
const H = y, D = w, r = p([]), a = p([]), g = p(""), o = p();
let n = null, i = -1, d = -1;
_(
() => H.data,
(l) => {
r.value = l.map((e) => ({
...e,
checked: e.disabled ? !1 : e.checked ?? !1,
disabled: e.disabled ?? !1
})), a.value = r.value.filter(
(e) => e.checked && !e.disabled
);
},
{
immediate: !0
}
), _(
() => a.value,
(l) => {
D("change", l);
},
{
deep: !0
}
);
const M = I(() => r.value.filter((l) => l.label.toLocaleLowerCase().includes(g.value.toLocaleLowerCase()))), k = (l) => {
if (l) {
let e = r.value.filter((t) => t.disabled);
if (a.value.length + e.length === r.value.length)
return;
} else if (a.value.length === 0)
return;
r.value.forEach((e) => {
!e.disabled && (e.checked = l);
}), l ? a.value = r.value.filter((e) => e.checked) : a.value = [];
}, V = (l) => {
if (l.checked)
a.value.push(l);
else {
let e = a.value.findIndex((t) => t.key === l.key);
a.value.splice(e, 1);
}
}, z = (l, e) => {
r.value.forEach((t) => {
t.key === l.key && (t.checked = !1);
}), a.value.splice(e, 1);
}, E = (l) => {
var e;
n = l.target, n.classList.add("moving"), i = Array.prototype.slice.call((e = o.value) == null ? void 0 : e.children).indexOf(n);
}, L = (l) => {
var t, c, u;
l.preventDefault();
const e = l.target;
e === n || e === o.value || !e.classList.contains("sci-transfer-selected-item") || (d = Array.prototype.slice.call((t = o.value) == null ? void 0 : t.children).indexOf(e), i < d ? (c = o.value) == null || c.insertBefore(n, e.nextSibling) : (u = o.value) == null || u.insertBefore(n, e));
}, S = () => {
if (n == null || n.classList.remove("moving"), i === -1 || d === -1)
return;
let l = a.value[i];
a.value.splice(i, 1), a.value.splice(d, 0, l), i = d = -1;
}, B = (l) => {
l.preventDefault();
};
return (l, e) => (v(), h("div", R, [
s("div", T, [
s("span", null, f(l.title[0]), 1),
s("span", null, f(l.title[1]), 1)
]),
s("div", F, [
s("div", j, [
s("div", q, [
C(s("input", {
type: "text",
placeholder: "Search...",
"onUpdate:modelValue": e[0] || (e[0] = (t) => g.value = t)
}, null, 512), [
[A, g.value]
]),
s("span", {
onClick: e[1] || (e[1] = (t) => k(!0))
}, "Select All"),
$("|"),
s("span", {
onClick: e[2] || (e[2] = (t) => k(!1))
}, "Unselect All")
]),
s("div", G, [
(v(!0), h(b, null, m(M.value, (t) => (v(), h("label", {
class: U(["sci-transfer-list-item", {
"is-checked": t.checked,
"is-disabled": t.disabled
}]),
key: t.key
}, [
s("span", J, [
C(s("input", {
type: "checkbox",
"onUpdate:modelValue": (c) => t.checked = c,
disabled: t.disabled,
onChange: (c) => V(t)
}, null, 40, K), [
[O, t.checked]
]),
P
]),
s("span", Q, f(t.label), 1)
], 2))), 128))
])
]),
W,
s("div", {
class: "sci-transfer-list-content scroll-y",
onDragstart: e[4] || (e[4] = (t) => E(t)),
onDragenter: e[5] || (e[5] = (t) => L(t)),
onDragend: e[6] || (e[6] = (t) => S()),
ref_key: "dragContentRef",
ref: o
}, [
(v(!0), h(b, null, m(a.value, (t, c) => (v(), h("div", {
class: "sci-transfer-selected-item",
onDragover: e[3] || (e[3] = (u) => B(u)),
key: t.key,
draggable: "true"
}, [
s("span", X, f(t.label), 1),
s("i", {
style: { color: "#1b90fb" },
onClick: (u) => z(t, c)
}, ee, 8, Y)
], 32))), 128))
], 544)
])
]));
}
});
export {
ae as default
};