@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
70 lines (69 loc) • 2.22 kB
JavaScript
import { defineComponent as z, useSlots as _, inject as h, ref as u, computed as i, watch as r, reactive as L, toRef as t, onBeforeUnmount as P, createElementBlock as T, createCommentVNode as A, openBlock as B, normalizeClass as C, renderSlot as $ } from "vue";
import { useProps as k, useNameHelper as E, emitEvent as N } from "@vexip-ui/config";
import { tabPanelProps as R } from "./props.mjs";
import { TABS_STATE as g } from "./symbol.mjs";
const I = ["aria-hidden"], V = /* @__PURE__ */ z({
name: "TabPanel",
__name: "tab-panel",
props: R,
setup(m) {
const a = k("tabPanel", m, {
lazy: null,
lazyLoad: null
}), p = _(), e = h(g, null), v = E("tabs"), o = u(!1), n = u(a.label), c = u(!1), d = i(() => a.lazy ?? (e == null ? void 0 : e.lazy) ?? !1), b = i(() => a.lazyLoad ?? (e == null ? void 0 : e.lazyLoad) ?? !1), f = i(() => {
const l = v.be("panel");
return {
[l]: !0,
[`${l}--disabled`]: a.disabled,
[`${l}--lazy`]: d.value,
[`${l}--active`]: !a.disabled && o.value
};
});
if (r(
() => a.label,
(l) => {
n.value = l, e == null || e.refreshLabels();
}
), r(o, (l) => {
N(a.onToggle, l);
}), e) {
const l = L({
label: n,
name: t(a, "name"),
icon: t(a, "icon"),
disabled: t(a, "disabled"),
closable: t(a, "closable"),
labelRenderer: null
});
r(
() => p.label,
(s) => {
l.labelRenderer = s ? (y) => s(y) : null;
},
{ immediate: !0 }
), r(n, () => {
o.value = n.value === e.currentActive;
}), r(
() => e.currentActive,
(s) => {
o.value = n.value === s, !c.value && o.value && (c.value = !0);
},
{ immediate: !0 }
), e.increaseItem(l), P(() => {
e.decreaseItem(l);
});
}
return (l, s) => !(d.value || b.value && !c.value) || o.value ? (B(), T("div", {
key: 0,
class: C(f.value),
role: "tabpanel",
"aria-hidden": !o.value
}, [
$(l.$slots, "default")
], 10, I)) : A("", !0);
}
});
export {
V as default
};
//# sourceMappingURL=tab-panel.vue2.mjs.map