@zboson/ui 0.0.0-stage → 0.0.2

package/dist/grid/row.d.ts

@@ -0,0 +1,18 @@
+import { Breakpoint } from "../_util/responsiveObserver.js";
+//#region src/grid/row.d.ts
+declare const _RowAligns: readonly ["top", "middle", "bottom", "stretch"];
+declare const _RowJustify: readonly ["start", "end", "center", "space-around", "space-between", "space-evenly"];
+type ResponsiveLike<T> = { [key in Breakpoint]?: T; };
+type Gutter = number | undefined | Partial<Record<Breakpoint, number>>;
+type ResponsiveAligns = ResponsiveLike<(typeof _RowAligns)[number]>;
+type ResponsiveJustify = ResponsiveLike<(typeof _RowJustify)[number]>;
+interface RowProps {
+  gutter?: Gutter | [Gutter, Gutter];
+  align?: (typeof _RowAligns)[number] | ResponsiveAligns;
+  justify?: (typeof _RowJustify)[number] | ResponsiveJustify;
+  prefixCls?: string;
+  wrap?: boolean;
+}
+declare const Row: import("vue").DefineSetupFnComponent<RowProps, {}, {}, RowProps & {}, import("vue").PublicProps>;
+//#endregion
+export { Gutter, RowProps, Row as default };

package/dist/grid/row.js

@@ -0,0 +1,94 @@
+import { useConfig } from "../config-provider/context.js";
+import { getAttrStyleAndClass } from "../_util/hooks/useMergeSemantic.js";
+import { useRowStyle } from "./style/index.js";
+import { responsiveArray } from "../_util/responsiveObserver.js";
+import useBreakpoint from "./hooks/useBreakpoint.js";
+import { useRowContextProvider } from "./RowContext.js";
+import useGutter from "./hooks/useGutter.js";
+import { computed, createVNode, defineComponent, mergeDefaults, mergeProps } from "vue";
+import { classNames } from "@v-c/util";
+//#region src/grid/row.tsx
+function useMergedPropByScreen(oriProp, screen) {
+	return computed(() => {
+		const value = oriProp.value;
+		if (typeof value === "string") return value;
+		if (typeof value === "object") for (let i = 0; i < responsiveArray.length; i++) {
+			const breakpoint = responsiveArray[i];
+			if (!screen.value || !screen.value[breakpoint]) continue;
+			const curVal = value[breakpoint];
+			if (curVal !== void 0) return curVal;
+		}
+		return "";
+	});
+}
+const Row = /* @__PURE__ */ defineComponent((props, { attrs, slots }) => {
+	const configCtx = useConfig();
+	const screens = useBreakpoint(true, null);
+	const mergedAlign = useMergedPropByScreen(computed(() => props.align), screens);
+	const mergedJustify = useMergedPropByScreen(computed(() => props.justify), screens);
+	const prefixCls = computed(() => configCtx.value?.getPrefixCls("row", props.prefixCls));
+	const [hashId, cssVarCls] = useRowStyle(prefixCls);
+	const gutters = useGutter(computed(() => props.gutter), screens);
+	useRowContextProvider({
+		gutter: gutters,
+		wrap: computed(() => props.wrap)
+	});
+	return () => {
+		const { wrap } = props;
+		const { className, style, restAttrs } = getAttrStyleAndClass(attrs);
+		const classes = classNames(prefixCls.value, {
+			[`${prefixCls.value}-no-wrap`]: wrap === false,
+			[`${prefixCls.value}-${mergedJustify.value}`]: mergedJustify.value,
+			[`${prefixCls.value}-${mergedAlign.value}`]: mergedAlign.value,
+			[`${prefixCls.value}-rtl`]: configCtx.value.direction === "rtl"
+		}, hashId.value, cssVarCls.value, className);
+		const rowStyle = {};
+		const horizontalGutter = gutters.value[0] != null && gutters.value[0] > 0 ? gutters.value[0] / -2 : void 0;
+		if (horizontalGutter) {
+			rowStyle.marginLeft = `${horizontalGutter}px`;
+			rowStyle.marginRight = `${horizontalGutter}px`;
+		}
+		const [_, gutterV] = gutters.value;
+		if (gutterV) rowStyle.rowGap = `${gutterV}px`;
+		return createVNode("div", mergeProps(restAttrs, {
+			"class": classes,
+			"style": [rowStyle, style]
+		}), [slots?.default?.()]);
+	};
+}, {
+	props: /*@__PURE__*/ mergeDefaults({
+		gutter: {
+			type: [
+				Number,
+				null,
+				Object,
+				Array
+			],
+			required: false
+		},
+		align: {
+			type: [String, Object],
+			required: false
+		},
+		justify: {
+			type: [String, Object],
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		wrap: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		}
+	}, { gutter: 0 }),
+	name: "ARow",
+	inheritAttrs: false
+});
+Row.install = (app) => {
+	app.component(Row.name, Row);
+};
+//#endregion
+export { Row as default };

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

@@ -0,0 +1,23 @@
+import { SeedToken } from "../../theme/interface/seeds.js";
+import { AliasToken } from "../../theme/interface/alias.js";
+import { ComponentTokenMap } from "../../theme/interface/components.js";
+import { GetDefaultToken } from "../../theme/interface/cssinjs-utils.js";
+import "../../theme/interface/index.js";
+import "../../theme/internal.js";
+//#region src/grid/style/index.d.ts
+interface ComponentToken {}
+declare const prepareRowComponentToken: GetDefaultToken<'Grid'>;
+declare const prepareColComponentToken: GetDefaultToken<'Grid'>;
+declare const useRowStyle: (prefixCls: import("vue").Ref<string>, rootCls?: import("vue").Ref<string | undefined>, tokenResult?: import("@zboson/cssinjs").UseTokenReturn<ComponentTokenMap, AliasToken, SeedToken> | undefined) => readonly [import("vue").Ref<string, string>, import("vue").ComputedRef<string | undefined>];
+declare function getMediaSize(token: AliasToken): {
+  readonly xs: number;
+  readonly sm: number;
+  readonly md: number;
+  readonly lg: number;
+  readonly xl: number;
+  readonly xxl: number;
+  readonly xxxl: number;
+};
+declare const useColStyle: (prefixCls: import("vue").Ref<string>, rootCls?: import("vue").Ref<string | undefined>, tokenResult?: import("@zboson/cssinjs").UseTokenReturn<ComponentTokenMap, AliasToken, SeedToken> | undefined) => readonly [import("vue").Ref<string, string>, import("vue").ComputedRef<string | undefined>];
+//#endregion
+export { ComponentToken, getMediaSize, prepareColComponentToken, prepareRowComponentToken, useColStyle, useRowStyle };

package/dist/grid/style/index.js

@@ -0,0 +1,97 @@
+import { genCssVar, genStyleHooks } from "../../theme/util/genStyleUtils.js";
+import { mergeToken } from "../../theme/internal.js";
+import { unit } from "@zboson/cssinjs";
+//#region src/grid/style/index.ts
+const genGridRowStyle = (token) => {
+	const { componentCls } = token;
+	return { [componentCls]: {
+		display: "flex",
+		flexFlow: "row wrap",
+		minWidth: 0,
+		"&::before, &::after": { display: "flex" },
+		"&-no-wrap": { flexWrap: "nowrap" },
+		"&-start": { justifyContent: "flex-start" },
+		"&-center": { justifyContent: "center" },
+		"&-end": { justifyContent: "flex-end" },
+		"&-space-between": { justifyContent: "space-between" },
+		"&-space-around": { justifyContent: "space-around" },
+		"&-space-evenly": { justifyContent: "space-evenly" },
+		"&-top": { alignItems: "flex-start" },
+		"&-middle": { alignItems: "center" },
+		"&-bottom": { alignItems: "flex-end" }
+	} };
+};
+const genGridColStyle = (token) => {
+	const { componentCls } = token;
+	return { [componentCls]: {
+		position: "relative",
+		maxWidth: "100%",
+		minHeight: 1
+	} };
+};
+function genLoopGridColumnsStyle(token, sizeCls) {
+	const { componentCls, gridColumns, antCls } = token;
+	const [gridVarName, gridVarRef] = genCssVar(antCls, "grid");
+	const [, colVarRef] = genCssVar(antCls, "col");
+	const gridColumnsStyle = {};
+	for (let i = gridColumns; i >= 0; i--) if (i === 0) {
+		gridColumnsStyle[`${componentCls}${sizeCls}-${i}`] = { display: "none" };
+		gridColumnsStyle[`${componentCls}-push-${i}`] = { insetInlineStart: "auto" };
+		gridColumnsStyle[`${componentCls}-pull-${i}`] = { insetInlineEnd: "auto" };
+		gridColumnsStyle[`${componentCls}${sizeCls}-push-${i}`] = { insetInlineStart: "auto" };
+		gridColumnsStyle[`${componentCls}${sizeCls}-pull-${i}`] = { insetInlineEnd: "auto" };
+		gridColumnsStyle[`${componentCls}${sizeCls}-offset-${i}`] = { marginInlineStart: 0 };
+		gridColumnsStyle[`${componentCls}${sizeCls}-order-${i}`] = { order: 0 };
+	} else {
+		gridColumnsStyle[`${componentCls}${sizeCls}-${i}`] = [{
+			[gridVarName("display")]: "block",
+			display: "block"
+		}, {
+			display: gridVarRef("display"),
+			flex: `0 0 ${i / gridColumns * 100}%`,
+			maxWidth: `${i / gridColumns * 100}%`
+		}];
+		gridColumnsStyle[`${componentCls}${sizeCls}-push-${i}`] = { insetInlineStart: `${i / gridColumns * 100}%` };
+		gridColumnsStyle[`${componentCls}${sizeCls}-pull-${i}`] = { insetInlineEnd: `${i / gridColumns * 100}%` };
+		gridColumnsStyle[`${componentCls}${sizeCls}-offset-${i}`] = { marginInlineStart: `${i / gridColumns * 100}%` };
+		gridColumnsStyle[`${componentCls}${sizeCls}-order-${i}`] = { order: i };
+	}
+	gridColumnsStyle[`${componentCls}${sizeCls}-flex`] = { flex: colVarRef(`${sizeCls.replace(/-/, "")}-flex`) };
+	return gridColumnsStyle;
+}
+function genGridStyle(token, sizeCls) {
+	return genLoopGridColumnsStyle(token, sizeCls);
+}
+function genGridMediaStyle(token, screenSize, sizeCls) {
+	return { [`@media (min-width: ${unit(screenSize)})`]: { ...genGridStyle(token, sizeCls) } };
+}
+const prepareRowComponentToken = () => ({});
+const prepareColComponentToken = () => ({});
+const useRowStyle = genStyleHooks("Grid", genGridRowStyle, prepareRowComponentToken);
+function getMediaSize(token) {
+	return {
+		xs: token.screenXSMin,
+		sm: token.screenSMMin,
+		md: token.screenMDMin,
+		lg: token.screenLGMin,
+		xl: token.screenXLMin,
+		xxl: token.screenXXLMin,
+		xxxl: token.screenXXXLMin
+	};
+}
+const useColStyle = genStyleHooks("Grid", (token) => {
+	const gridToken = mergeToken(token, { gridColumns: 24 });
+	const gridMediaSizesMap = getMediaSize(gridToken);
+	delete gridMediaSizesMap.xs;
+	return [
+		genGridColStyle(gridToken),
+		genGridStyle(gridToken, ""),
+		genGridStyle(gridToken, "-xs"),
+		Object.keys(gridMediaSizesMap).map((key) => genGridMediaStyle(gridToken, gridMediaSizesMap[key], `-${key}`)).reduce((pre, cur) => ({
+			...pre,
+			...cur
+		}), {})
+	];
+}, prepareColComponentToken);
+//#endregion
+export { getMediaSize, prepareColComponentToken, prepareRowComponentToken, useColStyle, useRowStyle };

package/dist/image/PreviewGroup.d.ts

@@ -0,0 +1,30 @@
+import { MaskType } from "../_util/hooks/useMergedMask.js";
+import "../_util/hooks/index.js";
+import { DeprecatedPreviewConfig, ImageClassNamesType, ImageStylesType } from "./index.js";
+import { PreviewGroupProps as PreviewGroupProps$1 } from "@v-c/image";
+//#region src/image/PreviewGroup.d.ts
+declare const icons: {
+  rotateLeft: import("vue/jsx-runtime").JSX.Element;
+  rotateRight: import("vue/jsx-runtime").JSX.Element;
+  zoomIn: import("vue/jsx-runtime").JSX.Element;
+  zoomOut: import("vue/jsx-runtime").JSX.Element;
+  close: import("vue/jsx-runtime").JSX.Element;
+  left: import("vue/jsx-runtime").JSX.Element;
+  right: import("vue/jsx-runtime").JSX.Element;
+  flipX: import("vue/jsx-runtime").JSX.Element;
+  flipY: import("vue/jsx-runtime").JSX.Element;
+};
+type OriginPreviewConfig = NonNullable<Exclude<PreviewGroupProps$1['preview'], boolean>>;
+type GroupPreviewConfig = OriginPreviewConfig & DeprecatedPreviewConfig & {
+  /** @deprecated Use `onOpenChange` instead */
+  onVisibleChange?: (visible: boolean, prevVisible: boolean, current: number) => void;
+  mask?: MaskType;
+};
+interface PreviewGroupProps extends Omit<PreviewGroupProps$1, 'preview' | 'styles'> {
+  preview?: boolean | GroupPreviewConfig;
+  classes?: ImageClassNamesType;
+  styles?: ImageStylesType;
+}
+declare const InternalPreviewGroup: import("vue").DefineSetupFnComponent<PreviewGroupProps, {}, {}, PreviewGroupProps & {}, import("vue").PublicProps>;
+//#endregion
+export { GroupPreviewConfig, PreviewGroupProps, InternalPreviewGroup as default, icons };

package/dist/image/PreviewGroup.js

@@ -0,0 +1,138 @@
+import { useComponentBaseConfig } from "../config-provider/context.js";
+import { getAttrStyleAndClass, useMergeSemantic, useToArr, useToProps } from "../_util/hooks/useMergeSemantic.js";
+import { toPropsRefs } from "../_util/tools.js";
+import useCSSVarCls from "../config-provider/hooks/useCSSVarCls.js";
+import useMergedPreviewConfig from "./hooks/useMergedPreviewConfig.js";
+import usePreviewConfig from "./hooks/usePreviewConfig.js";
+import style_default from "./style/index.js";
+import { computed, createVNode, defineComponent, mergeProps } from "vue";
+import { clsx } from "@v-c/util";
+import { CloseOutlined, LeftOutlined, RightOutlined, RotateLeftOutlined, RotateRightOutlined, SwapOutlined, ZoomInOutlined, ZoomOutOutlined } from "@zboson/icons";
+import { omit } from "es-toolkit";
+import { PreviewGroup } from "@v-c/image";
+//#region src/image/PreviewGroup.tsx
+const icons = {
+	rotateLeft: createVNode(RotateLeftOutlined, null, null),
+	rotateRight: createVNode(RotateRightOutlined, null, null),
+	zoomIn: createVNode(ZoomInOutlined, null, null),
+	zoomOut: createVNode(ZoomOutOutlined, null, null),
+	close: createVNode(CloseOutlined, null, null),
+	left: createVNode(LeftOutlined, null, null),
+	right: createVNode(RightOutlined, null, null),
+	flipX: createVNode(SwapOutlined, null, null),
+	flipY: createVNode(SwapOutlined, { "rotate": 90 }, null)
+};
+const InternalPreviewGroup = /* @__PURE__ */ defineComponent((props, { attrs, slots }) => {
+	const { getPrefixCls, getPopupContainer: getContextPopupContainer, direction, preview: contextPreview, classes: contextClassNames, styles: contextStyles } = useComponentBaseConfig("image", void 0, ["preview"]);
+	const { preview, classes, styles } = toPropsRefs(props, "preview", "classes", "styles");
+	const prefixCls = computed(() => getPrefixCls("image", props.previewPrefixCls));
+	const previewPrefixCls = computed(() => `${prefixCls.value}-preview`);
+	const rootCls = useCSSVarCls(prefixCls);
+	const [hashId, cssVarCls] = style_default(prefixCls, rootCls);
+	const mergedRootClassName = computed(() => clsx(hashId.value, cssVarCls.value, rootCls.value));
+	const previewConfigCtx = usePreviewConfig(preview);
+	const previewConfig = computed(() => previewConfigCtx.value?.[0]);
+	const previewRootClassName = computed(() => previewConfigCtx.value?.[1]);
+	const previewMaskClassName = computed(() => previewConfigCtx.value?.[2]);
+	const contextPreviewConfigCtx = usePreviewConfig(contextPreview);
+	const contextPreviewConfig = computed(() => contextPreviewConfigCtx.value?.[0]);
+	const contextPreviewRootClassName = computed(() => contextPreviewConfigCtx.value?.[1]);
+	const contextPreviewMaskClassName = computed(() => contextPreviewConfigCtx.value?.[2]);
+	const memoizedIcons = computed(() => {
+		return {
+			...icons,
+			left: direction.value === "rtl" ? createVNode(RightOutlined, null, null) : createVNode(LeftOutlined, null, null),
+			right: direction.value === "rtl" ? createVNode(LeftOutlined, null, null) : createVNode(RightOutlined, null, null)
+		};
+	});
+	const mergedPreview = useMergedPreviewConfig(previewConfig, contextPreviewConfig, prefixCls, mergedRootClassName, getContextPopupContainer, memoizedIcons);
+	const mergedMask = computed(() => mergedPreview.value?.mask);
+	const blurClassName = computed(() => mergedPreview.value?.blurClassName);
+	const mergedProps = computed(() => {
+		return { ...props };
+	});
+	const [mergedClassNames, mergedStyles] = useMergeSemantic(useToArr(contextClassNames, classes, computed(() => {
+		return {
+			cover: clsx(contextPreviewMaskClassName.value, previewMaskClassName.value),
+			popup: {
+				root: clsx(contextPreviewRootClassName.value, previewRootClassName.value),
+				mask: clsx({ [`${prefixCls.value}-preview-mask-hidden`]: !mergedMask.value }, blurClassName.value)
+			}
+		};
+	})), useToArr(contextStyles, styles), useToProps(mergedProps), computed(() => {
+		return { popup: { _default: "root" } };
+	}));
+	return () => {
+		const otherProps = omit(props, [
+			"previewPrefixCls",
+			"preview",
+			"classNames",
+			"classes",
+			"styles"
+		]);
+		const { className, style, restAttrs } = getAttrStyleAndClass(attrs);
+		return createVNode(PreviewGroup, mergeProps(restAttrs, {
+			"class": className,
+			"style": style,
+			"preview": mergedPreview.value,
+			"previewPrefixCls": previewPrefixCls.value,
+			"icons": memoizedIcons.value
+		}, otherProps, {
+			"classNames": mergedClassNames.value,
+			"styles": mergedStyles.value
+		}), slots);
+	};
+}, {
+	props: {
+		preview: {
+			type: [Boolean, Object],
+			required: false,
+			default: void 0
+		},
+		classes: {
+			type: [Object, Function],
+			required: false
+		},
+		styles: {
+			type: [Object, Function],
+			required: false
+		},
+		previewPrefixCls: {
+			type: String,
+			required: false
+		},
+		classNames: {
+			type: Object,
+			required: false
+		},
+		icons: {
+			type: Object,
+			required: false
+		},
+		items: {
+			type: Array,
+			required: false
+		},
+		fallback: {
+			type: String,
+			required: false
+		},
+		children: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		}
+	},
+	name: "AImagePreviewGroup",
+	inheritAttrs: false
+});
+//#endregion
+export { InternalPreviewGroup as default, icons };

package/dist/image/hooks/useMergedPreviewConfig.d.ts

@@ -0,0 +1,19 @@
+import { GroupPreviewConfig } from "../PreviewGroup.js";
+import { PreviewConfig } from "../index.js";
+import { Ref } from "vue";
+//#region src/image/hooks/useMergedPreviewConfig.d.ts
+declare function useMergedPreviewConfig<T extends PreviewConfig | GroupPreviewConfig>(previewConfig: Ref<T>, contextPreviewConfig: Ref<T>, prefixCls: Ref<string>, mergedRootClassName: Ref<string>, getContextPopupContainer: PreviewConfig['getContainer'], icons: Ref<PreviewConfig['icons']>, defaultCover?: Ref<any>): import("vue").ComputedRef<{
+  motionName: string;
+} & T & {
+  icons: import("@v-c/image/dist/Preview/index.js").OperationIcons | undefined;
+  getContainer: import("@v-c/portal/dist/Portal.js").GetContainer | undefined;
+  zIndex: number | undefined;
+  closeIcon: import("@v-c/util").VueNode;
+  rootClassName: string;
+  mask: boolean;
+  maskClosable: boolean;
+  blurClassName: string | undefined;
+  cover?: any;
+}>;
+//#endregion
+export { useMergedPreviewConfig as default };

package/dist/image/hooks/useMergedPreviewConfig.js

@@ -0,0 +1,30 @@
+import { useMergedMask } from "../../_util/hooks/useMergedMask.js";
+import { useZIndex } from "../../_util/hooks/useZIndex.js";
+import { computed } from "vue";
+import { clsx } from "@v-c/util";
+import { getTransitionName } from "@v-c/util/dist/utils/transition";
+//#region src/image/hooks/useMergedPreviewConfig.ts
+function useMergedPreviewConfig(previewConfig, contextPreviewConfig, prefixCls, mergedRootClassName, getContextPopupContainer, icons, defaultCover) {
+	const [zIndex] = useZIndex("ImagePreview", computed(() => previewConfig.value?.zIndex));
+	const [mergedPreviewMask, blurClassName, mergedMaskClosable] = useMergedMask(computed(() => previewConfig.value?.mask), computed(() => contextPreviewConfig.value?.mask), computed(() => `${prefixCls.value}-preview`));
+	return computed(() => {
+		if (!previewConfig.value) return previewConfig.value;
+		const { cover, getContainer, closeIcon, rootClassName: previewRootClassName } = previewConfig.value;
+		const { closeIcon: contextCloseIcon } = contextPreviewConfig.value ?? {};
+		return {
+			motionName: getTransitionName(`${prefixCls.value}-preview`, "fade"),
+			...previewConfig.value,
+			...defaultCover?.value ? { cover: cover ?? defaultCover.value } : {},
+			icons: icons.value,
+			getContainer: getContainer ?? getContextPopupContainer,
+			zIndex: zIndex.value,
+			closeIcon: closeIcon ?? contextCloseIcon,
+			rootClassName: clsx(mergedRootClassName.value, previewRootClassName),
+			mask: mergedPreviewMask.value,
+			maskClosable: mergedMaskClosable.value,
+			blurClassName: blurClassName.value?.mask
+		};
+	});
+}
+//#endregion
+export { useMergedPreviewConfig as default };

package/dist/image/hooks/usePreviewConfig.d.ts

@@ -0,0 +1,62 @@
+import { GroupPreviewConfig } from "../PreviewGroup.js";
+import { PreviewConfig } from "../index.js";
+import { Ref } from "vue";
+//#region src/image/hooks/usePreviewConfig.d.ts
+declare function usePreviewConfig<T extends PreviewConfig | GroupPreviewConfig>(preview: Ref<T | boolean | undefined>): import("vue").ComputedRef<({} | null)[] | readonly [{
+  readonly open: boolean | undefined;
+  readonly onOpenChange: ((value: boolean, info: {
+    current: number;
+  }) => void) | undefined;
+  readonly cover: string | number | boolean | import("vue").ComponentOptions<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions, any, any, any, string, {}, {}, string, {}, {}, {}, string, import("vue").ComponentProvideOptions> | import("vue").FunctionalComponent<any, {}, any, {}> | {
+    new (...args: any[]): any;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+  } | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+  }> | (string | number | boolean | void | import("vue").Component | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+  }> | null | undefined)[] | import("@v-c/image").CoverConfig | {
+    enabled?: boolean;
+    blur: boolean;
+    closable?: boolean;
+  } | undefined;
+  readonly mask: boolean | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+  }> | {
+    enabled?: boolean;
+    blur: boolean;
+    closable?: boolean;
+  } | undefined;
+  readonly actionsRender: ((originalNode: import("@v-c/util").VueNode, info: import("@v-c/image/dist/Preview/index.js").ToolbarRenderInfoType) => import("@v-c/util").VueNode) | undefined;
+  readonly current?: number;
+  readonly imageRender?: (originalNode: import("@v-c/util").VueNode, info: {
+    transform: import("@v-c/image/dist/hooks/useImageTransform.js").TransformType;
+    current: number;
+    image: import("@v-c/image").ImgInfo;
+  }) => import("@v-c/util").VueNode;
+  readonly onChange?: (current: number, prevCurrent: number) => void;
+  readonly closeIcon?: import("@v-c/util").VueNode | boolean | null;
+  readonly afterOpenChange?: (open: boolean) => void;
+  readonly zIndex?: number;
+  readonly wheel?: boolean;
+  readonly focusTrap?: boolean;
+  readonly maskClosable?: boolean;
+  readonly getContainer?: import("@v-c/portal/dist/Portal.js").PortalProps["getContainer"];
+  readonly motionName?: string;
+  readonly src?: string;
+  readonly alt?: string;
+  readonly icons?: import("@v-c/image/dist/Preview/index.js").OperationIcons;
+  readonly countRender?: (current: number, total: number) => import("@v-c/util").VueNode;
+  readonly scaleStep?: number;
+  readonly minScale?: number;
+  readonly maxScale?: number;
+  readonly movable?: boolean;
+  readonly onTransform?: (info: {
+    transform: import("@v-c/image/dist/hooks/useImageTransform.js").TransformType;
+    action: import("@v-c/image/dist/hooks/useImageTransform.js").TransformAction;
+  }) => void;
+  readonly rootClass?: string;
+}, string | undefined, string | undefined]>;
+//#endregion
+export { usePreviewConfig as default };

package/dist/image/hooks/usePreviewConfig.js

@@ -0,0 +1,69 @@
+import { devUseWarning, isDev } from "../../_util/warning.js";
+import { getSlotPropsFnRun } from "../../_util/tools.js";
+import { computed, isVNode } from "vue";
+//#region src/image/hooks/usePreviewConfig.ts
+function normalizeMask(mask) {
+	mask = getSlotPropsFnRun({}, { mask }, "mask");
+	if (isVNode(mask)) return [mask, void 0];
+	if (mask === true) return [void 0, { blur: true }];
+	if (mask === false) return [void 0, false];
+	if (mask && typeof mask === "object") return [void 0, {
+		blur: true,
+		...mask
+	}];
+	return [void 0, void 0];
+}
+function usePreviewConfig(preview) {
+	const rawPreviewConfig = computed(() => {
+		if (typeof preview.value === "boolean") return preview.value ? {} : null;
+		return preview.value && typeof preview.value === "object" ? preview.value : {};
+	});
+	const splittedPreviewConfig = computed(() => {
+		if (!rawPreviewConfig.value) return [
+			rawPreviewConfig.value,
+			"",
+			""
+		];
+		const { open, onOpenChange, cover, actionsRender, visible, onVisibleChange, rootClassName, maskClassName, mask, forceRender: _forceRender, destroyOnClose: _destroyOnClose, toolbarRender, ...restPreviewConfig } = rawPreviewConfig.value;
+		let onInternalOpenChange;
+		if (onOpenChange) onInternalOpenChange = onOpenChange;
+		else if (onVisibleChange) onInternalOpenChange = (nextOpen, info) => {
+			const { current } = info || {};
+			if (current !== void 0) onVisibleChange(nextOpen, !nextOpen, current);
+			else onVisibleChange(nextOpen, !nextOpen);
+		};
+		const [coverElement, maskConfig] = normalizeMask(mask);
+		return [
+			{
+				...restPreviewConfig,
+				open: open ?? visible,
+				onOpenChange: onInternalOpenChange,
+				cover: cover ?? coverElement,
+				mask: maskConfig,
+				actionsRender: actionsRender ?? toolbarRender
+			},
+			rootClassName,
+			maskClassName
+		];
+	});
+	if (isDev) {
+		const warning = devUseWarning("Image");
+		if (rawPreviewConfig.value) {
+			[
+				["visible", "open"],
+				["onVisibleChange", "onOpenChange"],
+				["maskClassName", "classNames.cover"],
+				["rootClassName", "classNames.root"],
+				["toolbarRender", "actionsRender"]
+			].forEach(([deprecatedName, newName]) => {
+				warning.deprecated(!(deprecatedName in rawPreviewConfig.value), deprecatedName, newName);
+			});
+			warning(!isVNode(rawPreviewConfig.value?.mask), "deprecated", "`mask` used as VueNode is deprecated. Please use `cover` instead.");
+			warning(!("forceRender" in rawPreviewConfig.value), "breaking", "`forceRender` is no longer supported.");
+			warning(!("destroyOnClose" in rawPreviewConfig.value), "breaking", "`destroyOnClose` is no longer supported.");
+		}
+	}
+	return splittedPreviewConfig;
+}
+//#endregion
+export { usePreviewConfig as default };