@antdv-next1/pro-card 2.0.8 → 2.0.10

package/dist/Card.d.ts

@@ -0,0 +1,54 @@
+import { CollapsibleType } from "./typing.js";
+import { ProCardProps } from "./ProCard.js";
+import * as _$vue from "vue";
+import { CSSProperties, VNode } from "vue";
+import { VueNode } from "@antdv-next1/pro-utils";
+import * as _$antdv_next0 from "antdv-next";
+import { ColProps } from "antdv-next";
+import { CustomSlotsType } from "@v-c/util/dist/type";
+import { Gutter } from "antdv-next/dist/grid/row";
+
+//#region src/Card.d.ts
+declare const InternalProCard: _$vue.DefineSetupFnComponent<ProCardProps, {}, CustomSlotsType<{
+  default?: () => VNode[];
+  extra?: () => VueNode;
+  title?: () => VueNode;
+}>, _$antdv_next0.CardProps & _$antdv_next0.RowProps & {
+  tooltip?: VueNode;
+  split?: "vertical" | "horizontal";
+  direction?: "column" | "row";
+  gutter?: Gutter | [Gutter, Gutter];
+  colStyle?: CSSProperties;
+  borderBeam?: _$antdv_next0.BorderBeamProps | boolean;
+  layout?: "default" | "center";
+  boxShadow?: boolean;
+  disabled?: boolean;
+  headerBordered?: boolean;
+  ghost?: boolean;
+  collapsible?: CollapsibleType;
+  collapsed?: boolean;
+  collapsibleIconRender?: ({
+    collapsed
+  }: {
+    collapsed: boolean;
+  }) => VueNode;
+  defaultCollapsed?: boolean;
+  onCollapse?: (collapsed: boolean) => void;
+  checked?: boolean;
+  onChecked?: (e: MouseEvent) => void;
+  colSpan?: ColProps["span"];
+  colOffset?: ColProps["offset"];
+  colFlex?: ColProps["flex"];
+  colOrder?: ColProps["order"];
+  colPull?: ColProps["pull"];
+  colPush?: ColProps["push"];
+  colXs?: ColProps["xs"];
+  colSm?: ColProps["sm"];
+  colMd?: ColProps["md"];
+  colLg?: ColProps["lg"];
+  colXl?: ColProps["xl"];
+  colXxl?: ColProps["xxl"];
+  onClick?: (e: MouseEvent) => void;
+} & {}, _$vue.PublicProps>;
+//#endregion
+export { InternalProCard as default };

package/dist/Card.js

@@ -0,0 +1,443 @@
+import useStyle from "./style/index.js";
+import { Fragment, computed, createTextVNode, createVNode, defineComponent, isVNode, mergeProps, ref, watch } from "vue";
+import { childrenToArray, isSpecialNode } from "@antdv-next1/pro-utils";
+import { InfoCircleOutlined } from "@antdv-next/icons";
+import { classNames } from "@v-c/util";
+import { BorderBeam, Card, Col, Collapse, Row, Tooltip, useBreakpoint } from "antdv-next";
+import { responsiveArray } from "antdv-next/dist/_util/responsiveObserver";
+import { useConfig } from "antdv-next/dist/config-provider/context";
+//#region src/Card.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const InternalProCard = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
+	const config = useConfig();
+	const prefixCls = computed(() => props.prefixCls || config.value.getPrefixCls("pro"));
+	const baseClassName = computed(() => `${prefixCls.value}-card`);
+	const { wrapSSR, hashId } = useStyle(baseClassName);
+	const activeKey = ref();
+	const screens = useBreakpoint();
+	/**
+	* 根据响应式获取 gutter, 参考 antd 实现
+	* @param gut
+	*/
+	const getNormalizedGutter = (gut) => {
+		const results = [0, 0];
+		(Array.isArray(gut) ? gut : [gut, 0]).forEach((g, index) => {
+			if (typeof g === "object") for (let i = 0; i < responsiveArray.length; i += 1) {
+				const breakpoint = responsiveArray[i];
+				if (screens.value?.[breakpoint] && g[breakpoint] !== void 0) {
+					results[index] = g[breakpoint];
+					break;
+				}
+			}
+			else results[index] = g || 0;
+		});
+		return results;
+	};
+	/**
+	* 根据条件返回 style.ts，负责返回空对象
+	*
+	* @param withStyle 是否符合条件
+	* @param appendStyle 如果符合条件要返回的 style.ts 属性
+	*/
+	const getStyle = (withStyle, appendStyle) => {
+		return withStyle ? appendStyle : {};
+	};
+	watch(() => props.defaultCollapsed, (next) => {
+		if (!next) activeKey.value = ["collapseCard"];
+	}, { immediate: true });
+	let containProCard = false;
+	const slotTitleProps = computed(() => {
+		if (props.title && props.tooltip || slots.title && props.tooltip) return { title: () => createVNode(Fragment, null, [props.title || slots.title?.(), createVNode(Tooltip, null, {
+			default: () => [createVNode(InfoCircleOutlined, { "style": {
+				marginInlineStart: "4px",
+				cursor: "pointer"
+			} }, null)],
+			title: () => props.tooltip
+		})]) };
+		if (slots.title && !props.tooltip) return { title: slots.title };
+		return {};
+	});
+	return () => {
+		const { ghost, direction, boxShadow, colSpan, split, align, borderBeam, colStyle, headerBordered = false, collapsible = false, collapsibleIconRender, collapsed: controlCollapsed, defaultCollapsed = false, onChecked, checked, onCollapse, justify, colLg, colFlex, colMd, colXl, colXxl, colSm, colPush, colPull, colXs, disabled, gutter = 0, title, tooltip, ...rest } = props;
+		const [horizontalGutter, verticalGutter] = getNormalizedGutter(gutter);
+		const { default: children, title: slotTitle, ...restSlots } = slots;
+		const childrenDom = childrenToArray(children?.())?.map((element) => {
+			if (isVNode(element) && !isSpecialNode(element)) {
+				if (element.props && element.type.isProCard && direction === "column") {
+					const colBreakpointKeyList = [
+						"span",
+						"flex",
+						"offset",
+						"order",
+						"pull",
+						"push",
+						"xs",
+						"sm",
+						"md",
+						"lg",
+						"xl",
+						"xxl"
+					];
+					const colPropsClass = Object.entries(element.props).reduce((prev, [key, value]) => {
+						const keys = key.split("-");
+						if (colBreakpointKeyList.includes(keys[keys.length - 1])) if (["span", "flex"].includes(keys[keys.length - 1])) prev[`${baseClassName.value}-${keys[keys.length - 2]}-${value}`] = true;
+						else prev[`${baseClassName.value}-${key}-${value}`] = true;
+						return prev;
+					}, {});
+					containProCard = true;
+					return createVNode("div", {
+						"style": {
+							...getStyle(horizontalGutter > 0, {
+								paddingInlineEnd: `${horizontalGutter / 2}px`,
+								paddingInlineStart: `${horizontalGutter / 2}px`
+							}),
+							...getStyle(verticalGutter > 0, {
+								paddingBlockStart: `${verticalGutter / 2}px`,
+								paddingBlockEnd: `${verticalGutter / 2}px`
+							})
+						},
+						"class": classNames([`${baseClassName.value}-col`], colPropsClass)
+					}, [element]);
+				}
+				if (element.type.isProCard) {
+					containProCard = true;
+					return createVNode(Col, [
+						"span",
+						"flex",
+						"offset",
+						"order",
+						"pull",
+						"push",
+						"xs",
+						"sm",
+						"md",
+						"lg",
+						"xl",
+						"xxl"
+					].reduce((prev, key) => {
+						if (element.props?.[`col-${key}`] !== void 0) prev[key] = element.props?.[`col-${key}`];
+						return prev;
+					}, {}), _isSlot(element) ? element : { default: () => [element] });
+				}
+			}
+			return element;
+		});
+		return wrapSSR(createVNode(Fragment, null, [collapsible ? createVNode(Collapse, mergeProps({ "bordered": rest.variant !== "borderless" }, defaultCollapsed ? {} : { activeKey: activeKey.value }, {
+			"class": classNames(baseClassName.value, attrs.class, hashId.value),
+			"ghost": !ghost
+		}), { default: () => [createTextVNode("asdsa")] }) : createVNode(Fragment, null, [rest.variant !== "borderless" && borderBeam && !disabled ? createVNode(BorderBeam, typeof borderBeam === "boolean" ? {} : borderBeam, { default: () => [createVNode(Card, mergeProps(attrs, rest, { "class": classNames(baseClassName.value, attrs.class, hashId.value, {
+			[`${baseClassName.value}-direction-column`]: split === "horizontal" || direction === "column",
+			[`${baseClassName.value}-ghost`]: ghost,
+			[`${baseClassName.value}-box-shadow`]: boxShadow,
+			[`${baseClassName.value}-contain-card`]: containProCard
+		}) }, title && !tooltip && !slotTitle ? { title } : {}, { "styles": {
+			header: headerBordered ? {} : { borderBlockEnd: "none" },
+			...rest.styles
+		} }), {
+			default: () => [direction !== "column" && containProCard ? createVNode(Row, { "gutter": gutter }, _isSlot(childrenDom) ? childrenDom : { default: () => [childrenDom] }) : ghost && containProCard ? createVNode("div", {
+				"class": `${baseClassName.value}-column`,
+				"style": {
+					...getStyle(horizontalGutter > 0, {
+						marginInlineEnd: `-${horizontalGutter / 2}px`,
+						marginInlineStart: `-${horizontalGutter / 2}px`
+					}),
+					...getStyle(verticalGutter > 0, {
+						marginBlockStart: `-${verticalGutter / 2}px`,
+						marginBlockEnd: `-${verticalGutter / 2}px`
+					})
+				}
+			}, [childrenDom]) : childrenDom],
+			...restSlots,
+			...slotTitleProps.value
+		})] }) : createVNode(Card, mergeProps(attrs, rest, { "class": classNames(baseClassName.value, attrs.class, hashId.value, {
+			[`${baseClassName.value}-direction-column`]: split === "horizontal" || direction === "column",
+			[`${baseClassName.value}-ghost`]: ghost,
+			[`${baseClassName.value}-disabled`]: disabled,
+			[`${baseClassName.value}-box-shadow`]: boxShadow,
+			[`${baseClassName.value}-contain-card`]: containProCard
+		}) }, title && !tooltip && !slotTitle ? { title } : {}, { "styles": {
+			header: headerBordered ? {} : { borderBlockEnd: "none" },
+			...rest.styles
+		} }), {
+			default: () => [direction !== "column" && containProCard ? createVNode(Row, { "gutter": gutter }, _isSlot(childrenDom) ? childrenDom : { default: () => [childrenDom] }) : ghost && containProCard ? createVNode("div", {
+				"class": `${baseClassName.value}-column`,
+				"style": {
+					...getStyle(horizontalGutter > 0, {
+						marginInlineEnd: `-${horizontalGutter / 2}px`,
+						marginInlineStart: `-${horizontalGutter / 2}px`
+					}),
+					...getStyle(verticalGutter > 0, {
+						marginBlockStart: `-${verticalGutter / 2}px`,
+						marginBlockEnd: `-${verticalGutter / 2}px`
+					})
+				}
+			}, [childrenDom]) : childrenDom],
+			...restSlots,
+			...slotTitleProps.value
+		})])]));
+	};
+}, {
+	props: {
+		title: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		extra: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		bordered: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		headStyle: {
+			type: Object,
+			required: false
+		},
+		bodyStyle: {
+			type: Object,
+			required: false
+		},
+		loading: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		hoverable: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		id: {
+			type: String,
+			required: false
+		},
+		size: {
+			type: String,
+			required: false
+		},
+		type: {
+			type: String,
+			required: false
+		},
+		cover: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		actions: {
+			type: Array,
+			required: false
+		},
+		tabList: {
+			type: Array,
+			required: false
+		},
+		tabBarExtraContent: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		activeTabKey: {
+			type: String,
+			required: false
+		},
+		defaultActiveTabKey: {
+			type: String,
+			required: false
+		},
+		tabProps: {
+			type: Object,
+			required: false
+		},
+		classes: {
+			type: [Object, Function],
+			required: false
+		},
+		styles: {
+			type: [Object, Function],
+			required: false
+		},
+		variant: {
+			type: String,
+			required: false
+		},
+		rootClass: {
+			type: String,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		onTabChange: {
+			type: Function,
+			required: false
+		},
+		"onUpdate:activeTabKey": {
+			type: Function,
+			required: false
+		},
+		gutter: {
+			type: [
+				Number,
+				null,
+				Object,
+				Array
+			],
+			required: false
+		},
+		align: {
+			type: [String, Object],
+			required: false
+		},
+		justify: {
+			type: [String, Object],
+			required: false
+		},
+		wrap: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		tooltip: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		split: {
+			type: String,
+			required: false
+		},
+		direction: {
+			type: String,
+			required: false
+		},
+		colStyle: {
+			type: Object,
+			required: false
+		},
+		borderBeam: {
+			type: [Object, Boolean],
+			required: false,
+			default: void 0
+		},
+		layout: {
+			type: String,
+			required: false
+		},
+		boxShadow: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		headerBordered: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		ghost: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		collapsible: {
+			type: [String, Boolean],
+			required: false,
+			default: void 0
+		},
+		collapsed: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		collapsibleIconRender: {
+			type: Function,
+			required: false
+		},
+		defaultCollapsed: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		onCollapse: {
+			type: Function,
+			required: false
+		},
+		checked: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		onChecked: {
+			type: Function,
+			required: false
+		},
+		colSpan: { required: false },
+		colOffset: { required: false },
+		colFlex: { required: false },
+		colOrder: { required: false },
+		colPull: { required: false },
+		colPush: { required: false },
+		colXs: { required: false },
+		colSm: { required: false },
+		colMd: { required: false },
+		colLg: { required: false },
+		colXl: { required: false },
+		colXxl: { required: false },
+		onClick: {
+			type: Function,
+			required: false
+		}
+	},
+	name: "InternalProCard",
+	inheritAttrs: false
+});
+//#endregion
+export { InternalProCard as default };

package/dist/ProCard.d.ts

@@ -7,74 +7,84 @@ import { CustomSlotsType } from "@v-c/util/dist/type";
 import { Gutter } from "antdv-next/dist/grid/row";
 
 //#region src/ProCard.d.ts
-interface ProCardProps extends CardProps, RowProps {
-  /** 标题说明 */
-  tooltip?: VueNode;
-  /** 拆分卡片方式 */
-  split?: 'vertical' | 'horizontal';
-  /** 指定 Flex 方向，仅在嵌套子卡片时有效 */
-  direction?: 'column' | 'row';
-  /** 栅格间距 */
+type ProCardProps = CardProps & RowProps & {
+  /** 标题说明 */tooltip?: VueNode; /** 拆分卡片方式 */
+  split?: 'vertical' | 'horizontal'; /** 指定 Flex 方向，仅在嵌套子卡片时有效 */
+  direction?: 'column' | 'row'; /** 栅格间距 */
   gutter?: Gutter | [Gutter, Gutter];
-  colStyle?: CSSProperties;
-  /** 边框流光 */
-  borderBeam?: BorderBeamProps | boolean;
-  /** 布局，center 代表垂直居中 */
-  layout?: 'default' | 'center';
-  /** 是否有卡片阴影 */
+  colStyle?: CSSProperties; /** 边框流光 */
+  borderBeam?: BorderBeamProps | boolean; /** 布局，center 代表垂直居中 */
+  layout?: 'default' | 'center'; /** 是否有卡片阴影 */
   boxShadow?: boolean;
-  disabled?: boolean;
-  /** 头部是否有分割线 */
-  headerBordered?: boolean;
-  /** 幽灵模式，即是否取消卡片内容区域的 padding 和 背景颜色。 */
+  disabled?: boolean; /** 头部是否有分割线 */
+  headerBordered?: boolean; /** 幽灵模式，即是否取消卡片内容区域的 padding 和 背景颜色。 */
   ghost?: boolean;
-  collapsible?: CollapsibleType;
-  /** 受控 collapsed 属性 */
-  collapsed?: boolean;
-  /** 折叠按钮自定义节点 */
+  collapsible?: CollapsibleType; /** 受控 collapsed 属性 */
+  collapsed?: boolean; /** 折叠按钮自定义节点 */
   collapsibleIconRender?: ({
     collapsed
   }: {
     collapsed: boolean;
-  }) => VueNode;
-  /** 配置默认是否折叠 */
-  defaultCollapsed?: boolean;
-  /** 收起卡片的事件 */
-  onCollapse?: (collapsed: boolean) => void;
-  /** 是否展示选中样式 */
-  checked?: boolean;
-  /** 选中改变 */
-  onChecked?: (e: MouseEvent) => void;
-  /** 栅格占位格数，24 栅格，colSpan={6} */
-  colSpan?: ColProps['span'];
-  /** 栅格左侧的间隔格数，间隔内不可以有栅格 */
-  colOffset?: ColProps['offset'];
-  /** flex 布局填充 */
-  colFlex?: ColProps['flex'];
-  /** 栅格顺序，flex 布局模式下有效 */
-  colOrder?: ColProps['order'];
-  /** 栅格向左移动格数 */
+  }) => VueNode; /** 配置默认是否折叠 */
+  defaultCollapsed?: boolean; /** 收起卡片的事件 */
+  onCollapse?: (collapsed: boolean) => void; /** 是否展示选中样式 */
+  checked?: boolean; /** 选中改变 */
+  onChecked?: (e: MouseEvent) => void; /** 栅格占位格数，24 栅格，colSpan={6} */
+  colSpan?: ColProps['span']; /** 栅格左侧的间隔格数，间隔内不可以有栅格 */
+  colOffset?: ColProps['offset']; /** flex 布局填充 */
+  colFlex?: ColProps['flex']; /** 栅格顺序，flex 布局模式下有效 */
+  colOrder?: ColProps['order']; /** 栅格向左移动格数 */
   colPull?: ColProps['pull'];
-  colPush?: ColProps['push'];
-  /** <576px 响应式栅格，可为栅格数或一个包含其他属性的对象 */
-  colXs?: ColProps['xs'];
-  /**  ≥576px 响应式栅格，可为栅格数或一个包含其他属性的对象 */
-  colSm?: ColProps['sm'];
-  /** ≥768px 响应式栅格，可为栅格数或一个包含其他属性的对象 */
-  colMd?: ColProps['md'];
-  /** ≥992px 响应式栅格，可为栅格数或一个包含其他属性的对象 */
-  colLg?: ColProps['lg'];
-  /** ≥1200px 响应式栅格，可为栅格数或一个包含其他属性的对象 */
-  colXl?: ColProps['xl'];
-  /** ≥1600px 响应式栅格，可为栅格数或一个包含其他属性的对象 */
+  colPush?: ColProps['push']; /** <576px 响应式栅格，可为栅格数或一个包含其他属性的对象 */
+  colXs?: ColProps['xs']; /**  ≥576px 响应式栅格，可为栅格数或一个包含其他属性的对象 */
+  colSm?: ColProps['sm']; /** ≥768px 响应式栅格，可为栅格数或一个包含其他属性的对象 */
+  colMd?: ColProps['md']; /** ≥992px 响应式栅格，可为栅格数或一个包含其他属性的对象 */
+  colLg?: ColProps['lg']; /** ≥1200px 响应式栅格，可为栅格数或一个包含其他属性的对象 */
+  colXl?: ColProps['xl']; /** ≥1600px 响应式栅格，可为栅格数或一个包含其他属性的对象 */
   colXxl?: ColProps['xxl'];
   onClick?: (e: MouseEvent) => void;
-}
+};
 declare const _ProCard: _$vue.DefineSetupFnComponent<ProCardProps, {}, CustomSlotsType<{
   default?: () => VNode[];
   extra?: () => VueNode;
   title?: () => VueNode;
-}>, ProCardProps & {}, _$vue.PublicProps>;
+}>, CardProps & RowProps & {
+  /** 标题说明 */tooltip?: VueNode; /** 拆分卡片方式 */
+  split?: "vertical" | "horizontal"; /** 指定 Flex 方向，仅在嵌套子卡片时有效 */
+  direction?: "column" | "row"; /** 栅格间距 */
+  gutter?: Gutter | [Gutter, Gutter];
+  colStyle?: CSSProperties; /** 边框流光 */
+  borderBeam?: BorderBeamProps | boolean; /** 布局，center 代表垂直居中 */
+  layout?: "default" | "center"; /** 是否有卡片阴影 */
+  boxShadow?: boolean;
+  disabled?: boolean; /** 头部是否有分割线 */
+  headerBordered?: boolean; /** 幽灵模式，即是否取消卡片内容区域的 padding 和 背景颜色。 */
+  ghost?: boolean;
+  collapsible?: CollapsibleType; /** 受控 collapsed 属性 */
+  collapsed?: boolean; /** 折叠按钮自定义节点 */
+  collapsibleIconRender?: ({
+    collapsed
+  }: {
+    collapsed: boolean;
+  }) => VueNode; /** 配置默认是否折叠 */
+  defaultCollapsed?: boolean; /** 收起卡片的事件 */
+  onCollapse?: (collapsed: boolean) => void; /** 是否展示选中样式 */
+  checked?: boolean; /** 选中改变 */
+  onChecked?: (e: MouseEvent) => void; /** 栅格占位格数，24 栅格，colSpan={6} */
+  colSpan?: ColProps["span"]; /** 栅格左侧的间隔格数，间隔内不可以有栅格 */
+  colOffset?: ColProps["offset"]; /** flex 布局填充 */
+  colFlex?: ColProps["flex"]; /** 栅格顺序，flex 布局模式下有效 */
+  colOrder?: ColProps["order"]; /** 栅格向左移动格数 */
+  colPull?: ColProps["pull"];
+  colPush?: ColProps["push"]; /** <576px 响应式栅格，可为栅格数或一个包含其他属性的对象 */
+  colXs?: ColProps["xs"]; /**  ≥576px 响应式栅格，可为栅格数或一个包含其他属性的对象 */
+  colSm?: ColProps["sm"]; /** ≥768px 响应式栅格，可为栅格数或一个包含其他属性的对象 */
+  colMd?: ColProps["md"]; /** ≥992px 响应式栅格，可为栅格数或一个包含其他属性的对象 */
+  colLg?: ColProps["lg"]; /** ≥1200px 响应式栅格，可为栅格数或一个包含其他属性的对象 */
+  colXl?: ColProps["xl"]; /** ≥1600px 响应式栅格，可为栅格数或一个包含其他属性的对象 */
+  colXxl?: ColProps["xxl"];
+  onClick?: (e: MouseEvent) => void;
+} & {}, _$vue.PublicProps>;
 declare const ProCard: typeof _ProCard & Plugin & {
   isProCard?: boolean;
 };