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

package/dist/components/List/index.js

@@ -0,0 +1,167 @@
+import StatisticSkeleton from "./Statistic.js";
+import { Fragment, createVNode, defineComponent } from "vue";
+import { Card, Divider, Skeleton, SkeletonButton, Space } from "antdv-next";
+import { unit } from "@antdv-next/cssinjs";
+//#region src/components/List/index.tsx
+/** 一条分割线 */
+const Line = ({ padding }) => {
+	return createVNode("div", { "style": { padding: unit(padding || "") || "0 24px" } }, [createVNode(Divider, { "style": { margin: 0 } }, null)]);
+};
+/** 列表子项目骨架屏 */
+const ListSkeletonItem = ({ active }) => createVNode(Fragment, null, [createVNode(Card, {
+	"variant": "borderless",
+	"styles": {
+		root: { borderRadius: 0 },
+		body: { padding: "24px" }
+	}
+}, { default: () => [createVNode("div", { "style": {
+	width: "100%",
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "space-between"
+} }, [createVNode("div", { "style": {
+	maxWidth: "100%",
+	flex: 1
+} }, [createVNode(Skeleton, {
+	"active": active,
+	"title": {
+		width: "100px",
+		style: { marginBlockStart: 0 }
+	},
+	"paragraph": {
+		rows: 1,
+		style: { margin: 0 }
+	}
+}, null)]), createVNode(Skeleton.Button, {
+	"active": active,
+	"size": "small",
+	"style": {
+		width: "165px",
+		marginBlockStart: "12px"
+	}
+}, null)])] }), createVNode(Line, null, null)]);
+/** 列表骨架屏 */
+const ListSkeleton = ({ size, active = true, actionButton }) => createVNode(Card, {
+	"variant": "borderless",
+	"styles": { body: { padding: 0 } }
+}, { default: () => [Array.from({ length: size }).fill(null).map((_, index) => createVNode(ListSkeletonItem, {
+	"key": index,
+	"active": !!active
+}, null)), actionButton !== false && createVNode(Card, {
+	"variant": "borderless",
+	"styles": {
+		root: {
+			borderStartEndRadius: 0,
+			borderTopLeftRadius: 0
+		},
+		body: {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center"
+		}
+	}
+}, { default: () => [createVNode(SkeletonButton, {
+	"style": { width: "102px" },
+	"active": active,
+	"size": "small"
+}, null)] })] });
+/**
+* 面包屑的 骨架屏
+*
+*/
+const PageHeaderSkeleton = ({ active }) => {
+	return createVNode("div", { "style": { marginBlockEnd: "16px" } }, [createVNode(Skeleton, {
+		"paragraph": false,
+		"title": { width: "185px" }
+	}, null), createVNode(SkeletonButton, {
+		"active": active,
+		"size": "small"
+	}, null)]);
+};
+/**
+* 列表操作栏的骨架屏
+*
+*/
+const ListToolbarSkeleton = ({ active }) => createVNode(Card, {
+	"variant": "borderless",
+	"styles": {
+		root: {
+			borderBottomRightRadius: 0,
+			borderBottomLeftRadius: 0
+		},
+		body: { paddingBlockEnd: "8px" }
+	}
+}, { default: () => [createVNode(Space, { "style": {
+	width: "100%",
+	justifyContent: "space-between"
+} }, { default: () => [createVNode(SkeletonButton, {
+	"active": active,
+	"style": { width: "200px" },
+	"size": "small"
+}, null), createVNode(Space, null, { default: () => [createVNode(SkeletonButton, {
+	"active": active,
+	"size": "small",
+	"style": { width: "120px" }
+}, null), createVNode(SkeletonButton, {
+	"active": active,
+	"size": "small",
+	"style": { width: "80px" }
+}, null)] })] })] });
+const ListPageSkeleton = /* @__PURE__ */ defineComponent((props, { expose }) => {
+	expose({});
+	return () => {
+		const { active = true, statistic, actionButton, toolbar, pageHeader, list = 5 } = props;
+		return createVNode("div", { "style": { width: "100%" } }, [
+			pageHeader !== false && createVNode(PageHeaderSkeleton, { "active": active }, null),
+			statistic !== false && createVNode(StatisticSkeleton, {
+				"size": statistic,
+				"active": active
+			}, null),
+			(toolbar !== false || list !== false) && createVNode(Card, {
+				"variant": "borderless",
+				"styles": { body: { padding: 0 } }
+			}, { default: () => [toolbar !== false && createVNode(ListToolbarSkeleton, { "active": active }, null), list !== false && createVNode(ListSkeleton, {
+				"size": list,
+				"active": active,
+				"actionButton": actionButton
+			}, null)] })
+		]);
+	};
+}, {
+	props: {
+		active: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		pageHeader: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		statistic: {
+			type: [Number, Boolean],
+			required: false,
+			default: void 0
+		},
+		actionButton: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		toolbar: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		list: {
+			type: [Number, Boolean],
+			required: false,
+			default: void 0
+		}
+	},
+	name: "ListPageSkeleton",
+	inheritAttrs: false
+});
+//#endregion
+export { Line, ListSkeleton, ListSkeletonItem, ListToolbarSkeleton, PageHeaderSkeleton, ListPageSkeleton as default };

package/dist/components/Result/index.d.ts

@@ -0,0 +1,13 @@
+import * as _$vue from "vue";
+import { CustomSlotsType, VueNode } from "@v-c/util/dist/type";
+
+//#region src/components/Result/index.d.ts
+interface ResultPageSkeletonProps {
+  active?: boolean;
+  pageHeader?: false;
+}
+declare const ResultPageSkeleton: _$vue.DefineSetupFnComponent<ResultPageSkeletonProps, {}, CustomSlotsType<{
+  default?: () => VueNode[];
+}>, ResultPageSkeletonProps & {}, _$vue.PublicProps>;
+//#endregion
+export { ResultPageSkeletonProps, ResultPageSkeleton as default };

package/dist/components/Result/index.js

@@ -0,0 +1,58 @@
+import { PageHeaderSkeleton } from "../List/index.js";
+import { createVNode, defineComponent } from "vue";
+import { Card, SkeletonAvatar, SkeletonButton, Space } from "antdv-next";
+//#region src/components/Result/index.tsx
+const ResultPageSkeleton = /* @__PURE__ */ defineComponent((props, { expose }) => {
+	expose({});
+	return () => {
+		const { active = true, pageHeader } = props;
+		return createVNode("div", { "style": { width: "100%" } }, [pageHeader !== false && createVNode(PageHeaderSkeleton, { "active": active }, null), createVNode(Card, null, { default: () => [createVNode("div", { "style": {
+			display: "flex",
+			justifyContent: "center",
+			alignItems: "center",
+			flexDirection: "column",
+			padding: "128px"
+		} }, [
+			createVNode(SkeletonAvatar, {
+				"size": 64,
+				"style": { marginBlockEnd: "32px" }
+			}, null),
+			createVNode(SkeletonButton, {
+				"active": active,
+				"style": {
+					width: "214px",
+					marginBlockEnd: "8px"
+				}
+			}, null),
+			createVNode(SkeletonButton, {
+				"active": active,
+				"style": { width: "328px" },
+				"size": "small"
+			}, null),
+			createVNode(Space, { "style": { marginBlockStart: "24px" } }, { default: () => [createVNode(SkeletonButton, {
+				"active": active,
+				"style": { width: "116px" }
+			}, null), createVNode(SkeletonButton, {
+				"active": active,
+				"style": { width: "116px" }
+			}, null)] })
+		])] })]);
+	};
+}, {
+	props: {
+		active: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		pageHeader: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		}
+	},
+	name: "ResultPageSkeleton",
+	inheritAttrs: false
+});
+//#endregion
+export { ResultPageSkeleton as default };

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+import ProSkeleton, { ProSkeletonProps } from "./Skeleton.js";
+export { ProSkeleton, type ProSkeletonProps, ProSkeleton as default };

package/dist/index.js

@@ -0,0 +1,2 @@
+import ProSkeleton from "./Skeleton.js";
+export { ProSkeleton, ProSkeleton as default };