zartui 3.1.92 → 3.1.94

package/es/composables/use-media-download.d.ts

@@ -0,0 +1,20 @@
+export type DownloadActionParams = {
+    index: number;
+    url?: string;
+    title?: string;
+    fileName?: string;
+};
+export type FileDownloadOptions = {
+    url: string;
+    fileName?: string;
+    title?: string;
+    index?: number;
+};
+export declare function useMediaDownload(props: {
+    showDownload: boolean;
+    downloadAction?: (params: DownloadActionParams) => boolean;
+}): {
+    downloading: import("vue").Ref<boolean, boolean>;
+    download: (params: DownloadActionParams, confirm?: boolean) => Promise<void>;
+    downloadFile: (options: FileDownloadOptions) => Promise<void>;
+};

package/es/composables/use-media-download.mjs

@@ -0,0 +1,111 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+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());
+  });
+};
+import { ref } from "vue";
+import { showConfirmDialog } from "../dialog/index.mjs";
+import { closeToast, showFailToast, showLoadingToast, showSuccessToast } from "../toast/index.mjs";
+function useMediaDownload(props) {
+  const downloading = ref(false);
+  const downloadInBrowser = (params) => {
+    const link = document.createElement("a");
+    link.href = params.url;
+    link.download = params.fileName || "";
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+  };
+  const download = (params, confirm = false) => __async(this, null, function* () {
+    var _a, _b, _c;
+    if (!props.showDownload || downloading.value || !params.url || params.url.startsWith("data:")) {
+      return;
+    }
+    downloading.value = true;
+    try {
+      if (confirm) {
+        try {
+          yield showConfirmDialog({ message: "\u9644\u4EF6\u683C\u5F0F\u6682\u4E0D\u652F\u6301\u9884\u89C8\uFF0C\u662F\u5426\u4E0B\u8F7D\u539F\u6587\u4EF6" });
+        } catch (action) {
+          if (action !== "cancel") {
+            throw action;
+          }
+          return;
+        }
+      }
+      if (!props.showDownload || ((_a = props.downloadAction) == null ? void 0 : _a.call(props, params))) {
+        return;
+      }
+      let file;
+      try {
+        const sdk = yield import("@egova/universal-js-sdk");
+        file = (_b = sdk.getJSI()) == null ? void 0 : _b.file;
+      } catch (e) {
+        downloadInBrowser(params);
+        return;
+      }
+      if (!(file == null ? void 0 : file.download)) {
+        downloadInBrowser(params);
+        return;
+      }
+      showLoadingToast({ message: "\u4E0B\u8F7D\u4E2D...", forbidClick: true, duration: 0 });
+      try {
+        const result = yield file.download({ url: params.url });
+        const displayPath = (_c = result == null ? void 0 : result.tempFilePath) == null ? void 0 : _c.replace(/^\/storage\/emulated\/0\//, "");
+        closeToast();
+        showSuccessToast({
+          message: displayPath ? `\u4E0B\u8F7D\u6210\u529F
+\u4FDD\u5B58\u8DEF\u5F84\uFF1A${displayPath}` : "\u4E0B\u8F7D\u6210\u529F",
+          duration: 5e3
+        });
+      } catch (e) {
+        closeToast();
+        showFailToast("\u4E0B\u8F7D\u5931\u8D25");
+      }
+    } finally {
+      downloading.value = false;
+    }
+  });
+  const downloadFile = (options) => {
+    var _a;
+    return download(__spreadProps(__spreadValues({}, options), { index: (_a = options.index) != null ? _a : -1 }), true);
+  };
+  return { downloading, download, downloadFile };
+}
+export {
+  useMediaDownload
+};

package/es/drawer-select/DrawerSelect.mjs

@@ -1,4 +1,4 @@
-import { computed, defineComponent, nextTick, onBeforeUnmount, onMounted, ref, watch, createVNode as _createVNode, createTextVNode as _createTextVNode, Fragment as _Fragment, vShow as _vShow, withDirectives as _withDirectives } from "vue";
+import { computed, defineComponent, nextTick, onMounted, ref, watch, createVNode as _createVNode, createTextVNode as _createTextVNode, Fragment as _Fragment, vShow as _vShow, withDirectives as _withDirectives } from "vue";
 import { useEventListener, useRect } from "@zartui/use";
 import { createNamespace, makeArrayProp, makeStringProp } from "../utils/index.mjs";
 import ZtSearch from "../search/index.mjs";
@@ -49,7 +49,6 @@ var stdin_default = defineComponent({
     const commonTypesListRef = ref();
     const showLeftCommonTypesMask = ref(false);
     const showRightCommonTypesMask = ref(false);
-    let commonTypesResizeObserver;
     const defaultTreeNode = ref(props.treeData);
     const fields = computed(() => assignDefaultFields(props.treeFieldName));
     const visibleCommonTypeList = computed(() => {
@@ -64,35 +63,25 @@ var stdin_default = defineComponent({
       children,
       text: key
     } = fields.value;
+    const syncSelectCommonId = (node) => {
+      const selectedId = node == null ? void 0 : node[value];
+      selectCommonId.value = typeof selectedId === "string" || typeof selectedId === "number" ? selectedId : -1;
+    };
+    syncSelectCommonId(props.defaultSelectNode);
+    watch(() => props.defaultSelectNode, (node) => {
+      selectNode.value = node;
+      syncSelectCommonId(node);
+    });
     const updateCommonTypesMask = () => {
       const list = commonTypesListRef.value;
-      if (!list) {
-        showLeftCommonTypesMask.value = false;
-        showRightCommonTypesMask.value = false;
+      if (!list)
         return;
-      }
-      const remainingScrollWidth = list.scrollWidth - list.clientWidth - list.scrollLeft;
       showLeftCommonTypesMask.value = list.scrollLeft > 0;
-      showRightCommonTypesMask.value = remainingScrollWidth > 1;
+      showRightCommonTypesMask.value = list.scrollLeft + list.clientWidth < list.scrollWidth;
     };
     const onCommonTypesScroll = () => {
       updateCommonTypesMask();
     };
-    const observeCommonTypesList = () => {
-      commonTypesResizeObserver == null ? void 0 : commonTypesResizeObserver.disconnect();
-      const list = commonTypesListRef.value;
-      if (!list || typeof ResizeObserver === "undefined") {
-        return;
-      }
-      commonTypesResizeObserver = new ResizeObserver(updateCommonTypesMask);
-      commonTypesResizeObserver.observe(list);
-    };
-    const updateCommonTypesLayout = () => {
-      nextTick(() => {
-        observeCommonTypesList();
-        updateCommonTypesMask();
-      });
-    };
     const allData = {
       [value]: -1,
       [key]: "\u5168\u90E8",
@@ -169,13 +158,7 @@ var stdin_default = defineComponent({
       };
       flatData(props.treeData);
       updateOffset();
-      updateCommonTypesLayout();
-    });
-    watch(visibleCommonTypeList, updateCommonTypesLayout, {
-      flush: "post"
-    });
-    onBeforeUnmount(() => {
-      commonTypesResizeObserver == null ? void 0 : commonTypesResizeObserver.disconnect();
+      nextTick(updateCommonTypesMask);
     });
     const isEmpty = (item) => !item[children] || item[children].length === 0;
     const syncExpandNodeByParent = (item) => {

package/es/drawer-select/index.css

@@ -1 +1 @@
-:root{--zt-drawer-select-background: #ebf2f5}.zt-drawer-select{height:100%;width:100%;display:flex;flex-direction:column;background:var(--zt-background)}.zt-drawer-select__search{padding:var(--zt-padding-xs) 0}.zt-drawer-select__search--item{padding:var(--zt-padding-sm) 0 var(--zt-padding-sm) var(--zt-padding-md)}.zt-drawer-select__search--item:after{left:calc(-50% + 22px)}.zt-drawer-select__search--header{font-size:var(--zt-font-size-lg);font-weight:700;color:var(--zt-text-color);margin-bottom:4px}.zt-drawer-select__search--name{font-size:var(--zt-font-size-md);color:var(--zt-text-color-2)}.zt-drawer-select__wrap{position:fixed;right:0;left:0;bottom:0;z-index:999;overflow:hidden}.zt-drawer-select__popup{position:absolute;max-height:350px;border-radius:0 0 16px 16px}.zt-drawer-select__empty{font-size:var(--zt-font-size-md);color:var(--zt-gray-a4);text-align:center;padding:var(--zt-padding-lg) 0}.zt-drawer-select__history--title{height:44px;line-height:44px;font-weight:700;padding-left:var(--zt-padding-sm);color:var(--zt-text-color)}.zt-drawer-select__history--content{padding:var(--zt-padding-sm) var(--zt-padding-md) var(--zt-padding-xs)}.zt-drawer-select__history--content .zt-tag{line-height:28px;border-radius:14px;font-size:var(--zt-font-size-md);margin-right:4px;margin-bottom:8px}.zt-drawer-select__history--clear{display:flex;align-items:center;justify-content:center;height:44px;color:var(--zt-gray-a6);text-align:center;font-size:var(--zt-font-size-md)}.zt-drawer-select__name{position:relative;height:44px;line-height:44px;font-size:var(--zt-font-size-lg);color:var(--zt-text-color);font-weight:700;padding-left:var(--zt-padding-md)}.zt-drawer-select__name:before{content:"";position:absolute;width:4px;height:16px;top:14px;left:0;background:var(--zt-primary-color)}.zt-drawer-select__common-types{width:100%;background:var(--zt-white)}.zt-drawer-select__common-types--head{display:flex;align-items:center;min-height:44px;padding-left:var(--zt-padding-md);font-size:var(--zt-font-size-md);color:var(--zt-text-color)}.zt-drawer-select__common-types--label{flex-shrink:0;font-weight:700;padding-right:4px}.zt-drawer-select__common-types--mask{position:relative;flex:1;min-width:0;background:var(--zt-white)}.zt-drawer-select__common-types--mask:before,.zt-drawer-select__common-types--mask:after{content:"";position:absolute;top:0;bottom:0;width:32px;pointer-events:none;z-index:3;opacity:0;transition:opacity .2s}.zt-drawer-select__common-types--mask:before{left:-1px;background-image:linear-gradient(270deg,rgba(255,255,255,0) 0%,var(--zt-white) 100%)}.zt-drawer-select__common-types--mask:after{right:-1px;background-image:linear-gradient(90deg,rgba(255,255,255,0) 2.78%,var(--zt-white) 100%)}.zt-drawer-select__common-types--mask--left-mask:before,.zt-drawer-select__common-types--mask--right-mask:after{opacity:1}.zt-drawer-select__common-types--viewport{min-width:0;overflow:hidden}.zt-drawer-select__common-types--list{display:flex;align-items:center;gap:4px;padding:8px 16px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;scrollbar-width:none}.zt-drawer-select__common-types--list::-webkit-scrollbar{display:none}.zt-drawer-select__common-types--icon{display:flex;align-items:center;justify-content:center;width:56px;height:44px;flex-shrink:0}.zt-drawer-select__common-types--empty{flex:1;min-width:0;padding-left:8px;color:var(--zt-text-color-2);opacity:.2}.zt-drawer-select__common-types--btn{flex-shrink:0;min-width:-moz-fit-content;min-width:fit-content;border-radius:15px;opacity:1;padding-top:15px;padding-bottom:15px}.zt-drawer-select__common-types--panel{padding:0 var(--zt-padding-md) 8px;background:var(--zt-white)}.zt-drawer-select__common-types--panel-list{display:flex;flex-wrap:wrap;gap:8px 4px;padding-bottom:8px}.zt-drawer-select__common-types--clear{display:flex;align-items:center;justify-content:center;height:44px;color:var(--zt-text-color-2);opacity:.6;font-size:var(--zt-font-size-md)}.zt-drawer-select__common-types--clear-text{margin-left:4px}.zt-drawer-select__hot-types{width:100%;padding:0 16px 4px;margin-top:8px;box-sizing:border-box;background:var(--zt-white)}.zt-drawer-select__hot-types--label{height:44px;line-height:44px;font-size:var(--zt-font-size-md);font-weight:700;color:var(--zt-text-color)}.zt-drawer-select__hot-types--list{display:flex;flex-wrap:wrap;gap:8px 4px;width:100%;max-height:108px;overflow-x:hidden;overflow-y:auto;padding-bottom:8px}.zt-drawer-select__tree{display:flex;flex:1;min-height:0}.zt-drawer-select__tree-left{width:120px}.zt-drawer-select__tree-right{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--zt-white)}.zt-drawer-select__label{display:flex;align-items:center;line-height:28px;color:var(--zt-text-color);padding:var(--zt-padding-xs) 0 var(--zt-padding-xs) var(--zt-padding-base);font-size:var(--zt-font-size-md)}.zt-drawer-select__label--second{background:var(--zt-drawer-select-background);padding-left:var(--zt-padding-sm)}.zt-drawer-select__label--placeholder{display:flex;align-items:center;width:24px}.zt-drawer-select__label--text{display:flex;align-items:center;min-height:28px}.zt-drawer-select__label--icon--active{transform:rotate(90deg);color:var(--zt-primary-color)}.zt-drawer-select__label--active{color:var(--zt-primary-color);background:var(--zt-white)}.zt-drawer-select__title{display:flex;align-items:center;line-height:28px;font-size:var(--zt-font-size-md);color:var(--zt-text-color);font-weight:700;padding:var(--zt-padding-xs) var(--zt-padding-md)}.zt-drawer-select__content{flex:1;min-height:0;overflow-y:scroll}.zt-drawer-select__item--placeholder{width:30px}.zt-drawer-select__item--header{display:flex;min-height:44px;font-size:var(--zt-font-size-md);color:var(--zt-text-color);padding-left:4px}.zt-drawer-select__item--icon{display:flex;align-items:center;width:24px;margin-right:6px;height:100%}.zt-drawer-select__item--icon--active{transform:rotate(90deg);color:var(--zt-primary-color)}.zt-drawer-select__item--label{flex:1;display:flex;align-items:center;line-height:28px;padding:var(--zt-padding-xs) var(--zt-padding-md) var(--zt-padding-xs) 0}.zt-drawer-select__item--label--active{color:var(--zt-primary-color)}.zt-drawer-select__item--child{padding-left:var(--zt-padding-md)}.zt-drawer-select .zt-dialog__confirm{background:var(--zt-dialog-cancel-button-background-color);border:var(--zt-button-border-width) solid #ff5023;color:#ff5023}
+:root{--zt-drawer-select-background: #ebf2f5}.zt-drawer-select{height:100%;width:100%;display:flex;flex-direction:column;background:var(--zt-background)}.zt-drawer-select__search{padding:var(--zt-padding-xs) 0}.zt-drawer-select__search--item{padding:var(--zt-padding-sm) 0 var(--zt-padding-sm) var(--zt-padding-md)}.zt-drawer-select__search--item:after{left:calc(-50% + 22px)}.zt-drawer-select__search--header{font-size:var(--zt-font-size-lg);font-weight:700;color:var(--zt-text-color);margin-bottom:4px}.zt-drawer-select__search--name{font-size:var(--zt-font-size-md);color:var(--zt-text-color-2)}.zt-drawer-select__wrap{position:fixed;right:0;left:0;bottom:0;z-index:999;overflow:hidden}.zt-drawer-select__popup{position:absolute;max-height:350px;border-radius:0 0 16px 16px}.zt-drawer-select__empty{font-size:var(--zt-font-size-md);color:var(--zt-gray-a4);text-align:center;padding:var(--zt-padding-lg) 0}.zt-drawer-select__history--title{height:44px;line-height:44px;font-weight:700;padding-left:var(--zt-padding-sm);color:var(--zt-text-color)}.zt-drawer-select__history--content{padding:var(--zt-padding-sm) var(--zt-padding-md) var(--zt-padding-xs)}.zt-drawer-select__history--content .zt-tag{line-height:28px;border-radius:14px;font-size:var(--zt-font-size-md);margin-right:4px;margin-bottom:8px}.zt-drawer-select__history--clear{display:flex;align-items:center;justify-content:center;height:44px;color:var(--zt-gray-a6);text-align:center;font-size:var(--zt-font-size-md)}.zt-drawer-select__name{position:relative;height:44px;line-height:44px;font-size:var(--zt-font-size-lg);color:var(--zt-text-color);font-weight:700;padding-left:var(--zt-padding-md)}.zt-drawer-select__name:before{content:"";position:absolute;width:4px;height:16px;top:14px;left:0;background:var(--zt-primary-color)}.zt-drawer-select__common-types{width:100%;background:var(--zt-white)}.zt-drawer-select__common-types--head{display:flex;align-items:center;min-height:44px;padding-left:var(--zt-padding-md);font-size:var(--zt-font-size-md);color:var(--zt-text-color)}.zt-drawer-select__common-types--label{flex-shrink:0;font-weight:700;padding-right:4px}.zt-drawer-select__common-types--mask{position:relative;flex:1;min-width:0;background:var(--zt-white)}.zt-drawer-select__common-types--mask:before,.zt-drawer-select__common-types--mask:after{content:"";position:absolute;top:0;bottom:0;width:32px;pointer-events:none;z-index:3;transition:opacity .2s}.zt-drawer-select__common-types--mask:before{left:-1px;opacity:0;background-image:linear-gradient(270deg,rgba(255,255,255,0) 0%,var(--zt-white) 100%)}.zt-drawer-select__common-types--mask:after{right:-1px;opacity:0;background-image:linear-gradient(90deg,rgba(255,255,255,0) 2.78%,var(--zt-white) 100%)}.zt-drawer-select__common-types--mask--left-mask:before,.zt-drawer-select__common-types--mask--right-mask:after{opacity:1}.zt-drawer-select__common-types--viewport{min-width:0;overflow:hidden}.zt-drawer-select__common-types--list{display:flex;align-items:center;gap:4px;padding:8px 16px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;scrollbar-width:none}.zt-drawer-select__common-types--list::-webkit-scrollbar{display:none}.zt-drawer-select__common-types--icon{display:flex;align-items:center;justify-content:center;width:56px;height:44px;flex-shrink:0}.zt-drawer-select__common-types--empty{flex:1;min-width:0;padding-left:8px;color:var(--zt-text-color-2);opacity:.2}.zt-drawer-select__common-types--btn{flex-shrink:0;min-width:-moz-fit-content;min-width:fit-content;border-radius:15px;opacity:1;padding-top:15px;padding-bottom:15px}.zt-drawer-select__common-types--panel{padding:0 var(--zt-padding-md) 8px;background:var(--zt-white)}.zt-drawer-select__common-types--panel-list{display:flex;flex-wrap:wrap;gap:8px 4px;padding-bottom:8px}.zt-drawer-select__common-types--clear{display:flex;align-items:center;justify-content:center;height:44px;color:var(--zt-text-color-2);opacity:.6;font-size:var(--zt-font-size-md)}.zt-drawer-select__common-types--clear-text{margin-left:4px}.zt-drawer-select__hot-types{width:100%;padding:0 16px 4px;margin-top:8px;box-sizing:border-box;background:var(--zt-white)}.zt-drawer-select__hot-types--label{height:44px;line-height:44px;font-size:var(--zt-font-size-md);font-weight:700;color:var(--zt-text-color)}.zt-drawer-select__hot-types--list{display:flex;flex-wrap:wrap;gap:8px 4px;width:100%;max-height:108px;overflow-x:hidden;overflow-y:auto;padding-bottom:8px}.zt-drawer-select__tree{display:flex;flex:1;min-height:0}.zt-drawer-select__tree-left{width:120px}.zt-drawer-select__tree-right{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--zt-white)}.zt-drawer-select__label{display:flex;align-items:center;line-height:28px;color:var(--zt-text-color);padding:var(--zt-padding-xs) 0 var(--zt-padding-xs) var(--zt-padding-base);font-size:var(--zt-font-size-md)}.zt-drawer-select__label--second{background:var(--zt-drawer-select-background);padding-left:var(--zt-padding-sm)}.zt-drawer-select__label--placeholder{display:flex;align-items:center;width:24px}.zt-drawer-select__label--text{display:flex;align-items:center;min-height:28px}.zt-drawer-select__label--icon--active{transform:rotate(90deg);color:var(--zt-primary-color)}.zt-drawer-select__label--active{color:var(--zt-primary-color);background:var(--zt-white)}.zt-drawer-select__title{display:flex;align-items:center;line-height:28px;font-size:var(--zt-font-size-md);color:var(--zt-text-color);font-weight:700;padding:var(--zt-padding-xs) var(--zt-padding-md)}.zt-drawer-select__content{flex:1;min-height:0;overflow-y:scroll}.zt-drawer-select__item--placeholder{width:30px}.zt-drawer-select__item--header{display:flex;min-height:44px;font-size:var(--zt-font-size-md);color:var(--zt-text-color);padding-left:4px}.zt-drawer-select__item--icon{display:flex;align-items:center;width:24px;margin-right:6px;height:100%}.zt-drawer-select__item--icon--active{transform:rotate(90deg);color:var(--zt-primary-color)}.zt-drawer-select__item--label{flex:1;display:flex;align-items:center;line-height:28px;padding:var(--zt-padding-xs) var(--zt-padding-md) var(--zt-padding-xs) 0}.zt-drawer-select__item--label--active{color:var(--zt-primary-color)}.zt-drawer-select__item--child{padding-left:var(--zt-padding-md)}.zt-drawer-select .zt-dialog__confirm{background:var(--zt-dialog-cancel-button-background-color);border:var(--zt-button-border-width) solid #ff5023;color:#ff5023}

package/es/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/es/image-preview/ImagePreview.mjs

@@ -1,23 +1,3 @@
-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());
-  });
-};
 import { ref, watch, nextTick, reactive, onMounted, defineComponent, createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
 import { pick, truthProp, unknownProp, windowWidth, windowHeight, makeArrayProp, makeStringProp, makeNumericProp, callInterceptor, createNamespace, HAPTICS_FEEDBACK } from "../utils/index.mjs";
 import { useRect } from "@zartui/use";
@@ -26,8 +6,7 @@ import { Icon } from "../icon/index.mjs";
 import { Swipe } from "../swipe/index.mjs";
 import { Popup } from "../popup/index.mjs";
 import ImagePreviewItem from "./ImagePreviewItem.mjs";
-import { Download } from "./svg/Download.mjs";
-import { closeToast, showFailToast, showLoadingToast, showSuccessToast } from "../toast/index.mjs";
+import { useMediaDownload } from "../composables/use-media-download.mjs";
 const [name, bem] = createNamespace("image-preview");
 const popupProps = ["show", "transition", "overlayStyle", "closeOnPopstate", "teleport"];
 const imagePreviewProps = {
@@ -64,8 +43,13 @@ var stdin_default = defineComponent({
     slots
   }) {
     const swipeRef = ref();
+    const {
+      downloading,
+      download,
+      downloadFile
+    } = useMediaDownload(props);
     const state = reactive({
-      active: 0,
+      active: +props.startPosition,
       rootWidth: 0,
       rootHeight: 0,
       disableZoom: false
@@ -103,71 +87,38 @@ var stdin_default = 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) {
-            showLoadingToast({
-              message: "\u4E0B\u8F7D\u4E2D...",
-              forbidClick: true,
-              duration: 0
-            });
-            fileJsi.download({
-              url: downloadParams.url
-            }).then(({
-              tempFilePath
-            }) => {
-              closeToast();
-              showSuccessToast("\u4E0B\u8F7D\u6210\u529F");
-            }).catch(() => {
-              closeToast();
-              showFailToast("\u4E0B\u8F7D\u5931\u8D25");
-            });
-            return;
-          } else {
-            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 = () => _createVNode("button", {
+      "type": "button",
+      "class": bem("download-icon"),
+      "aria-label": "\u4E0B\u8F7D\u539F\u56FE",
+      "disabled": downloading.value,
+      "onClick": onDownload
+    }, [_createVNode(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 _createVNode("div", {
-            "class": bem("index")
-          }, [slots.index({
-            index: state.active
-          })]);
-        }
         return _createVNode("div", {
           "class": bem("index")
-        }, [props.showIndex && renderIndexText(), props.showIndex && renderImageTitle(), showDownload && renderDownloadIcon()]);
+        }, [props.showIndex && _createVNode("div", {
+          "class": bem("index-content")
+        }, [slots.index ? slots.index({
+          index: state.active
+        }) : [renderIndexText(), renderImageTitle()]]), showDownload && renderDownloadIcon()]);
       }
     };
-    const renderDownloadIcon = () => {
-      return _createVNode("div", {
-        "class": bem("download-icon"),
-        "onClick": onDownload
-      }, [Download(bem)]);
-    };
     const renderCover = () => {
       if (slots.cover) {
         return _createVNode("div", {
@@ -229,7 +180,8 @@ var stdin_default = defineComponent({
       return (_a = swipeRef.value) == null ? void 0 : _a.swipeTo(index, options);
     };
     useExpose({
-      swipeTo
+      swipeTo,
+      downloadFile
     });
     onMounted(() => {
       resize();
@@ -259,6 +211,7 @@ var stdin_default = defineComponent({
     return () => _createVNode(Popup, _mergeProps({
       "class": [bem(), props.className],
       "overlayClass": [bem("overlay"), props.overlayClass],
+      "onClick": (event) => event.stopPropagation(),
       "onClosed": onClosed,
       "onUpdate:show": updateShow
     }, pick(props, popupProps)), {

package/es/image-preview/function-call.mjs

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

package/es/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/es/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/es/image-preview/style/index.mjs

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

package/es/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>;

package/es/index.d.ts

@@ -86,4 +86,4 @@ declare namespace _default {
 }
 export default _default;
 export function install(app: any): void;
-export const version: "3.1.92";
+export const version: "3.1.94";

package/es/index.mjs

@@ -79,7 +79,7 @@ import { Timeline } from "./timeline/index.mjs";
 import { Toast } from "./toast/index.mjs";
 import { Uploader } from "./uploader/index.mjs";
 import { Video } from "./video/index.mjs";
-const version = "3.1.92";
+const version = "3.1.94";
 function install(app) {
   const components = [
     ActionSheet,

package/es/media-picker/MediaPicker.d.ts

@@ -1,7 +1,7 @@
 import { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue';
 import type { Media, MediaAddType, MediaAfterRead, MediaBeforeDelete, MediaBeforeRead, MediaPick, MediaPreview, MediaSizeType, MediaType } from './type';
 import { MediaPlayerProps } from '../media-player';
-import { DownloadActionParams } from '../image-preview/ImagePreview';
+import type { DownloadActionParams } from '../composables/use-media-download';
 declare const mediaPickerProps: {
     sortable: {
         type: BooleanConstructor;