@me-framework/me-ui-antdv-next 0.0.24 → 0.0.26

package/dist/skeleton/index.js

@@ -0,0 +1,141 @@
+import { Fragment as e, computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, defineComponent as a, mergeProps as o, normalizeClass as s, normalizeStyle as c, openBlock as l, renderList as u, renderSlot as d } from "vue";
+//#region src/components/skeleton/index.vue?vue&type=script&setup=true&lang.ts
+var f = { class: "me-skeleton__card-body" }, p = { class: "me-skeleton__avatar-content" }, m = { class: "me-skeleton__list-content" }, h = /* @__PURE__ */ a({
+	name: "MeSkeleton",
+	__name: "index",
+	props: {
+		preset: { default: "text" },
+		loading: {
+			type: Boolean,
+			default: !0
+		},
+		animated: {
+			type: Boolean,
+			default: !0
+		},
+		rows: { default: void 0 },
+		height: { default: void 0 },
+		rowHeight: { default: 16 },
+		rowGap: { default: 12 },
+		avatar: {
+			type: Boolean,
+			default: !0
+		},
+		avatarSize: { default: 36 },
+		avatarShape: { default: "circle" },
+		titleWidth: { default: .5 },
+		lastRowWidth: { default: .7 },
+		cardImage: {
+			type: Boolean,
+			default: !0
+		},
+		cardImageHeight: { default: 120 }
+	},
+	setup(a) {
+		let h = a, g = t(() => {
+			if (h.rows !== void 0 && h.rows > 0) return h.rows;
+			if (h.height) {
+				let e = typeof h.height == "number" ? h.height : parseFloat(h.height);
+				if (!isNaN(e) && e > 0) return Math.max(1, Math.floor((e + h.rowGap) / (h.rowHeight + h.rowGap)));
+			}
+			return h.preset === "article" ? 5 : (h.preset === "text" || h.preset, 3);
+		}), _ = t(() => h.rows !== void 0 && h.rows > 0 ? h.rows : 2), v = t(() => {
+			if (h.rows !== void 0 && h.rows > 0) return h.rows;
+			if (h.height) {
+				let e = typeof h.height == "number" ? h.height : parseFloat(h.height);
+				if (!isNaN(e) && e > 0) {
+					let t = h.avatarSize + 8;
+					return Math.max(1, Math.floor(e / t));
+				}
+			}
+			return 3;
+		}), y = t(() => Math.min(1, Math.max(.1, h.titleWidth))), b = t(() => Math.min(1, Math.max(.1, h.lastRowWidth))), x = (e, t) => t <= 1 ? .6 : e === t ? b.value : .85 + (Math.sin(e * 1.7 + .5) * .5 + .5) * .15000000000000002, S = (e, t) => {
+			let n = {
+				height: `${h.rowHeight}px`,
+				width: `${x(e, t) * 100}%`
+			};
+			return e > 1 && (n.marginTop = `${h.rowGap}px`), n;
+		}, C = t(() => {
+			let e = {};
+			return h.height && h.preset !== "card" && h.preset !== "avatar" && (e.height = typeof h.height == "number" ? `${h.height}px` : h.height), e;
+		});
+		return (t, b) => h.loading ? (l(), r("div", o({
+			key: 0,
+			class: ["me-skeleton", [`me-skeleton--${h.preset}`, { "me-skeleton--animated": h.animated }]],
+			style: C.value
+		}, t.$attrs), [h.preset === "card" ? (l(), r(e, { key: 0 }, [h.cardImage ? (l(), r("div", {
+			key: 0,
+			class: "me-skeleton__card-image me-skeleton__block",
+			style: c({ height: `${h.cardImageHeight}px` })
+		}, null, 4)) : n("", !0), i("div", f, [i("div", {
+			class: "me-skeleton__row me-skeleton__block me-skeleton__row--title",
+			style: c({
+				height: `${a.rowHeight}px`,
+				width: `${y.value * 100}%`
+			})
+		}, null, 4), (l(!0), r(e, null, u(_.value, (e) => (l(), r("div", {
+			key: e,
+			class: "me-skeleton__row me-skeleton__block",
+			style: c(S(e, _.value))
+		}, null, 4))), 128))])], 64)) : h.preset === "avatar" ? (l(), r(e, { key: 1 }, [h.avatar ? (l(), r("div", {
+			key: 0,
+			class: s(["me-skeleton__avatar me-skeleton__block", [h.avatarShape === "circle" ? "me-skeleton__avatar--circle" : "me-skeleton__avatar--square"]]),
+			style: c({
+				width: `${h.avatarSize}px`,
+				height: `${h.avatarSize}px`
+			})
+		}, null, 6)) : n("", !0), i("div", p, [i("div", {
+			class: "me-skeleton__row me-skeleton__block me-skeleton__row--title",
+			style: c({
+				height: `${a.rowHeight}px`,
+				width: `${y.value * 100}%`
+			})
+		}, null, 4), i("div", {
+			class: "me-skeleton__row me-skeleton__block",
+			style: c({
+				height: `${a.rowHeight}px`,
+				marginTop: `${a.rowGap}px`,
+				width: "85%"
+			})
+		}, null, 4)])], 64)) : h.preset === "article" ? (l(), r(e, { key: 2 }, [i("div", {
+			class: "me-skeleton__row me-skeleton__block me-skeleton__row--title",
+			style: c({
+				height: `${a.rowHeight}px`,
+				width: `${y.value * 100}%`,
+				marginBottom: `${a.rowGap + 8}px`
+			})
+		}, null, 4), (l(!0), r(e, null, u(g.value, (e) => (l(), r("div", {
+			key: e,
+			class: "me-skeleton__row me-skeleton__block",
+			style: c(S(e, g.value))
+		}, null, 4))), 128))], 64)) : h.preset === "list" ? (l(!0), r(e, { key: 3 }, u(v.value, (e) => (l(), r("div", {
+			key: e,
+			class: "me-skeleton__list-item"
+		}, [b[0] ||= i("div", { class: "me-skeleton__list-avatar me-skeleton__block" }, null, -1), i("div", m, [i("div", {
+			class: "me-skeleton__row me-skeleton__block",
+			style: c({
+				height: `${a.rowHeight}px`,
+				width: `${e % 2 == 0 ? 50 : 40}%`
+			})
+		}, null, 4), i("div", {
+			class: "me-skeleton__row me-skeleton__block",
+			style: c({
+				height: `${a.rowHeight}px`,
+				marginTop: `${a.rowGap}px`,
+				width: `${e % 3 == 0 ? 90 : 75}%`
+			})
+		}, null, 4)])]))), 128)) : (l(!0), r(e, { key: 4 }, u(g.value, (e) => (l(), r("div", {
+			key: e,
+			class: "me-skeleton__row me-skeleton__block",
+			style: c(S(e, g.value))
+		}, null, 4))), 128))], 16)) : d(t.$slots, "default", {}, void 0, void 0, 1);
+	}
+});
+//#endregion
+//#region src/components/skeleton/index.ts
+h.install = (e) => {
+	e.component("MeSkeleton", h);
+};
+var g = h;
+//#endregion
+export { h as MeSkeleton, g as default };

package/dist/skeleton.css

@@ -0,0 +1 @@
+.me-skeleton{--me-skeleton-base-color:var(--me-fill-color);--me-skeleton-highlight-color:var(--me-fill-color-light);--me-skeleton-border-radius:var(--me-border-radius-small);--me-skeleton-animation-duration:1.2s;width:100%;display:block}.me-skeleton__block{background-color:var(--me-skeleton-base-color);border-radius:var(--me-skeleton-border-radius);display:block}.me-skeleton--animated .me-skeleton__block{background:linear-gradient(90deg, var(--me-skeleton-base-color) 25%, var(--me-skeleton-highlight-color) 37%, var(--me-skeleton-base-color) 63%);animation:me-skeleton-pulse var(--me-skeleton-animation-duration) ease-in-out infinite;background-size:400% 100%}.me-skeleton--text .me-skeleton__row,.me-skeleton--custom .me-skeleton__row{width:100%}.me-skeleton--card{border-radius:var(--me-border-radius-base);flex-direction:column;display:flex;overflow:hidden}.me-skeleton--card__card-image{border-radius:0;flex-shrink:0;width:100%}.me-skeleton--card__card-body{flex-direction:column;padding:16px;display:flex}.me-skeleton--card .me-skeleton__row--title{width:50%;margin-bottom:12px}.me-skeleton--avatar{align-items:flex-start;gap:16px;display:flex}.me-skeleton--avatar__avatar{flex-shrink:0}.me-skeleton--avatar__avatar--circle{border-radius:50%}.me-skeleton--avatar__avatar--square{border-radius:var(--me-border-radius-base)}.me-skeleton--avatar__avatar-content{flex-direction:column;flex:1;justify-content:center;min-width:0;display:flex}.me-skeleton--article .me-skeleton__row--title{height:24px}.me-skeleton--list__list-item{align-items:flex-start;gap:12px;padding:12px 0;display:flex}.me-skeleton--list__list-item:not(:last-child){border-bottom:1px solid var(--me-border-color-light)}.me-skeleton--list__list-avatar{background-color:var(--me-skeleton-base-color);border-radius:50%;flex-shrink:0;width:48px;height:48px}.me-skeleton--list__list-content{flex-direction:column;flex:1;justify-content:center;min-width:0;display:flex}.me-skeleton__row{width:100%}@keyframes me-skeleton-pulse{0%{background-position:100%}to{background-position:0}}