@antdv-next1/pro-card 1.0.0

package/dist/components/CheckCard/style/index.js

@@ -0,0 +1,165 @@
+import { useStyle as useStyle$1 } from "@antdv-next1/pro-provider";
+import { Keyframes } from "@antdv-next/cssinjs";
+//#region src/components/CheckCard/style/index.ts
+function proCheckCardActive(token) {
+	return {
+		backgroundColor: token.colorPrimaryBg,
+		borderColor: token.colorPrimary
+	};
+}
+function proCheckCardDisabled(token) {
+	return {
+		backgroundColor: token.colorBgContainerDisabled,
+		borderColor: token.colorBorder,
+		cursor: "not-allowed",
+		[`${token.componentCls}-meta`]: { [`&${token.antCls}-card-meta`]: {
+			[`${token.antCls}-card-meta-detail`]: {
+				[`${token.antCls}-card-meta-description`]: { color: token.colorTextDisabled },
+				[`${token.antCls}-card-meta-title`]: { color: token.colorTextDisabled }
+			},
+			[`${token.antCls}-card-meta-avatar`]: { opacity: "0.25" }
+		} }
+	};
+}
+const cardLoading = new Keyframes("card-loading", {
+	"0%": { backgroundPosition: "0 50%" },
+	"50%": { backgroundPosition: "100% 50%" },
+	"100%": { backgroundPosition: "0 50%" }
+});
+const genProCheckCardStyle = (token) => {
+	return { [token.componentCls]: {
+		width: 320,
+		boxSizing: "border-box",
+		position: "relative",
+		display: "inline-block",
+		cursor: "pointer",
+		transition: "all 0.3s",
+		verticalAlign: "top",
+		"&:not(:last-child)": {
+			marginInlineEnd: token.margin,
+			marginBlockEnd: token.margin
+		},
+		"&-lg": { width: 440 },
+		"&-sm": { width: 212 },
+		"&&-checked": { [`&${token.antCls}-card`]: {
+			...proCheckCardActive(token),
+			[`${token.antCls}-card-cover`]: { "&:after": {
+				opacity: 1,
+				border: `${token.borderRadius + 4}px solid ${token.colorPrimary}`,
+				borderBlockEnd: `${token.borderRadius + 4}px  solid transparent`,
+				borderInlineStart: `${token.borderRadius + 4}px  solid transparent`,
+				borderStartEndRadius: `${token.borderRadius}px`
+			} },
+			[`${token.antCls}-card-body`]: { "&:after": {
+				opacity: 1,
+				border: `${token.borderRadius + 4}px solid ${token.colorPrimary}`,
+				borderBlockEnd: `${token.borderRadius + 4}px  solid transparent`,
+				borderInlineStart: `${token.borderRadius + 4}px  solid transparent`,
+				borderStartEndRadius: `${token.borderRadius}px`
+			} }
+		} },
+		[`&${token.antCls}-card`]: {
+			[`${token.antCls}-card-cover`]: {
+				paddingInline: token.paddingXXS,
+				paddingBlock: token.paddingXXS,
+				img: {
+					display: "flex",
+					width: "100%",
+					height: "100%",
+					overflow: "hidden",
+					borderRadius: token.borderRadius
+				},
+				"&:after": {
+					content: "''",
+					position: "absolute",
+					insetBlockStart: 2,
+					insetInlineEnd: 2,
+					width: 0,
+					height: 0,
+					opacity: 0,
+					transition: `all 0.3s ${token.motionEaseInOut}`,
+					borderBlockEnd: `${token.borderRadius + 4}px  solid transparent`,
+					borderInlineStart: `${token.borderRadius + 4}px  solid transparent`,
+					borderStartEndRadius: `${token.borderRadius}px`
+				}
+			},
+			[`${token.antCls}-card-body`]: {
+				paddingBlock: token.padding,
+				paddingInline: token.paddingSM,
+				[`${token.componentCls}-meta`]: { [`&${token.antCls}-card-meta`]: {
+					[`${token.antCls}-card-meta-avatar`]: { paddingInlineEnd: token.paddingXS },
+					[`${token.antCls}-card-meta-section`]: {
+						"&>div:not(:last-child)": { marginBottom: token.marginXXS },
+						[`${token.antCls}-card-meta-title`]: {
+							fontSize: token.fontSize,
+							fontWeight: 500
+						}
+					},
+					[`&${token.componentCls}-meta-avatar-header`]: { alignItems: "center" },
+					[`&${token.componentCls}-meta-extra-header`]: { [`${token.antCls}-card-meta-section`]: { [`${token.antCls}-card-meta-title`]: {
+						display: "flex",
+						alignItems: "center",
+						justifyContent: "space-between",
+						overflow: "unset",
+						fontSize: "unset",
+						whiteSpace: "normal",
+						textOverflow: "unset",
+						lineHeight: token.lineHeight,
+						[`${token.componentCls}-meta-title-left`]: {
+							display: "flex",
+							alignItems: "center",
+							gap: token.sizeSM,
+							minWidth: 0,
+							[`${token.componentCls}-meta-title-left-text`]: {
+								display: "inline-block",
+								overflow: "hidden",
+								textOverflow: "ellipsis",
+								whiteSpace: "nowrap",
+								alignItems: "center"
+							}
+						},
+						[`${token.componentCls}-meta-title-extra`]: {}
+					} } }
+				} },
+				"&:after": {
+					content: "''",
+					position: "absolute",
+					insetBlockStart: 2,
+					insetInlineEnd: 2,
+					width: 0,
+					height: 0,
+					opacity: 0,
+					transition: `all 0.3s ${token.motionEaseInOut}`,
+					borderBlockEnd: `${token.borderRadius + 4}px  solid transparent`,
+					borderInlineStart: `${token.borderRadius + 4}px  solid transparent`,
+					borderStartEndRadius: `${token.borderRadius}px`
+				}
+			}
+		},
+		"&:focus": proCheckCardActive(token),
+		"&&-disabled,&&-checked&-disabled": proCheckCardDisabled(token),
+		"&&[disabled]": proCheckCardDisabled(token),
+		"&&-checked&&-disabled": { [`${token.antCls}-card-body`]: { "&:after": {
+			position: "absolute",
+			insetBlockStart: 2,
+			insetInlineEnd: 2,
+			width: 0,
+			height: 0,
+			border: `${token.borderRadius + 4}px solid ${token.colorTextDisabled}`,
+			borderBlockEnd: `${token.borderRadius + 4}px  solid transparent`,
+			borderInlineStart: `${token.borderRadius + 4}px  solid transparent`,
+			borderStartEndRadius: `${token.borderRadius}px`
+		} } },
+		[`&&:not(${token.componentCls}-disabled)`]: { "&:hover": { borderColor: token.colorPrimary } }
+	} };
+};
+function useStyle(prefixCls) {
+	return useStyle$1("ProCheckCard", (token) => {
+		return [genProCheckCardStyle({
+			...token,
+			componentCls: `.${prefixCls.value}`
+		})];
+	});
+}
+//#endregion
+export { cardLoading, useStyle };

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

@@ -0,0 +1,26 @@
+import * as _$vue from "vue";
+import { VNode } from "vue";
+import { VueNode } from "@v-c/util";
+import { BadgeProps, StatisticProps as StatisticProps$1 } from "antdv-next";
+import { CustomSlotsType } from "@v-c/util/dist/type";
+
+//#region src/components/Statistic/index.d.ts
+interface StatisticProps extends StatisticProps$1 {
+  /** 描述性标签 */
+  description?: VueNode;
+  /** 标题提示 */
+  tooltip?: VueNode;
+  /** 当前项显示的状态 */
+  status?: BadgeProps['status'];
+  /** Icon 图标 */
+  icon?: VueNode;
+  /** Layout 布局 */
+  layout?: 'horizontal' | 'vertical' | 'inline';
+  /** 趋势 */
+  trend?: 'up' | 'down';
+}
+declare const Statistic: _$vue.DefineSetupFnComponent<StatisticProps, {}, CustomSlotsType<{
+  default?: () => VNode[];
+}>, StatisticProps & {}, _$vue.PublicProps>;
+//#endregion
+export { StatisticProps, Statistic as default };

package/dist/components/Statistic/index.js

@@ -0,0 +1,185 @@
+import { useStyle } from "./style/index.js";
+import { Fragment, computed, createVNode, defineComponent, mergeProps } from "vue";
+import { QuestionCircleOutlined } from "@antdv-next/icons";
+import { classNames } from "@v-c/util";
+import { Badge, Statistic as Statistic$1, Tooltip } from "antdv-next";
+import { useConfig } from "antdv-next/dist/config-provider/context";
+//#region src/components/Statistic/index.tsx
+const Statistic = /* @__PURE__ */ defineComponent((props, { attrs }) => {
+	const config = useConfig();
+	const prefixCls = computed(() => props.prefixCls || config.value.getPrefixCls("pro"));
+	const baseClassName = computed(() => `${prefixCls.value}-card-statistic`);
+	const { wrapSSR, hashId } = useStyle(baseClassName);
+	return () => {
+		const { layout = "inline", description, title, tooltip, status, trend, prefix, icon, ...rest } = props;
+		const tooltipDom = tooltip && createVNode(Tooltip, { "title": tooltip }, { default: () => [createVNode(QuestionCircleOutlined, { "class": classNames(`${baseClassName.value}-tip`, hashId.value) }, null)] });
+		const trendDom = trend && createVNode("div", { "class": classNames(`${baseClassName.value}-trend-icon`, hashId.value, { [`${baseClassName.value}-trend-icon-${trend}`]: trend }) }, null);
+		return wrapSSR(createVNode("div", {
+			"class": classNames(baseClassName.value, attrs.class, hashId.value),
+			"style": attrs.style
+		}, [icon && createVNode("div", { "class": classNames(`${baseClassName.value}-icon`, hashId.value) }, [icon]), createVNode("div", { "class": classNames(`${baseClassName.value}-wrapper`, hashId.value) }, [status && createVNode("div", { "class": classNames(`${baseClassName.value}-status`, hashId.value) }, [createVNode(Badge, {
+			"status": status,
+			"text": null
+		}, null)]), createVNode("div", { "class": classNames(`${baseClassName.value}-content`, hashId.value) }, [createVNode(Statistic$1, mergeProps({
+			"title": (title || tooltipDom) && createVNode(Fragment, null, [title, tooltipDom]),
+			"prefix": (trendDom || prefix) && createVNode(Fragment, null, [trendDom, prefix]),
+			"class": classNames(hashId.value, {
+				[`${baseClassName.value}-layout-${layout}`]: layout,
+				[`${baseClassName.value}-trend-${trend}`]: trend
+			})
+		}, rest), null), description && createVNode("div", { "class": classNames(`${baseClassName.value}-description`, hashId.value) }, [description])])])]));
+	};
+}, {
+	props: {
+		description: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		tooltip: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		status: { required: false },
+		icon: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		layout: {
+			type: String,
+			required: false
+		},
+		trend: {
+			type: String,
+			required: false
+		},
+		formatter: {
+			type: [
+				Boolean,
+				String,
+				Function
+			],
+			required: false,
+			default: void 0
+		},
+		decimalSeparator: {
+			type: String,
+			required: false
+		},
+		groupSeparator: {
+			type: String,
+			required: false
+		},
+		precision: {
+			type: Number,
+			required: false
+		},
+		rootClass: {
+			type: String,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		value: {
+			type: [Number, String],
+			required: false
+		},
+		valueStyle: {
+			type: Object,
+			required: false
+		},
+		valueRender: {
+			type: Function,
+			required: false
+		},
+		title: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		prefix: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		suffix: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		loading: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		classes: {
+			type: [Object, Function],
+			required: false
+		},
+		styles: {
+			type: [Object, Function],
+			required: false
+		},
+		onMouseenter: {
+			type: Function,
+			required: false
+		},
+		onMouseleave: {
+			type: Function,
+			required: false
+		}
+	},
+	name: "Statistic",
+	inheritAttrs: false
+});
+//#endregion
+export { Statistic as default };

package/dist/components/Statistic/style/index.d.ts

@@ -0,0 +1,11 @@
+import { ComputedRef } from "vue";
+import * as _$_antdv_next1_pro_provider0 from "@antdv-next1/pro-provider";
+import { ProAliasToken } from "@antdv-next1/pro-provider";
+
+//#region src/components/Statistic/style/index.d.ts
+interface ProListToken extends ProAliasToken {
+  componentCls: string;
+}
+declare function useStyle(prefixCls: ComputedRef<string>): _$_antdv_next1_pro_provider0.UseStyleResult;
+//#endregion
+export { ProListToken, useStyle };

package/dist/components/Statistic/style/index.js

@@ -0,0 +1,64 @@
+import { useStyle as useStyle$1 } from "@antdv-next1/pro-provider";
+//#region src/components/Statistic/style/index.ts
+const genProStyle = (token) => {
+	return { [token.componentCls]: {
+		boxSizing: "border-box",
+		display: "flex",
+		fontSize: token.fontSize,
+		"& + &": { marginBlockStart: 4 },
+		"&-tip": { marginInlineStart: 4 },
+		"&-wrapper": {
+			display: "flex",
+			width: "100%",
+			[`${token.componentCls}-status`]: { width: "14px" }
+		},
+		"&-icon": { marginInlineEnd: 16 },
+		"&-trend-icon": {
+			width: 0,
+			height: 0,
+			borderInlineEnd: "3.5px solid transparent",
+			borderBlockEnd: "9px solid #000",
+			borderInlineStart: "3.5px solid transparent",
+			"&-up": { transform: "rotate(0deg)" },
+			"&-down": { transform: "rotate(180deg)" }
+		},
+		"&-content": { width: "100%" },
+		"&-description": { width: "100%" },
+		[`${token.antCls}-statistic-title`]: { color: token.colorText },
+		"&-trend-up": { [`${token.antCls}-statistic-content`]: {
+			color: "#f5222d",
+			[`${token.componentCls}-trend-icon`]: { borderBlockEndColor: "#f5222d" }
+		} },
+		"&-trend-down": { [`${token.antCls}-statistic-content`]: {
+			color: "#389e0d",
+			[`${token.componentCls}-trend-icon`]: { borderBlockEndColor: "#52c41a" }
+		} },
+		"& &-layout-horizontal": {
+			display: "flex",
+			justifyContent: "space-between",
+			[`${token.antCls}-statistic-title`]: { marginBlockEnd: 0 },
+			[`${token.antCls}-statistic-content-value`]: { fontWeight: 500 },
+			[`${token.antCls}-statistic-title,${token.antCls}-statistic-content,${token.antCls}-statistic-content-suffix,${token.antCls}-statistic-content-prefix,${token.antCls}-statistic-content-value-decimal`]: { fontSize: token.fontSize }
+		},
+		"& &-layout-inline": {
+			display: "inline-flex",
+			color: token.colorTextSecondary,
+			[`${token.antCls}-statistic-title`]: {
+				marginInlineEnd: "6px",
+				marginBlockEnd: 0
+			},
+			[`${token.antCls}-statistic-content`]: { color: token.colorTextSecondary },
+			[`${token.antCls}-statistic-title,${token.antCls}-statistic-content,${token.antCls}-statistic-content-suffix,${token.antCls}-statistic-content-prefix,${token.antCls}-statistic-content-value-decimal`]: { fontSize: token.fontSizeSM }
+		}
+	} };
+};
+function useStyle(prefixCls) {
+	return useStyle$1("Statistic", (token) => {
+		return [genProStyle({
+			...token,
+			componentCls: `.${prefixCls.value}`
+		})];
+	});
+}
+//#endregion
+export { useStyle };

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

@@ -0,0 +1,30 @@
+import Statistic$1, { StatisticProps as StatisticProps$1 } from "../Statistic/index.js";
+import * as _$vue from "vue";
+import { VNode } from "vue";
+import { VueNode } from "@v-c/util";
+import { BorderBeamProps, CardProps } from "antdv-next";
+import { CustomSlotsType } from "@v-c/util/dist/type";
+
+//#region src/components/StatisticCard/index.d.ts
+interface StatisticCardProps extends CardProps {
+  /** 图表配置 */
+  chart?: VueNode;
+  headerBordered?: boolean;
+  /** 边框流光 */
+  borderBeam?: BorderBeamProps | boolean;
+  /** 数值统计配置 */
+  statistic?: StatisticProps$1;
+  /** Chart 相对于 statistic 的位置 */
+  chartPlacement?: 'right' | 'bottom' | 'left';
+  /** 底部额外展示区域 */
+  footer?: VueNode;
+}
+declare const _StatisticCard: _$vue.DefineSetupFnComponent<StatisticCardProps, {}, CustomSlotsType<{
+  default?: () => VNode[];
+}>, StatisticCardProps & {}, _$vue.PublicProps>;
+declare const StatisticCard: typeof _StatisticCard & {
+  isProCard?: boolean;
+  Statistic?: typeof Statistic$1;
+};
+//#endregion
+export { StatisticCardProps, StatisticCard as default };