ant-design-x-vue-next
Version:
Ant Design X for Vue — community continuation aligned with @ant-design/x
66 lines (65 loc) • 1.97 kB
JavaScript
import { defineComponent as g, computed as t, createVNode as i, mergeProps as x } from "vue";
import { Flex as P, Spin as v } from "ant-design-vue";
import { b as r } from "../../chunks/module-chunk.mjs";
import _ from "../icons/ImageIcon.mjs";
import C from "./usePercent.mjs";
const I = /* @__PURE__ */ g({
name: "AXFileCardImageLoading",
__name: "ImageLoading",
props: {
prefixCls: null,
style: null,
className: null,
spinProps: null
},
setup(l) {
const e = l, o = t(() => {
var n;
const s = ((n = e.spinProps) == null ? void 0 : n.size) ?? "middle";
return s === "middle" || s === "medium" ? "default" : s;
}), p = t(() => {
var s;
return ((s = e.spinProps) == null ? void 0 : s.showText) !== !1;
}), a = t(() => {
var s;
return typeof ((s = e.spinProps) == null ? void 0 : s.percent) > "u" ? "auto" : e.spinProps.percent;
}), [c, m] = C(!0, a), u = t(() => {
var s, n;
return ((s = e.spinProps) == null ? void 0 : s.icon) ?? i(_, {
color: "rgba(0,0,0,.45)",
size: ((n = e.spinProps) == null ? void 0 : n.size) || "middle"
}, null);
}), d = t(() => {
const {
showText: s,
icon: n,
percent: z,
size: $,
...f
} = e.spinProps || {};
return f;
});
return () => i("div", {
class: r(`${e.prefixCls}-image-loading`, e.className),
style: e.style
}, [i("div", {
class: r(`${e.prefixCls}-image-skeleton`, "ant-skeleton-node")
}, [i(P, {
class: r(`${e.prefixCls}-image-spin`, {
[`${e.prefixCls}-image-spin-${o.value}`]: o.value
}),
align: "center",
gap: "small"
}, {
default: () => [i(v, x({
size: o.value
}, d.value), null), p.value && i("div", {
class: `${e.prefixCls}-image-spin-text`,
"data-percent": c.value
}, [m.value])]
}), u.value])]);
}
});
export {
I as default
};