@antdv-vue/pro-skeleton 0.0.0-stage → 1.0.3

package/dist/pro-skeleton.esm.js

@@ -0,0 +1,571 @@
+import { Fragment as e, computed as t, createVNode as n, defineComponent as r } from "vue";
+import { Card as i, Divider as a, Skeleton as o, SkeletonAvatar as s, SkeletonButton as c, Space as l, useBreakpoint as u } from "antdv-next";
+import { unit as d } from "@antdv-next/cssinjs";
+// src/components/List/Statistic.tsx
+var f = {
+	xs: 2,
+	sm: 2,
+	md: 4,
+	lg: 4,
+	xl: 6,
+	xxl: 6
+}, p = /* @__PURE__ */ r((e, { expose: r }) => {
+	let a = t(() => ({
+		lg: !0,
+		md: !0,
+		sm: !1,
+		xl: !1,
+		xs: !1,
+		xxl: !1
+	})), s = u(), l = t(() => s.value || a.value), d = t(() => Object.keys(l.value).filter((e) => l.value?.[e] === !0)[0] || "md"), p = t(() => e.size === void 0 ? f[d.value] || 6 : e.size), m = (e) => e === 0 ? 0 : p.value > 2 ? 42 : 16;
+	return r({}), () => {
+		let { active: t } = e;
+		return n(i, {
+			variant: "borderless",
+			styles: { root: { marginBlockEnd: "16px" } }
+		}, { default: () => [n("div", { style: {
+			width: "100%",
+			justifyContent: "space-between",
+			display: "flex"
+		} }, [Array.from({ length: p.value }).fill(null).map((e, r) => n("div", {
+			key: r,
+			style: {
+				borderInlineStart: p.value > 2 && r === 1 ? "1px solid rgba(0,0,0,0.06)" : void 0,
+				paddingInlineStart: m(r),
+				flex: 1,
+				marginInlineEnd: r === 0 ? "16px" : 0
+			}
+		}, [n(o, {
+			active: t,
+			paragraph: !1,
+			title: {
+				width: "100px",
+				style: { marginBlockStart: 0 }
+			}
+		}, null), n(c, {
+			active: t,
+			style: { height: "48px" }
+		}, null)]))])] });
+	};
+}, {
+	props: {
+		size: {
+			type: Number,
+			required: !1
+		},
+		active: {
+			type: Boolean,
+			required: !1,
+			default: void 0
+		}
+	},
+	name: "StatisticSkeleton",
+	inheritAttrs: !1
+}), m = ({ padding: e }) => n("div", { style: { padding: d(e || "") || "0 24px" } }, [n(a, { style: { margin: 0 } }, null)]), h = ({ active: t }) => n(e, null, [n(i, {
+	variant: "borderless",
+	styles: {
+		root: { borderRadius: 0 },
+		body: { padding: "24px" }
+	}
+}, { default: () => [n("div", { style: {
+	width: "100%",
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "space-between"
+} }, [n("div", { style: {
+	maxWidth: "100%",
+	flex: 1
+} }, [n(o, {
+	active: t,
+	title: {
+		width: "100px",
+		style: { marginBlockStart: 0 }
+	},
+	paragraph: {
+		rows: 1,
+		style: { margin: 0 }
+	}
+}, null)]), n(o.Button, {
+	active: t,
+	size: "small",
+	style: {
+		width: "165px",
+		marginBlockStart: "12px"
+	}
+}, null)])] }), n(m, null, null)]), g = ({ size: e, active: t = !0, actionButton: r }) => n(i, {
+	variant: "borderless",
+	styles: { body: { padding: 0 } }
+}, { default: () => [Array.from({ length: e }).fill(null).map((e, r) => n(h, {
+	key: r,
+	active: !!t
+}, null)), r !== !1 && n(i, {
+	variant: "borderless",
+	styles: {
+		root: {
+			borderStartEndRadius: 0,
+			borderTopLeftRadius: 0
+		},
+		body: {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center"
+		}
+	}
+}, { default: () => [n(c, {
+	style: { width: "102px" },
+	active: t,
+	size: "small"
+}, null)] })] }), _ = ({ active: e }) => n("div", { style: { marginBlockEnd: "16px" } }, [n(o, {
+	paragraph: !1,
+	title: { width: "185px" }
+}, null), n(c, {
+	active: e,
+	size: "small"
+}, null)]), v = ({ active: e }) => n(i, {
+	variant: "borderless",
+	styles: {
+		root: {
+			borderBottomRightRadius: 0,
+			borderBottomLeftRadius: 0
+		},
+		body: { paddingBlockEnd: "8px" }
+	}
+}, { default: () => [n(l, { style: {
+	width: "100%",
+	justifyContent: "space-between"
+} }, { default: () => [n(c, {
+	active: e,
+	style: { width: "200px" },
+	size: "small"
+}, null), n(l, null, { default: () => [n(c, {
+	active: e,
+	size: "small",
+	style: { width: "120px" }
+}, null), n(c, {
+	active: e,
+	size: "small",
+	style: { width: "80px" }
+}, null)] })] })] }), y = /* @__PURE__ */ r((e, { expose: t }) => (t({}), () => {
+	let { active: t = !0, statistic: r, actionButton: a, toolbar: o, pageHeader: s, list: c = 5 } = e;
+	return n("div", { style: { width: "100%" } }, [
+		s !== !1 && n(_, { active: t }, null),
+		r !== !1 && n(p, {
+			size: r,
+			active: t
+		}, null),
+		(o !== !1 || c !== !1) && n(i, {
+			variant: "borderless",
+			styles: { body: { padding: 0 } }
+		}, { default: () => [o !== !1 && n(v, { active: t }, null), c !== !1 && n(g, {
+			size: c,
+			active: t,
+			actionButton: a
+		}, null)] })
+	]);
+}), {
+	props: {
+		active: {
+			type: Boolean,
+			required: !1,
+			default: void 0
+		},
+		pageHeader: {
+			type: Boolean,
+			required: !1,
+			default: void 0
+		},
+		statistic: {
+			type: [Number, Boolean],
+			required: !1,
+			default: void 0
+		},
+		actionButton: {
+			type: Boolean,
+			required: !1,
+			default: void 0
+		},
+		toolbar: {
+			type: Boolean,
+			required: !1,
+			default: void 0
+		},
+		list: {
+			type: [Number, Boolean],
+			required: !1,
+			default: void 0
+		}
+	},
+	name: "ListPageSkeleton",
+	inheritAttrs: !1
+}), b = {
+	xs: 1,
+	sm: 2,
+	md: 3,
+	lg: 3,
+	xl: 3,
+	xxl: 4
+}, x = /* @__PURE__ */ r((e, { expose: r }) => {
+	let i = t(() => ({
+		lg: !0,
+		md: !0,
+		sm: !1,
+		xl: !1,
+		xs: !1,
+		xxl: !1
+	})), a = u();
+	return r({}), () => {
+		let { size: t, active: r } = e, s = a || i, c = Object.keys(s.value || {}).filter((e) => s.value?.[e] === !0)[0] || "md", l = t === void 0 ? b[c] || 3 : t;
+		return n("div", { style: {
+			width: "100%",
+			justifyContent: "space-between",
+			display: "flex"
+		} }, [Array.from({ length: l }).fill(null).map((e, t) => n("div", {
+			key: t,
+			style: {
+				flex: 1,
+				paddingInlineStart: t === 0 ? 0 : "24px",
+				paddingInlineEnd: t === l - 1 ? 0 : "24px"
+			}
+		}, [
+			n(o, {
+				active: r,
+				paragraph: !1,
+				title: { style: { marginBlockStart: 0 } }
+			}, null),
+			n(o, {
+				active: r,
+				paragraph: !1,
+				title: { style: { marginBlockStart: "8px" } }
+			}, null),
+			n(o, {
+				active: r,
+				paragraph: !1,
+				title: { style: { marginBlockStart: "8px" } }
+			}, null)
+		]))]);
+	};
+}, {
+	props: {
+		size: {
+			type: Number,
+			required: !1
+		},
+		active: {
+			type: Boolean,
+			required: !1,
+			default: void 0
+		}
+	},
+	name: "DescriptionsItemSkeleton",
+	inheritAttrs: !1
+}), S = /* @__PURE__ */ r((e, { expose: t }) => (t({}), () => {
+	let { active: t } = e;
+	return n("div", { style: { marginBlockStart: "32px" } }, [n(c, {
+		active: t,
+		size: "small",
+		style: {
+			width: "100px",
+			marginBlockEnd: "16px"
+		}
+	}, null), n("div", { style: {
+		width: "100%",
+		justifyContent: "space-between",
+		display: "flex"
+	} }, [n("div", { style: {
+		flex: 1,
+		marginInlineEnd: "24px",
+		maxWidth: "300px"
+	} }, [
+		n(o, {
+			active: t,
+			paragraph: !1,
+			title: { style: { marginBlockStart: 0 } }
+		}, null),
+		n(o, {
+			active: t,
+			paragraph: !1,
+			title: { style: { marginBlockStart: "8px" } }
+		}, null),
+		n(o, {
+			active: t,
+			paragraph: !1,
+			title: { style: { marginBlockStart: "8px" } }
+		}, null)
+	]), n("div", { style: {
+		flex: 1,
+		alignItems: "center",
+		justifyContent: "center"
+	} }, [n("div", { style: {
+		maxWidth: "300px",
+		margin: "auto"
+	} }, [n(o, {
+		active: t,
+		paragraph: !1,
+		title: { style: { marginBlockStart: 0 } }
+	}, null), n(o, {
+		active: t,
+		paragraph: !1,
+		title: { style: { marginBlockStart: "8px" } }
+	}, null)])])])]);
+}), {
+	props: { active: {
+		type: Boolean,
+		required: !1,
+		default: void 0
+	} },
+	name: "DescriptionsLargeItemSkeleton",
+	inheritAttrs: !1
+}), C = {
+	xs: 1,
+	sm: 2,
+	md: 3,
+	lg: 3,
+	xl: 3,
+	xxl: 4
+}, w = /* @__PURE__ */ r((r, { expose: i }) => {
+	let a = t(() => ({
+		lg: !0,
+		md: !0,
+		sm: !1,
+		xl: !1,
+		xs: !1,
+		xxl: !1
+	})), s = u();
+	return i({}), () => {
+		let { active: t, header: i = !1 } = r, c = s || a, l = C[Object.keys(c.value || {}).filter((e) => c.value?.[e] === !0)[0] || "md"] || 3;
+		return n(e, null, [n("div", { style: {
+			display: "flex",
+			background: i ? "rgba(0,0,0,0.02)" : "none",
+			padding: "24px 8px"
+		} }, [Array.from({ length: l }).fill(null).map((e, r) => n("div", {
+			key: r,
+			style: {
+				flex: 1,
+				paddingInlineStart: i && r === 0 ? 0 : "20px",
+				paddingInlineEnd: "32px"
+			}
+		}, [n(o, {
+			active: t,
+			paragraph: !1,
+			title: { style: {
+				margin: 0,
+				height: "24px",
+				width: i ? "75px" : "100%"
+			} }
+		}, null)])), n("div", { style: {
+			flex: 3,
+			paddingInlineStart: "32px"
+		} }, [n(o, {
+			active: t,
+			paragraph: !1,
+			title: { style: {
+				margin: 0,
+				height: "24px",
+				width: i ? "75px" : "100%"
+			} }
+		}, null)])]), n(m, { padding: "0px 0px" }, null)]);
+	};
+}, {
+	props: {
+		active: {
+			type: Boolean,
+			required: !0
+		},
+		header: {
+			type: Boolean,
+			required: !1,
+			default: void 0
+		}
+	},
+	name: "TableItemSkeleton",
+	inheritAttrs: !1
+}), T = /* @__PURE__ */ r((e, { expose: t }) => (t({}), () => {
+	let { active: t, size: r = 4 } = e;
+	return n(i, { variant: "borderless" }, { default: () => [
+		n(c, {
+			active: t,
+			size: "small",
+			style: {
+				width: "100px",
+				marginBlockEnd: "16px"
+			}
+		}, null),
+		n(w, {
+			header: !0,
+			active: t
+		}, null),
+		Array.from({ length: r }).fill(null).map((e, r) => n(w, {
+			key: r,
+			active: t
+		}, null)),
+		n("div", { style: {
+			display: "flex",
+			justifyContent: "flex-end",
+			paddingBlockStart: "16px"
+		} }, [n(o, {
+			active: t,
+			paragraph: !1,
+			title: { style: {
+				margin: 0,
+				height: "32px",
+				float: "right",
+				maxWidth: "630px"
+			} }
+		}, null)])
+	] });
+}), {
+	props: {
+		active: {
+			type: Boolean,
+			required: !0
+		},
+		size: {
+			type: Number,
+			required: !1
+		}
+	},
+	name: "TableSkeleton",
+	inheritAttrs: !1
+}), E = ({ active: e }) => n(i, {
+	variant: "borderless",
+	style: {
+		borderStartEndRadius: 0,
+		borderTopLeftRadius: 0
+	}
+}, { default: () => [
+	n(c, {
+		active: e,
+		size: "small",
+		style: {
+			width: "100px",
+			marginBlockEnd: "16px"
+		}
+	}, null),
+	n(x, { active: e }, null),
+	n(S, { active: e }, null)
+] }), D = /* @__PURE__ */ r((e, { expose: t }) => (t({}), () => {
+	let { active: t = !0, pageHeader: r, list: i } = e;
+	return n("div", { style: { width: "100%" } }, [
+		r !== !1 && n(_, { active: t }, null),
+		n(E, { active: t }, null),
+		i !== !1 && n(m, null, null),
+		i !== !1 && n(T, {
+			active: t,
+			size: i
+		}, null)
+	]);
+}), {
+	props: {
+		active: {
+			type: Boolean,
+			required: !1,
+			default: void 0
+		},
+		pageHeader: {
+			type: Boolean,
+			required: !1,
+			default: void 0
+		},
+		list: {
+			type: [Boolean, Number],
+			required: !1,
+			default: void 0
+		}
+	},
+	name: "DescriptionsPageSkeleton",
+	inheritAttrs: !1
+}), O = /* @__PURE__ */ r((e, { expose: t }) => (t({}), () => {
+	let { active: t = !0, pageHeader: r } = e;
+	return n("div", { style: { width: "100%" } }, [r !== !1 && n(_, { active: t }, null), n(i, null, { default: () => [n("div", { style: {
+		display: "flex",
+		justifyContent: "center",
+		alignItems: "center",
+		flexDirection: "column",
+		padding: "128px"
+	} }, [
+		n(s, {
+			size: 64,
+			style: { marginBlockEnd: "32px" }
+		}, null),
+		n(c, {
+			active: t,
+			style: {
+				width: "214px",
+				marginBlockEnd: "8px"
+			}
+		}, null),
+		n(c, {
+			active: t,
+			style: { width: "328px" },
+			size: "small"
+		}, null),
+		n(l, { style: { marginBlockStart: "24px" } }, { default: () => [n(c, {
+			active: t,
+			style: { width: "116px" }
+		}, null), n(c, {
+			active: t,
+			style: { width: "116px" }
+		}, null)] })
+	])] })]);
+}), {
+	props: {
+		active: {
+			type: Boolean,
+			required: !1,
+			default: void 0
+		},
+		pageHeader: {
+			type: Boolean,
+			required: !1,
+			default: void 0
+		}
+	},
+	name: "ResultPageSkeleton",
+	inheritAttrs: !1
+}), k = /* @__PURE__ */ r((e) => () => {
+	let { type: t = "list", ...r } = e;
+	return n(t === "result" ? O : t === "descriptions" ? D : y, r, null);
+}, {
+	props: {
+		active: {
+			type: Boolean,
+			required: !1,
+			default: void 0
+		},
+		pageHeader: {
+			type: Boolean,
+			required: !1,
+			default: void 0
+		},
+		statistic: {
+			type: [Number, Boolean],
+			required: !1,
+			default: void 0
+		},
+		actionButton: {
+			type: Boolean,
+			required: !1,
+			default: void 0
+		},
+		toolbar: {
+			type: Boolean,
+			required: !1,
+			default: void 0
+		},
+		list: {
+			type: [Number, Boolean],
+			required: !1,
+			default: void 0
+		},
+		type: {
+			type: String,
+			required: !1
+		}
+	},
+	name: "ProSkeleton",
+	inheritAttrs: !1
+});
+k.install = (e) => {
+	e.component(k.name, k);
+};
+export { k as ProSkeleton, k as default };

package/package.json

@@ -1,6 +1,62 @@
 {
   "name": "@antdv-vue/pro-skeleton",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "type": "module",
+  "version": "1.0.3",
+  "description": "@antdv-vue/pro-skeleton",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/bunnyblueair/pro-components.git",
+    "directory": "packages/skeleton"
+  },
+  "sideEffects": [
+    "./dist/pro-skeleton.esm.js"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./dist/*": {
+      "types": "./dist/*.d.ts",
+      "import": "./dist/*.js",
+      "default": "./dist/*.js"
+    },
+    "./dist/pro-skeleton.esm.js": "./dist/pro-skeleton.esm.js"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "CHANGELOG.md",
+    "LICENSE",
+    "README.md",
+    "dist",
+    "package.json"
+  ],
+  "scripts": {
+    "build": "run-s build:esm build:full-esm",
+    "build:esm": "tsdown --config-loader unrun",
+    "build:full-esm": "vite build"
+  },
+  "browserslist": [
+    "last 2 versions",
+    "Firefox ESR",
+    "> 1%",
+    "ie >= 11"
+  ],
+  "peerDependencies": {
+    "antdv-next": ">=1.8.0",
+    "vue": ">=3.5.30"
+  },
+  "dependencies": {
+    "@antdv-vue/pro-provider": "2.0.0",
+    "@antdv-vue/pro-utils": "2.1.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "authors": [
+    "lucasjeke <lucasjekeqd@gmail.com> (https://github.com/lucasjeke)"
+  ]
 }