@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
417 lines (416 loc) • 12.8 kB
JavaScript
import { defineComponent as be, ref as c, computed as m, watch as Y, watchEffect as ge, reactive as he, toRef as me, createVNode as n, renderSlot as k, Fragment as ye, mergeProps as E } from "vue";
import "../checkbox/index.mjs";
import "../collapse-transition/index.mjs";
import "../icon/index.mjs";
import "../input/index.mjs";
import "../number-input/index.mjs";
import "../resize-observer/index.mjs";
import "../virtual-list/index.mjs";
import { stateProp as pe, useNameHelper as Se, useIcons as ke } from "@vexip-ui/config";
import { useRtl as we, useModifier as Ce } from "@vexip-ui/hooks";
import { decide as He, boundRange as Z } from "@vexip-ui/utils";
import ee from "../checkbox/checkbox.vue2.mjs";
import z from "../icon/icon.mjs";
import Ie from "../collapse/collapse-transition.mjs";
import Pe from "../input/input.mjs";
import Re from "../resize-observer/resize-observer.mjs";
import ze from "../virtual-list/virtual-list.mjs";
import Be from "../number-input/number-input.vue2.mjs";
const Je = /* @__PURE__ */ be({
name: "TransferPanel",
props: {
type: {
type: String,
default: null
},
state: {
type: pe,
default: "default"
},
selected: {
type: Set,
default: () => /* @__PURE__ */ new Set()
},
paged: {
type: Boolean,
default: !1
},
filter: {
type: Function,
default: null
},
disabled: {
type: Boolean,
default: !1
},
title: {
type: String,
default: ""
},
options: {
type: Array,
default: () => []
},
emptyText: {
type: String,
default: "暂无数据"
},
optionHeight: {
type: Number,
default: 32
},
deepState: {
type: Boolean,
default: !1
},
loading: {
type: Boolean,
default: !1
},
loadingIcon: {
type: [Object, Function],
default: null
},
loadingLock: {
type: Boolean,
default: !1
},
loadingEffect: {
type: String,
default: null
},
locale: {
type: Object,
default: () => ({})
}
},
emits: ["update:selected", "select", "enter", "switch"],
setup(t, {
slots: b,
emit: B
}) {
const u = Se("transfer"), f = ke(), {
isRtl: U
} = we(), o = c(new Set(t.selected)), y = c(10), v = c(1), p = c(null), s = c(-1), L = c(""), D = c(!1), le = c(), $ = c(), te = c(), ae = c(), N = c(), g = c();
let j = 0, w = null, C = !1;
const {
target: ne,
modifier: q
} = Ce({
passive: !1,
onKeyDown: (e, l) => {
He([[() => l.up || l.down, () => {
!C && s.value < 0 ? (C = !0, w ? s.value = t.options.findIndex((a) => a.value === w) : g.value && (s.value = Math.round(g.value.scrollOffset / t.optionHeight)), s.value = s.value === -1 ? 0 : s.value) : s.value = Z(se(s.value + (l.up ? -1 : 1), l.up ? -1 : 1), 0, O.value.length - 1), t.paged || re(s.value, l.up ? "top" : "bottom");
}], [() => t.paged && (l.left || l.right) && e.ctrlKey, () => {
A(v.value + (l.left ? -1 : 1)), s.value = 0;
}], [() => t.type === "source" && l.right || t.type === "target" && l.left, () => {
C = !1, s.value = -1, w = null, B("switch");
}], [() => l.space, () => {
const a = O.value[s.value];
a && (o.value[o.value.has(a.value) ? "delete" : "add"](a.value), P());
}], [() => l.enter, () => B("enter")], [() => typeof t.filter == "function" && !!N.value && l["ctrl+f"], () => {
e.stopPropagation(), N.value.focus();
}]], {
beforeMatchAny: () => e.preventDefault(),
afterMatchAny: l.resetAll
});
}
}), ue = m(() => ({
[u.be("panel")]: !0,
[u.bem("panel", t.state)]: t.state !== "default",
[u.bem("panel", "disabled")]: t.disabled
})), d = m(() => {
const e = t.filter, l = L.value;
return e && l ? t.options.filter((a) => e(l, a)) : t.options;
}), V = m(() => d.value.length), _ = m(() => d.value.slice((v.value - 1) * y.value, v.value * y.value)), O = m(() => t.paged ? _.value : d.value), H = m(() => Math.ceil(V.value / (y.value || 1)));
Y(() => t.selected, (e) => {
o.value = e;
}), Y(V, () => {
C = !1, s.value = -1, w = null;
});
const T = c(!1), I = c(!1);
ge(() => {
const e = d.value, l = o.value;
let a = !1, i = !1;
for (let r = 0, S = V.value; r < S; ++r) {
const R = e[r];
if (R.disabled || (l.has(R.value) ? a = !0 : i = !0), a && i)
break;
}
I.value = a && !i, T.value = !I.value && l.size > 0;
});
function x() {
requestAnimationFrame(() => {
var l;
const e = $.value || ((l = g.value) == null ? void 0 : l.wrapper);
if (e) {
const a = getComputedStyle(e), i = parseInt(a.paddingTop), r = parseInt(a.paddingBottom), S = e.offsetHeight - i - r;
j = S, y.value = Math.floor(S / (t.optionHeight || 1));
}
});
}
function G(e) {
if (!(t.disabled || e.disabled)) {
if (p.value && q.shift) {
ie(p.value, e.value);
return;
}
o.value.has(e.value) ? o.value.delete(e.value) : o.value.add(e.value), C = !1, s.value = -1, w = e.value, p.value = e.value, P();
}
}
function ie(e, l) {
var R;
const a = d.value;
let i = -1, r = -1;
for (let h = 0, M = a.length; h < M; ++h) {
const X = a[h];
if (X.value === e ? i = h : X.value === l && (r = h), i > 0 && r > 0) break;
}
const S = o.value.has((R = a[i]) == null ? void 0 : R.value) ? "add" : "delete";
i > r && ([i, r] = [r, i]);
for (let h = i; h <= r; ++h) {
const M = a[h];
M.disabled || o.value[S](M.value);
}
P();
}
function K(e) {
if (e == null || e.preventDefault(), !t.disabled) {
if (I.value)
for (const l of d.value)
!l.disabled && o.value.delete(l.value);
else
for (const l of d.value)
!l.disabled && o.value.add(l.value);
p.value = null, P();
}
}
function J() {
if (!t.disabled)
if (T.value) {
const e = new Set(o.value);
for (const l of d.value)
l.disabled || (e.has(l.value) ? o.value.delete(l.value) : o.value.add(l.value));
p.value = null, P();
} else
K();
}
function oe() {
p.value = null, q.resetAll();
}
function P() {
B("update:selected", o.value), B("select");
}
function A(e) {
v.value = Z(e, 1, H.value);
}
function Q(e, l) {
var i;
const a = O.value;
for (l = l / Math.abs(l); (i = a[e]) != null && i.disabled && (e += l, !(e < 0 || e >= a.length)); )
;
return e;
}
function se(e, l = 1) {
var i;
const a = O.value;
return (i = a[e]) != null && i.disabled && (e = Q(e, l), (l > 0 ? e >= a.length : e < 0) && (e = Q(e, -l), (l > 0 ? e < 0 : e >= a.length) && (e = -1))), e;
}
function re(e, l) {
const a = t.options[e];
if (!(t.paged || !a || !g.value))
if (l === "bottom") {
const i = (e + 1) * t.optionHeight;
g.value.scrollOffset + j < i && g.value.scrollTo((e - y.value + 1) * t.optionHeight);
} else {
const i = e * t.optionHeight;
g.value.scrollOffset > i && g.value.scrollTo(i);
}
}
const F = he({
type: me(t, "type"),
currentPage: v,
pageSize: y,
totalPages: H,
allSelected: I,
partial: T,
selected: m(() => Array.from(o.value)),
options: m(() => d.value),
toggleSelectAll: K,
handleReverse: J
});
function W({
option: e,
index: l
}) {
const a = t.disabled || e.disabled, i = (r) => {
r.preventDefault(), r.stopPropagation(), G(e);
};
return n("li", {
class: {
[u.be("option")]: !0,
[u.bem("option", "disabled")]: a,
[u.bem("option", "hitting")]: s.value === l
},
role: "option",
"aria-disabled": a ? "true" : void 0,
onClick: () => G(e)
}, [k(b, "option", {
type: t.type,
option: e,
index: l
}, () => [n(ee, {
key: 1,
class: u.be("checkbox"),
state: t.deepState ? t.state : void 0,
checked: o.value.has(e.value),
disabled: a,
"tab-index": -1,
onClick: i
}, null), n("span", {
key: 2,
class: u.be("label")
}, [k(b, "label", {
type: t.type,
option: e,
index: l
}, () => [e.label])])])]);
}
function ce() {
return n("div", {
ref: le,
class: u.be("header")
}, [k(b, "header", F, () => [n(ye, null, [n(ee, {
inherit: !0,
control: !0,
class: u.be("checkbox"),
state: t.deepState ? t.state : void 0,
checked: I.value,
partial: T.value,
disabled: t.disabled,
"tab-index": -1,
onClick: K
}, null), n("div", {
class: [u.be("reverse"), t.disabled && u.bem("reverse", "disabled")],
title: t.locale.reverse,
onClick: J
}, [n(z, E(f.value.retweet, {
scale: +(f.value.retweet.scale || 1) * 1.2
}), null)]), n("div", {
class: u.be("counter")
}, [`${o.value.size}/${d.value.length}`]), (t.title || b.title) && n("span", {
class: u.be("title")
}, [k(b, "title", F, () => [t.title])]), n(Ie, {
appear: !0,
horizontal: !0,
"fade-effect": !0
}, {
default: () => [t.loading && n("div", {
class: u.be("loading")
}, [n(z, E(f.value.loading, {
effect: t.loadingEffect || f.value.loading.effect,
icon: t.loadingIcon || f.value.loading.icon,
label: "loading"
}), null)])]
})])])]);
}
function de() {
if (typeof t.filter != "function") return null;
const e = (l) => l.stopPropagation();
return n("div", {
ref: ae,
class: u.be("filter")
}, [n(Pe, {
ref: N,
value: L.value,
"onUpdate:value": (l) => L.value = l,
inherit: !0,
clearable: !0,
sync: !0,
disabled: t.disabled,
placeholder: D.value ? void 0 : t.locale.search,
onKeydown: e,
onFocus: () => D.value = !0,
onBlur: () => D.value = !1
}, {
suffix: () => n(z, f.value.search, null)
})]);
}
function fe() {
return t.paged || b.body ? n(Re, {
throttle: !0,
onResize: x
}, {
default: () => [n("ul", {
ref: $,
class: u.be("body"),
role: "listbox"
}, [k(b, "body", F, () => [_.value.length ? _.value.map((e, l) => W({
option: e,
index: l
})) : n("div", {
class: u.be("empty")
}, [t.emptyText || t.locale.empty])])])]
}) : n(ze, {
ref: g,
inherit: !0,
class: u.be("body"),
items: d.value,
"item-size": t.optionHeight,
"item-fixed": !0,
"use-y-bar": !0,
"id-key": "value",
"items-attrs": {
role: "listbox",
ariaLabel: t.type
},
onResize: x
}, {
default: ({
item: e,
index: l
}) => W({
option: e,
index: l
}),
empty: () => n("div", {
class: u.be("empty")
}, [t.emptyText || t.locale.empty])
});
}
function ve() {
return !t.paged && !b.footer ? null : n("div", {
ref: te,
class: u.be("footer")
}, [k(b, "footer", F, () => [n("div", {
class: u.be("pagination")
}, [n(z, E(U.value ? f.value.angleRight : f.value.angleLeft, {
class: [u.be("page-plus"), v.value <= 1 && u.bem("page-plus", "disabled")],
onClick: () => A(v.value - 1)
}), null), n(Be, {
inherit: !0,
value: v.value,
class: u.be("page-input"),
size: "small",
min: 1,
max: H.value,
onChange: A
}, null), n("span", {
style: "margin: 0 4px"
}, ["/"]), n("span", null, [H.value]), n(z, E(U.value ? f.value.angleLeft : f.value.angleRight, {
class: [u.be("page-minus"), v.value >= H.value && u.bem("page-minus", "disabled")],
onClick: () => A(v.value + 1)
}), null)])])]);
}
return () => n("div", {
ref: ne,
class: ue.value,
tabindex: 0,
onBlur: oe
}, [ce(), de(), fe(), ve()]);
}
});
export {
Je as default
};
//# sourceMappingURL=transfer-panel.mjs.map