zartui 3.1.72 → 3.1.73

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (37) hide show
  1. package/es/image-preview/ImagePreview.d.ts +14 -1
  2. package/es/image-preview/ImagePreview.mjs +94 -5
  3. package/es/image-preview/index.css +1 -1
  4. package/es/image-preview/index.d.ts +7 -1
  5. package/es/image-preview/style/index.mjs +1 -0
  6. package/es/image-preview/svg/Download.d.ts +2 -0
  7. package/es/image-preview/svg/Download.mjs +13 -0
  8. package/es/image-preview/types.d.ts +1 -0
  9. package/es/index.d.ts +1 -1
  10. package/es/index.mjs +1 -1
  11. package/es/media-picker/MediaPicker.d.ts +4 -0
  12. package/es/media-picker/MediaPicker.mjs +2 -0
  13. package/es/media-picker/index.d.ts +3 -0
  14. package/es/uploader/style/index.mjs +1 -0
  15. package/lib/image-preview/ImagePreview.d.ts +14 -1
  16. package/lib/image-preview/ImagePreview.js +94 -5
  17. package/lib/image-preview/index.css +1 -1
  18. package/lib/image-preview/index.d.ts +7 -1
  19. package/lib/image-preview/style/index.js +1 -0
  20. package/lib/image-preview/svg/Download.d.ts +2 -0
  21. package/lib/image-preview/svg/Download.js +32 -0
  22. package/lib/image-preview/types.d.ts +1 -0
  23. package/lib/{index-8bc782d2.mjs → index-096e2873.mjs} +4220 -2916
  24. package/lib/{index-d66aaef4.js → index-bb5638a0.js} +4219 -2916
  25. package/lib/index.css +1 -1
  26. package/lib/index.d.ts +1 -1
  27. package/lib/index.js +1 -1
  28. package/lib/media-picker/MediaPicker.d.ts +4 -0
  29. package/lib/media-picker/MediaPicker.js +2 -0
  30. package/lib/media-picker/index.d.ts +3 -0
  31. package/lib/uploader/style/index.js +1 -0
  32. package/lib/web-types.json +1 -1
  33. package/lib/zartui.cjs.js +105 -7
  34. package/lib/zartui.es.js +105 -7
  35. package/lib/zartui.js +4297 -2893
  36. package/lib/zartui.min.js +2 -2
  37. package/package.json +7 -7
package/es/image-preview/ImagePreview.d.ts CHANGED
@@ -2,6 +2,11 @@ import type { PropType, CSSProperties, ExtractPropTypes } from 'vue';
2
2
  import { Interceptor } from '../utils';
3
3
  import { PopupCloseIconPosition } from '../popup';
4
4
  import { ImageItem } from './types';
5
+ export type DownloadActionParams = {
6
+ index: number;
7
+ url?: string;
8
+ title?: string;
9
+ };
5
10
  export declare const imagePreviewProps: {
6
11
  show: BooleanConstructor;
7
12
  loop: {
@@ -29,6 +34,8 @@ export declare const imagePreviewProps: {
29
34
  type: BooleanConstructor;
30
35
  default: true;
31
36
  };
37
+ showDownload: BooleanConstructor;
38
+ downloadAction: PropType<(params: DownloadActionParams) => boolean | void>;
32
39
  className: PropType<unknown>;
33
40
  closeIcon: {
34
41
  type: PropType<string>;
@@ -89,6 +96,8 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
89
96
  type: BooleanConstructor;
90
97
  default: true;
91
98
  };
99
+ showDownload: BooleanConstructor;
100
+ downloadAction: PropType<(params: DownloadActionParams) => boolean | void>;
92
101
  className: PropType<unknown>;
93
102
  closeIcon: {
94
103
  type: PropType<string>;
@@ -120,7 +129,7 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
120
129
  default: PopupCloseIconPosition;
121
130
  };
122
131
  teleport: PropType<string | import("vue").RendererElement | null | undefined>;
123
- }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "close" | "closed" | "update:show" | "scale" | "longPress")[], "change" | "close" | "closed" | "update:show" | "scale" | "longPress", import("vue").PublicProps, Readonly<ExtractPropTypes<{
132
+ }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("download" | "change" | "close" | "closed" | "update:show" | "scale" | "longPress")[], "download" | "change" | "close" | "closed" | "update:show" | "scale" | "longPress", import("vue").PublicProps, Readonly<ExtractPropTypes<{
124
133
  show: BooleanConstructor;
125
134
  loop: {
126
135
  type: BooleanConstructor;
@@ -147,6 +156,8 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
147
156
  type: BooleanConstructor;
148
157
  default: true;
149
158
  };
159
+ showDownload: BooleanConstructor;
160
+ downloadAction: PropType<(params: DownloadActionParams) => boolean | void>;
150
161
  className: PropType<unknown>;
151
162
  closeIcon: {
152
163
  type: PropType<string>;
@@ -185,6 +196,7 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
185
196
  "onUpdate:show"?: ((...args: any[]) => any) | undefined;
186
197
  onScale?: ((...args: any[]) => any) | undefined;
187
198
  onLongPress?: ((...args: any[]) => any) | undefined;
199
+ onDownload?: ((...args: any[]) => any) | undefined;
188
200
  }>, {
189
201
  loop: boolean;
190
202
  overlay: boolean;
@@ -200,6 +212,7 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
200
212
  maxZoom: string | number;
201
213
  images: ImageItem[];
202
214
  showIndex: boolean;
215
+ showDownload: boolean;
203
216
  startPosition: string | number;
204
217
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
205
218
  export default _default;
package/es/image-preview/ImagePreview.mjs CHANGED
@@ -1,3 +1,23 @@
1
+ var __async = (__this, __arguments, generator) => {
2
+ return new Promise((resolve, reject) => {
3
+ var fulfilled = (value) => {
4
+ try {
5
+ step(generator.next(value));
6
+ } catch (e) {
7
+ reject(e);
8
+ }
9
+ };
10
+ var rejected = (value) => {
11
+ try {
12
+ step(generator.throw(value));
13
+ } catch (e) {
14
+ reject(e);
15
+ }
16
+ };
17
+ var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
18
+ step((generator = generator.apply(__this, __arguments)).next());
19
+ });
20
+ };
1
21
  import { ref, watch, nextTick, reactive, onMounted, defineComponent, createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
2
22
  import { pick, truthProp, unknownProp, windowWidth, windowHeight, makeArrayProp, makeStringProp, makeNumericProp, callInterceptor, createNamespace, HAPTICS_FEEDBACK } from "../utils/index.mjs";
3
23
  import { useRect } from "@zartui/use";
@@ -6,6 +26,8 @@ import { Icon } from "../icon/index.mjs";
6
26
  import { Swipe } from "../swipe/index.mjs";
7
27
  import { Popup } from "../popup/index.mjs";
8
28
  import ImagePreviewItem from "./ImagePreviewItem.mjs";
29
+ import { Download } from "./svg/Download.mjs";
30
+ import { closeToast, showFailToast, showLoadingToast, showSuccessToast } from "../toast/index.mjs";
9
31
  const [name, bem] = createNamespace("image-preview");
10
32
  const popupProps = ["show", "transition", "overlayStyle", "closeOnPopstate", "teleport"];
11
33
  const imagePreviewProps = {
@@ -17,6 +39,8 @@ const imagePreviewProps = {
17
39
  overlay: truthProp,
18
40
  closeable: Boolean,
19
41
  showIndex: truthProp,
42
+ showDownload: Boolean,
43
+ downloadAction: Function,
20
44
  className: unknownProp,
21
45
  closeIcon: makeStringProp("clear"),
22
46
  transition: String,
@@ -34,12 +58,13 @@ const imagePreviewProps = {
34
58
  var stdin_default = defineComponent({
35
59
  name,
36
60
  props: imagePreviewProps,
37
- emits: ["scale", "close", "closed", "change", "longPress", "update:show"],
61
+ emits: ["scale", "close", "closed", "change", "longPress", "update:show", "download"],
38
62
  setup(props, {
39
63
  emit,
40
64
  slots
41
65
  }) {
42
66
  const swipeRef = ref();
67
+ const hasDownloadSupport = ref(false);
43
68
  const state = reactive({
44
69
  active: 0,
45
70
  rootWidth: 0,
@@ -79,9 +104,54 @@ var stdin_default = defineComponent({
79
104
  }, [props.images[state.active].title]);
80
105
  }
81
106
  };
107
+ const onDownload = () => __async(this, null, function* () {
108
+ var _a, _b, _c;
109
+ const downloadParams = {
110
+ index: state.active,
111
+ url: (_a = props.images[state.active]) == null ? void 0 : _a.url,
112
+ title: (_b = props.images[state.active]) == null ? void 0 : _b.title
113
+ };
114
+ if (props.downloadAction) {
115
+ const result = props.downloadAction(downloadParams);
116
+ if (result) {
117
+ return;
118
+ }
119
+ }
120
+ try {
121
+ let universalJsSdk = yield import("@egova/universal-js-sdk");
122
+ if (universalJsSdk && universalJsSdk.getJSI && downloadParams.url) {
123
+ let fileJsi = (_c = universalJsSdk.getJSI()) == null ? void 0 : _c.file;
124
+ if (fileJsi && fileJsi.download) {
125
+ showLoadingToast({
126
+ message: "\u4E0B\u8F7D\u4E2D...",
127
+ forbidClick: true,
128
+ duration: 0
129
+ });
130
+ fileJsi.download({
131
+ url: downloadParams.url
132
+ }).then(({
133
+ tempFilePath
134
+ }) => {
135
+ closeToast();
136
+ showSuccessToast("\u4E0B\u8F7D\u6210\u529F");
137
+ }).catch(() => {
138
+ closeToast();
139
+ showFailToast("\u4E0B\u8F7D\u5931\u8D25");
140
+ });
141
+ return;
142
+ } else {
143
+ showFailToast("\u5F53\u524D\u73AF\u5883\u6682\u4E0D\u652F\u6301\u4E0B\u8F7D");
144
+ }
145
+ }
146
+ } catch (e) {
147
+ console.log(e.message);
148
+ }
149
+ });
82
150
  const renderIndex = () => {
83
- if (props.showIndex) {
84
- if (slots.index) {
151
+ const image = props.images[state.active];
152
+ const showDownload = props.showDownload && hasDownloadSupport.value && !image.url.startsWith("data:");
153
+ if (props.showIndex || showDownload) {
154
+ if (props.showIndex && slots.index) {
85
155
  return _createVNode("div", {
86
156
  "class": bem("index")
87
157
  }, [slots.index({
@@ -90,9 +160,15 @@ var stdin_default = defineComponent({
90
160
  }
91
161
  return _createVNode("div", {
92
162
  "class": bem("index")
93
- }, [renderIndexText(), renderImageTitle()]);
163
+ }, [props.showIndex && renderIndexText(), props.showIndex && renderImageTitle(), showDownload && renderDownloadIcon()]);
94
164
  }
95
165
  };
166
+ const renderDownloadIcon = () => {
167
+ return _createVNode("div", {
168
+ "class": bem("download-icon"),
169
+ "onClick": onDownload
170
+ }, [Download(bem)]);
171
+ };
96
172
  const renderCover = () => {
97
173
  if (slots.cover) {
98
174
  return _createVNode("div", {
@@ -156,7 +232,20 @@ var stdin_default = defineComponent({
156
232
  useExpose({
157
233
  swipeTo
158
234
  });
159
- onMounted(resize);
235
+ onMounted(() => __async(this, null, function* () {
236
+ var _a;
237
+ resize();
238
+ try {
239
+ const universalJsSdk = yield import("@egova/universal-js-sdk");
240
+ if (universalJsSdk && universalJsSdk.getJSI) {
241
+ const fileJsi = (_a = universalJsSdk.getJSI()) == null ? void 0 : _a.file;
242
+ hasDownloadSupport.value = !!(fileJsi && fileJsi.download);
243
+ }
244
+ } catch (e) {
245
+ console.warn("Failed to check download support:", e);
246
+ hasDownloadSupport.value = false;
247
+ }
248
+ }));
160
249
  watch([windowWidth, windowHeight], resize);
161
250
  watch(() => props.startPosition, (value) => setActive(+value));
162
251
  watch(() => props.show, (value) => {
package/es/image-preview/index.css CHANGED
@@ -1 +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;font-size:var(--zt-font-size-md);line-height:var(--zt-line-height-md)}.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)}
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)}
package/es/image-preview/index.d.ts CHANGED
@@ -26,6 +26,8 @@ export declare const ImagePreview: import("../utils").WithInstall<import("vue").
26
26
  type: BooleanConstructor;
27
27
  default: true;
28
28
  };
29
+ showDownload: BooleanConstructor;
30
+ downloadAction: import("vue").PropType<(params: import("./ImagePreview").DownloadActionParams) => boolean | void>;
29
31
  className: import("vue").PropType<unknown>;
30
32
  closeIcon: {
31
33
  type: import("vue").PropType<string>;
@@ -57,7 +59,7 @@ export declare const ImagePreview: import("../utils").WithInstall<import("vue").
57
59
  default: import("..").PopupCloseIconPosition;
58
60
  };
59
61
  teleport: import("vue").PropType<string | import("vue").RendererElement | null | undefined>;
60
- }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "close" | "closed" | "update:show" | "scale" | "longPress")[], "change" | "close" | "closed" | "update:show" | "scale" | "longPress", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
62
+ }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("download" | "change" | "close" | "closed" | "update:show" | "scale" | "longPress")[], "download" | "change" | "close" | "closed" | "update:show" | "scale" | "longPress", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
61
63
  show: BooleanConstructor;
62
64
  loop: {
63
65
  type: BooleanConstructor;
@@ -84,6 +86,8 @@ export declare const ImagePreview: import("../utils").WithInstall<import("vue").
84
86
  type: BooleanConstructor;
85
87
  default: true;
86
88
  };
89
+ showDownload: BooleanConstructor;
90
+ downloadAction: import("vue").PropType<(params: import("./ImagePreview").DownloadActionParams) => boolean | void>;
87
91
  className: import("vue").PropType<unknown>;
88
92
  closeIcon: {
89
93
  type: import("vue").PropType<string>;
@@ -122,6 +126,7 @@ export declare const ImagePreview: import("../utils").WithInstall<import("vue").
122
126
  "onUpdate:show"?: ((...args: any[]) => any) | undefined;
123
127
  onScale?: ((...args: any[]) => any) | undefined;
124
128
  onLongPress?: ((...args: any[]) => any) | undefined;
129
+ onDownload?: ((...args: any[]) => any) | undefined;
125
130
  }>, {
126
131
  loop: boolean;
127
132
  overlay: boolean;
@@ -137,6 +142,7 @@ export declare const ImagePreview: import("../utils").WithInstall<import("vue").
137
142
  maxZoom: string | number;
138
143
  images: import("./types").ImageItem[];
139
144
  showIndex: boolean;
145
+ showDownload: boolean;
140
146
  startPosition: string | number;
141
147
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;
142
148
  export default ImagePreview;
package/es/image-preview/style/index.mjs CHANGED
@@ -5,6 +5,7 @@ import "../../image/index.css";
5
5
  import "../../overlay/index.css";
6
6
  import "../../popup/index.css";
7
7
  import "../../loading/index.css";
8
+ import "../../toast/index.css";
8
9
  import "../../swipe/index.css";
9
10
  import "../../swipe-item/index.css";
10
11
  import "../index.css";
package/es/image-preview/svg/Download.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import { BEM } from "../../utils";
2
+ export declare const Download: (bem: BEM) => import("vue/jsx-runtime").JSX.Element;
package/es/image-preview/svg/Download.mjs ADDED
@@ -0,0 +1,13 @@
1
+ import { createVNode as _createVNode } from "vue";
2
+ const Download = (bem) => _createVNode("svg", {
3
+ "class": bem("svg-download-icon"),
4
+ "xmlns": "http://www.w3.org/2000/svg",
5
+ "viewBox": "0 0 20 20"
6
+ }, [_createVNode("path", {
7
+ "d": "M3.75,17.5 C3.28976271,17.5 2.91666667,17.126904 2.91666667,16.6666667 L2.91666667,12.5 C2.91666667,12.0397627 3.28976271,11.6666667 3.75,11.6666667 C4.21023729,11.6666667 4.58333333,12.0397627 4.58333333,12.5 L4.58266667,15.833 L15.4166667,15.833 L15.4166667,12.5 C15.4166667,12.0397627 15.7897627,11.6666667 16.25,11.6666667 C16.7102373,11.6666667 17.0833333,12.0397627 17.0833333,12.5 L17.0833333,16.6666667 C17.0833333,17.0915011 16.765429,17.442085 16.3545316,17.4935072 L16.25,17.5 L3.75,17.5 Z M10,2.5 C10.4602373,2.5 10.8333333,2.87309604 10.8333333,3.33333333 L10.834,10.904 L12.327411,9.41074435 L12.3804172,9.36206404 C12.7078286,9.08620893 13.1976137,9.1024357 13.5059223,9.41074435 C13.8313592,9.73618126 13.8313592,10.2638187 13.5059223,10.5892557 L10.5892557,13.5059223 L10.5659501,13.5283458 C10.5602582,13.5336148 10.5544926,13.5388053 10.548655,13.5439156 L10.5362495,13.5546026 L10.5121742,13.5740743 C10.4949132,13.5875412 10.4771081,13.6003432 10.4586783,13.6126074 C10.4455853,13.6212563 10.4323019,13.6294968 10.4192578,13.6370097 C10.4029078,13.6465464 10.3862038,13.6555423 10.3690405,13.664083 C10.3522054,13.6723976 10.3351478,13.6801087 10.3177097,13.6872958 C10.3045293,13.6927357 10.2911788,13.6978473 10.2777746,13.7025471 C10.2584813,13.7093513 10.2389875,13.7154237 10.2194971,13.7207897 C10.2011918,13.7257748 10.1826357,13.7301514 10.1634324,13.7339067 L10.1207556,13.7413147 C10.0813306,13.7470375 10.0410112,13.75 10,13.75 L10.0566667,13.747 L10.0399512,13.7490477 L9.96132783,13.7491078 C9.94161389,13.7481976 9.92192612,13.746591 9.89546844,13.7435072 C9.79274407,13.7306516 9.69583178,13.6990985 9.6082458,13.6523619 L9.59484365,13.6451239 C9.58442452,13.639322 9.57410342,13.6332795 9.56375825,13.6268308 C9.54437371,13.6148978 9.52551484,13.6021934 9.50686916,13.5885746 L9.48480346,13.5717051 L9.41074435,13.5059223 L6.49407768,10.5892557 L6.44539737,10.5362495 C6.16954226,10.2088381 6.18576903,9.719053 6.49407768,9.41074435 L6.54708384,9.36206404 C6.87449527,9.08620893 7.36428033,9.1024357 7.67258898,9.41074435 L9.167,10.905 L9.16666667,3.33333333 C9.16666667,2.87309604 9.53976271,2.5 10,2.5 Z",
8
+ "fill": "#FFF",
9
+ "fill-rule": "nonzero"
10
+ }, null)]);
11
+ export {
12
+ Download
13
+ };
package/es/image-preview/types.d.ts CHANGED
@@ -16,6 +16,7 @@ export type ImagePreviewOptions = {
16
16
  className?: unknown;
17
17
  showIndex?: boolean;
18
18
  closeable?: boolean;
19
+ showDownload?: boolean;
19
20
  closeIcon?: string;
20
21
  transition?: string;
21
22
  beforeClose?: Interceptor;
package/es/index.d.ts CHANGED
@@ -84,4 +84,4 @@ declare namespace _default {
84
84
  }
85
85
  export default _default;
86
86
  export function install(app: any): void;
87
- export const version: "3.1.72";
87
+ export const version: "3.1.73";
package/es/index.mjs CHANGED
@@ -77,7 +77,7 @@ import { Timeline } from "./timeline/index.mjs";
77
77
  import { Toast } from "./toast/index.mjs";
78
78
  import { Uploader } from "./uploader/index.mjs";
79
79
  import { Video } from "./video/index.mjs";
80
- const version = "3.1.72";
80
+ const version = "3.1.73";
81
81
  function install(app) {
82
82
  const components = [
83
83
  ActionSheet,
package/es/media-picker/MediaPicker.d.ts CHANGED
@@ -8,6 +8,7 @@ declare const mediaPickerProps: {
8
8
  };
9
9
  disabled: BooleanConstructor;
10
10
  showTitle: BooleanConstructor;
11
+ showDownload: BooleanConstructor;
11
12
  useFileNameAsLabel: BooleanConstructor;
12
13
  title: {
13
14
  type: PropType<string>;
@@ -95,6 +96,7 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
95
96
  };
96
97
  disabled: BooleanConstructor;
97
98
  showTitle: BooleanConstructor;
99
+ showDownload: BooleanConstructor;
98
100
  useFileNameAsLabel: BooleanConstructor;
99
101
  title: {
100
102
  type: PropType<string>;
@@ -177,6 +179,7 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
177
179
  };
178
180
  disabled: BooleanConstructor;
179
181
  showTitle: BooleanConstructor;
182
+ showDownload: BooleanConstructor;
180
183
  useFileNameAsLabel: BooleanConstructor;
181
184
  title: {
182
185
  type: PropType<string>;
@@ -260,6 +263,7 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
260
263
  title: string;
261
264
  disabled: boolean;
262
265
  showTitle: boolean;
266
+ showDownload: boolean;
263
267
  sortable: boolean;
264
268
  useFileNameAsLabel: boolean;
265
269
  mediaList: Media[];
package/es/media-picker/MediaPicker.mjs CHANGED
@@ -54,6 +54,7 @@ const mediaPickerProps = {
54
54
  },
55
55
  disabled: Boolean,
56
56
  showTitle: Boolean,
57
+ showDownload: Boolean,
57
58
  useFileNameAsLabel: Boolean,
58
59
  title: makeStringProp("\u6DFB\u52A0\u9644\u4EF6"),
59
60
  mediaList: makeArrayProp(),
@@ -744,6 +745,7 @@ var stdin_default = defineComponent({
744
745
  images: imageList.value.map((image) => ({
745
746
  url: image.url || image.showSrc || ""
746
747
  })),
748
+ showDownload: props.showDownload,
747
749
  startPosition: imageIndex,
748
750
  closeable: true
749
751
  });
package/es/media-picker/index.d.ts CHANGED
@@ -5,6 +5,7 @@ export declare const MediaPicker: import("../utils").WithInstall<import("vue").D
5
5
  };
6
6
  disabled: BooleanConstructor;
7
7
  showTitle: BooleanConstructor;
8
+ showDownload: BooleanConstructor;
8
9
  useFileNameAsLabel: BooleanConstructor;
9
10
  title: {
10
11
  type: import("vue").PropType<string>;
@@ -77,6 +78,7 @@ export declare const MediaPicker: import("../utils").WithInstall<import("vue").D
77
78
  };
78
79
  disabled: BooleanConstructor;
79
80
  showTitle: BooleanConstructor;
81
+ showDownload: BooleanConstructor;
80
82
  useFileNameAsLabel: BooleanConstructor;
81
83
  title: {
82
84
  type: import("vue").PropType<string>;
@@ -150,6 +152,7 @@ export declare const MediaPicker: import("../utils").WithInstall<import("vue").D
150
152
  title: string;
151
153
  disabled: boolean;
152
154
  showTitle: boolean;
155
+ showDownload: boolean;
153
156
  sortable: boolean;
154
157
  useFileNameAsLabel: boolean;
155
158
  mediaList: import("./type").Media[];
package/es/uploader/style/index.mjs CHANGED
@@ -5,6 +5,7 @@ import "../../image/index.css";
5
5
  import "../../overlay/index.css";
6
6
  import "../../popup/index.css";
7
7
  import "../../loading/index.css";
8
+ import "../../toast/index.css";
8
9
  import "../../swipe/index.css";
9
10
  import "../../swipe-item/index.css";
10
11
  import "../../image-preview/index.css";
package/lib/image-preview/ImagePreview.d.ts CHANGED
@@ -2,6 +2,11 @@ import type { PropType, CSSProperties, ExtractPropTypes } from 'vue';
2
2
  import { Interceptor } from '../utils';
3
3
  import { PopupCloseIconPosition } from '../popup';
4
4
  import { ImageItem } from './types';
5
+ export type DownloadActionParams = {
6
+ index: number;
7
+ url?: string;
8
+ title?: string;
9
+ };
5
10
  export declare const imagePreviewProps: {
6
11
  show: BooleanConstructor;
7
12
  loop: {
@@ -29,6 +34,8 @@ export declare const imagePreviewProps: {
29
34
  type: BooleanConstructor;
30
35
  default: true;
31
36
  };
37
+ showDownload: BooleanConstructor;
38
+ downloadAction: PropType<(params: DownloadActionParams) => boolean | void>;
32
39
  className: PropType<unknown>;
33
40
  closeIcon: {
34
41
  type: PropType<string>;
@@ -89,6 +96,8 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
89
96
  type: BooleanConstructor;
90
97
  default: true;
91
98
  };
99
+ showDownload: BooleanConstructor;
100
+ downloadAction: PropType<(params: DownloadActionParams) => boolean | void>;
92
101
  className: PropType<unknown>;
93
102
  closeIcon: {
94
103
  type: PropType<string>;
@@ -120,7 +129,7 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
120
129
  default: PopupCloseIconPosition;
121
130
  };
122
131
  teleport: PropType<string | import("vue").RendererElement | null | undefined>;
123
- }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "close" | "closed" | "update:show" | "scale" | "longPress")[], "change" | "close" | "closed" | "update:show" | "scale" | "longPress", import("vue").PublicProps, Readonly<ExtractPropTypes<{
132
+ }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("download" | "change" | "close" | "closed" | "update:show" | "scale" | "longPress")[], "download" | "change" | "close" | "closed" | "update:show" | "scale" | "longPress", import("vue").PublicProps, Readonly<ExtractPropTypes<{
124
133
  show: BooleanConstructor;
125
134
  loop: {
126
135
  type: BooleanConstructor;
@@ -147,6 +156,8 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
147
156
  type: BooleanConstructor;
148
157
  default: true;
149
158
  };
159
+ showDownload: BooleanConstructor;
160
+ downloadAction: PropType<(params: DownloadActionParams) => boolean | void>;
150
161
  className: PropType<unknown>;
151
162
  closeIcon: {
152
163
  type: PropType<string>;
@@ -185,6 +196,7 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
185
196
  "onUpdate:show"?: ((...args: any[]) => any) | undefined;
186
197
  onScale?: ((...args: any[]) => any) | undefined;
187
198
  onLongPress?: ((...args: any[]) => any) | undefined;
199
+ onDownload?: ((...args: any[]) => any) | undefined;
188
200
  }>, {
189
201
  loop: boolean;
190
202
  overlay: boolean;
@@ -200,6 +212,7 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
200
212
  maxZoom: string | number;
201
213
  images: ImageItem[];
202
214
  showIndex: boolean;
215
+ showDownload: boolean;
203
216
  startPosition: string | number;
204
217
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
205
218
  export default _default;
package/lib/image-preview/ImagePreview.js CHANGED
@@ -25,6 +25,26 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
25
25
  mod
26
26
  ));
27
27
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
28
+ var __async = (__this, __arguments, generator) => {
29
+ return new Promise((resolve, reject) => {
30
+ var fulfilled = (value) => {
31
+ try {
32
+ step(generator.next(value));
33
+ } catch (e) {
34
+ reject(e);
35
+ }
36
+ };
37
+ var rejected = (value) => {
38
+ try {
39
+ step(generator.throw(value));
40
+ } catch (e) {
41
+ reject(e);
42
+ }
43
+ };
44
+ var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
45
+ step((generator = generator.apply(__this, __arguments)).next());
46
+ });
47
+ };
28
48
  var stdin_exports = {};
29
49
  __export(stdin_exports, {
30
50
  default: () => stdin_default,
@@ -39,6 +59,8 @@ var import_icon = require("../icon");
39
59
  var import_swipe = require("../swipe");
40
60
  var import_popup = require("../popup");
41
61
  var import_ImagePreviewItem = __toESM(require("./ImagePreviewItem"));
62
+ var import_Download = require("./svg/Download");
63
+ var import_toast = require("../toast");
42
64
  const [name, bem] = (0, import_utils.createNamespace)("image-preview");
43
65
  const popupProps = ["show", "transition", "overlayStyle", "closeOnPopstate", "teleport"];
44
66
  const imagePreviewProps = {
@@ -50,6 +72,8 @@ const imagePreviewProps = {
50
72
  overlay: import_utils.truthProp,
51
73
  closeable: Boolean,
52
74
  showIndex: import_utils.truthProp,
75
+ showDownload: Boolean,
76
+ downloadAction: Function,
53
77
  className: import_utils.unknownProp,
54
78
  closeIcon: (0, import_utils.makeStringProp)("clear"),
55
79
  transition: String,
@@ -67,12 +91,13 @@ const imagePreviewProps = {
67
91
  var stdin_default = (0, import_vue.defineComponent)({
68
92
  name,
69
93
  props: imagePreviewProps,
70
- emits: ["scale", "close", "closed", "change", "longPress", "update:show"],
94
+ emits: ["scale", "close", "closed", "change", "longPress", "update:show", "download"],
71
95
  setup(props, {
72
96
  emit,
73
97
  slots
74
98
  }) {
75
99
  const swipeRef = (0, import_vue.ref)();
100
+ const hasDownloadSupport = (0, import_vue.ref)(false);
76
101
  const state = (0, import_vue.reactive)({
77
102
  active: 0,
78
103
  rootWidth: 0,
@@ -112,9 +137,54 @@ var stdin_default = (0, import_vue.defineComponent)({
112
137
  }, [props.images[state.active].title]);
113
138
  }
114
139
  };
140
+ const onDownload = () => __async(this, null, function* () {
141
+ var _a, _b, _c;
142
+ const downloadParams = {
143
+ index: state.active,
144
+ url: (_a = props.images[state.active]) == null ? void 0 : _a.url,
145
+ title: (_b = props.images[state.active]) == null ? void 0 : _b.title
146
+ };
147
+ if (props.downloadAction) {
148
+ const result = props.downloadAction(downloadParams);
149
+ if (result) {
150
+ return;
151
+ }
152
+ }
153
+ try {
154
+ let universalJsSdk = yield import("@egova/universal-js-sdk");
155
+ if (universalJsSdk && universalJsSdk.getJSI && downloadParams.url) {
156
+ let fileJsi = (_c = universalJsSdk.getJSI()) == null ? void 0 : _c.file;
157
+ if (fileJsi && fileJsi.download) {
158
+ (0, import_toast.showLoadingToast)({
159
+ message: "\u4E0B\u8F7D\u4E2D...",
160
+ forbidClick: true,
161
+ duration: 0
162
+ });
163
+ fileJsi.download({
164
+ url: downloadParams.url
165
+ }).then(({
166
+ tempFilePath
167
+ }) => {
168
+ (0, import_toast.closeToast)();
169
+ (0, import_toast.showSuccessToast)("\u4E0B\u8F7D\u6210\u529F");
170
+ }).catch(() => {
171
+ (0, import_toast.closeToast)();
172
+ (0, import_toast.showFailToast)("\u4E0B\u8F7D\u5931\u8D25");
173
+ });
174
+ return;
175
+ } else {
176
+ (0, import_toast.showFailToast)("\u5F53\u524D\u73AF\u5883\u6682\u4E0D\u652F\u6301\u4E0B\u8F7D");
177
+ }
178
+ }
179
+ } catch (e) {
180
+ console.log(e.message);
181
+ }
182
+ });
115
183
  const renderIndex = () => {
116
- if (props.showIndex) {
117
- if (slots.index) {
184
+ const image = props.images[state.active];
185
+ const showDownload = props.showDownload && hasDownloadSupport.value && !image.url.startsWith("data:");
186
+ if (props.showIndex || showDownload) {
187
+ if (props.showIndex && slots.index) {
118
188
  return (0, import_vue.createVNode)("div", {
119
189
  "class": bem("index")
120
190
  }, [slots.index({
@@ -123,9 +193,15 @@ var stdin_default = (0, import_vue.defineComponent)({
123
193
  }
124
194
  return (0, import_vue.createVNode)("div", {
125
195
  "class": bem("index")
126
- }, [renderIndexText(), renderImageTitle()]);
196
+ }, [props.showIndex && renderIndexText(), props.showIndex && renderImageTitle(), showDownload && renderDownloadIcon()]);
127
197
  }
128
198
  };
199
+ const renderDownloadIcon = () => {
200
+ return (0, import_vue.createVNode)("div", {
201
+ "class": bem("download-icon"),
202
+ "onClick": onDownload
203
+ }, [(0, import_Download.Download)(bem)]);
204
+ };
129
205
  const renderCover = () => {
130
206
  if (slots.cover) {
131
207
  return (0, import_vue.createVNode)("div", {
@@ -189,7 +265,20 @@ var stdin_default = (0, import_vue.defineComponent)({
189
265
  (0, import_use_expose.useExpose)({
190
266
  swipeTo
191
267
  });
192
- (0, import_vue.onMounted)(resize);
268
+ (0, import_vue.onMounted)(() => __async(this, null, function* () {
269
+ var _a;
270
+ resize();
271
+ try {
272
+ const universalJsSdk = yield import("@egova/universal-js-sdk");
273
+ if (universalJsSdk && universalJsSdk.getJSI) {
274
+ const fileJsi = (_a = universalJsSdk.getJSI()) == null ? void 0 : _a.file;
275
+ hasDownloadSupport.value = !!(fileJsi && fileJsi.download);
276
+ }
277
+ } catch (e) {
278
+ console.warn("Failed to check download support:", e);
279
+ hasDownloadSupport.value = false;
280
+ }
281
+ }));
193
282
  (0, import_vue.watch)([import_utils.windowWidth, import_utils.windowHeight], resize);
194
283
  (0, import_vue.watch)(() => props.startPosition, (value) => setActive(+value));
195
284
  (0, import_vue.watch)(() => props.show, (value) => {
package/lib/image-preview/index.css CHANGED
@@ -1 +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;font-size:var(--zt-font-size-md);line-height:var(--zt-line-height-md)}.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)}
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)}