@wetspace/pro-components
Version:
::: tip 基本介绍
139 lines (138 loc) • 4.91 kB
JavaScript
import { defineComponent as F, useSlots as M, shallowRef as y, ref as O, computed as i, h as R, provide as U, onMounted as A, openBlock as a, createElementBlock as o, normalizeClass as n, unref as t, createElementVNode as f, normalizeStyle as L, createBlock as u, withCtx as m, Fragment as p, renderList as v, createTextVNode as G, toDisplayString as S, createCommentVNode as d, renderSlot as b, resolveDynamicComponent as _, mergeProps as J, withDirectives as Q } from "vue";
import { useNamespace as W, ElLoading as X, ElBreadcrumb as Y, ElBreadcrumbItem as Z, ElTabs as ee, ElTabPane as te } from "element-plus";
import { wetProPageContainerProps as ae } from "./types.mjs";
import { useElementBounding as $ } from "../../node_modules/.pnpm/@vueuse_core@10.11.1_vue@3.5.12_typescript@5.4.2_/node_modules/@vueuse/core/index.mjs";
import { SymbolState as re } from "./symbol.mjs";
const se = { key: 0 }, ce = /* @__PURE__ */ F({
__name: "index",
props: ae,
emits: ["update:loading", "update:tabKey", "update:status"],
setup(C, { expose: B, emit: T }) {
const H = M(), g = y(), k = y(), s = W("pro-page-container"), K = X.directive, e = C, x = T, c = y(!1), w = O({}), N = i(() => e.status), V = i(() => c.value ? c.value : e.loading), { height: q } = $(g), { width: E } = $(k), P = i(() => e.tabList && e.tabList.length !== 0), D = i(() => {
var l;
return P.value && !((l = e.tabProps) != null && l.type);
}), z = (l) => {
x("update:tabKey", l);
}, I = (l) => {
x("update:status", Object.assign(e.status, l));
}, j = i(() => R("div", {
class: s.m()
}, {
default() {
return e.extra;
}
})), h = async () => {
if (c.value = !0, e.request)
try {
w.value = await e.request();
} catch (l) {
console.error(l);
}
c.value = !1;
};
return U(re, {
pageInfo: w,
pageStatus: N,
refresh: h,
setPageStatus: I
}), A(() => {
h();
}), B({
refresh: h
}), (l, le) => (a(), o("div", {
class: n([t(s).b()])
}, [
f("div", {
ref_key: "header",
ref: g,
style: L({
width: t(E) ? `${t(E)}px` : "auto"
}),
class: n([t(s).e("header"), t(s).is("fixed", e.fixedHeader)])
}, [
e.breadcrumb ? (a(), u(t(Y), { key: 0 }, {
default: m(() => [
(a(!0), o(p, null, v(e.breadcrumb, (r) => (a(), u(t(Z), {
key: r.path,
to: { path: r.path }
}, {
default: m(() => [
G(S(r.name), 1)
]),
_: 2
}, 1032, ["to"]))), 128))
]),
_: 1
})) : d("", !0),
b(l.$slots, "header", {}, () => [
e.title || e.extra && e.extra.length !== 0 ? (a(), o("div", {
key: 0,
class: n([t(s).e("default-header"), t(s).is("tabs", D.value), t(s).is("fixed", e.fixedHeader)])
}, [
f("h2", null, S(e.title), 1),
f("div", null, [
(a(), u(_(j.value)))
])
], 2)) : d("", !0)
]),
P.value ? (a(), u(t(ee), J({ key: 1 }, e.tabProps, {
style: { width: "100%" },
"model-value": l.tabKey,
"onUpdate:modelValue": z
}), {
default: m(() => [
(a(!0), o(p, null, v(e.tabList, (r) => (a(), u(t(te), {
key: r.key,
name: r.key,
label: r.tab,
closable: r.closable,
disabled: r.disabled
}, null, 8, ["name", "label", "closable", "disabled"]))), 128))
]),
_: 1
}, 16, ["model-value"])) : d("", !0)
], 6),
e.fixedHeader ? (a(), o("div", {
key: 0,
ref_key: "shadowheader",
ref: k,
style: L({
height: `${t(q)}px`,
flex: "0 0 auto"
})
}, null, 4)) : d("", !0),
Q((a(), o("div", {
class: n([
t(s).e("body"),
t(s).is("header-fixed", e.fixedHeader),
t(s).is("full", e.fill)
])
}, [
f("div", {
class: n([t(s).e("body-innder"), t(s).is("full", e.fill)])
}, [
(a(!0), o(p, null, v(e.tabList, (r) => (a(), o(p, {
key: r.key
}, [
r.key === e.tabKey ? (a(), o("div", se, [
r.children ? (a(), u(_(r.children), { key: 0 })) : d("", !0),
b(l.$slots, r.key)
])) : d("", !0)
], 64))), 128)),
b(l.$slots, "default")
], 2)
], 2)), [
[t(K), V.value]
]),
t(H).footer ? (a(), o("div", {
key: 1,
class: n([t(s).e("footer"), t(s).is("header-fixed", e.fixedHeader)])
}, [
b(l.$slots, "footer")
], 2)) : d("", !0)
], 2));
}
});
export {
ce as default
};