giime 0.9.10 → 0.9.12

package/lib/components/src/base/imageViewer/ImageViewer.vue2.js

@@ -3,10 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var vue = require('vue');
-require('../../../../utils/index.js');
 var elementPlus = require('element-plus');
+require('../../../../utils/index.js');
+require('../../../../hooks/index.js');
 var imageViewer = require('./imageViewer.js');
+var iconsVue = require('@element-plus/icons-vue');
 var event = require('../../../../utils/src/elementPlus/event.js');
+var index = require('../../../../hooks/base/useDownload/index.js');
 var exports$1 = require('../../../../utils/src/elementPlus/exports.js');
 
 var _sfc_main = /* @__PURE__ */ vue.defineComponent({
@@ -17,14 +20,40 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
   props: imageViewer.imageViewerProps,
   emits: imageViewer.imageViewerEmits,
   setup(__props, { expose: __expose, emit: __emit }) {
+    const slots = vue.useSlots();
     const props = __props;
     const emit = __emit;
     const elEvents = event.getGmEvent(elementPlus.imageViewerEmits, emit);
+    const { downloadByUrl } = index.useDownload();
+    const bindProps = vue.computed(() => {
+      const { downloadMode, ...rest } = props;
+      return rest;
+    });
+    const download = async (urlOrIndex, filename) => {
+      let url;
+      if (typeof urlOrIndex === "number") {
+        const list = props.urlList;
+        url = list?.[urlOrIndex] || "";
+      } else {
+        url = urlOrIndex;
+      }
+      if (!url) {
+        console.warn("[GmImageViewer] download: \u65E0\u6548\u7684 URL");
+        return;
+      }
+      const finalFilename = filename || index.getUrlFilename(url);
+      if (props.downloadMode === "link") {
+        window.open(url, "_blank");
+      } else {
+        await downloadByUrl(url, { filename: finalFilename });
+      }
+    };
     const elRef = vue.ref();
     const exposeNames = ["setActiveItem"];
     const { exposeFns } = exports$1.getGmExports(elRef, exposeNames);
     __expose({
-      ...exposeFns
+      ...exposeFns,
+      download
     });
     return (_ctx, _cache) => {
       const _component_el_image_viewer = vue.resolveComponent("el-image-viewer");
@@ -33,8 +62,85 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
         vue.mergeProps({
           ref_key: "elRef",
           ref: elRef
-        }, props, vue.toHandlers(vue.unref(elEvents))),
-        null,
+        }, bindProps.value, vue.toHandlers(vue.unref(elEvents))),
+        {
+          toolbar: vue.withCtx((toolbarProps) => [
+            vue.unref(slots).toolbar ? vue.renderSlot(_ctx.$slots, "toolbar", vue.normalizeProps(vue.mergeProps({ key: 0 }, { ...toolbarProps, download }))) : (vue.openBlock(), vue.createElementBlock(
+              vue.Fragment,
+              { key: 1 },
+              [
+                vue.createCommentVNode(" \u9ED8\u8BA4\u5DE5\u5177\u680F\uFF1A\u5F53\u7528\u6237\u672A\u4F20 toolbar slot \u65F6\u663E\u793A "),
+                vue.createVNode(vue.unref(elementPlus.ElIcon), {
+                  onClick: toolbarProps.prev
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createVNode(vue.unref(iconsVue.ArrowLeftBold))
+                  ]),
+                  _: 2
+                  /* DYNAMIC */
+                }, 1032, ["onClick"]),
+                vue.createVNode(vue.unref(elementPlus.ElIcon), {
+                  onClick: toolbarProps.next
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createVNode(vue.unref(iconsVue.ArrowRightBold))
+                  ]),
+                  _: 2
+                  /* DYNAMIC */
+                }, 1032, ["onClick"]),
+                vue.createVNode(vue.unref(elementPlus.ElIcon), {
+                  onClick: ($event) => toolbarProps.actions("zoomOut")
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createVNode(vue.unref(iconsVue.ZoomOut))
+                  ]),
+                  _: 2
+                  /* DYNAMIC */
+                }, 1032, ["onClick"]),
+                vue.createVNode(vue.unref(elementPlus.ElIcon), {
+                  onClick: ($event) => toolbarProps.actions("zoomIn")
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createVNode(vue.unref(iconsVue.ZoomIn))
+                  ]),
+                  _: 2
+                  /* DYNAMIC */
+                }, 1032, ["onClick"]),
+                vue.createVNode(vue.unref(elementPlus.ElIcon), {
+                  onClick: ($event) => toolbarProps.actions("anticlockwise")
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createVNode(vue.unref(iconsVue.RefreshLeft))
+                  ]),
+                  _: 2
+                  /* DYNAMIC */
+                }, 1032, ["onClick"]),
+                vue.createVNode(vue.unref(elementPlus.ElIcon), {
+                  onClick: ($event) => toolbarProps.actions("clockwise")
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createVNode(vue.unref(iconsVue.RefreshRight))
+                  ]),
+                  _: 2
+                  /* DYNAMIC */
+                }, 1032, ["onClick"]),
+                vue.createVNode(vue.unref(elementPlus.ElIcon), {
+                  onClick: ($event) => download(toolbarProps.activeIndex)
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createVNode(vue.unref(iconsVue.Download))
+                  ]),
+                  _: 2
+                  /* DYNAMIC */
+                }, 1032, ["onClick"])
+              ],
+              64
+              /* STABLE_FRAGMENT */
+            ))
+          ]),
+          _: 3
+          /* FORWARDED */
+        },
         16
         /* FULL_PROPS */
       );

package/lib/components/src/base/imageViewer/ImageViewer.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageViewer.vue2.js","sources":["../../../../../../../packages/components/src/base/imageViewer/ImageViewer.vue"],"sourcesContent":["<template>\n  <el-image-viewer ref=\"elRef\" v-bind=\"props\" v-on=\"elEvents\" />\n</template>\n<script lang=\"ts\" setup>\nimport { ref } from 'vue';\nimport { getGmEvent, getGmExports } from '@giime/utils';\nimport { imageViewerEmits as elImageViewerEmits } from 'element-plus';\nimport { imageViewerEmits, imageViewerProps } from './imageViewer';\nimport type { ImageViewerInstance } from 'element-plus';\n\ndefineOptions({\n  name: 'GmImageViewer',\n});\nconst props = defineProps(imageViewerProps);\nconst emit = defineEmits(imageViewerEmits);\n// 重发el的事件\nconst elEvents = getGmEvent(elImageViewerEmits, emit);\n\nconst elRef = ref<ImageViewerInstance>();\nconst exposeNames = ['setActiveItem'] as const;\nconst { exposeFns } = getGmExports(elRef, exposeNames);\n\ndefineExpose({\n  ...exposeFns,\n});\n</script>\n"],"names":["getGmEvent","elImageViewerEmits","ref","getGmExports"],"mappings":";;;;;;;;;;;;;;;;;;;AAaA,IAAA,MAAM,KAAA,GAAQ,OAAA;AACd,IAAA,MAAM,IAAA,GAAO,MAAA;AAEb,IAAA,MAAM,QAAA,GAAWA,gBAAA,CAAWC,4BAAA,EAAoB,IAAI,CAAA;AAEpD,IAAA,MAAM,QAAQC,OAAA,EAAyB;AACvC,IAAA,MAAM,WAAA,GAAc,CAAC,eAAe,CAAA;AACpC,IAAA,MAAM,EAAE,SAAA,EAAU,GAAIC,sBAAA,CAAa,OAAO,WAAW,CAAA;AAErD,IAAA,QAAA,CAAa;AAAA,MACX,GAAG;AAAA,KACJ,CAAA;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ImageViewer.vue2.js","sources":["../../../../../../../packages/components/src/base/imageViewer/ImageViewer.vue"],"sourcesContent":["<template>\n  <el-image-viewer ref=\"elRef\" v-bind=\"bindProps\" v-on=\"elEvents\">\n    <template #toolbar=\"toolbarProps\">\n      <slot v-if=\"slots.toolbar\" name=\"toolbar\" v-bind=\"{ ...toolbarProps, download }\" />\n      <!-- 默认工具栏：当用户未传 toolbar slot 时显示 -->\n      <template v-else>\n        <el-icon @click=\"toolbarProps.prev\"><ArrowLeftBold /></el-icon>\n        <el-icon @click=\"toolbarProps.next\"><ArrowRightBold /></el-icon>\n        <el-icon @click=\"toolbarProps.actions('zoomOut')\"><ZoomOut /></el-icon>\n        <el-icon @click=\"toolbarProps.actions('zoomIn')\"><ZoomIn /></el-icon>\n        <el-icon @click=\"toolbarProps.actions('anticlockwise')\"><RefreshLeft /></el-icon>\n        <el-icon @click=\"toolbarProps.actions('clockwise')\"><RefreshRight /></el-icon>\n        <el-icon @click=\"download(toolbarProps.activeIndex)\"><Download /></el-icon>\n      </template>\n    </template>\n  </el-image-viewer>\n</template>\n<script lang=\"ts\" setup>\nimport { computed, ref, useSlots } from 'vue';\nimport { ElIcon } from 'element-plus';\nimport { getGmEvent, getGmExports } from '@giime/utils';\nimport { imageViewerEmits as elImageViewerEmits } from 'element-plus';\nimport { useDownload, getUrlFilename } from '@giime/hooks';\nimport { imageViewerEmits, imageViewerProps } from './imageViewer';\nimport type { ImageViewerInstance } from 'element-plus';\nimport { ArrowLeftBold, ArrowRightBold, ZoomOut, ZoomIn, RefreshLeft, RefreshRight, Download } from '@element-plus/icons-vue';\n\ndefineOptions({\n  name: 'GmImageViewer',\n});\nconst slots = useSlots();\nconst props = defineProps(imageViewerProps);\nconst emit = defineEmits(imageViewerEmits);\n// 重发el的事件\nconst elEvents = getGmEvent(elImageViewerEmits, emit);\n\nconst { downloadByUrl } = useDownload();\n\n// 绑定 props，排除自定义的 downloadMode\nconst bindProps = computed(() => {\n  const { downloadMode, ...rest } = props;\n  return rest;\n});\n\n/**\n * 下载图片\n * @param urlOrIndex 图片 URL 或在 urlList 中的索引\n * @param filename 自定义文件名（可选）\n */\nconst download = async (urlOrIndex: string | number, filename?: string) => {\n  let url: string;\n\n  if (typeof urlOrIndex === 'number') {\n    // 通过索引获取 URL\n    const list = props.urlList as string[];\n    url = list?.[urlOrIndex] || '';\n  } else {\n    url = urlOrIndex;\n  }\n\n  if (!url) {\n    console.warn('[GmImageViewer] download: 无效的 URL');\n    return;\n  }\n\n  const finalFilename = filename || getUrlFilename(url);\n\n  if (props.downloadMode === 'link') {\n    // 使用 window.open 直接打开下载（无需 fetch 权限）\n    window.open(url, '_blank');\n  } else {\n    // 使用 downloadByUrl（blob 模式，带进度提示）\n    await downloadByUrl(url, { filename: finalFilename });\n  }\n};\n\nconst elRef = ref<ImageViewerInstance>();\nconst exposeNames = ['setActiveItem'] as const;\nconst { exposeFns } = getGmExports(elRef, exposeNames);\n\ndefineExpose({\n  ...exposeFns,\n  download,\n});\n</script>\n"],"names":["useSlots","getGmEvent","elImageViewerEmits","useDownload","computed","getUrlFilename","ref","getGmExports"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA8BA,IAAA,MAAM,QAAQA,YAAA,EAAS;AACvB,IAAA,MAAM,KAAA,GAAQ,OAAA;AACd,IAAA,MAAM,IAAA,GAAO,MAAA;AAEb,IAAA,MAAM,QAAA,GAAWC,gBAAA,CAAWC,4BAAA,EAAoB,IAAI,CAAA;AAEpD,IAAA,MAAM,EAAE,aAAA,EAAc,GAAIC,iBAAA,EAAY;AAGtC,IAAA,MAAM,SAAA,GAAYC,aAAS,MAAM;AAC/B,MAAA,MAAM,EAAE,YAAA,EAAc,GAAG,IAAA,EAAK,GAAI,KAAA;AAClC,MAAA,OAAO,IAAA;AAAA,IACT,CAAC,CAAA;AAOD,IAAA,MAAM,QAAA,GAAW,OAAO,UAAA,EAA6B,QAAA,KAAsB;AACzE,MAAA,IAAI,GAAA;AAEJ,MAAA,IAAI,OAAO,eAAe,QAAA,EAAU;AAElC,QAAA,MAAM,OAAO,KAAA,CAAM,OAAA;AACnB,QAAA,GAAA,GAAM,IAAA,GAAO,UAAU,CAAA,IAAK,EAAA;AAAA,MAC9B,CAAA,MAAO;AACL,QAAA,GAAA,GAAM,UAAA;AAAA,MACR;AAEA,MAAA,IAAI,CAAC,GAAA,EAAK;AACR,QAAA,OAAA,CAAQ,KAAK,kDAAmC,CAAA;AAChD,QAAA;AAAA,MACF;AAEA,MAAA,MAAM,aAAA,GAAgB,QAAA,IAAYC,oBAAA,CAAe,GAAG,CAAA;AAEpD,MAAA,IAAI,KAAA,CAAM,iBAAiB,MAAA,EAAQ;AAEjC,QAAA,MAAA,CAAO,IAAA,CAAK,KAAK,QAAQ,CAAA;AAAA,MAC3B,CAAA,MAAO;AAEL,QAAA,MAAM,aAAA,CAAc,GAAA,EAAK,EAAE,QAAA,EAAU,eAAe,CAAA;AAAA,MACtD;AAAA,IACF,CAAA;AAEA,IAAA,MAAM,QAAQC,OAAA,EAAyB;AACvC,IAAA,MAAM,WAAA,GAAc,CAAC,eAAe,CAAA;AACpC,IAAA,MAAM,EAAE,SAAA,EAAU,GAAIC,sBAAA,CAAa,OAAO,WAAW,CAAA;AAErD,IAAA,QAAA,CAAa;AAAA,MACX,GAAG,SAAA;AAAA,MACH;AAAA,KACD,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/src/base/imageViewer/imageViewer.d.ts

@@ -1,6 +1,18 @@
+import type { PropType } from 'vue';
+export type GmImageViewerDownloadMode = 'blob' | 'link';
 export declare const imageViewerProps: {
+    /** 是否显示加载进度，默认 true */
+    showProgress: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 下载模式：blob 使用 downloadByUrl（带进度），link 使用 window.open（无需权限） */
+    downloadMode: {
+        type: PropType<GmImageViewerDownloadMode>;
+        default: string;
+    };
     urlList: {
-        readonly type: import("vue").PropType<string[]>;
+        readonly type: PropType<string[]>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
@@ -8,13 +20,13 @@ export declare const imageViewerProps: {
         readonly default: () => [];
     };
     zIndex: {
-        readonly type: import("vue").PropType<number>;
+        readonly type: PropType<number>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
     };
     initialIndex: {
-        readonly type: import("vue").PropType<number>;
+        readonly type: PropType<number>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
@@ -22,7 +34,7 @@ export declare const imageViewerProps: {
         readonly default: 0;
     };
     infinite: {
-        readonly type: import("vue").PropType<boolean>;
+        readonly type: PropType<boolean>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
@@ -32,7 +44,7 @@ export declare const imageViewerProps: {
     hideOnClickModal: BooleanConstructor;
     teleported: BooleanConstructor;
     closeOnPressEscape: {
-        readonly type: import("vue").PropType<boolean>;
+        readonly type: PropType<boolean>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
@@ -40,7 +52,7 @@ export declare const imageViewerProps: {
         readonly default: true;
     };
     zoomRate: {
-        readonly type: import("vue").PropType<number>;
+        readonly type: PropType<number>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
@@ -48,7 +60,7 @@ export declare const imageViewerProps: {
         readonly default: 1.2;
     };
     scale: {
-        readonly type: import("vue").PropType<number>;
+        readonly type: PropType<number>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
@@ -56,7 +68,7 @@ export declare const imageViewerProps: {
         readonly default: 1;
     };
     minScale: {
-        readonly type: import("vue").PropType<number>;
+        readonly type: PropType<number>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
@@ -64,16 +76,15 @@ export declare const imageViewerProps: {
         readonly default: 0.2;
     };
     maxScale: {
-        readonly type: import("vue").PropType<number>;
+        readonly type: PropType<number>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
     } & {
         readonly default: 7;
     };
-    showProgress: BooleanConstructor;
     crossorigin: {
-        readonly type: import("vue").PropType<"" | "anonymous" | "use-credentials">;
+        readonly type: PropType<"" | "anonymous" | "use-credentials">;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;

package/lib/components/src/base/imageViewer/imageViewer.js

@@ -3,7 +3,17 @@
 var elementPlus = require('element-plus');
 
 const imageViewerProps = {
-  ...elementPlus.imageViewerProps
+  ...elementPlus.imageViewerProps,
+  /** 是否显示加载进度，默认 true */
+  showProgress: {
+    type: Boolean,
+    default: true
+  },
+  /** 下载模式：blob 使用 downloadByUrl（带进度），link 使用 window.open（无需权限） */
+  downloadMode: {
+    type: String,
+    default: "blob"
+  }
 };
 const imageViewerEmits = {
   ...elementPlus.imageViewerEmits

package/lib/components/src/base/imageViewer/imageViewer.js.map

@@ -1 +1 @@
-{"version":3,"file":"imageViewer.js","sources":["../../../../../../../packages/components/src/base/imageViewer/imageViewer.ts"],"sourcesContent":["import { imageViewerEmits as elImageViewerEmits, imageViewerProps as elImageViewerProps } from 'element-plus';\n// import type { ExtractPropTypes } from 'vue';\n\nexport const imageViewerProps = {\n  ...elImageViewerProps,\n};\n\nexport const imageViewerEmits = {\n  ...elImageViewerEmits,\n  // 自定义事件\n  // submit: (value: any) => !!value,\n};\n"],"names":["elImageViewerProps","elImageViewerEmits"],"mappings":";;;;AAGO,MAAM,gBAAA,GAAmB;AAAA,EAC9B,GAAGA;AACL;AAEO,MAAM,gBAAA,GAAmB;AAAA,EAC9B,GAAGC;AAAA;AAAA;AAGL;;;;;"}
+{"version":3,"file":"imageViewer.js","sources":["../../../../../../../packages/components/src/base/imageViewer/imageViewer.ts"],"sourcesContent":["import { imageViewerEmits as elImageViewerEmits, imageViewerProps as elImageViewerProps } from 'element-plus';\nimport type { PropType } from 'vue';\n\nexport type GmImageViewerDownloadMode = 'blob' | 'link';\n\nexport const imageViewerProps = {\n  ...elImageViewerProps,\n  /** 是否显示加载进度，默认 true */\n  showProgress: {\n    type: Boolean,\n    default: true,\n  },\n  /** 下载模式：blob 使用 downloadByUrl（带进度），link 使用 window.open（无需权限） */\n  downloadMode: {\n    type: String as PropType<GmImageViewerDownloadMode>,\n    default: 'blob',\n  },\n};\n\nexport const imageViewerEmits = {\n  ...elImageViewerEmits,\n  // 自定义事件\n  // submit: (value: any) => !!value,\n};\n"],"names":["elImageViewerProps","elImageViewerEmits"],"mappings":";;;;AAKO,MAAM,gBAAA,GAAmB;AAAA,EAC9B,GAAGA,4BAAA;AAAA;AAAA,EAEH,YAAA,EAAc;AAAA,IACZ,IAAA,EAAM,OAAA;AAAA,IACN,OAAA,EAAS;AAAA,GACX;AAAA;AAAA,EAEA,YAAA,EAAc;AAAA,IACZ,IAAA,EAAM,MAAA;AAAA,IACN,OAAA,EAAS;AAAA;AAEb;AAEO,MAAM,gBAAA,GAAmB;AAAA,EAC9B,GAAGC;AAAA;AAAA;AAGL;;;;;"}