@zboson/ui 0.0.0-stage → 0.0.1

package/dist/calendar/style/index.d.ts

@@ -0,0 +1,69 @@
+import { SeedToken } from "../../theme/interface/seeds.js";
+import { AliasToken } from "../../theme/interface/alias.js";
+import { PanelComponentToken, PickerPanelToken } from "../../date-picker/style/token.js";
+import "../../date-picker/style/index.js";
+import { ComponentTokenMap } from "../../theme/interface/components.js";
+import { FullToken, GetDefaultToken } from "../../theme/interface/cssinjs-utils.js";
+import { GenerateStyle } from "../../theme/interface/index.js";
+import "../../theme/internal.js";
+import { CSSObject } from "@antdv-next/cssinjs";
+//#region src/calendar/style/index.d.ts
+interface ComponentToken {
+  /**
+   * @desc 年选择器宽度
+   * @descEN Width of year select
+   */
+  yearControlWidth: number | string;
+  /**
+   * @desc 月选择器宽度
+   * @descEN Width of month select
+   */
+  monthControlWidth: number | string;
+  /**
+   * @desc 迷你日历内容高度
+   * @descEN Height of mini calendar content
+   */
+  miniContentHeight: number | string;
+  /**
+   * @desc 完整日历背景色
+   * @descEN Background color of full calendar
+   */
+  fullBg: string;
+  /**
+   * @desc 完整日历面板背景色
+   * @descEN Background color of full calendar panel
+   */
+  fullPanelBg: string;
+  /**
+   * @desc 日期项选中背景色
+   * @descEN Background color of selected date item
+   */
+  itemActiveBg: string;
+}
+interface CalendarToken extends FullToken<'Calendar'>, PickerPanelToken, PanelComponentToken {
+  /**
+   * @desc 日历类名
+   * @descEN Calendar class name
+   */
+  calendarCls: string;
+  /**
+   * @desc 日期值高度
+   * @descEN Date value height
+   */
+  dateValueHeight: number | string;
+  /**
+   * @desc 周高度
+   * @descEN Week height
+   */
+  weekHeight: number | string;
+  /**
+   * @desc 日期内容高度
+   * @descEN Date content height
+   */
+  dateContentHeight: number | string;
+}
+declare const genCalendarStyles: GenerateStyle<CalendarToken, CSSObject>;
+declare const prepareComponentToken: GetDefaultToken<'Calendar'>;
+declare const _default: (prefixCls: import("vue").Ref<string>, rootCls?: import("vue").Ref<string | undefined>, tokenResult?: import("@antdv-next/cssinjs").UseTokenReturn<ComponentTokenMap, AliasToken, SeedToken> | undefined) => readonly [import("vue").Ref<string, string>, import("vue").ComputedRef<string | undefined>];
+//#endregion
+export { ComponentToken, _default as default, genCalendarStyles, prepareComponentToken };

package/dist/calendar/style/index.js

@@ -0,0 +1,151 @@
+import { resetComponent } from "../../style/index.js";
+import { genStyleHooks } from "../../theme/util/genStyleUtils.js";
+import { mergeToken } from "../../theme/internal.js";
+import { genPanelStyle } from "../../date-picker/style/panel.js";
+import { initPanelComponentToken, initPickerPanelToken } from "../../date-picker/style/token.js";
+import { unit } from "@antdv-next/cssinjs";
+//#region src/calendar/style/index.ts
+const genCalendarStyles = (token) => {
+	const { calendarCls, componentCls, fullBg, fullPanelBg, itemActiveBg } = token;
+	return {
+		[calendarCls]: {
+			...genPanelStyle(token),
+			...resetComponent(token),
+			background: fullBg,
+			"&-rtl": { direction: "rtl" },
+			[`${calendarCls}-header`]: {
+				display: "flex",
+				justifyContent: "flex-end",
+				padding: `${unit(token.paddingSM)} 0`,
+				[`${calendarCls}-year-select`]: { minWidth: token.yearControlWidth },
+				[`${calendarCls}-month-select`]: {
+					minWidth: token.monthControlWidth,
+					marginInlineStart: token.marginXS
+				},
+				[`${calendarCls}-mode-switch`]: { marginInlineStart: token.marginXS }
+			}
+		},
+		[`${calendarCls} ${componentCls}-panel`]: {
+			background: fullPanelBg,
+			border: 0,
+			borderTop: `${unit(token.lineWidth)} ${token.lineType} ${token.colorSplit}`,
+			borderRadius: 0,
+			[`${componentCls}-month-panel, ${componentCls}-date-panel`]: { width: "auto" },
+			[`${componentCls}-body`]: { padding: `${unit(token.paddingXS)} 0` },
+			[`${componentCls}-content`]: { width: "100%" }
+		},
+		[`${calendarCls}-mini`]: {
+			borderRadius: token.borderRadiusLG,
+			[`${calendarCls}-header`]: {
+				paddingInlineEnd: token.paddingXS,
+				paddingInlineStart: token.paddingXS
+			},
+			[`${componentCls}-panel`]: { borderRadius: `0 0 ${unit(token.borderRadiusLG)} ${unit(token.borderRadiusLG)}` },
+			[`${componentCls}-content`]: {
+				height: token.miniContentHeight,
+				th: {
+					height: "auto",
+					padding: 0,
+					lineHeight: unit(token.weekHeight)
+				}
+			},
+			[`${componentCls}-cell::before`]: { pointerEvents: "none" }
+		},
+		[`${calendarCls}${calendarCls}-full`]: {
+			[`${componentCls}-panel`]: {
+				display: "block",
+				width: "100%",
+				textAlign: "end",
+				background: fullBg,
+				border: 0,
+				[`${componentCls}-body`]: {
+					"th, td": { padding: 0 },
+					th: {
+						height: "auto",
+						paddingInlineEnd: token.paddingSM,
+						paddingBottom: token.paddingXXS,
+						lineHeight: unit(token.weekHeight)
+					}
+				}
+			},
+			[`${componentCls}-cell-week ${componentCls}-cell-inner`]: {
+				display: "block",
+				borderRadius: 0,
+				borderTop: `${unit(token.lineWidthBold)} ${token.lineType} ${token.colorSplit}`,
+				width: "100%",
+				height: token.calc(token.dateValueHeight).add(token.dateContentHeight).add(token.calc(token.paddingXS).div(2)).add(token.lineWidthBold).equal()
+			},
+			[`${componentCls}-cell`]: {
+				"&::before": { display: "none" },
+				"&:hover": { [`${calendarCls}-date`]: { background: token.controlItemBgHover } },
+				[`${calendarCls}-date-today::before`]: { display: "none" },
+				[`&-in-view${componentCls}-cell-selected`]: { [`${calendarCls}-date, ${calendarCls}-date-today`]: { background: itemActiveBg } },
+				"&-selected, &-selected:hover": { [`${calendarCls}-date, ${calendarCls}-date-today`]: { [`${calendarCls}-date-value`]: { color: token.colorPrimary } } }
+			},
+			[`${calendarCls}-date`]: {
+				display: "block",
+				width: "auto",
+				height: "auto",
+				margin: `0 ${unit(token.calc(token.marginXS).div(2).equal())}`,
+				padding: `${unit(token.calc(token.paddingXS).div(2).equal())} ${unit(token.paddingXS)} 0`,
+				border: 0,
+				borderTop: `${unit(token.lineWidthBold)} ${token.lineType} ${token.colorSplit}`,
+				borderRadius: 0,
+				transition: `background-color ${token.motionDurationSlow}`,
+				"&-value": {
+					lineHeight: unit(token.dateValueHeight),
+					transition: `color ${token.motionDurationSlow}`
+				},
+				"&-content": {
+					position: "static",
+					width: "auto",
+					height: token.dateContentHeight,
+					overflowY: "auto",
+					color: token.colorText,
+					lineHeight: token.lineHeight,
+					textAlign: "start"
+				},
+				"&-today": {
+					borderColor: token.colorPrimary,
+					[`${calendarCls}-date-value`]: { color: token.colorText }
+				}
+			}
+		},
+		[`@media only screen and (max-width: ${unit(token.screenXS)}) `]: { [calendarCls]: { [`${calendarCls}-header`]: {
+			display: "block",
+			[`${calendarCls}-year-select`]: { width: "50%" },
+			[`${calendarCls}-month-select`]: { width: `calc(50% - ${unit(token.paddingXS)})` },
+			[`${calendarCls}-mode-switch`]: {
+				width: "100%",
+				marginTop: token.marginXS,
+				marginInlineStart: 0,
+				"> label": {
+					width: "50%",
+					textAlign: "center"
+				}
+			}
+		} } }
+	};
+};
+const prepareComponentToken = (token) => ({
+	fullBg: token.colorBgContainer,
+	fullPanelBg: token.colorBgContainer,
+	itemActiveBg: token.controlItemBgActive,
+	yearControlWidth: 80,
+	monthControlWidth: 70,
+	miniContentHeight: 256,
+	...initPanelComponentToken(token)
+});
+var style_default = genStyleHooks("Calendar", (token) => {
+	const calendarCls = `${token.componentCls}-calendar`;
+	const calendarToken = mergeToken(token, initPickerPanelToken(token), {
+		calendarCls,
+		pickerCellInnerCls: `${token.componentCls}-cell-inner`,
+		dateValueHeight: token.controlHeightSM,
+		weekHeight: token.calc(token.controlHeightSM).mul(.75).equal(),
+		dateContentHeight: token.calc(token.calc(token.fontHeightSM).add(token.marginXS)).mul(3).add(token.calc(token.lineWidth).mul(2)).equal()
+	});
+	return genCalendarStyles(calendarToken);
+}, prepareComponentToken);
+//#endregion
+export { style_default as default, genCalendarStyles, prepareComponentToken };

package/dist/card/Card.d.ts

@@ -0,0 +1,88 @@
+import { VueNode } from "../_util/type.js";
+import { SemanticClassNamesType, SemanticStylesType } from "../_util/hooks/useMergeSemantic.js";
+import "../_util/hooks/index.js";
+import { SizeType } from "../config-provider/SizeContext.js";
+import { Tab, TabsSlots } from "../tabs/index.js";
+import { ComponentBaseProps } from "../config-provider/context.js";
+import { CSSProperties, SlotsType } from "vue";
+//#region src/card/Card.d.ts
+type CardType = 'inner';
+/**
+ * Note: `default` is deprecated and will be removed in later versions, please use `medium` instead.
+ */
+type CardSize = Exclude<SizeType, 'large'> | 'default';
+interface CardTabListType extends Omit<Tab, 'label'> {
+  key: string;
+  /** @deprecated Please use `label` instead */
+  tab?: VueNode;
+  label?: VueNode;
+}
+type CardSemanticName = keyof CardSemanticClassNames & keyof CardSemanticStyles;
+interface CardSemanticClassNames {
+  root?: string;
+  header?: string;
+  body?: string;
+  extra?: string;
+  title?: string;
+  actions?: string;
+  cover?: string;
+}
+interface CardSemanticStyles {
+  root?: CSSProperties;
+  header?: CSSProperties;
+  body?: CSSProperties;
+  extra?: CSSProperties;
+  title?: CSSProperties;
+  actions?: CSSProperties;
+  cover?: CSSProperties;
+}
+type CardClassNamesType = SemanticClassNamesType<CardProps, CardSemanticClassNames>;
+type CardStylesType = SemanticStylesType<CardProps, CardSemanticStyles>;
+interface CardProps extends ComponentBaseProps, CardEmitsProps {
+  title?: VueNode;
+  extra?: VueNode;
+  /** @deprecated Please use `variant` instead */
+  bordered?: boolean;
+  /** @deprecated Please use `styles.header` instead */
+  headStyle?: CSSProperties;
+  /** @deprecated Please use `styles.body` instead */
+  bodyStyle?: CSSProperties;
+  loading?: boolean;
+  hoverable?: boolean;
+  id?: string;
+  size?: CardSize;
+  type?: CardType;
+  cover?: VueNode;
+  actions?: VueNode[];
+  tabList?: CardTabListType[];
+  tabBarExtraContent?: VueNode | {
+    [key: string]: VueNode;
+  };
+  activeTabKey?: string;
+  defaultActiveTabKey?: string;
+  tabProps?: Record<string, any>;
+  classes?: CardClassNamesType;
+  styles?: CardStylesType;
+  variant?: 'borderless' | 'outlined';
+}
+interface CardEmits {
+  'tabChange': (key: string) => void;
+  'update:activeTabKey': (key: string) => void;
+}
+interface CardEmitsProps {
+  onTabChange?: CardEmits['tabChange'];
+  'onUpdate:activeTabKey'?: CardEmits['update:activeTabKey'];
+}
+interface CardSlots {
+  default?: () => any;
+  title?: () => any;
+  extra?: () => any;
+  cover?: () => any;
+  actions?: () => any;
+  tabContentRender?: TabsSlots['contentRender'];
+  tabLabelRender?: TabsSlots['labelRender'];
+  tabBarExtraContent?: () => any;
+}
+declare const Card: import("vue").DefineSetupFnComponent<CardProps, CardEmits, SlotsType<CardSlots>, CardProps, import("vue").PublicProps>;
+//#endregion
+export { CardClassNamesType, CardEmits, CardEmitsProps, CardProps, CardSemanticClassNames, CardSemanticName, CardSemanticStyles, CardSize, CardSlots, CardStylesType, CardTabListType, CardType, Card as default };

package/dist/card/Card.js

@@ -0,0 +1,309 @@
+import { devUseWarning, isDev } from "../_util/warning.js";
+import { useComponentBaseConfig } from "../config-provider/context.js";
+import { useSize } from "../config-provider/hooks/useSize.js";
+import { getAttrStyleAndClass, useMergeSemantic, useSemanticRootStyle, useToArr, useToProps } from "../_util/hooks/useMergeSemantic.js";
+import { getSlotPropsFnRun, toPropsRefs as toPropsRefs$1 } from "../_util/tools.js";
+import { isRenderable } from "../_util/is.js";
+import skeleton_default from "../skeleton/index.js";
+import useVariant from "../form/hooks/useVariant.js";
+import Tabs from "../tabs/index.js";
+import style_default from "./style/index.js";
+import { computed, createVNode, defineComponent, isVNode, mergeProps } from "vue";
+import { clsx } from "@v-c/util";
+import { filterEmpty } from "@v-c/util/dist/props-util";
+//#region src/card/Card.tsx
+/**
+* Note: `default` is deprecated and will be removed in later versions, please use `medium` instead.
+*/
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const ActionNode = /* @__PURE__ */ defineComponent((props) => {
+	return () => {
+		const { actionClasses, actions = [], actionStyle } = props;
+		return createVNode("ul", {
+			"class": actionClasses,
+			"style": actionStyle
+		}, [actions.map((action, index) => {
+			const key = `action-${index}`;
+			return createVNode("li", {
+				"style": { width: `${100 / actions.length}%` },
+				"key": key
+			}, [createVNode("span", null, [action])]);
+		})]);
+	};
+}, { props: {
+	actionClasses: {
+		type: String,
+		required: true
+	},
+	actions: {
+		type: Array,
+		required: true
+	},
+	actionStyle: {
+		type: Object,
+		required: false
+	}
+} });
+const Card = /* @__PURE__ */ defineComponent((props, { slots, emit, attrs }) => {
+	const { prefixCls, direction, class: contextClassName, style: contextStyle, classes: contextClassNames, styles: contextStyles } = useComponentBaseConfig("card", props);
+	const { styles, classes, size: customizeSize, variant: customVariant, bordered } = toPropsRefs$1(props, "bordered", "variant", "classes", "styles", "size");
+	const [variant] = useVariant("card", customVariant, bordered);
+	const mergedSize = useSize(customizeSize);
+	const mergedProps = computed(() => {
+		return {
+			...props,
+			size: mergedSize.value,
+			variant: variant.value
+		};
+	});
+	const contextStyleRoot = useSemanticRootStyle(contextStyle);
+	const [mergedClassNames, mergedStyles] = useMergeSemantic(useToArr(contextClassNames, classes), useToArr(contextStyles, contextStyleRoot, styles), useToProps(mergedProps));
+	if (isDev) {
+		const warning = devUseWarning("Card");
+		warning.deprecated(props.size !== "default", "size=\"default\"", "size=\"medium\"");
+		[
+			["headStyle", "styles.header"],
+			["bodyStyle", "styles.body"],
+			["bordered", "variant"]
+		].forEach(([deprecatedName, newName]) => {
+			warning.deprecated(!(props[deprecatedName] !== void 0), deprecatedName, newName);
+		});
+	}
+	const onTabChange = (key) => {
+		emit("tabChange", key);
+		emit("update:activeTabKey", key);
+	};
+	const [hashId, cssVarCls] = style_default(prefixCls);
+	return () => {
+		const { activeTabKey, tabProps, defaultActiveTabKey, tabList, headStyle, bodyStyle, loading, rootClass, hoverable, type } = props;
+		const { style, className, restAttrs } = getAttrStyleAndClass(attrs);
+		const children = filterEmpty(slots?.default?.() ?? []);
+		const title = getSlotPropsFnRun(slots, props, "title");
+		const extra = getSlotPropsFnRun(slots, props, "extra");
+		let actions = getSlotPropsFnRun(slots, props, "actions");
+		if (actions) actions = filterEmpty(Array.isArray(actions) ? actions : [actions]);
+		const cover = getSlotPropsFnRun(slots, props, "cover");
+		const isContainGrid = children.some((child) => isVNode(child) && child.type?.name === "ACardGrid");
+		const loadingBlock = createVNode(skeleton_default, {
+			"loading": true,
+			"active": true,
+			"paragraph": { rows: 4 },
+			"title": false
+		}, _isSlot(children) ? children : { default: () => [children] });
+		const hasActiveTabKey = activeTabKey !== void 0;
+		const extraProps = {
+			...tabProps,
+			[hasActiveTabKey ? "activeKey" : "defaultActiveKey"]: hasActiveTabKey ? activeTabKey : defaultActiveTabKey ?? tabProps?.defaultActiveKey,
+			tabBarExtraContent: getSlotPropsFnRun(slots, props, "tabBarExtraContent")
+		};
+		let head;
+		const tabSize = mergedSize.value === "small" ? mergedSize.value : "large";
+		const tabsSlots = {
+			contentRender: slots?.tabContentRender,
+			labelRender: slots?.tabLabelRender
+		};
+		const tabs = tabList ? createVNode(Tabs, mergeProps({ "size": tabSize }, extraProps, { "class": `${prefixCls.value}-head-tabs` }, { "onUpdate:activeKey": (key) => {
+			onTabChange(key);
+		} }, { "items": tabList.map(({ tab, ...item }) => {
+			return {
+				label: tab,
+				...item
+			};
+		}) }), tabsSlots) : null;
+		if (isRenderable(title) || isRenderable(extra) || tabs) {
+			const headClasses = clsx(`${prefixCls.value}-head`, mergedClassNames.value.header);
+			const titleClasses = clsx(`${prefixCls.value}-head-title`, mergedClassNames.value.title);
+			const extraClasses = clsx(`${prefixCls.value}-extra`, mergedClassNames.value.extra);
+			head = createVNode("div", {
+				"class": headClasses,
+				"style": {
+					...headStyle,
+					...mergedStyles.value.header
+				}
+			}, [createVNode("div", { "class": `${prefixCls.value}-head-wrapper` }, [isRenderable(title) && createVNode("div", {
+				"class": titleClasses,
+				"style": mergedStyles.value.title
+			}, [title]), isRenderable(extra) && createVNode("div", {
+				"class": extraClasses,
+				"style": mergedStyles.value.extra
+			}, [extra])]), tabs]);
+		}
+		const coverClasses = clsx(`${prefixCls.value}-cover`, mergedClassNames.value.cover);
+		const coverDom = isRenderable(cover) ? createVNode("div", {
+			"class": coverClasses,
+			"style": mergedStyles.value.cover
+		}, [cover]) : null;
+		const bodyClasses = clsx(`${prefixCls.value}-body`, mergedClassNames.value.body);
+		const mergedBodyStyle = {
+			...bodyStyle,
+			...mergedStyles.value.body
+		};
+		const body = loading || children.length ? createVNode("div", {
+			"class": bodyClasses,
+			"style": mergedBodyStyle
+		}, [loading ? loadingBlock : children]) : null;
+		const actionClasses = clsx(`${prefixCls.value}-actions`, mergedClassNames.value.actions);
+		const actionDom = actions?.length ? createVNode(ActionNode, {
+			"actionClasses": actionClasses,
+			"actionStyle": mergedStyles.value.actions,
+			"actions": actions
+		}, null) : null;
+		return createVNode("div", mergeProps({
+			...restAttrs,
+			id: props.id
+		}, {
+			"class": clsx(prefixCls.value, contextClassName.value, {
+				[`${prefixCls.value}-loading`]: loading,
+				[`${prefixCls.value}-bordered`]: variant.value !== "borderless",
+				[`${prefixCls.value}-hoverable`]: hoverable,
+				[`${prefixCls.value}-contain-grid`]: isContainGrid,
+				[`${prefixCls.value}-contain-tabs`]: tabList?.length,
+				[`${prefixCls.value}-small`]: mergedSize.value === "small",
+				[`${prefixCls.value}-type-${type}`]: !!type,
+				[`${prefixCls.value}-rtl`]: direction.value === "rtl"
+			}, className, rootClass, hashId.value, cssVarCls.value, mergedClassNames.value.root),
+			"style": {
+				...mergedStyles.value.root,
+				...style
+			}
+		}), [
+			head,
+			coverDom,
+			body,
+			actionDom
+		]);
+	};
+}, {
+	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, null],
+			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
+		}
+	},
+	emits: ["tabChange", "update:activeTabKey"],
+	inheritAttrs: false,
+	name: "ACard"
+});
+//#endregion
+export { Card as default };

package/dist/card/CardGrid.d.ts

@@ -0,0 +1,11 @@
+//#region src/card/CardGrid.d.ts
+interface CardGridProps {
+  prefixCls?: string;
+  hoverable?: boolean;
+}
+interface CardGridRef {
+  nativeElement: HTMLDivElement;
+}
+declare const CardGrid: import("vue").DefineSetupFnComponent<CardGridProps, {}, {}, CardGridProps & {}, import("vue").PublicProps>;
+//#endregion
+export { CardGridProps, CardGridRef, CardGrid as default };

package/dist/card/CardGrid.js

@@ -0,0 +1,35 @@
+import { useBaseConfig } from "../config-provider/context.js";
+import { getAttrStyleAndClass } from "../_util/hooks/useMergeSemantic.js";
+import { createVNode, defineComponent, mergeDefaults, mergeProps, shallowRef } from "vue";
+import { clsx } from "@v-c/util";
+//#region src/card/CardGrid.tsx
+const CardGrid = /* @__PURE__ */ defineComponent((props, { attrs, slots, expose }) => {
+	const { prefixCls } = useBaseConfig("card", props);
+	const nativeElementRef = shallowRef();
+	expose({ nativeElement: nativeElementRef });
+	return () => {
+		const prefix = `${prefixCls.value}-grid`;
+		const { className, restAttrs, style } = getAttrStyleAndClass(attrs);
+		const classString = clsx(prefix, className, { [`${prefix}-hoverable`]: props.hoverable });
+		return createVNode("div", mergeProps({ "ref": nativeElementRef }, restAttrs, {
+			"class": classString,
+			"style": style
+		}), [slots?.default?.()]);
+	};
+}, {
+	props: /*@__PURE__*/ mergeDefaults({
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		hoverable: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		}
+	}, { hoverable: true }),
+	name: "ACardGrid",
+	inheritAttrs: false
+});
+//#endregion
+export { CardGrid as default };