@webx-ui/module-media 0.1.0 → 0.2.0

package/dist/index.js

@@ -1,45 +1,45 @@
-import { defineComponent as R, useModel as L, ref as _, watch as H, openBlock as h, createBlock as k, unref as e, mergeModels as P, computed as C, resolveDirective as Se, withCtx as b, createElementBlock as W, Fragment as K, renderList as Q, withDirectives as Be, createCommentVNode as T, createVNode as y, createTextVNode as F, toDisplayString as z, isRef as te, useTemplateRef as Z, onMounted as ge, nextTick as Pe, createElementVNode as E, withKeys as qe, normalizeClass as Oe } from "vue";
-import { WxTree as Le, WxSelectionArea as Ne, WxFileCard as Ae, WxEmpty as Xe, toast as O, WxAction as M, WxInput as j, WxDropdown as ce, WxDropdownItem as me, WxActions as ee, useModal as ae, WxDialog as le, WxSelect as Ie, WxSpace as G, WxButton as N, useElementWidth as He, createModal as Y, WxPagination as Ke, WxDrawer as je, confirm as pe, openImageEditor as Ge, WxCard as Ye, WxImage as Je } from "@webx-ui/core";
-import { useTranslate as S, useAdmin as ye } from "@webx-ui/admin";
-const ve = /* @__PURE__ */ R({
+import { defineComponent as R, useModel as q, ref as M, watch as K, openBlock as b, createBlock as k, unref as e, mergeModels as B, computed as C, resolveDirective as Se, withCtx as w, createElementBlock as U, Fragment as j, renderList as Z, withDirectives as Be, createCommentVNode as T, createVNode as y, createTextVNode as F, toDisplayString as z, isRef as ae, useTemplateRef as ee, onMounted as ye, nextTick as Oe, createElementVNode as V, withKeys as Pe, normalizeClass as qe } from "vue";
+import { WxTree as Ne, WxSelectionArea as Ae, WxFileCard as He, WxEmpty as Xe, toast as P, WxAction as _, WxInput as G, WxDropdown as me, WxDropdownItem as pe, WxActions as te, useModal as le, WxDialog as oe, WxSelect as Ie, WxSpace as Y, WxButton as N, useElementWidth as Ke, createModal as J, WxPagination as je, WxDrawer as Ge, confirm as ve, openImageEditor as Ye, WxCard as Je, WxImage as Qe } from "@webx-ui/core";
+import { useTranslate as S, useAdmin as he } from "@webx-ui/admin";
+const fe = /* @__PURE__ */ R({
   __name: "DirectoryTree",
-  props: /* @__PURE__ */ P({
+  props: /* @__PURE__ */ B({
     directories: {}
   }, {
     selected: { default: null },
     selectedModifiers: {}
   }),
-  emits: /* @__PURE__ */ P(["move"], ["update:selected"]),
-  setup(t, { emit: r }) {
-    const g = t, n = L(t, "selected"), c = r, i = S("webx-media"), a = _([]), u = _([]);
-    H(
-      () => g.directories,
-      (l) => {
-        a.value = l.map(x), u.value = p(l);
+  emits: /* @__PURE__ */ B(["move"], ["update:selected"]),
+  setup(a, { emit: v }) {
+    const u = a, l = q(a, "selected"), m = v, o = S("webx-media"), t = M([]), s = M([]);
+    K(
+      () => u.directories,
+      (i) => {
+        t.value = i.map(x), s.value = p(i);
       },
       { immediate: !0, deep: !0 }
     );
-    function x(l) {
+    function x(i) {
       return {
-        ...l,
-        label: l.is_root ? i("manager.root") : l.title,
-        children: (l.children ?? []).map(x)
+        ...i,
+        label: i.is_root ? o("manager.root") : i.title,
+        children: (i.children ?? []).map(x)
       };
     }
-    function p(l) {
-      return l.flatMap((f) => [f.id, ...p(f.children ?? [])]);
+    function p(i) {
+      return i.flatMap((f) => [f.id, ...p(f.children ?? [])]);
     }
-    function d(l) {
-      const f = l.zone === "inside" ? l.target : l.parent;
-      f && c("move", l.node.id, f.id);
+    function d(i) {
+      const f = i.zone === "inside" ? i.target : i.parent;
+      f && m("move", i.node.id, f.id);
     }
-    return (l, f) => (h(), k(e(Le), {
-      selected: n.value,
-      "onUpdate:selected": f[0] || (f[0] = (m) => n.value = m),
-      expanded: u.value,
-      "onUpdate:expanded": f[1] || (f[1] = (m) => u.value = m),
-      modelValue: a.value,
-      "onUpdate:modelValue": f[2] || (f[2] = (m) => a.value = m),
+    return (i, f) => (b(), k(e(Ne), {
+      selected: l.value,
+      "onUpdate:selected": f[0] || (f[0] = (c) => l.value = c),
+      expanded: s.value,
+      "onUpdate:expanded": f[1] || (f[1] = (c) => s.value = c),
+      modelValue: t.value,
+      "onUpdate:modelValue": f[2] || (f[2] = (c) => t.value = c),
       class: "wx-media-tree",
       "node-key": "id",
       draggable: "",
@@ -47,9 +47,9 @@ const ve = /* @__PURE__ */ R({
       onDrop: d
     }, null, 8, ["selected", "expanded", "modelValue"]));
   }
-}), Qe = /* @__PURE__ */ R({
+}), Ze = /* @__PURE__ */ R({
   __name: "FileGrid",
-  props: /* @__PURE__ */ P({
+  props: /* @__PURE__ */ B({
     files: {},
     api: {},
     query: {},
@@ -58,76 +58,79 @@ const ve = /* @__PURE__ */ R({
     selected: { default: () => [] },
     selectedModifiers: {}
   }),
-  emits: /* @__PURE__ */ P(["open", "rename", "edit", "remove"], ["update:selected"]),
-  setup(t, { emit: r }) {
-    const g = t, n = L(t, "selected"), c = r, i = S("webx-media"), a = C(
-      () => g.query ? i("manager.empty-search", { query: g.query }) : i("manager.empty")
+  emits: /* @__PURE__ */ B(["open", "rename", "edit", "remove"], ["update:selected"]),
+  setup(a, { emit: v }) {
+    const u = a, l = q(a, "selected"), m = v, o = S("webx-media"), t = C(
+      () => u.query ? o("manager.empty-search", { query: u.query }) : o("manager.empty")
     );
-    function u() {
-      O.success(i("manager.link-copied"));
+    function s() {
+      P.success(o("manager.link-copied"));
     }
     function x(p) {
       const d = document.createElement("textarea");
       d.value = p.url, d.setAttribute("readonly", ""), d.style.position = "fixed", d.style.opacity = "0", document.body.appendChild(d), d.select();
-      let l = !1;
+      let i = !1;
       try {
-        l = document.execCommand("copy");
+        i = document.execCommand("copy");
       } catch {
-        l = !1;
+        i = !1;
       }
-      if (d.remove(), l) {
-        u();
+      if (d.remove(), i) {
+        s();
         return;
       }
-      O.danger(`${i("errors.copy")} ${p.url}`, { duration: 0 });
+      P.danger(`${o("errors.copy")} ${p.url}`, { duration: 0 });
     }
     return (p, d) => {
-      const l = Se("wx-select");
-      return t.files.length > 0 ? (h(), k(e(Ne), {
+      const i = Se("wx-select");
+      return a.files.length > 0 ? (b(), k(e(Ae), {
         key: 0,
-        modelValue: n.value,
-        "onUpdate:modelValue": d[0] || (d[0] = (f) => n.value = f),
+        modelValue: l.value,
+        "onUpdate:modelValue": d[0] || (d[0] = (f) => l.value = f),
         class: "wx-media-grid",
-        multiple: !t.single
+        multiple: !a.single
       }, {
-        default: b(({ isSelected: f }) => [
-          (h(!0), W(K, null, Q(t.files, (m) => Be((h(), k(e(Ae), {
-            key: m.id,
+        default: w(({ isSelected: f }) => [
+          (b(!0), U(j, null, Z(a.files, (c) => Be((b(), k(e(He), {
+            key: c.id,
             class: "wx-media-grid__card",
-            name: m.name,
-            url: m.url,
-            thumbnail: t.api.thumb(m, 320, 320) ?? void 0,
-            type: m.mime,
-            selected: f(m.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: m.editable,
+            editable: c.editable,
             removable: "",
             copyable: "",
-            "rename-label": e(i)("manager.rename"),
-            "edit-label": e(i)("manager.edit"),
-            "remove-label": e(i)("manager.delete"),
-            "copy-label": e(i)("manager.copy-link"),
-            "copied-label": e(i)("manager.link-copied"),
-            onRename: (w) => c("rename", m, w),
-            onEdit: (w) => c("edit", m),
-            onRemove: (w) => c("remove", m),
-            onCopy: u,
-            onCopyError: (w) => x(m),
-            onDblclick: (w) => c("open", m)
-          }, null, 8, ["name", "url", "thumbnail", "type", "selected", "editable", "rename-label", "edit-label", "remove-label", "copy-label", "copied-label", "onRename", "onEdit", "onRemove", "onCopyError", "onDblclick"])), [
-            [l, m.id]
+            "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: c.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: (h) => m("rename", c, h),
+            onEdit: (h) => m("edit", c),
+            onRemove: (h) => m("remove", c),
+            onCopy: s,
+            onCopyError: (h) => x(c),
+            onDblclick: (h) => m("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"])), [
+            [i, c.id]
           ])), 128))
         ]),
         _: 1
-      }, 8, ["modelValue", "multiple"])) : (h(), k(e(Xe), {
+      }, 8, ["modelValue", "multiple"])) : (b(), k(e(Xe), {
         key: 1,
-        description: a.value
+        description: t.value
       }, null, 8, ["description"]));
     };
   }
-}), Ze = { class: "wx-media-toolbar" }, et = /* @__PURE__ */ R({
+}), et = { class: "wx-media-toolbar" }, tt = /* @__PURE__ */ R({
   __name: "MediaToolbar",
-  props: /* @__PURE__ */ P({
+  props: /* @__PURE__ */ B({
     canUpload: { type: Boolean },
     canManage: { type: Boolean },
     selected: {},
@@ -140,155 +143,155 @@ const ve = /* @__PURE__ */ R({
     sort: { default: "-created_at" },
     sortModifiers: {}
   }),
-  emits: /* @__PURE__ */ P(["upload", "move", "remove", "folders"], ["update:search", "update:type", "update:sort"]),
-  setup(t, { emit: r }) {
-    const g = t, n = L(t, "search"), c = L(t, "type"), i = L(t, "sort"), a = r, u = S("webx-media"), x = C(() => [
-      { value: "all", label: u("manager.all-types") },
+  emits: /* @__PURE__ */ B(["upload", "move", "remove", "folders"], ["update:search", "update:type", "update:sort"]),
+  setup(a, { emit: v }) {
+    const u = a, l = q(a, "search"), m = q(a, "type"), o = q(a, "sort"), t = v, s = S("webx-media"), x = C(() => [
+      { value: "all", label: s("manager.all-types") },
       ...["image", "video", "audio", "document", "other"].map((f) => ({
         value: f,
-        label: u(`manager.${f}`)
+        label: s(`manager.${f}`)
       }))
     ]), p = C(() => [
-      { value: "-created_at", label: u("manager.sort-newest") },
-      { value: "created_at", label: u("manager.sort-oldest") },
-      { value: "name", label: u("manager.sort-name") },
-      { value: "-size", label: u("manager.sort-size") }
-    ]), d = C(() => x.value.find((f) => f.value === c.value)?.label ?? ""), l = C(() => p.value.find((f) => f.value === i.value)?.label ?? "");
-    return (f, m) => (h(), W("header", Ze, [
-      t.compact ? (h(), k(e(M), {
+      { value: "-created_at", label: s("manager.sort-newest") },
+      { value: "created_at", label: s("manager.sort-oldest") },
+      { value: "name", label: s("manager.sort-name") },
+      { value: "-size", label: s("manager.sort-size") }
+    ]), d = C(() => x.value.find((f) => f.value === m.value)?.label ?? ""), i = C(() => p.value.find((f) => f.value === o.value)?.label ?? "");
+    return (f, c) => (b(), U("header", et, [
+      a.compact ? (b(), k(e(_), {
         key: 0,
         icon: "folder",
-        title: e(u)("manager.folders"),
+        title: e(s)("manager.folders"),
         size: "sm",
-        onClick: m[0] || (m[0] = (w) => a("folders"))
+        onClick: c[0] || (c[0] = (h) => t("folders"))
       }, null, 8, ["title"])) : T("", !0),
-      y(e(j), {
-        modelValue: n.value,
-        "onUpdate:modelValue": m[1] || (m[1] = (w) => n.value = w),
+      y(e(G), {
+        modelValue: l.value,
+        "onUpdate:modelValue": c[1] || (c[1] = (h) => l.value = h),
         class: "wx-media-toolbar__search",
-        placeholder: e(u)("manager.search"),
+        placeholder: e(s)("manager.search"),
         clearable: "",
         size: "sm"
       }, null, 8, ["modelValue", "placeholder"]),
-      y(e(ce), null, {
-        trigger: b(() => [
-          y(e(M), {
+      y(e(me), null, {
+        trigger: w(() => [
+          y(e(_), {
             icon: "filter",
-            title: `${e(u)("manager.all-types")}: ${d.value}`,
+            title: `${e(s)("manager.all-types")}: ${d.value}`,
             size: "sm"
           }, null, 8, ["title"])
         ]),
-        default: b(() => [
-          (h(!0), W(K, null, Q(x.value, (w) => (h(), k(e(me), {
-            key: String(w.value),
-            active: w.value === c.value,
-            onClick: (B) => c.value = w.value
+        default: w(() => [
+          (b(!0), U(j, null, Z(x.value, (h) => (b(), k(e(pe), {
+            key: String(h.value),
+            active: h.value === m.value,
+            onClick: (E) => m.value = h.value
           }, {
-            default: b(() => [
-              F(z(w.label), 1)
+            default: w(() => [
+              F(z(h.label), 1)
             ]),
             _: 2
           }, 1032, ["active", "onClick"]))), 128))
         ]),
         _: 1
       }),
-      y(e(ce), null, {
-        trigger: b(() => [
-          y(e(M), {
+      y(e(me), null, {
+        trigger: w(() => [
+          y(e(_), {
             icon: "arrow-down",
-            title: l.value,
+            title: i.value,
             size: "sm"
           }, null, 8, ["title"])
         ]),
-        default: b(() => [
-          (h(!0), W(K, null, Q(p.value, (w) => (h(), k(e(me), {
-            key: w.value,
-            active: w.value === i.value,
-            onClick: (B) => i.value = w.value
+        default: w(() => [
+          (b(!0), U(j, null, Z(p.value, (h) => (b(), k(e(pe), {
+            key: h.value,
+            active: h.value === o.value,
+            onClick: (E) => o.value = h.value
           }, {
-            default: b(() => [
-              F(z(w.label), 1)
+            default: w(() => [
+              F(z(h.label), 1)
             ]),
             _: 2
           }, 1032, ["active", "onClick"]))), 128))
         ]),
         _: 1
       }),
-      t.canUpload ? (h(), k(e(M), {
+      a.canUpload ? (b(), k(e(_), {
         key: 1,
         type: "upload",
-        title: e(u)("manager.upload"),
+        title: e(s)("manager.upload"),
         size: "sm",
-        onClick: m[2] || (m[2] = (w) => a("upload"))
+        onClick: c[2] || (c[2] = (h) => t("upload"))
       }, null, 8, ["title"])) : T("", !0),
-      t.canManage ? (h(), k(e(ee), {
+      a.canManage ? (b(), k(e(te), {
         key: 2,
         size: "sm"
       }, {
-        default: b(() => [
-          y(e(M), {
+        default: w(() => [
+          y(e(_), {
             icon: "folder",
-            title: e(u)("manager.move"),
-            disabled: g.selected === 0,
-            onClick: m[3] || (m[3] = (w) => a("move"))
+            title: e(s)("manager.move"),
+            disabled: u.selected === 0,
+            onClick: c[3] || (c[3] = (h) => t("move"))
           }, null, 8, ["title", "disabled"]),
-          y(e(M), {
+          y(e(_), {
             type: "remove",
-            title: e(u)("manager.delete"),
-            disabled: g.selected === 0,
-            onClick: m[4] || (m[4] = (w) => a("remove"))
+            title: e(s)("manager.delete"),
+            disabled: u.selected === 0,
+            onClick: c[4] || (c[4] = (h) => t("remove"))
           }, null, 8, ["title", "disabled"])
         ]),
         _: 1
       })) : T("", !0)
     ]));
   }
-}), tt = /* @__PURE__ */ R({
+}), at = /* @__PURE__ */ R({
   __name: "MoveDialog",
   props: {
     directories: {},
     from: {},
     count: {}
   },
-  setup(t) {
-    const r = t, { open: g, resolve: n, dismiss: c } = ae(), i = S("webx-media"), a = C(
-      () => x(r.directories).filter((p) => p.value !== r.from)
-    ), u = _(a.value[0]?.value ?? null);
+  setup(a) {
+    const v = a, { open: u, resolve: l, dismiss: m } = le(), o = S("webx-media"), t = C(
+      () => x(v.directories).filter((p) => p.value !== v.from)
+    ), s = M(t.value[0]?.value ?? null);
     function x(p) {
       return p.flatMap((d) => [
         {
           value: d.id,
           // Indented, so the tree is still readable once it is a flat list.
-          label: " ".repeat(d.depth * 3) + (d.is_root ? i("manager.root") : d.title)
+          label: " ".repeat(d.depth * 3) + (d.is_root ? o("manager.root") : d.title)
         },
         ...x(d.children ?? [])
       ]);
     }
-    return (p, d) => (h(), k(e(le), {
-      open: e(g),
-      "onUpdate:open": d[3] || (d[3] = (l) => te(g) ? g.value = l : null),
-      title: e(i)("manager.move-to"),
+    return (p, d) => (b(), k(e(oe), {
+      open: e(u),
+      "onUpdate:open": d[3] || (d[3] = (i) => ae(u) ? u.value = i : null),
+      title: e(o)("manager.move-to"),
       width: 420
     }, {
-      footer: b(() => [
-        y(e(G), { size: "sm" }, {
-          default: b(() => [
+      footer: w(() => [
+        y(e(Y), { size: "sm" }, {
+          default: w(() => [
             y(e(N), {
               variant: "outline",
-              onClick: d[1] || (d[1] = (l) => e(c)())
+              onClick: d[1] || (d[1] = (i) => e(m)())
             }, {
-              default: b(() => [
-                F(z(e(i)("manager.cancel")), 1)
+              default: w(() => [
+                F(z(e(o)("manager.cancel")), 1)
               ]),
               _: 1
             }),
             y(e(N), {
               type: "primary",
-              disabled: u.value === null,
-              onClick: d[2] || (d[2] = (l) => e(n)(u.value))
+              disabled: s.value === null,
+              onClick: d[2] || (d[2] = (i) => e(l)(s.value))
             }, {
-              default: b(() => [
-                F(z(e(i)("manager.move")), 1)
+              default: w(() => [
+                F(z(e(o)("manager.move")), 1)
               ]),
               _: 1
             }, 8, ["disabled"])
@@ -296,17 +299,17 @@ const ve = /* @__PURE__ */ R({
           _: 1
         })
       ]),
-      default: b(() => [
+      default: w(() => [
         y(e(Ie), {
-          modelValue: u.value,
-          "onUpdate:modelValue": d[0] || (d[0] = (l) => u.value = l),
-          options: a.value
+          modelValue: s.value,
+          "onUpdate:modelValue": d[0] || (d[0] = (i) => s.value = i),
+          options: t.value
         }, null, 8, ["modelValue", "options"])
       ]),
       _: 1
     }, 8, ["open", "title"]));
   }
-}), at = /* @__PURE__ */ R({
+}), lt = /* @__PURE__ */ R({
   __name: "NameDialog",
   props: {
     title: {},
@@ -314,40 +317,40 @@ const ve = /* @__PURE__ */ R({
     value: { default: "" },
     confirmText: { default: void 0 }
   },
-  setup(t) {
-    const r = t, { open: g, resolve: n, dismiss: c } = ae(), i = S("webx-media"), a = _(r.value), u = Z("input");
-    ge(async () => {
-      await Pe(), u.value?.querySelector("input")?.focus();
+  setup(a) {
+    const v = a, { open: u, resolve: l, dismiss: m } = le(), o = S("webx-media"), t = M(v.value), s = ee("input");
+    ye(async () => {
+      await Oe(), s.value?.querySelector("input")?.focus();
     });
     function x() {
-      const p = a.value.trim();
-      p !== "" && n(p);
+      const p = t.value.trim();
+      p !== "" && l(p);
     }
-    return (p, d) => (h(), k(e(le), {
-      open: e(g),
-      "onUpdate:open": d[2] || (d[2] = (l) => te(g) ? g.value = l : null),
-      title: t.title,
+    return (p, d) => (b(), k(e(oe), {
+      open: e(u),
+      "onUpdate:open": d[2] || (d[2] = (i) => ae(u) ? u.value = i : null),
+      title: a.title,
       width: 420
     }, {
-      footer: b(() => [
-        y(e(G), { size: "sm" }, {
-          default: b(() => [
+      footer: w(() => [
+        y(e(Y), { size: "sm" }, {
+          default: w(() => [
             y(e(N), {
               variant: "outline",
-              onClick: d[1] || (d[1] = (l) => e(c)())
+              onClick: d[1] || (d[1] = (i) => e(m)())
             }, {
-              default: b(() => [
-                F(z(e(i)("manager.cancel")), 1)
+              default: w(() => [
+                F(z(e(o)("manager.cancel")), 1)
               ]),
               _: 1
             }),
             y(e(N), {
               type: "primary",
-              disabled: a.value.trim() === "",
+              disabled: t.value.trim() === "",
               onClick: x
             }, {
-              default: b(() => [
-                F(z(t.confirmText ?? e(i)("manager.save")), 1)
+              default: w(() => [
+                F(z(a.confirmText ?? e(o)("manager.save")), 1)
               ]),
               _: 1
             }, 8, ["disabled"])
@@ -355,17 +358,17 @@ const ve = /* @__PURE__ */ R({
           _: 1
         })
       ]),
-      default: b(() => [
-        E("div", {
+      default: w(() => [
+        V("div", {
           ref_key: "input",
-          ref: u
+          ref: s
         }, [
-          y(e(j), {
-            modelValue: a.value,
-            "onUpdate:modelValue": d[0] || (d[0] = (l) => a.value = l),
-            placeholder: t.label ?? e(i)("manager.folder-name"),
-            "aria-label": t.label ?? e(i)("manager.folder-name"),
-            onKeyup: qe(x, ["enter"])
+          y(e(G), {
+            modelValue: t.value,
+            "onUpdate:modelValue": d[0] || (d[0] = (i) => t.value = i),
+            placeholder: a.label ?? e(o)("manager.folder-name"),
+            "aria-label": a.label ?? e(o)("manager.folder-name"),
+            onKeyup: Pe(x, ["enter"])
           }, null, 8, ["modelValue", "placeholder", "aria-label"])
         ], 512)
       ]),
@@ -373,72 +376,72 @@ const ve = /* @__PURE__ */ R({
     }, 8, ["open", "title"]));
   }
 });
-function lt(t) {
-  const r = `${t.apiPath}/media`, g = (n) => n.data;
+function ot(a) {
+  const v = `${a.apiPath}/media`, u = (l) => l.data;
   return {
-    directories: () => t.http.get(`${r}/directories`).then(g),
-    createDirectory: (n, c) => t.http.post(`${r}/directories`, { parent_id: n, title: c }).then(g),
-    renameDirectory: (n, c) => t.http.patch(`${r}/directories/${n}`, { title: c }).then(g),
-    moveDirectory: (n, c) => t.http.patch(`${r}/directories/${n}/move`, { parent_id: c }).then(g),
-    deleteDirectory: (n, c = !1) => t.http.delete(`${r}/directories/${n}`, {
-      query: { force: c ? 1 : void 0 }
+    directories: () => a.http.get(`${v}/directories`).then(u),
+    createDirectory: (l, m) => a.http.post(`${v}/directories`, { parent_id: l, title: m }).then(u),
+    renameDirectory: (l, m) => a.http.patch(`${v}/directories/${l}`, { title: m }).then(u),
+    moveDirectory: (l, m) => a.http.patch(`${v}/directories/${l}/move`, { parent_id: m }).then(u),
+    deleteDirectory: (l, m = !1) => a.http.delete(`${v}/directories/${l}`, {
+      query: { force: m ? 1 : void 0 }
     }),
-    files: (n = {}) => t.http.get(`${r}/files`, {
+    files: (l = {}) => a.http.get(`${v}/files`, {
       query: {
-        directory_id: n.directory_id ?? void 0,
-        q: n.q || void 0,
-        type: n.type ?? void 0,
-        sort: n.sort,
-        page: n.page,
-        per_page: n.per_page
+        directory_id: l.directory_id ?? void 0,
+        q: l.q || void 0,
+        type: l.type ?? void 0,
+        sort: l.sort,
+        page: l.page,
+        per_page: l.per_page
       }
     }),
-    file: (n) => t.http.get(`${r}/files/${n}`).then(g),
-    async upload(n, c, i) {
-      const a = new FormData();
-      return a.append("directory_id", String(n)), c.forEach((u) => a.append("files[]", u)), new Promise((u, x) => {
+    file: (l) => a.http.get(`${v}/files/${l}`).then(u),
+    async upload(l, m, o) {
+      const t = new FormData();
+      return t.append("directory_id", String(l)), m.forEach((s) => t.append("files[]", s)), new Promise((s, x) => {
         const p = new XMLHttpRequest();
-        p.open("POST", `${r}/files`), p.responseType = "json", p.withCredentials = !0, p.setRequestHeader("Accept", "application/json"), p.setRequestHeader("X-Requested-With", "XMLHttpRequest"), p.setRequestHeader("X-Webx-Locale", t.i18n.state.locale);
+        p.open("POST", `${v}/files`), p.responseType = "json", p.withCredentials = !0, p.setRequestHeader("Accept", "application/json"), p.setRequestHeader("X-Requested-With", "XMLHttpRequest"), p.setRequestHeader("X-Webx-Locale", a.i18n.state.locale);
         const d = nt();
-        d && p.setRequestHeader("X-XSRF-TOKEN", d), p.upload.addEventListener("progress", (l) => {
-          l.lengthComputable && i?.(Math.round(l.loaded / l.total * 100));
+        d && p.setRequestHeader("X-XSRF-TOKEN", d), p.upload.addEventListener("progress", (i) => {
+          i.lengthComputable && o?.(Math.round(i.loaded / i.total * 100));
         }), p.addEventListener("load", () => {
-          const l = p.response;
-          if (p.status >= 200 && p.status < 300 && l?.data) {
-            u(l.data);
+          const i = p.response;
+          if (p.status >= 200 && p.status < 300 && i?.data) {
+            s(i.data);
             return;
           }
           x(
-            Object.assign(new Error(l?.message ?? "Upload failed"), {
+            Object.assign(new Error(i?.message ?? "Upload failed"), {
               status: p.status,
-              body: l
+              body: i
             })
           );
-        }), p.addEventListener("error", () => x(new Error("Upload failed"))), p.send(a);
+        }), p.addEventListener("error", () => x(new Error("Upload failed"))), p.send(t);
       });
     },
-    rename: (n, c) => t.http.patch(`${r}/files/${n}`, { name: c }).then(g),
-    move: (n, c) => t.http.post(`${r}/files/move`, { ids: n, directory_id: c }).then((i) => i.data.moved),
+    rename: (l, m) => a.http.patch(`${v}/files/${l}`, { name: m }).then(u),
+    move: (l, m) => a.http.post(`${v}/files/move`, { ids: l, directory_id: m }).then((o) => o.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: (n) => t.http.post(`${r}/files/delete`, { ids: n }).then((c) => c.data.deleted),
-    removeOne: (n) => t.http.delete(`${r}/files/${n}`),
-    edit: (n, c) => t.http.post(`${r}/files/${n}/edit`, c).then(g),
-    copy: (n) => t.http.post(`${r}/files/${n}/copy`).then(g),
-    restoreOriginal: (n) => t.http.post(`${r}/files/${n}/restore-original`).then(g),
-    thumb(n, c, i, a = "cover") {
-      if (!n.thumb)
+    remove: (l) => a.http.post(`${v}/files/delete`, { ids: l }).then((m) => m.data.deleted),
+    removeOne: (l) => a.http.delete(`${v}/files/${l}`),
+    edit: (l, m) => a.http.post(`${v}/files/${l}/edit`, m).then(u),
+    copy: (l) => a.http.post(`${v}/files/${l}/copy`).then(u),
+    restoreOriginal: (l) => a.http.post(`${v}/files/${l}/restore-original`).then(u),
+    thumb(l, m, o, t = "cover") {
+      if (!l.thumb)
         return null;
-      const u = new URL(n.thumb, window.location.origin);
-      return u.searchParams.set("w", String(c)), i && u.searchParams.set("h", String(i)), u.searchParams.set("fit", a), u.pathname + u.search;
+      const s = new URL(l.thumb, window.location.origin);
+      return s.searchParams.set("w", String(m)), o && s.searchParams.set("h", String(o)), s.searchParams.set("fit", t), s.pathname + s.search;
     }
   };
 }
 function nt() {
-  const t = document.cookie.split("; ").find((r) => r.startsWith("XSRF-TOKEN="));
-  return t ? decodeURIComponent(t.slice(11)) : null;
+  const a = document.cookie.split("; ").find((v) => v.startsWith("XSRF-TOKEN="));
+  return a ? decodeURIComponent(a.slice(11)) : null;
 }
-const ot = {
+const it = {
   module: {
     title: "Files"
   },
@@ -479,13 +482,35 @@ const ot = {
     "status-selected": "selected: :count",
     "status-size": "size: :size"
   },
+  // The image editor is a component of the design system, so its words are props rather than
+  // lines in the dictionary — the manager hands it these when it opens it.
+  editor: {
+    title: "Edit picture",
+    save: "Save",
+    cancel: "Cancel",
+    reset: "Reset",
+    "rotate-left": "Turn left",
+    "rotate-right": "Turn right",
+    "flip-horizontal": "Mirror across",
+    "flip-vertical": "Mirror down",
+    ratio: "Ratio",
+    crop: "Crop",
+    output: "Output",
+    "output-hint": "The size of the picture you will get",
+    width: "Width",
+    height: "Height",
+    free: "Free",
+    original: "Original",
+    error: "This picture could not be loaded"
+  },
   dialogs: {
     "delete-files-title": "Delete :count file(s)?",
     "delete-files-text": "Anywhere they are already used, they will stop opening.",
     "delete-folder-title": "Delete the folder :title?",
     "delete-folder-contents": "It holds :files file(s) and :directories folder(s).",
     "delete-folder-warning": "Everything inside goes too, and pictures already placed in content will stop opening.",
-    confirm: "Delete"
+    confirm: "Delete",
+    "delete-file": "Delete :name?"
   },
   errors: {
     "directory-not-empty": "This folder is not empty.",
@@ -508,239 +533,269 @@ const ot = {
     directory_id: "folder",
     files: "files"
   }
-}, fe = /* @__PURE__ */ new WeakSet();
-function we() {
+}, ge = /* @__PURE__ */ new WeakSet();
+function be() {
   try {
-    const { i18n: t } = ye();
-    fe.has(t) || (t.defaults("webx-media", ot), fe.add(t));
+    const { i18n: a } = he();
+    ge.has(a) || (a.defaults("webx-media", it), ge.add(a));
   } catch {
   }
 }
-const it = {
+const rt = {
   key: 0,
   class: "wx-media__folders"
-}, rt = { class: "wx-media__files" }, st = { class: "wx-media__status" }, dt = { key: 0 }, ut = { class: "wx-media__drawer" }, he = /* @__PURE__ */ R({
+}, st = { class: "wx-media__files" }, dt = { class: "wx-media__status" }, ut = { key: 0 }, ct = { class: "wx-media__drawer" }, we = /* @__PURE__ */ R({
   __name: "MediaManager",
   props: {
     picking: { type: Boolean, default: !1 },
     accept: { default: null }
   },
   emits: ["pick"],
-  setup(t, { emit: r }) {
-    const g = t, n = r, c = ye(), i = lt(c);
-    we();
-    const a = S("webx-media"), u = Z("root"), x = He(u), p = C(() => x.value > 0 && x.value < 640), d = _([]), l = _(null), f = _(null), m = _([]), w = _(""), B = _(g.accept ?? "all"), X = _("-created_at"), J = _(!1), A = _(!1), ne = Z("picker"), xe = C(() => f.value?.data ?? []), I = C(() => c.can("media.manage")), ke = C(() => c.can("media.upload") || I.value), D = C(() => We(l.value));
-    ge(V), H([l, B, X], () => U(1)), H(
-      w,
-      Re(() => U(1), 300)
-    ), H(p, (s) => {
-      s || (A.value = !1);
+  setup(a, { emit: v }) {
+    const u = a, l = v, m = he(), o = ot(m);
+    be();
+    const t = S("webx-media");
+    function s() {
+      return {
+        title: t("editor.title"),
+        saveLabel: t("editor.save"),
+        cancelLabel: t("editor.cancel"),
+        resetLabel: t("editor.reset"),
+        rotateLeftLabel: t("editor.rotate-left"),
+        rotateRightLabel: t("editor.rotate-right"),
+        flipHorizontalLabel: t("editor.flip-horizontal"),
+        flipVerticalLabel: t("editor.flip-vertical"),
+        ratioLabel: t("editor.ratio"),
+        cropLabel: t("editor.crop"),
+        outputLabel: t("editor.output"),
+        outputHint: t("editor.output-hint"),
+        widthLabel: t("editor.width"),
+        heightLabel: t("editor.height"),
+        freeLabel: t("editor.free"),
+        originalLabel: t("editor.original"),
+        errorText: t("editor.error")
+      };
+    }
+    const x = ee("root"), p = Ke(x), d = C(() => p.value > 0 && p.value < 640), i = M([]), f = M(null), c = M(null), h = M([]), E = M(""), A = M(u.accept ?? "all"), X = M("-created_at"), Q = M(!1), H = M(!1), ne = ee("picker"), ke = C(() => c.value?.data ?? []), I = C(() => m.can("media.manage")), $e = C(() => m.can("media.upload") || I.value), D = C(() => We(f.value));
+    ye(W), K([f, A, X], () => L(1)), K(
+      E,
+      Ee(() => L(1), 300)
+    ), K(d, (r) => {
+      r || (H.value = !1);
     });
-    async function V() {
-      d.value = await i.directories(), l.value ??= d.value[0]?.id ?? null, await U(1);
+    async function W() {
+      i.value = await o.directories(), f.value ??= i.value[0]?.id ?? null, await L(1);
     }
-    async function U(s = f.value?.meta.current_page ?? 1) {
-      J.value = !0;
+    async function L(r = c.value?.meta.current_page ?? 1) {
+      Q.value = !0;
       try {
-        f.value = await i.files({
-          directory_id: w.value ? null : l.value,
-          q: w.value,
-          type: B.value === "all" ? null : B.value,
+        c.value = await o.files({
+          directory_id: E.value ? null : f.value,
+          q: E.value,
+          type: A.value === "all" ? null : A.value,
           sort: X.value,
-          page: s
-        }), m.value = [];
+          page: r
+        }), h.value = [];
       } finally {
-        J.value = !1;
+        Q.value = !1;
       }
     }
-    function $e() {
+    function Me() {
       ne.value?.click();
     }
-    async function _e(s) {
-      const o = s.target, v = Array.from(o.files ?? []);
-      if (o.value = "", !(v.length === 0 || l.value === null))
+    async function _e(r) {
+      const n = r.target, g = Array.from(n.files ?? []);
+      if (n.value = "", !(g.length === 0 || f.value === null))
         try {
-          const $ = await i.upload(l.value, v), q = $.filter((Fe) => Fe.duplicate).length;
-          $.length > q && O.success(a("manager.uploaded", { count: $.length - q })), q > 0 && O.info(a("manager.duplicate-added")), await Promise.all([V(), U(1)]);
+          const $ = await o.upload(f.value, g), O = $.filter((Fe) => Fe.duplicate).length;
+          $.length > O && P.success(t("manager.uploaded", { count: $.length - O })), O > 0 && P.info(t("manager.duplicate-added")), await Promise.all([W(), L(1)]);
         } catch ($) {
-          O.danger(ue($) ?? a("errors.upload"));
+          P.danger(ce($) ?? t("errors.upload"));
         }
     }
-    const oe = Y(at);
-    async function ie() {
-      const s = await oe({
-        title: a("manager.new-folder"),
-        confirmText: a("manager.new-folder")
+    const ie = J(lt);
+    async function re() {
+      const r = await ie({
+        title: t("manager.new-folder"),
+        confirmText: t("manager.new-folder")
       });
-      s === void 0 || l.value === null || (await i.createDirectory(l.value, s), await V());
+      r === void 0 || f.value === null || (await o.createDirectory(f.value, r), await W());
     }
-    async function re() {
-      const s = D.value;
-      if (!s || s.is_root)
+    async function se() {
+      const r = D.value;
+      if (!r || r.is_root)
         return;
-      const o = await oe({
-        title: a("manager.rename"),
-        value: s.title,
-        confirmText: a("manager.save")
+      const n = await ie({
+        title: t("manager.rename"),
+        value: r.title,
+        confirmText: t("manager.save")
       });
-      o !== void 0 && (await i.renameDirectory(s.id, o), await V());
+      n !== void 0 && (await o.renameDirectory(r.id, n), await W());
     }
-    async function se() {
-      const s = D.value;
-      if (!(!s || s.is_root)) {
+    async function de() {
+      const r = D.value;
+      if (!(!r || r.is_root)) {
         try {
-          await i.deleteDirectory(s.id);
-        } catch (o) {
-          const v = Ve(o);
-          if (!v)
-            throw o;
-          if (!await pe({
-            title: a("dialogs.delete-folder-title", { title: s.title }),
-            message: `${a("dialogs.delete-folder-contents", v)} ${a("dialogs.delete-folder-warning")}`,
-            confirmText: a("dialogs.confirm"),
-            cancelText: a("manager.cancel"),
+          await o.deleteDirectory(r.id);
+        } catch (n) {
+          const g = Ve(n);
+          if (!g)
+            throw n;
+          if (!await ve({
+            title: t("dialogs.delete-folder-title", { title: r.title }),
+            message: `${t("dialogs.delete-folder-contents", g)} ${t("dialogs.delete-folder-warning")}`,
+            confirmText: t("dialogs.confirm"),
+            cancelText: t("manager.cancel"),
             tone: "danger"
           }))
             return;
-          await i.deleteDirectory(s.id, !0);
+          await o.deleteDirectory(r.id, !0);
         }
-        l.value = null, await V();
+        f.value = null, await W();
       }
     }
-    async function de(s, o) {
+    async function ue(r, n) {
       try {
-        await i.moveDirectory(s, o);
-      } catch (v) {
-        O.danger(ue(v) ?? a("errors.directory-into-itself"));
+        await o.moveDirectory(r, n);
+      } catch (g) {
+        P.danger(ce(g) ?? t("errors.directory-into-itself"));
       }
-      await V();
+      await W();
     }
-    const Me = Y(tt);
-    async function Ce() {
-      const s = await Me({
-        directories: d.value,
-        from: l.value,
-        count: m.value.length
+    const Ce = J(at);
+    async function Te() {
+      const r = await Ce({
+        directories: i.value,
+        from: f.value,
+        count: h.value.length
       });
-      s !== void 0 && (await i.move([...m.value], s), await Promise.all([V(), U()]));
+      r !== void 0 && (await o.move([...h.value], r), await Promise.all([W(), L()]));
     }
-    async function Te() {
-      const s = [...m.value];
-      await pe({
-        title: a("dialogs.delete-files-title", { count: s.length }),
-        message: a("dialogs.delete-files-text"),
-        confirmText: a("dialogs.confirm"),
-        cancelText: a("manager.cancel"),
+    async function ze() {
+      const r = [...h.value];
+      await ve({
+        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 i.remove(s), await Promise.all([V(), U()]));
+      }) && (await o.remove(r), await Promise.all([W(), L()]));
     }
-    async function ze(s, o) {
-      await i.rename(s.id, o), await U();
+    async function De(r, n) {
+      await o.rename(r.id, n), await L();
     }
-    async function De(s) {
-      await i.removeOne(s.id), await Promise.all([V(), U()]);
+    async function Le(r) {
+      await o.removeOne(r.id), await Promise.all([W(), L()]);
     }
-    async function Ue(s) {
-      const o = await Ge({ src: s.url, fileName: s.file_name, filters: !1 });
-      o && (await i.edit(s.id, {
+    async function Ue(r) {
+      const n = await Ye({
+        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.
+        ...s()
+      });
+      n && (await o.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: 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 U());
+        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 L());
     }
-    function We(s) {
-      const o = (v) => {
-        for (const $ of v) {
-          if ($.id === s)
+    function We(r) {
+      const n = (g) => {
+        for (const $ of g) {
+          if ($.id === r)
             return $;
-          const q = o($.children ?? []);
-          if (q)
-            return q;
+          const O = n($.children ?? []);
+          if (O)
+            return O;
         }
         return null;
       };
-      return s === null ? null : o(d.value);
+      return r === null ? null : n(i.value);
     }
-    function Ve(s) {
-      const o = s?.body;
-      return o?.code === "directory_not_empty" ? o.counts ?? null : null;
+    function Ve(r) {
+      const n = r?.body;
+      return n?.code === "directory_not_empty" ? n.counts ?? null : null;
     }
-    function ue(s) {
-      return s?.message ?? null;
+    function ce(r) {
+      return r?.message ?? null;
     }
-    function Ee(s) {
-      const o = ["B", "KB", "MB", "GB", "TB"];
-      let v = s, $ = 0;
-      for (; v >= 1024 && $ < o.length - 1; )
-        v /= 1024, $++;
-      return `${v >= 10 || $ === 0 ? Math.round(v) : v.toFixed(1)} ${o[$]}`;
+    function Re(r) {
+      const n = ["B", "KB", "MB", "GB", "TB"];
+      let g = r, $ = 0;
+      for (; g >= 1024 && $ < n.length - 1; )
+        g /= 1024, $++;
+      return `${g >= 10 || $ === 0 ? Math.round(g) : g.toFixed(1)} ${n[$]}`;
     }
-    function Re(s, o) {
-      let v;
+    function Ee(r, n) {
+      let g;
       return () => {
-        clearTimeout(v), v = setTimeout(s, o);
+        clearTimeout(g), g = setTimeout(r, n);
       };
     }
-    return (s, o) => (h(), W("div", {
+    return (r, n) => (b(), U("div", {
       ref_key: "root",
-      ref: u,
-      class: Oe(["wx-media", { "wx-media--compact": p.value }])
+      ref: x,
+      class: qe(["wx-media", { "wx-media--compact": d.value }])
     }, [
-      p.value ? T("", !0) : (h(), W("aside", it, [
-        y(ve, {
-          selected: l.value,
-          "onUpdate:selected": o[0] || (o[0] = (v) => l.value = v),
-          directories: d.value,
-          onMove: de
+      d.value ? T("", !0) : (b(), U("aside", rt, [
+        y(fe, {
+          selected: f.value,
+          "onUpdate:selected": n[0] || (n[0] = (g) => f.value = g),
+          directories: i.value,
+          onMove: ue
         }, null, 8, ["selected", "directories"]),
-        I.value ? (h(), k(e(ee), {
+        I.value ? (b(), k(e(te), {
           key: 0,
           size: "sm",
           align: "start"
         }, {
-          default: b(() => [
-            y(e(M), {
+          default: w(() => [
+            y(e(_), {
               type: "add",
-              title: e(a)("manager.new-folder"),
-              onClick: ie
+              title: e(t)("manager.new-folder"),
+              onClick: re
             }, null, 8, ["title"]),
-            y(e(M), {
+            y(e(_), {
               type: "edit",
-              title: e(a)("manager.rename"),
+              title: e(t)("manager.rename"),
               disabled: !D.value || D.value.is_root,
-              onClick: re
+              onClick: se
             }, null, 8, ["title", "disabled"]),
-            y(e(M), {
+            y(e(_), {
               type: "remove",
-              title: e(a)("manager.delete"),
+              title: e(t)("manager.delete"),
               disabled: !D.value || D.value.is_root,
-              onClick: se
+              onClick: de
             }, null, 8, ["title", "disabled"])
           ]),
           _: 1
         })) : T("", !0)
       ])),
-      E("section", rt, [
-        y(et, {
-          search: w.value,
-          "onUpdate:search": o[1] || (o[1] = (v) => w.value = v),
-          type: B.value,
-          "onUpdate:type": o[2] || (o[2] = (v) => B.value = v),
+      V("section", st, [
+        y(tt, {
+          search: E.value,
+          "onUpdate:search": n[1] || (n[1] = (g) => E.value = g),
+          type: A.value,
+          "onUpdate:type": n[2] || (n[2] = (g) => A.value = g),
           sort: X.value,
-          "onUpdate:sort": o[3] || (o[3] = (v) => X.value = v),
-          "can-upload": ke.value && !t.picking,
+          "onUpdate:sort": n[3] || (n[3] = (g) => X.value = g),
+          "can-upload": $e.value && !a.picking,
           "can-manage": I.value,
-          selected: m.value.length,
-          compact: p.value,
-          onUpload: $e,
-          onMove: Ce,
-          onRemove: Te,
-          onFolders: o[4] || (o[4] = (v) => A.value = !0)
+          selected: h.value.length,
+          compact: d.value,
+          onUpload: Me,
+          onMove: Te,
+          onRemove: ze,
+          onFolders: n[4] || (n[4] = (g) => H.value = !0)
         }, null, 8, ["search", "type", "sort", "can-upload", "can-manage", "selected", "compact"]),
-        E("input", {
+        V("input", {
           ref_key: "picker",
           ref: ne,
           type: "file",
@@ -748,74 +803,74 @@ const it = {
           hidden: "",
           onChange: _e
         }, null, 544),
-        y(Qe, {
-          selected: m.value,
-          "onUpdate:selected": o[5] || (o[5] = (v) => m.value = v),
-          files: xe.value,
-          api: e(i),
-          query: w.value,
-          single: t.picking,
-          onRename: ze,
+        y(Ze, {
+          selected: h.value,
+          "onUpdate:selected": n[5] || (n[5] = (g) => h.value = g),
+          files: ke.value,
+          api: e(o),
+          query: E.value,
+          single: a.picking,
+          onRename: De,
           onEdit: Ue,
-          onRemove: De,
-          onOpen: o[6] || (o[6] = (v) => n("pick", v))
+          onRemove: Le,
+          onOpen: n[6] || (n[6] = (g) => l("pick", g))
         }, null, 8, ["selected", "files", "api", "query", "single"]),
-        E("footer", st, [
-          E("span", null, z(e(a)("manager.status-files", { count: f.value?.stats.files ?? 0 })), 1),
-          m.value.length > 0 ? (h(), W("span", dt, z(e(a)("manager.status-selected", { count: m.value.length })), 1)) : T("", !0),
-          E("span", null, z(e(a)("manager.status-size", { size: Ee(f.value?.stats.size ?? 0) })), 1)
+        V("footer", dt, [
+          V("span", null, z(e(t)("manager.status-files", { count: c.value?.stats.files ?? 0 })), 1),
+          h.value.length > 0 ? (b(), U("span", ut, z(e(t)("manager.status-selected", { count: h.value.length })), 1)) : T("", !0),
+          V("span", null, z(e(t)("manager.status-size", { size: Re(c.value?.stats.size ?? 0) })), 1)
         ]),
-        f.value && f.value.meta.last_page > 1 ? (h(), k(e(Ke), {
+        c.value && c.value.meta.last_page > 1 ? (b(), k(e(je), {
           key: 0,
-          page: f.value.meta.current_page,
-          "per-page": f.value.meta.per_page,
-          total: f.value.meta.total,
-          "last-page": f.value.meta.last_page,
-          disabled: J.value,
+          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: Q.value,
           size: "sm",
-          onChange: o[7] || (o[7] = ({ page: v }) => U(v))
+          onChange: n[7] || (n[7] = ({ page: g }) => L(g))
         }, null, 8, ["page", "per-page", "total", "last-page", "disabled"])) : T("", !0)
       ]),
-      y(e(je), {
-        open: A.value,
-        "onUpdate:open": o[10] || (o[10] = (v) => A.value = v),
+      y(e(Ge), {
+        open: H.value,
+        "onUpdate:open": n[10] || (n[10] = (g) => H.value = g),
         side: "left",
-        title: e(a)("manager.folders"),
+        title: e(t)("manager.folders"),
         size: 280
       }, {
-        default: b(() => [
-          E("div", ut, [
-            y(ve, {
-              selected: l.value,
+        default: w(() => [
+          V("div", ct, [
+            y(fe, {
+              selected: f.value,
               "onUpdate:selected": [
-                o[8] || (o[8] = (v) => l.value = v),
-                o[9] || (o[9] = (v) => A.value = !1)
+                n[8] || (n[8] = (g) => f.value = g),
+                n[9] || (n[9] = (g) => H.value = !1)
               ],
-              directories: d.value,
-              onMove: de
+              directories: i.value,
+              onMove: ue
             }, null, 8, ["selected", "directories"]),
-            I.value ? (h(), k(e(ee), {
+            I.value ? (b(), k(e(te), {
               key: 0,
               size: "sm",
               align: "start"
             }, {
-              default: b(() => [
-                y(e(M), {
+              default: w(() => [
+                y(e(_), {
                   type: "add",
-                  title: e(a)("manager.new-folder"),
-                  onClick: ie
+                  title: e(t)("manager.new-folder"),
+                  onClick: re
                 }, null, 8, ["title"]),
-                y(e(M), {
+                y(e(_), {
                   type: "edit",
-                  title: e(a)("manager.rename"),
+                  title: e(t)("manager.rename"),
                   disabled: !D.value || D.value.is_root,
-                  onClick: re
+                  onClick: se
                 }, null, 8, ["title", "disabled"]),
-                y(e(M), {
+                y(e(_), {
                   type: "remove",
-                  title: e(a)("manager.delete"),
+                  title: e(t)("manager.delete"),
                   disabled: !D.value || D.value.is_root,
-                  onClick: se
+                  onClick: de
                 }, null, 8, ["title", "disabled"])
               ]),
               _: 1
@@ -826,55 +881,55 @@ const it = {
       }, 8, ["open", "title"])
     ], 2));
   }
-}), ct = /* @__PURE__ */ R({
+}), mt = /* @__PURE__ */ R({
   __name: "MediaPage",
-  setup(t) {
-    return (r, g) => (h(), k(e(Ye), {
+  setup(a) {
+    return (v, u) => (b(), k(e(Je), {
       class: "wx-media-page",
       padding: "md"
     }, {
-      default: b(() => [
-        y(he)
+      default: w(() => [
+        y(we)
       ]),
       _: 1
     }));
   }
-}), mt = { class: "wx-media-picker" }, be = /* @__PURE__ */ R({
+}), pt = { class: "wx-media-picker" }, xe = /* @__PURE__ */ R({
   __name: "MediaPicker",
   props: {
     accept: { default: "image" },
     title: { default: void 0 },
     manage: { type: Boolean, default: !1 }
   },
-  setup(t) {
-    const { open: r, resolve: g } = ae(), n = S("webx-media");
-    return (c, i) => (h(), k(e(le), {
-      open: e(r),
-      "onUpdate:open": i[1] || (i[1] = (a) => te(r) ? r.value = a : null),
-      title: t.title ?? e(n)("module.title"),
+  setup(a) {
+    const { open: v, resolve: u } = le(), l = S("webx-media");
+    return (m, o) => (b(), k(e(oe), {
+      open: e(v),
+      "onUpdate:open": o[1] || (o[1] = (t) => ae(v) ? v.value = t : null),
+      title: a.title ?? e(l)("module.title"),
       width: 960
     }, {
-      default: b(() => [
-        E("div", mt, [
-          y(he, {
-            picking: !t.manage,
-            accept: t.manage ? null : t.accept,
-            onPick: i[0] || (i[0] = (a) => e(g)(a))
+      default: w(() => [
+        V("div", pt, [
+          y(we, {
+            picking: !a.manage,
+            accept: a.manage ? null : a.accept,
+            onPick: o[0] || (o[0] = (t) => e(u)(t))
           }, null, 8, ["picking", "accept"])
         ])
       ]),
       _: 1
     }, 8, ["open", "title"]));
   }
-}), pt = Y(be), bt = Y(
-  be,
+}), vt = J(xe), xt = J(
+  xe,
   { props: { manage: !0 } }
-), vt = { class: "wx-media-field" }, ft = {
+), ft = { class: "wx-media-field" }, gt = {
   key: 0,
   class: "wx-media-field__label"
-}, gt = { class: "wx-media-field__body" }, xt = /* @__PURE__ */ R({
+}, yt = { class: "wx-media-field__body" }, kt = /* @__PURE__ */ R({
   __name: "MediaField",
-  props: /* @__PURE__ */ P({
+  props: /* @__PURE__ */ B({
     label: { default: void 0 },
     accept: { default: "image" },
     captions: { type: Boolean, default: !0 }
@@ -883,71 +938,71 @@ const it = {
     modelModifiers: {}
   }),
   emits: ["update:modelValue"],
-  setup(t) {
-    const r = L(t, "modelValue");
-    we();
-    const g = S("webx-media"), n = C(() => r.value?.url ?? null);
-    async function c() {
-      const a = await pt({ accept: "image" });
-      a && (r.value = { ...r.value, path: a.path, url: a.url });
+  setup(a) {
+    const v = a, u = q(a, "modelValue");
+    be();
+    const l = S("webx-media"), m = C(() => u.value?.url ?? null);
+    async function o() {
+      const s = await vt({ accept: v.accept });
+      s && (u.value = { ...u.value, path: s.path, url: s.url });
     }
-    function i() {
-      r.value = null;
+    function t() {
+      u.value = null;
     }
-    return (a, u) => (h(), W("div", vt, [
-      t.label ? (h(), W("span", ft, z(t.label), 1)) : T("", !0),
-      E("div", gt, [
-        n.value ? (h(), k(e(Je), {
+    return (s, x) => (b(), U("div", ft, [
+      a.label ? (b(), U("span", gt, z(a.label), 1)) : T("", !0),
+      V("div", yt, [
+        m.value ? (b(), k(e(Qe), {
           key: 0,
           class: "wx-media-field__preview",
-          src: n.value,
+          src: m.value,
           fit: "cover"
         }, null, 8, ["src"])) : T("", !0),
-        y(e(G), {
+        y(e(Y), {
           direction: "vertical",
           size: "sm",
           class: "wx-media-field__controls"
         }, {
-          default: b(() => [
-            y(e(G), { size: "xs" }, {
-              default: b(() => [
+          default: w(() => [
+            y(e(Y), { size: "xs" }, {
+              default: w(() => [
                 y(e(N), {
                   size: "sm",
                   icon: "image",
-                  onClick: c
+                  onClick: o
                 }, {
-                  default: b(() => [
-                    F(z(e(g)("manager.select")), 1)
+                  default: w(() => [
+                    F(z(e(l)("manager.select")), 1)
                   ]),
                   _: 1
                 }),
-                r.value ? (h(), k(e(N), {
+                u.value ? (b(), k(e(N), {
                   key: 0,
                   size: "sm",
                   variant: "text",
                   type: "danger",
-                  onClick: i
+                  onClick: t
                 }, {
-                  default: b(() => [
-                    F(z(e(g)("manager.delete")), 1)
+                  default: w(() => [
+                    F(z(e(l)("manager.delete")), 1)
                   ]),
                   _: 1
                 })) : T("", !0)
               ]),
               _: 1
             }),
-            t.captions && r.value ? (h(), W(K, { key: 0 }, [
-              y(e(j), {
-                "model-value": r.value.alt ?? "",
+            a.captions && u.value ? (b(), U(j, { key: 0 }, [
+              y(e(G), {
+                "model-value": u.value.alt ?? "",
                 size: "sm",
                 placeholder: "alt",
-                "onUpdate:modelValue": u[0] || (u[0] = (x) => r.value = { ...r.value, alt: String(x) })
+                "onUpdate:modelValue": x[0] || (x[0] = (p) => u.value = { ...u.value, alt: String(p) })
               }, null, 8, ["model-value"]),
-              y(e(j), {
-                "model-value": r.value.title ?? "",
+              y(e(G), {
+                "model-value": u.value.title ?? "",
                 size: "sm",
                 placeholder: "title",
-                "onUpdate:modelValue": u[1] || (u[1] = (x) => r.value = { ...r.value, title: String(x) })
+                "onUpdate:modelValue": x[1] || (x[1] = (p) => u.value = { ...u.value, title: String(p) })
               }, null, 8, ["model-value"])
             ], 64)) : T("", !0)
           ]),
@@ -957,29 +1012,29 @@ const it = {
     ]));
   }
 });
-function kt(t = {}) {
-  const r = t.path ?? "/media";
+function $t(a = {}) {
+  const v = a.path ?? "/media";
   return {
     id: "media",
-    path: r,
+    path: v,
     routes: [
       {
-        path: r,
+        path: v,
         name: "webx.media",
-        component: ct
+        component: mt
       }
     ]
   };
 }
 export {
-  xt as WxMediaField,
-  he as WxMediaManager,
-  ct as WxMediaPage,
-  be as WxMediaPicker,
-  lt as createMediaApi,
-  kt as media,
-  ot as mediaMessages,
-  bt as openMediaLibrary,
-  pt as openMediaPicker
+  kt as WxMediaField,
+  we as WxMediaManager,
+  mt as WxMediaPage,
+  xe as WxMediaPicker,
+  ot as createMediaApi,
+  $t as media,
+  it as mediaMessages,
+  xt as openMediaLibrary,
+  vt as openMediaPicker
 };
 //# sourceMappingURL=index.js.map