@feedmepos/mf-media 1.0.2-dev.2 → 1.0.2-dev.3

package/dist/{AssetLibrary-34e89cba.js → AssetLibrary-b9219b4e.js}

@@ -1,57 +1,57 @@
-import { defineComponent as be, computed as g, ref as s, onMounted as ge, watch as M, resolveComponent as B, openBlock as y, createElementBlock as I, createElementVNode as c, toDisplayString as C, unref as t, createVNode as i, createBlock as $, createCommentVNode as D, withCtx as j } from "vue";
-import { useCoreStore as we, useI18n as he } from "@feedmepos/mf-common";
-import { useDialog as xe } from "@feedmepos/ui-library";
-import { a as _e, F as Be, b as Ce, h as Ve, m as G, g as Te, t as ke, d as Se, U as Ie, c as De, f as Re, r as Fe, E as ze, e as ee, p as Pe } from "./media-picker-1cd70533.js";
-const Ae = { class: "p-24 relative min-h-full" }, Ue = { class: "flex items-center justify-between mb-8" }, Oe = { class: "fm-typo-en-title-md-600 fm-step-title line-clamp-2" }, Ne = { class: "flex gap-8" }, Ee = { class: "flex flex-col gap-12 mb-16" }, Me = { class: "flex gap-12" }, $e = { class: "flex items-center gap-12" }, je = { class: "flex-1 text-xs text-fm-color-typo-secondary" }, Ge = {
+import { defineComponent as ge, computed as g, ref as s, onMounted as we, watch as M, resolveComponent as B, openBlock as y, createElementBlock as I, createElementVNode as c, toDisplayString as V, unref as t, createVNode as i, createBlock as $, createCommentVNode as R, withCtx as j } from "vue";
+import { useCoreStore as xe, useI18n as he } from "@feedmepos/mf-common";
+import { useDialog as _e } from "@feedmepos/ui-library";
+import { a as Be, F as Ve, b as ke, h as Ce, m as G, g as Te, t as Se, d as Ie, U as Re, c as De, f as Fe, r as ze, E as Pe, e as ae, p as Ae } from "./media-picker-1cd70533.js";
+const Ue = { class: "flex items-center justify-between mb-8" }, Oe = { class: "fm-typo-en-title-md-600 fm-step-title line-clamp-2" }, Ne = { class: "flex gap-8" }, Ee = { class: "flex flex-col gap-12 mb-16" }, Me = { class: "flex gap-12" }, $e = { class: "flex items-center gap-12" }, je = { class: "flex-1 text-xs text-fm-color-typo-secondary" }, Ge = {
   key: 0,
   class: "text-fm-color-typo-primary font-semibold"
 }, Le = { key: 1 }, qe = {
   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"
-}, He = { class: "text-sm font-semibold" }, Je = { class: "flex justify-end gap-8 w-full" }, Ze = /* @__PURE__ */ be({
+}, He = { class: "text-sm font-semibold" }, Je = { class: "flex justify-end gap-8 w-full" }, Ze = /* @__PURE__ */ ge({
   __name: "AssetLibrary",
   setup(Ke) {
-    const R = we(), { t: l } = he(), d = g(() => {
+    const D = xe(), { t: l } = he(), d = g(() => {
       var e;
-      return ((e = R.currentBusiness.value) == null ? void 0 : e.id) ?? "";
-    }), ae = g(() => {
+      return ((e = D.currentBusiness.value) == null ? void 0 : e.id) ?? "";
+    }), le = g(() => {
       var e;
-      return (e = R.currentRestaurant.value) == null ? void 0 : e._id;
-    }), V = xe(), T = s(""), w = s([]), h = s(void 0), L = g(
-      () => (R.restaurants.value ?? []).map((e) => ({ label: e.profile.name, value: e._id }))
-    ), k = s(void 0), q = s([]), H = g(() => q.value.map((e) => ({ label: e, value: e }))), b = s([]), x = s([]), F = s(!1), m = s(1), z = s(0), P = s(0), A = s(!1), J = s("recent"), le = {
+      return (e = D.currentRestaurant.value) == null ? void 0 : e._id;
+    }), k = _e(), C = s(""), w = s([]), x = s(void 0), L = g(
+      () => (D.restaurants.value ?? []).map((e) => ({ label: e.profile.name, value: e._id }))
+    ), T = s(void 0), q = s([]), H = g(() => q.value.map((e) => ({ label: e, value: e }))), b = s([]), h = s([]), F = s(!1), m = s(1), z = s(0), P = s(0), A = s(!1), J = s(null), K = s("recent"), te = {
       recent: { sortBy: "createdAt", descending: !0 },
       name: { sortBy: "fileName", descending: !1 },
       size: { sortBy: "fileSizeBytes", descending: !0 }
-    }, K = [{ icon: "grid_view" }, { icon: "view_list" }], U = s(K[0]), te = g(() => U.value.icon === "grid_view" ? "grid" : "list"), O = _e(() => d.value);
+    }, Q = [{ icon: "grid_view" }, { icon: "view_list" }], U = s(Q[0]), se = g(() => U.value.icon === "grid_view" ? "grid" : "list"), O = Be(() => d.value);
     async function p() {
       if (d.value) {
         b.value.length === 0 && (F.value = !0), A.value = !0;
         try {
           const [e, a, u] = await Promise.all([
-            Se({
+            Ie({
               businessId: d.value,
-              restaurantId: h.value,
-              refType: k.value,
-              search: T.value || void 0,
+              restaurantId: x.value,
+              refType: T.value,
+              search: C.value || void 0,
               tags: w.value.length ? w.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: [Ie],
+              excludeTags: [Re],
               skip: De(m.value, G),
               limit: G,
-              ...le[J.value]
+              ...te[K.value]
             }),
-            Re(d.value),
+            Fe(d.value),
             // Caught rather than left to reject the whole Promise.all: this endpoint is new, and
             // a backend that hasn't deployed it yet must not be able to take the asset list down
             // with it — the refType dropdown just stays empty (see the v-if on refTypeOptions)
             // until the backend catches up.
-            Fe(d.value, h.value).catch(() => [])
+            ze(d.value, x.value).catch(() => [])
           ]);
-          b.value = e.resources, z.value = e.meta.totalResources, P.value = e.meta.totalPages, x.value = a, q.value = u, await O.load(
-            e.resources.filter((r) => !ze(r)).filter((r) => !!r.refId && !!r.refType).map((r) => ({ refType: r.refType, refId: r.refId }))
+          b.value = e.resources, z.value = e.meta.totalResources, P.value = e.meta.totalPages, h.value = a, q.value = u, await O.load(
+            e.resources.filter((r) => !Pe(r)).filter((r) => !!r.refId && !!r.refType).map((r) => ({ refType: r.refType, refId: r.refId }))
           );
         } finally {
           F.value = !1, A.value = !1;
@@ -63,31 +63,32 @@ const Ae = { class: "p-24 relative min-h-full" }, Ue = { class: "flex items-cent
     }
     async function E() {
       await p();
-      const e = Pe(m.value, P.value);
+      const e = Ae(m.value, P.value);
       e !== m.value && (m.value = e, await p());
     }
-    async function se(e) {
-      e !== m.value && (m.value = e, S(), await p());
+    async function ne(e) {
+      var a;
+      e !== m.value && (m.value = e, S(), (a = J.value) == null || a.scrollIntoView({ block: "start" }), await p());
     }
-    ge(p), M(d, N), M([w, J, h, k], N);
-    let Q;
-    M(T, () => {
-      clearTimeout(Q), Q = setTimeout(N, 250);
+    we(p), M(d, N), M([w, K, x, T], N);
+    let W;
+    M(C, () => {
+      clearTimeout(W), W = setTimeout(N, 250);
     });
     const o = s(/* @__PURE__ */ new Set());
-    function ne(e) {
+    function oe(e) {
       const a = new Set(o.value);
       a.has(e.id) ? a.delete(e.id) : a.add(e.id), o.value = a;
     }
     function S() {
       o.value = /* @__PURE__ */ new Set();
     }
-    function oe() {
+    function ie() {
       o.value = new Set(b.value.map((e) => e.id));
     }
-    function ie() {
+    function ue() {
       const e = o.value.size;
-      V.open({
+      k.open({
         title: l("media.library.deleteBulkTitle"),
         message: l("media.library.deleteBulkMessage", { count: e, disclaimer: l("media.library.deleteDisclaimer") }),
         primaryActions: { text: l("media.library.deleteConfirmButton"), close: !1, variant: "destructive" },
@@ -96,137 +97,141 @@ const Ae = { class: "p-24 relative min-h-full" }, Ue = { class: "flex items-cent
         await Promise.all(
           [...o.value].map((a) => {
             const u = b.value.find((r) => r.id === a);
-            return u ? ee(d.value, u) : Promise.resolve();
+            return u ? ae(d.value, u) : Promise.resolve();
           })
-        ), S(), await E(), V.close();
+        ), S(), await E(), k.close();
       });
     }
-    function ue(e) {
-      V.open({
+    function re(e) {
+      k.open({
         title: l("media.library.deleteOneTitle"),
         message: l("media.library.deleteOneMessage", { fileName: e.fileName, disclaimer: l("media.library.deleteDisclaimer") }),
         primaryActions: { text: l("media.library.deleteConfirmButton"), close: !1, variant: "destructive" },
         secondaryActions: { text: l("media.library.cancelButton"), close: !0 }
       }).onPrimary(async () => {
-        await ee(d.value, e);
+        await ae(d.value, e);
         const a = new Set(o.value);
-        a.delete(e.id), o.value = a, await E(), V.close();
+        a.delete(e.id), o.value = a, await E(), k.close();
       });
     }
-    const v = s(null), re = g(
+    const v = s(null), de = g(
       () => {
         var e;
         return (e = v.value) != null && e.refId ? O.byRefId.value.get(v.value.refId) ?? null : null;
       }
     );
-    function de(e) {
+    function ce(e) {
       v.value = e;
     }
-    async function W() {
+    async function X() {
       await p(), v.value && (v.value = b.value.find((e) => {
         var a;
         return e.id === ((a = v.value) == null ? void 0 : a.id);
       }) ?? null);
     }
-    async function ce() {
+    async function ve() {
       v.value = null, await E();
     }
     const _ = s(!1), f = s(null);
-    function ve() {
+    function me() {
       var e;
       (e = f.value) == null || e.reset(), _.value = !0;
     }
-    async function me() {
+    async function pe() {
       var e;
       (e = f.value) != null && e.stagedCount || (_.value = !1), await p();
     }
     return (e, a) => {
-      const u = B("FmButton"), r = B("FmSearch"), X = B("FmSelect"), pe = B("FmButtonGroup"), fe = B("FmDialog");
-      return y(), I("div", Ae, [
+      const u = B("FmButton"), r = B("FmSearch"), Y = B("FmSelect"), fe = B("FmButtonGroup"), ye = B("FmDialog");
+      return y(), I("div", {
+        ref_key: "libraryRoot",
+        ref: J,
+        class: "p-24 relative min-h-full"
+      }, [
         c("div", Ue, [
-          c("h1", Oe, C(t(l)("media.title")), 1),
+          c("h1", Oe, V(t(l)("media.title")), 1),
           c("div", Ne, [
             i(u, {
               label: t(l)("media.library.uploadButton"),
               "prepend-icon": "add",
               variant: "primary",
-              onClick: ve
+              onClick: me
             }, null, 8, ["label"])
           ])
         ]),
         c("div", Ee, [
           c("div", Me, [
             i(r, {
-              modelValue: T.value,
-              "onUpdate:modelValue": a[0] || (a[0] = (n) => T.value = n),
+              modelValue: C.value,
+              "onUpdate:modelValue": a[0] || (a[0] = (n) => C.value = n),
               placeholder: t(l)("media.library.searchPlaceholder"),
               class: "max-w-[280px]"
             }, null, 8, ["modelValue", "placeholder"]),
-            L.value.length ? (y(), $(X, {
+            L.value.length ? (y(), $(Y, {
               key: 0,
-              modelValue: h.value,
-              "onUpdate:modelValue": a[1] || (a[1] = (n) => h.value = n),
+              modelValue: x.value,
+              "onUpdate:modelValue": a[1] || (a[1] = (n) => x.value = n),
               items: L.value,
               placeholder: t(l)("media.library.allRestaurantsOption"),
               searchable: "",
               clearable: "",
               class: "max-w-[240px]"
-            }, null, 8, ["modelValue", "items", "placeholder"])) : D("", !0),
-            H.value.length ? (y(), $(X, {
+            }, null, 8, ["modelValue", "items", "placeholder"])) : R("", !0),
+            H.value.length ? (y(), $(Y, {
               key: 1,
-              modelValue: k.value,
-              "onUpdate:modelValue": a[2] || (a[2] = (n) => k.value = n),
+              modelValue: T.value,
+              "onUpdate:modelValue": a[2] || (a[2] = (n) => T.value = n),
               items: H.value,
               placeholder: t(l)("media.library.allRefTypesOption"),
               searchable: "",
               clearable: "",
               class: "max-w-[240px]"
-            }, null, 8, ["modelValue", "items", "placeholder"])) : D("", !0)
+            }, null, 8, ["modelValue", "items", "placeholder"])) : R("", !0)
           ]),
-          x.value.length ? (y(), $(t(Be), {
+          h.value.length ? (y(), $(t(Ve), {
             key: 0,
             modelValue: w.value,
             "onUpdate:modelValue": a[3] || (a[3] = (n) => w.value = n),
-            tags: x.value
-          }, null, 8, ["modelValue", "tags"])) : D("", !0),
+            tags: h.value
+          }, null, 8, ["modelValue", "tags"])) : R("", !0),
           c("div", $e, [
             c("div", je, [
-              o.value.size > 0 ? (y(), I("span", Ge, C(t(l)("media.library.selectedCount", { count: o.value.size })), 1)) : (y(), I("span", Le, C(t(l)("media.library.totalSummary", { count: z.value })), 1))
+              o.value.size > 0 ? (y(), I("span", Ge, V(t(l)("media.library.selectedCount", { count: o.value.size })), 1)) : (y(), I("span", Le, V(t(l)("media.library.totalSummary", { count: z.value })), 1))
             ]),
             i(u, {
               label: t(l)("media.library.selectAllButton"),
               variant: "tertiary",
               size: "md",
-              onClick: oe
+              onClick: ie
             }, null, 8, ["label"]),
-            i(pe, {
+            i(fe, {
               modelValue: U.value,
               "onUpdate:modelValue": a[4] || (a[4] = (n) => U.value = n),
-              items: K
+              items: Q
             }, null, 8, ["modelValue"])
           ])
         ]),
-        i(t(Ce), {
+        i(t(ke), {
           assets: b.value,
           loading: F.value,
-          view: te.value,
+          view: se.value,
           selectable: "",
           "selected-ids": o.value,
           "variants-by-ref-id": t(O).byRefId.value,
-          onOpen: de,
-          onToggle: ne,
-          onDelete: ue
+          onOpen: ce,
+          onToggle: oe,
+          onDelete: re
         }, null, 8, ["assets", "loading", "view", "selected-ids", "variants-by-ref-id"]),
-        i(t(Ve), {
+        i(t(Ce), {
           page: m.value,
           "page-size": t(G),
           "total-resources": z.value,
           "total-pages": P.value,
           disabled: A.value,
-          "onUpdate:page": se
+          "onUpdate:page": ne
         }, null, 8, ["page", "page-size", "total-resources", "total-pages", "disabled"]),
         o.value.size > 0 ? (y(), I("div", qe, [
-          c("span", He, C(t(l)("media.library.selectedCount", { count: o.value.size })), 1),
+          c("span", He, V(t(l)("media.library.selectedCount", { count: o.value.size })), 1),
           i(u, {
             label: t(l)("media.library.cancelButton"),
             variant: "tertiary",
@@ -238,61 +243,61 @@ const Ae = { class: "p-24 relative min-h-full" }, Ue = { class: "flex items-cent
             variant: "destructive",
             size: "md",
             "prepend-icon": "delete",
-            onClick: ie
+            onClick: ue
           }, null, 8, ["label"])
-        ])) : D("", !0),
+        ])) : R("", !0),
         i(t(Te), {
           asset: v.value,
-          image: re.value,
+          image: de.value,
           "business-id": d.value,
           onClose: a[5] || (a[5] = (n) => v.value = null),
-          onRenamed: W,
-          onDeleted: ce,
-          onChanged: W
+          onRenamed: X,
+          onDeleted: ve,
+          onChanged: X
         }, null, 8, ["asset", "image", "business-id"]),
-        i(fe, {
+        i(ye, {
           modelValue: _.value,
           "onUpdate:modelValue": a[9] || (a[9] = (n) => _.value = n),
           "max-width": 480
         }, {
           "dialog-header": j(() => [
-            c("div", null, C(t(l)("media.library.uploadDialogTitle")), 1)
+            c("div", null, V(t(l)("media.library.uploadDialogTitle")), 1)
           ]),
           "dialog-footer": j(() => {
-            var n, Y;
+            var n, Z;
             return [
               c("div", Je, [
                 i(u, {
                   label: t(l)("media.library.cancelButton"),
                   variant: "tertiary",
-                  onClick: a[7] || (a[7] = (ye) => _.value = !1)
+                  onClick: a[7] || (a[7] = (be) => _.value = !1)
                 }, null, 8, ["label"]),
                 i(u, {
                   label: t(l)("media.library.uploadSubmitButton", { count: ((n = f.value) == null ? void 0 : n.stagedCount) ?? 0 }),
                   variant: "primary",
-                  disabled: !((Y = f.value) != null && Y.stagedCount) || f.value.uploading,
-                  onClick: a[8] || (a[8] = (ye) => {
-                    var Z;
-                    return (Z = f.value) == null ? void 0 : Z.upload();
+                  disabled: !((Z = f.value) != null && Z.stagedCount) || f.value.uploading,
+                  onClick: a[8] || (a[8] = (be) => {
+                    var ee;
+                    return (ee = f.value) == null ? void 0 : ee.upload();
                   })
                 }, null, 8, ["label", "disabled"])
               ])
             ];
           }),
           default: j(() => [
-            i(t(ke), {
+            i(t(Se), {
               ref_key: "uploadPanelRef",
               ref: f,
               "business-id": d.value,
-              "restaurant-id": ae.value,
-              "available-tags": x.value,
-              onTagCreated: a[6] || (a[6] = (n) => x.value.push(n)),
-              onUploaded: me
+              "restaurant-id": le.value,
+              "available-tags": h.value,
+              onTagCreated: a[6] || (a[6] = (n) => h.value.push(n)),
+              onUploaded: pe
             }, null, 8, ["business-id", "restaurant-id", "available-tags"])
           ]),
           _: 1
         }, 8, ["modelValue"])
-      ]);
+      ], 512);
     };
   }
 });

package/dist/app.js

@@ -2545,7 +2545,7 @@ const ka = [
   {
     path: "/library",
     name: "$media-library",
-    component: Ae(S(() => import("./AssetLibrary-34e89cba.js"))),
+    component: Ae(S(() => import("./AssetLibrary-b9219b4e.js"))),
     meta: {
       validationManifest: {
         requiredCaslPermissions: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@feedmepos/mf-media",
-  "version": "1.0.2-dev.2",
+  "version": "1.0.2-dev.3",
   "type": "module",
   "files": [
     "dist"