@feedmepos/mf-menu 0.32.43 → 0.32.44

package/dist/TranslationSideSheet.vue_vue_type_script_setup_true_lang-CcIGCUwk.js

@@ -0,0 +1,194 @@
+import { defineComponent as K, ref as y, watch as E, computed as F, unref as a, resolveComponent as _, createBlock as T, openBlock as i, withCtx as v, createElementVNode as t, toDisplayString as m, createElementBlock as p, createCommentVNode as B, Fragment as x, renderList as C, createVNode as r } from "vue";
+import { J as D } from "./index.vue_vue_type_script_setup_true_lang-YXKayPEp.js";
+import { useI18n as P, useLocale as Q } from "@feedmepos/mf-common";
+import { u as R } from "./discardConfirm-BHni0LNu.js";
+import { g as V, a as I, _ as W, b as X } from "./translation-Cdap0IVg.js";
+const Y = { class: "fm-typo-en-title-md-600" }, Z = { class: "pt-8 space-y-24" }, ee = { class: "flex flex-col gap-8" }, oe = { class: "text-fm-color-typo-primary fm-typo-en-body-lg-600" }, le = { class: "flex items-center gap-8 flex-wrap" }, te = { class: "w-24 h-24 rounded-full bg-fm-color-primary-oats text-fm-color-primary flex items-center justify-center fm-typo-en-body-sm-600" }, ae = { class: "fm-typo-en-body-md-600" }, ne = ["onClick"], se = { class: "flex items-center gap-8" }, ce = { class: "w-24 h-24 rounded-full bg-fm-color-opacity-sm flex items-center justify-center fm-typo-en-body-sm-600" }, me = { class: "fm-typo-en-body-md-400" }, ie = { class: "flex flex-col gap-16 border p-16 rounded-lg" }, de = { class: "flex items-center gap-16" }, re = { class: "fm-typo-en-body-lg-600" }, ue = { class: "flex flex-col gap-32 pl-32" }, pe = {
+  key: 0,
+  class: "space-y-8"
+}, fe = { class: "flex w-[100px] items-center gap-8" }, _e = { class: "w-24 h-24 rounded-full bg-fm-color-opacity-sm flex items-center justify-center fm-typo-en-body-sm-600" }, ve = { class: "fm-typo-en-body-md-400" }, he = { class: "flex-1" }, ye = { class: "flex gap-8 items-center justify-start" }, ke = /* @__PURE__ */ K({
+  __name: "TranslationSideSheet",
+  props: {
+    modelValue: { type: Boolean },
+    title: {},
+    name: {},
+    nameLocale: {}
+  },
+  emits: ["update:modelValue", "update:name", "update:nameLocale"],
+  setup(O, { emit: S }) {
+    const s = O, f = S, { t: d } = P(), { localeList: h } = Q(), c = y([]), k = y([]), u = y(s.name), L = y(s.name);
+    E(
+      () => s.name,
+      (e) => {
+        u.value = e;
+      }
+    );
+    function U() {
+      return !s.nameLocale || Object.keys(s.nameLocale).length === 0 ? [] : Object.entries(s.nameLocale).map(([e, o]) => ({
+        localeCode: e,
+        value: o
+      }));
+    }
+    E(
+      () => [s.modelValue, s.nameLocale],
+      ([e]) => {
+        e && (c.value = U(), k.value = D.clone(c.value), u.value = s.name, L.value = s.name);
+      },
+      { immediate: !0 }
+    );
+    const w = F(() => {
+      const e = new Set(c.value.map((n) => n.localeCode));
+      return a(h).filter((n) => !e.has(n.code)).map((n) => ({
+        code: n.code,
+        name: n.name,
+        icon: V(n.code)
+      }));
+    });
+    function $(e) {
+      const o = a(h).find((n) => n.code === e);
+      o && c.value.push({
+        localeCode: o.code,
+        value: ""
+      });
+    }
+    function z(e) {
+      c.value = c.value.filter((o) => o.localeCode !== e);
+    }
+    function A() {
+      const e = u.value !== L.value, o = !D.isEqual(c.value, k.value);
+      return e || o;
+    }
+    function M() {
+      u.value !== s.name && f("update:name", u.value);
+      const e = c.value.filter((o) => o.value.trim());
+      if (e.length === 0)
+        f("update:nameLocale", void 0);
+      else {
+        const o = {};
+        e.forEach((n) => {
+          o[n.localeCode] = n.value.trim();
+        }), f("update:nameLocale", o);
+      }
+      f("update:modelValue", !1);
+    }
+    function q() {
+      f("update:modelValue", !1);
+    }
+    const N = R(A, q), j = F({
+      get: () => s.modelValue,
+      set: (e) => f("update:modelValue", e)
+    });
+    return (e, o) => {
+      const n = _("FmIcon"), g = _("fm-button"), J = _("FmMenu"), G = _("fm-text-field"), H = _("fm-side-sheet");
+      return i(), T(H, {
+        modelValue: j.value,
+        "onUpdate:modelValue": o[1] || (o[1] = (l) => j.value = l),
+        "max-width": 720,
+        "onOn:clickedAway": a(N)
+      }, {
+        "side-sheet-header": v(() => [
+          t("p", Y, m(e.title) + " " + m(a(d)("menu.common.translation.title_suffix")), 1)
+        ]),
+        "side-sheet-footer": v(() => [
+          t("div", ye, [
+            r(g, {
+              label: a(d)("common.save"),
+              size: "lg",
+              variant: "primary",
+              onClick: M
+            }, null, 8, ["label"]),
+            r(g, {
+              label: a(d)("common.cancel"),
+              size: "lg",
+              variant: "tertiary",
+              onClick: a(N)
+            }, null, 8, ["label", "onClick"])
+          ])
+        ]),
+        default: v(() => [
+          t("div", Z, [
+            t("div", ee, [
+              t("p", oe, m(a(d)("menu.common.translation.language")), 1),
+              t("div", le, [
+                (i(!0), p(x, null, C(c.value, (l) => (i(), p("div", {
+                  key: l.localeCode,
+                  class: "flex items-center gap-8 p-8 border border-fm-color-primary text-fm-color-primary rounded-full"
+                }, [
+                  t("div", te, m(a(V)(l.localeCode)), 1),
+                  t("span", ae, m(a(I)(l.localeCode, a(h))), 1),
+                  r(n, {
+                    name: "close",
+                    class: "cursor-pointer",
+                    variant: "secondary",
+                    onClick: (b) => z(l.localeCode)
+                  }, null, 8, ["onClick"])
+                ]))), 128)),
+                w.value.length > 0 ? (i(), T(J, { key: 0 }, {
+                  "menu-button": v(() => [
+                    r(g, {
+                      variant: "secondary",
+                      "border-color": "neutral-gray-300",
+                      "text-color": "neutral-gray-400",
+                      icon: "add"
+                    })
+                  ]),
+                  default: v(() => [
+                    (i(!0), p(x, null, C(w.value, (l) => (i(), p("div", {
+                      class: "p-12 cursor-pointer hover:bg-fm-color-opacity-md rounded-sm",
+                      key: l.code,
+                      onClick: (b) => $(l.code)
+                    }, [
+                      t("div", se, [
+                        t("div", ce, m(l.icon), 1),
+                        t("span", me, m(l.name), 1)
+                      ])
+                    ], 8, ne))), 128))
+                  ]),
+                  _: 1
+                })) : B("", !0)
+              ])
+            ]),
+            t("div", ie, [
+              t("div", de, [
+                r(n, { name: "keyboard_arrow_down" }),
+                t("p", re, m(a(d)("menu.common.translation.name_section", { entity: e.title })), 1)
+              ]),
+              t("div", ue, [
+                r(W, {
+                  label: a(d)("menu.common.translation.default"),
+                  modelValue: u.value,
+                  "onUpdate:modelValue": o[0] || (o[0] = (l) => u.value = l)
+                }, null, 8, ["label", "modelValue"]),
+                c.value.length > 0 ? (i(), p("div", pe, [
+                  r(X, {
+                    label: a(d)("menu.common.translation.translation_label")
+                  }, null, 8, ["label"]),
+                  (i(!0), p(x, null, C(c.value, (l) => (i(), p("div", {
+                    key: l.localeCode,
+                    class: "flex items-center gap-16"
+                  }, [
+                    t("div", fe, [
+                      t("div", _e, m(a(V)(l.localeCode)), 1),
+                      t("span", ve, m(a(I)(l.localeCode, a(h))), 1)
+                    ]),
+                    t("div", he, [
+                      r(G, {
+                        modelValue: l.value,
+                        "onUpdate:modelValue": (b) => l.value = b,
+                        placeholder: a(d)("menu.group.translation.placeholder")
+                      }, null, 8, ["modelValue", "onUpdate:modelValue", "placeholder"])
+                    ])
+                  ]))), 128))
+                ])) : B("", !0)
+              ])
+            ])
+          ])
+        ]),
+        _: 1
+      }, 8, ["modelValue", "onOn:clickedAway"]);
+    };
+  }
+});
+export {
+  ke as _
+};