@feedmepos/mf-media 0.0.7 → 0.0.8

package/dist/AssetLibrary-145d5ac2.js

@@ -0,0 +1,267 @@
+import { defineComponent as ie, computed as g, ref as u, onMounted as se, watch as P, resolveComponent as k, openBlock as x, createElementBlock as C, createElementVNode as v, toDisplayString as w, unref as t, createVNode as s, createBlock as oe, createCommentVNode as j, withCtx as A } from "vue";
+import { useCoreStore as ue, useI18n as re } from "@feedmepos/mf-common";
+import { useDialog as de } from "@feedmepos/ui-library";
+import { k as ce, r as ve, $ as me, m as fe, p as pe, x as be, R as ye, a as ge, V as xe, Z as E } from "./media-picker-1af09b4a.js";
+const we = { class: "p-24 relative min-h-full" }, Be = { class: "flex items-center justify-between mb-16" }, _e = { class: "fm-typo-en-title-md-600 fm-step-title line-clamp-2" }, ke = { class: "flex gap-8" }, Ce = { class: "flex flex-col gap-12 mb-16" }, Se = { class: "flex items-center gap-12" }, he = { class: "flex-1 text-xs text-fm-color-typo-secondary" }, Ve = {
+  key: 0,
+  class: "text-fm-color-typo-primary font-semibold"
+}, De = { key: 1 }, ze = {
+  key: 0,
+  class: "fixed bottom-24 left-1/2 -translate-x-1/2 flex items-center gap-12 bg-white border rounded-lg shadow-lg px-16 py-8 z-30"
+}, Ie = { class: "text-sm font-semibold" }, Pe = { class: "flex justify-end gap-8 w-full" }, $e = /* @__PURE__ */ ie({
+  __name: "AssetLibrary",
+  setup(Ae) {
+    const T = ue(), { t: a } = re(), r = g(() => {
+      var e;
+      return ((e = T.currentBusiness.value) == null ? void 0 : e.id) ?? "";
+    }), S = g(() => {
+      var e;
+      return (e = T.currentRestaurant.value) == null ? void 0 : e._id;
+    }), B = de(), h = u(!1);
+    function G(e) {
+      console.log("[media-debug] MediaPickerModal selected", e.ratio ?? "original", e.url), d();
+    }
+    const _ = u(""), p = u([]), m = u([]), b = u([]), V = u(!1), R = u("recent"), L = {
+      recent: { sortBy: "createdAt", descending: !0 },
+      name: { sortBy: "fileName", descending: !1 },
+      size: { sortBy: "fileSizeBytes", descending: !0 }
+    }, F = [{ icon: "grid_view" }, { icon: "view_list" }], D = u(F[0]), Z = g(() => D.value.icon === "grid_view" ? "grid" : "list"), K = g(() => {
+      const e = m.value.reduce((l, n) => l + n.fileSizeBytes, 0);
+      return e >= 1024 * 1024 ? `${(e / 1024 / 1024).toFixed(1)} MB` : `${Math.round(e / 1024)} KB`;
+    }), z = ce(() => r.value);
+    async function d() {
+      if (r.value) {
+        m.value.length === 0 && (V.value = !0);
+        try {
+          const [e, l] = await Promise.all([
+            ye({
+              businessId: r.value,
+              restaurantId: S.value,
+              search: _.value || void 0,
+              tags: p.value.length ? p.value : void 0,
+              // AI-composed images are assets from the moment their bytes land — they have to be, or
+              // their URL could not render — so the library hides them until "save to the asset
+              // centre" removes this tag.
+              excludeTags: [ge],
+              ...L[R.value]
+            }),
+            xe(r.value)
+          ]);
+          m.value = e.resources, b.value = l, await z.load(e.resources.map((n) => n.refId).filter((n) => !!n));
+        } finally {
+          V.value = !1;
+        }
+      }
+    }
+    se(d), P(r, d), P([p, R], d);
+    let M;
+    P(_, () => {
+      clearTimeout(M), M = setTimeout(d, 250);
+    });
+    const o = u(/* @__PURE__ */ new Set());
+    function q(e) {
+      const l = new Set(o.value);
+      l.has(e.id) ? l.delete(e.id) : l.add(e.id), o.value = l;
+    }
+    function $() {
+      o.value = /* @__PURE__ */ new Set();
+    }
+    function H() {
+      o.value = new Set(m.value.map((e) => e.id));
+    }
+    function J() {
+      const e = o.value.size;
+      B.open({
+        title: a("media.library.deleteBulkTitle"),
+        message: a("media.library.deleteBulkMessage", { count: e, disclaimer: a("media.library.deleteDisclaimer") }),
+        primaryActions: { text: a("media.library.deleteConfirmButton"), close: !1, variant: "destructive" },
+        secondaryActions: { text: a("media.library.cancelButton"), close: !0 }
+      }).onPrimary(async () => {
+        await Promise.all(
+          [...o.value].map((l) => {
+            const n = m.value.find((I) => I.id === l);
+            return n ? E(r.value, n) : Promise.resolve();
+          })
+        ), $(), await d(), B.close();
+      });
+    }
+    function Q(e) {
+      B.open({
+        title: a("media.library.deleteOneTitle"),
+        message: a("media.library.deleteOneMessage", { fileName: e.fileName, disclaimer: a("media.library.deleteDisclaimer") }),
+        primaryActions: { text: a("media.library.deleteConfirmButton"), close: !1, variant: "destructive" },
+        secondaryActions: { text: a("media.library.cancelButton"), close: !0 }
+      }).onPrimary(async () => {
+        await E(r.value, e);
+        const l = new Set(o.value);
+        l.delete(e.id), o.value = l, await d(), B.close();
+      });
+    }
+    const c = u(null), W = g(
+      () => {
+        var e;
+        return (e = c.value) != null && e.refId ? z.byRefId.value.get(c.value.refId) ?? null : null;
+      }
+    );
+    function X(e) {
+      c.value = e;
+    }
+    async function O() {
+      await d(), c.value && (c.value = m.value.find((e) => {
+        var l;
+        return e.id === ((l = c.value) == null ? void 0 : l.id);
+      }) ?? null);
+    }
+    async function Y() {
+      c.value = null, await d();
+    }
+    const y = u(!1), f = u(null);
+    function ee() {
+      var e;
+      (e = f.value) == null || e.reset(), y.value = !0;
+    }
+    async function le() {
+      var e;
+      (e = f.value) != null && e.stagedCount || (y.value = !1), await d();
+    }
+    return (e, l) => {
+      const n = k("FmButton"), I = k("FmSearch"), ae = k("FmButtonGroup"), te = k("FmDialog");
+      return x(), C("div", we, [
+        v("div", Be, [
+          v("h1", _e, w(t(a)("media.title")), 1),
+          v("div", ke, [
+            s(n, {
+              label: t(a)("media.library.testPickerButton"),
+              variant: "tertiary",
+              onClick: l[0] || (l[0] = (i) => h.value = !0)
+            }, null, 8, ["label"]),
+            s(n, {
+              label: t(a)("media.library.uploadButton"),
+              "prepend-icon": "add",
+              variant: "primary",
+              onClick: ee
+            }, null, 8, ["label"])
+          ])
+        ]),
+        v("div", Ce, [
+          s(I, {
+            modelValue: _.value,
+            "onUpdate:modelValue": l[1] || (l[1] = (i) => _.value = i),
+            placeholder: t(a)("media.library.searchPlaceholder"),
+            class: "max-w-[280px]"
+          }, null, 8, ["modelValue", "placeholder"]),
+          b.value.length ? (x(), oe(t(ve), {
+            key: 0,
+            modelValue: p.value,
+            "onUpdate:modelValue": l[2] || (l[2] = (i) => p.value = i),
+            tags: b.value
+          }, null, 8, ["modelValue", "tags"])) : j("", !0),
+          v("div", Se, [
+            v("div", he, [
+              o.value.size > 0 ? (x(), C("span", Ve, w(t(a)("media.library.selectedCount", { count: o.value.size })), 1)) : (x(), C("span", De, w(t(a)("media.library.totalSummary", { count: m.value.length, size: K.value })), 1))
+            ]),
+            s(n, {
+              label: t(a)("media.library.selectAllButton"),
+              variant: "tertiary",
+              size: "md",
+              onClick: H
+            }, null, 8, ["label"]),
+            s(ae, {
+              modelValue: D.value,
+              "onUpdate:modelValue": l[3] || (l[3] = (i) => D.value = i),
+              items: F
+            }, null, 8, ["modelValue"])
+          ])
+        ]),
+        s(t(me), {
+          assets: m.value,
+          loading: V.value,
+          view: Z.value,
+          selectable: "",
+          "selected-ids": o.value,
+          "variants-by-ref-id": t(z).byRefId.value,
+          onOpen: X,
+          onToggle: q,
+          onDelete: Q
+        }, null, 8, ["assets", "loading", "view", "selected-ids", "variants-by-ref-id"]),
+        o.value.size > 0 ? (x(), C("div", ze, [
+          v("span", Ie, w(t(a)("media.library.selectedCount", { count: o.value.size })), 1),
+          s(n, {
+            label: t(a)("media.library.cancelButton"),
+            variant: "tertiary",
+            size: "md",
+            onClick: $
+          }, null, 8, ["label"]),
+          s(n, {
+            label: t(a)("media.library.deleteSelectedButton"),
+            variant: "destructive",
+            size: "md",
+            "prepend-icon": "delete",
+            onClick: J
+          }, null, 8, ["label"])
+        ])) : j("", !0),
+        s(t(fe), {
+          asset: c.value,
+          image: W.value,
+          "business-id": r.value,
+          onClose: l[4] || (l[4] = (i) => c.value = null),
+          onRenamed: O,
+          onDeleted: Y,
+          onChanged: O
+        }, null, 8, ["asset", "image", "business-id"]),
+        s(t(pe), {
+          open: h.value,
+          "onUpdate:open": l[5] || (l[5] = (i) => h.value = i),
+          "business-id": r.value,
+          "restaurant-id": S.value,
+          onSelect: G
+        }, null, 8, ["open", "business-id", "restaurant-id"]),
+        s(te, {
+          modelValue: y.value,
+          "onUpdate:modelValue": l[9] || (l[9] = (i) => y.value = i),
+          "max-width": 480
+        }, {
+          "dialog-header": A(() => [
+            v("div", null, w(t(a)("media.library.uploadDialogTitle")), 1)
+          ]),
+          "dialog-footer": A(() => {
+            var i, U;
+            return [
+              v("div", Pe, [
+                s(n, {
+                  label: t(a)("media.library.cancelButton"),
+                  variant: "tertiary",
+                  onClick: l[7] || (l[7] = (ne) => y.value = !1)
+                }, null, 8, ["label"]),
+                s(n, {
+                  label: t(a)("media.library.uploadSubmitButton", { count: ((i = f.value) == null ? void 0 : i.stagedCount) ?? 0 }),
+                  variant: "primary",
+                  disabled: !((U = f.value) != null && U.stagedCount) || f.value.uploading,
+                  onClick: l[8] || (l[8] = (ne) => {
+                    var N;
+                    return (N = f.value) == null ? void 0 : N.upload();
+                  })
+                }, null, 8, ["label", "disabled"])
+              ])
+            ];
+          }),
+          default: A(() => [
+            s(t(be), {
+              ref_key: "uploadPanelRef",
+              ref: f,
+              "business-id": r.value,
+              "restaurant-id": S.value,
+              "available-tags": b.value,
+              onTagCreated: l[6] || (l[6] = (i) => b.value.push(i)),
+              onUploaded: le
+            }, null, 8, ["business-id", "restaurant-id", "available-tags"])
+          ]),
+          _: 1
+        }, 8, ["modelValue"])
+      ]);
+    };
+  }
+});
+export {
+  $e as default
+};