@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
234 lines (233 loc) • 7.47 kB
JavaScript
import { defineComponent as j, useSlots as G, ref as y, computed as k, provide as J, reactive as K, toRef as Q, watch as w, onMounted as U, openBlock as d, createElementBlock as f, normalizeClass as s, createVNode as c, unref as t, withCtx as p, createElementVNode as m, renderSlot as b, createCommentVNode as h, Fragment as X, renderList as Y, createBlock as Z, createTextVNode as ee, toDisplayString as te, mergeProps as re, normalizeStyle as le } from "vue";
import "../icon/index.mjs";
import "../renderer/index.mjs";
import "../resize-observer/index.mjs";
import "../scroll/index.mjs";
import "../tab-nav-item/index.mjs";
import { useProps as oe, useNameHelper as se, useIcons as ae, emitEvent as N } from "@vexip-ui/config";
import { useDisplay as ne } from "@vexip-ui/hooks";
import { debounceMinor as ce, isNull as E } from "@vexip-ui/utils";
import { tabNavProps as ie } from "./props.mjs";
import { trackStyleMap as ue, TAB_NAV_STATE as de } from "./symbol.mjs";
import M from "../resize-observer/resize-observer.mjs";
import g from "../renderer/renderer.mjs";
import fe from "../scroll/scroll.vue2.mjs";
import pe from "./tab-nav-item.vue2.mjs";
import me from "../icon/icon.mjs";
const Me = /* @__PURE__ */ j({
name: "TabNav",
__name: "tab-nav",
props: ie,
emits: ["update:active"],
setup(P, { expose: V, emit: B }) {
const r = oe("tabNav", P, {
active: {
default: null,
static: !0
},
card: !1,
options: {
default: () => [],
static: !0
},
align: "left",
placement: "top",
closable: !1,
showAdd: !1,
slots: () => ({})
}), F = B, _ = G(), l = se("tab-nav"), S = ae(), i = y(r.active), v = y(0), x = y(0), u = /* @__PURE__ */ new Set(), $ = ne(a), z = y(), I = k(() => ({
[l.b()]: !0,
[l.bs("vars")]: !0,
[l.bm("inherit")]: r.inherit,
[l.bm(`align-${r.align}`)]: !0,
[l.bm(r.placement)]: !0,
[l.bm("card")]: r.card
})), L = k(() => {
const [e, n] = ue[r.placement];
return {
[e]: `${v.value}px`,
[n]: `${x.value}px`
};
}), T = k(() => r.options.map((e) => typeof e == "string" || typeof e == "number" ? { label: e } : e)), R = k(() => r.placement === "top" || r.placement === "bottom" ? "horizontal-exact" : "vertical"), A = ce(() => {
const e = u.size;
Array.from(u).forEach((n, o) => {
n.index = o + 1, n.total = e, E(n.label) && (n.label = o + 1);
}), u.size >= 1 && q() && (i.value = Array.from(u)[0].label);
});
J(
de,
K({
currentActive: i,
closable: Q(r, "closable"),
increaseItem: D,
decreaseItem: H,
handleActive: O,
handleClose: W,
refreshLabels: A
})
), w(
() => r.active,
(e) => {
i.value = e, a();
}
), w(
() => r.placement,
() => {
requestAnimationFrame(a);
}
), U(a), V({
items: T,
wrapper: $,
scroll: z,
updateMarkerPosition: a,
handleAdd: C
});
function q() {
return E(i.value) || i.value === "";
}
function D(e) {
u.add(e), A();
}
function H(e) {
u.delete(e), A();
}
function O(e) {
i.value = e, a(), F("update:active", e), N(r.onChange, e);
}
function C() {
N(r.onAdd);
}
function W(e) {
N(r.onClose, e), requestAnimationFrame(a);
}
function a() {
const e = Array.from(u).find((n) => n.label === i.value);
e != null && e.el ? r.placement === "top" || r.placement === "bottom" ? (v.value = e.el.offsetLeft, x.value = e.el.offsetWidth) : (v.value = e.el.offsetTop, x.value = e.el.offsetHeight) : (v.value = 0, x.value = 0);
}
return (e, n) => (d(), f("div", {
ref_key: "wrapper",
ref: $,
class: s(I.value),
tabindex: "-1"
}, [
c(t(M), { "on-resize": a }, {
default: p(() => [
m("div", {
class: s([t(l).be("extra"), t(l).bem("extra", "prefix")])
}, [
_.prefix || t(r).slots.prefix ? (d(), f("div", {
key: 0,
class: s(t(l).be("prefix"))
}, [
b(e.$slots, "prefix", {}, () => [
c(t(g), {
renderer: t(r).slots.prefix
}, null, 8, ["renderer"])
])
], 2)) : h("", !0)
], 2)
]),
_: 3
}),
c(t(fe), {
ref_key: "scroll",
ref: z,
class: s(t(l).be("scroll")),
mode: R.value,
"delta-x": 40,
"delta-y": 40,
"scroll-tag": "ul",
"scroll-class": t(l).be("list"),
"scroll-attrs": { role: "tablist" }
}, {
default: p(() => [
b(e.$slots, "default", {}, () => [
(d(!0), f(X, null, Y(T.value, (o) => (d(), Z(t(pe), {
key: o.label,
label: o.label,
icon: o.icon,
disabled: o.disabled,
closable: o.closable,
onToggle: o.onToggle
}, {
default: p(() => [
ee(te(o.content || o.label), 1)
]),
_: 2
}, 1032, ["label", "icon", "disabled", "closable", "onToggle"]))), 128))
]),
t(r).showAdd || _.add || t(r).slots.add ? (d(), f("li", {
key: 0,
class: s(t(l).be("item")),
role: "none"
}, [
m("div", {
class: s(t(l).be("pad"))
}, null, 2),
m("button", {
type: "button",
class: s(t(l).be("add")),
onClick: C
}, [
b(e.$slots, "add", {}, () => [
c(t(g), {
renderer: t(r).slots.add
}, {
default: p(() => [
c(t(me), re(t(S).plus, {
scale: +(t(S).plus.scale || 1) * 1.2
}), null, 16, ["scale"])
]),
_: 1
}, 8, ["renderer"])
])
], 2)
], 2)) : h("", !0),
t(r).card ? h("", !0) : (d(), f("div", {
key: 1,
class: s(t(l).be("track")),
role: "none",
style: le(L.value)
}, [
b(e.$slots, "marker", {}, () => [
c(t(g), {
renderer: t(r).slots.marker
}, {
default: p(() => [
m("div", {
class: s(t(l).be("marker"))
}, null, 2)
]),
_: 1
}, 8, ["renderer"])
])
], 6))
]),
_: 3
}, 8, ["class", "mode", "scroll-class"]),
c(t(M), { "on-resize": a }, {
default: p(() => [
m("div", {
class: s([t(l).be("extra"), t(l).bem("extra", "suffix")])
}, [
_.suffix || t(r).slots.suffix ? (d(), f("div", {
key: 0,
class: s(t(l).be("suffix"))
}, [
b(e.$slots, "suffix", {}, () => [
c(t(g), {
renderer: t(r).slots.suffix
}, null, 8, ["renderer"])
])
], 2)) : h("", !0)
], 2)
]),
_: 3
})
], 2));
}
});
export {
Me as default
};
//# sourceMappingURL=tab-nav.vue2.mjs.map