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