@cyberpunk-vue/components 1.12.6 → 1.12.7

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

@@ -2,15 +2,37 @@ import { ExtractPropTypes, PropType } from 'vue';
 /**
  * CpImagePreview 组件 Props 定义
  *
- * @description 赛博朋克风格全屏大图预览组件，支持缩放、旋转、多图切换。
+ * @description 赛博朋克风格全屏大图预览组件，支持缩放、旋转、多图切换，工具栏支持插槽自定义。
  *
  * @example
  * ```vue
+ * <!-- 基础用法 -->
  * <CpImagePreview v-model="visible" :url-list="urls" />
+ *
+ * <!-- 在内置工具栏末尾追加按钮 -->
+ * <CpImagePreview v-model="visible" :url-list="urls">
+ *   <template #toolbar-append="{ currentUrl, close }">
+ *     <CpButton variant="ghost" dimmed square @click="share(currentUrl)">分享</CpButton>
+ *   </template>
+ * </CpImagePreview>
+ *
+ * <!-- 完全替换工具栏 -->
+ * <CpImagePreview v-model="visible" :url-list="urls">
+ *   <template #toolbar="{ zoomIn, zoomOut, resetTransform }">
+ *     <CpButton @click="zoomOut">-</CpButton>
+ *     <CpButton @click="zoomIn">+</CpButton>
+ *     <CpButton @click="resetTransform">重置</CpButton>
+ *   </template>
+ * </CpImagePreview>
  * ```
-  * @category 展示组件
+ *
+ * @slots
+ * - `toolbar` - 完全替换底部工具栏（覆盖内置按钮）。作用域 props: `{ scale, rotate, currentIndex, currentUrl, urlList, isSingle, canPrev, canNext, zoomMin, zoomMax, zoomIn(), zoomOut(), rotateLeft(), rotateRight(), resetTransform(), prev(), next(), close(), download() }`
+ * - `toolbar-append` - 在内置工具栏末尾追加自定义按钮。作用域 props 与 `toolbar` 一致
+ *
+ * @category 展示组件
  * @displayName CpImagePreview 图片预览
-  * @exposes close() - 关闭预览
+ * @exposes close() - 关闭预览
  * @exposes prev() - 上一张
  * @exposes next() - 下一张
  * @exposes zoomIn() - 放大

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

@@ -1,4 +1,50 @@
-declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+interface ToolbarSlotProps {
+    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;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        /**
+         * 完全替换底部工具栏（覆盖内置按钮）
+         */
+        toolbar?: (props: ToolbarSlotProps) => unknown;
+        /**
+         * 在内置工具栏末尾追加自定义按钮
+         */
+        'toolbar-append'?: (props: ToolbarSlotProps) => unknown;
+    }> & {
+        /**
+         * 完全替换底部工具栏（覆盖内置按钮）
+         */
+        toolbar?: (props: ToolbarSlotProps) => unknown;
+        /**
+         * 在内置工具栏末尾追加自定义按钮
+         */
+        'toolbar-append'?: (props: ToolbarSlotProps) => unknown;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     readonly modelValue: {
         readonly type: BooleanConstructor;
         readonly default: false;
@@ -108,4 +154,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     readonly urlList: string[];
     readonly teleportTo: string | HTMLElement;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};