@feedmepos/mf-report 5.4.15-beta.1 → 5.4.15-beta.3

package/dist/MenuTab.vue_vue_type_script_setup_true_lang-DzZeasAK.js

@@ -0,0 +1,277 @@
+import { defineComponent as O, mergeModels as Q, useModel as V, ref as P, watch as W, resolveComponent as c, createElementBlock as D, openBlock as f, createTextVNode as C, createVNode as u, toDisplayString as g, unref as t, withCtx as _, createElementVNode as d, createCommentVNode as M, Fragment as I, renderList as H, createBlock as S, withDirectives as X, vShow as Y, isRef as $, normalizeClass as z } from "vue";
+import { u as Z, d as F, b as E } from "./global-loader-C3JC7z-H.js";
+import { storeToRefs as G } from "pinia";
+import { _ as ee } from "./LocationSelect.vue_vue_type_script_setup_true_lang-BFj4d-UF.js";
+import { a as te, _ as oe } from "./DateRangeSelect.vue_vue_type_script_setup_true_lang-DLDk5l4R.js";
+import { t as q, s as le } from "./timeFormat-CjNvJMgk.js";
+import { detectLocale as k } from "@feedmepos/mf-common";
+import { useBreakpoints as ne } from "@feedmepos/ui-library";
+const ae = { class: "px-24 py-16 rounded-lg shadow-light-300" }, me = { class: "text-fm-color-typo-primary" }, ue = { class: "text-fm-color-typo-secondary" }, ie = { class: "fm-typo-en-body-lg-600 mb-8" }, re = { class: "flex items-center justify-center w-full" }, se = { class: "fm-typo-en-body-lg-600 mb-8" }, de = { class: "flex items-center justify-center" }, ce = { class: "flex flex-row mb-4 px-4 gap-2" }, pe = /* @__PURE__ */ O({
+  __name: "TimeRangeSelect",
+  props: /* @__PURE__ */ Q({
+    defaultDateRange: {
+      type: Array,
+      default: () => [
+        {
+          name: "All day",
+          isDefault: !0,
+          startTime: { hour: 0, minute: 0 },
+          endTime: { hour: 23, minute: 59 }
+        }
+      ]
+    }
+  }, {
+    timeRange: {
+      type: Object,
+      default: () => ({
+        start: { hour: 0, minute: 0 },
+        end: { hour: 23, minute: 59 }
+      })
+    },
+    timeRangeModifiers: {},
+    selectTimeDefault: {
+      type: Number,
+      default: 1
+    },
+    selectTimeDefaultModifiers: {}
+  }),
+  emits: ["update:timeRange", "update:selectTimeDefault"],
+  setup(x) {
+    const { t: r } = Z(), m = V(x, "timeRange"), p = x, i = V(x, "selectTimeDefault");
+    function y(e = {
+      startTime: null,
+      endTime: null,
+      locale: "en-US"
+    }) {
+      if (!e.startTime || !e.endTime)
+        return "";
+      let o = F(), s = F();
+      return e.startTime && (o = F().set("hour", e.startTime.hour).set("minute", e.startTime.minute).locale(e.locale)), e.endTime && (s = F().set("hour", e.endTime.hour).set("minute", e.endTime.minute).locale(e.locale)), `${o.format("hh:mmA")}-${s.format("hh:mmA")}`;
+    }
+    function b(e) {
+      e && (m.value = e), a.value = !1;
+    }
+    function v(e) {
+      const o = e.split(":"), s = F().set("hour", Number(o[0])).set("minute", Number(o[1]));
+      return {
+        hours: Number(s.format("h")),
+        minutes: Number(s.format("m")),
+        period: s.format("A")
+      };
+    }
+    const n = P(JSON.parse(JSON.stringify(m.value)));
+    function h(e, o) {
+      n.value.start = JSON.parse(JSON.stringify(e)), n.value.end = JSON.parse(JSON.stringify(o));
+    }
+    W(
+      () => [() => m.value, () => i.value],
+      () => {
+        if (m.value) {
+          const e = p.defaultDateRange.findIndex(
+            (o) => {
+              var s, R, w, N;
+              return o.startTime.hour === ((s = m.value.start) == null ? void 0 : s.hour) && o.startTime.minute === ((R = m.value.start) == null ? void 0 : R.minute) && o.endTime.hour === ((w = m.value.end) == null ? void 0 : w.hour) && o.endTime.minute === ((N = m.value.end) == null ? void 0 : N.minute);
+            }
+          ) + 1;
+          e !== 0 ? i.value = e : i.value = p.defaultDateRange.length + 1;
+        }
+      },
+      { deep: !0 }
+    );
+    const a = P(!1);
+    return (e, o) => {
+      const s = c("FmChip"), R = c("FmRadio"), w = c("FmMenuDivider"), N = c("FmRadioGroup"), U = c("FmTimeInput"), A = c("FmButton"), K = c("FmPopover");
+      return f(), D("div", null, [
+        C(g(t(r)("")) + " ", 1),
+        u(K, {
+          placement: "bottom",
+          class: "min-w-[212px]",
+          "show-popover": a.value
+        }, {
+          "popover-button": _(() => [
+            u(te, {
+              "left-icon": "schedule",
+              label: `${y({
+                startTime: m.value.start,
+                endTime: m.value.end,
+                locale: t(k)()
+              })}`
+            }, null, 8, ["label"])
+          ]),
+          default: _(() => {
+            var B, J, j, L;
+            return [
+              o[6] || (o[6] = C(" > ")),
+              d("div", ae, [
+                u(N, {
+                  modelValue: i.value,
+                  "onUpdate:modelValue": o[0] || (o[0] = (l) => i.value = l)
+                }, {
+                  default: _(() => [
+                    (f(!0), D(I, null, H(p.defaultDateRange, (l, T) => (f(), S(R, {
+                      key: `range_${T}`,
+                      value: T + 1,
+                      label: l.name,
+                      onClick: (ge) => h(l.startTime, l.endTime)
+                    }, {
+                      label: _(() => [
+                        d("p", me, [
+                          C(g(l.name) + " ", 1),
+                          X(u(s, {
+                            label: t(r)("report.common.default"),
+                            class: "bg-fm-color-system-info-100 border-fm-color-typo-info text-fm-color-typo-info",
+                            compact: ""
+                          }, null, 8, ["label"]), [
+                            [Y, l.isDefault]
+                          ])
+                        ]),
+                        d("p", ue, g(t(q)(l.startTime, t(k)())) + " - " + g(t(q)(l.endTime, t(k)())) + " " + g(t(le)(l.startTime, l.endTime)), 1)
+                      ]),
+                      _: 2
+                    }, 1032, ["value", "label", "onClick"]))), 128)),
+                    u(w),
+                    u(R, {
+                      key: "range_custom",
+                      label: t(r)("report.common.custom"),
+                      value: p.defaultDateRange.length + 1
+                    }, null, 8, ["label", "value"])
+                  ]),
+                  _: 1
+                }, 8, ["modelValue"]),
+                i.value === p.defaultDateRange.length + 1 ? (f(), D(I, { key: 0 }, [
+                  d("p", ie, g(t(r)("report.date.startingTime")), 1),
+                  d("div", re, [
+                    u(U, {
+                      "model-value": v(`${(B = n.value.start) == null ? void 0 : B.hour}:${(J = n.value.start) == null ? void 0 : J.minute}`),
+                      "onUpdate:modelValue": o[1] || (o[1] = (l) => {
+                        if (n.value.start) {
+                          const T = t(F)(`${l.hours}:${l.minutes} ${l.period}`, "h:m A").locale(
+                            t(k)()
+                          );
+                          n.value.start.hour = T.get("hour"), n.value.start.minute = T.get("minute");
+                        }
+                      })
+                    }, null, 8, ["model-value"])
+                  ]),
+                  d("p", se, g(t(r)("report.date.endingTime")), 1),
+                  d("div", de, [
+                    u(U, {
+                      "model-value": v(`${(j = n.value.end) == null ? void 0 : j.hour}:${(L = n.value.end) == null ? void 0 : L.minute}`),
+                      "onUpdate:modelValue": o[2] || (o[2] = (l) => {
+                        if (n.value.end) {
+                          const T = t(F)(`${l.hours}:${l.minutes} ${l.period}`, "h:m A").locale(
+                            t(k)()
+                          );
+                          n.value.end.hour = T.get("hour"), n.value.end.minute = T.get("minute");
+                        }
+                      })
+                    }, null, 8, ["model-value"])
+                  ])
+                ], 64)) : M("", !0),
+                d("div", ce, [
+                  o[5] || (o[5] = d("div", { class: "grow" }, null, -1)),
+                  u(A, {
+                    label: t(r)("report.common.cancel"),
+                    variant: "tertiary",
+                    onClick: o[3] || (o[3] = (l) => a.value = !1)
+                  }, null, 8, ["label"]),
+                  u(A, {
+                    label: t(r)("report.common.apply"),
+                    onClick: o[4] || (o[4] = () => b(JSON.parse(JSON.stringify(n.value))))
+                  }, null, 8, ["label"])
+                ])
+              ])
+            ];
+          }),
+          _: 1
+        }, 8, ["show-popover"])
+      ]);
+    };
+  }
+}), fe = { class: "flex overflow-x-auto overflow-y-hidden scrollbar-hide" }, ve = /* @__PURE__ */ O({
+  __name: "Filter",
+  setup(x) {
+    const r = E(), { locations: m, selectedLocationIds: p } = G(E()), { dateRange: i, compareDateRange: y, timeRange: b, defaultDateSetting: v, selectTimeDefault: n } = G(r);
+    return (h, a) => (f(), D("div", fe, [
+      u(ee, {
+        modelValue: t(p),
+        "onUpdate:modelValue": a[5] || (a[5] = (e) => $(p) ? p.value = e : null),
+        options: t(m)
+      }, {
+        default: _(() => [
+          u(oe, {
+            "date-range": t(i),
+            "onUpdate:dateRange": a[0] || (a[0] = (e) => $(i) ? i.value = e : null),
+            "compare-date-range": t(y),
+            "onUpdate:compareDateRange": a[1] || (a[1] = (e) => $(y) ? y.value = e : null),
+            "compare-type": t(v).defaultCompareType,
+            "onUpdate:compareType": a[2] || (a[2] = (e) => t(v).defaultCompareType = e),
+            compare: ""
+          }, null, 8, ["date-range", "compare-date-range", "compare-type"]),
+          u(pe, {
+            "time-range": t(b),
+            "onUpdate:timeRange": a[3] || (a[3] = (e) => $(b) ? b.value = e : null),
+            "select-time-default": t(n),
+            "onUpdate:selectTimeDefault": a[4] || (a[4] = (e) => $(n) ? n.value = e : null),
+            "default-date-range": t(v).timeOptions
+          }, null, 8, ["time-range", "select-time-default", "default-date-range"])
+        ]),
+        _: 1
+      }, 8, ["modelValue", "options"])
+    ]));
+  }
+}), Te = { class: "fm-typo-en-body-md-400" }, $e = /* @__PURE__ */ O({
+  __name: "MenuTab",
+  props: {
+    modelValue: { required: !1, default: [] },
+    modelModifiers: {}
+  },
+  emits: ["update:modelValue"],
+  setup(x) {
+    const r = V(x, "modelValue"), { breakpoints: m } = ne();
+    return (p, i) => {
+      const y = c("FmButton"), b = c("FmIcon"), v = c("FmMenuItem"), n = c("FmMenu");
+      return f(), D("div", {
+        class: z(["flex items-center pb-6 px-24", `${t(m).lg || t(m).md ? "px-24" : "pl-3"}`])
+      }, [
+        u(ve),
+        i[0] || (i[0] = d("div", { class: "flex grow" }, null, -1)),
+        r.value.length > 0 ? (f(), S(n, {
+          key: 0,
+          trigger: "click",
+          placement: "left",
+          shift: !0,
+          class: z(t(m).sm || t(m).xs ? "pr-3" : "")
+        }, {
+          "menu-button": _(() => [
+            u(y, {
+              "append-icon": "more_vert",
+              variant: "tertiary",
+              size: "md",
+              class: "w-[36px] bg-none"
+            })
+          ]),
+          default: _(() => [
+            (f(!0), D(I, null, H(r.value, (h, a) => (f(), S(v, {
+              key: `button-${a}`,
+              onClick: h.onClick
+            }, {
+              label: _(() => [
+                h.prependIcon ?? !1 ? (f(), S(b, {
+                  key: 0,
+                  name: h.icon
+                }, null, 8, ["name"])) : M("", !0),
+                d("p", Te, g(h.label), 1)
+              ]),
+              _: 2
+            }, 1032, ["onClick"]))), 128))
+          ]),
+          _: 1
+        }, 8, ["class"])) : M("", !0)
+      ], 2);
+    };
+  }
+});
+export {
+  $e as _
+};