@webx-ui/module-media 0.0.1

package/dist/index.js

@@ -0,0 +1,985 @@
+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({
+  __name: "DirectoryTree",
+  props: /* @__PURE__ */ P({
+    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);
+      },
+      { immediate: !0, deep: !0 }
+    );
+    function x(l) {
+      return {
+        ...l,
+        label: l.is_root ? i("manager.root") : l.title,
+        children: (l.children ?? []).map(x)
+      };
+    }
+    function p(l) {
+      return l.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);
+    }
+    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),
+      class: "wx-media-tree",
+      "node-key": "id",
+      draggable: "",
+      "show-lines": "",
+      onDrop: d
+    }, null, 8, ["selected", "expanded", "modelValue"]));
+  }
+}), Qe = /* @__PURE__ */ R({
+  __name: "FileGrid",
+  props: /* @__PURE__ */ P({
+    files: {},
+    api: {},
+    query: {},
+    single: { type: Boolean }
+  }, {
+    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")
+    );
+    function u() {
+      O.success(i("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;
+      try {
+        l = document.execCommand("copy");
+      } catch {
+        l = !1;
+      }
+      if (d.remove(), l) {
+        u();
+        return;
+      }
+      O.danger(`${i("errors.copy")} ${p.url}`, { duration: 0 });
+    }
+    return (p, d) => {
+      const l = Se("wx-select");
+      return t.files.length > 0 ? (h(), k(e(Ne), {
+        key: 0,
+        modelValue: n.value,
+        "onUpdate:modelValue": d[0] || (d[0] = (f) => n.value = f),
+        class: "wx-media-grid",
+        multiple: !t.single
+      }, {
+        default: b(({ isSelected: f }) => [
+          (h(!0), W(K, null, Q(t.files, (m) => Be((h(), k(e(Ae), {
+            key: m.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),
+            renamable: "",
+            editable: m.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]
+          ])), 128))
+        ]),
+        _: 1
+      }, 8, ["modelValue", "multiple"])) : (h(), k(e(Xe), {
+        key: 1,
+        description: a.value
+      }, null, 8, ["description"]));
+    };
+  }
+}), Ze = { class: "wx-media-toolbar" }, et = /* @__PURE__ */ R({
+  __name: "MediaToolbar",
+  props: /* @__PURE__ */ P({
+    canUpload: { type: Boolean },
+    canManage: { type: Boolean },
+    selected: {},
+    compact: { type: Boolean }
+  }, {
+    search: { default: "" },
+    searchModifiers: {},
+    type: { default: "all" },
+    typeModifiers: {},
+    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") },
+      ...["image", "video", "audio", "document", "other"].map((f) => ({
+        value: f,
+        label: u(`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), {
+        key: 0,
+        icon: "folder",
+        title: e(u)("manager.folders"),
+        size: "sm",
+        onClick: m[0] || (m[0] = (w) => a("folders"))
+      }, null, 8, ["title"])) : T("", !0),
+      y(e(j), {
+        modelValue: n.value,
+        "onUpdate:modelValue": m[1] || (m[1] = (w) => n.value = w),
+        class: "wx-media-toolbar__search",
+        placeholder: e(u)("manager.search"),
+        clearable: "",
+        size: "sm"
+      }, null, 8, ["modelValue", "placeholder"]),
+      y(e(ce), null, {
+        trigger: b(() => [
+          y(e(M), {
+            icon: "filter",
+            title: `${e(u)("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: b(() => [
+              F(z(w.label), 1)
+            ]),
+            _: 2
+          }, 1032, ["active", "onClick"]))), 128))
+        ]),
+        _: 1
+      }),
+      y(e(ce), null, {
+        trigger: b(() => [
+          y(e(M), {
+            icon: "arrow-down",
+            title: l.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: b(() => [
+              F(z(w.label), 1)
+            ]),
+            _: 2
+          }, 1032, ["active", "onClick"]))), 128))
+        ]),
+        _: 1
+      }),
+      t.canUpload ? (h(), k(e(M), {
+        key: 1,
+        type: "upload",
+        title: e(u)("manager.upload"),
+        size: "sm",
+        onClick: m[2] || (m[2] = (w) => a("upload"))
+      }, null, 8, ["title"])) : T("", !0),
+      t.canManage ? (h(), k(e(ee), {
+        key: 2,
+        size: "sm"
+      }, {
+        default: b(() => [
+          y(e(M), {
+            icon: "folder",
+            title: e(u)("manager.move"),
+            disabled: g.selected === 0,
+            onClick: m[3] || (m[3] = (w) => a("move"))
+          }, null, 8, ["title", "disabled"]),
+          y(e(M), {
+            type: "remove",
+            title: e(u)("manager.delete"),
+            disabled: g.selected === 0,
+            onClick: m[4] || (m[4] = (w) => a("remove"))
+          }, null, 8, ["title", "disabled"])
+        ]),
+        _: 1
+      })) : T("", !0)
+    ]));
+  }
+}), tt = /* @__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);
+    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)
+        },
+        ...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"),
+      width: 420
+    }, {
+      footer: b(() => [
+        y(e(G), { size: "sm" }, {
+          default: b(() => [
+            y(e(N), {
+              variant: "outline",
+              onClick: d[1] || (d[1] = (l) => e(c)())
+            }, {
+              default: b(() => [
+                F(z(e(i)("manager.cancel")), 1)
+              ]),
+              _: 1
+            }),
+            y(e(N), {
+              type: "primary",
+              disabled: u.value === null,
+              onClick: d[2] || (d[2] = (l) => e(n)(u.value))
+            }, {
+              default: b(() => [
+                F(z(e(i)("manager.move")), 1)
+              ]),
+              _: 1
+            }, 8, ["disabled"])
+          ]),
+          _: 1
+        })
+      ]),
+      default: b(() => [
+        y(e(Ie), {
+          modelValue: u.value,
+          "onUpdate:modelValue": d[0] || (d[0] = (l) => u.value = l),
+          options: a.value
+        }, null, 8, ["modelValue", "options"])
+      ]),
+      _: 1
+    }, 8, ["open", "title"]));
+  }
+}), at = /* @__PURE__ */ R({
+  __name: "NameDialog",
+  props: {
+    title: {},
+    label: { default: void 0 },
+    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();
+    });
+    function x() {
+      const p = a.value.trim();
+      p !== "" && n(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,
+      width: 420
+    }, {
+      footer: b(() => [
+        y(e(G), { size: "sm" }, {
+          default: b(() => [
+            y(e(N), {
+              variant: "outline",
+              onClick: d[1] || (d[1] = (l) => e(c)())
+            }, {
+              default: b(() => [
+                F(z(e(i)("manager.cancel")), 1)
+              ]),
+              _: 1
+            }),
+            y(e(N), {
+              type: "primary",
+              disabled: a.value.trim() === "",
+              onClick: x
+            }, {
+              default: b(() => [
+                F(z(t.confirmText ?? e(i)("manager.save")), 1)
+              ]),
+              _: 1
+            }, 8, ["disabled"])
+          ]),
+          _: 1
+        })
+      ]),
+      default: b(() => [
+        E("div", {
+          ref_key: "input",
+          ref: u
+        }, [
+          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"])
+          }, null, 8, ["modelValue", "placeholder", "aria-label"])
+        ], 512)
+      ]),
+      _: 1
+    }, 8, ["open", "title"]));
+  }
+});
+function lt(t) {
+  const r = `${t.apiPath}/media`, g = (n) => n.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 }
+    }),
+    files: (n = {}) => t.http.get(`${r}/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
+      }
+    }),
+    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) => {
+        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);
+        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));
+        }), p.addEventListener("load", () => {
+          const l = p.response;
+          if (p.status >= 200 && p.status < 300 && l?.data) {
+            u(l.data);
+            return;
+          }
+          x(
+            Object.assign(new Error(l?.message ?? "Upload failed"), {
+              status: p.status,
+              body: l
+            })
+          );
+        }), p.addEventListener("error", () => x(new Error("Upload failed"))), p.send(a);
+      });
+    },
+    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),
+    // 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)
+        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;
+    }
+  };
+}
+function nt() {
+  const t = document.cookie.split("; ").find((r) => r.startsWith("XSRF-TOKEN="));
+  return t ? decodeURIComponent(t.slice(11)) : null;
+}
+const ot = {
+  module: {
+    title: "Files"
+  },
+  manager: {
+    root: "Library",
+    search: "Search files",
+    "new-folder": "New folder",
+    "folder-name": "Folder name",
+    rename: "Rename",
+    move: "Move",
+    "move-to": "Move to…",
+    delete: "Delete",
+    upload: "Upload",
+    "upload-hint": "Drop files here or choose them",
+    select: "Select",
+    selected: ":count selected",
+    empty: "This folder is empty",
+    "empty-search": "Nothing matches :query",
+    "all-types": "All types",
+    image: "Images",
+    video: "Video",
+    audio: "Audio",
+    document: "Documents",
+    other: "Other",
+    "sort-newest": "Newest first",
+    "sort-oldest": "Oldest first",
+    "sort-name": "By name",
+    "sort-size": "Largest first",
+    "duplicate-added": "That file was already in this folder",
+    uploaded: ":count file(s) added",
+    cancel: "Cancel",
+    save: "Save",
+    folders: "Folders",
+    edit: "Edit",
+    "copy-link": "Copy the link",
+    "link-copied": "Link copied",
+    "status-files": "Files: :count",
+    "status-selected": "selected: :count",
+    "status-size": "size: :size"
+  },
+  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"
+  },
+  errors: {
+    "directory-not-empty": "This folder is not empty.",
+    "root-immutable": "The library root cannot be moved or deleted.",
+    "directory-into-itself": "A folder cannot be moved into itself.",
+    "not-an-image": "This file is not an image.",
+    "image-too-large": "This image is larger than :megapixels megapixels.",
+    upload: "That file was not accepted.",
+    copy: "The clipboard is not available here. The address:",
+    "unsupported-type": "Only these can be uploaded: :types.",
+    "file-too-large": "The file is larger than :size MB.",
+    "too-many-files": "No more than :count files at a time."
+  },
+  files: {
+    copy: ":name (copy)"
+  },
+  validation: {
+    title: "name",
+    parent_id: "parent folder",
+    directory_id: "folder",
+    files: "files"
+  }
+}, fe = /* @__PURE__ */ new WeakSet();
+function we() {
+  try {
+    const { i18n: t } = ye();
+    fe.has(t) || (t.defaults("webx-media", ot), fe.add(t));
+  } catch {
+  }
+}
+const it = {
+  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({
+  __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);
+    });
+    async function V() {
+      d.value = await i.directories(), l.value ??= d.value[0]?.id ?? null, await U(1);
+    }
+    async function U(s = f.value?.meta.current_page ?? 1) {
+      J.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,
+          sort: X.value,
+          page: s
+        }), m.value = [];
+      } finally {
+        J.value = !1;
+      }
+    }
+    function $e() {
+      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))
+        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)]);
+        } catch ($) {
+          O.danger(ue($) ?? a("errors.upload"));
+        }
+    }
+    const oe = Y(at);
+    async function ie() {
+      const s = await oe({
+        title: a("manager.new-folder"),
+        confirmText: a("manager.new-folder")
+      });
+      s === void 0 || l.value === null || (await i.createDirectory(l.value, s), await V());
+    }
+    async function re() {
+      const s = D.value;
+      if (!s || s.is_root)
+        return;
+      const o = await oe({
+        title: a("manager.rename"),
+        value: s.title,
+        confirmText: a("manager.save")
+      });
+      o !== void 0 && (await i.renameDirectory(s.id, o), await V());
+    }
+    async function se() {
+      const s = D.value;
+      if (!(!s || s.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"),
+            tone: "danger"
+          }))
+            return;
+          await i.deleteDirectory(s.id, !0);
+        }
+        l.value = null, await V();
+      }
+    }
+    async function de(s, o) {
+      try {
+        await i.moveDirectory(s, o);
+      } catch (v) {
+        O.danger(ue(v) ?? a("errors.directory-into-itself"));
+      }
+      await V();
+    }
+    const Me = Y(tt);
+    async function Ce() {
+      const s = await Me({
+        directories: d.value,
+        from: l.value,
+        count: m.value.length
+      });
+      s !== void 0 && (await i.move([...m.value], s), await Promise.all([V(), U()]));
+    }
+    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"),
+        tone: "danger"
+      }) && (await i.remove(s), await Promise.all([V(), U()]));
+    }
+    async function ze(s, o) {
+      await i.rename(s.id, o), await U();
+    }
+    async function De(s) {
+      await i.removeOne(s.id), await Promise.all([V(), U()]);
+    }
+    async function Ue(s) {
+      const o = await Ge({ src: s.url, fileName: s.file_name, filters: !1 });
+      o && (await i.edit(s.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());
+    }
+    function We(s) {
+      const o = (v) => {
+        for (const $ of v) {
+          if ($.id === s)
+            return $;
+          const q = o($.children ?? []);
+          if (q)
+            return q;
+        }
+        return null;
+      };
+      return s === null ? null : o(d.value);
+    }
+    function Ve(s) {
+      const o = s?.body;
+      return o?.code === "directory_not_empty" ? o.counts ?? null : null;
+    }
+    function ue(s) {
+      return s?.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(s, o) {
+      let v;
+      return () => {
+        clearTimeout(v), v = setTimeout(s, o);
+      };
+    }
+    return (s, o) => (h(), W("div", {
+      ref_key: "root",
+      ref: u,
+      class: Oe(["wx-media", { "wx-media--compact": p.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
+        }, null, 8, ["selected", "directories"]),
+        I.value ? (h(), k(e(ee), {
+          key: 0,
+          size: "sm",
+          align: "start"
+        }, {
+          default: b(() => [
+            y(e(M), {
+              type: "add",
+              title: e(a)("manager.new-folder"),
+              onClick: ie
+            }, null, 8, ["title"]),
+            y(e(M), {
+              type: "edit",
+              title: e(a)("manager.rename"),
+              disabled: !D.value || D.value.is_root,
+              onClick: re
+            }, null, 8, ["title", "disabled"]),
+            y(e(M), {
+              type: "remove",
+              title: e(a)("manager.delete"),
+              disabled: !D.value || D.value.is_root,
+              onClick: se
+            }, 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),
+          sort: X.value,
+          "onUpdate:sort": o[3] || (o[3] = (v) => X.value = v),
+          "can-upload": ke.value && !t.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)
+        }, null, 8, ["search", "type", "sort", "can-upload", "can-manage", "selected", "compact"]),
+        E("input", {
+          ref_key: "picker",
+          ref: ne,
+          type: "file",
+          multiple: "",
+          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,
+          onEdit: Ue,
+          onRemove: De,
+          onOpen: o[6] || (o[6] = (v) => n("pick", v))
+        }, 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)
+        ]),
+        f.value && f.value.meta.last_page > 1 ? (h(), k(e(Ke), {
+          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,
+          size: "sm",
+          onChange: o[7] || (o[7] = ({ page: v }) => U(v))
+        }, 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),
+        side: "left",
+        title: e(a)("manager.folders"),
+        size: 280
+      }, {
+        default: b(() => [
+          E("div", ut, [
+            y(ve, {
+              selected: l.value,
+              "onUpdate:selected": [
+                o[8] || (o[8] = (v) => l.value = v),
+                o[9] || (o[9] = (v) => A.value = !1)
+              ],
+              directories: d.value,
+              onMove: de
+            }, null, 8, ["selected", "directories"]),
+            I.value ? (h(), k(e(ee), {
+              key: 0,
+              size: "sm",
+              align: "start"
+            }, {
+              default: b(() => [
+                y(e(M), {
+                  type: "add",
+                  title: e(a)("manager.new-folder"),
+                  onClick: ie
+                }, null, 8, ["title"]),
+                y(e(M), {
+                  type: "edit",
+                  title: e(a)("manager.rename"),
+                  disabled: !D.value || D.value.is_root,
+                  onClick: re
+                }, null, 8, ["title", "disabled"]),
+                y(e(M), {
+                  type: "remove",
+                  title: e(a)("manager.delete"),
+                  disabled: !D.value || D.value.is_root,
+                  onClick: se
+                }, null, 8, ["title", "disabled"])
+              ]),
+              _: 1
+            })) : T("", !0)
+          ])
+        ]),
+        _: 1
+      }, 8, ["open", "title"])
+    ], 2));
+  }
+}), ct = /* @__PURE__ */ R({
+  __name: "MediaPage",
+  setup(t) {
+    return (r, g) => (h(), k(e(Ye), {
+      class: "wx-media-page",
+      padding: "md"
+    }, {
+      default: b(() => [
+        y(he)
+      ]),
+      _: 1
+    }));
+  }
+}), mt = { class: "wx-media-picker" }, be = /* @__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"),
+      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))
+          }, null, 8, ["picking", "accept"])
+        ])
+      ]),
+      _: 1
+    }, 8, ["open", "title"]));
+  }
+}), pt = Y(be), bt = Y(
+  be,
+  { props: { manage: !0 } }
+), vt = { class: "wx-media-field" }, ft = {
+  key: 0,
+  class: "wx-media-field__label"
+}, gt = { class: "wx-media-field__body" }, xt = /* @__PURE__ */ R({
+  __name: "MediaField",
+  props: /* @__PURE__ */ P({
+    label: { default: void 0 },
+    accept: { default: "image" },
+    captions: { type: Boolean, default: !0 }
+  }, {
+    modelValue: { default: null },
+    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 });
+    }
+    function i() {
+      r.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), {
+          key: 0,
+          class: "wx-media-field__preview",
+          src: n.value,
+          fit: "cover"
+        }, null, 8, ["src"])) : T("", !0),
+        y(e(G), {
+          direction: "vertical",
+          size: "sm",
+          class: "wx-media-field__controls"
+        }, {
+          default: b(() => [
+            y(e(G), { size: "xs" }, {
+              default: b(() => [
+                y(e(N), {
+                  size: "sm",
+                  icon: "image",
+                  onClick: c
+                }, {
+                  default: b(() => [
+                    F(z(e(g)("manager.select")), 1)
+                  ]),
+                  _: 1
+                }),
+                r.value ? (h(), k(e(N), {
+                  key: 0,
+                  size: "sm",
+                  variant: "text",
+                  type: "danger",
+                  onClick: i
+                }, {
+                  default: b(() => [
+                    F(z(e(g)("manager.delete")), 1)
+                  ]),
+                  _: 1
+                })) : T("", !0)
+              ]),
+              _: 1
+            }),
+            t.captions && r.value ? (h(), W(K, { key: 0 }, [
+              y(e(j), {
+                "model-value": r.value.alt ?? "",
+                size: "sm",
+                placeholder: "alt",
+                "onUpdate:modelValue": u[0] || (u[0] = (x) => r.value = { ...r.value, alt: String(x) })
+              }, null, 8, ["model-value"]),
+              y(e(j), {
+                "model-value": r.value.title ?? "",
+                size: "sm",
+                placeholder: "title",
+                "onUpdate:modelValue": u[1] || (u[1] = (x) => r.value = { ...r.value, title: String(x) })
+              }, null, 8, ["model-value"])
+            ], 64)) : T("", !0)
+          ]),
+          _: 1
+        })
+      ])
+    ]));
+  }
+});
+function kt(t = {}) {
+  const r = t.path ?? "/media";
+  return {
+    id: "media",
+    path: r,
+    routes: [
+      {
+        path: r,
+        name: "webx.media",
+        component: ct
+      }
+    ]
+  };
+}
+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
+};
+//# sourceMappingURL=index.js.map