@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
104 lines (103 loc) • 3.28 kB
JavaScript
import { defineComponent as V, inject as g, ref as a, computed as v, watch as c, reactive as x, onBeforeUnmount as E, createElementBlock as _, openBlock as u, normalizeClass as r, unref as s, createElementVNode as h, withKeys as P, withModifiers as C, createBlock as z, createCommentVNode as k, renderSlot as K, createTextVNode as $, toDisplayString as D, createVNode as L, mergeProps as N } from "vue";
import "../icon/index.mjs";
import { useProps as j, createIconProp as H, useNameHelper as M, useIcons as U, emitEvent as q } from "@vexip-ui/config";
import { isDefined as F } from "@vexip-ui/utils";
import { tabNavItemProps as G } from "./props.mjs";
import { TAB_NAV_STATE as J } from "./symbol.mjs";
import y from "../icon/icon.mjs";
const O = ["aria-disabled", "aria-setsize", "aria-posinset", "onKeydown"], oe = /* @__PURE__ */ V({
name: "TabNavItem",
__name: "tab-nav-item",
props: G,
setup(I) {
const o = j("tabNavItem", I, {
label: {
static: !0,
default: null
},
disabled: !1,
icon: H(),
closable: null
}), e = g(J, null), t = M("tab-nav"), w = U(), i = a(!1), n = a(o.label), d = a(0), m = a(0), p = a(), A = v(() => {
const l = t.be("content");
return {
[l]: !0,
[`${l}--disabled`]: o.disabled,
[`${l}--active`]: !o.disabled && i.value
};
}), T = v(() => F(o.closable) ? o.closable : (e == null ? void 0 : e.closable) ?? !1);
if (c(
() => o.label,
(l) => {
n.value = l, e == null || e.refreshLabels();
}
), c(i, (l) => {
q(o.onToggle, l);
}), e) {
const l = x({
el: p,
label: n,
index: d,
total: m
});
c(n, () => {
i.value = n.value === e.currentActive;
}), c(
() => e.currentActive,
(f) => {
i.value = n.value === f;
},
{ immediate: !0 }
), e.increaseItem(l), E(() => {
e.decreaseItem(l);
});
}
function b() {
o.disabled || e == null || e.handleActive(n.value);
}
function B() {
o.disabled || e == null || e.handleClose(n.value);
}
return (l, f) => (u(), _("li", {
ref_key: "wrapper",
ref: p,
class: r(s(t).be("item")),
role: "none"
}, [
h("div", {
class: r(s(t).be("pad"))
}, null, 2),
h("div", {
class: r(A.value),
role: "tab",
tabindex: "0",
"aria-disabled": s(o).disabled,
"aria-setsize": m.value || void 0,
"aria-posinset": d.value || void 0,
onClick: b,
onKeydown: P(C(b, ["stop"]), ["enter"])
}, [
s(o).icon ? (u(), z(s(y), {
key: 0,
class: r(s(t).be("icon")),
icon: s(o).icon
}, null, 8, ["class", "icon"])) : k("", !0),
K(l.$slots, "default", {}, () => [
$(D(s(o).label), 1)
]),
T.value ? (u(), _("button", {
key: 1,
type: "button",
class: r(s(t).be("close")),
onClick: C(B, ["stop"])
}, [
L(s(y), N(s(w).close, { label: "close" }), null, 16)
], 2)) : k("", !0)
], 42, O)
], 2));
}
});
export {
oe as default
};
//# sourceMappingURL=tab-nav-item.vue2.mjs.map