@aplus-frontend/ui
Version:
100 lines (99 loc) • 2.9 kB
JavaScript
import { defineComponent as v, computed as i, unref as e, createBlock as y, openBlock as o, withCtx as r, createVNode as a, createElementBlock as p, Fragment as x, renderList as B, normalizeStyle as _, createElementVNode as k } from "vue";
import { Card as w, Flex as n, Skeleton as l } from "@aplus-frontend/antdv";
import C from "@aplus-frontend/antdv/es/_util/hooks/useBreakpoint";
const E = { style: {
width: "20%"
} }, N = /* @__PURE__ */ v({
__name: "index",
props: {
active: { type: Boolean }
},
setup(S) {
const m = {
lg: !0,
md: !0,
sm: !1,
xl: !1,
xs: !1,
xxl: !1
}, u = {
xs: 2,
sm: 2,
md: 4,
lg: 4,
xl: 5,
xxl: 5
}, d = C(), f = i(() => d.value || m), g = i(() => {
const t = e(f);
return Object.keys(t).filter((c) => t[c] === !0).pop() || "md";
}), s = i(
() => u[g.value] || 4
);
return (t, c) => (o(), y(e(w), {
variant: "borderless",
style: { marginBlockEnd: "16px" }
}, {
default: r(() => [
a(e(n), {
gap: 8,
style: { marginBlockEnd: "16px" }
}, {
default: r(() => [
(o(!0), p(x, null, B(new Array(s.value).fill(null), (b, h) => (o(), p("div", {
key: h,
style: _({ width: `${100 / s.value}%` })
}, [
a(e(l), {
active: t.active,
paragraph: !1,
title: { style: { height: "24px", marginBottom: 0 } }
}, null, 8, ["active"])
], 4))), 128))
]),
_: 1
}),
a(e(n), {
gap: 8,
justify: "space-between"
}, {
default: r(() => [
a(e(n), { gap: 8 }, {
default: r(() => [
a(e(l), {
active: t.active,
paragraph: !1,
title: { style: { height: "24px", marginBottom: 0 }, width: 48 }
}, null, 8, ["active"]),
a(e(l), {
active: t.active,
paragraph: !1,
title: { style: { height: "24px", marginBottom: 0 }, width: 48 }
}, null, 8, ["active"]),
a(e(l), {
active: t.active,
paragraph: !1,
title: { style: { height: "24px", marginBottom: 0 }, width: 48 }
}, null, 8, ["active"])
]),
_: 1
}),
k("div", E, [
a(e(l), {
active: t.active,
paragraph: !1,
title: {
style: { height: "24px", marginBottom: 0 }
}
}, null, 8, ["active"])
])
]),
_: 1
})
]),
_: 1
}));
}
});
export {
N as default
};