vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
71 lines (70 loc) • 2.42 kB
JavaScript
import { defineComponent as S, inject as z, computed as l, createVNode as u, mergeProps as d, renderSlot as I } from "vue";
import "../icon/index.mjs";
import { useProps as P, createIconProp as w, useNameHelper as x, useIcons as A } from "@vexip-ui/config";
import { skeletonProps as N } from "./props.mjs";
import { GROUP_STATE as T } from "./symbol.mjs";
import $ from "../icon/icon.mjs";
const R = /* @__PURE__ */ S({
name: "Skeleton",
inheritAttrs: !1,
props: N,
setup(m, {
attrs: o,
slots: p
}) {
const e = P("skeleton", m, {
size: null,
width: null,
height: null,
repeat: {
default: 1,
validator: (t) => t > 0
},
tag: "div",
activated: null,
image: !1,
imageIcon: w(),
iconScale: 4,
round: null,
circle: null,
block: null,
spread: 0,
loading: null
}), n = z(T, {}), r = x("skeleton"), a = A(), f = l(() => e.activated ?? n.activated ?? !1), g = l(() => e.round ?? n.round ?? !1), c = l(() => e.circle ?? n.circle ?? !1), h = l(() => e.block ?? n.block ?? !1), v = l(() => e.loading ?? n.loading ?? !0), b = l(() => e.tag || n.itemTag || "div"), k = l(() => ({
[r.b()]: !0,
[r.bs("vars")]: !0,
[r.bm("inherit")]: Object.keys(n).length || e.inherit,
[r.bm(e.size)]: e.size ?? (n == null ? void 0 : n.size),
[r.bm("block")]: h.value,
[r.bm("image")]: e.image,
[r.bm("round")]: g.value && !c.value,
[r.bm("circle")]: c.value,
[r.bm("activated")]: f.value
})), y = l(() => {
const t = {};
return e.width !== null && (t[r.cv("width")] = i(e.width)), e.height !== null && (t[r.cv("height")] = i(e.height)), e.spread && (t[r.cv("spread")] = i(e.spread)), t;
});
function i(t) {
return typeof t == "number" ? `${t}px` : (t = t.trim(), /\d$/.test(t) ? `${t}px` : t);
}
function s() {
const t = b.value || "div";
return u(t, d(o, {
class: [k.value, o.class],
style: [y.value, o.style]
}), {
default: () => [e.image ? u($, d(a.value.image, {
icon: e.imageIcon || a.value.image.icon,
scale: e.iconScale
}), null) : null]
});
}
return () => v.value ? e.repeat > 1 ? Array.from({
length: e.repeat
}, () => s()) : s() : I(p, "default");
}
});
export {
R as default
};
//# sourceMappingURL=skeleton.mjs.map