@feedmepos/mf-miniprogram-v2 0.2.1 → 0.2.2-dev.1

package/dist/App-C-7evg9W.js

@@ -0,0 +1,216 @@
+import { defineComponent as F, computed as v, ref as T, onMounted as R, onBeforeUnmount as z, resolveComponent as y, openBlock as s, createElementBlock as i, Fragment as S, createElementVNode as a, normalizeClass as x, createVNode as l, renderList as M, unref as t, withCtx as c, toDisplayString as b, createCommentVNode as E, createTextVNode as N, createBlock as V } from "vue";
+import { useRoute as K, RouterView as O } from "vue-router";
+import { useCoreStore as A } from "@feedmepos/mf-common";
+import { P as f } from "./PortalIcon-D1RqQMzD.js";
+import { p as $ } from "./portalContext-CTVzkJV7.js";
+import { w as D, p as k } from "./portalNavigation-DKCfwTH8.js";
+import { r as G, w as Q } from "./localPreference-DneUpUrQ.js";
+import { _ as U } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const H = {
+  class: "portal-sidebar",
+  "aria-label": "Mini Program navigation"
+}, J = ["aria-expanded", "aria-label"], W = {
+  id: "miniprogram-navigation",
+  class: "portal-nav"
+}, X = { class: "portal-nav-label" }, Y = { class: "portal-nav-label" }, Z = { class: "portal-main" }, ee = {
+  key: 0,
+  class: "portal-breadcrumb",
+  "aria-label": "Breadcrumb"
+}, ae = {
+  id: "miniprogram-content",
+  class: "portal-content",
+  tabindex: "-1"
+}, te = {
+  key: 0,
+  class: "portal-empty"
+}, oe = {
+  key: 1,
+  class: "portal-loading",
+  role: "status"
+}, le = {
+  key: 2,
+  class: "portal-empty",
+  role: "alert"
+}, re = {
+  key: 3,
+  class: "portal-empty"
+}, ne = /* @__PURE__ */ F({
+  __name: "App",
+  setup(se) {
+    const r = K(), _ = A(), n = $(), p = v(() => r.name === "miniprogram-v2-project"), m = T(
+      G(
+        "mpv2:portal-collapsed",
+        p.value || typeof window < "u" && window.matchMedia("(max-width: 1000px)").matches
+      )
+    ), g = v(() => {
+      var u;
+      return (u = n.context.value) == null ? void 0 : u.projectId;
+    }), q = v(() => p.value && r.params.projectId !== g.value), B = v(
+      () => {
+        var u;
+        return p.value ? (u = n.context.value) == null ? void 0 : u.project.name : String(r.meta.title ?? "Ecosystem");
+      }
+    ), I = [
+      { name: "miniprogram-v2-ecosystem", label: "Ecosystem", icon: "ecosystem" },
+      { name: "miniprogram-v2-brand-kit", label: "Brand Kit", icon: "brand" },
+      { name: "miniprogram-v2-pages", label: "Pages", icon: "pages" }
+    ], C = v(
+      () => g.value ? D(g.value, "workspace", r.query) : { name: "miniprogram-v2-control", query: r.query }
+    );
+    let P = !1;
+    R(() => {
+      P = _.hideSidebar.value, _.hideSidebar.value = !0;
+    }), z(() => {
+      _.hideSidebar.value = P;
+    });
+    function h() {
+      m.value = !m.value, Q("mpv2:portal-collapsed", m.value);
+    }
+    return (u, e) => {
+      const d = y("RouterLink"), w = y("FmIcon"), j = y("FmCircularProgress"), L = y("FmButton");
+      return s(), i(S, null, [
+        e[14] || (e[14] = a("link", {
+          href: "https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0..1,0",
+          rel: "stylesheet"
+        }, null, -1)),
+        a("div", {
+          class: x(["mpv2-app portal-shell", { "portal-shell--collapsed": m.value }])
+        }, [
+          e[13] || (e[13] = a("a", {
+            class: "portal-skip",
+            href: "#miniprogram-content"
+          }, "Skip to content", -1)),
+          a("aside", H, [
+            a("button", {
+              class: "portal-sidebar-toggle",
+              type: "button",
+              "aria-expanded": !m.value,
+              "aria-controls": "miniprogram-navigation",
+              "aria-label": m.value ? "Expand navigation" : "Collapse navigation",
+              onClick: h
+            }, [
+              l(f, { name: "collapse" }),
+              e[0] || (e[0] = a("span", { class: "portal-nav-label" }, "Mini Program", -1))
+            ], 8, J),
+            a("nav", W, [
+              (s(), i(S, null, M(I, (o) => l(d, {
+                key: o.name,
+                to: { name: o.name, query: t(k)(t(r).query) },
+                class: "portal-nav-item",
+                title: o.label,
+                "aria-label": o.label,
+                "aria-current": t(r).name === o.name ? "page" : void 0
+              }, {
+                default: c(() => [
+                  l(f, {
+                    name: o.icon
+                  }, null, 8, ["name"]),
+                  a("span", X, b(o.label), 1)
+                ]),
+                _: 2
+              }, 1032, ["to", "title", "aria-label", "aria-current"])), 64)),
+              e[3] || (e[3] = a("p", { class: "portal-nav-caption" }, "Platforms", -1)),
+              l(d, {
+                to: C.value,
+                class: x(["portal-nav-item", { "router-link-active": p.value }]),
+                title: "Mobile Ordering",
+                "aria-label": "Mobile Ordering",
+                "aria-current": p.value ? "page" : void 0
+              }, {
+                default: c(() => [
+                  l(f, { name: "mobile" }),
+                  e[1] || (e[1] = a("span", { class: "portal-nav-label" }, "Mobile Ordering", -1))
+                ]),
+                _: 1
+              }, 8, ["to", "class", "aria-current"]),
+              (s(), i(S, null, M(["tablet", "kiosk"], (o) => l(d, {
+                key: o,
+                to: { name: `miniprogram-v2-${o}`, query: t(k)(t(r).query) },
+                class: "portal-nav-item",
+                title: o === "tablet" ? "Tablet" : "Kiosk",
+                "aria-label": o === "tablet" ? "Tablet" : "Kiosk"
+              }, {
+                default: c(() => [
+                  l(f, { name: o }, null, 8, ["name"]),
+                  a("span", Y, b(o === "tablet" ? "Tablet" : "Kiosk"), 1)
+                ]),
+                _: 2
+              }, 1032, ["to", "title", "aria-label"])), 64)),
+              e[4] || (e[4] = a("div", { class: "portal-nav-divider" }, null, -1)),
+              l(d, {
+                to: { name: "miniprogram-v2-module-center", query: t(k)(t(r).query) },
+                class: x(["portal-nav-item", { "router-link-active": t(r).name === "miniprogram-v2-module-detail" }]),
+                title: "Module library",
+                "aria-label": "Module library"
+              }, {
+                default: c(() => [
+                  l(w, {
+                    name: "widgets",
+                    size: "md"
+                  }),
+                  e[2] || (e[2] = a("span", { class: "portal-nav-label" }, "Module library", -1))
+                ]),
+                _: 1
+              }, 8, ["to", "class"])
+            ]),
+            l(d, {
+              to: { name: "miniprogram-v2-settings", query: t(k)(t(r).query) },
+              class: "portal-nav-item portal-settings-link",
+              title: "Settings",
+              "aria-label": "Settings"
+            }, {
+              default: c(() => [
+                l(w, {
+                  name: "settings",
+                  size: "md"
+                }),
+                e[5] || (e[5] = a("span", { class: "portal-nav-label" }, "Settings", -1))
+              ]),
+              _: 1
+            }, 8, ["to"])
+          ]),
+          a("div", Z, [
+            p.value ? E("", !0) : (s(), i("header", ee, [
+              a("span", null, b(t(n).businessName.value), 1),
+              e[6] || (e[6] = a("span", { "aria-hidden": "true" }, "/", -1)),
+              a("span", null, b(B.value), 1)
+            ])),
+            a("div", ae, [
+              t(n).businessId.value ? t(n).loading.value ? (s(), i("div", oe, [
+                l(j, { size: "xl" }),
+                e[8] || (e[8] = a("span", null, "Loading your Mini Program…", -1))
+              ])) : t(n).error.value ? (s(), i("section", le, [
+                e[9] || (e[9] = a("h1", null, "Could not open this Mini Program", -1)),
+                a("p", null, b(t(n).error.value), 1),
+                l(L, {
+                  label: "Try again",
+                  onClick: t(n).refresh
+                }, null, 8, ["onClick"])
+              ])) : q.value ? (s(), i("section", re, [
+                e[11] || (e[11] = a("h1", null, "Project unavailable", -1)),
+                e[12] || (e[12] = a("p", null, "This link does not point to the selected business’s current mobile project.", -1)),
+                l(d, {
+                  to: C.value,
+                  class: "portal-link-button"
+                }, {
+                  default: c(() => [...e[10] || (e[10] = [
+                    N("Open current project", -1)
+                  ])]),
+                  _: 1
+                }, 8, ["to"])
+              ])) : (s(), V(t(O), {
+                key: `${t(n).businessId.value}:${g.value}`
+              })) : (s(), i("section", te, [...e[7] || (e[7] = [
+                a("h1", null, "Select a business", -1),
+                a("p", null, "Choose a business in the Portal header to open its Mini Program.", -1)
+              ])]))
+            ])
+          ])
+        ], 2)
+      ], 64);
+    };
+  }
+}), ge = /* @__PURE__ */ U(ne, [["__scopeId", "data-v-693787ad"]]);
+export {
+  ge as default
+};

package/dist/BrandKitView-B8t8RkHr.js

@@ -0,0 +1,221 @@
+import { defineComponent as U, ref as $, computed as N, onMounted as w, onScopeDispose as P, resolveComponent as K, openBlock as l, createElementBlock as r, createElementVNode as t, unref as s, toDisplayString as u, createCommentVNode as d, createVNode as v, createTextVNode as F, createBlock as R, Fragment as b, renderList as m, withDirectives as g, vModelText as y, createStaticVNode as H } from "vue";
+import { useRouter as M, onBeforeRouteLeave as O } from "vue-router";
+import { useDialog as Y } from "@feedmepos/ui-library";
+import { a as G, C as S, t as V, F as z, u as j, i as q } from "./useBrandKit-CpyR2j6m.js";
+import { _ as J } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const Q = { class: "portal-page" }, W = { class: "portal-page-inner brand-page" }, X = { class: "portal-page-heading" }, Z = { class: "brand-actions" }, aa = {
+  key: 0,
+  class: "brand-unsaved"
+}, ta = {
+  key: 0,
+  class: "portal-notice"
+}, ea = {
+  key: 1,
+  class: "portal-loading",
+  role: "status"
+}, sa = {
+  key: 2,
+  role: "alert",
+  class: "portal-section portal-error"
+}, oa = {
+  key: 3,
+  role: "status"
+}, na = { class: "portal-section" }, la = { class: "portal-section-head" }, ra = { class: "brand-color-grid" }, ia = ["value", "aria-label", "disabled", "onInput"], da = { class: "brand-field-label" }, ua = ["onUpdate:modelValue", "aria-label", "aria-invalid", "disabled"], ca = {
+  key: 0,
+  class: "portal-error"
+}, pa = { class: "brand-advanced" }, va = { class: "brand-role-grid" }, ba = ["value", "aria-label", "disabled", "onInput"], ha = ["onUpdate:modelValue", "aria-label", "aria-invalid", "disabled"], ma = { class: "portal-section" }, ga = { class: "portal-section-head" }, ya = { class: "brand-font-grid" }, _a = ["onUpdate:modelValue", "disabled", "aria-label"], fa = /* @__PURE__ */ U({
+  __name: "BrandKitView",
+  setup(ka) {
+    const a = j(), _ = G(), f = Y(), A = M(), c = $(!1), k = ["primary", "secondary", "accent", "background.base", "text.primary"], D = k.map((n) => S.find((o) => o.path === n)), I = S.filter((n) => !k.includes(n.path)), E = N(
+      () => !_.value || !a.state.loaded || a.state.loading || a.state.saving || a.hasInvalidColor.value || a.dirtyCount.value === 0
+    ), h = (n) => !!(a.state.colors[n] && !q(a.state.colors[n]));
+    function C(n, o) {
+      a.state.colors[n] = o.target.value, c.value = !1;
+    }
+    function B(n) {
+      n === "colors" ? a.state.colors = { ...a.state.savedColors } : a.state.fonts = { ...a.state.savedFonts }, c.value = !1;
+    }
+    function L() {
+      f.open({
+        title: "Save the live Brand Kit?",
+        message: "Colors and fonts are shared business settings. Apps using this kit pick up the change immediately. This does not build or publish application code.",
+        dismissAway: !0,
+        primaryActions: { text: "Save Brand Kit", close: !0 },
+        secondaryActions: { text: "Cancel", close: !0 }
+      }).onPrimary(() => {
+        a.save().then(() => {
+          c.value = !0;
+        }).catch(() => {
+          c.value = !1;
+        });
+      });
+    }
+    w(() => {
+      a.load();
+    });
+    function x(n) {
+      !a.dirtyCount.value && !a.state.saving || (n.preventDefault(), n.returnValue = "");
+    }
+    return w(() => window.addEventListener("beforeunload", x)), P(() => window.removeEventListener("beforeunload", x)), O((n) => a.state.saving ? !1 : a.dirtyCount.value ? (f.open({
+      title: "Discard unsaved Brand Kit changes?",
+      message: "Your live Brand Kit has not changed. Leave this page and discard the changes you have not saved?",
+      dismissAway: !0,
+      primaryActions: { text: "Discard and leave", close: !0 },
+      secondaryActions: { text: "Keep editing", close: !0 }
+    }).onPrimary(() => {
+      a.discardEdits(), A.push(n);
+    }), !1) : !0), (n, o) => {
+      const p = K("FmButton"), T = K("FmCircularProgress");
+      return l(), r("div", Q, [
+        t("div", W, [
+          t("header", X, [
+            o[3] || (o[3] = t("div", null, [
+              t("p", { class: "portal-eyebrow" }, "Shared across your business"),
+              t("h1", null, "Your business identity"),
+              t("p", { class: "portal-description" }, "Colors and typography for every app that uses your Brand Kit.")
+            ], -1)),
+            t("div", Z, [
+              s(a).dirtyCount.value ? (l(), r("span", aa, u(s(a).dirtyCount.value) + " unsaved", 1)) : d("", !0),
+              v(p, {
+                label: "Save Brand Kit",
+                icon: "save",
+                disabled: E.value,
+                loading: s(a).state.saving,
+                onClick: L
+              }, null, 8, ["disabled", "loading"])
+            ])
+          ]),
+          o[10] || (o[10] = t("p", { class: "portal-notice" }, " Saves update the live Brand Kit immediately. Application code still uses the separate Build release → Set live workflow. ", -1)),
+          s(_) ? d("", !0) : (l(), r("p", ta, " You can view this Brand Kit, but need Brand Kit management permission to save changes. ")),
+          s(a).state.loading ? (l(), r("div", ea, [
+            v(T, { size: "xl" }),
+            o[4] || (o[4] = F("Loading Brand Kit… ", -1))
+          ])) : d("", !0),
+          s(a).state.error ? (l(), r("div", sa, [
+            t("p", null, u(s(a).state.error), 1),
+            s(a).state.loaded ? d("", !0) : (l(), R(p, {
+              key: 0,
+              label: "Try again",
+              variant: "secondary",
+              onClick: o[0] || (o[0] = (e) => s(a).load(!0))
+            }))
+          ])) : d("", !0),
+          c.value && !s(a).dirtyCount.value && !s(a).state.error ? (l(), r("p", oa, " Brand Kit saved. Apps using this kit can now pick up the changes. ")) : d("", !0),
+          s(a).state.loaded && !s(a).state.loading ? (l(), r(b, { key: 4 }, [
+            t("section", na, [
+              t("div", la, [
+                o[5] || (o[5] = t("div", null, [
+                  t("h2", null, "Colors"),
+                  t("p", { class: "portal-description" }, "The colors that represent your brand identity.")
+                ], -1)),
+                v(p, {
+                  label: "Reset unsaved colors",
+                  variant: "tertiary",
+                  disabled: s(a).state.saving,
+                  onClick: o[1] || (o[1] = (e) => B("colors"))
+                }, null, 8, ["disabled"])
+              ]),
+              t("div", ra, [
+                (l(!0), r(b, null, m(s(D), (e) => (l(), r("label", {
+                  key: e.path,
+                  class: "brand-color-card"
+                }, [
+                  t("input", {
+                    type: "color",
+                    value: s(V)(s(a).state.colors[e.path] ?? ""),
+                    "aria-label": `${e.label} color picker`,
+                    disabled: s(a).state.saving,
+                    onInput: (i) => C(e.path, i)
+                  }, null, 40, ia),
+                  t("span", da, u(e.path === "background.base" ? "Background" : e.path === "text.primary" ? "Text" : e.label), 1),
+                  g(t("input", {
+                    "onUpdate:modelValue": (i) => s(a).state.colors[e.path] = i,
+                    class: "brand-value",
+                    "aria-label": `${e.path} hex color`,
+                    "aria-invalid": h(e.path),
+                    disabled: s(a).state.saving,
+                    placeholder: "App default",
+                    spellcheck: "false"
+                  }, null, 8, ua), [
+                    [y, s(a).state.colors[e.path]]
+                  ]),
+                  h(e.path) ? (l(), r("small", ca, "Enter a hex color")) : d("", !0)
+                ]))), 128))
+              ]),
+              t("details", pa, [
+                o[6] || (o[6] = t("summary", null, [
+                  F("More color roles "),
+                  t("span", null, "Keep control of text, surfaces and status colors")
+                ], -1)),
+                o[7] || (o[7] = t("p", { class: "portal-description" }, " Each role is saved independently. Changing a brand color does not automatically replace text or status colors. ", -1)),
+                t("div", va, [
+                  (l(!0), r(b, null, m(s(I), (e) => (l(), r("label", {
+                    key: e.path
+                  }, [
+                    t("span", null, u(e.group) + " · " + u(e.label), 1),
+                    t("div", null, [
+                      t("input", {
+                        type: "color",
+                        value: s(V)(s(a).state.colors[e.path] ?? ""),
+                        "aria-label": `${e.path} color picker`,
+                        disabled: s(a).state.saving,
+                        onInput: (i) => C(e.path, i)
+                      }, null, 40, ba),
+                      g(t("input", {
+                        "onUpdate:modelValue": (i) => s(a).state.colors[e.path] = i,
+                        "aria-label": `${e.path} hex color`,
+                        "aria-invalid": h(e.path),
+                        disabled: s(a).state.saving,
+                        class: "brand-value",
+                        placeholder: "App default",
+                        spellcheck: "false"
+                      }, null, 8, ha), [
+                        [y, s(a).state.colors[e.path]]
+                      ])
+                    ]),
+                    t("small", null, u(e.hint), 1)
+                  ]))), 128))
+                ])
+              ])
+            ]),
+            t("section", ma, [
+              t("div", ga, [
+                o[8] || (o[8] = t("div", null, [
+                  t("h2", null, "Typeface"),
+                  t("p", { class: "portal-description" }, "Fonts used in your interfaces.")
+                ], -1)),
+                v(p, {
+                  label: "Reset unsaved fonts",
+                  variant: "tertiary",
+                  disabled: s(a).state.saving,
+                  onClick: o[2] || (o[2] = (e) => B("fonts"))
+                }, null, 8, ["disabled"])
+              ]),
+              t("div", ya, [
+                (l(!0), r(b, null, m(s(z), (e) => (l(), r("label", {
+                  key: e.path
+                }, [
+                  t("span", null, u(e.label === "Heading" ? "Headings" : e.label), 1),
+                  g(t("input", {
+                    "onUpdate:modelValue": (i) => s(a).state.fonts[e.path] = i,
+                    class: "brand-font-input",
+                    disabled: s(a).state.saving,
+                    placeholder: "App default",
+                    "aria-label": `${e.label} font stack`,
+                    list: "brand-font-stacks"
+                  }, null, 8, _a), [
+                    [y, s(a).state.fonts[e.path]]
+                  ])
+                ]))), 128))
+              ]),
+              o[9] || (o[9] = H('<datalist id="brand-font-stacks" data-v-46dc6db9><option value="Inter, system-ui, sans-serif" data-v-46dc6db9></option><option value="&#39;Nunito Sans&#39;, system-ui, sans-serif" data-v-46dc6db9></option><option value="&#39;Poppins&#39;, system-ui, sans-serif" data-v-46dc6db9></option><option value="Georgia, serif" data-v-46dc6db9></option><option value="system-ui, sans-serif" data-v-46dc6db9></option></datalist><p class="portal-description brand-font-help" data-v-46dc6db9> Use a font already loaded by your app, or ask the agent to install it. Selecting a font stack here does not download Google Fonts. </p>', 2))
+            ])
+          ], 64)) : d("", !0)
+        ])
+      ]);
+    };
+  }
+}), Fa = /* @__PURE__ */ J(fa, [["__scopeId", "data-v-46dc6db9"]]);
+export {
+  Fa as default
+};