zartui 3.1.87 → 3.1.89

package/lib/zartui.cjs.js

@@ -16251,6 +16251,7 @@ const COMPATIBLE_TYPE_MAPPINGS = {
   "m4a": /* @__PURE__ */ new Set(["mp4", "mp4a", "x-m4a"])
 };
 const mediaPickerProps = {
+  variant: makeStringProp("default"),
   sortable: {
     type: Boolean,
     default: false
@@ -16324,6 +16325,7 @@ var stdin_default$D = vue.defineComponent({
   }) {
     const videoOptionsVisible = vue.ref(false);
     const audioOptionsVisible = vue.ref(false);
+    const photoOptionsVisible = vue.ref(false);
     const actionVisible = vue.ref(false);
     const mediaPlayerVisible = vue.ref(false);
     const mediaTypeToPlay = vue.ref("file");
@@ -16338,7 +16340,10 @@ var stdin_default$D = vue.defineComponent({
     const gridRef = vue.ref();
     const mediaListPlaceholder = vue.ref([]);
     const sort2 = vue.ref();
-    const shouldIsolateSortableTouch = () => props.sortable && props.mediaList.length > 0;
+    const isAttachmentVariant = vue.computed(() => props.variant === "attachment");
+    const attachmentMediaList = vue.computed(() => props.mediaList.filter((media) => media.type === "photo"));
+    const attachmentMediaListPlaceholder = vue.computed(() => mediaListPlaceholder.value.filter((media) => media.type === "photo"));
+    const shouldIsolateSortableTouch = () => !isAttachmentVariant.value && props.sortable && props.mediaList.length > 0;
     const stopSortableTouchStartPropagation = (event) => {
       if (!shouldIsolateSortableTouch()) {
         return;
@@ -16354,7 +16359,7 @@ var stdin_default$D = vue.defineComponent({
     };
     const initSortable = () => __async$2(this, null, function* () {
       var _a;
-      if (sort2.value || !props.sortable || !props.mediaList.length)
+      if (sort2.value || isAttachmentVariant.value || !props.sortable || !props.mediaList.length)
         return;
       yield vue.nextTick();
       const gridEl = (_a = gridRef.value) == null ? void 0 : _a.$el;
@@ -16470,6 +16475,19 @@ var stdin_default$D = vue.defineComponent({
     };
     const imageList = vue.computed(() => props.mediaList.filter((media) => media.type === "photo"));
     const actionOptions = vue.computed(() => {
+      if (photoOptionsVisible.value) {
+        return [{
+          name: "拍照",
+          callback: () => {
+            mediaPickAction("photo", "take");
+          }
+        }, {
+          name: "照片",
+          callback: () => {
+            mediaPickAction("photo", "pick");
+          }
+        }];
+      }
       if (videoOptionsVisible.value) {
         return [{
           name: "拍摄",
@@ -16921,6 +16939,40 @@ var stdin_default$D = vue.defineComponent({
       }
       return buttons;
     };
+    const renderAttachmentAdd = () => {
+      const canTakePhoto = props.allowTakePhoto;
+      const canPickPhoto = props.allowPickPhoto;
+      if (!canTakePhoto && !canPickPhoto) {
+        return;
+      }
+      if (props.allowTakePhoto && props.allowPickPhoto) {
+        return vue.createVNode("button", {
+          "type": "button",
+          "class": bem$v("attachment-add"),
+          "disabled": props.disabled,
+          "onClick": () => {
+            if (props.disabled) {
+              return;
+            }
+            actionVisible.value = true;
+            photoOptionsVisible.value = true;
+            videoOptionsVisible.value = false;
+            audioOptionsVisible.value = false;
+          }
+        }, [vue.createVNode("span", {
+          "class": bem$v("attachment-add-icon")
+        }, [vue.createTextVNode("+")])]);
+      }
+      const addType = canTakePhoto ? "take" : "pick";
+      return vue.createVNode("button", {
+        "type": "button",
+        "class": bem$v("attachment-add"),
+        "disabled": props.disabled,
+        "onClick": () => mediaPickAction("photo", addType)
+      }, [vue.createVNode("span", {
+        "class": bem$v("attachment-add-icon")
+      }, [vue.createTextVNode("+")])]);
+    };
     const genThumbnailMask = (media) => {
       const {
         status,
@@ -17087,12 +17139,45 @@ var stdin_default$D = vue.defineComponent({
         default: () => [renderMediaThumbnail(media), renderMediaLabel(media), genThumbnailMask(media), deleteIcon]
       });
     });
+    const renderAttachmentDelete = (media, index2) => {
+      if (!media.deletable || media.status === "uploading") {
+        return;
+      }
+      return vue.createVNode("button", {
+        "type": "button",
+        "class": bem$v("attachment-delete"),
+        "onClick": (event) => {
+          event.stopPropagation();
+          onDelete(media, index2);
+        }
+      }, [vue.createTextVNode("×")]);
+    };
+    const renderAttachmentMedia = (media) => {
+      const index2 = props.mediaList.indexOf(media);
+      return vue.createVNode("div", {
+        "key": media.uniqueCode,
+        "class": bem$v("attachment-item"),
+        "onClick": () => previewMedia(index2)
+      }, [renderMediaThumbnail(media), renderMediaLabel(media), genThumbnailMask(media), renderAttachmentDelete(media, index2)]);
+    };
+    const renderAttachmentPlaceholder = (media) => vue.createVNode("div", {
+      "key": media.uniqueCode || media.fileName,
+      "class": bem$v("attachment-item")
+    }, [renderMediaThumbnail(media), renderMediaLabel(media), genThumbnailMask(media)]);
+    const renderAttachment = () => vue.createVNode("div", {
+      "class": bem$v("attachment")
+    }, [vue.createVNode("div", {
+      "class": bem$v("attachment-track")
+    }, [attachmentMediaList.value.map(renderAttachmentMedia), attachmentMediaListPlaceholder.value.map(renderAttachmentPlaceholder), renderAttachmentAdd()])]);
     const selectAction = (action) => {
       actionVisible.value = false;
+      photoOptionsVisible.value = false;
+      videoOptionsVisible.value = false;
+      audioOptionsVisible.value = false;
       action.func && action.func();
     };
-    vue.watch(() => [props.sortable, props.mediaList.length], (_0) => __async$2(this, [_0], function* ([sortable, mediaCount]) {
-      if (!sortable || !mediaCount) {
+    vue.watch(() => [props.sortable, props.mediaList.length, props.variant], (_0) => __async$2(this, [_0], function* ([sortable, mediaCount]) {
+      if (isAttachmentVariant.value || !sortable || !mediaCount) {
         destroySortable();
         return;
       }
@@ -17116,7 +17201,9 @@ var stdin_default$D = vue.defineComponent({
       }, [props.title]);
       const showButtons = props.allowTakePhoto || props.allowPickPhoto || props.allowTakeVideo || props.allowPickVideo || props.allowTakeAudio || props.allowPickAudio || props.allowPickFile;
       return vue.createVNode("div", {
-        "class": bem$v()
+        "class": bem$v({
+          attachment: isAttachmentVariant.value
+        })
       }, [title, hiddenInput(), vue.createVNode(stdin_default$M, vue.mergeProps({
         "show": mediaPlayerVisible.value,
         "onUpdate:show": ($event) => mediaPlayerVisible.value = $event,
@@ -17132,7 +17219,7 @@ var stdin_default$D = vue.defineComponent({
         "teleport": "body",
         "close-on-click-action": true,
         "onSelect": selectAction
-      }, null), vue.withDirectives(vue.createVNode("div", {
+      }, null), isAttachmentVariant.value ? renderAttachment() : vue.createVNode(vue.Fragment, null, [vue.withDirectives(vue.createVNode("div", {
         "class": bem$v("line")
       }, [renderButtons(), slots["extend"] ? slots.extend() : ""]), [[vue.vShow, showButtons]]), vue.withDirectives(vue.createVNode(stdin_default$Y, {
         "ref": gridRef,
@@ -17152,7 +17239,7 @@ var stdin_default$D = vue.defineComponent({
         "class": bem$v("grid")
       }, {
         default: () => [renderMediaListPlaceholder()]
-      }), [[vue.vShow, mediaListPlaceholder.value.length]])]);
+      }), [[vue.vShow, mediaListPlaceholder.value.length]])])]);
     };
   }
 });
@@ -23864,7 +23951,7 @@ const Lazyload = {
     });
   }
 };
-const version = "3.1.87";
+const version = "3.1.89";
 function install(app) {
   const components = [
     ActionSheet,

package/lib/zartui.es.js

@@ -16249,6 +16249,7 @@ const COMPATIBLE_TYPE_MAPPINGS = {
   "m4a": /* @__PURE__ */ new Set(["mp4", "mp4a", "x-m4a"])
 };
 const mediaPickerProps = {
+  variant: makeStringProp("default"),
   sortable: {
     type: Boolean,
     default: false
@@ -16322,6 +16323,7 @@ var stdin_default$D = defineComponent({
   }) {
     const videoOptionsVisible = ref(false);
     const audioOptionsVisible = ref(false);
+    const photoOptionsVisible = ref(false);
     const actionVisible = ref(false);
     const mediaPlayerVisible = ref(false);
     const mediaTypeToPlay = ref("file");
@@ -16336,7 +16338,10 @@ var stdin_default$D = defineComponent({
     const gridRef = ref();
     const mediaListPlaceholder = ref([]);
     const sort2 = ref();
-    const shouldIsolateSortableTouch = () => props.sortable && props.mediaList.length > 0;
+    const isAttachmentVariant = computed(() => props.variant === "attachment");
+    const attachmentMediaList = computed(() => props.mediaList.filter((media) => media.type === "photo"));
+    const attachmentMediaListPlaceholder = computed(() => mediaListPlaceholder.value.filter((media) => media.type === "photo"));
+    const shouldIsolateSortableTouch = () => !isAttachmentVariant.value && props.sortable && props.mediaList.length > 0;
     const stopSortableTouchStartPropagation = (event) => {
       if (!shouldIsolateSortableTouch()) {
         return;
@@ -16352,7 +16357,7 @@ var stdin_default$D = defineComponent({
     };
     const initSortable = () => __async$2(this, null, function* () {
       var _a;
-      if (sort2.value || !props.sortable || !props.mediaList.length)
+      if (sort2.value || isAttachmentVariant.value || !props.sortable || !props.mediaList.length)
         return;
       yield nextTick();
       const gridEl = (_a = gridRef.value) == null ? void 0 : _a.$el;
@@ -16468,6 +16473,19 @@ var stdin_default$D = defineComponent({
     };
     const imageList = computed(() => props.mediaList.filter((media) => media.type === "photo"));
     const actionOptions = computed(() => {
+      if (photoOptionsVisible.value) {
+        return [{
+          name: "拍照",
+          callback: () => {
+            mediaPickAction("photo", "take");
+          }
+        }, {
+          name: "照片",
+          callback: () => {
+            mediaPickAction("photo", "pick");
+          }
+        }];
+      }
       if (videoOptionsVisible.value) {
         return [{
           name: "拍摄",
@@ -16919,6 +16937,40 @@ var stdin_default$D = defineComponent({
       }
       return buttons;
     };
+    const renderAttachmentAdd = () => {
+      const canTakePhoto = props.allowTakePhoto;
+      const canPickPhoto = props.allowPickPhoto;
+      if (!canTakePhoto && !canPickPhoto) {
+        return;
+      }
+      if (props.allowTakePhoto && props.allowPickPhoto) {
+        return createVNode("button", {
+          "type": "button",
+          "class": bem$v("attachment-add"),
+          "disabled": props.disabled,
+          "onClick": () => {
+            if (props.disabled) {
+              return;
+            }
+            actionVisible.value = true;
+            photoOptionsVisible.value = true;
+            videoOptionsVisible.value = false;
+            audioOptionsVisible.value = false;
+          }
+        }, [createVNode("span", {
+          "class": bem$v("attachment-add-icon")
+        }, [createTextVNode("+")])]);
+      }
+      const addType = canTakePhoto ? "take" : "pick";
+      return createVNode("button", {
+        "type": "button",
+        "class": bem$v("attachment-add"),
+        "disabled": props.disabled,
+        "onClick": () => mediaPickAction("photo", addType)
+      }, [createVNode("span", {
+        "class": bem$v("attachment-add-icon")
+      }, [createTextVNode("+")])]);
+    };
     const genThumbnailMask = (media) => {
       const {
         status,
@@ -17085,12 +17137,45 @@ var stdin_default$D = defineComponent({
         default: () => [renderMediaThumbnail(media), renderMediaLabel(media), genThumbnailMask(media), deleteIcon]
       });
     });
+    const renderAttachmentDelete = (media, index2) => {
+      if (!media.deletable || media.status === "uploading") {
+        return;
+      }
+      return createVNode("button", {
+        "type": "button",
+        "class": bem$v("attachment-delete"),
+        "onClick": (event) => {
+          event.stopPropagation();
+          onDelete(media, index2);
+        }
+      }, [createTextVNode("×")]);
+    };
+    const renderAttachmentMedia = (media) => {
+      const index2 = props.mediaList.indexOf(media);
+      return createVNode("div", {
+        "key": media.uniqueCode,
+        "class": bem$v("attachment-item"),
+        "onClick": () => previewMedia(index2)
+      }, [renderMediaThumbnail(media), renderMediaLabel(media), genThumbnailMask(media), renderAttachmentDelete(media, index2)]);
+    };
+    const renderAttachmentPlaceholder = (media) => createVNode("div", {
+      "key": media.uniqueCode || media.fileName,
+      "class": bem$v("attachment-item")
+    }, [renderMediaThumbnail(media), renderMediaLabel(media), genThumbnailMask(media)]);
+    const renderAttachment = () => createVNode("div", {
+      "class": bem$v("attachment")
+    }, [createVNode("div", {
+      "class": bem$v("attachment-track")
+    }, [attachmentMediaList.value.map(renderAttachmentMedia), attachmentMediaListPlaceholder.value.map(renderAttachmentPlaceholder), renderAttachmentAdd()])]);
     const selectAction = (action) => {
       actionVisible.value = false;
+      photoOptionsVisible.value = false;
+      videoOptionsVisible.value = false;
+      audioOptionsVisible.value = false;
       action.func && action.func();
     };
-    watch(() => [props.sortable, props.mediaList.length], (_0) => __async$2(this, [_0], function* ([sortable, mediaCount]) {
-      if (!sortable || !mediaCount) {
+    watch(() => [props.sortable, props.mediaList.length, props.variant], (_0) => __async$2(this, [_0], function* ([sortable, mediaCount]) {
+      if (isAttachmentVariant.value || !sortable || !mediaCount) {
         destroySortable();
         return;
       }
@@ -17114,7 +17199,9 @@ var stdin_default$D = defineComponent({
       }, [props.title]);
       const showButtons = props.allowTakePhoto || props.allowPickPhoto || props.allowTakeVideo || props.allowPickVideo || props.allowTakeAudio || props.allowPickAudio || props.allowPickFile;
       return createVNode("div", {
-        "class": bem$v()
+        "class": bem$v({
+          attachment: isAttachmentVariant.value
+        })
       }, [title, hiddenInput(), createVNode(stdin_default$M, mergeProps({
         "show": mediaPlayerVisible.value,
         "onUpdate:show": ($event) => mediaPlayerVisible.value = $event,
@@ -17130,7 +17217,7 @@ var stdin_default$D = defineComponent({
         "teleport": "body",
         "close-on-click-action": true,
         "onSelect": selectAction
-      }, null), withDirectives(createVNode("div", {
+      }, null), isAttachmentVariant.value ? renderAttachment() : createVNode(Fragment, null, [withDirectives(createVNode("div", {
         "class": bem$v("line")
       }, [renderButtons(), slots["extend"] ? slots.extend() : ""]), [[vShow, showButtons]]), withDirectives(createVNode(stdin_default$Y, {
         "ref": gridRef,
@@ -17150,7 +17237,7 @@ var stdin_default$D = defineComponent({
         "class": bem$v("grid")
       }, {
         default: () => [renderMediaListPlaceholder()]
-      }), [[vShow, mediaListPlaceholder.value.length]])]);
+      }), [[vShow, mediaListPlaceholder.value.length]])])]);
     };
   }
 });
@@ -23862,7 +23949,7 @@ const Lazyload = {
     });
   }
 };
-const version = "3.1.87";
+const version = "3.1.89";
 function install(app) {
   const components = [
     ActionSheet,

package/lib/zartui.js

@@ -21480,6 +21480,7 @@ var __publicField = (obj, key, value) => {
     "m4a": /* @__PURE__ */ new Set(["mp4", "mp4a", "x-m4a"])
   };
   const mediaPickerProps = {
+    variant: makeStringProp("default"),
     sortable: {
       type: Boolean,
       default: false
@@ -21553,6 +21554,7 @@ var __publicField = (obj, key, value) => {
     }) {
       const videoOptionsVisible = vue.ref(false);
       const audioOptionsVisible = vue.ref(false);
+      const photoOptionsVisible = vue.ref(false);
       const actionVisible = vue.ref(false);
       const mediaPlayerVisible = vue.ref(false);
       const mediaTypeToPlay = vue.ref("file");
@@ -21567,7 +21569,10 @@ var __publicField = (obj, key, value) => {
       const gridRef = vue.ref();
       const mediaListPlaceholder = vue.ref([]);
       const sort = vue.ref();
-      const shouldIsolateSortableTouch = () => props.sortable && props.mediaList.length > 0;
+      const isAttachmentVariant = vue.computed(() => props.variant === "attachment");
+      const attachmentMediaList = vue.computed(() => props.mediaList.filter((media) => media.type === "photo"));
+      const attachmentMediaListPlaceholder = vue.computed(() => mediaListPlaceholder.value.filter((media) => media.type === "photo"));
+      const shouldIsolateSortableTouch = () => !isAttachmentVariant.value && props.sortable && props.mediaList.length > 0;
       const stopSortableTouchStartPropagation = (event) => {
         if (!shouldIsolateSortableTouch()) {
           return;
@@ -21583,7 +21588,7 @@ var __publicField = (obj, key, value) => {
       };
       const initSortable = () => __async$2(this, null, function* () {
         var _a;
-        if (sort.value || !props.sortable || !props.mediaList.length)
+        if (sort.value || isAttachmentVariant.value || !props.sortable || !props.mediaList.length)
           return;
         yield vue.nextTick();
         const gridEl = (_a = gridRef.value) == null ? void 0 : _a.$el;
@@ -21699,6 +21704,19 @@ var __publicField = (obj, key, value) => {
       };
       const imageList = vue.computed(() => props.mediaList.filter((media) => media.type === "photo"));
       const actionOptions = vue.computed(() => {
+        if (photoOptionsVisible.value) {
+          return [{
+            name: "拍照",
+            callback: () => {
+              mediaPickAction("photo", "take");
+            }
+          }, {
+            name: "照片",
+            callback: () => {
+              mediaPickAction("photo", "pick");
+            }
+          }];
+        }
         if (videoOptionsVisible.value) {
           return [{
             name: "拍摄",
@@ -22150,6 +22168,40 @@ var __publicField = (obj, key, value) => {
         }
         return buttons;
       };
+      const renderAttachmentAdd = () => {
+        const canTakePhoto = props.allowTakePhoto;
+        const canPickPhoto = props.allowPickPhoto;
+        if (!canTakePhoto && !canPickPhoto) {
+          return;
+        }
+        if (props.allowTakePhoto && props.allowPickPhoto) {
+          return vue.createVNode("button", {
+            "type": "button",
+            "class": bem$v("attachment-add"),
+            "disabled": props.disabled,
+            "onClick": () => {
+              if (props.disabled) {
+                return;
+              }
+              actionVisible.value = true;
+              photoOptionsVisible.value = true;
+              videoOptionsVisible.value = false;
+              audioOptionsVisible.value = false;
+            }
+          }, [vue.createVNode("span", {
+            "class": bem$v("attachment-add-icon")
+          }, [vue.createTextVNode("+")])]);
+        }
+        const addType = canTakePhoto ? "take" : "pick";
+        return vue.createVNode("button", {
+          "type": "button",
+          "class": bem$v("attachment-add"),
+          "disabled": props.disabled,
+          "onClick": () => mediaPickAction("photo", addType)
+        }, [vue.createVNode("span", {
+          "class": bem$v("attachment-add-icon")
+        }, [vue.createTextVNode("+")])]);
+      };
       const genThumbnailMask = (media) => {
         const {
           status,
@@ -22316,12 +22368,45 @@ var __publicField = (obj, key, value) => {
           default: () => [renderMediaThumbnail(media), renderMediaLabel(media), genThumbnailMask(media), deleteIcon]
         });
       });
+      const renderAttachmentDelete = (media, index2) => {
+        if (!media.deletable || media.status === "uploading") {
+          return;
+        }
+        return vue.createVNode("button", {
+          "type": "button",
+          "class": bem$v("attachment-delete"),
+          "onClick": (event) => {
+            event.stopPropagation();
+            onDelete(media, index2);
+          }
+        }, [vue.createTextVNode("×")]);
+      };
+      const renderAttachmentMedia = (media) => {
+        const index2 = props.mediaList.indexOf(media);
+        return vue.createVNode("div", {
+          "key": media.uniqueCode,
+          "class": bem$v("attachment-item"),
+          "onClick": () => previewMedia(index2)
+        }, [renderMediaThumbnail(media), renderMediaLabel(media), genThumbnailMask(media), renderAttachmentDelete(media, index2)]);
+      };
+      const renderAttachmentPlaceholder = (media) => vue.createVNode("div", {
+        "key": media.uniqueCode || media.fileName,
+        "class": bem$v("attachment-item")
+      }, [renderMediaThumbnail(media), renderMediaLabel(media), genThumbnailMask(media)]);
+      const renderAttachment = () => vue.createVNode("div", {
+        "class": bem$v("attachment")
+      }, [vue.createVNode("div", {
+        "class": bem$v("attachment-track")
+      }, [attachmentMediaList.value.map(renderAttachmentMedia), attachmentMediaListPlaceholder.value.map(renderAttachmentPlaceholder), renderAttachmentAdd()])]);
       const selectAction = (action) => {
         actionVisible.value = false;
+        photoOptionsVisible.value = false;
+        videoOptionsVisible.value = false;
+        audioOptionsVisible.value = false;
         action.func && action.func();
       };
-      vue.watch(() => [props.sortable, props.mediaList.length], (_0) => __async$2(this, [_0], function* ([sortable, mediaCount]) {
-        if (!sortable || !mediaCount) {
+      vue.watch(() => [props.sortable, props.mediaList.length, props.variant], (_0) => __async$2(this, [_0], function* ([sortable, mediaCount]) {
+        if (isAttachmentVariant.value || !sortable || !mediaCount) {
           destroySortable();
           return;
         }
@@ -22345,7 +22430,9 @@ var __publicField = (obj, key, value) => {
         }, [props.title]);
         const showButtons = props.allowTakePhoto || props.allowPickPhoto || props.allowTakeVideo || props.allowPickVideo || props.allowTakeAudio || props.allowPickAudio || props.allowPickFile;
         return vue.createVNode("div", {
-          "class": bem$v()
+          "class": bem$v({
+            attachment: isAttachmentVariant.value
+          })
         }, [title, hiddenInput(), vue.createVNode(stdin_default$M, vue.mergeProps({
           "show": mediaPlayerVisible.value,
           "onUpdate:show": ($event) => mediaPlayerVisible.value = $event,
@@ -22361,7 +22448,7 @@ var __publicField = (obj, key, value) => {
           "teleport": "body",
           "close-on-click-action": true,
           "onSelect": selectAction
-        }, null), vue.withDirectives(vue.createVNode("div", {
+        }, null), isAttachmentVariant.value ? renderAttachment() : vue.createVNode(vue.Fragment, null, [vue.withDirectives(vue.createVNode("div", {
           "class": bem$v("line")
         }, [renderButtons(), slots["extend"] ? slots.extend() : ""]), [[vue.vShow, showButtons]]), vue.withDirectives(vue.createVNode(stdin_default$Y, {
           "ref": gridRef,
@@ -22381,7 +22468,7 @@ var __publicField = (obj, key, value) => {
           "class": bem$v("grid")
         }, {
           default: () => [renderMediaListPlaceholder()]
-        }), [[vue.vShow, mediaListPlaceholder.value.length]])]);
+        }), [[vue.vShow, mediaListPlaceholder.value.length]])])]);
       };
     }
   });
@@ -31377,7 +31464,7 @@ var __publicField = (obj, key, value) => {
       });
     }
   };
-  const version = "3.1.87";
+  const version = "3.1.89";
   function install(app) {
     const components = [
       ActionSheet,