@feedmepos/mf-menu 0.32.43 → 0.32.45-dev

package/dist/TranslationFieldSection.vue_vue_type_script_setup_true_lang-DUScE-82.js

@@ -0,0 +1,278 @@
+import { defineComponent as v, createElementBlock as c, openBlock as t, normalizeClass as h, toDisplayString as y, unref as i, resolveComponent as u, createVNode as _, createElementVNode as d, computed as b, createBlock as g, createCommentVNode as B, Fragment as k, renderList as F, withCtx as x } from "vue";
+import { useI18n as N } from "@feedmepos/mf-common";
+import { u as S } from "./index.vue_vue_type_script_setup_true_lang-CJO2XWIn.js";
+const T = {
+  "en-US": {
+    icon: "EN",
+    name: "English"
+  },
+  "zh-CN": {
+    icon: "简",
+    name: "简体中文"
+  },
+  "th-TH": {
+    icon: "TH",
+    name: "ไทย"
+  },
+  "ja-JP": {
+    icon: "JP",
+    name: "日本語"
+  },
+  "zh-Hant": {
+    icon: "繁",
+    name: "繁體中文"
+  },
+  "id-ID": {
+    icon: "ID",
+    name: "Bahasa Indonesia"
+  },
+  "vi-VN": {
+    icon: "VN",
+    name: "Tiếng Việt"
+  },
+  "ms-MY": {
+    icon: "MY",
+    name: "Bahasa Melayu"
+  },
+  "ph-PH": {
+    icon: "PH",
+    name: "Filipino"
+  },
+  "ko-KR": {
+    icon: "KR",
+    name: "한국어"
+  },
+  "fr-MA": {
+    icon: "MA",
+    name: "Français (Maroc)"
+  }
+};
+function w(n) {
+  var o, e;
+  const l = ((o = n.split("-")[1]) == null ? void 0 : o.toUpperCase()) ?? "";
+  return ((e = T[n]) == null ? void 0 : e.icon) || l;
+}
+function L(n) {
+  var l;
+  return ((l = T[n]) == null ? void 0 : l.name) || n;
+}
+const C = /* @__PURE__ */ v({
+  __name: "LocaleIconBadge",
+  props: {
+    localeCode: {},
+    variant: { default: "neutral" }
+  },
+  setup(n) {
+    const l = {
+      primary: "bg-fm-color-primary-oats text-fm-color-primary",
+      secondary: "bg-fm-color-opacity-sm text-fm-color-typo-primary",
+      neutral: "bg-fm-color-opacity-sm text-fm-color-typo-primary"
+    };
+    return (o, e) => (t(), c("div", {
+      class: h([
+        "w-24 h-24 rounded-full flex items-center justify-center fm-typo-en-body-sm-600",
+        l[o.variant]
+      ])
+    }, y(i(w)(o.localeCode)), 3));
+  }
+}), U = { class: "flex items-center gap-8 p-8 border border-fm-color-primary text-fm-color-primary rounded-full" }, E = { class: "fm-typo-en-body-md-600" }, H = /* @__PURE__ */ v({
+  __name: "LanguageChip",
+  props: {
+    localeCode: {}
+  },
+  emits: ["remove"],
+  setup(n, { emit: l }) {
+    const o = l;
+    return (e, a) => {
+      const s = u("FmIcon");
+      return t(), c("div", U, [
+        _(C, {
+          "locale-code": e.localeCode,
+          variant: "primary"
+        }, null, 8, ["locale-code"]),
+        d("span", E, y(i(L)(e.localeCode)), 1),
+        _(s, {
+          name: "close",
+          class: "cursor-pointer",
+          variant: "secondary",
+          onClick: a[0] || (a[0] = (m) => o("remove", e.localeCode))
+        })
+      ]);
+    };
+  }
+});
+function P(n) {
+  const l = S(), o = b(() => l.state.featureFlags.supportedLocales.map((a) => ({
+    code: a,
+    name: L(a)
+  }))), e = b(() => {
+    const a = new Set(n.value);
+    return o.value.filter((s) => !a.has(s.code));
+  });
+  return {
+    localeList: o,
+    availableLocales: e
+  };
+}
+const R = { class: "flex flex-col gap-8" }, A = { class: "text-fm-color-typo-primary fm-typo-en-body-lg-600" }, z = { class: "flex items-center gap-8 flex-wrap" }, D = ["onClick"], j = { class: "flex items-center gap-8" }, J = { class: "fm-typo-en-body-md-400" }, X = /* @__PURE__ */ v({
+  __name: "LanguageSelector",
+  props: {
+    selectedLocales: {},
+    label: { default: "" }
+  },
+  emits: ["update:selectedLocales"],
+  setup(n, { emit: l }) {
+    const o = n, e = l, { t: a } = N(), s = b(() => o.selectedLocales), { availableLocales: m } = P(s);
+    function r(f) {
+      e("update:selectedLocales", [...o.selectedLocales, f]);
+    }
+    function $(f) {
+      e(
+        "update:selectedLocales",
+        o.selectedLocales.filter((V) => V !== f)
+      );
+    }
+    return (f, V) => {
+      const I = u("fm-button"), M = u("FmMenu");
+      return t(), c("div", R, [
+        d("p", A, y(f.label || i(a)("menu.common.translation.language")), 1),
+        d("div", z, [
+          (t(!0), c(k, null, F(f.selectedLocales, (p) => (t(), g(H, {
+            key: p,
+            "locale-code": p,
+            onRemove: $
+          }, null, 8, ["locale-code"]))), 128)),
+          i(m).length > 0 ? (t(), g(M, { key: 0 }, {
+            "menu-button": x(() => [
+              _(I, {
+                variant: "secondary",
+                "border-color": "neutral-gray-300",
+                "text-color": "neutral-gray-400",
+                icon: "add"
+              })
+            ]),
+            default: x(() => [
+              (t(!0), c(k, null, F(i(m), (p) => (t(), c("div", {
+                class: "p-12 cursor-pointer hover:bg-fm-color-opacity-md rounded-sm",
+                key: p.code,
+                onClick: (q) => r(p.code)
+              }, [
+                d("div", j, [
+                  _(C, {
+                    "locale-code": p.code,
+                    variant: "secondary"
+                  }, null, 8, ["locale-code"]),
+                  d("span", J, y(p.name), 1)
+                ])
+              ], 8, D))), 128))
+            ]),
+            _: 1
+          })) : B("", !0)
+        ])
+      ]);
+    };
+  }
+}), K = /* @__PURE__ */ v({
+  __name: "TranslationBadge",
+  props: {
+    label: {},
+    spacing: { default: "md" }
+  },
+  setup(n) {
+    const o = n.spacing === "sm" ? "mb-4" : "mb-8";
+    return (e, a) => (t(), c("p", {
+      class: h([
+        "fm-typo-en-body-sm-600 text-fm-color-typo-secondary border inline-block rounded-full px-8 py-4",
+        i(o)
+      ])
+    }, y(e.label), 3));
+  }
+}), O = { class: "fm-typo-en-body-md-400" }, Y = { class: "flex-1" }, Z = /* @__PURE__ */ v({
+  __name: "TranslationFieldRow",
+  props: {
+    localeCode: {},
+    modelValue: {},
+    placeholder: {},
+    readonly: { type: Boolean, default: !1 },
+    inputType: { default: "text" }
+  },
+  emits: ["update:modelValue"],
+  setup(n, { emit: l }) {
+    const o = l;
+    return (e, a) => {
+      const s = u("fm-text-field"), m = u("fm-textarea");
+      return t(), c("div", {
+        class: h(["flex gap-16", e.inputType === "textarea" ? "items-start" : "items-center"])
+      }, [
+        d("div", {
+          class: h(["flex w-[100px] items-center gap-8", e.inputType === "textarea" ? "pt-12" : ""])
+        }, [
+          _(C, {
+            "locale-code": e.localeCode,
+            variant: "secondary"
+          }, null, 8, ["locale-code"]),
+          d("span", O, y(i(L)(e.localeCode)), 1)
+        ], 2),
+        d("div", Y, [
+          e.inputType === "text" ? (t(), g(s, {
+            key: 0,
+            "model-value": e.modelValue,
+            placeholder: e.placeholder,
+            readonly: e.readonly,
+            "onUpdate:modelValue": a[0] || (a[0] = (r) => o("update:modelValue", r))
+          }, null, 8, ["model-value", "placeholder", "readonly"])) : (t(), g(m, {
+            key: 1,
+            "model-value": e.modelValue,
+            placeholder: e.placeholder,
+            readonly: e.readonly,
+            "onUpdate:modelValue": a[1] || (a[1] = (r) => o("update:modelValue", r))
+          }, null, 8, ["model-value", "placeholder", "readonly"]))
+        ])
+      ], 2);
+    };
+  }
+}), ee = /* @__PURE__ */ v({
+  __name: "TranslationFieldSection",
+  props: {
+    label: {},
+    modelValue: {},
+    type: { default: "text" },
+    spacing: { default: "md" },
+    placeholder: {},
+    readonly: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue"],
+  setup(n, { emit: l }) {
+    const o = l;
+    return (e, a) => {
+      const s = u("FmTextField"), m = u("fm-textarea");
+      return t(), c("div", null, [
+        _(K, {
+          label: e.label,
+          spacing: e.spacing
+        }, null, 8, ["label", "spacing"]),
+        e.type === "text" ? (t(), g(s, {
+          key: 0,
+          "model-value": e.modelValue,
+          placeholder: e.placeholder,
+          readonly: e.readonly,
+          "onUpdate:modelValue": a[0] || (a[0] = (r) => o("update:modelValue", r))
+        }, null, 8, ["model-value", "placeholder", "readonly"])) : (t(), g(m, {
+          key: 1,
+          "model-value": e.modelValue,
+          placeholder: e.placeholder,
+          readonly: e.readonly,
+          "onUpdate:modelValue": a[1] || (a[1] = (r) => o("update:modelValue", r))
+        }, null, 8, ["model-value", "placeholder", "readonly"]))
+      ]);
+    };
+  }
+});
+export {
+  X as _,
+  ee as a,
+  K as b,
+  Z as c,
+  L as d,
+  w as g
+};

package/dist/TranslationSideSheet.vue_vue_type_script_setup_true_lang-E3-hgVdd.js

@@ -0,0 +1,140 @@
+import { defineComponent as z, ref as p, watch as L, computed as k, resolveComponent as v, createBlock as w, openBlock as f, unref as n, withCtx as _, createElementVNode as i, createVNode as r, toDisplayString as h, createElementBlock as x, createCommentVNode as F, Fragment as I, renderList as A } from "vue";
+import { J as S } from "./index.vue_vue_type_script_setup_true_lang-CJO2XWIn.js";
+import { useI18n as q } from "@feedmepos/mf-common";
+import { u as J } from "./discardConfirm-BHni0LNu.js";
+import { _ as G, a as H, b as K, c as M } from "./TranslationFieldSection.vue_vue_type_script_setup_true_lang-DUScE-82.js";
+const P = { class: "fm-typo-en-title-md-600" }, Q = { class: "pt-8 space-y-24" }, R = { class: "flex flex-col gap-16 border p-16 rounded-lg" }, W = { class: "flex items-center gap-16" }, X = { class: "fm-typo-en-body-lg-600" }, Y = { class: "flex flex-col gap-32 pl-32" }, Z = {
+  key: 0,
+  class: "space-y-8"
+}, ee = { class: "flex gap-8 items-center justify-start" }, se = /* @__PURE__ */ z({
+  __name: "TranslationSideSheet",
+  props: {
+    modelValue: { type: Boolean },
+    title: {},
+    name: {},
+    nameLocale: {}
+  },
+  emits: ["update:modelValue", "update:name", "update:nameLocale"],
+  setup(E, { emit: N }) {
+    const l = E, u = N, { t: s } = q(), o = p([]), g = p([]), c = p(l.name), V = p(l.name);
+    L(
+      () => l.name,
+      (e) => {
+        c.value = e;
+      }
+    );
+    function U() {
+      return !l.nameLocale || Object.keys(l.nameLocale).length === 0 ? [] : Object.entries(l.nameLocale).map(([e, a]) => ({
+        localeCode: e,
+        value: a
+      }));
+    }
+    L(
+      () => [l.modelValue, l.nameLocale],
+      ([e]) => {
+        e && (o.value = U(), g.value = S.clone(o.value), c.value = l.name, V.value = l.name);
+      },
+      { immediate: !0 }
+    );
+    const y = k(() => o.value.map((e) => e.localeCode));
+    function T(e) {
+      const a = new Set(y.value), d = new Set(e);
+      for (const m of e)
+        a.has(m) || o.value.push({
+          localeCode: m,
+          value: ""
+        });
+      o.value = o.value.filter((m) => d.has(m.localeCode));
+    }
+    function B() {
+      const e = c.value !== V.value, a = !S.isEqual(o.value, g.value);
+      return e || a;
+    }
+    function D() {
+      c.value !== l.name && u("update:name", c.value);
+      const e = o.value.filter((a) => a.value.trim());
+      if (e.length === 0)
+        u("update:nameLocale", void 0);
+      else {
+        const a = {};
+        e.forEach((d) => {
+          a[d.localeCode] = d.value.trim();
+        }), u("update:nameLocale", a);
+      }
+      u("update:modelValue", !1);
+    }
+    function O() {
+      u("update:modelValue", !1);
+    }
+    const C = J(B, O), b = k({
+      get: () => l.modelValue,
+      set: (e) => u("update:modelValue", e)
+    });
+    return (e, a) => {
+      const d = v("FmIcon"), m = v("fm-button"), $ = v("fm-side-sheet");
+      return f(), w($, {
+        modelValue: b.value,
+        "onUpdate:modelValue": a[1] || (a[1] = (t) => b.value = t),
+        "max-width": 720,
+        "onOn:clickedAway": n(C)
+      }, {
+        "side-sheet-header": _(() => [
+          i("p", P, h(e.title) + " " + h(n(s)("menu.common.translation.title_suffix")), 1)
+        ]),
+        "side-sheet-footer": _(() => [
+          i("div", ee, [
+            r(m, {
+              label: n(s)("common.save"),
+              size: "lg",
+              variant: "primary",
+              onClick: D
+            }, null, 8, ["label"]),
+            r(m, {
+              label: n(s)("common.cancel"),
+              size: "lg",
+              variant: "tertiary",
+              onClick: n(C)
+            }, null, 8, ["label", "onClick"])
+          ])
+        ]),
+        default: _(() => [
+          i("div", Q, [
+            r(G, {
+              "selected-locales": y.value,
+              "onUpdate:selectedLocales": T
+            }, null, 8, ["selected-locales"]),
+            i("div", R, [
+              i("div", W, [
+                r(d, { name: "keyboard_arrow_down" }),
+                i("p", X, h(n(s)("menu.common.translation.name_section", { entity: e.title })), 1)
+              ]),
+              i("div", Y, [
+                r(H, {
+                  label: n(s)("menu.common.translation.default"),
+                  modelValue: c.value,
+                  "onUpdate:modelValue": a[0] || (a[0] = (t) => c.value = t)
+                }, null, 8, ["label", "modelValue"]),
+                o.value.length > 0 ? (f(), x("div", Z, [
+                  r(K, {
+                    label: n(s)("menu.common.translation.translation_label")
+                  }, null, 8, ["label"]),
+                  (f(!0), x(I, null, A(o.value, (t) => (f(), w(M, {
+                    key: t.localeCode,
+                    "locale-code": t.localeCode,
+                    modelValue: t.value,
+                    "onUpdate:modelValue": (j) => t.value = j,
+                    placeholder: n(s)("menu.group.translation.placeholder")
+                  }, null, 8, ["locale-code", "modelValue", "onUpdate:modelValue", "placeholder"]))), 128))
+                ])) : F("", !0)
+              ])
+            ])
+          ])
+        ]),
+        _: 1
+      }, 8, ["modelValue", "onOn:clickedAway"]);
+    };
+  }
+});
+export {
+  se as _
+};

package/dist/TranslationViewChip.vue_vue_type_script_setup_true_lang-BlACWsDs.js

@@ -0,0 +1,60 @@
+import { defineComponent as b, computed as a, resolveComponent as x, createElementBlock as o, openBlock as e, Fragment as p, renderList as v, createBlock as g, withCtx as m, createElementVNode as l, toDisplayString as t, createCommentVNode as k, createVNode as L } from "vue";
+import { g as w } from "./TranslationFieldSection.vue_vue_type_script_setup_true_lang-DUScE-82.js";
+const N = {
+  key: 0,
+  class: "flex gap-8"
+}, j = {
+  class: "rounded-lg border border-fm-color-primary text-fm-color-primary flex items-center justify-center fm-typo-en-body-sm-600 px-8"
+}, C = {
+  class: "p-4"
+}, V = {
+  key: 0,
+  class: "rounded-lg border border-fm-color-primary text-fm-color-primary flex items-center justify-center fm-typo-en-body-sm-600 px-8"
+}, B = {
+  class: "rounded-lg border border-fm-color-primary text-fm-color-primary flex items-center justify-center fm-typo-en-body-sm-600 px-8"
+}, F = {
+  key: 0
+}, T = {
+  key: 1
+}, z = {
+  class: "flex flex-col gap-8 p-4"
+}, E = {
+  class: "flex flex-col space-y-1 pl-8"
+}, D = /* @__PURE__ */ b({
+  __name: "TranslationViewChip",
+  props: {
+    nameLocale: {},
+    showNumber: {}
+  },
+  setup(h) {
+    const i = h, d = a(() => Object.keys(i.nameLocale)), n = a(() => d.value.map((r) => w(r))), u = a(() => i.showNumber ?? Object.keys(i.nameLocale).length), f = a(() => n.value.slice(u.value));
+    return (r, y) => {
+      const _ = x("FmTooltip");
+      return r.showNumber === void 0 ? (e(), o("div", N, [(e(!0), o(p, null, v(d.value, (s, c) => (e(), g(_, {
+        key: c,
+        placement: "top",
+        "z-index": 9999
+      }, {
+        content: m(() => [l("div", C, t(r.nameLocale[s]) + " (" + t(s) + ")", 1)]),
+        default: m(() => [l("div", j, t(n.value[c]), 1)]),
+        _: 2
+      }, 1024))), 128))])) : (e(), o(p, {
+        key: 1
+      }, [n.value.length > u.value ? (e(), o("div", V, t(n.value[0]), 1)) : k("", !0), L(_, {
+        placement: "top",
+        "z-index": 9999
+      }, {
+        content: m(() => [l("div", z, [y[0] || (y[0] = l("p", {
+          class: "fm-typo-en-body-sm-600"
+        }, "Product name", -1)), l("div", E, [(e(!0), o(p, null, v(d.value, (s, c) => (e(), o("li", {
+          key: c
+        }, t(r.nameLocale[s]) + " (" + t(s) + ") ", 1))), 128))])])]),
+        default: m(() => [l("div", B, [f.value.length > 0 ? (e(), o("p", F, "+" + t(f.value.length), 1)) : (e(), o("p", T, t(n.value[0]), 1))])]),
+        _: 1
+      })], 64));
+    };
+  }
+});
+export {
+  D as _
+};