zartui 3.1.89 → 3.1.90

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 (39) hide show
  1. package/es/index.d.ts +2 -1
  2. package/es/index.mjs +4 -1
  3. package/es/media-picker/MediaPicker.d.ts +1 -14
  4. package/es/media-picker/MediaPicker.mjs +8 -78
  5. package/es/media-picker/index.css +1 -1
  6. package/es/media-picker/index.d.ts +1 -10
  7. package/es/media-picker/type.d.ts +0 -10
  8. package/es/pagination/Pagination.mjs +3 -1
  9. package/es/pagination/index.css +1 -1
  10. package/es/photo-picker/PhotoPicker.d.ts +202 -0
  11. package/es/photo-picker/PhotoPicker.mjs +510 -0
  12. package/es/photo-picker/index.css +1 -0
  13. package/es/photo-picker/index.d.ts +145 -0
  14. package/es/photo-picker/index.mjs +10 -0
  15. package/es/photo-picker/style/index.d.ts +1 -0
  16. package/es/photo-picker/style/index.mjs +15 -0
  17. package/lib/index.css +1 -1
  18. package/lib/index.d.ts +2 -1
  19. package/lib/index.js +4 -1
  20. package/lib/media-picker/MediaPicker.d.ts +1 -14
  21. package/lib/media-picker/MediaPicker.js +7 -77
  22. package/lib/media-picker/index.css +1 -1
  23. package/lib/media-picker/index.d.ts +1 -10
  24. package/lib/media-picker/type.d.ts +0 -10
  25. package/lib/pagination/Pagination.js +3 -1
  26. package/lib/pagination/index.css +1 -1
  27. package/lib/photo-picker/PhotoPicker.d.ts +202 -0
  28. package/lib/photo-picker/PhotoPicker.js +539 -0
  29. package/lib/photo-picker/index.css +1 -0
  30. package/lib/photo-picker/index.d.ts +145 -0
  31. package/lib/photo-picker/index.js +39 -0
  32. package/lib/photo-picker/style/index.d.ts +1 -0
  33. package/lib/photo-picker/style/index.js +15 -0
  34. package/lib/web-types.json +1 -1
  35. package/lib/zartui.cjs.js +1394 -966
  36. package/lib/zartui.es.js +1394 -966
  37. package/lib/zartui.js +1400 -972
  38. package/lib/zartui.min.js +2 -2
  39. package/package.json +3 -3
@@ -0,0 +1,510 @@
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
+ };
21
+ import { computed, defineComponent, ref, createVNode as _createVNode, createTextVNode as _createTextVNode } from "vue";
22
+ import { createNamespace, isDef, isWeixin, makeArrayProp, makeNumberProp, makeStringProp, truthProp } from "../utils/index.mjs";
23
+ import ZtActionSheet from "../action-sheet/index.mjs";
24
+ import ZtLoading from "../loading/index.mjs";
25
+ import ZtIcon from "../icon/index.mjs";
26
+ import ZtImage from "../image/index.mjs";
27
+ import { showFailToast } from "../toast/index.mjs";
28
+ import { showImagePreview } from "../image-preview/index.mjs";
29
+ import { isEmptyValue } from "../field/utils.mjs";
30
+ import { useExpose } from "../composables/use-expose.mjs";
31
+ import { fileTypeFromBuffer } from "file-type";
32
+ import { ImageProcessor, checkWatermarkConfigSupported, CompressOptions, ResizeOptions } from "@egova-mobile/app-media-utils";
33
+ import { file2DataURL, getFileUniqueCode, getUniqueFileName, isImageType } from "../media-picker/util/media-util.mjs";
34
+ import { wxUploadImage } from "../media-picker/util/wx-util.mjs";
35
+ const [name, bem] = createNamespace("photo-picker");
36
+ const FILE_SIZE_LIMIT = 100;
37
+ const COMPATIBLE_TYPE_MAPPINGS = {
38
+ gif: /* @__PURE__ */ new Set(["png"]),
39
+ jpeg: /* @__PURE__ */ new Set(["jpg"]),
40
+ jpg: /* @__PURE__ */ new Set(["jpeg"])
41
+ };
42
+ const photoPickerProps = {
43
+ disabled: Boolean,
44
+ showTitle: Boolean,
45
+ showDownload: Boolean,
46
+ downloadAction: Function,
47
+ useFileNameAsLabel: Boolean,
48
+ title: makeStringProp("\u6DFB\u52A0\u9644\u4EF6"),
49
+ mediaList: makeArrayProp(),
50
+ attachmentHeight: [Number, String],
51
+ maxAttachmentCount: makeNumberProp(Number.MAX_VALUE),
52
+ maxImageSideLength: makeNumberProp(1920),
53
+ maxImageFileSize: makeNumberProp(1024),
54
+ maxFileSize: makeNumberProp(FILE_SIZE_LIMIT * 1024),
55
+ keepFileType: {
56
+ type: Boolean,
57
+ default: false
58
+ },
59
+ watermarkOptions: {
60
+ type: Object,
61
+ default: () => null
62
+ },
63
+ allowTakePhoto: truthProp,
64
+ allowPickPhoto: truthProp,
65
+ preview: Function,
66
+ mediaPick: Function,
67
+ beforeRead: Function,
68
+ afterRead: Function,
69
+ beforeDelete: Function,
70
+ useWx: Boolean,
71
+ imageSizeType: makeStringProp("compressed")
72
+ };
73
+ var stdin_default = defineComponent({
74
+ name,
75
+ props: photoPickerProps,
76
+ emits: ["update:mediaList", "delete", "processing"],
77
+ setup(props, {
78
+ emit,
79
+ slots
80
+ }) {
81
+ const actionVisible = ref(false);
82
+ const mediaListPlaceholder = ref([]);
83
+ const cameraInputRef = ref();
84
+ const imageInputRef = ref();
85
+ const itemSizeStyle = computed(() => {
86
+ if (!isDef(props.attachmentHeight)) {
87
+ return void 0;
88
+ }
89
+ const size = typeof props.attachmentHeight === "number" ? `${props.attachmentHeight}px` : props.attachmentHeight;
90
+ return {
91
+ "--zt-photo-picker-item-size": size
92
+ };
93
+ });
94
+ const photoList = computed(() => props.mediaList.filter((media) => media.type === "photo"));
95
+ const placeholderList = computed(() => mediaListPlaceholder.value.filter((media) => media.type === "photo"));
96
+ const photoCount = computed(() => photoList.value.length + placeholderList.value.length);
97
+ const canAddPhoto = computed(() => photoCount.value < props.maxAttachmentCount);
98
+ const checkFileCountBeforeAdd = () => {
99
+ if (!canAddPhoto.value) {
100
+ showFailToast(`\u6700\u591A\u53EA\u80FD\u4E0A\u4F20${props.maxAttachmentCount}\u4E2A\u9644\u4EF6`);
101
+ return false;
102
+ }
103
+ return true;
104
+ };
105
+ const triggerHiddenInput = (refEl) => {
106
+ refEl && refEl.click();
107
+ };
108
+ const mediaPickAction = (mediaType, mediaAddType) => {
109
+ if (props.disabled || mediaType !== "photo") {
110
+ return;
111
+ }
112
+ if (!checkFileCountBeforeAdd()) {
113
+ return;
114
+ }
115
+ if (props.mediaPick && props.mediaPick(mediaType, mediaAddType)) {
116
+ return;
117
+ }
118
+ if (props.useWx && isWeixin() && window.wx) {
119
+ const type = mediaAddType === "take" ? "camera" : "album";
120
+ wxUploadImage(type).then((newMedias) => {
121
+ emit("update:mediaList", [...props.mediaList, ...newMedias]);
122
+ });
123
+ return;
124
+ }
125
+ if (mediaAddType === "take") {
126
+ triggerHiddenInput(cameraInputRef.value);
127
+ } else if (mediaAddType === "pick") {
128
+ triggerHiddenInput(imageInputRef.value);
129
+ }
130
+ };
131
+ const resetInput = (mediaType, mediaAddType) => {
132
+ if (mediaType !== "photo") {
133
+ return;
134
+ }
135
+ if (mediaAddType === "take" && cameraInputRef.value instanceof HTMLInputElement) {
136
+ cameraInputRef.value.value = "";
137
+ } else if (mediaAddType === "pick" && imageInputRef.value instanceof HTMLInputElement) {
138
+ imageInputRef.value.value = "";
139
+ }
140
+ };
141
+ const checkFileExist = (file) => props.mediaList.some((media) => media.uniqueCode === getFileUniqueCode(file));
142
+ const filterValidFiles = (files) => {
143
+ const validFiles = [];
144
+ for (let i = 0; i < files.length; i++) {
145
+ const file = files[i];
146
+ if (file.size > props.maxFileSize * 1024) {
147
+ showFailToast(`\u8BF7\u52FF\u6DFB\u52A0\u5927\u4E8E${props.maxFileSize}K\u7684\u6587\u4EF6`);
148
+ return validFiles;
149
+ }
150
+ if (!isImageType(file)) {
151
+ showFailToast("\u53EA\u80FD\u4E0A\u4F20\u56FE\u7247\u9644\u4EF6");
152
+ return validFiles;
153
+ }
154
+ if (checkFileExist(file)) {
155
+ showFailToast("\u8BF7\u52FF\u91CD\u590D\u6DFB\u52A0\u6587\u4EF6");
156
+ return validFiles;
157
+ }
158
+ validFiles.push(file);
159
+ }
160
+ return validFiles;
161
+ };
162
+ const checkFileCountAfterAdd = (files) => {
163
+ if (photoCount.value + files.length > props.maxAttachmentCount) {
164
+ showFailToast(`\u6700\u591A\u53EA\u80FD\u4E0A\u4F20${props.maxAttachmentCount}\u4E2A\u9644\u4EF6`);
165
+ return false;
166
+ }
167
+ return true;
168
+ };
169
+ const transformImageFilesWithoutCompress = (files) => {
170
+ const mediaList = files.map((file) => file2DataURL(file).then((base64) => ({
171
+ showSrc: base64,
172
+ type: "photo",
173
+ file,
174
+ uniqueCode: getFileUniqueCode(file),
175
+ lastModified: file.lastModified,
176
+ fileSize: file.size,
177
+ fileName: file.name,
178
+ deletable: true,
179
+ message: "",
180
+ originalName: file.name,
181
+ originalSize: file.size,
182
+ originalFile: file
183
+ })));
184
+ return Promise.all(mediaList);
185
+ };
186
+ const getExtensionFromMimeType = (mimeType) => {
187
+ const mimeToExt = {
188
+ "image/jpeg": "jpg",
189
+ "image/jpg": "jpg",
190
+ "image/png": "png",
191
+ "image/gif": "gif",
192
+ "image/webp": "webp",
193
+ "image/bmp": "bmp",
194
+ "image/svg+xml": "svg"
195
+ };
196
+ return mimeToExt[mimeType] || "jpg";
197
+ };
198
+ const transformImageFiles = (files) => {
199
+ const resizeOptions = new ResizeOptions(props.maxImageSideLength);
200
+ const compressOptions = new CompressOptions(props.maxImageFileSize, props.keepFileType);
201
+ const promisesTodo = files.map((file) => {
202
+ const watermarkEnabled = props.watermarkOptions && props.watermarkOptions.watermarkConfigString && checkWatermarkConfigSupported(props.watermarkOptions.watermarkConfigString);
203
+ let watermarkOpt;
204
+ if (watermarkEnabled) {
205
+ watermarkOpt = {
206
+ enabled: true,
207
+ watermarkConfigString: props.watermarkOptions.watermarkConfigString,
208
+ context: {
209
+ address: props.watermarkOptions.address || "",
210
+ humanName: props.watermarkOptions.humanName || "",
211
+ projectName: props.watermarkOptions.projectName || "",
212
+ watermarkTime: /* @__PURE__ */ new Date()
213
+ }
214
+ };
215
+ } else {
216
+ watermarkOpt = {
217
+ enabled: false
218
+ };
219
+ }
220
+ return new ImageProcessor(file, resizeOptions, watermarkOpt, compressOptions).process().then((f) => {
221
+ if (!f) {
222
+ return null;
223
+ }
224
+ return file2DataURL(f).then((base64) => {
225
+ const ext = props.keepFileType ? getExtensionFromMimeType(f.type) : "jpg";
226
+ const uniqueFileName = getUniqueFileName(f, ext);
227
+ return {
228
+ showSrc: base64,
229
+ type: "photo",
230
+ file: new File([f], uniqueFileName, {
231
+ lastModified: f.lastModified,
232
+ type: f.type
233
+ }),
234
+ uniqueCode: getFileUniqueCode(file),
235
+ lastModified: f.lastModified,
236
+ fileSize: f.size,
237
+ fileName: f.name,
238
+ deletable: true,
239
+ message: "",
240
+ originalName: file.name,
241
+ originalSize: file.size
242
+ };
243
+ });
244
+ });
245
+ });
246
+ return Promise.all(promisesTodo).then((medias) => medias.filter(isDef));
247
+ };
248
+ const readFiles = (files) => {
249
+ emit("processing", true);
250
+ mediaListPlaceholder.value = files.map((file) => ({
251
+ file,
252
+ message: "\u5904\u7406\u4E2D...",
253
+ status: "processing",
254
+ type: "photo",
255
+ uniqueCode: getFileUniqueCode(file),
256
+ lastModified: file.lastModified,
257
+ fileSize: file.size,
258
+ fileName: file.name,
259
+ originalName: file.name,
260
+ originalSize: file.size,
261
+ deletable: true
262
+ }));
263
+ const promise = props.imageSizeType === "original" ? transformImageFilesWithoutCompress(files) : transformImageFiles(files);
264
+ promise.then((newMedias) => {
265
+ if (props.useFileNameAsLabel) {
266
+ newMedias.forEach((newMedia) => {
267
+ newMedia.label = newMedia.originalName;
268
+ });
269
+ }
270
+ emit("update:mediaList", [...props.mediaList, ...newMedias]);
271
+ if (props.afterRead) {
272
+ props.afterRead(newMedias);
273
+ }
274
+ }).finally(() => {
275
+ mediaListPlaceholder.value = [];
276
+ emit("processing", false);
277
+ });
278
+ };
279
+ const handleInputFiles = (event) => __async(this, null, function* () {
280
+ const inputFiles = event.target.files;
281
+ if (!inputFiles || inputFiles.length === 0) {
282
+ return;
283
+ }
284
+ const files = filterValidFiles(inputFiles);
285
+ if (files.length === 0) {
286
+ return;
287
+ }
288
+ if (!checkFileCountAfterAdd(files)) {
289
+ return;
290
+ }
291
+ if (props.keepFileType) {
292
+ try {
293
+ for (const file of files) {
294
+ const buffer = yield file.slice(0, 4100).arrayBuffer();
295
+ const fileType = yield fileTypeFromBuffer(new Uint8Array(buffer));
296
+ const fileName = file.name.toLowerCase();
297
+ const extensionMatch = fileName.match(/\.([^.]+)$/);
298
+ const extension = extensionMatch ? extensionMatch[1] : "";
299
+ if (fileType && extension && fileType.ext !== extension) {
300
+ const compatibleTypes = COMPATIBLE_TYPE_MAPPINGS[extension];
301
+ const isCompatible = compatibleTypes && compatibleTypes.has(fileType.ext);
302
+ if (!isCompatible) {
303
+ showFailToast({
304
+ message: `\u6587\u4EF6\u540E\u7F00\u4E0E\u5B9E\u9645\u6587\u4EF6\u7C7B\u578B\u4E0D\u5339\u914D\uFF1A${file.name}`,
305
+ duration: 5e3
306
+ });
307
+ return;
308
+ }
309
+ }
310
+ }
311
+ } catch (error) {
312
+ console.error("\u6587\u4EF6\u7C7B\u578B\u6821\u9A8C\u5931\u8D25:", error);
313
+ }
314
+ }
315
+ if (props.beforeRead) {
316
+ try {
317
+ const response = yield props.beforeRead(files);
318
+ if (!response) {
319
+ return;
320
+ }
321
+ if (Array.isArray(response)) {
322
+ readFiles(response.filter((file) => !!file));
323
+ } else {
324
+ readFiles(files);
325
+ }
326
+ } catch (error) {
327
+ showFailToast(error == null ? void 0 : error.message);
328
+ }
329
+ } else {
330
+ readFiles(files);
331
+ }
332
+ });
333
+ const genThumbnailMask = (media) => {
334
+ const {
335
+ status,
336
+ message
337
+ } = media;
338
+ if (status === "processing" || status === "uploading" || status === "failed") {
339
+ const MaskIcon = status === "failed" ? _createVNode(ZtIcon, {
340
+ "name": "close",
341
+ "class": bem("mask-icon")
342
+ }, null) : _createVNode(ZtLoading, {
343
+ "class": bem("loading")
344
+ }, null);
345
+ const showMessage = isDef(message) && message !== "";
346
+ return _createVNode("div", {
347
+ "class": bem("mask")
348
+ }, [MaskIcon, showMessage && _createVNode("div", {
349
+ "class": bem("mask-message")
350
+ }, [message])]);
351
+ }
352
+ };
353
+ const renderThumb = (media) => {
354
+ if (slots.thumbnail) {
355
+ return slots.thumbnail({
356
+ file: media
357
+ });
358
+ }
359
+ return _createVNode(ZtImage, {
360
+ "src": media.showSrc || media.url,
361
+ "fit": "cover",
362
+ "radius": "4"
363
+ }, null);
364
+ };
365
+ const renderLabel = (media) => {
366
+ if (slots["preview-cover"]) {
367
+ return slots["preview-cover"]({
368
+ file: media
369
+ });
370
+ }
371
+ if (!isEmptyValue(media.label)) {
372
+ return _createVNode("div", {
373
+ "class": bem("label")
374
+ }, [media.label]);
375
+ }
376
+ };
377
+ const deleteMedia = (media, index) => {
378
+ const list = props.mediaList.slice(0);
379
+ list.splice(index, 1);
380
+ emit("update:mediaList", list);
381
+ emit("delete", media, index);
382
+ };
383
+ const onDelete = (media, index) => __async(this, null, function* () {
384
+ if (props.beforeDelete) {
385
+ const response = yield props.beforeDelete(media);
386
+ if (!response) {
387
+ return;
388
+ }
389
+ }
390
+ deleteMedia(media, index);
391
+ });
392
+ const previewMedia = (index) => __async(this, null, function* () {
393
+ if (props.preview && (yield props.preview(props.mediaList, index))) {
394
+ return;
395
+ }
396
+ showImagePreview({
397
+ images: photoList.value.map((image) => ({
398
+ url: image.url || image.showSrc || ""
399
+ })),
400
+ showDownload: props.showDownload,
401
+ downloadAction: props.downloadAction,
402
+ startPosition: photoList.value.indexOf(props.mediaList[index]),
403
+ closeable: true
404
+ });
405
+ });
406
+ const renderDelete = (media, index) => {
407
+ if (props.disabled || !media.deletable || media.status === "uploading") {
408
+ return;
409
+ }
410
+ return _createVNode("button", {
411
+ "type": "button",
412
+ "class": bem("delete"),
413
+ "onClick": (event) => {
414
+ event.stopPropagation();
415
+ onDelete(media, index);
416
+ }
417
+ }, [_createTextVNode("\xD7")]);
418
+ };
419
+ const renderPhoto = (media) => {
420
+ const index = props.mediaList.indexOf(media);
421
+ return _createVNode("div", {
422
+ "key": media.uniqueCode,
423
+ "class": bem("item"),
424
+ "onClick": () => previewMedia(index)
425
+ }, [renderThumb(media), renderLabel(media), genThumbnailMask(media), renderDelete(media, index)]);
426
+ };
427
+ const renderPlaceholder = (media) => _createVNode("div", {
428
+ "key": media.uniqueCode || media.fileName,
429
+ "class": bem("item")
430
+ }, [renderThumb(media), renderLabel(media), genThumbnailMask(media)]);
431
+ const renderAdd = () => {
432
+ if (!canAddPhoto.value || props.disabled || !props.allowTakePhoto && !props.allowPickPhoto) {
433
+ return;
434
+ }
435
+ return _createVNode("button", {
436
+ "type": "button",
437
+ "class": bem("add"),
438
+ "disabled": props.disabled,
439
+ "onClick": () => {
440
+ if (props.allowTakePhoto && props.allowPickPhoto) {
441
+ actionVisible.value = true;
442
+ return;
443
+ }
444
+ mediaPickAction("photo", props.allowTakePhoto ? "take" : "pick");
445
+ }
446
+ }, [_createVNode("span", {
447
+ "class": bem("add-icon")
448
+ }, [_createTextVNode("+")])]);
449
+ };
450
+ const hiddenInput = () => [_createVNode("input", {
451
+ "type": "file",
452
+ "accept": "image/*",
453
+ "ref": cameraInputRef,
454
+ "multiple": true,
455
+ "onChange": handleInputFiles,
456
+ "class": bem("hidden"),
457
+ "onClick": () => resetInput("photo", "take"),
458
+ "capture": "environment"
459
+ }, null), _createVNode("input", {
460
+ "type": "file",
461
+ "accept": "image/*,image/exact",
462
+ "ref": imageInputRef,
463
+ "multiple": true,
464
+ "onChange": handleInputFiles,
465
+ "class": bem("hidden"),
466
+ "onClick": () => resetInput("photo", "pick")
467
+ }, null)];
468
+ const selectAction = (action) => {
469
+ actionVisible.value = false;
470
+ action.func && action.func();
471
+ };
472
+ useExpose({
473
+ mediaPickAction,
474
+ handleInputFiles,
475
+ transformImageFiles,
476
+ resetInput,
477
+ previewMedia
478
+ });
479
+ return () => {
480
+ const title = props.showTitle && _createVNode("div", {
481
+ "class": bem("title")
482
+ }, [props.title]);
483
+ const actions = [{
484
+ name: "\u62CD\u7167",
485
+ callback: () => mediaPickAction("photo", "take")
486
+ }, {
487
+ name: "\u7167\u7247",
488
+ callback: () => mediaPickAction("photo", "pick")
489
+ }];
490
+ return _createVNode("div", {
491
+ "class": bem(),
492
+ "style": itemSizeStyle.value
493
+ }, [title, hiddenInput(), _createVNode(ZtActionSheet, {
494
+ "show": actionVisible.value,
495
+ "onUpdate:show": ($event) => actionVisible.value = $event,
496
+ "actions": actions,
497
+ "description": "\u8BF7\u9009\u62E9",
498
+ "cancel-text": "\u53D6\u6D88",
499
+ "teleport": "body",
500
+ "close-on-click-action": true,
501
+ "onSelect": selectAction
502
+ }, null), _createVNode("div", {
503
+ "class": bem("track")
504
+ }, [photoList.value.map(renderPhoto), placeholderList.value.map(renderPlaceholder), renderAdd()])]);
505
+ };
506
+ }
507
+ });
508
+ export {
509
+ stdin_default as default
510
+ };
@@ -0,0 +1 @@
1
+ :root{--zt-photo-picker-padding: 12px;--zt-photo-picker-gap: 16px;--zt-photo-picker-item-size: 140px;--zt-photo-picker-radius: 10px;--zt-photo-picker-add-border: 1px dashed #d7deee;--zt-photo-picker-add-color: #9aa8c0;--zt-photo-picker-add-background: #f8f9fc;--zt-photo-picker-delete-background: var(--zt-primary-color);--zt-photo-picker-delete-color: var(--zt-white);--zt-photo-picker-label-background: rgba(var(--zt-gray-rgb), .5);--zt-photo-picker-label-color: var(--zt-white);--zt-photo-picker-title-height: 44px}.zt-photo-picker{box-sizing:border-box;width:100%;height:100%;padding:var(--zt-photo-picker-padding);overflow:hidden}.zt-photo-picker__hidden{display:none}.zt-photo-picker__title{position:relative;height:var(--zt-photo-picker-title-height);line-height:var(--zt-photo-picker-title-height);font-weight:700;font-size:var(--zt-font-size-lg);color:var(--zt-text-color);padding:0 16px}.zt-photo-picker__track{display:flex;flex-wrap:nowrap;align-items:flex-start;gap:var(--zt-photo-picker-gap);width:100%;height:100%;overflow-x:auto;overflow-y:hidden}.zt-photo-picker__track::-webkit-scrollbar{width:0;height:0}.zt-photo-picker__item,.zt-photo-picker__add{position:relative;flex:0 0 var(--zt-photo-picker-item-size);width:var(--zt-photo-picker-item-size);height:var(--zt-photo-picker-item-size);border-radius:var(--zt-photo-picker-radius);box-sizing:border-box;overflow:hidden}.zt-photo-picker__add{display:flex;align-items:center;justify-content:center;padding:0;color:var(--zt-photo-picker-add-color);background:var(--zt-photo-picker-add-background);border:var(--zt-photo-picker-add-border)}.zt-photo-picker__add:disabled{opacity:var(--zt-disabled-opacity)}.zt-photo-picker__add-icon{font-size:48px;line-height:1;font-weight:300}.zt-photo-picker__delete{position:absolute;top:8px;right:8px;display:flex;align-items:center;justify-content:center;width:calc(var(--zt-photo-picker-item-size) * .2);height:calc(var(--zt-photo-picker-item-size) * .2);padding:0;color:var(--zt-photo-picker-delete-color);font-size:calc(var(--zt-photo-picker-item-size) * .15);line-height:1;background:var(--zt-photo-picker-delete-background);border:0;border-radius:50%}.zt-photo-picker .zt-image,.zt-photo-picker__thumbnail{width:100%;height:100%}.zt-photo-picker__label{position:absolute;bottom:0;left:0;box-sizing:border-box;width:100%;height:var(--zt-line-height-lg);line-height:var(--zt-line-height-lg);padding:0 var(--zt-padding-xs);overflow:hidden;text-align:center;border-radius:0 0 4px 4px;font-size:var(--zt-font-size-sm);text-overflow:ellipsis;word-break:break-all;white-space:nowrap;color:var(--zt-photo-picker-label-color);background-color:var(--zt-photo-picker-label-background)}.zt-photo-picker__mask{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--zt-white);background-color:var(--zt-uploader-mask-background);border-radius:4px}.zt-photo-picker__mask-icon{font-size:var(--zt-font-size-xxxl)}.zt-photo-picker__mask-message{margin-top:6px;padding:0 var(--zt-padding-base);font-size:var(--zt-font-size-sm);line-height:var(--zt-uploader-mask-message-line-height)}.zt-photo-picker__loading{width:var(--zt-uploader-loading-icon-size);height:var(--zt-uploader-loading-icon-size);color:var(--zt-uploader-icon-color)}
@@ -0,0 +1,145 @@
1
+ export declare const PhotoPicker: import("../utils").WithInstall<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
2
+ disabled: BooleanConstructor;
3
+ showTitle: BooleanConstructor;
4
+ showDownload: BooleanConstructor;
5
+ downloadAction: import("vue").PropType<(params: import("../image-preview/ImagePreview").DownloadActionParams) => boolean>;
6
+ useFileNameAsLabel: BooleanConstructor;
7
+ title: {
8
+ type: import("vue").PropType<string>;
9
+ default: string;
10
+ };
11
+ mediaList: {
12
+ type: import("vue").PropType<import("../media-picker/type").Media[]>;
13
+ default: () => import("../media-picker/type").Media[];
14
+ };
15
+ attachmentHeight: import("vue").PropType<string | number>;
16
+ maxAttachmentCount: {
17
+ type: NumberConstructor;
18
+ default: number;
19
+ };
20
+ maxImageSideLength: {
21
+ type: NumberConstructor;
22
+ default: number;
23
+ };
24
+ maxImageFileSize: {
25
+ type: NumberConstructor;
26
+ default: number;
27
+ };
28
+ maxFileSize: {
29
+ type: NumberConstructor;
30
+ default: number;
31
+ };
32
+ keepFileType: {
33
+ type: BooleanConstructor;
34
+ default: boolean;
35
+ };
36
+ watermarkOptions: {
37
+ type: ObjectConstructor;
38
+ default: () => null;
39
+ };
40
+ allowTakePhoto: {
41
+ type: BooleanConstructor;
42
+ default: true;
43
+ };
44
+ allowPickPhoto: {
45
+ type: BooleanConstructor;
46
+ default: true;
47
+ };
48
+ preview: import("vue").PropType<import("../media-picker/type").MediaPreview>;
49
+ mediaPick: import("vue").PropType<import("../media-picker/type").MediaPick>;
50
+ beforeRead: import("vue").PropType<import("../media-picker/type").MediaBeforeRead>;
51
+ afterRead: import("vue").PropType<import("../media-picker/type").MediaAfterRead>;
52
+ beforeDelete: import("vue").PropType<import("../media-picker/type").MediaBeforeDelete>;
53
+ useWx: BooleanConstructor;
54
+ imageSizeType: {
55
+ type: import("vue").PropType<import("../media-picker/type").MediaSizeType>;
56
+ default: import("../media-picker/type").MediaSizeType;
57
+ };
58
+ }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("delete" | "processing" | "update:mediaList")[], "delete" | "processing" | "update:mediaList", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
59
+ disabled: BooleanConstructor;
60
+ showTitle: BooleanConstructor;
61
+ showDownload: BooleanConstructor;
62
+ downloadAction: import("vue").PropType<(params: import("../image-preview/ImagePreview").DownloadActionParams) => boolean>;
63
+ useFileNameAsLabel: BooleanConstructor;
64
+ title: {
65
+ type: import("vue").PropType<string>;
66
+ default: string;
67
+ };
68
+ mediaList: {
69
+ type: import("vue").PropType<import("../media-picker/type").Media[]>;
70
+ default: () => import("../media-picker/type").Media[];
71
+ };
72
+ attachmentHeight: import("vue").PropType<string | number>;
73
+ maxAttachmentCount: {
74
+ type: NumberConstructor;
75
+ default: number;
76
+ };
77
+ maxImageSideLength: {
78
+ type: NumberConstructor;
79
+ default: number;
80
+ };
81
+ maxImageFileSize: {
82
+ type: NumberConstructor;
83
+ default: number;
84
+ };
85
+ maxFileSize: {
86
+ type: NumberConstructor;
87
+ default: number;
88
+ };
89
+ keepFileType: {
90
+ type: BooleanConstructor;
91
+ default: boolean;
92
+ };
93
+ watermarkOptions: {
94
+ type: ObjectConstructor;
95
+ default: () => null;
96
+ };
97
+ allowTakePhoto: {
98
+ type: BooleanConstructor;
99
+ default: true;
100
+ };
101
+ allowPickPhoto: {
102
+ type: BooleanConstructor;
103
+ default: true;
104
+ };
105
+ preview: import("vue").PropType<import("../media-picker/type").MediaPreview>;
106
+ mediaPick: import("vue").PropType<import("../media-picker/type").MediaPick>;
107
+ beforeRead: import("vue").PropType<import("../media-picker/type").MediaBeforeRead>;
108
+ afterRead: import("vue").PropType<import("../media-picker/type").MediaAfterRead>;
109
+ beforeDelete: import("vue").PropType<import("../media-picker/type").MediaBeforeDelete>;
110
+ useWx: BooleanConstructor;
111
+ imageSizeType: {
112
+ type: import("vue").PropType<import("../media-picker/type").MediaSizeType>;
113
+ default: import("../media-picker/type").MediaSizeType;
114
+ };
115
+ }>> & Readonly<{
116
+ onDelete?: ((...args: any[]) => any) | undefined;
117
+ onProcessing?: ((...args: any[]) => any) | undefined;
118
+ "onUpdate:mediaList"?: ((...args: any[]) => any) | undefined;
119
+ }>, {
120
+ title: string;
121
+ disabled: boolean;
122
+ showTitle: boolean;
123
+ showDownload: boolean;
124
+ useFileNameAsLabel: boolean;
125
+ mediaList: import("../media-picker/type").Media[];
126
+ maxImageSideLength: number;
127
+ maxImageFileSize: number;
128
+ maxFileSize: number;
129
+ keepFileType: boolean;
130
+ watermarkOptions: Record<string, any>;
131
+ allowTakePhoto: boolean;
132
+ allowPickPhoto: boolean;
133
+ useWx: boolean;
134
+ imageSizeType: import("../media-picker/type").MediaSizeType;
135
+ maxAttachmentCount: number;
136
+ }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;
137
+ export default PhotoPicker;
138
+ export type { PhotoPickerProps, PhotoPickerInstance } from './PhotoPicker';
139
+ export type { Media, MediaType, MediaAddType, MediaUploadStatus, MediaPreview, MediaPick, MediaBeforeRead, MediaAfterRead, MediaBeforeDelete, MediaSizeType, } from '../media-picker/type';
140
+ export { defaultMedia } from '../media-picker/type';
141
+ declare module 'vue' {
142
+ interface GlobalComponents {
143
+ ZtPhotoPicker: typeof PhotoPicker;
144
+ }
145
+ }
@@ -0,0 +1,10 @@
1
+ import { withInstall } from "../utils/index.mjs";
2
+ import _PhotoPicker from "./PhotoPicker.mjs";
3
+ const PhotoPicker = withInstall(_PhotoPicker);
4
+ var stdin_default = PhotoPicker;
5
+ import { defaultMedia } from "../media-picker/type.mjs";
6
+ export {
7
+ PhotoPicker,
8
+ stdin_default as default,
9
+ defaultMedia
10
+ };
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,15 @@
1
+ import "../../style/base.css";
2
+ import "../../badge/index.css";
3
+ import "../../icon/index.css";
4
+ import "../../image/index.css";
5
+ import "../../overlay/index.css";
6
+ import "../../popup/index.css";
7
+ import "../../loading/index.css";
8
+ import "../../toast/index.css";
9
+ import "../../action-sheet/index.css";
10
+ import "../../swipe/index.css";
11
+ import "../../swipe-item/index.css";
12
+ import "../../image-preview/index.css";
13
+ import "../../field/index.css";
14
+ import "../../media-picker/index.css";
15
+ import "../index.css";