zartui 3.1.92 → 3.1.94

package/lib/image-preview/ImagePreview.d.ts

@@ -1,12 +1,9 @@
 import type { PropType, CSSProperties, ExtractPropTypes } from 'vue';
 import { Interceptor } from '../utils';
 import { PopupCloseIconPosition } from '../popup';
+import type { DownloadActionParams } from '../composables/use-media-download';
 import { ImageItem } from './types';
-export type DownloadActionParams = {
-    index: number;
-    url?: string;
-    title?: string;
-};
+export type { DownloadActionParams, FileDownloadOptions } from '../composables/use-media-download';
 export declare const imagePreviewProps: {
     show: BooleanConstructor;
     loop: {

package/lib/image-preview/ImagePreview.js

@@ -25,26 +25,6 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
 var stdin_exports = {};
 __export(stdin_exports, {
   default: () => stdin_default,
@@ -59,8 +39,7 @@ var import_icon = require("../icon");
 var import_swipe = require("../swipe");
 var import_popup = require("../popup");
 var import_ImagePreviewItem = __toESM(require("./ImagePreviewItem"));
-var import_Download = require("./svg/Download");
-var import_toast = require("../toast");
+var import_use_media_download = require("../composables/use-media-download");
 const [name, bem] = (0, import_utils.createNamespace)("image-preview");
 const popupProps = ["show", "transition", "overlayStyle", "closeOnPopstate", "teleport"];
 const imagePreviewProps = {
@@ -97,8 +76,13 @@ var stdin_default = (0, import_vue.defineComponent)({
     slots
   }) {
     const swipeRef = (0, import_vue.ref)();
+    const {
+      downloading,
+      download,
+      downloadFile
+    } = (0, import_use_media_download.useMediaDownload)(props);
     const state = (0, import_vue.reactive)({
-      active: 0,
+      active: +props.startPosition,
       rootWidth: 0,
       rootHeight: 0,
       disableZoom: false
@@ -136,71 +120,38 @@ var stdin_default = (0, import_vue.defineComponent)({
         }, [props.images[state.active].title]);
       }
     };
-    const onDownload = () => __async(this, null, function* () {
+    const onDownload = () => {
       var _a, _b, _c;
-      const downloadParams = {
+      return download({
         index: state.active,
         url: (_a = props.images[state.active]) == null ? void 0 : _a.url,
-        title: (_b = props.images[state.active]) == null ? void 0 : _b.title
-      };
-      if (props.downloadAction) {
-        const result = props.downloadAction(downloadParams);
-        if (result) {
-          return;
-        }
-      }
-      try {
-        let universalJsSdk = yield import("@egova/universal-js-sdk");
-        if (universalJsSdk && universalJsSdk.getJSI && downloadParams.url) {
-          let fileJsi = (_c = universalJsSdk.getJSI()) == null ? void 0 : _c.file;
-          if (fileJsi && fileJsi.download) {
-            (0, import_toast.showLoadingToast)({
-              message: "\u4E0B\u8F7D\u4E2D...",
-              forbidClick: true,
-              duration: 0
-            });
-            fileJsi.download({
-              url: downloadParams.url
-            }).then(({
-              tempFilePath
-            }) => {
-              (0, import_toast.closeToast)();
-              (0, import_toast.showSuccessToast)("\u4E0B\u8F7D\u6210\u529F");
-            }).catch(() => {
-              (0, import_toast.closeToast)();
-              (0, import_toast.showFailToast)("\u4E0B\u8F7D\u5931\u8D25");
-            });
-            return;
-          } else {
-            (0, import_toast.showFailToast)("\u5F53\u524D\u73AF\u5883\u6682\u4E0D\u652F\u6301\u4E0B\u8F7D");
-          }
-        }
-      } catch (e) {
-        console.log(e.message);
-      }
-    });
+        title: (_b = props.images[state.active]) == null ? void 0 : _b.title,
+        fileName: (_c = props.images[state.active]) == null ? void 0 : _c.fileName
+      });
+    };
+    const renderDownloadIcon = () => (0, import_vue.createVNode)("button", {
+      "type": "button",
+      "class": bem("download-icon"),
+      "aria-label": "\u4E0B\u8F7D\u539F\u56FE",
+      "disabled": downloading.value,
+      "onClick": onDownload
+    }, [(0, import_vue.createVNode)(import_icon.Icon, {
+      "name": "download",
+      "size": "24"
+    }, null)]);
     const renderIndex = () => {
       const image = props.images[state.active];
-      const showDownload = props.showDownload && !image.url.startsWith("data:");
+      const showDownload = props.showDownload && (image == null ? void 0 : image.url) && !image.url.startsWith("data:");
       if (props.showIndex || showDownload) {
-        if (props.showIndex && slots.index) {
-          return (0, import_vue.createVNode)("div", {
-            "class": bem("index")
-          }, [slots.index({
-            index: state.active
-          })]);
-        }
         return (0, import_vue.createVNode)("div", {
           "class": bem("index")
-        }, [props.showIndex && renderIndexText(), props.showIndex && renderImageTitle(), showDownload && renderDownloadIcon()]);
+        }, [props.showIndex && (0, import_vue.createVNode)("div", {
+          "class": bem("index-content")
+        }, [slots.index ? slots.index({
+          index: state.active
+        }) : [renderIndexText(), renderImageTitle()]]), showDownload && renderDownloadIcon()]);
       }
     };
-    const renderDownloadIcon = () => {
-      return (0, import_vue.createVNode)("div", {
-        "class": bem("download-icon"),
-        "onClick": onDownload
-      }, [(0, import_Download.Download)(bem)]);
-    };
     const renderCover = () => {
       if (slots.cover) {
         return (0, import_vue.createVNode)("div", {
@@ -262,7 +213,8 @@ var stdin_default = (0, import_vue.defineComponent)({
       return (_a = swipeRef.value) == null ? void 0 : _a.swipeTo(index, options);
     };
     (0, import_use_expose.useExpose)({
-      swipeTo
+      swipeTo,
+      downloadFile
     });
     (0, import_vue.onMounted)(() => {
       resize();
@@ -292,6 +244,7 @@ var stdin_default = (0, import_vue.defineComponent)({
     return () => (0, import_vue.createVNode)(import_popup.Popup, (0, import_vue.mergeProps)({
       "class": [bem(), props.className],
       "overlayClass": [bem("overlay"), props.overlayClass],
+      "onClick": (event) => event.stopPropagation(),
       "onClosed": onClosed,
       "onUpdate:show": updateShow
     }, (0, import_utils.pick)(props, popupProps)), {

package/lib/image-preview/function-call.js

@@ -47,6 +47,8 @@ const defaultConfig = {
   className: "",
   showIndex: true,
   closeable: false,
+  showDownload: false,
+  downloadAction: void 0,
   closeIcon: "clear",
   transition: void 0,
   beforeClose: void 0,
@@ -95,7 +97,8 @@ const showImagePreview = (options, startPosition = 0) => {
         }
         return {
           url: opt.url,
-          title: opt.title || ""
+          title: opt.title || "",
+          fileName: opt.fileName
         };
       }),
       startPosition

package/lib/image-preview/index.css

@@ -1 +1 @@
-:root{--zt-image-preview-index-height: 48px;--zt-image-preview-index-background: var(--zt-gray-a4);--zt-image-preview-index-text-color: var(--zt-white);--zt-image-preview-overlay-background: rgba(0, 0, 0, .9);--zt-image-preview-close-icon-color: var(--zt-gray-5);--zt-image-preview-close-icon-margin: var(--zt-padding-md);--zt-image-preview-close-icon-z-index: 1;--zt-image-preview-error-font-size: 36px}:root[zt-theme-size=large]{--zt-image-preview-error-font-size: 42px}.zt-image-preview{position:fixed;top:0;left:0;width:100%;height:100%;max-width:none;background-color:transparent;transform:none}.zt-image-preview__swipe{height:100%}.zt-image-preview__swipe-item{display:flex;align-items:center;justify-content:center;overflow:hidden}.zt-image-preview__cover{position:absolute;top:0;left:0}.zt-image-preview__image,.zt-image-preview__image-wrap{width:100%;transition-property:transform}.zt-image-preview__image--vertical,.zt-image-preview__image-wrap--vertical{width:auto;height:100%}.zt-image-preview__image img,.zt-image-preview__image-wrap img,.zt-image-preview__image video,.zt-image-preview__image-wrap video{-webkit-user-drag:none}.zt-image-preview__image .zt-image__error,.zt-image-preview__image-wrap .zt-image__error{top:30%;height:40%}.zt-image-preview__image .zt-image__error-icon,.zt-image-preview__image-wrap .zt-image__error-icon{font-size:var(--zt-image-preview-error-font-size)}.zt-image-preview__image .zt-image__loading,.zt-image-preview__image-wrap .zt-image__loading{background-color:transparent}.zt-image-preview__index{box-sizing:border-box;display:flex;align-items:center;position:absolute;bottom:0;left:0;width:100%;height:var(--zt-image-preview-index-height);padding:0 16px;background-color:var(--zt-image-preview-index-background);color:var(--zt-image-preview-index-text-color);overflow:hidden}.zt-image-preview__index-number{height:var(--zt-line-height-xl);background:rgba(45,75,115,.8);border-radius:2px;font-size:var(--zt-font-size-sm);text-align:center;line-height:var(--zt-line-height-xl);padding:0 8px}.zt-image-preview__title{flex-shrink:0;margin-left:8px;margin-right:8px;font-size:var(--zt-font-size-md);line-height:var(--zt-line-height-md)}.zt-image-preview__download-icon{display:flex;align-items:center;justify-content:center;margin-left:auto;cursor:pointer;padding:4px}.zt-image-preview__download-icon svg{width:20px;height:20px}.zt-image-preview__overlay{background:var(--zt-image-preview-overlay-background)}.zt-image-preview__close-icon{position:absolute;z-index:var(--zt-image-preview-close-icon-z-index);color:var(--zt-image-preview-close-icon-color);font-size:var(--zt-font-size-xxxl)}.zt-image-preview__close-icon--top-left{top:var(--zt-image-preview-close-icon-margin);left:var(--zt-image-preview-close-icon-margin)}.zt-image-preview__close-icon--top-right{top:var(--zt-image-preview-close-icon-margin);right:var(--zt-image-preview-close-icon-margin)}.zt-image-preview__close-icon--bottom-left{bottom:var(--zt-image-preview-close-icon-margin);left:var(--zt-image-preview-close-icon-margin)}.zt-image-preview__close-icon--bottom-right{right:var(--zt-image-preview-close-icon-margin);bottom:var(--zt-image-preview-close-icon-margin)}
+:root{--zt-image-preview-index-height: 48px;--zt-image-preview-index-background: var(--zt-gray-a4);--zt-image-preview-index-text-color: var(--zt-white);--zt-image-preview-overlay-background: rgba(0, 0, 0, .9);--zt-image-preview-close-icon-color: var(--zt-gray-5);--zt-image-preview-close-icon-margin: var(--zt-padding-md);--zt-image-preview-close-icon-z-index: 1;--zt-image-preview-error-font-size: 36px}:root[zt-theme-size=large]{--zt-image-preview-error-font-size: 42px}.zt-image-preview{position:fixed;top:0;left:0;width:100%;height:100%;max-width:none;background-color:transparent;transform:none}.zt-image-preview__swipe{height:100%}.zt-image-preview__swipe-item{display:flex;align-items:center;justify-content:center;overflow:hidden}.zt-image-preview__cover{position:absolute;top:0;left:0}.zt-image-preview__image,.zt-image-preview__image-wrap{width:100%;transition-property:transform}.zt-image-preview__image--vertical,.zt-image-preview__image-wrap--vertical{width:auto;height:100%}.zt-image-preview__image img,.zt-image-preview__image-wrap img,.zt-image-preview__image video,.zt-image-preview__image-wrap video{-webkit-user-drag:none}.zt-image-preview__image .zt-image__error,.zt-image-preview__image-wrap .zt-image__error{top:30%;height:40%}.zt-image-preview__image .zt-image__error-icon,.zt-image-preview__image-wrap .zt-image__error-icon{font-size:var(--zt-image-preview-error-font-size)}.zt-image-preview__image .zt-image__loading,.zt-image-preview__image-wrap .zt-image__loading{background-color:transparent}.zt-image-preview__index{box-sizing:border-box;display:flex;align-items:center;position:absolute;bottom:0;left:0;width:100%;height:var(--zt-image-preview-index-height);padding:0 16px;background-color:var(--zt-image-preview-index-background);color:var(--zt-image-preview-index-text-color);overflow:hidden}.zt-image-preview__index-number{height:var(--zt-line-height-xl);background:rgba(45,75,115,.8);border-radius:2px;font-size:var(--zt-font-size-sm);text-align:center;line-height:var(--zt-line-height-xl);padding:0 8px}.zt-image-preview__title{flex-shrink:0;margin-left:8px;margin-right:8px;font-size:var(--zt-font-size-md);line-height:var(--zt-line-height-md)}.zt-image-preview__index-content{display:flex;align-items:center;flex:1;min-width:0;height:100%;overflow:hidden}.zt-image-preview__download-icon{display:flex;align-items:center;border:0;background:transparent;color:inherit;flex-shrink:0;margin-left:auto;padding:4px;cursor:pointer}.zt-image-preview__overlay{background:var(--zt-image-preview-overlay-background)}.zt-image-preview__close-icon{position:absolute;z-index:var(--zt-image-preview-close-icon-z-index);color:var(--zt-image-preview-close-icon-color);font-size:var(--zt-font-size-xxxl)}.zt-image-preview__close-icon--top-left{top:var(--zt-image-preview-close-icon-margin);left:var(--zt-image-preview-close-icon-margin)}.zt-image-preview__close-icon--top-right{top:var(--zt-image-preview-close-icon-margin);right:var(--zt-image-preview-close-icon-margin)}.zt-image-preview__close-icon--bottom-left{bottom:var(--zt-image-preview-close-icon-margin);left:var(--zt-image-preview-close-icon-margin)}.zt-image-preview__close-icon--bottom-right{right:var(--zt-image-preview-close-icon-margin);bottom:var(--zt-image-preview-close-icon-margin)}

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

@@ -1,4 +1,3 @@
-import type { ImagePreviewProps } from './ImagePreview';
 export declare const ImagePreview: import("../utils").WithInstall<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     show: BooleanConstructor;
     loop: {
@@ -148,7 +147,7 @@ export declare const ImagePreview: import("../utils").WithInstall<import("vue").
 export default ImagePreview;
 export { imagePreviewProps } from './ImagePreview';
 export { showImagePreview } from './function-call';
-export type { ImagePreviewProps };
+export type { ImagePreviewProps, DownloadActionParams, FileDownloadOptions } from './ImagePreview';
 export type { ImageItem, ImagePreviewOptions, ImagePreviewInstance, ImagePreviewScaleEventParams, ImagePreviewThemeVars, } from './types';
 declare module 'vue' {
     interface GlobalComponents {

package/lib/image-preview/style/index.js

@@ -6,6 +6,8 @@ require("../../overlay/index.css");
 require("../../popup/index.css");
 require("../../loading/index.css");
 require("../../toast/index.css");
+require("../../button/index.css");
+require("../../dialog/index.css");
 require("../../swipe/index.css");
 require("../../swipe-item/index.css");
 require("../index.css");

package/lib/image-preview/types.d.ts

@@ -2,10 +2,11 @@ import type { CSSProperties, TeleportProps, ComponentPublicInstance } from 'vue'
 import type { Interceptor } from '../utils';
 import type { SwipeToOptions } from '../swipe';
 import type { PopupCloseIconPosition } from '../popup';
-import type { DownloadActionParams, ImagePreviewProps } from './ImagePreview';
+import type { DownloadActionParams, FileDownloadOptions, ImagePreviewProps } from './ImagePreview';
 export type ImageItem = {
     url: string;
     title?: string;
+    fileName?: string;
 };
 export type ImagePreviewOptions = {
     loop?: boolean;
@@ -41,6 +42,7 @@ export type ImagePreviewScaleEventParams = {
     index: number;
 };
 export type ImagePreviewExpose = {
+    downloadFile: (options: FileDownloadOptions) => Promise<void>;
     swipeTo: (index: number, options?: SwipeToOptions) => void;
 };
 export type ImagePreviewInstance = ComponentPublicInstance<ImagePreviewProps, ImagePreviewExpose>;