@cyberpunk-vue/components 1.13.10 → 1.13.11

package/dist/dialog/index.d.ts

@@ -280,13 +280,13 @@ export declare const CpDialog: import('../utils').SFCWithInstall<{
         loadingClass: import('.').DialogCustomClass;
         loadingStyle: string | import('vue').CSSProperties;
         overlayStyle: string | import('vue').CSSProperties;
+        closeOnClickModal: boolean;
         draggable: boolean;
         closeOnEscape: boolean;
         fullscreen: boolean;
         fullscreenInset: import('.').DialogFullscreenInset;
         modal: boolean;
         appendToBody: boolean;
-        closeOnClickModal: boolean;
         showClose: boolean;
         beforeClose: import('.').DialogBeforeCloseFn;
         lockScroll: boolean;
@@ -564,13 +564,13 @@ export declare const CpDialog: import('../utils').SFCWithInstall<{
         loadingClass: import('.').DialogCustomClass;
         loadingStyle: string | import('vue').CSSProperties;
         overlayStyle: string | import('vue').CSSProperties;
+        closeOnClickModal: boolean;
         draggable: boolean;
         closeOnEscape: boolean;
         fullscreen: boolean;
         fullscreenInset: import('.').DialogFullscreenInset;
         modal: boolean;
         appendToBody: boolean;
-        closeOnClickModal: boolean;
         showClose: boolean;
         beforeClose: import('.').DialogBeforeCloseFn;
         lockScroll: boolean;
@@ -850,13 +850,13 @@ export declare const CpDialog: import('../utils').SFCWithInstall<{
     loadingClass: import('.').DialogCustomClass;
     loadingStyle: string | import('vue').CSSProperties;
     overlayStyle: string | import('vue').CSSProperties;
+    closeOnClickModal: boolean;
     draggable: boolean;
     closeOnEscape: boolean;
     fullscreen: boolean;
     fullscreenInset: import('.').DialogFullscreenInset;
     modal: boolean;
     appendToBody: boolean;
-    closeOnClickModal: boolean;
     showClose: boolean;
     beforeClose: import('.').DialogBeforeCloseFn;
     lockScroll: boolean;

package/dist/dialog/src/dialog.vue.d.ts

@@ -490,13 +490,13 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     loadingClass: import('./dialog').DialogCustomClass;
     loadingStyle: string | CSSProperties;
     overlayStyle: string | CSSProperties;
+    closeOnClickModal: boolean;
     draggable: boolean;
     closeOnEscape: boolean;
     fullscreen: boolean;
     fullscreenInset: import('./dialog').DialogFullscreenInset;
     modal: boolean;
     appendToBody: boolean;
-    closeOnClickModal: boolean;
     showClose: boolean;
     beforeClose: DialogBeforeCloseFn;
     lockScroll: boolean;

package/dist/image/index.d.ts

@@ -33,7 +33,7 @@ export declare const CpImage: import('../utils').SFCWithInstall<{
             readonly default: false;
         };
         readonly preview: {
-            readonly type: BooleanConstructor;
+            readonly type: import('vue').PropType<import('.').ImagePreviewConfig>;
             readonly default: false;
         };
         readonly previewSrc: {
@@ -117,14 +117,14 @@ export declare const CpImage: import('../utils').SFCWithInstall<{
         readonly type: "primary" | "success" | "warning" | "error" | "info" | "default";
         readonly color: string;
         readonly shape: import('.').ImageShape;
+        readonly initialIndex: number;
+        readonly download: boolean;
         readonly src: string;
         readonly alt: string;
         readonly lazy: boolean;
-        readonly preview: boolean;
+        readonly preview: import('.').ImagePreviewConfig;
         readonly previewSrc: string;
         readonly previewSrcList: string[];
-        readonly initialIndex: number;
-        readonly download: boolean;
         readonly fallbackSrc: string;
         readonly showDecor: boolean;
         readonly decorPosition: import('.').ImageDecorPosition;
@@ -166,7 +166,7 @@ export declare const CpImage: import('../utils').SFCWithInstall<{
             readonly default: false;
         };
         readonly preview: {
-            readonly type: BooleanConstructor;
+            readonly type: import('vue').PropType<import('.').ImagePreviewConfig>;
             readonly default: false;
         };
         readonly previewSrc: {
@@ -247,14 +247,14 @@ export declare const CpImage: import('../utils').SFCWithInstall<{
         readonly type: "primary" | "success" | "warning" | "error" | "info" | "default";
         readonly color: string;
         readonly shape: import('.').ImageShape;
+        readonly initialIndex: number;
+        readonly download: boolean;
         readonly src: string;
         readonly alt: string;
         readonly lazy: boolean;
-        readonly preview: boolean;
+        readonly preview: import('.').ImagePreviewConfig;
         readonly previewSrc: string;
         readonly previewSrcList: string[];
-        readonly initialIndex: number;
-        readonly download: boolean;
         readonly fallbackSrc: string;
         readonly showDecor: boolean;
         readonly decorPosition: import('.').ImageDecorPosition;
@@ -290,7 +290,7 @@ export declare const CpImage: import('../utils').SFCWithInstall<{
         readonly default: false;
     };
     readonly preview: {
-        readonly type: BooleanConstructor;
+        readonly type: import('vue').PropType<import('.').ImagePreviewConfig>;
         readonly default: false;
     };
     readonly previewSrc: {
@@ -374,14 +374,14 @@ export declare const CpImage: import('../utils').SFCWithInstall<{
     readonly type: "primary" | "success" | "warning" | "error" | "info" | "default";
     readonly color: string;
     readonly shape: import('.').ImageShape;
+    readonly initialIndex: number;
+    readonly download: boolean;
     readonly src: string;
     readonly alt: string;
     readonly lazy: boolean;
-    readonly preview: boolean;
+    readonly preview: import('.').ImagePreviewConfig;
     readonly previewSrc: string;
     readonly previewSrcList: string[];
-    readonly initialIndex: number;
-    readonly download: boolean;
     readonly fallbackSrc: string;
     readonly showDecor: boolean;
     readonly decorPosition: import('.').ImageDecorPosition;

package/dist/image/src/image.d.ts

@@ -1,5 +1,6 @@
 import { ExtractPropTypes, PropType } from 'vue';
 import { DurationValue } from '@cyberpunk-vue/hooks';
+import { ImagePreviewClosePayload, ImagePreviewProps, ImagePreviewSwitchPayload } from '../../image-preview/src/image-preview';
 /**
  * 图片适应模式
  * - `contain` - 保持比例，完整显示
@@ -25,6 +26,29 @@ export type ImageShape = 'clip' | 'no-clip' | 'round' | 'circle';
  * - `top-right` - 右上角
  */
 export type ImageDecorPosition = 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
+export type ImagePreviewOptions = Partial<Omit<ImagePreviewProps, 'modelValue' | 'urlList' | 'initialIndex'>> & {
+    /**
+     * 单图预览地址，不传时使用图片当前 src
+     */
+    url?: string;
+    /**
+     * 多图预览列表，优先级高于 url
+     */
+    urlList?: string[];
+    /**
+     * 初始显示的图片索引
+     */
+    initialIndex?: number;
+    /**
+     * 关闭预览时触发
+     */
+    onClose?: (payload: ImagePreviewClosePayload) => void;
+    /**
+     * 切换图片时触发
+     */
+    onSwitch?: (payload: ImagePreviewSwitchPayload) => void;
+};
+export type ImagePreviewConfig = boolean | ImagePreviewOptions;
 /**
  * CpImage 组件 Props 定义
  *
@@ -43,6 +67,17 @@ export type ImageDecorPosition = 'bottom-left' | 'bottom-right' | 'top-left' | '
  *
  * <!-- 圆形头像 -->
  * <CpImage src="/avatar.jpg" shape="circle" :width="64" :height="64" />
+ *
+ * <!-- 聚合式预览配置 -->
+ * <CpImage
+ *   src="/thumb.jpg"
+ *   :preview="{
+ *     urlList: ['/a.jpg', '/b.jpg'],
+ *     initialIndex: 0,
+ *     closeOnClickModal: false,
+ *     onClose: ({ index }) => console.log(index)
+ *   }"
+ * />
  * ```
   * @category 展示组件
  * @displayName CpImage 图片
@@ -97,17 +132,18 @@ export declare const imageProps: {
         readonly default: false;
     };
     /**
-     * 是否开启点击预览
-     * 开启后点击图片会弹出全屏大图预览
+     * 预览配置
+     * 设为 true 时使用当前图片和默认预览配置；传入对象时可聚合配置预览图片、交互行为和事件回调。
      * @default false
      */
     readonly preview: {
-        readonly type: BooleanConstructor;
+        readonly type: PropType<ImagePreviewConfig>;
         readonly default: false;
     };
     /**
-     * 预览大图地址
+     * 已废弃：请使用 `preview.url`
      * 在预览中使用的高清图片地址，不指定则使用 src
+     * @deprecated 请使用 `preview.url`
      * @default ''
      */
     readonly previewSrc: {
@@ -115,8 +151,9 @@ export declare const imageProps: {
         readonly default: "";
     };
     /**
-     * 多图预览列表
+     * 已废弃：请使用 `preview.urlList`
      * 传入后自动启用预览，点击图片可查看整个图片列表
+     * @deprecated 请使用 `preview.urlList`
      * @default []
      */
     readonly previewSrcList: {
@@ -124,7 +161,8 @@ export declare const imageProps: {
         readonly default: () => never[];
     };
     /**
-     * 初始预览索引，在 previewSrcList 模式下有效
+     * 已废弃：请使用 `preview.initialIndex`
+     * @deprecated 请使用 `preview.initialIndex`
      * @default 0
      * @example `<CpImage :preview-src-list="[...]" :initial-index="1" />`
      */
@@ -133,7 +171,8 @@ export declare const imageProps: {
         readonly default: 0;
     };
     /**
-     * 是否允许在预览时下载图片
+     * 已废弃：请使用 `preview.download`
+     * @deprecated 请使用 `preview.download`
      * @default false
      */
     readonly download: {

package/dist/image/src/image.vue.d.ts

@@ -33,7 +33,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
         readonly default: false;
     };
     readonly preview: {
-        readonly type: BooleanConstructor;
+        readonly type: import('vue').PropType<import('./image').ImagePreviewConfig>;
         readonly default: false;
     };
     readonly previewSrc: {
@@ -134,7 +134,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
         readonly default: false;
     };
     readonly preview: {
-        readonly type: BooleanConstructor;
+        readonly type: import('vue').PropType<import('./image').ImagePreviewConfig>;
         readonly default: false;
     };
     readonly previewSrc: {
@@ -220,14 +220,14 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     readonly type: "primary" | "success" | "warning" | "error" | "info" | "default";
     readonly color: string;
     readonly shape: import('./image').ImageShape;
+    readonly initialIndex: number;
+    readonly download: boolean;
     readonly src: string;
     readonly alt: string;
     readonly lazy: boolean;
-    readonly preview: boolean;
+    readonly preview: import('./image').ImagePreviewConfig;
     readonly previewSrc: string;
     readonly previewSrcList: string[];
-    readonly initialIndex: number;
-    readonly download: boolean;
     readonly fallbackSrc: string;
     readonly showDecor: boolean;
     readonly decorPosition: import('./image').ImageDecorPosition;

package/dist/image-preview/index.d.ts

@@ -0,0 +1,237 @@
+/**
+ * CpImagePreview 大图预览组件
+ *
+ * @description 赛博朋克风格全屏大图预览组件，支持缩放、旋转、多图切换。
+ *
+ * @example
+ * ```vue
+ * <CpImagePreview v-model="visible" :url-list="['/a.jpg', '/b.jpg']" />
+ * ```
+ */
+export declare const CpImagePreview: import('../utils').SFCWithInstall<{
+    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
+        readonly modelValue: {
+            readonly type: BooleanConstructor;
+            readonly default: false;
+        };
+        readonly urlList: {
+            readonly type: import('vue').PropType<string[]>;
+            readonly default: () => never[];
+        };
+        readonly initialIndex: {
+            readonly type: NumberConstructor;
+            readonly default: 0;
+        };
+        readonly zIndex: {
+            readonly type: NumberConstructor;
+            readonly default: 2000;
+        };
+        readonly infinite: {
+            readonly type: BooleanConstructor;
+            readonly default: true;
+        };
+        readonly teleportTo: {
+            readonly type: import('vue').PropType<string | HTMLElement>;
+            readonly default: "body";
+        };
+        readonly type: {
+            readonly type: import('vue').PropType<"default" | "primary" | "success" | "warning" | "error" | "info">;
+            readonly default: "primary";
+        };
+        readonly color: {
+            readonly type: StringConstructor;
+            readonly default: "";
+        };
+        readonly download: {
+            readonly type: BooleanConstructor;
+            readonly default: false;
+        };
+        readonly closeOnClickModal: {
+            readonly type: BooleanConstructor;
+            readonly default: true;
+        };
+    }>> & Readonly<{
+        onSwitch?: ((index: number) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+        onClose?: ((payload: import('.').ImagePreviewPayload) => any) | undefined;
+    }>, {
+        close: () => void;
+        prev: () => void;
+        next: () => void;
+        zoomIn: () => void;
+        zoomOut: () => void;
+        rotateLeft: () => void;
+        rotateRight: () => void;
+        resetTransform: () => void;
+    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+        switch: (index: number) => void;
+        "update:modelValue": (value: boolean) => void;
+        close: (payload: import('.').ImagePreviewPayload) => void;
+    }, import('vue').PublicProps, {
+        readonly type: "primary" | "success" | "warning" | "error" | "info" | "default";
+        readonly color: string;
+        readonly modelValue: boolean;
+        readonly infinite: boolean;
+        readonly zIndex: number;
+        readonly urlList: string[];
+        readonly initialIndex: number;
+        readonly teleportTo: string | HTMLElement;
+        readonly download: boolean;
+        readonly closeOnClickModal: boolean;
+    }, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import('vue').ExtractPropTypes<{
+        readonly modelValue: {
+            readonly type: BooleanConstructor;
+            readonly default: false;
+        };
+        readonly urlList: {
+            readonly type: import('vue').PropType<string[]>;
+            readonly default: () => never[];
+        };
+        readonly initialIndex: {
+            readonly type: NumberConstructor;
+            readonly default: 0;
+        };
+        readonly zIndex: {
+            readonly type: NumberConstructor;
+            readonly default: 2000;
+        };
+        readonly infinite: {
+            readonly type: BooleanConstructor;
+            readonly default: true;
+        };
+        readonly teleportTo: {
+            readonly type: import('vue').PropType<string | HTMLElement>;
+            readonly default: "body";
+        };
+        readonly type: {
+            readonly type: import('vue').PropType<"default" | "primary" | "success" | "warning" | "error" | "info">;
+            readonly default: "primary";
+        };
+        readonly color: {
+            readonly type: StringConstructor;
+            readonly default: "";
+        };
+        readonly download: {
+            readonly type: BooleanConstructor;
+            readonly default: false;
+        };
+        readonly closeOnClickModal: {
+            readonly type: BooleanConstructor;
+            readonly default: true;
+        };
+    }>> & Readonly<{
+        onSwitch?: ((index: number) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+        onClose?: ((payload: import('.').ImagePreviewPayload) => any) | undefined;
+    }>, {
+        close: () => void;
+        prev: () => void;
+        next: () => void;
+        zoomIn: () => void;
+        zoomOut: () => void;
+        rotateLeft: () => void;
+        rotateRight: () => void;
+        resetTransform: () => void;
+    }, {}, {}, {}, {
+        readonly type: "primary" | "success" | "warning" | "error" | "info" | "default";
+        readonly color: string;
+        readonly modelValue: boolean;
+        readonly infinite: boolean;
+        readonly zIndex: number;
+        readonly urlList: string[];
+        readonly initialIndex: number;
+        readonly teleportTo: string | HTMLElement;
+        readonly download: boolean;
+        readonly closeOnClickModal: boolean;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
+    readonly modelValue: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly urlList: {
+        readonly type: import('vue').PropType<string[]>;
+        readonly default: () => never[];
+    };
+    readonly initialIndex: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
+    readonly zIndex: {
+        readonly type: NumberConstructor;
+        readonly default: 2000;
+    };
+    readonly infinite: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly teleportTo: {
+        readonly type: import('vue').PropType<string | HTMLElement>;
+        readonly default: "body";
+    };
+    readonly type: {
+        readonly type: import('vue').PropType<"default" | "primary" | "success" | "warning" | "error" | "info">;
+        readonly default: "primary";
+    };
+    readonly color: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly download: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly closeOnClickModal: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+}>> & Readonly<{
+    onSwitch?: ((index: number) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    onClose?: ((payload: import('.').ImagePreviewPayload) => any) | undefined;
+}>, {
+    close: () => void;
+    prev: () => void;
+    next: () => void;
+    zoomIn: () => void;
+    zoomOut: () => void;
+    rotateLeft: () => void;
+    rotateRight: () => void;
+    resetTransform: () => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    switch: (index: number) => void;
+    "update:modelValue": (value: boolean) => void;
+    close: (payload: import('.').ImagePreviewPayload) => void;
+}, string, {
+    readonly type: "primary" | "success" | "warning" | "error" | "info" | "default";
+    readonly color: string;
+    readonly modelValue: boolean;
+    readonly infinite: boolean;
+    readonly zIndex: number;
+    readonly urlList: string[];
+    readonly initialIndex: number;
+    readonly teleportTo: string | HTMLElement;
+    readonly download: boolean;
+    readonly closeOnClickModal: boolean;
+}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+    $slots: Readonly<{
+        toolbar?: (props: import('.').ImagePreviewToolbarSlotProps) => unknown;
+        'toolbar-append'?: (props: import('.').ImagePreviewToolbarSlotProps) => unknown;
+    }> & {
+        toolbar?: (props: import('.').ImagePreviewToolbarSlotProps) => unknown;
+        'toolbar-append'?: (props: import('.').ImagePreviewToolbarSlotProps) => unknown;
+    };
+})>;
+export default CpImagePreview;
+export * from './src/image-preview';
+export type { CpImagePreviewInstance } from './src/instance';

package/dist/image-preview/src/image-preview.d.ts

@@ -1,4 +1,32 @@
 import { ExtractPropTypes, PropType } from 'vue';
+export interface ImagePreviewPayload {
+    index: number;
+    url: string;
+    urlList: string[];
+}
+export type ImagePreviewClosePayload = ImagePreviewPayload;
+export type ImagePreviewSwitchPayload = ImagePreviewPayload;
+export interface ImagePreviewToolbarSlotProps {
+    scale: number;
+    rotate: number;
+    currentIndex: number;
+    currentUrl: string;
+    urlList: string[];
+    isSingle: boolean;
+    canPrev: boolean;
+    canNext: boolean;
+    zoomMin: number;
+    zoomMax: number;
+    zoomIn: () => void;
+    zoomOut: () => void;
+    rotateLeft: () => void;
+    rotateRight: () => void;
+    resetTransform: () => void;
+    prev: () => void;
+    next: () => void;
+    close: () => void;
+    download: () => void;
+}
 /**
  * CpImagePreview 组件 Props 定义
  *
@@ -9,6 +37,14 @@ import { ExtractPropTypes, PropType } from 'vue';
  * <!-- 基础用法 -->
  * <CpImagePreview v-model="visible" :url-list="urls" />
  *
+ * <!-- 禁止点击遮罩关闭，并在关闭时获取停留位置 -->
+ * <CpImagePreview
+ *   v-model="visible"
+ *   :url-list="urls"
+ *   :close-on-click-modal="false"
+ *   @close="({ index, url }) => console.log(index, url)"
+ * />
+ *
  * <!-- 在内置工具栏末尾追加按钮 -->
  * <CpImagePreview v-model="visible" :url-list="urls">
  *   <template #toolbar-append="{ currentUrl, close }">
@@ -114,6 +150,14 @@ export declare const imagePreviewProps: {
         readonly type: BooleanConstructor;
         readonly default: false;
     };
+    /**
+     * 点击遮罩是否关闭预览
+     * @default true
+     */
+    readonly closeOnClickModal: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
 };
 export type ImagePreviewProps = ExtractPropTypes<typeof imagePreviewProps>;
 /**
@@ -123,7 +167,7 @@ export declare const imagePreviewEmits: {
     /** v-model 绑定 */
     'update:modelValue': (value: boolean) => boolean;
     /** 关闭时触发 */
-    close: () => boolean;
+    close: (payload: ImagePreviewClosePayload) => boolean;
     /** 切换图片时触发 */
     switch: (index: number) => boolean;
 };