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

package/CHANGELOG.md

@@ -0,0 +1,25 @@
+# @antdv-vue/pro-skeleton
+
+## 1.0.3
+
+### Patch Changes
+
+- Updated dependencies [ef5cfb6]
+  - @antdv-vue/pro-utils@2.1.1
+
+## 1.0.2
+
+### Patch Changes
+
+- Updated dependencies [244f208]
+  - @antdv-vue/pro-utils@2.1.0
+
+## 1.0.1
+
+### Patch Changes
+
+- feat: publish ProSkeleton with an ESM bundle.
+- docs: sync structured changelog pages for every package.
+- Updated dependencies
+  - @antdv-vue/pro-provider@2.0.0
+  - @antdv-vue/pro-utils@2.0.0

package/README.md

@@ -1,3 +1,5 @@
-# Temporary Holding Version
+# @antdv-vue/pro-skeleton
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+## License
+
+[MIT](../../LICENSE)

package/dist/Skeleton.d.ts

@@ -0,0 +1,18 @@
+import { DescriptionsPageSkeletonProps } from "./components/Descriptions/index.js";
+import { ListPageSkeletonProps } from "./components/List/index.js";
+import { ResultPageSkeletonProps } from "./components/Result/index.js";
+import * as _$vue from "vue";
+import { Plugin } from "vue";
+
+//#region src/Skeleton.d.ts
+type ProSkeletonProps = ListPageSkeletonProps & DescriptionsPageSkeletonProps & ResultPageSkeletonProps & {
+  type?: 'list' | 'result' | 'descriptions';
+  active?: boolean;
+};
+declare const _ProSkeleton: _$vue.DefineSetupFnComponent<ProSkeletonProps, {}, {}, ListPageSkeletonProps & DescriptionsPageSkeletonProps & ResultPageSkeletonProps & {
+  type?: "list" | "result" | "descriptions";
+  active?: boolean;
+} & {}, _$vue.PublicProps>;
+declare const ProSkeleton: typeof _ProSkeleton & Plugin & {};
+//#endregion
+export { ProSkeletonProps, ProSkeleton as default };

package/dist/Skeleton.js

@@ -0,0 +1,57 @@
+import ListPageSkeleton from "./components/List/index.js";
+import DescriptionsPageSkeleton from "./components/Descriptions/index.js";
+import ResultPageSkeleton from "./components/Result/index.js";
+import { createVNode, defineComponent } from "vue";
+//#region src/Skeleton.tsx
+const ProSkeleton = /* @__PURE__ */ defineComponent((props) => {
+	return () => {
+		const { type = "list", ...rest } = props;
+		if (type === "result") return createVNode(ResultPageSkeleton, rest, null);
+		if (type === "descriptions") return createVNode(DescriptionsPageSkeleton, rest, null);
+		return createVNode(ListPageSkeleton, rest, 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
+		},
+		type: {
+			type: String,
+			required: false
+		}
+	},
+	name: "ProSkeleton",
+	inheritAttrs: false
+});
+ProSkeleton.install = (app) => {
+	app.component(ProSkeleton.name, ProSkeleton);
+};
+//#endregion
+export { ProSkeleton as default };

package/dist/components/Descriptions/DescriptionsItem.d.ts

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

package/dist/components/Descriptions/DescriptionsItem.js

@@ -0,0 +1,73 @@
+import { computed, createVNode, defineComponent } from "vue";
+import { Skeleton, useBreakpoint } from "antdv-next";
+//#region src/components/Descriptions/DescriptionsItem.tsx
+const MediaQueryKeyEnum = {
+	xs: 1,
+	sm: 2,
+	md: 3,
+	lg: 3,
+	xl: 3,
+	xxl: 4
+};
+const DescriptionsItemSkeleton = /* @__PURE__ */ defineComponent((props, { expose }) => {
+	const defaultCol = computed(() => ({
+		lg: true,
+		md: true,
+		sm: false,
+		xl: false,
+		xs: false,
+		xxl: false
+	}));
+	const breakpoint = useBreakpoint();
+	expose({});
+	return () => {
+		const { size, active } = props;
+		const col = breakpoint || defaultCol;
+		const colSize = Object.keys(col.value || {}).filter((key) => col.value?.[key] === true)[0] || "md";
+		const arraySize = size === void 0 ? MediaQueryKeyEnum[colSize] || 3 : size;
+		return createVNode("div", { "style": {
+			width: "100%",
+			justifyContent: "space-between",
+			display: "flex"
+		} }, [Array.from({ length: arraySize }).fill(null).map((_, index) => createVNode("div", {
+			"key": index,
+			"style": {
+				flex: 1,
+				paddingInlineStart: index === 0 ? 0 : "24px",
+				paddingInlineEnd: index === arraySize - 1 ? 0 : "24px"
+			}
+		}, [
+			createVNode(Skeleton, {
+				"active": active,
+				"paragraph": false,
+				"title": { style: { marginBlockStart: 0 } }
+			}, null),
+			createVNode(Skeleton, {
+				"active": active,
+				"paragraph": false,
+				"title": { style: { marginBlockStart: "8px" } }
+			}, null),
+			createVNode(Skeleton, {
+				"active": active,
+				"paragraph": false,
+				"title": { style: { marginBlockStart: "8px" } }
+			}, null)
+		]))]);
+	};
+}, {
+	props: {
+		size: {
+			type: Number,
+			required: false
+		},
+		active: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		}
+	},
+	name: "DescriptionsItemSkeleton",
+	inheritAttrs: false
+});
+//#endregion
+export { DescriptionsItemSkeleton as default };

package/dist/components/Descriptions/DescriptionsLargeItem.d.ts

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

package/dist/components/Descriptions/DescriptionsLargeItem.js

@@ -0,0 +1,66 @@
+import { createVNode, defineComponent } from "vue";
+import { Skeleton, SkeletonButton } from "antdv-next";
+//#region src/components/Descriptions/DescriptionsLargeItem.tsx
+const DescriptionsLargeItemSkeleton = /* @__PURE__ */ defineComponent((props, { expose }) => {
+	expose({});
+	return () => {
+		const { active } = props;
+		return createVNode("div", { "style": { marginBlockStart: "32px" } }, [createVNode(SkeletonButton, {
+			"active": active,
+			"size": "small",
+			"style": {
+				width: "100px",
+				marginBlockEnd: "16px"
+			}
+		}, null), createVNode("div", { "style": {
+			width: "100%",
+			justifyContent: "space-between",
+			display: "flex"
+		} }, [createVNode("div", { "style": {
+			flex: 1,
+			marginInlineEnd: "24px",
+			maxWidth: "300px"
+		} }, [
+			createVNode(Skeleton, {
+				"active": active,
+				"paragraph": false,
+				"title": { style: { marginBlockStart: 0 } }
+			}, null),
+			createVNode(Skeleton, {
+				"active": active,
+				"paragraph": false,
+				"title": { style: { marginBlockStart: "8px" } }
+			}, null),
+			createVNode(Skeleton, {
+				"active": active,
+				"paragraph": false,
+				"title": { style: { marginBlockStart: "8px" } }
+			}, null)
+		]), createVNode("div", { "style": {
+			flex: 1,
+			alignItems: "center",
+			justifyContent: "center"
+		} }, [createVNode("div", { "style": {
+			maxWidth: "300px",
+			margin: "auto"
+		} }, [createVNode(Skeleton, {
+			"active": active,
+			"paragraph": false,
+			"title": { style: { marginBlockStart: 0 } }
+		}, null), createVNode(Skeleton, {
+			"active": active,
+			"paragraph": false,
+			"title": { style: { marginBlockStart: "8px" } }
+		}, null)])])])]);
+	};
+}, {
+	props: { active: {
+		type: Boolean,
+		required: false,
+		default: void 0
+	} },
+	name: "DescriptionsLargeItemSkeleton",
+	inheritAttrs: false
+});
+//#endregion
+export { DescriptionsLargeItemSkeleton as default };

package/dist/components/Descriptions/Table.d.ts

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

package/dist/components/Descriptions/Table.js

@@ -0,0 +1,57 @@
+import TableItemSkeleton from "./TableItem.js";
+import { createVNode, defineComponent } from "vue";
+import { Card, Skeleton, SkeletonButton } from "antdv-next";
+//#region src/components/Descriptions/Table.tsx
+const TableSkeleton = /* @__PURE__ */ defineComponent((props, { expose }) => {
+	expose({});
+	return () => {
+		const { active, size = 4 } = props;
+		return createVNode(Card, { "variant": "borderless" }, { default: () => [
+			createVNode(SkeletonButton, {
+				"active": active,
+				"size": "small",
+				"style": {
+					width: "100px",
+					marginBlockEnd: "16px"
+				}
+			}, null),
+			createVNode(TableItemSkeleton, {
+				"header": true,
+				"active": active
+			}, null),
+			Array.from({ length: size }).fill(null).map((_, index) => createVNode(TableItemSkeleton, {
+				"key": index,
+				"active": active
+			}, null)),
+			createVNode("div", { "style": {
+				display: "flex",
+				justifyContent: "flex-end",
+				paddingBlockStart: "16px"
+			} }, [createVNode(Skeleton, {
+				"active": active,
+				"paragraph": false,
+				"title": { style: {
+					margin: 0,
+					height: "32px",
+					float: "right",
+					maxWidth: "630px"
+				} }
+			}, null)])
+		] });
+	};
+}, {
+	props: {
+		active: {
+			type: Boolean,
+			required: true
+		},
+		size: {
+			type: Number,
+			required: false
+		}
+	},
+	name: "TableSkeleton",
+	inheritAttrs: false
+});
+//#endregion
+export { TableSkeleton as default };

package/dist/components/Descriptions/TableItem.d.ts

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

package/dist/components/Descriptions/TableItem.js

@@ -0,0 +1,76 @@
+import { Line } from "../List/index.js";
+import { Fragment, computed, createVNode, defineComponent } from "vue";
+import { Skeleton, useBreakpoint } from "antdv-next";
+//#region src/components/Descriptions/TableItem.tsx
+const MediaQueryKeyEnum = {
+	xs: 1,
+	sm: 2,
+	md: 3,
+	lg: 3,
+	xl: 3,
+	xxl: 4
+};
+const TableItemSkeleton = /* @__PURE__ */ defineComponent((props, { expose }) => {
+	const defaultCol = computed(() => ({
+		lg: true,
+		md: true,
+		sm: false,
+		xl: false,
+		xs: false,
+		xxl: false
+	}));
+	const breakpoint = useBreakpoint();
+	expose({});
+	return () => {
+		const { active, header = false } = props;
+		const col = breakpoint || defaultCol;
+		const arraySize = MediaQueryKeyEnum[Object.keys(col.value || {}).filter((key) => col.value?.[key] === true)[0] || "md"] || 3;
+		return createVNode(Fragment, null, [createVNode("div", { "style": {
+			display: "flex",
+			background: header ? "rgba(0,0,0,0.02)" : "none",
+			padding: "24px 8px"
+		} }, [Array.from({ length: arraySize }).fill(null).map((_, index) => createVNode("div", {
+			"key": index,
+			"style": {
+				flex: 1,
+				paddingInlineStart: header && index === 0 ? 0 : "20px",
+				paddingInlineEnd: "32px"
+			}
+		}, [createVNode(Skeleton, {
+			"active": active,
+			"paragraph": false,
+			"title": { style: {
+				margin: 0,
+				height: "24px",
+				width: header ? "75px" : "100%"
+			} }
+		}, null)])), createVNode("div", { "style": {
+			flex: 3,
+			paddingInlineStart: "32px"
+		} }, [createVNode(Skeleton, {
+			"active": active,
+			"paragraph": false,
+			"title": { style: {
+				margin: 0,
+				height: "24px",
+				width: header ? "75px" : "100%"
+			} }
+		}, null)])]), createVNode(Line, { "padding": "0px 0px" }, null)]);
+	};
+}, {
+	props: {
+		active: {
+			type: Boolean,
+			required: true
+		},
+		header: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		}
+	},
+	name: "TableItemSkeleton",
+	inheritAttrs: false
+});
+//#endregion
+export { TableItemSkeleton as default };

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

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

package/dist/components/Descriptions/index.js

@@ -0,0 +1,64 @@
+import { Line, PageHeaderSkeleton } from "../List/index.js";
+import DescriptionsItemSkeleton from "./DescriptionsItem.js";
+import DescriptionsLargeItemSkeleton from "./DescriptionsLargeItem.js";
+import TableSkeleton from "./Table.js";
+import { createVNode, defineComponent } from "vue";
+import { Card, SkeletonButton } from "antdv-next";
+//#region src/components/Descriptions/index.tsx
+const DescriptionsSkeleton = ({ active }) => {
+	return createVNode(Card, {
+		"variant": "borderless",
+		"style": {
+			borderStartEndRadius: 0,
+			borderTopLeftRadius: 0
+		}
+	}, { default: () => [
+		createVNode(SkeletonButton, {
+			"active": active,
+			"size": "small",
+			"style": {
+				width: "100px",
+				marginBlockEnd: "16px"
+			}
+		}, null),
+		createVNode(DescriptionsItemSkeleton, { "active": active }, null),
+		createVNode(DescriptionsLargeItemSkeleton, { "active": active }, null)
+	] });
+};
+const DescriptionsPageSkeleton = /* @__PURE__ */ defineComponent((props, { expose }) => {
+	expose({});
+	return () => {
+		const { active = true, pageHeader, list } = props;
+		return createVNode("div", { "style": { width: "100%" } }, [
+			pageHeader !== false && createVNode(PageHeaderSkeleton, { "active": active }, null),
+			createVNode(DescriptionsSkeleton, { "active": active }, null),
+			list !== false && createVNode(Line, null, null),
+			list !== false && createVNode(TableSkeleton, {
+				"active": active,
+				"size": list
+			}, null)
+		]);
+	};
+}, {
+	props: {
+		active: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		pageHeader: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		list: {
+			type: [Boolean, Number],
+			required: false,
+			default: void 0
+		}
+	},
+	name: "DescriptionsPageSkeleton",
+	inheritAttrs: false
+});
+//#endregion
+export { DescriptionsSkeleton, DescriptionsPageSkeleton as default };

package/dist/components/List/Statistic.d.ts

@@ -0,0 +1,21 @@
+import * as _$vue from "vue";
+import { CustomSlotsType, VueNode } from "@v-c/util/dist/type";
+
+//#region src/components/List/Statistic.d.ts
+interface StatisticSkeletonProps {
+  size?: number;
+  active?: boolean;
+}
+declare const MediaQueryKeyEnum: {
+  xs: number;
+  sm: number;
+  md: number;
+  lg: number;
+  xl: number;
+  xxl: number;
+};
+declare const StatisticSkeleton: _$vue.DefineSetupFnComponent<StatisticSkeletonProps, {}, CustomSlotsType<{
+  default?: () => VueNode[];
+}>, StatisticSkeletonProps & {}, _$vue.PublicProps>;
+//#endregion
+export { MediaQueryKeyEnum, StatisticSkeletonProps, StatisticSkeleton as default };

package/dist/components/List/Statistic.js

@@ -0,0 +1,78 @@
+import { computed, createVNode, defineComponent } from "vue";
+import { Card, Skeleton, SkeletonButton, useBreakpoint } from "antdv-next";
+//#region src/components/List/Statistic.tsx
+const MediaQueryKeyEnum = {
+	xs: 2,
+	sm: 2,
+	md: 4,
+	lg: 4,
+	xl: 6,
+	xxl: 6
+};
+const StatisticSkeleton = /* @__PURE__ */ defineComponent((props, { expose }) => {
+	const defaultCol = computed(() => ({
+		lg: true,
+		md: true,
+		sm: false,
+		xl: false,
+		xs: false,
+		xxl: false
+	}));
+	const breakpoint = useBreakpoint();
+	const col = computed(() => {
+		return breakpoint.value || defaultCol.value;
+	});
+	const colSize = computed(() => Object.keys(col.value).filter((key) => col.value?.[key] === true)[0] || "md");
+	const arraySize = computed(() => props.size === void 0 ? MediaQueryKeyEnum[colSize.value] || 6 : props.size);
+	const firstWidth = (index) => {
+		if (index === 0) return 0;
+		if (arraySize.value > 2) return 42;
+		return 16;
+	};
+	expose({});
+	return () => {
+		const { active } = props;
+		return createVNode(Card, {
+			"variant": "borderless",
+			"styles": { root: { marginBlockEnd: "16px" } }
+		}, { default: () => [createVNode("div", { "style": {
+			width: "100%",
+			justifyContent: "space-between",
+			display: "flex"
+		} }, [Array.from({ length: arraySize.value }).fill(null).map((_, index) => createVNode("div", {
+			"key": index,
+			"style": {
+				borderInlineStart: arraySize.value > 2 && index === 1 ? "1px solid rgba(0,0,0,0.06)" : void 0,
+				paddingInlineStart: firstWidth(index),
+				flex: 1,
+				marginInlineEnd: index === 0 ? "16px" : 0
+			}
+		}, [createVNode(Skeleton, {
+			"active": active,
+			"paragraph": false,
+			"title": {
+				width: "100px",
+				style: { marginBlockStart: 0 }
+			}
+		}, null), createVNode(SkeletonButton, {
+			"active": active,
+			"style": { height: "48px" }
+		}, null)]))])] });
+	};
+}, {
+	props: {
+		size: {
+			type: Number,
+			required: false
+		},
+		active: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		}
+	},
+	name: "StatisticSkeleton",
+	inheritAttrs: false
+});
+//#endregion
+export { MediaQueryKeyEnum, StatisticSkeleton as default };

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

@@ -0,0 +1,46 @@
+import * as _$vue from "vue";
+import { FunctionalComponent } from "vue";
+import { CustomSlotsType, VueNode } from "@v-c/util/dist/type";
+
+//#region src/components/List/index.d.ts
+interface ListPageSkeletonProps {
+  active?: boolean;
+  pageHeader?: false;
+  statistic?: number | false;
+  actionButton?: false;
+  toolbar?: false;
+  list?: number | false;
+}
+/** 一条分割线 */
+declare const Line: FunctionalComponent<{
+  padding?: string | number;
+}>;
+/** 列表子项目骨架屏 */
+declare const ListSkeletonItem: FunctionalComponent<{
+  active: boolean;
+}>;
+/** 列表骨架屏 */
+declare const ListSkeleton: FunctionalComponent<{
+  size: number;
+  active?: boolean;
+  actionButton?: boolean;
+}>;
+/**
+ * 面包屑的 骨架屏
+ *
+ */
+declare const PageHeaderSkeleton: FunctionalComponent<{
+  active: boolean;
+}>;
+/**
+ * 列表操作栏的骨架屏
+ *
+ */
+declare const ListToolbarSkeleton: FunctionalComponent<{
+  active: boolean;
+}>;
+declare const ListPageSkeleton: _$vue.DefineSetupFnComponent<ListPageSkeletonProps, {}, CustomSlotsType<{
+  default?: () => VueNode[];
+}>, ListPageSkeletonProps & {}, _$vue.PublicProps>;
+//#endregion
+export { Line, ListPageSkeletonProps, ListSkeleton, ListSkeletonItem, ListToolbarSkeleton, PageHeaderSkeleton, ListPageSkeleton as default };