@feedmepos/mf-menu-portal 0.0.0-stage → 1.0.1-dev.1

package/dist/TranslationLanguageSelector.vue_vue_type_script_setup_true_lang-BJZ6VcrT.js

@@ -0,0 +1,161 @@
+import { defineComponent as F, useAttrs as I, ref as M, computed as S, watchPostEffect as P, openBlock as s, createBlock as v, unref as u, mergeProps as A, createSlots as w, renderList as g, withCtx as f, renderSlot as B, normalizeProps as N, guardReactiveProps as V, resolveComponent as d, normalizeClass as H, createElementBlock as b, createElementVNode as _, toDisplayString as k, Fragment as x, createVNode as y, withKeys as $, withModifiers as E, createCommentVNode as K } from "vue";
+import { components as L } from "@feedmepos/ui-library";
+import { useI18n as z } from "@feedmepos/mf-common";
+const G = /* @__PURE__ */ F({
+  inheritAttrs: !1,
+  __name: "LabeledTextField",
+  props: {
+    label: {}
+  },
+  setup(o, { expose: r }) {
+    const a = o, l = I(), t = M(), m = S(() => {
+      var e;
+      return ((e = t.value) == null ? void 0 : e.inputEl) ?? null;
+    });
+    return P(() => {
+      var c, i;
+      const e = l["aria-label"] ?? a.label;
+      e ? (c = m.value) == null || c.setAttribute("aria-label", String(e)) : (i = m.value) == null || i.removeAttribute("aria-label");
+    }), r({ inputEl: m, focus: () => {
+      var e;
+      return (e = t.value) == null ? void 0 : e.focus();
+    } }), (e, c) => (s(), v(u(L).FmTextField, A({
+      ref_key: "field",
+      ref: t
+    }, e.$attrs, {
+      invalid: e.$attrs.invalid ?? (e.$attrs["helper-state"] === "error" || e.$attrs.helperState === "error"),
+      label: e.label
+    }), w({ _: 2 }, [
+      g(e.$slots, (i, p) => ({
+        name: p,
+        fn: f((n) => [
+          B(e.$slots, p, N(V(n ?? {})))
+        ])
+      }))
+    ]), 1040, ["invalid", "label"]));
+  }
+});
+function T() {
+  const { t: o } = z(), r = {
+    "en-US": () => o("menu.common.translation.locale_symbol.en-US"),
+    "zh-CN": () => o("menu.common.translation.locale_symbol.zh-CN"),
+    "zh-Hant": () => o("menu.common.translation.locale_symbol.zh-Hant"),
+    "ja-JP": () => o("menu.common.translation.locale_symbol.ja-JP"),
+    "th-TH": () => o("menu.common.translation.locale_symbol.th-TH"),
+    "id-ID": () => o("menu.common.translation.locale_symbol.id-ID"),
+    "vi-VN": () => o("menu.common.translation.locale_symbol.vi-VN"),
+    "ms-MY": () => o("menu.common.translation.locale_symbol.ms-MY"),
+    "ph-PH": () => o("menu.common.translation.locale_symbol.ph-PH"),
+    "ko-KR": () => o("menu.common.translation.locale_symbol.ko-KR"),
+    "fr-MA": () => o("menu.common.translation.locale_symbol.fr-MA")
+  };
+  return (a) => {
+    var l, t;
+    return ((l = r[a]) == null ? void 0 : l.call(r)) ?? ((t = a.split("-")[1]) == null ? void 0 : t.toUpperCase()) ?? "";
+  };
+}
+const C = /* @__PURE__ */ F({
+  __name: "ProductLocaleBadge",
+  props: {
+    code: {},
+    primary: { type: Boolean }
+  },
+  setup(o) {
+    const r = o, a = T(), l = S(() => a(r.code));
+    return (t, m) => {
+      const e = d("FmAvatar");
+      return s(), v(e, {
+        initials: l.value,
+        size: "sm",
+        class: H([
+          "shrink-0",
+          t.primary ? "bg-fm-color-primary-oats text-fm-color-primary" : "bg-fm-color-opacity-sm text-fm-color-typo-primary"
+        ])
+      }, null, 8, ["initials", "class"]);
+    };
+  }
+}), U = { class: "flex flex-col gap-8" }, D = { class: "text-fm-color-typo-primary fm-typo-en-body-lg-600" }, R = { class: "flex items-center gap-8 flex-wrap" }, j = { class: "fm-typo-en-body-md-600" }, J = { class: "flex py-4" }, O = /* @__PURE__ */ F({
+  __name: "TranslationLanguageSelector",
+  props: {
+    selected: {},
+    available: {},
+    menuZIndex: { default: 99 }
+  },
+  emits: ["add", "remove"],
+  setup(o, { emit: r }) {
+    const a = r, { t: l } = z();
+    return (t, m) => {
+      const e = d("FmIcon"), c = d("FmButton"), i = d("FmMenuItem"), p = d("FmMenu");
+      return s(), b("div", U, [
+        _("p", D, k(u(l)("menu.common.translation.language")), 1),
+        _("div", R, [
+          (s(!0), b(x, null, g(t.selected, (n) => (s(), b("div", {
+            key: n.code,
+            class: "flex items-center gap-8 p-8 border border-fm-color-primary text-fm-color-primary rounded-full"
+          }, [
+            y(C, {
+              code: n.code,
+              primary: ""
+            }, null, 8, ["code"]),
+            _("span", j, k(n.name), 1),
+            y(e, {
+              name: "close",
+              class: "cursor-pointer",
+              variant: "secondary",
+              role: "button",
+              tabindex: "0",
+              "aria-label": u(l)("menu.common.labels.a11y_labelled_name", {
+                label: u(l)("menu.common.actions.remove"),
+                name: n.name
+              }),
+              onClick: (h) => a("remove", n.code),
+              onKeydown: [
+                $((h) => a("remove", n.code), ["enter"]),
+                $(E((h) => a("remove", n.code), ["prevent"]), ["space"])
+              ]
+            }, null, 8, ["aria-label", "onClick", "onKeydown"])
+          ]))), 128)),
+          t.available.length > 0 ? (s(), v(p, {
+            key: 0,
+            "z-index": t.menuZIndex,
+            "close-on-click": !1
+          }, {
+            "menu-button": f(() => [
+              y(c, {
+                icon: "add",
+                variant: "secondary",
+                "border-color": "neutral-gray-300",
+                "text-color": "neutral-gray-400",
+                "aria-label": u(l)("menu.group.translation.add_language")
+              }, null, 8, ["aria-label"])
+            ]),
+            default: f(() => [
+              (s(!0), b(x, null, g(t.available, (n) => (s(), v(i, {
+                key: n.code,
+                label: n.name,
+                selectable: "",
+                "onUpdate:modelValue": (h) => a("add", n.code)
+              }, {
+                prepend: f(() => [
+                  _("div", J, [
+                    y(C, {
+                      code: n.code
+                    }, null, 8, ["code"])
+                  ])
+                ]),
+                _: 2
+              }, 1032, ["label", "onUpdate:modelValue"]))), 128))
+            ]),
+            _: 1
+          }, 8, ["z-index"])) : K("", !0)
+        ])
+      ]);
+    };
+  }
+});
+export {
+  G as _,
+  O as a,
+  C as b,
+  T as u
+};

package/dist/TranslationSideSheet.vue_vue_type_script_setup_true_lang-B0j2PNih.js

@@ -0,0 +1,158 @@
+import { defineComponent as A, computed as _, resolveComponent as f, openBlock as r, createBlock as N, withCtx as b, createElementVNode as t, createVNode as d, toDisplayString as i, unref as l, createElementBlock as y, Fragment as U, renderList as $, createCommentVNode as j } from "vue";
+import { useI18n as D } from "@feedmepos/mf-common";
+import { useDialog as E, FmButtonVariant as O } from "@feedmepos/ui-library";
+import { a as P, _ as V, b as M } from "./TranslationLanguageSelector.vue_vue_type_script_setup_true_lang-BJZ6VcrT.js";
+const R = { class: "fm-typo-en-title-md-600" }, T = { class: "pt-8 space-y-24" }, q = { class: "flex flex-col gap-16 border p-16 rounded-lg" }, G = { class: "flex items-center gap-16" }, H = { class: "fm-typo-en-body-lg-600" }, J = { class: "flex flex-col gap-32 pl-32" }, K = { class: "fm-typo-en-body-sm-600 text-fm-color-typo-secondary border inline-block rounded-full px-8 py-4 mb-8" }, Q = {
+  key: 0,
+  class: "space-y-8"
+}, W = { class: "fm-typo-en-body-sm-600 text-fm-color-typo-secondary border inline-block align-top rounded-full px-8 py-4 mb-8" }, X = { class: "flex w-[100px] items-center gap-8" }, Y = { class: "fm-typo-en-body-md-400" }, Z = { class: "flex-1" }, ee = { class: "flex gap-8 items-center justify-start" }, le = /* @__PURE__ */ A({
+  __name: "TranslationSideSheet",
+  props: {
+    modelValue: { type: Boolean },
+    name: {},
+    nameLocale: {},
+    supportedLocales: {},
+    dirty: { type: Boolean },
+    title: {},
+    nameSectionLabel: {},
+    zIndex: {}
+  },
+  emits: ["update:modelValue", "update:name", "update:nameLocale", "save", "discard"],
+  setup(k, { emit: z }) {
+    const s = k, m = z, { t: a } = D(), S = E(), v = _({
+      get: () => s.modelValue,
+      set: (e) => m("update:modelValue", e)
+    }), c = _(() => Object.keys(s.nameLocale)), B = _(
+      () => s.supportedLocales.filter(
+        (e) => !c.value.includes(e.code)
+      )
+    );
+    function g(e) {
+      var o;
+      return ((o = s.supportedLocales.find((u) => u.code === e)) == null ? void 0 : o.name) ?? e;
+    }
+    function F(e, o) {
+      m("update:nameLocale", { ...s.nameLocale, [e]: o });
+    }
+    function I(e) {
+      m("update:nameLocale", { ...s.nameLocale, [e]: "" });
+    }
+    function w(e) {
+      const o = { ...s.nameLocale };
+      delete o[e], m("update:nameLocale", o);
+    }
+    function x() {
+      if (!s.dirty) {
+        m("discard");
+        return;
+      }
+      S.open({
+        title: a("menu.common.dialog.dismiss.title"),
+        message: a("menu.common.dialog.dismiss.message"),
+        zIndex: Math.max(200, (s.zIndex ?? 0) + 1),
+        primaryActions: {
+          text: a("menu.common.actions.discard"),
+          close: !0,
+          variant: O.Primary
+        },
+        secondaryActions: {
+          text: a("menu.common.actions.cancel"),
+          close: !0
+        }
+      }).onPrimary(() => m("discard"));
+    }
+    return (e, o) => {
+      const u = f("FmIcon"), h = f("FmButton"), C = f("FmSideSheet");
+      return r(), N(C, {
+        modelValue: v.value,
+        "onUpdate:modelValue": o[2] || (o[2] = (n) => v.value = n),
+        "max-width": 720,
+        "is-container-props": { class: "translation-side-sheet" },
+        "z-index": s.zIndex,
+        "onOn:clickedAway": x
+      }, {
+        "side-sheet-header": b(() => [
+          t("p", R, i(e.title ?? l(a)("menu.subcategory.translation.title")), 1)
+        ]),
+        "side-sheet-footer": b(() => [
+          t("div", ee, [
+            d(h, {
+              label: l(a)("menu.common.actions.save"),
+              size: "lg",
+              variant: "primary",
+              onClick: o[1] || (o[1] = (n) => m("save"))
+            }, null, 8, ["label"]),
+            d(h, {
+              label: l(a)("menu.common.actions.cancel"),
+              size: "lg",
+              variant: "tertiary",
+              onClick: x
+            }, null, 8, ["label"])
+          ])
+        ]),
+        default: b(() => [
+          t("div", T, [
+            d(P, {
+              selected: c.value.map((n) => ({ code: n, name: g(n) })),
+              available: B.value,
+              "menu-z-index": (s.zIndex ?? 98) + 1,
+              onAdd: I,
+              onRemove: w
+            }, null, 8, ["selected", "available", "menu-z-index"]),
+            t("div", q, [
+              t("div", G, [
+                d(u, { name: "keyboard_arrow_down" }),
+                t("p", H, i(e.nameSectionLabel ?? l(a)("menu.subcategory.translation.name_section")), 1)
+              ]),
+              t("div", J, [
+                t("div", null, [
+                  t("p", K, i(l(a)("menu.common.translation.default")), 1),
+                  d(V, {
+                    "model-value": e.name,
+                    "aria-label": l(a)("menu.common.labels.a11y_labelled_name", {
+                      label: l(a)("menu.common.translation.default"),
+                      name: e.nameSectionLabel ?? l(a)("menu.subcategory.translation.name_section")
+                    }),
+                    "onUpdate:modelValue": o[0] || (o[0] = (n) => m("update:name", n))
+                  }, null, 8, ["model-value", "aria-label"])
+                ]),
+                c.value.length > 0 ? (r(), y("div", Q, [
+                  t("p", W, i(l(a)("menu.common.translation.translation_label")), 1),
+                  (r(!0), y(U, null, $(c.value, (n) => {
+                    var L;
+                    return r(), y("div", {
+                      key: n,
+                      class: "flex gap-16 items-center"
+                    }, [
+                      t("div", X, [
+                        d(M, { code: n }, null, 8, ["code"]),
+                        t("span", Y, i(g(n)), 1)
+                      ]),
+                      t("div", Z, [
+                        d(V, {
+                          "model-value": e.nameLocale[n] ?? "",
+                          placeholder: l(a)("menu.group.translation.placeholder"),
+                          "aria-label": l(a)("menu.common.labels.a11y_labelled_name", {
+                            label: l(a)("menu.common.translation.translation_label"),
+                            name: ((L = e.supportedLocales.find(
+                              (p) => p.code === n
+                            )) == null ? void 0 : L.name) ?? n
+                          }),
+                          "onUpdate:modelValue": (p) => F(n, p)
+                        }, null, 8, ["model-value", "placeholder", "aria-label", "onUpdate:modelValue"])
+                      ])
+                    ]);
+                  }), 128))
+                ])) : j("", !0)
+              ])
+            ])
+          ])
+        ]),
+        _: 1
+      }, 8, ["modelValue", "z-index"]);
+    };
+  }
+});
+export {
+  le as _
+};

package/dist/TranslationViewChip.vue_vue_type_script_setup_true_lang-CAkLEmSA.js

@@ -0,0 +1,69 @@
+import { defineComponent as b, computed as _, resolveComponent as x, openBlock as o, createElementBlock as n, Fragment as d, renderList as y, createBlock as g, withCtx as m, createElementVNode as r, toDisplayString as s, unref as t, createCommentVNode as v, createVNode as k } from "vue";
+import { useI18n as w } from "@feedmepos/mf-common";
+import { u as N } from "./TranslationLanguageSelector.vue_vue_type_script_setup_true_lang-BJZ6VcrT.js";
+const L = {
+  key: 0,
+  class: "flex gap-8"
+}, C = { 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" }, j = { 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 = { class: "flex flex-col gap-8 p-4" }, T = { class: "fm-typo-en-body-sm-600" }, z = { class: "flex flex-col space-y-1 pl-8 list-disc list-outside" }, O = /* @__PURE__ */ b({
+  __name: "TranslationViewChip",
+  props: {
+    nameLocale: {},
+    showNumber: {}
+  },
+  setup(h) {
+    const c = h, { t: a } = w(), i = N(), l = _(() => Object.keys(c.nameLocale)), u = _(
+      () => c.showNumber === void 0 ? [] : l.value.slice(c.showNumber)
+    );
+    return (p, E) => {
+      const f = x("FmTooltip");
+      return p.showNumber === void 0 ? (o(), n("div", L, [
+        (o(!0), n(d, null, y(l.value, (e) => (o(), g(f, {
+          key: e,
+          placement: "top",
+          "z-index": 9999
+        }, {
+          content: m(() => [
+            r("div", j, s(t(a)("menu.common.translation.tooltip_value", {
+              value: p.nameLocale[e],
+              locale: e
+            })), 1)
+          ]),
+          default: m(() => [
+            r("div", C, s(t(i)(e)), 1)
+          ]),
+          _: 2
+        }, 1024))), 128))
+      ])) : l.value.length > 0 ? (o(), n(d, { key: 1 }, [
+        u.value.length > 0 ? (o(), n("div", V, s(t(i)(l.value[0])), 1)) : v("", !0),
+        k(f, {
+          placement: "top",
+          "z-index": 9999
+        }, {
+          content: m(() => [
+            r("div", F, [
+              r("p", T, s(t(a)("menu.common.translation.stored_names_title")), 1),
+              r("ul", z, [
+                (o(!0), n(d, null, y(l.value, (e) => (o(), n("li", { key: e }, s(t(a)("menu.common.translation.tooltip_value", {
+                  value: p.nameLocale[e],
+                  locale: e
+                })), 1))), 128))
+              ])
+            ])
+          ]),
+          default: m(() => [
+            r("div", B, s(u.value.length > 0 ? t(a)("menu.common.translation.additional_locale_count", {
+              count: u.value.length
+            }) : t(i)(l.value[0])), 1)
+          ]),
+          _: 1
+        })
+      ], 64)) : v("", !0);
+    };
+  }
+});
+export {
+  O as _
+};