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