@feedmepos/mf-brand-app-builder 0.5.14-alpha.10 → 0.5.14-alpha.11

package/dist/{App-3_s-e3nq.js → App-6UWAVy14.js}

@@ -61,7 +61,7 @@ const $ = { class: "shrink-0 w-64 h-full bg-fm-color-neutral-white border-r bord
     }
     return x(async () => {
       console.log(
-        `Running v0.5.14-alpha.10 on ${e.namespace.value}`
+        `Running v0.5.14-alpha.11 on ${e.namespace.value}`
       ), e.hideSidebar.value = !0;
     }), y(() => {
       e.hideSidebar.value = !1;

package/dist/BrandkitView-BEZXT4cT.js

@@ -0,0 +1,304 @@
+import { defineComponent as x, resolveComponent as p, createElementBlock as v, openBlock as c, createElementVNode as r, createVNode as s, createCommentVNode as b, withCtx as f, unref as F, normalizeStyle as C, toDisplayString as g, ref as $, watch as B, createBlock as w } from "vue";
+import { B as U } from "./index-CgMKkAzT.js";
+import { K as S } from "./ColorPicker-BXOagDFY.js";
+import { u as R } from "./index-CajMju7D.js";
+import { useCoreStore as P } from "@feedmepos/mf-common";
+import { u as E } from "./index-DzaJbB6y.js";
+const N = { class: "fm-typo-en-body-md-400" }, h = { class: "flex gap-8 items-center" }, T = { class: "p-4 relative" }, A = { class: "shadow-lg rounded-lg p-8" }, I = {
+  key: 0,
+  class: "absolute top-8 right-8"
+}, V = { class: "space-y-4" }, j = { class: "text-fm-color-typo-secondary" }, K = { class: "text-fm-color-typo-secondary px-4" }, n = /* @__PURE__ */ x({
+  __name: "ColorSelection",
+  props: {
+    initialColor: {},
+    color: {},
+    title: {},
+    description: {}
+  },
+  emits: ["remove", "update"],
+  setup(k, { emit: u }) {
+    const a = (e) => {
+      console.log("copy", e);
+    }, m = u;
+    return (e, l) => {
+      const y = p("FmButton"), d = p("FmPopover"), o = p("FmIcon");
+      return c(), v("div", N, [
+        r("div", h, [
+          r("div", T, [
+            s(d, null, {
+              "popover-button": f(() => [
+                r("div", {
+                  class: "aspect-square w-[60px] rounded-sm border border-fm-color-neutral-gray-200 cursor-pointer",
+                  style: C({
+                    backgroundColor: e.color
+                  })
+                }, null, 4)
+              ]),
+              default: f(() => [
+                r("div", A, [
+                  s(F(S), {
+                    copy: a,
+                    onColorCopy: l[0] || (l[0] = (i) => a(i.cssColor)),
+                    "default-format": "hex",
+                    color: e.color,
+                    onColorChange: l[1] || (l[1] = (i) => m("update", i.cssColor))
+                  }, {
+                    "copy-button": f(() => [
+                      s(y, {
+                        class: "w-full h-32",
+                        variant: "secondary",
+                        icon: "content_copy"
+                      })
+                    ]),
+                    _: 1
+                  }, 8, ["color"])
+                ])
+              ]),
+              _: 1
+            }),
+            e.initialColor != e.color ? (c(), v("div", I, [
+              r("div", {
+                onClick: l[2] || (l[2] = (i) => m("remove")),
+                class: "h-16 w-16 rounded-full bg-fm-color-neutral-white flex items-center justify-center cursor-pointer"
+              }, [
+                s(o, {
+                  name: "close_small",
+                  class: "!text-[16px]"
+                })
+              ])
+            ])) : b("", !0)
+          ]),
+          r("div", V, [
+            r("div", null, g(e.title), 1),
+            r("div", j, g(e.description), 1)
+          ])
+        ]),
+        r("div", K, g(e.color), 1)
+      ]);
+    };
+  }
+}), D = { class: "p-24 h-full w-full flex flex-col bg-fm-color-neutral-white overflow-y-auto" }, J = {
+  key: 0,
+  class: "mt-12"
+}, O = { class: "flex items-center justify-between" }, q = { class: "flex items-center justify-center gap-8" }, z = { class: "rounded-lg overflow-hidden mt-12 border border-fm-color-neutral-gray-100" }, G = { class: "py-12 px-24 flex flex-col gap-12" }, H = { class: "rounded-lg overflow-hidden mt-12 border border-fm-color-neutral-gray-100" }, L = { class: "py-12 px-24 flex flex-col gap-12" }, M = { class: "rounded-lg overflow-hidden mt-12 border border-fm-color-neutral-gray-100" }, Q = { class: "py-12 px-24 flex flex-col gap-12" }, W = { class: "rounded-lg overflow-hidden mt-12 border border-fm-color-neutral-gray-100" }, X = { class: "py-12 px-24 flex flex-col gap-12" }, to = /* @__PURE__ */ x({
+  __name: "BrandkitView",
+  setup(k) {
+    const u = P(), a = R(), m = E(), e = $(a.state.brandkit), l = () => ({
+      colors: {
+        primary: "#FF7823",
+        secondary: "#FFF3E6",
+        accent: "#FFF3E6",
+        background: {
+          base: "#F8F8F8",
+          elevated: "#FFFFFF"
+        },
+        neutral: {
+          light: "#ECF0F0",
+          mid: "#555555",
+          dark: "#1C1C1E"
+        },
+        status: {
+          success: "#4CAF50",
+          warning: "#FFC107",
+          error: "#F44336",
+          info: "#2196F3"
+        },
+        text: {
+          onPrimary: "#FFFFFF",
+          primary: "#1C1C1E",
+          secondary: "#555555",
+          tertiary: "#A2A09E"
+        }
+      },
+      fonts: {
+        brand: "Inter",
+        heading: "Inter",
+        body: "Roboto"
+      }
+    });
+    async function y() {
+      m.promise(
+        U.setBusinessBrandkit(
+          u.currentBusiness.value._id,
+          e.value
+        ),
+        {
+          loading: "Saving your settings...",
+          success: "Settings saved",
+          error: "Failed to save settings"
+        }
+      );
+    }
+    return B(
+      () => u.currentBusiness.value,
+      async (d, o) => {
+        d && d._id != (o == null ? void 0 : o._id) && (await a.getBusinessBrandkit(d._id), e.value = a.state.brandkit);
+      },
+      {
+        immediate: !0
+      }
+    ), (d, o) => {
+      const i = p("FmButton");
+      return c(), v("div", D, [
+        o[30] || (o[30] = r("div", { class: "fm-typo-en-title-md-600" }, "Brandkit", -1)),
+        e.value ? (c(), v("div", J, [
+          r("div", O, [
+            o[25] || (o[25] = r("div", { class: "fm-typo-en-title-sm-600 mt-8" }, "Colors", -1)),
+            r("div", q, [
+              JSON.stringify(e.value.colors) != JSON.stringify(l().colors) ? (c(), w(i, {
+                key: 0,
+                label: "Reset to default",
+                variant: "plain",
+                onClick: o[0] || (o[0] = (t) => e.value.colors = { ...l().colors })
+              })) : b("", !0),
+              s(i, {
+                label: "Save",
+                variant: "primary",
+                onClick: y
+              })
+            ])
+          ]),
+          r("div", z, [
+            r("div", null, [
+              o[26] || (o[26] = r("div", { class: "py-12 px-24 bg-fm-color-neutral-gray-100" }, [
+                r("div", { class: "fm-typo-en-body-lg-600" }, "Brand"),
+                r("div", { class: "fm-typo-en-body-md-400 text-fm-color-typo-secondary" }, " The colors that represent your brand identity ")
+              ], -1)),
+              r("div", G, [
+                s(n, {
+                  "initial-color": l().colors.primary,
+                  color: e.value.colors.primary,
+                  onRemove: o[1] || (o[1] = (t) => e.value.colors.primary = l().colors.primary),
+                  onUpdate: o[2] || (o[2] = (t) => e.value.colors.primary = t),
+                  title: "Primary Color",
+                  description: "Defines the core visual identity; used for key brand elements."
+                }, null, 8, ["initial-color", "color"]),
+                s(n, {
+                  "initial-color": l().colors.secondary,
+                  color: e.value.colors.secondary,
+                  onRemove: o[3] || (o[3] = (t) => e.value.colors.secondary = l().colors.secondary),
+                  onUpdate: o[4] || (o[4] = (t) => e.value.colors.secondary = t),
+                  title: "Secondary Color",
+                  description: "Supports the primary color in backgrounds and secondary elements."
+                }, null, 8, ["initial-color", "color"]),
+                s(n, {
+                  "initial-color": l().colors.accent,
+                  color: e.value.colors.accent,
+                  onRemove: o[5] || (o[5] = (t) => e.value.colors.accent = l().colors.accent),
+                  onUpdate: o[6] || (o[6] = (t) => e.value.colors.accent = t),
+                  title: "Accent Color",
+                  description: "Used for emphasis and highlighting important interactive elements."
+                }, null, 8, ["initial-color", "color"])
+              ])
+            ])
+          ]),
+          r("div", H, [
+            r("div", null, [
+              o[27] || (o[27] = r("div", { class: "py-12 px-24 bg-fm-color-neutral-gray-100" }, [
+                r("div", { class: "fm-typo-en-body-lg-600" }, "Typography"),
+                r("div", { class: "fm-typo-en-body-md-400 text-fm-color-typo-secondary" }, " The colors for texts appeared in the templates ")
+              ], -1)),
+              r("div", L, [
+                s(n, {
+                  "initial-color": l().colors.text.onPrimary,
+                  color: e.value.colors.text.onPrimary,
+                  onRemove: o[7] || (o[7] = (t) => e.value.colors.text.onPrimary = l().colors.text.onPrimary),
+                  onUpdate: o[8] || (o[8] = (t) => e.value.colors.text.onPrimary = t),
+                  title: "Typo on Primary Color",
+                  description: "Ensures clear text visibility when placed over primary-colored backgrounds."
+                }, null, 8, ["initial-color", "color"]),
+                s(n, {
+                  "initial-color": l().colors.text.primary,
+                  color: e.value.colors.text.primary,
+                  onRemove: o[9] || (o[9] = (t) => e.value.colors.text.primary = l().colors.text.primary),
+                  onUpdate: o[10] || (o[10] = (t) => e.value.colors.text.primary = t),
+                  title: "Primary Color",
+                  description: "Used for main body text and headings throughout the interface."
+                }, null, 8, ["initial-color", "color"]),
+                s(n, {
+                  "initial-color": l().colors.text.secondary,
+                  color: e.value.colors.text.secondary,
+                  onRemove: o[11] || (o[11] = (t) => e.value.colors.text.secondary = l().colors.text.secondary),
+                  onUpdate: o[12] || (o[12] = (t) => e.value.colors.text.secondary = t),
+                  title: "Secondary Color",
+                  description: "Applies to supporting content such as descriptions and labels."
+                }, null, 8, ["initial-color", "color"]),
+                s(n, {
+                  "initial-color": l().colors.text.tertiary,
+                  color: e.value.colors.text.tertiary,
+                  onRemove: o[13] || (o[13] = (t) => e.value.colors.text.tertiary = l().colors.text.tertiary),
+                  onUpdate: o[14] || (o[14] = (t) => e.value.colors.text.tertiary = t),
+                  title: "Tertiary Color",
+                  description: "For low-emphasis text like metadata, system notes, or disclaimers."
+                }, null, 8, ["initial-color", "color"])
+              ])
+            ])
+          ]),
+          r("div", M, [
+            r("div", null, [
+              o[28] || (o[28] = r("div", { class: "py-12 px-24 bg-fm-color-neutral-gray-100" }, [
+                r("div", { class: "fm-typo-en-body-lg-600" }, "Neutral colors"),
+                r("div", { class: "fm-typo-en-body-md-400 text-fm-color-typo-secondary" }, " Color usage suitable for background, borders. ")
+              ], -1)),
+              r("div", Q, [
+                s(n, {
+                  "initial-color": l().colors.neutral.light,
+                  color: e.value.colors.neutral.light,
+                  onRemove: o[15] || (o[15] = (t) => e.value.colors.neutral.light = l().colors.neutral.light),
+                  onUpdate: o[16] || (o[16] = (t) => e.value.colors.neutral.light = t),
+                  title: "Neutral color - light",
+                  description: "Used for subtle background areas, separators, or low-emphasis surfaces."
+                }, null, 8, ["initial-color", "color"]),
+                s(n, {
+                  "initial-color": l().colors.neutral.mid,
+                  color: e.value.colors.neutral.mid,
+                  onRemove: o[17] || (o[17] = (t) => e.value.colors.neutral.mid = l().colors.neutral.mid),
+                  onUpdate: o[18] || (o[18] = (t) => e.value.colors.neutral.mid = t),
+                  title: "Neutral color - mid",
+                  description: "Supports visual structure and is applied to dividers and medium-emphasis UI elements."
+                }, null, 8, ["initial-color", "color"]),
+                s(n, {
+                  "initial-color": l().colors.neutral.dark,
+                  color: e.value.colors.neutral.dark,
+                  onRemove: o[19] || (o[19] = (t) => e.value.colors.neutral.dark = l().colors.neutral.dark),
+                  onUpdate: o[20] || (o[20] = (t) => e.value.colors.neutral.dark = t),
+                  title: "Neutral color - dark",
+                  description: "Provides strong contrast for high-emphasis elements and helps establish hierarchy."
+                }, null, 8, ["initial-color", "color"])
+              ])
+            ])
+          ])
+        ])) : b("", !0),
+        r("div", W, [
+          r("div", null, [
+            o[29] || (o[29] = r("div", { class: "py-12 px-24 bg-fm-color-neutral-gray-100" }, [
+              r("div", { class: "fm-typo-en-body-lg-600" }, "Background colors"),
+              r("div", { class: "fm-typo-en-body-md-400 text-fm-color-typo-secondary" }, " Color usage suitable for backgrounds ")
+            ], -1)),
+            r("div", X, [
+              s(n, {
+                "initial-color": l().colors.background.base,
+                color: e.value.colors.background.base,
+                onRemove: o[21] || (o[21] = (t) => e.value.colors.background.base = l().colors.neutral.light),
+                onUpdate: o[22] || (o[22] = (t) => e.value.colors.background.base = t),
+                title: "Base",
+                description: "The default interface surface; supports layout and content clarity."
+              }, null, 8, ["initial-color", "color"]),
+              s(n, {
+                "initial-color": l().colors.background.elevated,
+                color: e.value.colors.background.elevated,
+                onRemove: o[23] || (o[23] = (t) => e.value.colors.background.elevated = l().colors.neutral.mid),
+                onUpdate: o[24] || (o[24] = (t) => e.value.colors.background.elevated = t),
+                title: "Elevated",
+                description: "Used for layered components like cards and modals to create depth."
+              }, null, 8, ["initial-color", "color"])
+            ])
+          ])
+        ])
+      ]);
+    };
+  }
+});
+export {
+  to as default
+};