@aplus-frontend/ui
Version:
81 lines (80 loc) • 2.23 kB
JavaScript
import { defineComponent as h, computed as l, unref as t, createElementBlock as a, openBlock as n, Fragment as p, createElementVNode as s, createVNode as r, normalizeStyle as d, renderList as v } from "vue";
import { Skeleton as m } from "@aplus-frontend/antdv";
import k from "@aplus-frontend/antdv/es/_util/hooks/useBreakpoint";
import { ApSkeletonLine as S } from "../line/index.mjs";
const _ = { style: {
flex: 3,
paddingInlineStart: "32px"
} }, A = /* @__PURE__ */ h({
name: "ApSkeletonTableItem",
__name: "item",
props: {
active: { type: Boolean },
header: { type: Boolean, default: !1 }
},
setup(B) {
const u = {
lg: !0,
md: !0,
sm: !1,
xl: !1,
xs: !1,
xxl: !1
}, c = {
xs: 1,
sm: 2,
md: 3,
lg: 3,
xl: 3,
xxl: 4
}, f = k(), x = l(() => f.value || u), g = l(() => {
const e = t(x);
return Object.keys(e).filter((i) => e[i] === !0)[0] || "md";
}), y = l(
() => c[g.value] || 3
);
return (e, i) => (n(), a(p, null, [
s("div", {
style: d({
display: "flex",
background: e.header ? "rgba(0,0,0,0.02)" : "none",
padding: "20px 8px"
})
}, [
(n(!0), a(p, null, v(new Array(y.value).fill(null), (b, o) => (n(), a("div", {
key: o,
style: d({
flex: 1,
paddingInlineStart: e.header && o === 0 ? "8px" : "20px",
paddingInlineEnd: "32px"
})
}, [
r(t(m), {
active: e.active,
paragraph: !1,
title: {
style: {
margin: 0,
height: "24px",
width: e.header ? "75px" : "100%"
}
}
}, null, 8, ["active", "title"])
], 4))), 128)),
s("div", _, [
r(t(m), {
active: e.active,
paragraph: !1,
title: {
style: { margin: 0, height: "24px", width: e.header ? "75px" : "100%" }
}
}, null, 8, ["active", "title"])
])
], 4),
r(t(S), { style: { padding: "0px 0px" } })
], 64));
}
});
export {
A as default
};