@webx-ui/module-media 0.3.0 → 0.4.0

package/dist/index.js

@@ -1,7 +1,7 @@
-import { defineComponent as E, useModel as A, ref as M, watch as q, openBlock as b, createBlock as k, unref as e, mergeModels as F, computed as W, resolveDirective as Pe, withCtx as w, createElementBlock as z, Fragment as Q, renderList as Z, withDirectives as Oe, createCommentVNode as L, createVNode as h, createTextVNode as S, toDisplayString as D, isRef as te, useTemplateRef as ee, onMounted as he, nextTick as qe, createElementVNode as $, withKeys as Ne, normalizeClass as Ae, normalizeStyle as me } from "vue";
-import { WxTree as He, WxSelectionArea as Xe, WxFileCard as Ie, WxEmpty as Ke, toast as N, WxAction as T, WxInput as j, WxDropdown as pe, WxDropdownItem as fe, WxActions as G, useModal as ae, WxDialog as le, WxSelect as je, WxSpace as be, WxButton as X, useElementWidth as Ge, createModal as Y, WxPagination as Ye, WxDrawer as Je, confirm as ve, openImageEditor as Qe, WxCard as Ze, WxImage as et, WxPopover as tt, WxPopconfirm as at } from "@webx-ui/core";
+import { defineComponent as S, useModel as A, ref as M, watch as q, openBlock as b, createBlock as $, unref as e, mergeModels as F, computed as D, resolveDirective as Pe, withCtx as w, createElementBlock as W, Fragment as Q, renderList as Z, withDirectives as Oe, createCommentVNode as U, createVNode as h, createTextVNode as P, toDisplayString as L, isRef as te, useTemplateRef as ee, onMounted as he, nextTick as qe, createElementVNode as _, withKeys as Ne, normalizeClass as Ae, normalizeStyle as me } from "vue";
+import { WxTree as He, WxSelectionArea as Ie, WxFileCard as Xe, WxEmpty as Ke, toast as N, WxAction as T, WxInput as j, WxDropdown as pe, WxDropdownItem as fe, WxActions as G, useModal as ae, WxDialog as le, WxSelect as je, WxSpace as be, WxButton as I, useElementWidth as Ge, createModal as Y, WxPagination as Ye, WxDrawer as Je, confirm as ve, openImageEditor as Qe, WxCard as Ze, WxImage as et, WxPopover as tt, WxPopconfirm as at } from "@webx-ui/core";
 import { useTranslate as B, useAdmin as ie } from "@webx-ui/admin";
-const ge = /* @__PURE__ */ E({
+const ge = /* @__PURE__ */ S({
   __name: "DirectoryTree",
   props: /* @__PURE__ */ F({
     directories: {}
@@ -10,36 +10,36 @@ const ge = /* @__PURE__ */ E({
     selectedModifiers: {}
   }),
   emits: /* @__PURE__ */ F(["move"], ["update:selected"]),
-  setup(a, { emit: c }) {
-    const m = a, l = A(a, "selected"), f = c, o = B("webx-media"), t = M([]), p = M([]);
+  setup(a, { emit: d }) {
+    const m = a, l = A(a, "selected"), v = d, i = B("webx-media"), t = M([]), p = M([]);
     q(
       () => m.directories,
-      (r) => {
-        t.value = r.map(x), p.value = g(r);
+      (n) => {
+        t.value = n.map(k), p.value = g(n);
       },
       { immediate: !0, deep: !0 }
     );
-    function x(r) {
+    function k(n) {
       return {
-        ...r,
-        label: r.is_root ? o("manager.root") : r.title,
-        children: (r.children ?? []).map(x)
+        ...n,
+        label: n.is_root ? i("manager.root") : n.title,
+        children: (n.children ?? []).map(k)
       };
     }
-    function g(r) {
-      return r.flatMap((v) => [v.id, ...g(v.children ?? [])]);
+    function g(n) {
+      return n.flatMap((f) => [f.id, ...g(f.children ?? [])]);
     }
-    function u(r) {
-      const v = r.zone === "inside" ? r.target : r.parent;
-      v && f("move", r.node.id, v.id);
+    function u(n) {
+      const f = n.zone === "inside" ? n.target : n.parent;
+      f && v("move", n.node.id, f.id);
     }
-    return (r, v) => (b(), k(e(He), {
+    return (n, f) => (b(), $(e(He), {
       selected: l.value,
-      "onUpdate:selected": v[0] || (v[0] = (i) => l.value = i),
+      "onUpdate:selected": f[0] || (f[0] = (c) => l.value = c),
       expanded: p.value,
-      "onUpdate:expanded": v[1] || (v[1] = (i) => p.value = i),
+      "onUpdate:expanded": f[1] || (f[1] = (c) => p.value = c),
       modelValue: t.value,
-      "onUpdate:modelValue": v[2] || (v[2] = (i) => t.value = i),
+      "onUpdate:modelValue": f[2] || (f[2] = (c) => t.value = c),
       class: "wx-media-tree",
       "node-key": "id",
       draggable: "",
@@ -47,7 +47,7 @@ const ge = /* @__PURE__ */ E({
       onDrop: u
     }, null, 8, ["selected", "expanded", "modelValue"]));
   }
-}), lt = /* @__PURE__ */ E({
+}), lt = /* @__PURE__ */ S({
   __name: "FileGrid",
   props: /* @__PURE__ */ F({
     files: {},
@@ -59,76 +59,76 @@ const ge = /* @__PURE__ */ E({
     selectedModifiers: {}
   }),
   emits: /* @__PURE__ */ F(["open", "rename", "edit", "remove"], ["update:selected"]),
-  setup(a, { emit: c }) {
-    const m = a, l = A(a, "selected"), f = c, o = B("webx-media"), t = W(
-      () => m.query ? o("manager.empty-search", { query: m.query }) : o("manager.empty")
+  setup(a, { emit: d }) {
+    const m = a, l = A(a, "selected"), v = d, i = B("webx-media"), t = D(
+      () => m.query ? i("manager.empty-search", { query: m.query }) : i("manager.empty")
     );
     function p() {
-      N.success(o("manager.link-copied"));
+      N.success(i("manager.link-copied"));
     }
-    function x(g) {
+    function k(g) {
       const u = document.createElement("textarea");
       u.value = g.url, u.setAttribute("readonly", ""), u.style.position = "fixed", u.style.opacity = "0", document.body.appendChild(u), u.select();
-      let r = !1;
+      let n = !1;
       try {
-        r = document.execCommand("copy");
+        n = document.execCommand("copy");
       } catch {
-        r = !1;
+        n = !1;
       }
-      if (u.remove(), r) {
+      if (u.remove(), n) {
         p();
         return;
       }
-      N.danger(`${o("errors.copy")} ${g.url}`, { duration: 0 });
+      N.danger(`${i("errors.copy")} ${g.url}`, { duration: 0 });
     }
     return (g, u) => {
-      const r = Pe("wx-select");
-      return a.files.length > 0 ? (b(), k(e(Xe), {
+      const n = Pe("wx-select");
+      return a.files.length > 0 ? (b(), $(e(Ie), {
         key: 0,
         modelValue: l.value,
-        "onUpdate:modelValue": u[0] || (u[0] = (v) => l.value = v),
+        "onUpdate:modelValue": u[0] || (u[0] = (f) => l.value = f),
         class: "wx-media-grid",
         multiple: !a.single
       }, {
-        default: w(({ isSelected: v }) => [
-          (b(!0), z(Q, null, Z(a.files, (i) => Oe((b(), k(e(Ie), {
-            key: i.id,
+        default: w(({ isSelected: f }) => [
+          (b(!0), W(Q, null, Z(a.files, (c) => Oe((b(), $(e(Xe), {
+            key: c.id,
             class: "wx-media-grid__card",
-            name: i.name,
-            url: i.url,
-            thumbnail: a.api.thumb(i, 320, 320) ?? void 0,
-            type: i.mime,
-            selected: v(i.id),
+            name: c.name,
+            url: c.url,
+            thumbnail: a.api.thumb(c, 320, 320) ?? void 0,
+            type: c.mime,
+            selected: f(c.id),
             renamable: "",
-            editable: i.editable,
+            editable: c.editable,
             removable: "",
             copyable: "",
-            "rename-label": e(o)("manager.rename"),
-            "edit-label": e(o)("manager.edit"),
-            "remove-label": e(o)("manager.delete"),
-            "remove-confirm-text": e(o)("dialogs.delete-file", { name: i.name }),
-            "cancel-label": e(o)("manager.cancel"),
-            "save-label": e(o)("manager.save"),
-            "copy-label": e(o)("manager.copy-link"),
-            "copied-label": e(o)("manager.link-copied"),
-            onRename: (d) => f("rename", i, d),
-            onEdit: (d) => f("edit", i),
-            onRemove: (d) => f("remove", i),
+            "rename-label": e(i)("manager.rename"),
+            "edit-label": e(i)("manager.edit"),
+            "remove-label": e(i)("manager.delete"),
+            "remove-confirm-text": e(i)("dialogs.delete-file", { name: c.name }),
+            "cancel-label": e(i)("manager.cancel"),
+            "save-label": e(i)("manager.save"),
+            "copy-label": e(i)("manager.copy-link"),
+            "copied-label": e(i)("manager.link-copied"),
+            onRename: (s) => v("rename", c, s),
+            onEdit: (s) => v("edit", c),
+            onRemove: (s) => v("remove", c),
             onCopy: p,
-            onCopyError: (d) => x(i),
-            onDblclick: (d) => f("open", i)
+            onCopyError: (s) => k(c),
+            onDblclick: (s) => v("open", c)
           }, 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"])), [
-            [r, i.id]
+            [n, c.id]
           ])), 128))
         ]),
         _: 1
-      }, 8, ["modelValue", "multiple"])) : (b(), k(e(Ke), {
+      }, 8, ["modelValue", "multiple"])) : (b(), $(e(Ke), {
         key: 1,
         description: t.value
       }, null, 8, ["description"]));
     };
   }
-}), it = { class: "wx-media-toolbar" }, ot = /* @__PURE__ */ E({
+}), it = { class: "wx-media-toolbar" }, ot = /* @__PURE__ */ S({
   __name: "MediaToolbar",
   props: /* @__PURE__ */ F({
     canUpload: { type: Boolean },
@@ -145,36 +145,36 @@ const ge = /* @__PURE__ */ E({
     sortModifiers: {}
   }),
   emits: /* @__PURE__ */ F(["upload", "move", "remove", "folders"], ["update:search", "update:type", "update:sort"]),
-  setup(a, { emit: c }) {
-    const m = a, l = A(a, "search"), f = A(a, "type"), o = A(a, "sort"), t = c, p = B("webx-media"), x = W(() => [
+  setup(a, { emit: d }) {
+    const m = a, l = A(a, "search"), v = A(a, "type"), i = A(a, "sort"), t = d, p = B("webx-media"), k = D(() => [
       { value: "all", label: p("manager.all-types") },
-      ...["image", "video", "audio", "document", "other"].map((v) => ({
-        value: v,
-        label: p(`manager.${v}`)
+      ...["image", "video", "audio", "document", "other"].map((f) => ({
+        value: f,
+        label: p(`manager.${f}`)
       }))
-    ]), g = W(() => [
+    ]), g = D(() => [
       { value: "-created_at", label: p("manager.sort-newest") },
       { value: "created_at", label: p("manager.sort-oldest") },
       { value: "name", label: p("manager.sort-name") },
       { value: "-size", label: p("manager.sort-size") }
-    ]), u = W(() => x.value.find((v) => v.value === f.value)?.label ?? ""), r = W(() => g.value.find((v) => v.value === o.value)?.label ?? "");
-    return (v, i) => (b(), z("header", it, [
-      a.compact ? (b(), k(e(T), {
+    ]), u = D(() => k.value.find((f) => f.value === v.value)?.label ?? ""), n = D(() => g.value.find((f) => f.value === i.value)?.label ?? "");
+    return (f, c) => (b(), W("header", it, [
+      a.compact ? (b(), $(e(T), {
         key: 0,
         icon: "folder",
         title: e(p)("manager.folders"),
         size: "sm",
-        onClick: i[0] || (i[0] = (d) => t("folders"))
-      }, null, 8, ["title"])) : L("", !0),
+        onClick: c[0] || (c[0] = (s) => t("folders"))
+      }, null, 8, ["title"])) : U("", !0),
       h(e(j), {
         modelValue: l.value,
-        "onUpdate:modelValue": i[1] || (i[1] = (d) => l.value = d),
+        "onUpdate:modelValue": c[1] || (c[1] = (s) => l.value = s),
         class: "wx-media-toolbar__search",
         placeholder: e(p)("manager.search"),
         clearable: "",
         size: "sm"
       }, null, 8, ["modelValue", "placeholder"]),
-      a.fixedType ? L("", !0) : (b(), k(e(pe), { key: 1 }, {
+      a.fixedType ? U("", !0) : (b(), $(e(pe), { key: 1 }, {
         trigger: w(() => [
           h(e(T), {
             icon: "filter",
@@ -183,13 +183,13 @@ const ge = /* @__PURE__ */ E({
           }, null, 8, ["title"])
         ]),
         default: w(() => [
-          (b(!0), z(Q, null, Z(x.value, (d) => (b(), k(e(fe), {
-            key: String(d.value),
-            active: d.value === f.value,
-            onClick: (_) => f.value = d.value
+          (b(!0), W(Q, null, Z(k.value, (s) => (b(), $(e(fe), {
+            key: String(s.value),
+            active: s.value === v.value,
+            onClick: (x) => v.value = s.value
           }, {
             default: w(() => [
-              S(D(d.label), 1)
+              P(L(s.label), 1)
             ]),
             _: 2
           }, 1032, ["active", "onClick"]))), 128))
@@ -200,32 +200,32 @@ const ge = /* @__PURE__ */ E({
         trigger: w(() => [
           h(e(T), {
             icon: "arrow-down",
-            title: r.value,
+            title: n.value,
             size: "sm"
           }, null, 8, ["title"])
         ]),
         default: w(() => [
-          (b(!0), z(Q, null, Z(g.value, (d) => (b(), k(e(fe), {
-            key: d.value,
-            active: d.value === o.value,
-            onClick: (_) => o.value = d.value
+          (b(!0), W(Q, null, Z(g.value, (s) => (b(), $(e(fe), {
+            key: s.value,
+            active: s.value === i.value,
+            onClick: (x) => i.value = s.value
           }, {
             default: w(() => [
-              S(D(d.label), 1)
+              P(L(s.label), 1)
             ]),
             _: 2
           }, 1032, ["active", "onClick"]))), 128))
         ]),
         _: 1
       }),
-      a.canUpload ? (b(), k(e(T), {
+      a.canUpload ? (b(), $(e(T), {
         key: 2,
         type: "upload",
         title: e(p)("manager.upload"),
         size: "sm",
-        onClick: i[2] || (i[2] = (d) => t("upload"))
-      }, null, 8, ["title"])) : L("", !0),
-      a.canManage ? (b(), k(e(G), {
+        onClick: c[2] || (c[2] = (s) => t("upload"))
+      }, null, 8, ["title"])) : U("", !0),
+      a.canManage ? (b(), $(e(G), {
         key: 3,
         size: "sm"
       }, {
@@ -234,20 +234,20 @@ const ge = /* @__PURE__ */ E({
             icon: "folder",
             title: e(p)("manager.move"),
             disabled: m.selected === 0,
-            onClick: i[3] || (i[3] = (d) => t("move"))
+            onClick: c[3] || (c[3] = (s) => t("move"))
           }, null, 8, ["title", "disabled"]),
           h(e(T), {
             type: "remove",
             title: e(p)("manager.delete"),
             disabled: m.selected === 0,
-            onClick: i[4] || (i[4] = (d) => t("remove"))
+            onClick: c[4] || (c[4] = (s) => t("remove"))
           }, null, 8, ["title", "disabled"])
         ]),
         _: 1
-      })) : L("", !0)
+      })) : U("", !0)
     ]));
   }
-}), nt = /* @__PURE__ */ E({
+}), nt = /* @__PURE__ */ S({
   __name: "MoveDialog",
   props: {
     directories: {},
@@ -255,44 +255,44 @@ const ge = /* @__PURE__ */ E({
     count: {}
   },
   setup(a) {
-    const c = a, { open: m, resolve: l, dismiss: f } = ae(), o = B("webx-media"), t = W(
-      () => x(c.directories).filter((g) => g.value !== c.from)
+    const d = a, { open: m, resolve: l, dismiss: v } = ae(), i = B("webx-media"), t = D(
+      () => k(d.directories).filter((g) => g.value !== d.from)
     ), p = M(t.value[0]?.value ?? null);
-    function x(g) {
+    function k(g) {
       return g.flatMap((u) => [
         {
           value: u.id,
           // Indented, so the tree is still readable once it is a flat list.
-          label: " ".repeat(u.depth * 3) + (u.is_root ? o("manager.root") : u.title)
+          label: " ".repeat(u.depth * 3) + (u.is_root ? i("manager.root") : u.title)
         },
-        ...x(u.children ?? [])
+        ...k(u.children ?? [])
       ]);
     }
-    return (g, u) => (b(), k(e(le), {
+    return (g, u) => (b(), $(e(le), {
       open: e(m),
-      "onUpdate:open": u[3] || (u[3] = (r) => te(m) ? m.value = r : null),
-      title: e(o)("manager.move-to"),
+      "onUpdate:open": u[3] || (u[3] = (n) => te(m) ? m.value = n : null),
+      title: e(i)("manager.move-to"),
       width: 420
     }, {
       footer: w(() => [
         h(e(be), { size: "sm" }, {
           default: w(() => [
-            h(e(X), {
+            h(e(I), {
               variant: "outline",
-              onClick: u[1] || (u[1] = (r) => e(f)())
+              onClick: u[1] || (u[1] = (n) => e(v)())
             }, {
               default: w(() => [
-                S(D(e(o)("manager.cancel")), 1)
+                P(L(e(i)("manager.cancel")), 1)
               ]),
               _: 1
             }),
-            h(e(X), {
+            h(e(I), {
               type: "primary",
               disabled: p.value === null,
-              onClick: u[2] || (u[2] = (r) => e(l)(p.value))
+              onClick: u[2] || (u[2] = (n) => e(l)(p.value))
             }, {
               default: w(() => [
-                S(D(e(o)("manager.move")), 1)
+                P(L(e(i)("manager.move")), 1)
               ]),
               _: 1
             }, 8, ["disabled"])
@@ -303,14 +303,14 @@ const ge = /* @__PURE__ */ E({
       default: w(() => [
         h(e(je), {
           modelValue: p.value,
-          "onUpdate:modelValue": u[0] || (u[0] = (r) => p.value = r),
+          "onUpdate:modelValue": u[0] || (u[0] = (n) => p.value = n),
           options: t.value
         }, null, 8, ["modelValue", "options"])
       ]),
       _: 1
     }, 8, ["open", "title"]));
   }
-}), rt = /* @__PURE__ */ E({
+}), rt = /* @__PURE__ */ S({
   __name: "NameDialog",
   props: {
     title: {},
@@ -319,39 +319,39 @@ const ge = /* @__PURE__ */ E({
     confirmText: { default: void 0 }
   },
   setup(a) {
-    const c = a, { open: m, resolve: l, dismiss: f } = ae(), o = B("webx-media"), t = M(c.value), p = ee("input");
+    const d = a, { open: m, resolve: l, dismiss: v } = ae(), i = B("webx-media"), t = M(d.value), p = ee("input");
     he(async () => {
       await qe(), p.value?.querySelector("input")?.focus();
     });
-    function x() {
+    function k() {
       const g = t.value.trim();
       g !== "" && l(g);
     }
-    return (g, u) => (b(), k(e(le), {
+    return (g, u) => (b(), $(e(le), {
       open: e(m),
-      "onUpdate:open": u[2] || (u[2] = (r) => te(m) ? m.value = r : null),
+      "onUpdate:open": u[2] || (u[2] = (n) => te(m) ? m.value = n : null),
       title: a.title,
       width: 420
     }, {
       footer: w(() => [
         h(e(be), { size: "sm" }, {
           default: w(() => [
-            h(e(X), {
+            h(e(I), {
               variant: "outline",
-              onClick: u[1] || (u[1] = (r) => e(f)())
+              onClick: u[1] || (u[1] = (n) => e(v)())
             }, {
               default: w(() => [
-                S(D(e(o)("manager.cancel")), 1)
+                P(L(e(i)("manager.cancel")), 1)
               ]),
               _: 1
             }),
-            h(e(X), {
+            h(e(I), {
               type: "primary",
               disabled: t.value.trim() === "",
-              onClick: x
+              onClick: k
             }, {
               default: w(() => [
-                S(D(a.confirmText ?? e(o)("manager.save")), 1)
+                P(L(a.confirmText ?? e(i)("manager.save")), 1)
               ]),
               _: 1
             }, 8, ["disabled"])
@@ -360,16 +360,16 @@ const ge = /* @__PURE__ */ E({
         })
       ]),
       default: w(() => [
-        $("div", {
+        _("div", {
           ref_key: "input",
           ref: p
         }, [
           h(e(j), {
             modelValue: t.value,
-            "onUpdate:modelValue": u[0] || (u[0] = (r) => t.value = r),
-            placeholder: a.label ?? e(o)("manager.folder-name"),
-            "aria-label": a.label ?? e(o)("manager.folder-name"),
-            onKeyup: Ne(x, ["enter"])
+            "onUpdate:modelValue": u[0] || (u[0] = (n) => t.value = n),
+            placeholder: a.label ?? e(i)("manager.folder-name"),
+            "aria-label": a.label ?? e(i)("manager.folder-name"),
+            onKeyup: Ne(k, ["enter"])
           }, null, 8, ["modelValue", "placeholder", "aria-label"])
         ], 512)
       ]),
@@ -378,16 +378,16 @@ const ge = /* @__PURE__ */ E({
   }
 });
 function we(a) {
-  const c = `${a.apiPath}/media`, m = (l) => l.data;
+  const d = `${a.apiPath}/media`, m = (l) => l.data;
   return {
-    directories: () => a.http.get(`${c}/directories`).then(m),
-    createDirectory: (l, f) => a.http.post(`${c}/directories`, { parent_id: l, title: f }).then(m),
-    renameDirectory: (l, f) => a.http.patch(`${c}/directories/${l}`, { title: f }).then(m),
-    moveDirectory: (l, f) => a.http.patch(`${c}/directories/${l}/move`, { parent_id: f }).then(m),
-    deleteDirectory: (l, f = !1) => a.http.delete(`${c}/directories/${l}`, {
-      query: { force: f ? 1 : void 0 }
+    directories: () => a.http.get(`${d}/directories`).then(m),
+    createDirectory: (l, v) => a.http.post(`${d}/directories`, { parent_id: l, title: v }).then(m),
+    renameDirectory: (l, v) => a.http.patch(`${d}/directories/${l}`, { title: v }).then(m),
+    moveDirectory: (l, v) => a.http.patch(`${d}/directories/${l}/move`, { parent_id: v }).then(m),
+    deleteDirectory: (l, v = !1) => a.http.delete(`${d}/directories/${l}`, {
+      query: { force: v ? 1 : void 0 }
     }),
-    files: (l = {}) => a.http.get(`${c}/files`, {
+    files: (l = {}) => a.http.get(`${d}/files`, {
       query: {
         directory_id: l.directory_id ?? void 0,
         q: l.q || void 0,
@@ -397,50 +397,50 @@ function we(a) {
         per_page: l.per_page
       }
     }),
-    file: (l) => a.http.get(`${c}/files/${l}`).then(m),
-    fileByPath: (l) => a.http.get(`${c}/files/by-path?path=${encodeURIComponent(l)}`).then(m).catch(() => null),
-    async upload(l, f, o) {
+    file: (l) => a.http.get(`${d}/files/${l}`).then(m),
+    fileByPath: (l) => a.http.get(`${d}/files/by-path?path=${encodeURIComponent(l)}`).then(m).catch(() => null),
+    async upload(l, v, i) {
       const t = new FormData();
-      return t.append("directory_id", String(l)), f.forEach((p) => t.append("files[]", p)), new Promise((p, x) => {
+      return t.append("directory_id", String(l)), v.forEach((p) => t.append("files[]", p)), new Promise((p, k) => {
         const g = new XMLHttpRequest();
-        g.open("POST", `${c}/files`), g.responseType = "json", g.withCredentials = !0, g.setRequestHeader("Accept", "application/json"), g.setRequestHeader("X-Requested-With", "XMLHttpRequest"), g.setRequestHeader("X-Webx-Locale", a.i18n.state.locale);
+        g.open("POST", `${d}/files`), g.responseType = "json", g.withCredentials = !0, g.setRequestHeader("Accept", "application/json"), g.setRequestHeader("X-Requested-With", "XMLHttpRequest"), g.setRequestHeader("X-Webx-Locale", a.i18n.state.locale);
         const u = st();
-        u && g.setRequestHeader("X-XSRF-TOKEN", u), g.upload.addEventListener("progress", (r) => {
-          r.lengthComputable && o?.(Math.round(r.loaded / r.total * 100));
+        u && g.setRequestHeader("X-XSRF-TOKEN", u), g.upload.addEventListener("progress", (n) => {
+          n.lengthComputable && i?.(Math.round(n.loaded / n.total * 100));
         }), g.addEventListener("load", () => {
-          const r = g.response;
-          if (g.status >= 200 && g.status < 300 && r?.data) {
-            p(r.data);
+          const n = g.response;
+          if (g.status >= 200 && g.status < 300 && n?.data) {
+            p(n.data);
             return;
           }
-          x(
-            Object.assign(new Error(r?.message ?? "Upload failed"), {
+          k(
+            Object.assign(new Error(n?.message ?? "Upload failed"), {
               status: g.status,
-              body: r
+              body: n
             })
           );
-        }), g.addEventListener("error", () => x(new Error("Upload failed"))), g.send(t);
+        }), g.addEventListener("error", () => k(new Error("Upload failed"))), g.send(t);
       });
     },
-    rename: (l, f) => a.http.patch(`${c}/files/${l}`, { name: f }).then(m),
-    move: (l, f) => a.http.post(`${c}/files/move`, { ids: l, directory_id: f }).then((o) => o.data.moved),
+    rename: (l, v) => a.http.patch(`${d}/files/${l}`, { name: v }).then(m),
+    move: (l, v) => a.http.post(`${d}/files/move`, { ids: l, directory_id: v }).then((i) => i.data.moved),
     // A POST for the batch, not a DELETE: the panel's own client sends no body on DELETE, and
     // a list of ids in a query string is a worse answer than an honest verb.
-    remove: (l) => a.http.post(`${c}/files/delete`, { ids: l }).then((f) => f.data.deleted),
-    removeOne: (l) => a.http.delete(`${c}/files/${l}`),
-    edit: (l, f) => a.http.post(`${c}/files/${l}/edit`, f).then(m),
-    copy: (l) => a.http.post(`${c}/files/${l}/copy`).then(m),
-    restoreOriginal: (l) => a.http.post(`${c}/files/${l}/restore-original`).then(m),
-    thumb(l, f, o, t = "cover") {
+    remove: (l) => a.http.post(`${d}/files/delete`, { ids: l }).then((v) => v.data.deleted),
+    removeOne: (l) => a.http.delete(`${d}/files/${l}`),
+    edit: (l, v) => a.http.post(`${d}/files/${l}/edit`, v).then(m),
+    copy: (l) => a.http.post(`${d}/files/${l}/copy`).then(m),
+    restoreOriginal: (l) => a.http.post(`${d}/files/${l}/restore-original`).then(m),
+    thumb(l, v, i, t = "cover") {
       if (!l.thumb)
         return null;
       const p = new URL(l.thumb, window.location.origin);
-      return p.searchParams.set("w", String(f)), o && p.searchParams.set("h", String(o)), p.searchParams.set("fit", t), p.pathname + p.search;
+      return p.searchParams.set("w", String(v)), i && p.searchParams.set("h", String(i)), p.searchParams.set("fit", t), p.pathname + p.search;
     }
   };
 }
 function st() {
-  const a = document.cookie.split("; ").find((c) => c.startsWith("XSRF-TOKEN="));
+  const a = document.cookie.split("; ").find((d) => d.startsWith("XSRF-TOKEN="));
   return a ? decodeURIComponent(a.slice(11)) : null;
 }
 const dt = {
@@ -559,15 +559,15 @@ function xe() {
 const ut = {
   key: 0,
   class: "wx-media__folders"
-}, ct = { class: "wx-media__files" }, mt = ["accept"], pt = { class: "wx-media__status" }, ft = { key: 0 }, vt = { class: "wx-media__drawer" }, ke = /* @__PURE__ */ E({
+}, ct = { class: "wx-media__files" }, mt = ["accept"], pt = { class: "wx-media__status" }, ft = { key: 0 }, vt = { class: "wx-media__drawer" }, ke = /* @__PURE__ */ S({
   __name: "MediaManager",
   props: {
     picking: { type: Boolean, default: !1 },
     accept: { default: null }
   },
   emits: ["pick"],
-  setup(a, { emit: c }) {
-    const m = a, l = c, f = ie(), o = we(f);
+  setup(a, { emit: d }) {
+    const m = a, l = d, v = ie(), i = we(v);
     xe();
     const t = B("webx-media");
     function p() {
@@ -591,33 +591,33 @@ const ut = {
         errorText: t("editor.error")
       };
     }
-    const x = ee("root"), g = Ge(x), u = W(() => g.value > 0 && g.value < 640), r = M([]), v = M(null), i = M(null), d = M([]), _ = M(""), P = M(m.accept ?? "all");
+    const k = ee("root"), g = Ge(k), u = D(() => g.value > 0 && g.value < 640), n = M([]), f = M(null), c = M(null), s = M([]), x = M(""), z = M(m.accept ?? "all");
     q(
       () => m.accept,
-      (s) => {
-        P.value = s ?? "all";
+      (r) => {
+        z.value = r ?? "all";
       }
     );
-    const I = M("-created_at"), J = M(!1), H = M(!1), oe = ee("picker"), _e = W(() => i.value?.data ?? []), K = W(() => f.can("media.manage")), Ce = W(() => f.can("media.upload") || K.value), U = W(() => Ve(v.value));
-    he(V), q([v, P, I], () => R(1)), q(
-      _,
-      Fe(() => R(1), 300)
-    ), q(u, (s) => {
-      s || (H.value = !1);
+    const X = M("-created_at"), J = M(!1), H = M(!1), oe = ee("picker"), _e = D(() => c.value?.data ?? []), K = D(() => v.can("media.manage")), Ce = D(() => v.can("media.upload") || K.value), R = D(() => Ve(f.value));
+    he(E), q([f, z, X], () => V(1)), q(
+      x,
+      Be(() => V(1), 300)
+    ), q(u, (r) => {
+      r || (H.value = !1);
     });
-    async function V() {
-      r.value = await o.directories(), v.value ??= r.value[0]?.id ?? null, await R(1);
+    async function E() {
+      n.value = await i.directories(), f.value ??= n.value[0]?.id ?? null, await V(1);
     }
-    async function R(s = i.value?.meta.current_page ?? 1) {
+    async function V(r = c.value?.meta.current_page ?? 1) {
       J.value = !0;
       try {
-        i.value = await o.files({
-          directory_id: _.value ? null : v.value,
-          q: _.value,
-          type: P.value === "all" ? null : P.value,
-          sort: I.value,
-          page: s
-        }), d.value = [];
+        c.value = await i.files({
+          directory_id: x.value ? null : f.value,
+          q: x.value,
+          type: z.value === "all" ? null : z.value,
+          sort: X.value,
+          page: r
+        }), s.value = [];
       } finally {
         J.value = !1;
       }
@@ -625,155 +625,155 @@ const ut = {
     function Me() {
       oe.value?.click();
     }
-    async function Te(s) {
-      const n = s.target, y = Array.from(n.files ?? []);
-      if (n.value = "", !(y.length === 0 || v.value === null))
+    async function Te(r) {
+      const o = r.target, y = Array.from(o.files ?? []);
+      if (o.value = "", !(y.length === 0 || f.value === null))
         try {
-          const C = await o.upload(v.value, y), O = C.filter((Se) => Se.duplicate).length;
-          C.length > O && N.success(t("manager.uploaded", { count: C.length - O })), O > 0 && N.info(t("manager.duplicate-added")), await Promise.all([V(), R(1)]);
+          const C = await i.upload(f.value, y), O = C.filter((Fe) => Fe.duplicate).length;
+          C.length > O && N.success(t("manager.uploaded", { count: C.length - O })), O > 0 && N.info(t("manager.duplicate-added")), await Promise.all([E(), V(1)]);
         } catch (C) {
           N.danger(ce(C) ?? t("errors.upload"));
         }
     }
     const ne = Y(rt);
     async function re() {
-      const s = await ne({
+      const r = await ne({
         title: t("manager.new-folder"),
         confirmText: t("manager.new-folder")
       });
-      s === void 0 || v.value === null || (await o.createDirectory(v.value, s), await V());
+      r === void 0 || f.value === null || (await i.createDirectory(f.value, r), await E());
     }
     async function se() {
-      const s = U.value;
-      if (!s || s.is_root)
+      const r = R.value;
+      if (!r || r.is_root)
         return;
-      const n = await ne({
+      const o = await ne({
         title: t("manager.rename"),
-        value: s.title,
+        value: r.title,
         confirmText: t("manager.save")
       });
-      n !== void 0 && (await o.renameDirectory(s.id, n), await V());
+      o !== void 0 && (await i.renameDirectory(r.id, o), await E());
     }
     async function de() {
-      const s = U.value;
-      if (!(!s || s.is_root)) {
+      const r = R.value;
+      if (!(!r || r.is_root)) {
         try {
-          await o.deleteDirectory(s.id);
-        } catch (n) {
-          const y = Ee(n);
+          await i.deleteDirectory(r.id);
+        } catch (o) {
+          const y = Ee(o);
           if (!y)
-            throw n;
+            throw o;
           if (!await ve({
-            title: t("dialogs.delete-folder-title", { title: s.title }),
+            title: t("dialogs.delete-folder-title", { title: r.title }),
             message: `${t("dialogs.delete-folder-contents", y)} ${t("dialogs.delete-folder-warning")}`,
             confirmText: t("dialogs.confirm"),
             cancelText: t("manager.cancel"),
             tone: "danger"
           }))
             return;
-          await o.deleteDirectory(s.id, !0);
+          await i.deleteDirectory(r.id, !0);
         }
-        v.value = null, await V();
+        f.value = null, await E();
       }
     }
-    async function ue(s, n) {
+    async function ue(r, o) {
       try {
-        await o.moveDirectory(s, n);
+        await i.moveDirectory(r, o);
       } catch (y) {
         N.danger(ce(y) ?? t("errors.directory-into-itself"));
       }
-      await V();
+      await E();
     }
     const ze = Y(nt);
     async function We() {
-      const s = await ze({
-        directories: r.value,
-        from: v.value,
-        count: d.value.length
+      const r = await ze({
+        directories: n.value,
+        from: f.value,
+        count: s.value.length
       });
-      s !== void 0 && (await o.move([...d.value], s), await Promise.all([V(), R()]));
+      r !== void 0 && (await i.move([...s.value], r), await Promise.all([E(), V()]));
     }
     async function De() {
-      const s = [...d.value];
+      const r = [...s.value];
       await ve({
-        title: t("dialogs.delete-files-title", { count: s.length }),
+        title: t("dialogs.delete-files-title", { count: r.length }),
         message: t("dialogs.delete-files-text"),
         confirmText: t("dialogs.confirm"),
         cancelText: t("manager.cancel"),
         tone: "danger"
-      }) && (await o.remove(s), await Promise.all([V(), R()]));
+      }) && (await i.remove(r), await Promise.all([E(), V()]));
     }
-    async function Le(s, n) {
-      await o.rename(s.id, n), await R();
+    async function Le(r, o) {
+      await i.rename(r.id, o), await V();
     }
-    async function Ue(s) {
-      await o.removeOne(s.id), await Promise.all([V(), R()]);
+    async function Ue(r) {
+      await i.removeOne(r.id), await Promise.all([E(), V()]);
     }
-    async function Re(s) {
-      const n = await Qe({
-        src: s.source ?? s.url,
-        fileName: s.file_name,
+    async function Re(r) {
+      const o = await Qe({
+        src: r.source ?? r.url,
+        fileName: r.file_name,
         filters: !1,
         // The editor is a component of the design system: its words are props with English
         // defaults, not lines in the panel's dictionary. Whoever opens it is the one who knows
         // what language the panel is being read in.
         ...p()
       });
-      n && (await o.edit(s.id, {
+      o && (await i.edit(r.id, {
         // The editor's frame is read against the picture as it is on screen — already turned — and
         // the server applies the operations in that order for the same reason.
-        crop: n.crop,
-        rotate: (n.rotation % 360 + 360) % 360,
-        flip: n.flipX ? "horizontal" : n.flipY ? "vertical" : void 0,
-        resize: { width: n.width, height: n.height }
-      }), await R());
+        crop: o.crop,
+        rotate: (o.rotation % 360 + 360) % 360,
+        flip: o.flipX ? "horizontal" : o.flipY ? "vertical" : void 0,
+        resize: { width: o.width, height: o.height }
+      }), await V());
     }
-    function Ve(s) {
-      const n = (y) => {
+    function Ve(r) {
+      const o = (y) => {
         for (const C of y) {
-          if (C.id === s)
+          if (C.id === r)
             return C;
-          const O = n(C.children ?? []);
+          const O = o(C.children ?? []);
           if (O)
             return O;
         }
         return null;
       };
-      return s === null ? null : n(r.value);
+      return r === null ? null : o(n.value);
     }
-    function Ee(s) {
-      const n = s?.body;
-      return n?.code === "directory_not_empty" ? n.counts ?? null : null;
+    function Ee(r) {
+      const o = r?.body;
+      return o?.code === "directory_not_empty" ? o.counts ?? null : null;
     }
-    function ce(s) {
-      return s?.message ?? null;
+    function ce(r) {
+      return r?.message ?? null;
     }
-    function Be(s) {
-      const n = ["B", "KB", "MB", "GB", "TB"];
-      let y = s, C = 0;
-      for (; y >= 1024 && C < n.length - 1; )
+    function Se(r) {
+      const o = ["B", "KB", "MB", "GB", "TB"];
+      let y = r, C = 0;
+      for (; y >= 1024 && C < o.length - 1; )
         y /= 1024, C++;
-      return `${y >= 10 || C === 0 ? Math.round(y) : y.toFixed(1)} ${n[C]}`;
+      return `${y >= 10 || C === 0 ? Math.round(y) : y.toFixed(1)} ${o[C]}`;
     }
-    function Fe(s, n) {
+    function Be(r, o) {
       let y;
       return () => {
-        clearTimeout(y), y = setTimeout(s, n);
+        clearTimeout(y), y = setTimeout(r, o);
       };
     }
-    return (s, n) => (b(), z("div", {
+    return (r, o) => (b(), W("div", {
       ref_key: "root",
-      ref: x,
+      ref: k,
       class: Ae(["wx-media", { "wx-media--compact": u.value }])
     }, [
-      u.value ? L("", !0) : (b(), z("aside", ut, [
+      u.value ? U("", !0) : (b(), W("aside", ut, [
         h(ge, {
-          selected: v.value,
-          "onUpdate:selected": n[0] || (n[0] = (y) => v.value = y),
-          directories: r.value,
+          selected: f.value,
+          "onUpdate:selected": o[0] || (o[0] = (y) => f.value = y),
+          directories: n.value,
           onMove: ue
         }, null, 8, ["selected", "directories"]),
-        K.value ? (b(), k(e(G), {
+        K.value ? (b(), $(e(G), {
           key: 0,
           size: "sm",
           align: "start"
@@ -787,38 +787,38 @@ const ut = {
             h(e(T), {
               type: "edit",
               title: e(t)("manager.rename"),
-              disabled: !U.value || U.value.is_root,
+              disabled: !R.value || R.value.is_root,
               onClick: se
             }, null, 8, ["title", "disabled"]),
             h(e(T), {
               type: "remove",
               title: e(t)("manager.delete"),
-              disabled: !U.value || U.value.is_root,
+              disabled: !R.value || R.value.is_root,
               onClick: de
             }, null, 8, ["title", "disabled"])
           ]),
           _: 1
-        })) : L("", !0)
+        })) : U("", !0)
       ])),
-      $("section", ct, [
+      _("section", ct, [
         h(ot, {
-          search: _.value,
-          "onUpdate:search": n[1] || (n[1] = (y) => _.value = y),
-          type: P.value,
-          "onUpdate:type": n[2] || (n[2] = (y) => P.value = y),
-          sort: I.value,
-          "onUpdate:sort": n[3] || (n[3] = (y) => I.value = y),
+          search: x.value,
+          "onUpdate:search": o[1] || (o[1] = (y) => x.value = y),
+          type: z.value,
+          "onUpdate:type": o[2] || (o[2] = (y) => z.value = y),
+          sort: X.value,
+          "onUpdate:sort": o[3] || (o[3] = (y) => X.value = y),
           "can-upload": Ce.value,
           "fixed-type": a.accept !== null,
           "can-manage": K.value,
-          selected: d.value.length,
+          selected: s.value.length,
           compact: u.value,
           onUpload: Me,
           onMove: We,
           onRemove: De,
-          onFolders: n[4] || (n[4] = (y) => H.value = !0)
+          onFolders: o[4] || (o[4] = (y) => H.value = !0)
         }, null, 8, ["search", "type", "sort", "can-upload", "fixed-type", "can-manage", "selected", "compact"]),
-        $("input", {
+        _("input", {
           ref_key: "picker",
           ref: oe,
           type: "file",
@@ -828,52 +828,52 @@ const ut = {
           onChange: Te
         }, null, 40, mt),
         h(lt, {
-          selected: d.value,
-          "onUpdate:selected": n[5] || (n[5] = (y) => d.value = y),
+          selected: s.value,
+          "onUpdate:selected": o[5] || (o[5] = (y) => s.value = y),
           files: _e.value,
-          api: e(o),
-          query: _.value,
+          api: e(i),
+          query: x.value,
           single: a.picking,
           onRename: Le,
           onEdit: Re,
           onRemove: Ue,
-          onOpen: n[6] || (n[6] = (y) => l("pick", y))
+          onOpen: o[6] || (o[6] = (y) => l("pick", y))
         }, null, 8, ["selected", "files", "api", "query", "single"]),
-        $("footer", pt, [
-          $("span", null, D(e(t)("manager.status-files", { count: i.value?.stats.files ?? 0 })), 1),
-          d.value.length > 0 ? (b(), z("span", ft, D(e(t)("manager.status-selected", { count: d.value.length })), 1)) : L("", !0),
-          $("span", null, D(e(t)("manager.status-size", { size: Be(i.value?.stats.size ?? 0) })), 1)
+        _("footer", pt, [
+          _("span", null, L(e(t)("manager.status-files", { count: c.value?.stats.files ?? 0 })), 1),
+          s.value.length > 0 ? (b(), W("span", ft, L(e(t)("manager.status-selected", { count: s.value.length })), 1)) : U("", !0),
+          _("span", null, L(e(t)("manager.status-size", { size: Se(c.value?.stats.size ?? 0) })), 1)
         ]),
-        i.value && i.value.meta.last_page > 1 ? (b(), k(e(Ye), {
+        c.value && c.value.meta.last_page > 1 ? (b(), $(e(Ye), {
           key: 0,
-          page: i.value.meta.current_page,
-          "per-page": i.value.meta.per_page,
-          total: i.value.meta.total,
-          "last-page": i.value.meta.last_page,
+          page: c.value.meta.current_page,
+          "per-page": c.value.meta.per_page,
+          total: c.value.meta.total,
+          "last-page": c.value.meta.last_page,
           disabled: J.value,
           size: "sm",
-          onChange: n[7] || (n[7] = ({ page: y }) => R(y))
-        }, null, 8, ["page", "per-page", "total", "last-page", "disabled"])) : L("", !0)
+          onChange: o[7] || (o[7] = ({ page: y }) => V(y))
+        }, null, 8, ["page", "per-page", "total", "last-page", "disabled"])) : U("", !0)
       ]),
       h(e(Je), {
         open: H.value,
-        "onUpdate:open": n[10] || (n[10] = (y) => H.value = y),
+        "onUpdate:open": o[10] || (o[10] = (y) => H.value = y),
         side: "left",
         title: e(t)("manager.folders"),
         size: 280
       }, {
         default: w(() => [
-          $("div", vt, [
+          _("div", vt, [
             h(ge, {
-              selected: v.value,
+              selected: f.value,
               "onUpdate:selected": [
-                n[8] || (n[8] = (y) => v.value = y),
-                n[9] || (n[9] = (y) => H.value = !1)
+                o[8] || (o[8] = (y) => f.value = y),
+                o[9] || (o[9] = (y) => H.value = !1)
               ],
-              directories: r.value,
+              directories: n.value,
               onMove: ue
             }, null, 8, ["selected", "directories"]),
-            K.value ? (b(), k(e(G), {
+            K.value ? (b(), $(e(G), {
               key: 0,
               size: "sm",
               align: "start"
@@ -887,28 +887,28 @@ const ut = {
                 h(e(T), {
                   type: "edit",
                   title: e(t)("manager.rename"),
-                  disabled: !U.value || U.value.is_root,
+                  disabled: !R.value || R.value.is_root,
                   onClick: se
                 }, null, 8, ["title", "disabled"]),
                 h(e(T), {
                   type: "remove",
                   title: e(t)("manager.delete"),
-                  disabled: !U.value || U.value.is_root,
+                  disabled: !R.value || R.value.is_root,
                   onClick: de
                 }, null, 8, ["title", "disabled"])
               ]),
               _: 1
-            })) : L("", !0)
+            })) : U("", !0)
           ])
         ]),
         _: 1
       }, 8, ["open", "title"])
     ], 2));
   }
-}), gt = /* @__PURE__ */ E({
+}), gt = /* @__PURE__ */ S({
   __name: "MediaPage",
   setup(a) {
-    return (c, m) => (b(), k(e(Ze), {
+    return (d, m) => (b(), $(e(Ze), {
       class: "wx-media-page",
       padding: "md"
     }, {
@@ -918,7 +918,7 @@ const ut = {
       _: 1
     }));
   }
-}), yt = { class: "wx-media-picker" }, $e = /* @__PURE__ */ E({
+}), yt = { class: "wx-media-picker" }, $e = /* @__PURE__ */ S({
   __name: "MediaPicker",
   props: {
     accept: { default: "image" },
@@ -926,19 +926,19 @@ const ut = {
     manage: { type: Boolean, default: !1 }
   },
   setup(a) {
-    const { open: c, resolve: m } = ae(), l = B("webx-media");
-    return (f, o) => (b(), k(e(le), {
-      open: e(c),
-      "onUpdate:open": o[1] || (o[1] = (t) => te(c) ? c.value = t : null),
+    const { open: d, resolve: m } = ae(), l = B("webx-media");
+    return (v, i) => (b(), $(e(le), {
+      open: e(d),
+      "onUpdate:open": i[1] || (i[1] = (t) => te(d) ? d.value = t : null),
       title: a.title ?? e(l)("module.title"),
       width: 960
     }, {
       default: w(() => [
-        $("div", yt, [
+        _("div", yt, [
           h(ke, {
             picking: !a.manage,
             accept: a.manage ? null : a.accept,
-            onPick: o[0] || (o[0] = (t) => e(m)(t))
+            onPick: i[0] || (i[0] = (t) => e(m)(t))
           }, null, 8, ["picking", "accept"])
         ])
       ]),
@@ -957,12 +957,13 @@ const ut = {
 }, _t = {
   key: 0,
   class: "wx-media-field__bar"
-}, Ct = { class: "wx-media-field__captions" }, Mt = { class: "wx-media-field__caption" }, Tt = { class: "wx-media-field__caption" }, zt = { class: "wx-media-field__captions-footer" }, Rt = /* @__PURE__ */ E({
+}, Ct = { class: "wx-media-field__captions" }, Mt = { class: "wx-media-field__caption" }, Tt = { class: "wx-media-field__caption" }, zt = { class: "wx-media-field__captions-footer" }, Rt = /* @__PURE__ */ S({
   __name: "MediaField",
   props: /* @__PURE__ */ F({
     label: { default: void 0 },
     accept: { default: "image" },
     captions: { type: Boolean, default: !0 },
+    aspect: { default: "16/9" },
     height: { default: 220 },
     disabled: { type: Boolean, default: !1 }
   }, {
@@ -971,67 +972,71 @@ const ut = {
   }),
   emits: ["update:modelValue"],
   setup(a) {
-    const c = a, m = A(a, "modelValue");
+    const d = a, m = A(a, "modelValue");
     xe();
-    const l = B("webx-media"), f = we(ie()), o = M(!1), t = M({});
+    const l = B("webx-media"), v = we(ie()), i = {
+      "16/9": "16 / 9",
+      "4/3": "4 / 3",
+      "1/1": "1 / 1"
+    }, t = M(!1), p = M({});
     q(
       () => m.value?.path,
-      async (i) => {
-        if (!i || m.value?.url || t.value[i]) return;
-        const d = await f.fileByPath(i);
-        d && (t.value = { ...t.value, [i]: d.url });
+      async (s) => {
+        if (!s || m.value?.url || p.value[s]) return;
+        const x = await v.fileByPath(s);
+        x && (p.value = { ...p.value, [s]: x.url });
       },
       { immediate: !0 }
     );
-    const p = W(() => {
-      const i = m.value;
-      return i ? i.url ?? t.value[i.path] ?? null : null;
-    }), x = W(() => ({
-      height: typeof c.height == "number" ? `${c.height}px` : c.height
-    }));
-    function g(i) {
-      return m.value?.[i] ?? {};
+    const k = D(() => {
+      const s = m.value;
+      return s ? s.url ?? p.value[s.path] ?? null : null;
+    }), g = D(
+      () => d.aspect ? { aspectRatio: i[d.aspect] ?? d.aspect } : { height: typeof d.height == "number" ? `${d.height}px` : d.height }
+    );
+    function u(s) {
+      return m.value?.[s] ?? {};
     }
-    function u(i, d) {
-      m.value && (m.value = { ...m.value, [i]: d });
+    function n(s, x) {
+      m.value && (m.value = { ...m.value, [s]: x });
     }
-    async function r() {
-      if (c.disabled) return;
-      const i = await ht({ accept: c.accept });
-      i && (m.value = { ...m.value, path: i.path, url: i.url });
+    async function f() {
+      if (d.disabled) return;
+      const s = await ht({ accept: d.accept });
+      s && (m.value = { ...m.value, path: s.path, url: s.url });
     }
-    function v() {
-      m.value = null, o.value = !1;
+    function c() {
+      m.value = null, t.value = !1;
     }
-    return (i, d) => (b(), z("div", bt, [
-      a.label ? (b(), z("span", wt, D(a.label), 1)) : L("", !0),
-      m.value ? (b(), z("div", {
+    return (s, x) => (b(), W("div", bt, [
+      a.label ? (b(), W("span", wt, L(a.label), 1)) : U("", !0),
+      m.value ? (b(), W("div", {
         key: 2,
         class: "wx-media-field__frame",
-        style: me(x.value)
+        style: me(g.value)
       }, [
-        $("button", {
+        _("button", {
           type: "button",
           class: "wx-media-field__picture",
           disabled: a.disabled,
           title: e(l)("field.replace"),
-          onClick: r
+          onClick: f
         }, [
-          p.value ? (b(), k(e(et), {
+          k.value ? (b(), $(e(et), {
             key: 0,
-            src: p.value,
+            src: k.value,
             fit: "contain",
             width: "100%",
             height: "100%"
-          }, null, 8, ["src"])) : (b(), z("span", $t, D(e(l)("field.no-preview")), 1))
+          }, null, 8, ["src"])) : (b(), W("span", $t, L(e(l)("field.no-preview")), 1))
         ], 8, kt),
-        a.disabled ? L("", !0) : (b(), z("div", _t, [
+        a.disabled ? U("", !0) : (b(), W("div", _t, [
           h(e(G), { size: "sm" }, {
             default: w(() => [
-              a.captions ? (b(), k(e(tt), {
+              a.captions ? (b(), $(e(tt), {
                 key: 0,
-                open: o.value,
-                "onUpdate:open": d[3] || (d[3] = (_) => o.value = _),
+                open: t.value,
+                "onUpdate:open": x[3] || (x[3] = (z) => t.value = z),
                 title: e(l)("field.captions"),
                 width: 360,
                 side: "top",
@@ -1044,41 +1049,41 @@ const ut = {
                   }, null, 8, ["title"])
                 ]),
                 default: w(() => [
-                  $("div", Ct, [
-                    $("div", Mt, [
-                      d[4] || (d[4] = $("label", {
+                  _("div", Ct, [
+                    _("div", Mt, [
+                      x[4] || (x[4] = _("label", {
                         class: "wx-media-field__caption-label",
                         for: "wx-media-alt"
                       }, "alt", -1)),
                       h(e(j), {
                         id: "wx-media-alt",
                         localized: "",
-                        "model-value": g("alt"),
+                        "model-value": u("alt"),
                         placeholder: e(l)("field.alt-hint"),
-                        "onUpdate:modelValue": d[0] || (d[0] = (_) => u("alt", _))
+                        "onUpdate:modelValue": x[0] || (x[0] = (z) => n("alt", z))
                       }, null, 8, ["model-value", "placeholder"])
                     ]),
-                    $("div", Tt, [
-                      d[5] || (d[5] = $("label", {
+                    _("div", Tt, [
+                      x[5] || (x[5] = _("label", {
                         class: "wx-media-field__caption-label",
                         for: "wx-media-title"
                       }, "title", -1)),
                       h(e(j), {
                         id: "wx-media-title",
                         localized: "",
-                        "model-value": g("title"),
+                        "model-value": u("title"),
                         placeholder: e(l)("field.title-hint"),
-                        "onUpdate:modelValue": d[1] || (d[1] = (_) => u("title", _))
+                        "onUpdate:modelValue": x[1] || (x[1] = (z) => n("title", z))
                       }, null, 8, ["model-value", "placeholder"])
                     ]),
-                    $("div", zt, [
-                      h(e(X), {
+                    _("div", zt, [
+                      h(e(I), {
                         size: "sm",
                         type: "primary",
-                        onClick: d[2] || (d[2] = (_) => o.value = !1)
+                        onClick: x[2] || (x[2] = (z) => t.value = !1)
                       }, {
                         default: w(() => [
-                          S(D(e(l)("manager.save")), 1)
+                          P(L(e(l)("manager.save")), 1)
                         ]),
                         _: 1
                       })
@@ -1086,7 +1091,7 @@ const ut = {
                   ])
                 ]),
                 _: 1
-              }, 8, ["open", "title"])) : L("", !0),
+              }, 8, ["open", "title"])) : U("", !0),
               h(e(at), {
                 title: e(l)("field.clear-title"),
                 description: e(l)("field.clear-text"),
@@ -1094,7 +1099,7 @@ const ut = {
                 "cancel-text": e(l)("manager.cancel"),
                 "confirm-type": "danger",
                 side: "top",
-                onConfirm: v
+                onConfirm: c
               }, {
                 trigger: w(() => [
                   h(e(T), {
@@ -1108,29 +1113,29 @@ const ut = {
             _: 1
           })
         ]))
-      ], 4)) : (b(), z("div", {
+      ], 4)) : (b(), W("div", {
         key: 1,
         class: "wx-media-field__frame is-empty",
-        style: me(x.value)
+        style: me(g.value)
       }, [
-        $("button", {
+        _("button", {
           type: "button",
           class: "wx-media-field__pick",
           disabled: a.disabled,
-          onClick: r
-        }, D(e(l)("field.select")), 9, xt)
+          onClick: f
+        }, L(e(l)("field.select")), 9, xt)
       ], 4))
     ]));
   }
 });
 function Vt(a = {}) {
-  const c = a.path ?? "/media";
+  const d = a.path ?? "/media";
   return {
     id: "media",
-    path: c,
+    path: d,
     routes: [
       {
-        path: c,
+        path: d,
         name: "webx.media",
         component: gt
       }