@layui/layui-vue
Version:
a component library for Vue 3 base on layui-vue
13 lines (12 loc) • 2.63 kB
JavaScript
import { defineComponent as j, openBlock as a, createElementBlock as s, normalizeClass as n, unref as e, normalizeStyle as c, createVNode as p, createCommentVNode as r, createElementVNode as M, Fragment as U, renderList as W, withModifiers as C, createBlock as T } from "vue";
import h from "../../_components/render.js";
import d from "../../icon/index.js";
import { useTabHeader as q } from "../hooks/useTabHeader.js";
import { clsPrefix as o } from "../../utils/common.js";
const A = ["onClick"], Q = j({ __name: "TabHeader", props: { defaultSlot: {}, type: {}, modelValue: {}, allowClose: { type: Boolean }, tabPosition: {}, beforeClose: { type: Function }, beforeLeave: { type: Function }, activeBarTransition: { type: Boolean } }, setup(S) {
const R = S, $ = `${o("icon-close")} ${o("unselect")} ${o("tab-close")}`, f = `${o("unselect")} ${o("tab-bar")}`, { isHorizontal: y, preRef: B, nextRef: _, ulRef: v, liSRefS: x, isShowPreNext: u, classTabHead: w, styleTabHead: H, classTabTitle: N, styleTabTitle: V, styleTabBar: P, renderTabIcon: g, renderTabTitle: z, handleChange: F, handlePreClick: k, handleNextClick: m, handleUlScroll: b, handleClose: L } = q(R);
return (i, t) => (a(), s("div", { class: n(e(w)), style: c(e(H)) }, [e(u) ? (a(), s("span", { key: 0, ref_key: "preRef", ref: B, class: n(`${f} prev`), onClick: t[0] || (t[0] = (...l) => e(k) && e(k)(...l)) }, [p(e(d), { type: e(y) ? "layui-icon-left" : "layui-icon-up" }, null, 8, ["type"])], 2)) : r("", !0), M("ul", { ref_key: "ulRef", ref: v, class: n(e(N)), style: c(e(V)), onWheel: t[1] || (t[1] = (...l) => e(b) && e(b)(...l)) }, [(a(!0), s(U, null, W(i.defaultSlot, (l, E) => (a(), s("li", { ref_for: !0, ref_key: "liSRefS", ref: x, key: l.props.id, class: n({ [e(o)("this")]: l.props.id === i.modelValue }), onClick: C((I) => e(F)(l.props.id), ["stop"]) }, [l.props.icon ? (a(), T(e(h), { key: 0, render: e(g), "tab-data": l }, null, 8, ["render", "tab-data"])) : r("", !0), p(e(h), { render: e(z), "tab-data": l }, null, 8, ["render", "tab-data"]), i.allowClose && (l.props.closable ?? 1) ? (a(), T(e(d), { key: 1, type: `${$}`, onClick: C((I) => e(L)(l.props.id, E), ["stop"]) }, null, 8, ["type", "onClick"])) : r("", !0)], 10, A))), 128)), i.type === "brief" ? (a(), s("div", { key: 0, class: n(e(o)("tab-active-bar")), style: c(e(P)) }, null, 6)) : r("", !0)], 38), e(u) ? (a(), s("span", { key: 1, ref_key: "nextRef", ref: _, class: n(`${f}`), onClick: t[2] || (t[2] = (...l) => e(m) && e(m)(...l)) }, [p(e(d), { type: e(y) ? "layui-icon-right" : "layui-icon-down" }, null, 8, ["type"])], 2)) : r("", !0)], 6));
} });
export {
Q as default
};