@aplus-frontend/ui
Version:
261 lines (260 loc) • 8.62 kB
JavaScript
import { defineComponent as _, useSlots as ee, ref as G, useModel as te, watch as le, computed as s, createVNode as a, Fragment as f, createElementBlock as B, openBlock as n, mergeProps as oe, createCommentVNode as b, createElementVNode as ne, normalizeStyle as z, normalizeClass as v, unref as x, createBlock as p, renderSlot as P, resolveDynamicComponent as y, withCtx as D, mergeModels as re } from "vue";
import { Spin as ae, Tooltip as se } from "@aplus-frontend/antdv";
import { QuestionCircleOutlined as ie } from "@ant-design/icons-vue";
import "../../../config-provider/index.mjs";
import { mergeClass as C } from "../../../editable-table/utils.mjs";
import de from "@aplus-frontend/antdv/es/_util/hooks/useBreakpoint";
import { IconApAdFillDown as ue } from "@aplus-frontend/icon";
import { useNamespace as ce } from "../../../config-provider/hooks/use-namespace.mjs";
const he = /* @__PURE__ */ _({
name: "ApProCard",
__name: "index",
props: /* @__PURE__ */ re({
headStyle: {},
bodyStyle: {},
actionsStyle: {},
headerBordered: {
type: Boolean,
default: !1
},
title: {
type: [Object, String, Number, Boolean, null, Array]
},
tooltip: {
type: [Object, String, Number, Boolean, null, Array]
},
extra: {
type: [Object, String, Number, Boolean, null, Array]
},
layout: {},
type: {},
direction: {},
wrap: {
type: Boolean,
default: !1
},
loading: {
type: [Boolean, Object, String, Number, null, Array]
},
colSpan: {},
colStyle: {},
gutter: {
default: 0
},
actions: {
type: [Object, String, Number, Boolean, null, Array]
},
split: {},
bordered: {
type: Boolean,
default: !1
},
hoverable: {
type: Boolean,
default: !1
},
ghost: {
type: Boolean,
default: !1
},
collapsible: {
type: Boolean,
default: !1
},
defaultCollapsed: {
type: Boolean,
default: !1
},
collapsed: {
type: Boolean
},
collapsibleIconRender: {},
boxShadow: {
type: Boolean,
default: !1
}
}, {
collapsed: {
type: Boolean,
default: void 0
},
collapsedModifiers: {}
}),
emits: ["update:collapsed"],
setup(j) {
const t = j, i = ee(), m = G(t.defaultCollapsed), M = te(j, "collapsed");
le(() => M.value, (e) => {
e !== void 0 && (m.value = e);
}, {
immediate: !0
});
const R = () => {
m.value = !m.value;
}, {
b: d
} = ce("pro-card"), $ = ["xxxl", "xxl", "xl", "lg", "md", "sm", "xs"], E = de(), k = (e, l) => e ? l : {}, V = (e) => {
const l = [0, 0];
return (Array.isArray(e) ? e : [e, 0]).forEach((o, c) => {
if (typeof o == "object")
for (let u = 0; u < $.length; u += 1) {
const h = $[u];
if ({
lg: !0,
md: !0,
sm: !0,
xl: !1,
xs: !1,
xxl: !1,
xxxl: !1,
...E?.value
}[h] && o[h] !== void 0) {
l[c] = o[h];
break;
}
}
else
l[c] = o || 0;
}), l;
}, F = (e) => {
let l = e;
if (typeof e == "object")
for (let o = 0; o < $.length; o += 1) {
const c = $[o];
if ({
lg: !0,
md: !0,
sm: !0,
xl: !1,
xs: !1,
xxl: !1,
xxxl: !1,
...E?.value
}?.[c] && e?.[c] !== void 0) {
l = e[c];
break;
}
}
const r = k(typeof l == "string" && /\d%|\dpx/i.test(l), {
width: l,
flexShrink: 0
});
return {
span: l,
colSpanStyle: r
};
}, H = s(() => V(t.gutter)), A = G(!1), I = (e) => {
A.value = e;
}, Q = s(() => a(f, null, [t.title || i.title?.()])), T = s(() => a(f, null, [t.tooltip])), q = s(() => a(f, null, [t.extra || i.extra?.()])), J = s(() => a(f, null, [t.actions || i.actions?.()])), K = s(() => t.loading === !0 ? a(ae, {
style: {
width: "100%",
height: "100%",
display: "flex",
alignItems: "center",
justifyContent: "center"
}
}, null) : a(f, null, [t.loading])), g = s(() => t.collapsible && M.value === void 0), L = () => t.collapsibleIconRender ? t.collapsibleIconRender?.({
collapsed: m.value
}) : a(f, null, [a(ue, {
class: d("collapsible-icon"),
style: {
transform: m.value ? "rotate(-90deg)" : "rotate(0deg)"
}
}, null)]), O = (e, l = []) => {
if (e?.type === Symbol.for("v-fgt")) {
const r = Array.isArray(e?.children) ? e?.children : [e?.children];
if (r?.length)
for (let o = 0; o < r.length; o++)
r?.[o] && O(r?.[o], l);
} else
e && l.push(e);
return l;
}, U = () => {
const e = i.default?.();
return I(!1), a(f, null, [e?.reduce((l, r) => {
const o = O(r);
return [...l, ...o];
}, [])?.filter((l) => l.type !== Symbol.for("v-cmt"))?.map((l, r, o) => {
if (l && typeof l == "object" && "type" in l && l.type?.isProCard === !0) {
I(!0);
const c = l?.props?.colSpan || l?.props?.["col-span"] || {}, {
span: u,
colSpanStyle: h
} = F(c), S = d("col"), Z = C(`${S}`, [typeof u == "number" && u >= 0 && u <= 24 ? `${S}-span-${u}` : void 0, t.split === "horizontal" && r !== o.length - 1 ? `${S}-split-horizontal` : void 0, t.split === "vertical" && r !== o.length - 1 ? `${S}-split-vertical` : void 0].filter(Boolean)), [w, N] = H.value;
return a("div", {
class: Z,
style: {
...h,
...k(w > 0, {
paddingInlineStart: `${w / 2}px`,
paddingInlineEnd: `${w / 2}px`
}),
...k(N > 0, {
paddingBlockStart: `${N / 2}px`,
paddingBlockEnd: `${N / 2}px`
}),
...t.colStyle
}
}, [l]);
}
return l;
})]);
}, W = s(() => {
const e = d();
return C(`${e}`, [t.bordered ? `${e}-border` : void 0, t.boxShadow ? `${e}-box-shadow` : void 0, A.value ? `${e}-contain-card` : void 0, t.loading ? `${e}-loading` : void 0, t.split === "vertical" || t.split === "horizontal" ? `${e}-split` : void 0, t.ghost ? `${e}-ghost` : void 0, t.hoverable ? `${e}-hoverable` : void 0, t.type ? `${e}-type-${t.type}` : void 0, m.value ? `${e}-collapsed` : void 0].filter(Boolean));
}), X = s(() => {
const e = d("header");
return C(`${e}`, [t.headerBordered || t.type === "inner" ? `${e}-border` : void 0, g.value ? `${e}-collapsible` : void 0].filter(Boolean));
}), Y = s(() => {
const e = d("body");
return C(`${e}`, [t.layout === "center" ? `${e}-center` : void 0, t.split === "horizontal" || t.direction === "column" ? `${e}-direction-column` : void 0, t.wrap && A.value ? `${e}-wrap` : void 0].filter(Boolean));
});
return (e, l) => (n(), B("div", oe({
class: W.value
}, {
...e.$attrs
}), [t.title || i.title || t.extra || i.extra || g.value ? (n(), B("div", {
key: 0,
class: v(X.value),
style: z({
...t.headStyle
}),
onClick: l[0] || (l[0] = () => {
g.value && R();
})
}, [t.title || i.title || g.value ? (n(), B("div", {
key: 0,
class: v(x(d)("header-title"))
}, [g.value ? (n(), p(y(L()), {
key: 0
})) : b("", !0), P(e.$slots, "title", {}, () => [(n(), p(y(Q.value)))]), t.tooltip ? (n(), p(x(se), {
key: 1
}, {
title: D(() => [(n(), p(y(T.value)))]),
default: D(() => [a(x(ie), {
class: v(x(d)("header-title-tooltip"))
}, null, 8, ["class"])]),
_: 1
})) : b("", !0)], 2)) : b("", !0), t.extra || i.extra ? (n(), B("div", {
key: 1,
class: v(x(d)("header-extra"))
}, [P(e.$slots, "extra", {}, () => [(n(), p(y(q.value)))])], 2)) : b("", !0)], 6)) : b("", !0), ne("div", {
class: v(Y.value),
style: z({
...t.bodyStyle
})
}, [t.loading ? (n(), p(y(K.value), {
key: 0
})) : (n(), p(y(U()), {
key: 1
}))], 6), t.actions || i.actions ? (n(), B("div", {
key: 1,
class: v(x(d)("actions")),
style: z({
...t.actionsStyle
})
}, [(n(), p(y(J.value)))], 6)) : b("", !0)], 16));
}
});
export {
he as default
};