@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
271 lines (270 loc) • 8.66 kB
JavaScript
import { defineComponent as K, ref as V, watch as U, onMounted as G, onBeforeUnmount as J, createElementBlock as $, openBlock as f, normalizeClass as y, unref as a, createVNode as H, withCtx as N, renderSlot as z, createBlock as b, createCommentVNode as E, createElementVNode as L, withModifiers as Q, createTextVNode as W, toDisplayString as X, normalizeProps as C, mergeProps as m, Fragment as Y } from "vue";
import "../checkbox/index.mjs";
import "../icon/index.mjs";
import "../option/index.mjs";
import "../virtual-list/index.mjs";
import { useNameHelper as Z, useIcons as x } from "@vexip-ui/config";
import { useRtl as _, useModifier as ee } from "@vexip-ui/hooks";
import { decide as le, boundRange as te } from "@vexip-ui/utils";
import ae from "../virtual-list/virtual-list.mjs";
import ne from "../option/option.vue2.mjs";
import oe from "../checkbox/checkbox.vue2.mjs";
import g from "../icon/icon.mjs";
const se = ["aria-labelledby"], ge = /* @__PURE__ */ K({
name: "CascaderPanel",
__name: "cascader-panel",
props: {
options: {
type: Array,
default: () => []
},
openedId: {
type: Number,
default: null
},
values: {
type: Array,
default: () => []
},
ready: {
type: Boolean,
default: !1
},
multiple: {
type: Boolean,
default: !1
},
checkIcon: {
type: Object,
default: null
},
isAsync: {
type: Boolean,
default: !1
},
merged: {
type: Boolean,
default: !1
},
noCascaded: {
type: Boolean,
default: !1
},
visible: {
type: Boolean,
default: !1
},
labeledBy: {
type: String,
default: void 0
}
},
emits: ["select", "check", "hover", "open", "back", "close"],
setup(c, { expose: R, emit: D }) {
const n = c, p = D, u = Z("cascader"), h = x(), { isRtl: O } = _(), s = V(-1), i = V(), { target: P } = ee({
passive: !1,
onKeyDown: (e, t) => {
if (t.escape) {
p("close");
return;
}
le(
[
[
() => t.up || t.down,
() => {
if (s.value < 0) {
s.value = n.options.findIndex(v), s.value < 0 && (s.value = 0);
return;
}
s.value = te(
F(s.value + (t.up ? -1 : 1), t.up ? -1 : 1),
0,
n.options.length - 1
), j(s.value, t.up ? "top" : "bottom");
}
],
[
() => t.left || t.right,
() => {
if (t.right) {
const l = n.options[s.value];
l && d(l) && p("open", l);
} else
p("back");
}
],
[
() => t.enter || t.space,
() => {
e.stopPropagation();
const l = n.options[s.value];
l && (n.multiple ? w(l) : M(l, s.value));
}
]
],
{
beforeMatchAny: () => e.preventDefault(),
afterMatchAny: t.resetAll
}
);
}
});
let B = 0, I;
U([() => n.ready, () => n.options], () => {
var e;
requestAnimationFrame(T), n.ready ? ((e = i.value) == null || e.refresh(), s.value = n.options.findIndex(v)) : s.value = -1;
}), G(() => {
requestAnimationFrame(T);
}), J(A), R({ currentHitting: s });
function d(e) {
var t;
return !!(e.hasChild || (t = e.children) != null && t.length);
}
function v(e) {
return d(e) && e.id === n.openedId || n.values.includes(e.fullValue);
}
function k(e) {
return e.disabled || !n.merged && n.multiple && n.isAsync && d(e) && !e.childrenLoaded;
}
function M(e, t) {
e.disabled || (s.value = t, n.multiple || n.noCascaded ? d(e) ? p("select", e) : w(e) : p("select", e));
}
function w(e) {
!k(e) && p("check", e);
}
function q(e) {
clearTimeout(I), I = setTimeout(() => {
!e.disabled && p("hover", e);
}, 100);
}
function A() {
clearTimeout(I);
}
function T() {
var t;
const e = (t = i.value) == null ? void 0 : t.wrapper;
if (e) {
const l = getComputedStyle(e), o = parseInt(l.paddingTop), r = parseInt(l.paddingBottom);
B = e.offsetHeight - o - r;
}
}
function S(e, t) {
var o;
const l = n.options;
for (t = t / Math.abs(t); (o = l[e]) != null && o.disabled && (e += t, !(e < 0 || e >= l.length)); )
;
return e;
}
function F(e, t = 1) {
var o;
const l = n.options;
return (o = l[e]) != null && o.disabled && (e = S(e, t), (t > 0 ? e >= l.length : e < 0) && (e = S(e, -t), (t > 0 ? e < 0 : e >= l.length) && (e = -1))), e;
}
function j(e, t) {
const l = n.options[e], o = 32;
if (!(!l || !i.value))
if (t === "bottom") {
const r = (e + 1) * o;
i.value.scrollOffset + B < r && i.value.scrollTo(r - B);
} else {
const r = e * o;
i.value.scrollOffset > r && i.value.scrollTo(r);
}
}
return (e, t) => (f(), $("div", {
ref_key: "wrapper",
ref: P,
class: y(a(u).be("panel")),
tabindex: "-1",
"aria-labelledby": c.labeledBy,
onMouseleave: A
}, [
H(a(ae), {
ref_key: "list",
ref: i,
inherit: "",
items: c.options,
"item-size": 32,
height: "100%",
"id-key": "id",
"items-attrs": {
class: [
a(u).be("options"),
c.multiple ? a(u).bem("options", "multiple") : null,
c.noCascaded ? a(u).bem("options", "no-cascaded") : null
],
role: "listbox",
ariaMultiselectable: c.multiple
},
onResize: T
}, {
default: N(({ item: l, index: o }) => [
H(a(ne), {
class: y({
[a(u).ns("option--error")]: l.error
}),
value: l.value,
label: l.label,
disabled: l.disabled,
selected: v(l),
hitting: o === s.value,
onSelect: (r) => M(l, o),
onMouseenter: (r) => q(l)
}, {
default: N(() => [
z(e.$slots, "default", {
option: l,
index: o,
selected: v(l),
canCheck: k(l),
hasChild: d(l)
}, () => [
c.multiple || c.noCascaded ? (f(), b(a(oe), {
key: 0,
inherit: "",
class: y(a(u).be("checkbox")),
checked: l.checked,
control: d(l),
partial: l.partial,
disabled: k(l),
size: "small",
onClick: Q((r) => w(l), ["prevent", "stop"])
}, null, 8, ["class", "checked", "control", "partial", "disabled", "onClick"])) : E("", !0),
L("span", {
class: y(a(u).be("label"))
}, [
z(e.$slots, "label", {
option: l,
index: o,
selected: v(l),
canCheck: k(l),
hasChild: d(l),
handleSelect: () => M(l, o)
}, () => [
W(X(l.label), 1)
])
], 2),
L("div", {
class: y(a(u).be("icon"))
}, [
l.loading ? (f(), b(a(g), C(m({ key: 0 }, a(h).loading)), null, 16)) : l.error ? (f(), b(a(g), C(m({ key: 1 }, a(h).refresh)), null, 16)) : d(l) ? (f(), $(Y, { key: 2 }, [
a(O) ? (f(), b(a(g), C(m({ key: 0 }, a(h).angleLeft)), null, 16)) : (f(), b(a(g), C(m({ key: 1 }, a(h).angleRight)), null, 16))
], 64)) : !c.multiple && !c.noCascaded && c.checkIcon && c.values.includes(l.fullValue) ? (f(), b(a(g), m({ key: 3 }, a(h).check, {
icon: c.checkIcon || a(h).check.icon
}), null, 16, ["icon"])) : E("", !0)
], 2)
])
]),
_: 2
}, 1032, ["class", "value", "label", "disabled", "selected", "hitting", "onSelect", "onMouseenter"])
]),
_: 3
}, 8, ["items", "items-attrs"])
], 42, se));
}
});
export {
ge as default
};
//# sourceMappingURL=cascader-panel.vue2.mjs.map