vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
218 lines (217 loc) • 8.04 kB
JavaScript
import { defineComponent as se, ref as o, computed as v, watch as ie, onMounted as re, createElementBlock as h, openBlock as c, normalizeStyle as d, normalizeClass as S, unref as ve, createElementVNode as x, createCommentVNode as L, renderSlot as H, createTextVNode as K, toDisplayString as T, Fragment as G, renderList as E, createBlock as fe, resolveDynamicComponent as ce } from "vue";
import { useInject as de, useSlotsExist as be, useResizeObserver as ye } from "../utils/index.js";
const he = {
key: 0,
class: "tabs-prefix"
}, me = ["onClick"], pe = {
key: 1,
class: "tabs-suffix"
}, ke = /* @__PURE__ */ se({
__name: "Tabs",
props: {
items: { default: () => [] },
prefix: { default: void 0 },
suffix: { default: void 0 },
animated: { type: Boolean, default: !0 },
centered: { type: Boolean, default: !1 },
size: { default: "middle" },
type: { default: "line" },
tabGutter: { default: void 0 },
tabStyle: { default: () => ({}) },
tabPosition: { default: "top" },
contentStyle: { default: () => ({}) },
activeKey: { default: void 0 }
},
emits: ["update:activeKey", "change"],
setup(a, { emit: Y }) {
const l = a, W = o(), m = o(0), p = o(0), k = o(0), w = o(0), $ = o(), P = o(), B = o(), z = o(), C = o(), R = o(), u = o(!1), f = o(0), s = o(0), i = o(0), g = o(!1), { colorPalettes: I } = de("Tabs"), M = Y, N = be(["prefix", "suffix"]), b = v(() => l.items.findIndex((e, n) => y(e.key, n) === l.activeKey)), X = v(() => !!(N.prefix || l.prefix)), j = v(() => !!(N.suffix || l.suffix)), F = v(() => ["top", "bottom"].includes(l.tabPosition) ? u.value && s.value > 0 : u.value && i.value > 0), O = v(() => ["top", "bottom"].includes(l.tabPosition) ? u.value && s.value < f.value : u.value && i.value < f.value), q = v(() => ["top", "bottom"].includes(l.tabPosition) ? {
transform: `translate(${-s.value}px, 0)`
} : {
transform: `translate(0, ${-i.value}px)`
}), A = v(() => ["top", "bottom"].includes(l.tabPosition) ? {
marginLeft: `${l.tabGutter}px`
} : {
marginTop: `${l.tabGutter}px`
}), J = v(() => ["top", "bottom"].includes(l.tabPosition) ? {
left: `${m.value}px`,
width: `${k.value}px`
} : {
top: `${p.value}px`,
height: `${w.value}px`
}), Q = v(() => l.animated && ["top", "bottom"].includes(l.tabPosition) ? {
marginLeft: `-${100 * (b.value !== -1 ? b.value : 0)}%`
} : {}), U = v(() => l.animated && ["top", "bottom"].includes(l.tabPosition) ? {
visibility: "hidden",
height: "0px",
overflowY: "hidden"
} : {
display: "none"
});
ie(
() => l.activeKey,
() => {
D();
},
{
flush: "post"
}
), re(() => {
V();
}), ye([$, z], () => {
V();
});
function V() {
["top", "bottom"].includes(l.tabPosition) ? Z() : _();
}
function Z() {
P.value = $.value.offsetWidth, C.value = z.value.offsetWidth, C.value > P.value ? (u.value = !0, f.value = C.value - P.value, s.value = f.value) : (u.value = !1, s.value = 0), D();
}
function _() {
B.value = $.value.offsetHeight, R.value = z.value.offsetHeight, R.value > B.value ? (u.value = !0, f.value = R.value - B.value, i.value = f.value) : (u.value = !1, i.value = 0), D();
}
function D() {
["top", "bottom"].includes(l.tabPosition) ? ee() : te();
}
function ee() {
const e = b.value !== -1 ? W.value[b.value] : null;
if (e) {
if (m.value = e.offsetLeft, k.value = e.offsetWidth, u.value) {
m.value < s.value && (g.value = !0, s.value = m.value);
const n = m.value + k.value - P.value;
n > s.value && (g.value = !0, s.value = n);
}
} else
m.value = 0, k.value = 0;
}
function te() {
const e = b.value !== -1 ? W.value[b.value] : null;
if (e) {
if (p.value = e.offsetTop, w.value = e.offsetHeight, u.value) {
p.value < i.value && (g.value = !0, i.value = p.value);
const n = p.value + w.value - B.value;
n > i.value && (g.value = !0, i.value = n);
}
} else
p.value = 0, w.value = 0;
}
function y(e, n) {
return e === void 0 ? n : e;
}
function ae(e) {
M("update:activeKey", e), M("change", e);
}
function le(e) {
e.stopPropagation(), e.preventDefault(), (e.deltaX || e.deltaY) && (["top", "bottom"].includes(l.tabPosition) ? ne(e.deltaX) : oe(e.deltaY));
}
function ne(e) {
const n = e * 1;
s.value = Math.min(Math.max(s.value + n, 0), f.value);
}
function oe(e) {
const n = e * 1;
i.value = Math.min(Math.max(i.value + n, 0), f.value);
}
function ue(e, n) {
return l.activeKey !== y(e, n) ? U.value : {};
}
return (e, n) => (c(), h("div", {
class: S(["tabs-wrap", [
`tabs-${a.tabPosition} tabs-${a.size}`,
{
"tabs-card": a.type === "card"
}
]]),
style: d(`--tabs-primary-color: ${ve(I)[5]};`)
}, [
x("div", {
class: "tabs-nav-container",
style: d(a.tabStyle)
}, [
X.value ? (c(), h("div", he, [
H(e.$slots, "prefix", {}, () => [
K(T(a.prefix), 1)
], !0)
])) : L("", !0),
x("div", {
ref_key: "wrapRef",
ref: $,
class: S(["tabs-nav-wrap", {
"tabs-center": a.centered,
"before-shadow-active": F.value,
"after-shadow-active": O.value
}])
}, [
x("div", {
ref_key: "navRef",
ref: z,
class: S(["tabs-nav-list", { "nav-transition": g.value }]),
onTransitionend: n[0] || (n[0] = (t) => g.value = !1),
style: d(q.value),
onWheel: n[1] || (n[1] = (t) => u.value ? le(t) : () => !1)
}, [
(c(!0), h(G, null, E(a.items, (t, r) => (c(), h("div", {
ref_for: !0,
ref_key: "tabsRef",
ref: W,
class: S(["tab-item", {
"tab-line-active": a.type === "line" && a.activeKey === y(t.key, r),
"tab-card-active": a.type === "card" && a.activeKey === y(t.key, r),
"tab-disabled": t.disabled
}]),
style: d(r > 0 && a.tabGutter !== void 0 ? A.value : {}),
onClick: (ge) => t.disabled ? () => !1 : ae(y(t.key, r)),
key: r
}, [
H(e.$slots, "tab", {
item: t,
tab: t.tab,
key: y(t.key, r)
}, () => [
t.icon ? (c(), fe(ce(t.icon), { key: 0 })) : L("", !0),
K(" " + T(t.tab), 1)
], !0)
], 14, me))), 128)),
x("div", {
class: S(["tab-bar", {
"tab-bar-disabled": a.items[b.value]?.disabled,
"card-hidden": a.type === "card"
}]),
style: d(J.value)
}, null, 6)
], 38)
], 2),
j.value ? (c(), h("div", pe, [
H(e.$slots, "suffix", {}, () => [
K(T(a.suffix), 1)
], !0)
])) : L("", !0)
], 4),
x("div", {
class: "tabs-page-container",
style: d(a.contentStyle)
}, [
x("div", {
class: S(["tabs-content-wrap", { "tabs-content-animated": a.animated && ["top", "bottom"].includes(a.tabPosition) }]),
style: d(Q.value)
}, [
(c(!0), h(G, null, E(a.items, (t, r) => (c(), h("div", {
class: "tabs-content",
style: d(ue(t.key, r)),
key: t.key || r
}, [
H(e.$slots, "content", {
item: t,
content: t.content,
key: y(t.key, r)
}, () => [
K(T(t.content), 1)
], !0)
], 4))), 128))
], 6)
], 4)
], 6));
}
});
export {
ke as default
};