@oneb/ui-vue 0.3.13 → 0.3.15

package/dist/OneHelpMenu-d7a39a69.js

@@ -0,0 +1,856 @@
+import { defineComponent as M, ref as A, provide as Y, watch as Z, nextTick as ee, onBeforeUnmount as te, computed as S, openBlock as t, createElementBlock as o, createElementVNode as e, renderSlot as T, normalizeProps as I, guardReactiveProps as R, createBlock as L, Teleport as oe, createCommentVNode as d, createVNode as _, Transition as W, withCtx as E, normalizeClass as j, toDisplayString as u, Fragment as C, inject as ne, withModifiers as se, resolveDynamicComponent as V, renderList as B, mergeProps as le, unref as $ } from "vue";
+import { a as re, c as ie, o as ae, s as ce } from "./floating-ui.dom-4509432e.js";
+import { flip as ue } from "@floating-ui/vue";
+import { _ as z } from "./OneAvatar.vue_vue_type_script_setup_true_lang-08ab80dd.js";
+import { r as G } from "./XMarkIcon-51ef0691.js";
+import { r as J } from "./ChevronDownIcon-6805ce6c.js";
+import { r as Q, a as de } from "./ChevronRightIcon-4549a26b.js";
+import { OneButton as pe } from "./button/index.js";
+import { _ as X } from "./_plugin-vue_export-helper-dad06003.js";
+const he = {
+  title: {
+    type: String
+  },
+  stick: {
+    type: String,
+    default: "right"
+  },
+  appendBody: {
+    type: Boolean,
+    default: !1
+  }
+}, fe = {
+  variant: {
+    type: String,
+    default: "primary"
+  },
+  label: {
+    type: String
+  },
+  icon: {
+    type: [Function, Object]
+  }
+}, Dt = {
+  modelValue: {
+    type: [Object, Array],
+    default: null
+  },
+  multiple: {
+    type: Boolean,
+    default: !1
+  },
+  items: {
+    type: Array,
+    default: () => []
+  },
+  title: {
+    type: String
+  },
+  placeholder: {
+    type: String,
+    default: "Select"
+  },
+  searchPlaceholder: {
+    type: String,
+    default: "Search"
+  },
+  labelKey: {
+    type: String,
+    default: "label"
+  },
+  valueKey: {
+    type: String,
+    default: "id"
+  },
+  stick: {
+    type: String,
+    default: "bottom-start"
+  },
+  allowEmpty: {
+    type: Boolean,
+    default: !1
+  },
+  emptyLabel: {
+    type: String
+  },
+  createLabel: {
+    type: String
+  },
+  searchable: {
+    type: Boolean,
+    default: !0
+  },
+  isLoading: {
+    type: Boolean,
+    default: !1
+  },
+  groupKey: {
+    type: String
+  },
+  maxWidth: {
+    type: String
+  },
+  view: {
+    type: String,
+    default: "default"
+  }
+}, me = ["data-opened"], ve = {
+  key: 0,
+  class: "text-sm text-secondary-content px-3 py-2 text-left"
+}, ye = {
+  key: 0,
+  class: "text-sm text-secondary-content px-3 py-2 text-left"
+}, xe = /* @__PURE__ */ M({
+  __name: "OneDropdown",
+  props: he,
+  emits: ["open", "close"],
+  setup(w, { emit: f }) {
+    const p = A(!1), v = A(null), c = A(null), l = A(null), m = f, s = w, h = () => {
+      p.value = !p.value, p.value ? m("open") : m("close");
+    };
+    Y("OneDropdown", {
+      onToggle: h
+    });
+    let a = null;
+    function g() {
+      !c.value || !l.value || ie(c.value, l.value, {
+        placement: s.stick ? s.stick : "bottom-start",
+        strategy: "fixed",
+        middleware: [ae(5), ue(), ce({ padding: 8 })]
+      }).then(({ x: n, y }) => {
+        l.value && Object.assign(l.value.style, {
+          left: `${n}px`,
+          top: `${y}px`
+        });
+      });
+    }
+    Z(p, async (n) => {
+      s.appendBody && (n ? (await ee(), c.value && l.value && (g(), a = re(c.value, l.value, g))) : a && (a(), a = null));
+    }), te(() => {
+      a && a();
+    });
+    const k = S(() => {
+      var F;
+      if (s.appendBody)
+        return "";
+      const n = (F = v.value) == null ? void 0 : F.getBoundingClientRect(), y = n ? n.x < 270 : !1;
+      return n && n.top + 270 > window.innerHeight ? "up" + (y ? "-right" : "-left") : "down" + (y ? "-right" : "-left");
+    }), b = S(() => {
+      const n = [
+        "absolute z-10 w-fit rounded-md bg-white",
+        "py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none",
+        "overflow-auto max-h-[540px] min-w-[150px] max-w-[540px]"
+      ];
+      return k.value.startsWith("up") ? n.push("bottom-1 mb-10") : k.value.startsWith("down") && n.push("top-1 mt-10"), s.stick === "right" ? n.push("right-0") : s.stick === "left" && n.push("left-0"), n;
+    }), i = S(() => [
+      "fixed z-[10000] w-fit rounded-md bg-white",
+      "py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none",
+      "overflow-auto max-h-[540px] min-w-[150px] max-w-[540px]"
+    ]);
+    return (n, y) => (t(), o("div", {
+      class: "relative inline-block",
+      ref_key: "containerRef",
+      ref: v,
+      "data-opened": p.value
+    }, [
+      e("div", {
+        ref_key: "buttonRef",
+        ref: c
+      }, [
+        T(n.$slots, "button", I(R({ onToggle: h, isExpanded: p.value })))
+      ], 512),
+      s.appendBody ? (t(), L(oe, {
+        key: 0,
+        to: "body"
+      }, [
+        p.value ? (t(), o("div", {
+          key: 0,
+          class: "fixed top-0 left-0 w-screen h-screen z-[9999]",
+          onClick: h
+        })) : d("", !0),
+        _(W, {
+          "enter-active-class": "transition ease-out duration-100",
+          "enter-from-class": "transform opacity-0 scale-95",
+          "enter-to-class": "transform opacity-100 scale-100",
+          "leave-active-class": "transition ease-in duration-75",
+          "leave-from-class": "transform opacity-100 scale-100",
+          "leave-to-class": "transform opacity-0 scale-95"
+        }, {
+          default: E(() => [
+            p.value ? (t(), o("div", {
+              key: 0,
+              ref_key: "menuRef",
+              ref: l,
+              class: j(["menu", i.value]),
+              role: "menu",
+              "aria-orientation": "vertical",
+              tabindex: "-1"
+            }, [
+              n.title ? (t(), o("div", ve, u(n.title), 1)) : d("", !0),
+              T(n.$slots, "menu", I(R({ onToggle: h })))
+            ], 2)) : d("", !0)
+          ]),
+          _: 3
+        })
+      ])) : (t(), o(C, { key: 1 }, [
+        p.value ? (t(), o("div", {
+          key: 0,
+          class: "fixed top-0 left-0 w-screen h-screen z-10",
+          onClick: h
+        })) : d("", !0),
+        _(W, {
+          "enter-active-class": "transition ease-out duration-100",
+          "enter-from-class": "transform opacity-0 scale-95",
+          "enter-to-class": "transform opacity-100 scale-100",
+          "leave-active-class": "transition ease-in duration-75",
+          "leave-from-class": "transform opacity-100 scale-100",
+          "leave-to-class": "transform opacity-0 scale-95"
+        }, {
+          default: E(() => [
+            p.value ? (t(), o("div", {
+              key: 0,
+              class: j(["menu", b.value]),
+              role: "menu",
+              "aria-orientation": "vertical",
+              tabindex: "-1"
+            }, [
+              n.title ? (t(), o("div", ye, u(n.title), 1)) : d("", !0),
+              T(n.$slots, "menu", I(R({ onToggle: h })))
+            ], 2)) : d("", !0)
+          ]),
+          _: 3
+        })
+      ], 64))
+    ], 8, me));
+  }
+}), K = /* @__PURE__ */ M({
+  __name: "OneDropdownItem",
+  props: fe,
+  emits: ["click"],
+  setup(w, { emit: f }) {
+    const p = f, v = w, c = ne("OneDropdown"), l = () => {
+      c !== void 0 && c.onToggle(), p("click");
+    }, m = S(() => {
+      const s = [];
+      return v.variant === "secondary" ? s.push("text-secondary-content hover:bg-secondary-body-hover") : v.variant === "danger" ? s.push("text-danger-content hover:bg-danger-10") : v.variant === "warning" ? s.push("text-warning-content hover:bg-warning-10") : v.variant === "info" ? s.push("text-info-content hover:bg-info-10") : s.push("hover:bg-secondary-body-hover"), s;
+    });
+    return (s, h) => (t(), o("button", {
+      class: j(["px-3 py-1.5 flex items-center space-x-3 w-full whitespace-nowrap", m.value]),
+      onClick: se(l, ["prevent"])
+    }, [
+      s.icon ? (t(), L(V(s.icon), {
+        key: 0,
+        class: "w-4 h-4"
+      })) : d("", !0),
+      e("span", null, u(s.label), 1)
+    ], 2));
+  }
+});
+function ge(w, f) {
+  return t(), o("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    "stroke-width": "1.8",
+    stroke: "currentColor",
+    "aria-hidden": "true"
+  }, [
+    e("path", {
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      d: "M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9"
+    })
+  ]);
+}
+const _e = {
+  user: {
+    type: Object,
+    required: !0
+  },
+  menu: {
+    type: Array,
+    default: () => []
+  },
+  iconSize: {
+    type: String,
+    default: "34"
+  },
+  app: {
+    type: Object
+  },
+  accountLabel: {
+    type: String,
+    default: "Account"
+  },
+  logoutLabel: {
+    type: String,
+    default: "Logout"
+  },
+  versionLabel: {
+    type: String,
+    default: ""
+  },
+  onAccount: {
+    type: Function
+  },
+  onLogout: {
+    type: Function
+  }
+}, we = {
+  workspace: {
+    type: Object,
+    required: !0
+  },
+  workspaces: {
+    type: Array
+  },
+  apps: {
+    type: Array,
+    required: !0
+  },
+  iconSize: {
+    type: String,
+    default: "24"
+  },
+  appsTitle: {
+    type: String,
+    default: "Ваші додатки"
+  },
+  changeLabel: {
+    type: String,
+    default: "Керувати робочими просторами"
+  },
+  onChange: {
+    type: Function
+  },
+  onApp: {
+    type: Function
+  }
+}, ke = {
+  help: {
+    type: Object,
+    required: !0
+  }
+}, be = ["onClick"], Ce = { class: "flex flex-col items-center pt-5 pb-2 h-full" }, $e = { class: "flex flex-col px-10 py-1 mt-2 text-center" }, Ae = { class: "self-center text-base font-medium tracking-wide text-black" }, Se = { class: "mt-1 text-xs leading-5 text-blue-500 font-light" }, Fe = { class: "text-left w-full mt-5 px-3" }, Be = { class: "-mb-2 flex-shrink-0 mt-auto pt-6 text-[8px] leading-3 text-gray-400" }, qt = /* @__PURE__ */ M({
+  __name: "OneUserMenu",
+  props: _e,
+  setup(w) {
+    const f = w, p = S(() => {
+      var l;
+      return (l = f.menu) == null ? void 0 : l.map((m) => {
+        let s = { label: m.label };
+        m.icon != null && (s = { ...s, icon: m.icon });
+        const h = typeof m.click == "function" ? m.click : () => {
+        };
+        return {
+          key: m.label,
+          args: s,
+          click: h
+        };
+      });
+    }), v = () => {
+      typeof f.onAccount == "function" && f.onAccount();
+    }, c = () => {
+      typeof f.onLogout == "function" && f.onLogout();
+    };
+    return (l, m) => (t(), L(xe, { stick: "right" }, {
+      button: E(({ onToggle: s, isExpanded: h }) => {
+        var a, g;
+        return [
+          e("button", {
+            onClick: s,
+            class: j(["p-1 rounded-full hover:bg-secondary-10", [h ? "bg-secondary-25" : ""]])
+          }, [
+            _(z, {
+              text: ((a = l.user) == null ? void 0 : a.name) || "",
+              size: l.iconSize,
+              src: (g = l.user) == null ? void 0 : g.photo_url,
+              rounded: !0
+            }, null, 8, ["text", "size", "src"])
+          ], 10, be)
+        ];
+      }),
+      menu: E(() => {
+        var s, h, a, g, k;
+        return [
+          e("div", Ce, [
+            _(z, {
+              text: ((s = l.user) == null ? void 0 : s.name) || "",
+              size: 80,
+              src: (h = l.user) == null ? void 0 : h.photo_url,
+              rounded: !0,
+              class: "mx-auto"
+            }, null, 8, ["text", "src"]),
+            e("div", $e, [
+              e("div", Ae, u((a = l.user) == null ? void 0 : a.name), 1),
+              e("div", Se, u((g = l.user) == null ? void 0 : g.email), 1)
+            ]),
+            typeof f.onAccount == "function" ? (t(), o("a", {
+              key: 0,
+              onClick: v,
+              class: "cursor-pointer justify-center px-8 py-2 mt-3 text-xs font-semibold tracking-wide leading-5 text-gray-600 border border-solid bg-neutral-100 border-slate-200 rounded-[50px] hover:bg-neutral-200"
+            }, u(l.accountLabel), 1)) : d("", !0),
+            e("div", Fe, [
+              (t(!0), o(C, null, B(p.value, (b) => (t(), L(K, le({
+                key: b.key
+              }, { ref_for: !0 }, b.args, {
+                onClick: b.click
+              }), null, 16, ["onClick"]))), 128)),
+              typeof l.onLogout == "function" ? (t(), L(K, {
+                key: 0,
+                icon: $(ge),
+                label: l.logoutLabel,
+                class: "rounded py-3",
+                onClick: c
+              }, null, 8, ["icon", "label"])) : d("", !0)
+            ]),
+            m[0] || (m[0] = e("div", {
+              class: "space-y-2 text-center",
+              style: { width: "240px" }
+            }, null, -1)),
+            e("div", Be, u((k = l.app) == null ? void 0 : k.version), 1)
+          ])
+        ];
+      }),
+      _: 1
+    }));
+  }
+});
+function Le(w, f) {
+  return t(), o("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    "stroke-width": "1.8",
+    stroke: "currentColor",
+    "aria-hidden": "true"
+  }, [
+    e("rect", {
+      width: "2.94",
+      height: "2.94",
+      x: "17.16",
+      y: "3.9",
+      fill: "currentColor",
+      "stroke-width": "1.8",
+      rx: "1.1"
+    }),
+    e("rect", {
+      width: "2.94",
+      height: "2.94",
+      x: "10.53",
+      y: "3.9",
+      fill: "currentColor",
+      "stroke-width": "1.8",
+      rx: "1.1"
+    }),
+    e("rect", {
+      width: "2.94",
+      height: "2.94",
+      x: "3.9",
+      y: "3.9",
+      fill: "currentColor",
+      "stroke-width": "1.8",
+      rx: "1.1"
+    }),
+    e("rect", {
+      width: "2.94",
+      height: "2.94",
+      x: "17.16",
+      y: "10.53",
+      fill: "currentColor",
+      "stroke-width": "1.8",
+      rx: "1.1"
+    }),
+    e("rect", {
+      width: "2.94",
+      height: "2.94",
+      x: "10.53",
+      y: "10.53",
+      fill: "currentColor",
+      "stroke-width": "1.8",
+      rx: "1.1"
+    }),
+    e("rect", {
+      width: "2.94",
+      height: "2.94",
+      x: "3.9",
+      y: "10.53",
+      fill: "currentColor",
+      "stroke-width": "1.8",
+      rx: "1.1"
+    }),
+    e("rect", {
+      width: "2.94",
+      height: "2.94",
+      x: "17.16",
+      y: "17.16",
+      fill: "currentColor",
+      "stroke-width": "1.8",
+      rx: "1.1"
+    }),
+    e("rect", {
+      width: "2.94",
+      height: "2.94",
+      x: "10.53",
+      y: "17.16",
+      fill: "currentColor",
+      "stroke-width": "1.8",
+      rx: "1.1"
+    }),
+    e("rect", {
+      width: "2.94",
+      height: "2.94",
+      x: "3.9",
+      y: "17.16",
+      fill: "currentColor",
+      "stroke-width": "1.8",
+      rx: "1.1"
+    })
+  ]);
+}
+const je = ["data-opened"], ze = {
+  key: 1,
+  class: "absolute top-0 right-0 h-screen overflow-y-auto max-w-96 bg-white px-3 z-10"
+}, Me = { class: "flex justify-between items-center pt-3 mb-3" }, Oe = { class: "font-semibold text-xl px-3" }, Ee = { class: "grid" }, Pe = { class: "rounded-lg m-3 border" }, Te = {
+  class: "space-x-2 flex items-center px-3 py-2",
+  style: { width: "300px" }
+}, Ie = { class: "flex justify-between relative" }, Re = { class: "flex items-center justify-between w-full text-left text-sm font-semibold" }, Ve = { key: 0 }, He = { class: "text-xs font-semibold" }, De = { class: "px-3 py-2" }, qe = { class: "text-secondary-content text-left pb-1 text-xs uppercase" }, Ne = { class: "overflow-auto max-h-full" }, Ue = {
+  key: 0,
+  class: "space-y-2"
+}, We = ["onClick"], Ke = { class: "flex" }, Ge = { class: "border border-secondary-stroke rounded-2xl w-14 h-14 md:w-14 md:h-14 flex items-center justify-center" }, Je = { class: "pl-2" }, Qe = { class: "text-sm mt-1 font-semibold" }, Xe = { class: "text9 mt-1" }, Ye = {
+  key: 1,
+  class: "mt-2 w-full bg-[#FAFAFA] hover:bg-secondary-10 p-2 rounded-lg mb-5 text-xs hidden"
+}, Ze = /* @__PURE__ */ M({
+  __name: "OneBrowserMenu",
+  props: we,
+  emits: ["open", "close"],
+  setup(w, { emit: f }) {
+    const p = f, v = w, c = A(!1), l = () => {
+      c.value = !c.value, c.value ? p("open") : p("close");
+    }, m = A(!1);
+    S(() => m.value ? Q : J);
+    const s = () => {
+      typeof v.onChange == "function" && v.onChange();
+    }, h = (a) => {
+      typeof v.onApp == "function" && v.onApp(a);
+    };
+    return (a, g) => {
+      var k, b, i, n, y, F;
+      return t(), o("div", { "data-opened": c.value }, [
+        e("button", {
+          onClick: l,
+          class: j(["sm:p-1 sm:w-[44px] sm:h-[44px] w-8 h-8 rounded-md hover:bg-secondary-10 flex", { "bg-secondary-10": c.value }])
+        }, [
+          _($(Le), { class: "text-secondary-base w-full p-1 hover:text-blue-600 m-auto" })
+        ], 2),
+        c.value ? (t(), o("div", {
+          key: 0,
+          class: "fixed top-0 left-0 w-screen h-screen z-10 bg-black/10",
+          onClick: l
+        })) : d("", !0),
+        c.value ? (t(), o("div", ze, [
+          e("div", Me, [
+            e("div", Oe, u((k = a.workspace) == null ? void 0 : k.title), 1),
+            _($(G), {
+              class: "w-6 cursor-pointer",
+              onClick: l
+            })
+          ]),
+          e("div", Ee, [
+            e("div", Pe, [
+              e("div", Te, [
+                e("div", Ie, [
+                  _(z, {
+                    text: ((b = a.workspace) == null ? void 0 : b.name) || "",
+                    src: (i = a.workspace) == null ? void 0 : i.photo_url,
+                    size: 44,
+                    rounded: !1,
+                    class: "mx-auto"
+                  }, null, 8, ["text", "src"])
+                ]),
+                e("div", Re, u((n = a.workspace) == null ? void 0 : n.name), 1)
+              ]),
+              m.value ? (t(), o("div", Ve, [
+                (t(!0), o(C, null, B(a.workspaces, (x) => (t(), o("div", {
+                  key: x.name,
+                  class: "flex items-center space-x-3 border-t px-5 py-2 hover:bg-secondary-10"
+                }, [
+                  _(z, {
+                    text: x.name,
+                    src: x.photo_url,
+                    size: 30,
+                    rounded: !1
+                  }, null, 8, ["text", "src"]),
+                  e("span", He, u(x.name), 1)
+                ]))), 128))
+              ])) : d("", !0),
+              g[0] || (g[0] = e("hr", null, null, -1)),
+              e("div", {
+                onClick: s,
+                class: "text-center py-2 cursor-pointer",
+                style: { "font-size": "10px" }
+              }, u((y = a.workspace) == null ? void 0 : y.changeLabel), 1)
+            ])
+          ]),
+          e("div", De, [
+            e("div", qe, u((F = a.workspace) == null ? void 0 : F.appsLabel), 1),
+            e("div", Ne, [
+              a.apps && a.apps.length ? (t(), o("div", Ue, [
+                (t(!0), o(C, null, B(a.apps, (x) => (t(), o("div", {
+                  key: x.id,
+                  onClick: (O) => h(x),
+                  class: "flex justify-between items-center rounded-lg hover:bg-secondary-10 p-2 bg-[#FAFAFA] cursor-pointer"
+                }, [
+                  e("div", Ke, [
+                    e("div", Ge, [
+                      _(z, {
+                        text: x.name,
+                        src: x.photo_url,
+                        size: 44,
+                        rounded: !1
+                      }, null, 8, ["text", "src"])
+                    ]),
+                    e("div", Je, [
+                      e("p", Qe, u(x.name), 1),
+                      e("p", Xe, u(x == null ? void 0 : x.short), 1)
+                    ])
+                  ]),
+                  e("div", null, [
+                    _(pe, {
+                      variant: "touch",
+                      icon: $(de),
+                      onClick: (O) => h(x)
+                    }, null, 8, ["icon", "onClick"])
+                  ])
+                ], 8, We))), 128))
+              ])) : d("", !0),
+              a.apps && a.apps.length ? (t(), o("button", Ye, u("Дивитися всі"))) : d("", !0)
+            ])
+          ])
+        ])) : d("", !0)
+      ], 8, je);
+    };
+  }
+});
+const Nt = /* @__PURE__ */ X(Ze, [["__scopeId", "data-v-9e75279e"]]);
+function et(w, f) {
+  return t(), o("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    "stroke-width": "1.8",
+    stroke: "currentColor",
+    "aria-hidden": "true"
+  }, [
+    e("path", {
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      d: "M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z"
+    })
+  ]);
+}
+function tt(w, f) {
+  return t(), o("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    "stroke-width": "1.8",
+    stroke: "currentColor",
+    "aria-hidden": "true"
+  }, [
+    e("path", {
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      d: "M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+    }),
+    e("path", {
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      d: "M15.91 11.672a.375.375 0 010 .656l-5.603 3.113a.375.375 0 01-.557-.328V8.887c0-.286.307-.466.557-.327l5.603 3.112z"
+    })
+  ]);
+}
+function ot(w, f) {
+  return t(), o("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    "stroke-width": "1.8",
+    stroke: "currentColor",
+    "aria-hidden": "true"
+  }, [
+    e("path", {
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      d: "M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418"
+    })
+  ]);
+}
+const nt = ["data-opened"], st = {
+  key: 1,
+  class: "absolute top-0 right-0 h-screen max-w-96 bg-white px-3 z-10 flex flex-col"
+}, lt = { class: "flex justify-between items-center pt-3 mb-3" }, rt = { class: "font-semibold text-xl px-3" }, it = {
+  key: 0,
+  class: "grid grid-cols-3 bg-[#FAFAFA] rounded-xl text-[#525B66] mb-2"
+}, at = ["onClick"], ct = { class: "uppercase text-[8px]" }, ut = { class: "overflow-y-auto grid rounded-xl" }, dt = { class: "max-h-full bg-[#FAFAFA]" }, pt = {
+  key: 0,
+  class: "space-y-2"
+}, ht = ["onClick"], ft = { class: "flex" }, mt = { class: "pl-2" }, vt = { class: "text-sm mt-1 font-semibold" }, yt = { class: "text-[10px] mt-1 text-[#979CA9]" }, xt = { class: "mt-auto" }, gt = { key: 0 }, _t = ["onClick"], wt = { class: "flex items-center space-x-3" }, kt = { class: "h-16" }, bt = {
+  key: 0,
+  class: "bg-[#FAFAFA] rounded-lg p-3"
+}, Ct = { class: "flex justify-between" }, $t = ["onClick"], At = {
+  key: 0,
+  class: "tooltip-text min-w-[70px]"
+}, St = { class: "flex justify-between mb-4" }, Ft = ["href"], Bt = { class: "flex flex-nowrap items-center w-max h-[24px]" }, Lt = { class: "whitespace-nowrap overflow-hidden text-ellipsis text-left flex-shrink w-full text-[#525B66]" }, jt = { class: "py-[8px] pl-0 pr-[8px]" }, zt = /* @__PURE__ */ M({
+  __name: "OneHelpMenu",
+  props: ke,
+  emits: ["open", "close"],
+  setup(w, { emit: f }) {
+    const p = f, v = w, c = A(!1), l = () => {
+      c.value = !c.value, c.value ? p("open") : p("close");
+    }, m = S(() => k.value ? Q : J), s = A(3), h = S(() => {
+      var n, y;
+      const i = ((y = (n = v.help) == null ? void 0 : n.helpList) == null ? void 0 : y.length) || 0;
+      return s.value === i;
+    });
+    S(() => {
+      var n;
+      return (((n = v.help) == null ? void 0 : n.helpList) || []).slice(0, s.value);
+    });
+    const a = () => {
+      var n, y;
+      const i = ((y = (n = v.help) == null ? void 0 : n.helpList) == null ? void 0 : y.length) || 0;
+      s.value = h.value ? 3 : i;
+    }, g = (i, n) => {
+      i && n && typeof n.openLink == "function" ? n.openLink(n) : i && window.open(i, "_blank");
+    }, k = A(!1), b = () => {
+      k.value = !k.value;
+    };
+    return (i, n) => {
+      var y, F, x, O, H, D, q, N, U;
+      return t(), o("div", { "data-opened": c.value }, [
+        e("button", {
+          onClick: l,
+          class: j(["sm:p-1 sm:w-[44px] sm:h-[44px] w-8 h-8 rounded-md hover:bg-secondary-10 flex", { "bg-secondary-10": c.value }])
+        }, [
+          _($(et), { class: "text-secondary-base w-full p-1 hover:text-blue-600 m-auto" })
+        ], 2),
+        c.value ? (t(), o("div", {
+          key: 0,
+          class: "fixed top-0 left-0 w-screen h-screen z-10 bg-black/10 flex flex-col",
+          onClick: l
+        })) : d("", !0),
+        c.value ? (t(), o("div", st, [
+          e("div", lt, [
+            e("div", rt, u((y = i.help) == null ? void 0 : y.label), 1),
+            _($(G), {
+              class: "w-6 cursor-pointer",
+              onClick: l
+            })
+          ]),
+          (F = i.help) != null && F.helpButton ? (t(), o("div", it, [
+            (t(!0), o(C, null, B((x = i.help) == null ? void 0 : x.helpButton, (r) => (t(), o("button", {
+              key: r.name,
+              onClick: (P) => g(r.link, r),
+              class: "grid justify-center space-y-2 hover:bg-slate-100 p-3 rounded-xl hover:text-blue-500"
+            }, [
+              e("div", null, [
+                (t(), L(V(r == null ? void 0 : r.icon), { class: "w-[16px] h-[16px] mx-auto" }))
+              ]),
+              e("span", ct, u(r.name), 1)
+            ], 8, at))), 128))
+          ])) : d("", !0),
+          e("div", ut, [
+            e("div", dt, [
+              (O = i.help) != null && O.helpList && i.help.helpList.length ? (t(), o("div", pt, [
+                (t(!0), o(C, null, B(i.help.helpList, (r) => (t(), o("div", {
+                  key: r.id,
+                  onClick: (P) => g(r.link, r),
+                  class: "flex justify-between items-center rounded-lg hover:bg-slate-100 p-2 cursor-pointer hover:text-[#4089E0]"
+                }, [
+                  e("div", ft, [
+                    e("div", mt, [
+                      e("p", vt, u(r.name), 1),
+                      e("p", yt, u(r.category), 1)
+                    ])
+                  ])
+                ], 8, ht))), 128))
+              ])) : d("", !0)
+            ])
+          ]),
+          (H = i.help) != null && H.helpList && i.help.helpList.length < 0 ? (t(), o("button", {
+            key: 1,
+            onClick: a,
+            class: "h-11 w-full bg-[#FAFAFA] hover:bg-slate-100 p-3 text-[#525B66] rounded-b-xl text-xs hover:text-[#4089E0] font-medium"
+          }, u(h.value ? i.help.buttNoMore : i.help.buttMore), 1)) : d("", !0),
+          e("div", xt, [
+            (D = i.help) != null && D.video ? (t(), o("div", gt, [
+              (t(!0), o(C, null, B(i.help.video, (r) => (t(), o("button", {
+                key: r.id,
+                onClick: (P) => g(r.link, r),
+                class: "flex items-center space-x-3 mt-2 w-full bg-[#FAFAFA] hover:bg-slate-100 p-4 text-[#525B66] rounded-lg text-sm hover:text-[#4089E0] font-medium"
+              }, [
+                _($(tt), { class: "w-6 h-6" }),
+                e("span", null, u(r.name), 1)
+              ], 8, _t))), 128))
+            ])) : d("", !0),
+            (q = i.help) != null && q.socialList ? (t(), o("button", {
+              key: 1,
+              onClick: b,
+              class: "flex items-center justify-between mt-2 w-full bg-[#FAFAFA] hover:bg-slate-100 p-4 text-[#525B66] rounded-lg text-sm hover:text-[#4089E0] font-medium"
+            }, [
+              e("div", wt, [
+                _($(ot), { class: "w-6 h-6" }),
+                e("span", null, u(i.help.socialButt), 1)
+              ]),
+              _($(m), { class: "w-4 h-4" })
+            ])) : d("", !0),
+            e("div", kt, [
+              k.value ? (t(), o("div", bt, [
+                e("div", Ct, [
+                  (t(!0), o(C, null, B((N = i.help) == null ? void 0 : N.socialList, (r) => (t(), o("button", {
+                    key: r.id,
+                    onClick: (P) => g(r.link, r),
+                    class: "flex items-center space-x-2 p-2 rounded-lg hover:bg-slate-100 hover:text-blue-500 tooltip"
+                  }, [
+                    e("div", null, [
+                      r.name ? (t(), o("div", At, u(r.name), 1)) : d("", !0),
+                      (t(), L(V(r == null ? void 0 : r.icon), { class: "w-[24px] h-[24px] mx-auto" }))
+                    ])
+                  ], 8, $t))), 128))
+                ])
+              ])) : d("", !0)
+            ]),
+            e("div", St, [
+              (t(!0), o(C, null, B((U = i.help) == null ? void 0 : U.termsOffer, (r) => (t(), o("a", {
+                key: r.name,
+                target: "_blank",
+                href: r.link,
+                class: "ml-2 flex items-center rounded-lg text-xs hover:underline font-extralight cursor-pointer"
+              }, [
+                e("div", Bt, [
+                  e("div", Lt, [
+                    e("span", jt, u(r.name), 1)
+                  ])
+                ])
+              ], 8, Ft))), 128))
+            ])
+          ])
+        ])) : d("", !0)
+      ], 8, nt);
+    };
+  }
+});
+const Ut = /* @__PURE__ */ X(zt, [["__scopeId", "data-v-f5d2b453"]]);
+export {
+  Nt as O,
+  xe as _,
+  K as a,
+  qt as b,
+  Ut as c,
+  he as d,
+  we as e,
+  Dt as f,
+  ot as g,
+  Le as r
+};