@webx-ui/module-media 0.6.2 → 0.7.0

package/dist/index.js

@@ -1,6 +1,6 @@
-import { defineComponent as S, useModel as A, ref as R, watch as G, openBlock as h, createBlock as T, unref as e, mergeModels as q, computed as z, resolveDirective as Ge, withCtx as b, createElementBlock as L, Fragment as ce, renderList as me, withDirectives as Ye, createCommentVNode as B, createVNode as g, createTextVNode as O, toDisplayString as U, isRef as ve, useTemplateRef as oe, onMounted as Fe, nextTick as Je, createElementVNode as V, withKeys as Qe, normalizeClass as pe, createSlots as We, inject as Ze, normalizeStyle as fe, mergeProps as ge } from "vue";
+import { defineComponent as S, useModel as A, ref as R, watch as G, openBlock as b, createBlock as T, unref as e, mergeModels as q, computed as z, resolveDirective as Ge, withCtx as w, createElementBlock as L, Fragment as ce, renderList as me, withDirectives as Ye, createCommentVNode as D, createVNode as g, createTextVNode as O, toDisplayString as U, isRef as ve, useTemplateRef as oe, onMounted as Fe, nextTick as Je, createElementVNode as V, withKeys as Qe, normalizeClass as pe, createSlots as We, inject as Ze, normalizeStyle as fe, mergeProps as ge } from "vue";
 import { useTranslate as H, useAdmin as se, useErrorText as et, adminKey as tt, WxListScreen as lt } from "@webx-ui/module-admin";
-import { WxTree as at, WxSelectionArea as it, WxFileCard as Le, WxEmpty as nt, toast as J, WxAction as D, WxInput as Z, WxDropdown as Ve, WxDropdownItem as Te, WxActions as le, useModal as ye, WxDialog as he, WxSelect as ot, WxSpace as be, WxButton as I, useElementWidth as st, createModal as ae, WxPagination as rt, WxDrawer as dt, confirm as ue, openImageEditor as ut, WxSortableList as ct, WxPopover as Re, WxPopconfirm as Be, WxImage as mt, WxCard as pt } from "@webx-ui/core";
+import { WxTree as at, WxSelectionArea as it, WxFileCard as Le, WxEmpty as nt, toast as J, WxAction as B, WxInput as Z, WxDropdown as Ve, WxDropdownItem as Te, WxActions as le, useModal as ye, WxDialog as he, WxSelect as ot, WxSpace as be, WxButton as I, useElementWidth as st, createModal as ae, WxPagination as rt, WxDrawer as dt, confirm as ue, openImageEditor as ut, WxSortableList as ct, WxPopover as Re, WxPopconfirm as De, WxImage as mt, WxCard as pt } from "@webx-ui/core";
 function we(a) {
   const i = `${a.apiPath}/media`, n = (l) => l.data;
   return {
@@ -67,7 +67,7 @@ function ft() {
   const a = document.cookie.split("; ").find((i) => i.startsWith("XSRF-TOKEN="));
   return a ? decodeURIComponent(a.slice(11)) : null;
 }
-function De(a) {
+function Be(a) {
   const i = ["B", "KB", "MB", "GB", "TB"];
   let n = a, l = 0;
   for (; n >= 1024 && l < i.length - 1; )
@@ -109,13 +109,13 @@ const ze = /* @__PURE__ */ S({
       const k = u.zone === "inside" ? u.target : u.parent;
       k && r("move", u.node.id, k.id);
     }
-    return (u, k) => (h(), T(e(at), {
+    return (u, k) => (b(), T(e(at), {
       selected: l.value,
-      "onUpdate:selected": k[0] || (k[0] = (w) => l.value = w),
+      "onUpdate:selected": k[0] || (k[0] = (h) => l.value = h),
       expanded: t.value,
-      "onUpdate:expanded": k[1] || (k[1] = (w) => t.value = w),
+      "onUpdate:expanded": k[1] || (k[1] = (h) => t.value = h),
       modelValue: v.value,
-      "onUpdate:modelValue": k[2] || (k[2] = (w) => v.value = w),
+      "onUpdate:modelValue": k[2] || (k[2] = (h) => v.value = h),
       class: "wx-media-tree",
       "node-key": "id",
       draggable: "",
@@ -159,47 +159,49 @@ const ze = /* @__PURE__ */ S({
     }
     return (y, s) => {
       const u = Ge("wx-select");
-      return a.files.length > 0 ? (h(), T(e(it), {
+      return a.files.length > 0 ? (b(), T(e(it), {
         key: 0,
         modelValue: l.value,
         "onUpdate:modelValue": s[0] || (s[0] = (k) => l.value = k),
         class: "wx-media-grid",
         multiple: !a.single
       }, {
-        default: b(({ isSelected: k }) => [
-          (h(!0), L(ce, null, me(a.files, (w) => Ye((h(), T(e(Le), {
-            key: w.id,
+        default: w(({ isSelected: k }) => [
+          (b(!0), L(ce, null, me(a.files, (h) => Ye((b(), T(e(Le), {
+            key: h.id,
             class: "wx-media-grid__card",
-            name: w.name,
-            url: w.url,
-            thumbnail: a.api.thumb(w, 320, 320) ?? void 0,
-            type: w.mime,
-            selected: k(w.id),
+            name: h.name,
+            url: h.url,
+            thumbnail: a.api.thumb(h, 320, 320) ?? void 0,
+            type: h.mime,
+            selected: k(h.id),
             renamable: "",
-            editable: w.editable,
+            editable: h.editable,
             removable: "",
             copyable: "",
             "actions-menu": "",
             "rename-label": e(d)("manager.rename"),
             "edit-label": e(d)("manager.edit"),
             "remove-label": e(d)("manager.delete"),
-            "remove-confirm-text": e(d)("dialogs.delete-file", { name: w.name }),
+            "remove-confirm-text": e(d)("dialogs.delete-file", { name: h.name }),
             "cancel-label": e(d)("manager.cancel"),
             "save-label": e(d)("manager.save"),
+            "download-url": h.source ?? h.url,
             "copy-label": e(d)("manager.copy-link"),
+            "download-label": e(d)("manager.download"),
             "copied-label": e(d)("manager.link-copied"),
-            onRename: (o) => r("rename", w, o),
-            onEdit: (o) => r("edit", w),
-            onRemove: (o) => r("remove", w),
+            onRename: (o) => r("rename", h, o),
+            onEdit: (o) => r("edit", h),
+            onRemove: (o) => r("remove", h),
             onCopy: t,
-            onCopyError: (o) => x(w),
-            onDblclick: (o) => r("open", w)
-          }, null, 8, ["name", "url", "thumbnail", "type", "selected", "editable", "rename-label", "edit-label", "remove-label", "remove-confirm-text", "cancel-label", "save-label", "copy-label", "copied-label", "onRename", "onEdit", "onRemove", "onCopyError", "onDblclick"])), [
-            [u, w.id]
+            onCopyError: (o) => x(h),
+            onDblclick: (o) => r("open", h)
+          }, null, 8, ["name", "url", "thumbnail", "type", "selected", "editable", "rename-label", "edit-label", "remove-label", "remove-confirm-text", "cancel-label", "save-label", "download-url", "copy-label", "download-label", "copied-label", "onRename", "onEdit", "onRemove", "onCopyError", "onDblclick"])), [
+            [u, h.id]
           ])), 128))
         ]),
         _: 1
-      }, 8, ["modelValue", "multiple"])) : (h(), T(e(nt), {
+      }, 8, ["modelValue", "multiple"])) : (b(), T(e(nt), {
         key: 1,
         description: v.value
       }, null, 8, ["description"]));
@@ -235,37 +237,37 @@ const ze = /* @__PURE__ */ S({
       { value: "name", label: t("manager.sort-name") },
       { value: "-size", label: t("manager.sort-size") }
     ]), s = z(() => x.value.find((k) => k.value === r.value)?.label ?? ""), u = z(() => y.value.find((k) => k.value === d.value)?.label ?? "");
-    return (k, w) => (h(), L("header", yt, [
-      a.compact ? (h(), T(e(D), {
+    return (k, h) => (b(), L("header", yt, [
+      a.compact ? (b(), T(e(B), {
         key: 0,
         icon: "sidebar",
         title: e(t)("manager.folders"),
         size: "sm",
-        onClick: w[0] || (w[0] = (o) => v("folders"))
-      }, null, 8, ["title"])) : B("", !0),
+        onClick: h[0] || (h[0] = (o) => v("folders"))
+      }, null, 8, ["title"])) : D("", !0),
       g(e(Z), {
         modelValue: l.value,
-        "onUpdate:modelValue": w[1] || (w[1] = (o) => l.value = o),
+        "onUpdate:modelValue": h[1] || (h[1] = (o) => l.value = o),
         class: "wx-media-toolbar__search",
         placeholder: e(t)("manager.search"),
         clearable: "",
         size: "sm"
       }, null, 8, ["modelValue", "placeholder"]),
-      a.fixedType ? B("", !0) : (h(), T(e(Ve), { key: 1 }, {
-        trigger: b(() => [
-          g(e(D), {
+      a.fixedType ? D("", !0) : (b(), T(e(Ve), { key: 1 }, {
+        trigger: w(() => [
+          g(e(B), {
             icon: "filter",
             title: `${e(t)("manager.all-types")}: ${s.value}`,
             size: "sm"
           }, null, 8, ["title"])
         ]),
-        default: b(() => [
-          (h(!0), L(ce, null, me(x.value, (o) => (h(), T(e(Te), {
+        default: w(() => [
+          (b(!0), L(ce, null, me(x.value, (o) => (b(), T(e(Te), {
             key: String(o.value),
             active: o.value === r.value,
             onClick: ($) => r.value = o.value
           }, {
-            default: b(() => [
+            default: w(() => [
               O(U(o.label), 1)
             ]),
             _: 2
@@ -274,20 +276,20 @@ const ze = /* @__PURE__ */ S({
         _: 1
       })),
       g(e(Ve), null, {
-        trigger: b(() => [
-          g(e(D), {
+        trigger: w(() => [
+          g(e(B), {
             icon: "arrow-down",
             title: u.value,
             size: "sm"
           }, null, 8, ["title"])
         ]),
-        default: b(() => [
-          (h(!0), L(ce, null, me(y.value, (o) => (h(), T(e(Te), {
+        default: w(() => [
+          (b(!0), L(ce, null, me(y.value, (o) => (b(), T(e(Te), {
             key: o.value,
             active: o.value === d.value,
             onClick: ($) => d.value = o.value
           }, {
-            default: b(() => [
+            default: w(() => [
               O(U(o.label), 1)
             ]),
             _: 2
@@ -295,33 +297,33 @@ const ze = /* @__PURE__ */ S({
         ]),
         _: 1
       }),
-      a.canUpload ? (h(), T(e(D), {
+      a.canUpload ? (b(), T(e(B), {
         key: 2,
         type: "upload",
         title: e(t)("manager.upload"),
         size: "sm",
-        onClick: w[2] || (w[2] = (o) => v("upload"))
-      }, null, 8, ["title"])) : B("", !0),
-      a.canManage ? (h(), T(e(le), {
+        onClick: h[2] || (h[2] = (o) => v("upload"))
+      }, null, 8, ["title"])) : D("", !0),
+      a.canManage ? (b(), T(e(le), {
         key: 3,
         size: "sm"
       }, {
-        default: b(() => [
-          g(e(D), {
+        default: w(() => [
+          g(e(B), {
             icon: "folder-move",
             title: e(t)("manager.move"),
             disabled: n.selected === 0,
-            onClick: w[3] || (w[3] = (o) => v("move"))
+            onClick: h[3] || (h[3] = (o) => v("move"))
           }, null, 8, ["title", "disabled"]),
-          g(e(D), {
+          g(e(B), {
             type: "remove",
             title: e(t)("manager.delete"),
             disabled: n.selected === 0,
-            onClick: w[4] || (w[4] = (o) => v("remove"))
+            onClick: h[4] || (h[4] = (o) => v("remove"))
           }, null, 8, ["title", "disabled"])
         ]),
         _: 1
-      })) : B("", !0)
+      })) : D("", !0)
     ]));
   }
 }), bt = /* @__PURE__ */ S({
@@ -345,20 +347,20 @@ const ze = /* @__PURE__ */ S({
         ...x(s.children ?? [])
       ]);
     }
-    return (y, s) => (h(), T(e(he), {
+    return (y, s) => (b(), T(e(he), {
       open: e(n),
       "onUpdate:open": s[3] || (s[3] = (u) => ve(n) ? n.value = u : null),
       title: e(d)("manager.move-to"),
       width: 420
     }, {
-      footer: b(() => [
+      footer: w(() => [
         g(e(be), { size: "sm" }, {
-          default: b(() => [
+          default: w(() => [
             g(e(I), {
               variant: "outline",
               onClick: s[1] || (s[1] = (u) => e(r)())
             }, {
-              default: b(() => [
+              default: w(() => [
                 O(U(e(d)("manager.cancel")), 1)
               ]),
               _: 1
@@ -368,7 +370,7 @@ const ze = /* @__PURE__ */ S({
               disabled: t.value === null,
               onClick: s[2] || (s[2] = (u) => e(l)(t.value))
             }, {
-              default: b(() => [
+              default: w(() => [
                 O(U(e(d)("manager.move")), 1)
               ]),
               _: 1
@@ -377,7 +379,7 @@ const ze = /* @__PURE__ */ S({
           _: 1
         })
       ]),
-      default: b(() => [
+      default: w(() => [
         g(e(ot), {
           modelValue: t.value,
           "onUpdate:modelValue": s[0] || (s[0] = (u) => t.value = u),
@@ -404,20 +406,20 @@ const ze = /* @__PURE__ */ S({
       const y = v.value.trim();
       y !== "" && l(y);
     }
-    return (y, s) => (h(), T(e(he), {
+    return (y, s) => (b(), T(e(he), {
       open: e(n),
       "onUpdate:open": s[2] || (s[2] = (u) => ve(n) ? n.value = u : null),
       title: a.title,
       width: 420
     }, {
-      footer: b(() => [
+      footer: w(() => [
         g(e(be), { size: "sm" }, {
-          default: b(() => [
+          default: w(() => [
             g(e(I), {
               variant: "outline",
               onClick: s[1] || (s[1] = (u) => e(r)())
             }, {
-              default: b(() => [
+              default: w(() => [
                 O(U(e(d)("manager.cancel")), 1)
               ]),
               _: 1
@@ -427,7 +429,7 @@ const ze = /* @__PURE__ */ S({
               disabled: v.value.trim() === "",
               onClick: x
             }, {
-              default: b(() => [
+              default: w(() => [
                 O(U(a.confirmText ?? e(d)("manager.save")), 1)
               ]),
               _: 1
@@ -436,7 +438,7 @@ const ze = /* @__PURE__ */ S({
           _: 1
         })
       ]),
-      default: b(() => [
+      default: w(() => [
         V("div", {
           ref_key: "input",
           ref: t
@@ -489,6 +491,7 @@ const ze = /* @__PURE__ */ S({
     folders: "Folders",
     edit: "Edit",
     "copy-link": "Copy the link",
+    download: "Download",
     "link-copied": "Link copied",
     "status-files": "Files: :count",
     "status-selected": "selected: :count",
@@ -632,7 +635,7 @@ const kt = {
         errorText: t("editor.error")
       };
     }
-    const s = oe("root"), u = st(s), k = z(() => u.value > 0 && u.value < 640), w = R([]), o = R(null), $ = R(null), F = R([]), K = R(""), X = A(a, "type");
+    const s = oe("root"), u = st(s), k = z(() => u.value > 0 && u.value < 640), h = R([]), o = R(null), $ = R(null), F = R([]), K = R(""), X = A(a, "type");
     l.accept && (X.value = l.accept), G(
       () => l.accept,
       (p) => {
@@ -656,7 +659,7 @@ const kt = {
       p || (j.value = !1);
     });
     async function c() {
-      w.value = await v.directories(), o.value ??= w.value[0]?.id ?? null, await m(1);
+      h.value = await v.directories(), o.value ??= h.value[0]?.id ?? null, await m(1);
     }
     async function m(p = $.value?.meta.current_page ?? 1) {
       ee.value = !0;
@@ -745,7 +748,7 @@ const kt = {
     const Ee = ae(bt);
     async function Pe() {
       const p = await Ee({
-        directories: w.value,
+        directories: h.value,
         from: o.value,
         count: F.value.length
       });
@@ -800,7 +803,7 @@ const kt = {
         }
         return null;
       };
-      return p === null ? null : f(w.value);
+      return p === null ? null : f(h.value);
     }
     function Xe(p) {
       const f = p?.body;
@@ -813,36 +816,36 @@ const kt = {
         clearTimeout(_), _ = setTimeout(p, f);
       };
     }
-    return (p, f) => (h(), L("div", {
+    return (p, f) => (b(), L("div", {
       ref_key: "root",
       ref: s,
       class: pe(["wx-media", { "wx-media--compact": k.value }])
     }, [
-      k.value ? B("", !0) : (h(), L("aside", kt, [
+      k.value ? D("", !0) : (b(), L("aside", kt, [
         g(ze, {
           selected: o.value,
           "onUpdate:selected": f[0] || (f[0] = (_) => o.value = _),
-          directories: w.value,
+          directories: h.value,
           onMove: Me
         }, null, 8, ["selected", "directories"]),
-        Q.value ? (h(), T(e(le), {
+        Q.value ? (b(), T(e(le), {
           key: 0,
           size: "sm",
           align: "start"
         }, {
-          default: b(() => [
-            g(e(D), {
+          default: w(() => [
+            g(e(B), {
               type: "add",
               title: e(t)("manager.new-folder"),
               onClick: $e
             }, null, 8, ["title"]),
-            g(e(D), {
+            g(e(B), {
               type: "edit",
               title: e(t)("manager.rename"),
               disabled: !E.value || E.value.is_root,
               onClick: _e
             }, null, 8, ["title", "disabled"]),
-            g(e(D), {
+            g(e(B), {
               type: "remove",
               title: e(t)("manager.delete"),
               disabled: !E.value || E.value.is_root,
@@ -850,7 +853,7 @@ const kt = {
             }, null, 8, ["title", "disabled"])
           ]),
           _: 1
-        })) : B("", !0)
+        })) : D("", !0)
       ])),
       V("section", $t, [
         g(ht, {
@@ -893,10 +896,10 @@ const kt = {
         }, null, 8, ["selected", "files", "api", "query", "single"]),
         V("footer", Ct, [
           V("span", null, U(e(t)("manager.status-files", { count: $.value?.stats.files ?? 0 })), 1),
-          F.value.length > 0 ? (h(), L("span", Mt, U(e(t)("manager.status-selected", { count: F.value.length })), 1)) : B("", !0),
-          V("span", null, U(e(t)("manager.status-size", { size: e(De)($.value?.stats.size ?? 0) })), 1)
+          F.value.length > 0 ? (b(), L("span", Mt, U(e(t)("manager.status-selected", { count: F.value.length })), 1)) : D("", !0),
+          V("span", null, U(e(t)("manager.status-size", { size: e(Be)($.value?.stats.size ?? 0) })), 1)
         ]),
-        $.value && $.value.meta.last_page > 1 ? (h(), T(e(rt), {
+        $.value && $.value.meta.last_page > 1 ? (b(), T(e(rt), {
           key: 0,
           page: $.value.meta.current_page,
           "per-page": $.value.meta.per_page,
@@ -905,7 +908,7 @@ const kt = {
           disabled: ee.value,
           size: "sm",
           onChange: f[6] || (f[6] = ({ page: _ }) => m(_))
-        }, null, 8, ["page", "per-page", "total", "last-page", "disabled"])) : B("", !0)
+        }, null, 8, ["page", "per-page", "total", "last-page", "disabled"])) : D("", !0)
       ]),
       g(e(dt), {
         open: j.value,
@@ -914,7 +917,7 @@ const kt = {
         title: e(t)("manager.folders"),
         size: 280
       }, {
-        default: b(() => [
+        default: w(() => [
           V("div", Vt, [
             g(ze, {
               selected: o.value,
@@ -922,27 +925,27 @@ const kt = {
                 f[7] || (f[7] = (_) => o.value = _),
                 f[8] || (f[8] = (_) => j.value = !1)
               ],
-              directories: w.value,
+              directories: h.value,
               onMove: Me
             }, null, 8, ["selected", "directories"]),
-            Q.value ? (h(), T(e(le), {
+            Q.value ? (b(), T(e(le), {
               key: 0,
               size: "sm",
               align: "start"
             }, {
-              default: b(() => [
-                g(e(D), {
+              default: w(() => [
+                g(e(B), {
                   type: "add",
                   title: e(t)("manager.new-folder"),
                   onClick: $e
                 }, null, 8, ["title"]),
-                g(e(D), {
+                g(e(B), {
                   type: "edit",
                   title: e(t)("manager.rename"),
                   disabled: !E.value || E.value.is_root,
                   onClick: _e
                 }, null, 8, ["title", "disabled"]),
-                g(e(D), {
+                g(e(B), {
                   type: "remove",
                   title: e(t)("manager.delete"),
                   disabled: !E.value || E.value.is_root,
@@ -950,7 +953,7 @@ const kt = {
                 }, null, 8, ["title", "disabled"])
               ]),
               _: 1
-            })) : B("", !0)
+            })) : D("", !0)
           ])
         ]),
         _: 1
@@ -971,13 +974,13 @@ const kt = {
   },
   setup(a) {
     const { open: i, resolve: n, dismiss: l } = ye(), r = H("webx-media"), d = R([]);
-    return (v, t) => (h(), T(e(he), {
+    return (v, t) => (b(), T(e(he), {
       open: e(i),
       "onUpdate:open": t[4] || (t[4] = (x) => ve(i) ? i.value = x : null),
       title: a.title ?? e(r)("module.title"),
       width: 960
     }, We({
-      default: b(() => [
+      default: w(() => [
         V("div", Tt, [
           g(Se, {
             picking: !a.manage,
@@ -993,15 +996,15 @@ const kt = {
     }, [
       a.multiple && !a.manage ? {
         name: "footer",
-        fn: b(() => [
+        fn: w(() => [
           g(e(be), { size: "sm" }, {
-            default: b(() => [
-              a.max !== null && a.max > 0 ? (h(), L("span", zt, U(e(r)("manager.chosen", { count: d.value.length, max: a.max })), 1)) : B("", !0),
+            default: w(() => [
+              a.max !== null && a.max > 0 ? (b(), L("span", zt, U(e(r)("manager.chosen", { count: d.value.length, max: a.max })), 1)) : D("", !0),
               g(e(I), {
                 variant: "outline",
                 onClick: t[2] || (t[2] = (x) => e(l)())
               }, {
-                default: b(() => [
+                default: w(() => [
                   O(U(e(r)("manager.cancel")), 1)
                 ]),
                 _: 1
@@ -1012,7 +1015,7 @@ const kt = {
                 disabled: d.value.length === 0,
                 onClick: t[3] || (t[3] = (x) => e(n)(d.value))
               }, {
-                default: b(() => [
+                default: w(() => [
                   O(U(e(r)("manager.pick", { count: d.value.length })), 1)
                 ]),
                 _: 1
@@ -1036,7 +1039,7 @@ const kt = {
 }, Rt = {
   key: 0,
   class: "wx-media-list__missing"
-}, Bt = { key: 1 }, Dt = {
+}, Dt = { key: 1 }, Bt = {
   key: 0,
   class: "wx-media-list__tools"
 }, St = { class: "wx-media-list__captions" }, Et = { class: "wx-media-list__caption" }, Pt = { class: "wx-media-list__caption" }, Ot = { class: "wx-media-list__captions-footer" }, At = { class: "wx-media-list__footer" }, Nt = {
@@ -1090,7 +1093,7 @@ const kt = {
       },
       { immediate: !0 }
     );
-    function w(c) {
+    function h(c) {
       s.value = { ...s.value, ...Object.fromEntries(c.map((m) => [m.path, m])) };
     }
     function o(c) {
@@ -1109,7 +1112,7 @@ const kt = {
     function X(c) {
       const m = o(c);
       if (!m) return "";
-      const M = De(m.size);
+      const M = Be(m.size);
       return m.width && m.height ? `${m.width}×${m.height} · ${M}` : M;
     }
     const N = R(null);
@@ -1129,7 +1132,7 @@ const kt = {
       if (i.disabled) return;
       const c = x.value === null ? null : x.value - t.value.length, m = await Ft({ accept: i.accept, max: c });
       if (!m || m.length === 0) return;
-      w(m);
+      h(m);
       const M = new Set(t.value.map((W) => W.path)), C = m.filter((W) => !M.has(W.path)).map((W) => ({ path: W.path }));
       t.value = i.single ? C.slice(0, 1) : [...t.value, ...C];
     }
@@ -1151,11 +1154,11 @@ const kt = {
       const c = t.value.length;
       return i.min && c < i.min ? l("field.at-least", { count: i.min }) : x.value === null ? "" : l("field.count", { count: c, max: x.value });
     });
-    return (c, m) => (h(), L("div", {
+    return (c, m) => (b(), L("div", {
       class: pe(["wx-media-list", [`wx-media-list--${a.layout}`, { "is-disabled": a.disabled }]]),
       style: fe(E.value)
     }, [
-      a.label ? (h(), L("span", Lt, U(a.label), 1)) : B("", !0),
+      a.label ? (b(), L("span", Lt, U(a.label), 1)) : D("", !0),
       g(e(ct), {
         modelValue: t.value,
         "onUpdate:modelValue": m[1] || (m[1] = (M) => t.value = M),
@@ -1167,7 +1170,7 @@ const kt = {
         "drag-label": e(l)("field.reorder"),
         "empty-text": e(l)("field.empty")
       }, {
-        default: b(({ item: M, index: C }) => [
+        default: w(({ item: M, index: C }) => [
           V("div", {
             class: pe(["wx-media-list__cell", { "is-broken": $(M), "is-busy": N.value === C }])
           }, [
@@ -1177,15 +1180,15 @@ const kt = {
               type: o(M)?.mime,
               size: a.layout === "rows" ? "sm" : "md"
             }, {
-              meta: b(() => [
-                $(M) ? (h(), L("span", Rt, U(e(l)("field.missing")), 1)) : (h(), L("span", Bt, U(X(M)), 1))
+              meta: w(() => [
+                $(M) ? (b(), L("span", Rt, U(e(l)("field.missing")), 1)) : (b(), L("span", Dt, U(X(M)), 1))
               ]),
               _: 2
             }, 1032, ["name", "thumbnail", "type", "size"]),
-            a.disabled ? B("", !0) : (h(), L("div", Dt, [
+            a.disabled ? D("", !0) : (b(), L("div", Bt, [
               g(e(le), { size: "sm" }, {
-                default: b(() => [
-                  a.captions ? (h(), T(e(Re), {
+                default: w(() => [
+                  a.captions ? (b(), T(e(Re), {
                     key: 0,
                     open: N.value === C,
                     title: e(l)("field.captions"),
@@ -1194,13 +1197,13 @@ const kt = {
                     teleport: "",
                     "onUpdate:open": (W) => N.value = W ? C : null
                   }, {
-                    trigger: b(() => [
-                      g(e(D), {
+                    trigger: w(() => [
+                      g(e(B), {
                         type: "edit",
                         title: e(l)("field.captions")
                       }, null, 8, ["title"])
                     ]),
-                    default: b(() => [
+                    default: w(() => [
                       V("div", St, [
                         V("div", Et, [
                           m[2] || (m[2] = V("span", { class: "wx-media-list__caption-label" }, "alt", -1)),
@@ -1226,7 +1229,7 @@ const kt = {
                             type: "primary",
                             onClick: m[0] || (m[0] = (W) => N.value = null)
                           }, {
-                            default: b(() => [
+                            default: w(() => [
                               O(U(e(l)("manager.save")), 1)
                             ]),
                             _: 1
@@ -1235,14 +1238,14 @@ const kt = {
                       ])
                     ]),
                     _: 2
-                  }, 1032, ["open", "title", "onUpdate:open"])) : B("", !0),
-                  $(M) ? B("", !0) : (h(), T(e(D), {
+                  }, 1032, ["open", "title", "onUpdate:open"])) : D("", !0),
+                  $(M) ? D("", !0) : (b(), T(e(B), {
                     key: 1,
                     type: "goto",
                     title: e(l)("field.open"),
                     onClick: (W) => de(M)
                   }, null, 8, ["title", "onClick"])),
-                  g(e(Be), {
+                  g(e(De), {
                     title: e(l)("field.remove-title"),
                     description: e(l)("field.remove-text"),
                     "confirm-text": e(l)("field.remove-confirm"),
@@ -1251,8 +1254,8 @@ const kt = {
                     side: "top",
                     onConfirm: (W) => Q(C)
                   }, {
-                    trigger: b(() => [
-                      g(e(D), {
+                    trigger: w(() => [
+                      g(e(B), {
                         type: "remove",
                         title: e(l)("field.remove-confirm")
                       }, null, 8, ["title"])
@@ -1274,12 +1277,12 @@ const kt = {
           disabled: a.disabled || y.value,
           onClick: ie
         }, {
-          default: b(() => [
+          default: w(() => [
             O(U(e(l)("field.add")), 1)
           ]),
           _: 1
         }, 8, ["disabled"]),
-        ne.value ? (h(), L("span", Nt, U(ne.value), 1)) : B("", !0)
+        ne.value ? (b(), L("span", Nt, U(ne.value), 1)) : D("", !0)
       ])
     ], 6));
   }
@@ -1299,7 +1302,7 @@ const kt = {
         i.value = l[0] ?? null;
       }
     });
-    return (l, r) => (h(), T(ke, ge(l.$attrs, {
+    return (l, r) => (b(), T(ke, ge(l.$attrs, {
       modelValue: n.value,
       "onUpdate:modelValue": r[0] || (r[0] = (d) => n.value = d),
       layout: "rows",
@@ -1317,7 +1320,7 @@ const kt = {
   emits: ["update:modelValue"],
   setup(a) {
     const i = A(a, "modelValue");
-    return (n, l) => (h(), T(ke, ge(n.$attrs, {
+    return (n, l) => (b(), T(ke, ge(n.$attrs, {
       modelValue: i.value,
       "onUpdate:modelValue": l[0] || (l[0] = (r) => i.value = r),
       layout: "rows"
@@ -1334,7 +1337,7 @@ const kt = {
   emits: ["update:modelValue"],
   setup(a) {
     const i = A(a, "modelValue");
-    return (n, l) => (h(), T(ke, ge(n.$attrs, {
+    return (n, l) => (b(), T(ke, ge(n.$attrs, {
       modelValue: i.value,
       "onUpdate:modelValue": l[0] || (l[0] = (r) => i.value = r),
       layout: "grid",
@@ -1396,14 +1399,14 @@ const kt = {
     async function k() {
       if (i.disabled) return;
       const o = await Ut({ accept: i.accept });
-      o && (n.value = { ...n.value, path: o.path, url: o.url });
+      o && (t.value = { ...t.value, [o.path]: o.url }, n.value = { ...n.value, path: o.path, url: o.url });
     }
-    function w() {
+    function h() {
       n.value = null, v.value = !1;
     }
-    return (o, $) => (h(), L("div", Xt, [
-      a.label ? (h(), L("span", Kt, U(a.label), 1)) : B("", !0),
-      n.value ? (h(), L("div", {
+    return (o, $) => (b(), L("div", Xt, [
+      a.label ? (b(), L("span", Kt, U(a.label), 1)) : D("", !0),
+      n.value ? (b(), L("div", {
         key: 2,
         class: "wx-media-field__frame",
         style: fe(y.value)
@@ -1415,18 +1418,18 @@ const kt = {
           title: e(l)("field.replace"),
           onClick: k
         }, [
-          x.value ? (h(), T(e(mt), {
+          x.value ? (b(), T(e(mt), {
             key: 0,
             src: x.value,
             fit: "contain",
             width: "100%",
             height: "100%"
-          }, null, 8, ["src"])) : (h(), L("span", Yt, U(e(l)("field.no-preview")), 1))
+          }, null, 8, ["src"])) : (b(), L("span", Yt, U(e(l)("field.no-preview")), 1))
         ], 8, Gt),
-        a.disabled ? B("", !0) : (h(), L("div", Jt, [
+        a.disabled ? D("", !0) : (b(), L("div", Jt, [
           g(e(le), { size: "sm" }, {
-            default: b(() => [
-              a.captions ? (h(), T(e(Re), {
+            default: w(() => [
+              a.captions ? (b(), T(e(Re), {
                 key: 0,
                 open: v.value,
                 "onUpdate:open": $[3] || ($[3] = (F) => v.value = F),
@@ -1435,13 +1438,13 @@ const kt = {
                 side: "top",
                 teleport: ""
               }, {
-                trigger: b(() => [
-                  g(e(D), {
+                trigger: w(() => [
+                  g(e(B), {
                     type: "edit",
                     title: e(l)("field.edit")
                   }, null, 8, ["title"])
                 ]),
-                default: b(() => [
+                default: w(() => [
                   V("div", Qt, [
                     V("div", Zt, [
                       $[4] || ($[4] = V("label", {
@@ -1475,7 +1478,7 @@ const kt = {
                         type: "primary",
                         onClick: $[2] || ($[2] = (F) => v.value = !1)
                       }, {
-                        default: b(() => [
+                        default: w(() => [
                           O(U(e(l)("manager.save")), 1)
                         ]),
                         _: 1
@@ -1484,18 +1487,18 @@ const kt = {
                   ])
                 ]),
                 _: 1
-              }, 8, ["open", "title"])) : B("", !0),
-              g(e(Be), {
+              }, 8, ["open", "title"])) : D("", !0),
+              g(e(De), {
                 title: e(l)("field.clear-title"),
                 description: e(l)("field.clear-text"),
                 "confirm-text": e(l)("field.clear-confirm"),
                 "cancel-text": e(l)("manager.cancel"),
                 "confirm-type": "danger",
                 side: "top",
-                onConfirm: w
+                onConfirm: h
               }, {
-                trigger: b(() => [
-                  g(e(D), {
+                trigger: w(() => [
+                  g(e(B), {
                     type: "remove",
                     title: e(l)("field.clear-confirm")
                   }, null, 8, ["title"])
@@ -1506,7 +1509,7 @@ const kt = {
             _: 1
           })
         ]))
-      ], 4)) : (h(), L("div", {
+      ], 4)) : (b(), L("div", {
         key: 1,
         class: "wx-media-field__frame is-empty",
         style: fe(y.value)
@@ -1534,7 +1537,7 @@ const kt = {
         label: n(`manager.${y}`)
       }))
     ]);
-    return (y, s) => (h(), T(e(lt), {
+    return (y, s) => (b(), T(e(lt), {
       view: r.value,
       "onUpdate:view": s[1] || (s[1] = (u) => r.value = u),
       title: t.value,
@@ -1542,12 +1545,12 @@ const kt = {
       card: !1,
       fill: ""
     }, We({
-      default: b(() => [
+      default: w(() => [
         g(e(pt), {
           class: "wx-media-page",
           padding: "md"
         }, {
-          default: b(() => [
+          default: w(() => [
             g(Se, {
               ref_key: "manager",
               ref: l,
@@ -1562,13 +1565,13 @@ const kt = {
     }, [
       v.value ? {
         name: "actions",
-        fn: b(() => [
+        fn: w(() => [
           g(e(I), {
             type: "primary",
             icon: "upload",
             onClick: s[0] || (s[0] = (u) => l.value?.upload())
           }, {
-            default: b(() => [
+            default: w(() => [
               O(U(e(n)("manager.upload")), 1)
             ]),
             _: 1