@antdv-next1/pro-card 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 asuradaSong
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/ProCard.d.ts

@@ -0,0 +1,82 @@
+import { CollapsibleType } from "./typing.js";
+import * as _$vue from "vue";
+import { CSSProperties, Plugin, VNode } from "vue";
+import { VueNode } from "@antdv-next1/pro-utils";
+import { BorderBeamProps, CardProps, ColProps, RowProps } from "antdv-next";
+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';
+  /** 栅格间距 */
+  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;
+}
+declare const _ProCard: _$vue.DefineSetupFnComponent<ProCardProps, {}, CustomSlotsType<{
+  default?: () => VNode[];
+  extra?: () => VueNode;
+  title?: () => VueNode;
+}>, ProCardProps & {}, _$vue.PublicProps>;
+declare const ProCard: typeof _ProCard & Plugin & {
+  isProCard?: boolean;
+};
+//#endregion
+export { ProCardProps, ProCard as default };

package/dist/ProCard.js

@@ -0,0 +1,456 @@
+import useStyle from "./style/index.js";
+import { Fragment, computed, createTextVNode, createVNode, defineComponent, isVNode, mergeProps, ref, watch } from "vue";
+import { InfoCircleOutlined } from "@antdv-next/icons";
+import { childrenToArray, isSpecialNode } from "@antdv-next1/pro-utils";
+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/ProCard.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const ProCard = /* @__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;
+					const colProps = [
+						"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;
+					}, {});
+					console.log(colProps, element, "colProps");
+					return createVNode(Col, colProps, _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": title
+		}, 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": title
+		}, 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: {
+		tooltip: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		split: {
+			type: String,
+			required: false
+		},
+		direction: {
+			type: String,
+			required: false
+		},
+		gutter: {
+			type: [
+				Number,
+				null,
+				Object,
+				Array
+			],
+			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
+		},
+		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
+		},
+		align: {
+			type: [String, Object],
+			required: false
+		},
+		justify: {
+			type: [String, Object],
+			required: false
+		},
+		wrap: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		}
+	},
+	name: "ProCard",
+	inheritAttrs: false
+});
+ProCard.isProCard = true;
+ProCard.install = (app) => {
+	app.component(ProCard.name, ProCard);
+	return app;
+};
+//#endregion
+export { ProCard as default };

package/dist/components/CheckCard/CheckCard.d.ts

@@ -0,0 +1,46 @@
+import { ProCardProps } from "../../ProCard.js";
+import ProCheckCardGroup from "./Group.js";
+import * as _$vue from "vue";
+import { VNode } from "vue";
+import { BorderBeamProps, CardMetaProps, CardProps } from "antdv-next";
+import { CustomSlotsType } from "@v-c/util/dist/type";
+
+//#region src/components/CheckCard/CheckCard.d.ts
+type ProCheckCardProps = CardMetaProps & Omit<CardProps, 'title' | 'onTabChange' | 'activeTabKey' | 'defaultActiveTabKey' | 'headStyle' | 'bodyStyle' | 'tabBarExtraContent' | 'tabList' | 'type' | 'size'> & {
+  /** 边框流光 */borderBeam?: BorderBeamProps | boolean;
+  size?: CardProps['size'] | 'large';
+  checked?: boolean;
+  value?: string | number | boolean;
+  'onUpdate:value'?: (value: boolean) => void;
+  disabled?: boolean;
+  'onUpdate:checked'?: (checked: boolean) => void;
+  onChange?: (checked: boolean) => void;
+  defaultChecked?: boolean;
+  onClick?: (e: MouseEvent) => void;
+  collapsible?: ProCardProps['collapsible'];
+};
+declare const _ProCheckCard: _$vue.DefineSetupFnComponent<ProCheckCardProps, {}, CustomSlotsType<{
+  default?: () => VNode[];
+  avatar?: () => VNode[];
+  title?: () => VNode[];
+  extra?: () => VNode[];
+  cover?: () => VNode[];
+  description?: () => VNode[];
+}>, CardMetaProps & Omit<CardProps, "title" | "onTabChange" | "activeTabKey" | "defaultActiveTabKey" | "headStyle" | "bodyStyle" | "tabBarExtraContent" | "tabList" | "type" | "size"> & {
+  /** 边框流光 */borderBeam?: BorderBeamProps | boolean;
+  size?: CardProps["size"] | "large";
+  checked?: boolean;
+  value?: string | number | boolean;
+  'onUpdate:value'?: (value: boolean) => void;
+  disabled?: boolean;
+  'onUpdate:checked'?: (checked: boolean) => void;
+  onChange?: (checked: boolean) => void;
+  defaultChecked?: boolean;
+  onClick?: (e: MouseEvent) => void;
+  collapsible?: ProCardProps["collapsible"];
+} & {}, _$vue.PublicProps>;
+declare const ProCheckCard: typeof _ProCheckCard & {
+  Group?: typeof ProCheckCardGroup;
+};
+//#endregion
+export { ProCheckCardProps, ProCheckCard as default };