@antdv-next1/pro-card 1.0.0

package/dist/components/CheckCard/CheckCard.js

@@ -0,0 +1,265 @@
+import ProCard from "../../ProCard.js";
+import ProCheckCardGroup, { useCheckCardGroupContextInject } from "./Group.js";
+import { useStyle } from "./style/index.js";
+import { Fragment, computed, createVNode, defineComponent, isVNode, mergeProps, reactive, ref, toRef } from "vue";
+import { isNil, useEffect, useMountMergeState } from "@antdv-next1/pro-utils";
+import { classNames } from "@v-c/util";
+import { Avatar, CardMeta } from "antdv-next";
+import { useConfig } from "antdv-next/dist/config-provider/context";
+//#region src/components/CheckCard/CheckCard.tsx
+function getSizeCls(size) {
+	if (size === "large") return "lg";
+	if (size === "small") return "sm";
+	return "";
+}
+const ProCheckCard = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
+	const config = useConfig();
+	const prefixCls = computed(() => props.prefixCls || config.value.getPrefixCls("pro"));
+	const baseClassName = computed(() => `${prefixCls.value}-checkcard`);
+	const multiple = ref(false);
+	const checkCardGroupProvide = useCheckCardGroupContextInject();
+	const { wrapSSR, hashId } = useStyle(baseClassName);
+	const checkCardProps = reactive({});
+	const [stateChecked, setStateChecked] = useMountMergeState(props.defaultChecked || false, {
+		value: toRef(() => props.checked),
+		onChange: (checked) => {
+			props["onUpdate:checked"]?.(checked);
+			props.onChange?.(checked);
+		}
+	});
+	useEffect(() => {
+		checkCardProps.checked = stateChecked.value;
+		if (checkCardGroupProvide.value) {
+			checkCardProps.disabled = props.disabled || checkCardGroupProvide.value.disabled;
+			checkCardProps.loading = props.loading || checkCardGroupProvide.value.loading;
+			checkCardProps.bordered = props.bordered || checkCardGroupProvide.value.bordered;
+			multiple.value = checkCardGroupProvide.value.multiple;
+			const isChecked = checkCardGroupProvide.value.multiple ? checkCardGroupProvide.value.value?.includes(props.value) : checkCardGroupProvide.value.value === props.value;
+			checkCardProps.checked = checkCardProps.loading ? false : isChecked;
+			checkCardProps.size = props.size || checkCardGroupProvide.value.size;
+		}
+	}, [checkCardGroupProvide, stateChecked]);
+	useEffect(() => {
+		checkCardGroupProvide.value?.registerValue?.(props.value);
+		return () => checkCardGroupProvide.value?.cancelValue?.(props.value);
+	}, [() => props.value]);
+	const handleClick = (e) => {
+		props?.onClick?.(e);
+		const newChecked = !stateChecked.value;
+		if (checkCardGroupProvide.value && checkCardGroupProvide.value.value === props.value && !checkCardGroupProvide.value.multiple) return;
+		checkCardGroupProvide.value?.toggleOption?.({ value: props.value });
+		setStateChecked?.(newChecked);
+	};
+	return () => {
+		const { title, avatar, prefixCls, onChange, value, disabled: propsDisabled, defaultChecked, checked, "onUpdate:checked": onUpdateChecked, "onUpdate:value": onUpdateValue, description, borderBeam, size: propsSize, onClick, ...rest } = props;
+		Object.keys(rest).forEach((key) => {
+			checkCardProps[key] = rest[key];
+		});
+		const { disabled = propsDisabled || false, loading: cardLoading, bordered = true, size, checked: propsChecked = checked, cover, extra, ...restCardProps } = checkCardProps;
+		const sizeCls = getSizeCls(size || propsSize);
+		const avatarDom = isVNode(avatar) ? avatar : slots.avatar?.() || avatar && createVNode(Avatar, {
+			"size": 48,
+			"shape": "square",
+			"src": avatar
+		}, null);
+		const headerDom = isNil((slots.title?.() || title) ?? (slots.extra?.() || extra)) ? null : !(slots.extra?.() || extra) ? slots.title?.() || title : createVNode(Fragment, null, [createVNode("div", { "class": classNames(`${baseClassName.value}-meta-title-left`, hashId.value) }, [createVNode("div", { "class": classNames(`${baseClassName.value}-meta-title-left-text`, hashId.value) }, [slots.title?.() || title])]), createVNode("div", { "class": classNames(`${baseClassName.value}-meta-title-extra`, hashId.value) }, [slots.extra?.() || extra])]);
+		const descriptionDom = slots.description?.() || description;
+		const coverDom = cover || slots.cover?.();
+		return wrapSSR(createVNode(ProCard, mergeProps({
+			"style": attrs.style,
+			"class": classNames(baseClassName.value, attrs.class, hashId.value, {
+				[`${baseClassName.value}-checked`]: propsChecked,
+				[`${baseClassName.value}-multiple`]: checkCardProps.multiple,
+				[`${baseClassName.value}-disabled`]: disabled,
+				[`${baseClassName.value}-${sizeCls}`]: sizeCls
+			}),
+			"borderBeam": !propsChecked && borderBeam ? borderBeam : void 0,
+			"disabled": disabled
+		}, restCardProps, {
+			"loading": cardLoading,
+			"onClick": (e) => {
+				if (!cardLoading && !disabled) handleClick(e);
+			}
+		}), {
+			...coverDom && { cover: () => typeof coverDom === "string" ? createVNode("img", {
+				"src": coverDom,
+				"alt": "checkcard"
+			}, null) : coverDom },
+			...headerDom || avatarDom || descriptionDom || cardLoading ? { default: () => createVNode(CardMeta, {
+				"title": headerDom,
+				"description": descriptionDom,
+				"class": classNames(`${baseClassName.value}-meta`, hashId.value, {
+					[`${baseClassName.value}-meta-avatar-header`]: avatarDom && headerDom && !descriptionDom,
+					[`${baseClassName.value}-meta-extra-header`]: !isNil(slots.extra?.() || extra)
+				}),
+				"avatar": avatarDom
+			}, null) } : {}
+		}));
+	};
+}, {
+	props: {
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		avatar: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		title: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		description: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		classes: {
+			type: [Object, Function],
+			required: false
+		},
+		styles: {
+			type: [Object, Function],
+			required: false
+		},
+		extra: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		bordered: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		loading: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		hoverable: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		id: {
+			type: String,
+			required: false
+		},
+		cover: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		actions: {
+			type: Array,
+			required: false
+		},
+		tabProps: {
+			type: Object,
+			required: false
+		},
+		variant: {
+			type: String,
+			required: false
+		},
+		rootClass: {
+			type: String,
+			required: false
+		},
+		"onUpdate:activeTabKey": {
+			type: Function,
+			required: false
+		},
+		borderBeam: {
+			type: [Object, Boolean],
+			required: false,
+			default: void 0
+		},
+		size: { required: false },
+		checked: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		value: {
+			type: [
+				String,
+				Number,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		"onUpdate:value": {
+			type: Function,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		"onUpdate:checked": {
+			type: Function,
+			required: false
+		},
+		onChange: {
+			type: Function,
+			required: false
+		},
+		defaultChecked: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		onClick: {
+			type: Function,
+			required: false
+		},
+		collapsible: { required: false }
+	},
+	name: "ProCheckCard",
+	inheritAttrs: false
+});
+ProCheckCard.Group = ProCheckCardGroup;
+//#endregion
+export { ProCheckCard as default };

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

@@ -0,0 +1,154 @@
+import { ComputedRef, FunctionalComponent, InjectionKey } from "vue";
+import { Key, VueNode } from "@antdv-next1/pro-utils";
+
+//#region src/components/CheckCard/Group.d.ts
+type CheckCardValueType = string | number | boolean;
+/**
+ * Represents the possible value types for a CheckGroup.
+ * It can be an array of CheckCardValueTypes, a single CheckCardValueType, or undefined.
+ */
+type CheckGroupValueType = CheckCardValueType[] | CheckCardValueType | undefined;
+/**
+ * Represents an option for a CheckCard component.
+ */
+interface CheckCardItemType {
+  key?: Key;
+  /**
+   * The title to be displayed.
+   *
+   * @title Title
+   */
+  title?: VueNode;
+  /**
+   * The value of the option.
+   *
+   * @title Value
+   */
+  value: CheckCardValueType;
+  /**
+   * The description to be displayed.
+   *
+   * @title Description
+   */
+  description?: VueNode;
+  /**
+   * The size of the component. Supports three default sizes: 'large', 'default', 'small'.
+   * Users can also customize the width and height.
+   *
+   * @default default
+   * @title Component Size
+   */
+  size?: 'large' | 'default' | 'small';
+  /**
+   * The avatar to be displayed on the left side. Can be a link or a ReactNode.
+   *
+   * @title Left Avatar Area
+   */
+  avatar?: VueNode;
+  /**
+   * The cover image. In this mode, other display values are ignored.
+   *
+   * @title Cover Image
+   */
+  cover?: VueNode;
+  /**
+   * Specifies if the option is disabled.
+   *
+   * @default false
+   * @title Disabled
+   */
+  disabled?: boolean;
+  /**
+   * Change callback function.
+   *
+   * @param checked - Indicates whether the option is checked or not.
+   * @title Change Callback
+   */
+  onChange?: (checked: boolean) => void;
+}
+interface CheckCardItemGroupType {
+  title?: string;
+  key?: Key;
+  /**
+   * Child options.
+   */
+  children: CheckCardItemType[];
+}
+type CheckCardOptionType = string | CheckCardItemType | CheckCardItemGroupType;
+/**
+ * Represents the props for the CheckCardGroup component.
+ */
+interface CheckCardGroupContextType {
+  /**
+   * A function to toggle the selected option.
+   * @param option - The option to toggle.
+   */
+  toggleOption?: (option: CheckCardItemType) => void;
+  /**
+   * The currently selected value.
+   */
+  value?: any;
+  /**
+   * Specifies whether the component is disabled.
+   */
+  disabled?: boolean;
+  /**
+   * The size of the component.
+   */
+  size?: any;
+  /**
+   * Specifies whether the component is in a loading state.
+   */
+  loading?: any;
+  /**
+   * Specifies whether the component has a border.
+   */
+  bordered?: any;
+  /**
+   * Specifies whether multiple options can be selected.
+   */
+  multiple?: boolean;
+  /**
+   * A function to register a value.
+   * @param value - The value to register.
+   */
+  registerValue?: (value: any) => void;
+  /**
+   * A function to cancel a value.
+   * @param value - The value to cancel.
+   */
+  cancelValue?: (value: any) => void;
+}
+declare const checkCardGroupContextKey: InjectionKey<ComputedRef<CheckCardGroupContextType>>;
+declare function useCheckCardGroupContextProvider(props: ComputedRef<CheckCardGroupContextType>): void;
+declare function useCheckCardGroupContextInject(): ComputedRef<CheckCardGroupContextType>;
+interface ProCheckCardGroupProps {
+  prefixCls?: string;
+  disabled?: boolean;
+  /**
+   * 是否多选
+   *
+   * @title 是否多选
+   */
+  multiple?: boolean;
+  /**
+   * 默认选中的选项
+   *
+   * @title 默认选中的选项
+   */
+  defaultValue?: CheckGroupValueType;
+  /**
+   * 指定选中的选项
+   *
+   * @title 指定选中的选项
+   */
+  value?: CheckGroupValueType;
+  'onUpdate:value'?: (value: CheckGroupValueType) => void;
+  onChange?: (value: CheckGroupValueType) => void;
+  options?: CheckCardOptionType[];
+  loading?: boolean;
+  size?: 'large' | 'default' | 'small';
+}
+declare const ProCheckCardGroup: FunctionalComponent<ProCheckCardGroupProps>;
+//#endregion
+export { CheckCardGroupContextType, CheckCardItemGroupType, CheckCardItemType, CheckCardOptionType, CheckCardValueType, CheckGroupValueType, ProCheckCardGroupProps, checkCardGroupContextKey, ProCheckCardGroup as default, useCheckCardGroupContextInject, useCheckCardGroupContextProvider };

package/dist/components/CheckCard/Group.js

@@ -0,0 +1,183 @@
+import ProCard from "../../ProCard.js";
+import { useStyle as useStyle$1 } from "./style/group.js";
+import ProCheckCard from "./CheckCard.js";
+import { computed, createVNode, defineComponent, inject, provide, shallowRef, toRef } from "vue";
+import { childrenToArray, isSpecialNode, useMountMergeState } from "@antdv-next1/pro-utils";
+import { classNames } from "@v-c/util";
+import { useConfig } from "antdv-next/dist/config-provider/context";
+import { ProConfigProvider } from "@antdv-next1/pro-provider";
+//#region src/components/CheckCard/Group.tsx
+/**
+* Represents the possible value types for a CheckGroup.
+* It can be an array of CheckCardValueTypes, a single CheckCardValueType, or undefined.
+*/
+/**
+* Represents an option for a CheckCard component.
+*/
+/**
+* Represents the props for the CheckCardGroup component.
+*/
+const checkCardGroupContextKey = Symbol("checkCardGroupContext");
+function useCheckCardGroupContextProvider(props) {
+	return provide(checkCardGroupContextKey, props);
+}
+function useCheckCardGroupContextInject() {
+	return inject(checkCardGroupContextKey, computed(() => void 0));
+}
+const InternalCheckCardGroup = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
+	const config = useConfig();
+	const prefixCls = computed(() => props.prefixCls || config.value.getPrefixCls("pro"));
+	const baseClassName = computed(() => `${prefixCls.value}-checkcard-group`);
+	const registerValueMap = shallowRef(/* @__PURE__ */ new Map());
+	const { wrapSSR, hashId } = useStyle$1(baseClassName);
+	const [stateValue, setStateValue] = useMountMergeState(props.defaultValue, {
+		value: toRef(() => props.value),
+		onChange: (value) => {
+			props.onChange?.(value);
+			props["onUpdate:value"]?.(value);
+		}
+	});
+	const registerValue = (value) => registerValueMap.value?.set(value, true);
+	const cancelValue = (value) => registerValueMap.value?.delete(value);
+	const getOptions = (options = []) => options.map((option) => {
+		if (typeof option === "string") return {
+			title: option,
+			value: option
+		};
+		return option;
+	});
+	const children = computed(() => {
+		if (props.loading) return Array.from({ length: props.options?.length || childrenToArray(slots.default?.()).filter((vnode) => !isSpecialNode(vnode)).length || 1 }).fill(0).map((_, index) => createVNode(ProCheckCard, {
+			"key": index,
+			"loading": true
+		}, null));
+		if (getOptions(props.options) && getOptions(props.options).length > 0) {
+			const optionValue = stateValue.value;
+			const renderOptions = (list) => {
+				return list.map((option, index) => {
+					if (option?.children && option?.children.length > 0) return createVNode(ProCard, {
+						"collapsible": true,
+						"key": option.title?.toString() || index.toString(),
+						"title": option.title,
+						"style": { flex: "0 0 100%" }
+					}, { default: () => renderOptions(option?.children) });
+					return createVNode(ProCheckCard, {
+						"key": option.value.toString(),
+						"disabled": option.disabled,
+						"size": option.size ?? props.size,
+						"value": option.value,
+						"checked": props.multiple ? optionValue?.includes(option.value) : optionValue === option.value,
+						"onChange": option.onChange,
+						"title": option.title,
+						"avatar": option.avatar,
+						"description": option.description,
+						"cover": option.cover
+					}, null);
+				});
+			};
+			return renderOptions(getOptions(props.options));
+		}
+		return slots.default?.();
+	});
+	const toggleOption = (option) => {
+		if (!props.multiple) {
+			let changeValue;
+			changeValue = stateValue.value;
+			if (changeValue === option.value) changeValue = void 0;
+			else changeValue = option.value;
+			setStateValue?.(changeValue);
+		}
+		if (props.multiple) {
+			let changeValue = [];
+			const stateValues = stateValue.value;
+			const hasOption = stateValues?.includes(option.value);
+			changeValue = [...stateValues || []];
+			if (!hasOption) changeValue.push(option.value);
+			if (hasOption) changeValue = changeValue.filter((itemValue) => itemValue !== option.value);
+			const newOptions = getOptions(props.options);
+			const newValue = changeValue?.filter((val) => registerValueMap.value.has(val))?.sort((a, b) => {
+				return newOptions.findIndex((opt) => opt.value === a) - newOptions.findIndex((opt) => opt.value === b);
+			});
+			setStateValue(newValue);
+		}
+	};
+	useCheckCardGroupContextProvider(computed(() => ({
+		toggleOption,
+		value: stateValue.value,
+		disabled: props.disabled,
+		size: props.size,
+		loading: props.loading,
+		multiple: props.multiple,
+		registerValue,
+		cancelValue
+	})));
+	return () => wrapSSR(createVNode("div", {
+		"class": classNames(baseClassName.value, hashId.value),
+		"style": attrs.style
+	}, [children.value]));
+}, {
+	props: {
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		multiple: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		defaultValue: {
+			type: [
+				Array,
+				String,
+				Number,
+				Boolean,
+				null
+			],
+			required: false,
+			default: void 0
+		},
+		value: {
+			type: [
+				Array,
+				String,
+				Number,
+				Boolean,
+				null
+			],
+			required: false,
+			default: void 0
+		},
+		"onUpdate:value": {
+			type: Function,
+			required: false
+		},
+		onChange: {
+			type: Function,
+			required: false
+		},
+		options: {
+			type: Array,
+			required: false
+		},
+		loading: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		size: {
+			type: String,
+			required: false
+		}
+	},
+	name: "InternalCheckCardGroup",
+	inheritAttrs: false
+});
+const ProCheckCardGroup = (props, { slots }) => createVNode(ProConfigProvider, { "needDeps": true }, { default: () => [createVNode(InternalCheckCardGroup, props, slots)] });
+//#endregion
+export { checkCardGroupContextKey, ProCheckCardGroup as default, useCheckCardGroupContextInject, useCheckCardGroupContextProvider };

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

@@ -0,0 +1,3 @@
+import ProCheckCardGroup, { ProCheckCardGroupProps } from "./Group.js";
+import ProCheckCard, { ProCheckCardProps } from "./CheckCard.js";
+export { ProCheckCard, ProCheckCardGroup, type ProCheckCardGroupProps, type ProCheckCardProps };

package/dist/components/CheckCard/index.js

@@ -0,0 +1,3 @@
+import ProCheckCardGroup from "./Group.js";
+import ProCheckCard from "./CheckCard.js";
+export { ProCheckCard, ProCheckCardGroup };

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

@@ -0,0 +1,13 @@
+import { ComputedRef } from "vue";
+import * as _$_antdv_next1_pro_provider0 from "@antdv-next1/pro-provider";
+import { ProAliasToken } from "@antdv-next1/pro-provider";
+import { Keyframes } from "@antdv-next/cssinjs";
+
+//#region src/components/CheckCard/style/group.d.ts
+interface ProCheckCardGroupToken extends ProAliasToken {
+  componentCls: string;
+}
+declare const cardLoading: Keyframes;
+declare function useStyle(prefixCls: ComputedRef<string>): _$_antdv_next1_pro_provider0.UseStyleResult;
+//#endregion
+export { ProCheckCardGroupToken, cardLoading, useStyle };

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

@@ -0,0 +1,32 @@
+import { useStyle as useStyle$1 } from "@antdv-next1/pro-provider";
+import { Keyframes } from "@antdv-next/cssinjs";
+//#region src/components/CheckCard/style/group.ts
+const cardLoading = new Keyframes("card-loading", {
+	"0%": { backgroundPosition: "0 50%" },
+	"50%": { backgroundPosition: "100% 50%" },
+	"100%": { backgroundPosition: "0 50%" }
+});
+const genProCheckCardGroupStyle = (token) => {
+	return { [token.componentCls]: {
+		display: "inline-flex",
+		flexWrap: "wrap",
+		columnGap: token.margin,
+		rowGap: token.margin,
+		position: "relative",
+		[`${token.antCls}-row`]: { width: "100%" },
+		[`${token.proComponentsCls}-card${token.proComponentsCls}-checkcard`]: {
+			marginInlineEnd: 0,
+			marginBlockEnd: 0
+		}
+	} };
+};
+function useStyle(prefixCls) {
+	return useStyle$1("ProCheckCardGroup", (token) => {
+		return [genProCheckCardGroupStyle({
+			...token,
+			componentCls: `.${prefixCls.value}`
+		})];
+	});
+}
+//#endregion
+export { cardLoading, useStyle };

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

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