@oneb/ui-vue 0.3.30 → 0.3.32

package/dist/OneHelpMenu-73817f8a.js

@@ -0,0 +1,922 @@
+import { defineComponent as O, ref as B, provide as G, watch as J, nextTick as Q, onBeforeUnmount as X, computed as C, openBlock as t, createElementBlock as o, createElementVNode as e, renderSlot as E, normalizeProps as H, guardReactiveProps as P, createBlock as S, Teleport as Y, createCommentVNode as h, createVNode as _, Transition as R, withCtx as T, normalizeClass as z, toDisplayString as d, Fragment as $, inject as Z, withModifiers as ee, resolveDynamicComponent as V, renderList as F, mergeProps as te, unref as A } from "vue";
+import { autoUpdate as oe, computePosition as ne, offset as se, shift as le } from "@floating-ui/dom";
+import { flip as re } from "@floating-ui/vue";
+import { _ as L } from "./OneAvatar.vue_vue_type_script_setup_true_lang-08ab80dd.js";
+import { useOnebI18n as I } from "./i18n/index.js";
+import { r as q } from "./XMarkIcon-51ef0691.js";
+import { r as U } from "./ChevronDownIcon-6805ce6c.js";
+import { r as W, a as ie } from "./ChevronRightIcon-4549a26b.js";
+import { OneButton as ae } from "./button/index.js";
+import { _ as K } from "./_plugin-vue_export-helper-dad06003.js";
+const ce = {
+  title: {
+    type: String
+  },
+  stick: {
+    type: String,
+    default: "right"
+  },
+  appendBody: {
+    type: Boolean,
+    default: !1
+  },
+  trigger: {
+    type: String,
+    default: "click"
+  },
+  offset: {
+    type: Number,
+    default: 5
+  }
+}, ue = {
+  variant: {
+    type: String,
+    default: "primary"
+  },
+  label: {
+    type: String
+  },
+  icon: {
+    type: [Function, Object]
+  }
+}, It = {
+  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"
+  }
+}, de = ["data-opened"], pe = {
+  key: 0,
+  class: "text-sm text-secondary-content px-3 py-2 text-left"
+}, he = {
+  key: 0,
+  class: "text-sm text-secondary-content px-3 py-2 text-left"
+}, fe = /* @__PURE__ */ O({
+  __name: "OneDropdown",
+  props: ce,
+  emits: ["open", "close"],
+  setup(y, { emit: f }) {
+    const c = B(!1), v = B(null), w = B(null), a = B(null), i = f, n = y, u = () => {
+      c.value = !c.value, c.value ? i("open") : i("close");
+    };
+    let m = null;
+    const g = () => {
+      n.trigger === "hover" && (m && (clearTimeout(m), m = null), c.value || (c.value = !0, i("open")));
+    }, p = () => {
+      n.trigger === "hover" && (m = setTimeout(() => {
+        c.value && (c.value = !1, i("close"));
+      }, 100));
+    };
+    G("OneDropdown", {
+      onToggle: u
+    });
+    let x = null;
+    function b() {
+      !w.value || !a.value || ne(w.value, a.value, {
+        placement: n.stick ? n.stick : "bottom-start",
+        strategy: "fixed",
+        middleware: [se(n.offset), re(), le({ padding: 8 })]
+      }).then(({ x: s, y: r }) => {
+        a.value && Object.assign(a.value.style, {
+          left: `${s}px`,
+          top: `${r}px`,
+          visibility: "visible"
+        });
+      });
+    }
+    J(c, async (s) => {
+      n.appendBody && (s ? (await Q(), w.value && a.value && (a.value.style.visibility = "hidden", b(), x = oe(w.value, a.value, b))) : x && (x(), x = null));
+    }), X(() => {
+      x && x();
+    });
+    const k = C(() => {
+      var j;
+      if (n.appendBody)
+        return "";
+      const s = (j = v.value) == null ? void 0 : j.getBoundingClientRect(), r = s ? s.x < 270 : !1;
+      return s && s.top + 270 > window.innerHeight ? "up" + (r ? "-right" : "-left") : "down" + (r ? "-right" : "-left");
+    }), M = C(() => {
+      const s = [
+        "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") ? s.push("bottom-1 mb-10") : k.value.startsWith("down") && s.push("top-1 mt-10"), n.stick === "right" ? s.push("right-0") : n.stick === "left" && s.push("left-0"), s;
+    }), l = C(() => [
+      "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 (s, r) => (t(), o("div", {
+      class: "relative inline-block",
+      ref_key: "containerRef",
+      ref: v,
+      "data-opened": c.value,
+      onMouseenter: g,
+      onMouseleave: p
+    }, [
+      e("div", {
+        ref_key: "buttonRef",
+        ref: w
+      }, [
+        E(s.$slots, "button", H(P({ onToggle: u, isExpanded: c.value })))
+      ], 512),
+      n.appendBody ? (t(), S(Y, {
+        key: 0,
+        to: "body"
+      }, [
+        c.value && s.trigger === "click" ? (t(), o("div", {
+          key: 0,
+          class: "fixed top-0 left-0 w-screen h-screen z-[9999]",
+          onClick: u
+        })) : h("", !0),
+        _(R, {
+          "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: T(() => [
+            c.value ? (t(), o("div", {
+              key: 0,
+              ref_key: "menuRef",
+              ref: a,
+              class: z(["menu", l.value]),
+              role: "menu",
+              "aria-orientation": "vertical",
+              tabindex: "-1",
+              onMouseenter: g,
+              onMouseleave: p
+            }, [
+              s.title ? (t(), o("div", pe, d(s.title), 1)) : h("", !0),
+              E(s.$slots, "menu", H(P({ onToggle: u })))
+            ], 34)) : h("", !0)
+          ]),
+          _: 3
+        })
+      ])) : (t(), o($, { key: 1 }, [
+        c.value && s.trigger === "click" ? (t(), o("div", {
+          key: 0,
+          class: "fixed top-0 left-0 w-screen h-screen z-10",
+          onClick: u
+        })) : h("", !0),
+        _(R, {
+          "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: T(() => [
+            c.value ? (t(), o("div", {
+              key: 0,
+              class: z(["menu", M.value]),
+              role: "menu",
+              "aria-orientation": "vertical",
+              tabindex: "-1"
+            }, [
+              s.title ? (t(), o("div", he, d(s.title), 1)) : h("", !0),
+              E(s.$slots, "menu", H(P({ onToggle: u })))
+            ], 2)) : h("", !0)
+          ]),
+          _: 3
+        })
+      ], 64))
+    ], 40, de));
+  }
+}), N = /* @__PURE__ */ O({
+  __name: "OneDropdownItem",
+  props: ue,
+  emits: ["click"],
+  setup(y, { emit: f }) {
+    const c = f, v = y, w = Z("OneDropdown"), a = () => {
+      w !== void 0 && w.onToggle(), c("click");
+    }, i = C(() => {
+      const n = [];
+      return v.variant === "secondary" ? n.push("text-secondary-content hover:bg-secondary-body-hover") : v.variant === "danger" ? n.push("text-danger-content hover:bg-danger-10") : v.variant === "warning" ? n.push("text-warning-content hover:bg-warning-10") : v.variant === "info" ? n.push("text-info-content hover:bg-info-10") : n.push("hover:bg-secondary-body-hover"), n;
+    });
+    return (n, u) => (t(), o("button", {
+      class: z(["px-3 py-1.5 flex items-center space-x-3 w-full whitespace-nowrap", i.value]),
+      onClick: ee(a, ["prevent"])
+    }, [
+      n.icon ? (t(), S(V(n.icon), {
+        key: 0,
+        class: "w-4 h-4"
+      })) : h("", !0),
+      e("span", null, d(n.label), 1)
+    ], 2));
+  }
+});
+function ve(y, 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 me = {
+  user: {
+    type: Object,
+    required: !0
+  },
+  menu: {
+    type: Array,
+    default: () => []
+  },
+  iconSize: {
+    type: String,
+    default: "34"
+  },
+  app: {
+    type: Object
+  },
+  onAccount: {
+    type: Function
+  },
+  onLogout: {
+    type: Function
+  },
+  t: {
+    type: Function
+  }
+}, xe = {
+  workspace: {
+    type: Object,
+    required: !0
+  },
+  workspaces: {
+    type: Array
+  },
+  apps: {
+    type: Array,
+    required: !0
+  },
+  iconSize: {
+    type: String,
+    default: "24"
+  },
+  onChange: {
+    type: Function
+  },
+  onApp: {
+    type: Function
+  },
+  t: {
+    type: Function
+  }
+}, ye = {
+  help: {
+    type: Object
+  },
+  // Project slug for the default "Reference" link → oneb.app/help/{slug}
+  helpSlug: {
+    type: String
+  },
+  t: {
+    type: Function
+  }
+}, ge = ["onClick"], _e = { class: "flex flex-col items-center pt-5 pb-2 h-full" }, we = { class: "flex flex-col px-10 py-1 mt-2 text-center" }, ke = { class: "self-center text-base font-medium tracking-wide text-black" }, be = { class: "mt-1 text-xs leading-5 text-blue-500 font-light" }, Ce = { class: "text-left w-full mt-5 px-3" }, $e = { class: "-mb-2 flex-shrink-0 mt-auto pt-6 text-[8px] leading-3 text-gray-400" }, Rt = /* @__PURE__ */ O({
+  __name: "OneUserMenu",
+  props: me,
+  setup(y) {
+    const f = y, c = I(), v = C(() => f.t ?? c), w = C(() => {
+      var n;
+      return (n = f.menu) == null ? void 0 : n.map((u) => {
+        let m = { label: u.label };
+        u.icon != null && (m = { ...m, icon: u.icon });
+        const g = typeof u.click == "function" ? u.click : () => {
+        };
+        return {
+          key: u.label,
+          args: m,
+          click: g
+        };
+      });
+    }), a = () => {
+      typeof f.onAccount == "function" && f.onAccount();
+    }, i = () => {
+      typeof f.onLogout == "function" && f.onLogout();
+    };
+    return (n, u) => (t(), S(fe, { stick: "right" }, {
+      button: T(({ onToggle: m, isExpanded: g }) => {
+        var p, x;
+        return [
+          e("button", {
+            onClick: m,
+            class: z(["p-1 rounded-full hover:bg-secondary-10", [g ? "bg-secondary-25" : ""]])
+          }, [
+            _(L, {
+              text: ((p = n.user) == null ? void 0 : p.name) || "",
+              size: n.iconSize,
+              src: (x = n.user) == null ? void 0 : x.photo_url,
+              rounded: !0
+            }, null, 8, ["text", "size", "src"])
+          ], 10, ge)
+        ];
+      }),
+      menu: T(() => {
+        var m, g, p, x, b;
+        return [
+          e("div", _e, [
+            _(L, {
+              text: ((m = n.user) == null ? void 0 : m.name) || "",
+              size: 80,
+              src: (g = n.user) == null ? void 0 : g.photo_url,
+              rounded: !0,
+              class: "mx-auto"
+            }, null, 8, ["text", "src"]),
+            e("div", we, [
+              e("div", ke, d((p = n.user) == null ? void 0 : p.name), 1),
+              e("div", be, d((x = n.user) == null ? void 0 : x.email), 1)
+            ]),
+            typeof f.onAccount == "function" ? (t(), o("a", {
+              key: 0,
+              onClick: a,
+              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"
+            }, d(v.value("ui.layout.account")), 1)) : h("", !0),
+            e("div", Ce, [
+              (t(!0), o($, null, F(w.value, (k) => (t(), S(N, te({
+                key: k.key
+              }, { ref_for: !0 }, k.args, {
+                onClick: k.click
+              }), null, 16, ["onClick"]))), 128)),
+              typeof n.onLogout == "function" ? (t(), S(N, {
+                key: 0,
+                icon: A(ve),
+                label: v.value("ui.layout.logout"),
+                class: "rounded py-3",
+                onClick: i
+              }, null, 8, ["icon", "label"])) : h("", !0)
+            ]),
+            u[0] || (u[0] = e("div", {
+              class: "space-y-2 text-center",
+              style: { width: "240px" }
+            }, null, -1)),
+            e("div", $e, d((b = n.app) == null ? void 0 : b.version), 1)
+          ])
+        ];
+      }),
+      _: 1
+    }));
+  }
+});
+function Ae(y, 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 Be = ["data-opened"], Fe = {
+  key: 1,
+  class: "absolute top-0 right-0 h-screen overflow-y-auto max-w-96 bg-white px-3 z-10"
+}, Se = { class: "flex justify-between items-center pt-3 mb-3" }, Me = { class: "font-semibold text-xl px-3" }, je = { class: "grid" }, ze = { class: "rounded-lg m-3 border" }, Le = {
+  class: "space-x-2 flex items-center px-3 py-2",
+  style: { width: "300px" }
+}, Oe = { class: "flex justify-between relative" }, Te = { class: "flex items-center justify-between w-full text-left text-sm font-semibold" }, Ee = { key: 0 }, He = { class: "text-xs font-semibold" }, Pe = { class: "px-3 py-2" }, Ve = { class: "text-secondary-content text-left pb-1 text-xs uppercase" }, Ie = { class: "overflow-auto max-h-full" }, Re = {
+  key: 0,
+  class: "space-y-2"
+}, Ne = ["onClick"], De = { class: "flex" }, qe = { class: "border border-secondary-stroke rounded-2xl w-14 h-14 md:w-14 md:h-14 flex items-center justify-center" }, Ue = { class: "pl-2" }, We = { class: "text-sm mt-1 font-semibold" }, Ke = { class: "text9 mt-1" }, Ge = {
+  key: 1,
+  class: "mt-2 w-full bg-[#FAFAFA] hover:bg-secondary-10 p-2 rounded-lg mb-5 text-xs hidden"
+}, Je = /* @__PURE__ */ O({
+  __name: "OneBrowserMenu",
+  props: xe,
+  emits: ["open", "close"],
+  setup(y, { emit: f }) {
+    const c = f, v = y, w = I(), a = C(() => v.t ?? w), i = B(!1), n = () => {
+      i.value = !i.value, i.value ? c("open") : c("close");
+    }, u = B(!1);
+    C(() => u.value ? W : U);
+    const m = () => {
+      typeof v.onChange == "function" && v.onChange();
+    }, g = (p) => {
+      typeof v.onApp == "function" && v.onApp(p);
+    };
+    return (p, x) => {
+      var b, k, M;
+      return t(), o("div", { "data-opened": i.value }, [
+        e("button", {
+          onClick: n,
+          class: z(["sm:p-1 sm:w-[44px] sm:h-[44px] w-8 h-8 rounded-md hover:bg-secondary-10 flex", { "bg-secondary-10": i.value }])
+        }, [
+          _(A(Ae), { class: "text-secondary-base w-full p-1 hover:text-blue-600 m-auto" })
+        ], 2),
+        i.value ? (t(), o("div", {
+          key: 0,
+          class: "fixed top-0 left-0 w-screen h-screen z-10 bg-black/10",
+          onClick: n
+        })) : h("", !0),
+        i.value ? (t(), o("div", Fe, [
+          e("div", Se, [
+            e("div", Me, d(a.value("ui.layout.workspaces")), 1),
+            _(A(q), {
+              class: "w-6 cursor-pointer",
+              onClick: n
+            })
+          ]),
+          e("div", je, [
+            e("div", ze, [
+              e("div", Le, [
+                e("div", Oe, [
+                  _(L, {
+                    text: ((b = p.workspace) == null ? void 0 : b.name) || "",
+                    src: (k = p.workspace) == null ? void 0 : k.photo_url,
+                    size: 44,
+                    rounded: !1,
+                    class: "mx-auto"
+                  }, null, 8, ["text", "src"])
+                ]),
+                e("div", Te, d((M = p.workspace) == null ? void 0 : M.name), 1)
+              ]),
+              u.value ? (t(), o("div", Ee, [
+                (t(!0), o($, null, F(p.workspaces, (l) => (t(), o("div", {
+                  key: l.name,
+                  class: "flex items-center space-x-3 border-t px-5 py-2 hover:bg-secondary-10"
+                }, [
+                  _(L, {
+                    text: l.name,
+                    src: l.photo_url,
+                    size: 30,
+                    rounded: !1
+                  }, null, 8, ["text", "src"]),
+                  e("span", He, d(l.name), 1)
+                ]))), 128))
+              ])) : h("", !0),
+              x[0] || (x[0] = e("hr", null, null, -1)),
+              e("div", {
+                onClick: m,
+                class: "text-center py-2 cursor-pointer",
+                style: { "font-size": "10px" }
+              }, d(a.value("ui.layout.change_workspace")), 1)
+            ])
+          ]),
+          e("div", Pe, [
+            e("div", Ve, d(a.value("ui.layout.apps")), 1),
+            e("div", Ie, [
+              p.apps && p.apps.length ? (t(), o("div", Re, [
+                (t(!0), o($, null, F(p.apps, (l) => (t(), o("div", {
+                  key: l.id,
+                  onClick: (s) => g(l),
+                  class: "flex justify-between items-center rounded-lg hover:bg-secondary-10 p-2 bg-[#FAFAFA] cursor-pointer"
+                }, [
+                  e("div", De, [
+                    e("div", qe, [
+                      _(L, {
+                        text: l.name,
+                        src: l.photo_url,
+                        size: 44,
+                        rounded: !1
+                      }, null, 8, ["text", "src"])
+                    ]),
+                    e("div", Ue, [
+                      e("p", We, d(l.name), 1),
+                      e("p", Ke, d(l == null ? void 0 : l.short), 1)
+                    ])
+                  ]),
+                  e("div", null, [
+                    _(ae, {
+                      variant: "touch",
+                      icon: A(ie),
+                      onClick: (s) => g(l)
+                    }, null, 8, ["icon", "onClick"])
+                  ])
+                ], 8, Ne))), 128))
+              ])) : h("", !0),
+              p.apps && p.apps.length ? (t(), o("button", Ge, d(a.value("ui.layout.view_all")), 1)) : h("", !0)
+            ])
+          ])
+        ])) : h("", !0)
+      ], 8, Be);
+    };
+  }
+});
+const Nt = /* @__PURE__ */ K(Je, [["__scopeId", "data-v-3675784e"]]);
+function D(y, 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 Qe(y, 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 Xe(y, 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"
+    })
+  ]);
+}
+function Ye(y, 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: "M8.625 9.75a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375m-13.5 3.01c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.184-4.183a1.14 1.14 0 01.778-.332 48.294 48.294 0 005.83-.498c1.585-.233 2.708-1.626 2.708-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z"
+    })
+  ]);
+}
+function Ze(y, 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: "M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5"
+    })
+  ]);
+}
+const et = ["data-opened"], tt = {
+  key: 1,
+  class: "absolute top-0 right-0 h-screen max-w-96 bg-white px-3 z-10 flex flex-col"
+}, ot = { class: "flex justify-between items-center pt-3 mb-3" }, nt = { class: "font-semibold text-xl px-3" }, st = {
+  key: 0,
+  class: "grid grid-cols-3 bg-[#FAFAFA] rounded-xl text-[#525B66] mb-2"
+}, lt = ["onClick"], rt = { class: "uppercase text-[8px]" }, it = { class: "overflow-y-auto grid rounded-xl" }, at = { class: "max-h-full bg-[#FAFAFA]" }, ct = {
+  key: 0,
+  class: "space-y-2"
+}, ut = ["onClick"], dt = { class: "flex" }, pt = { class: "pl-2" }, ht = { class: "text-sm mt-1 font-semibold" }, ft = { class: "text-[10px] mt-1 text-[#979CA9]" }, vt = { class: "mt-auto" }, mt = { key: 0 }, xt = ["onClick"], yt = { class: "flex items-center space-x-3" }, gt = { class: "h-16" }, _t = {
+  key: 0,
+  class: "bg-[#FAFAFA] rounded-lg p-3"
+}, wt = { class: "flex justify-between" }, kt = ["onClick"], bt = {
+  key: 0,
+  class: "tooltip-text min-w-[70px]"
+}, Ct = { class: "flex justify-between mb-4" }, $t = ["href"], At = { class: "flex flex-nowrap items-center w-max h-[24px]" }, Bt = { class: "whitespace-nowrap overflow-hidden text-ellipsis text-left flex-shrink w-full text-[#525B66]" }, Ft = { class: "py-[8px] pl-0 pr-[8px]" }, St = /* @__PURE__ */ O({
+  __name: "OneHelpMenu",
+  props: ye,
+  emits: ["open", "close"],
+  setup(y, { emit: f }) {
+    const c = f, v = y, w = I(), a = C(() => v.t ?? w), i = C(() => {
+      const l = v.help ?? {};
+      return {
+        label: l.label ?? a.value("ui.help.title"),
+        social: l.social ?? a.value("ui.help.social"),
+        socialButt: l.socialButt ?? a.value("ui.help.social"),
+        buttMore: l.buttMore ?? a.value("ui.help.more"),
+        buttNoMore: l.buttNoMore ?? a.value("ui.help.hide"),
+        helpButton: l.helpButton ?? [
+          { name: a.value("ui.help.support"), link: "https://t.me/onebapp_bot", icon: Ye },
+          {
+            name: a.value("ui.help.reference"),
+            link: v.helpSlug ? `https://oneb.app/help/${v.helpSlug}` : "https://oneb.app/help",
+            icon: D
+          },
+          { name: a.value("ui.help.leave_request"), link: "https://oneb.app/support", icon: Ze }
+        ],
+        helpList: l.helpList ?? [],
+        video: l.video ?? [],
+        socialList: l.socialList ?? [],
+        termsOffer: l.termsOffer ?? [
+          { name: a.value("ui.help.terms"), link: "https://oneb.app/terms-of-service" },
+          { name: a.value("ui.help.offer"), link: "https://oneb.app/offer" }
+        ]
+      };
+    }), n = B(!1), u = () => {
+      n.value = !n.value, n.value ? c("open") : c("close");
+    }, m = C(() => k.value ? W : U), g = B(3), p = C(() => {
+      var s;
+      const l = ((s = i.value.helpList) == null ? void 0 : s.length) || 0;
+      return g.value === l;
+    });
+    C(() => (i.value.helpList || []).slice(0, g.value));
+    const x = () => {
+      var s;
+      const l = ((s = i.value.helpList) == null ? void 0 : s.length) || 0;
+      g.value = p.value ? 3 : l;
+    }, b = (l, s) => {
+      l && s && typeof s.openLink == "function" ? s.openLink(s) : l && window.open(l, "_blank");
+    }, k = B(!1), M = () => {
+      k.value = !k.value;
+    };
+    return (l, s) => (t(), o("div", { "data-opened": n.value }, [
+      e("button", {
+        onClick: u,
+        class: z(["sm:p-1 sm:w-[44px] sm:h-[44px] w-8 h-8 rounded-md hover:bg-secondary-10 flex", { "bg-secondary-10": n.value }])
+      }, [
+        _(A(D), { class: "text-secondary-base w-full p-1 hover:text-blue-600 m-auto" })
+      ], 2),
+      n.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: u
+      })) : h("", !0),
+      n.value ? (t(), o("div", tt, [
+        e("div", ot, [
+          e("div", nt, d(i.value.label), 1),
+          _(A(q), {
+            class: "w-6 cursor-pointer",
+            onClick: u
+          })
+        ]),
+        i.value.helpButton ? (t(), o("div", st, [
+          (t(!0), o($, null, F(i.value.helpButton, (r) => (t(), o("button", {
+            key: r.name,
+            onClick: (j) => b(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(), S(V(r == null ? void 0 : r.icon), { class: "w-[16px] h-[16px] mx-auto" }))
+            ]),
+            e("span", rt, d(r.name), 1)
+          ], 8, lt))), 128))
+        ])) : h("", !0),
+        e("div", it, [
+          e("div", at, [
+            i.value.helpList && i.value.helpList.length ? (t(), o("div", ct, [
+              (t(!0), o($, null, F(i.value.helpList, (r) => (t(), o("div", {
+                key: r.id,
+                onClick: (j) => b(r.link, r),
+                class: "flex justify-between items-center rounded-lg hover:bg-slate-100 p-2 cursor-pointer hover:text-[#4089E0]"
+              }, [
+                e("div", dt, [
+                  e("div", pt, [
+                    e("p", ht, d(r.name), 1),
+                    e("p", ft, d(r.category), 1)
+                  ])
+                ])
+              ], 8, ut))), 128))
+            ])) : h("", !0)
+          ])
+        ]),
+        i.value.helpList && i.value.helpList.length < 0 ? (t(), o("button", {
+          key: 1,
+          onClick: x,
+          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"
+        }, d(p.value ? i.value.buttNoMore : i.value.buttMore), 1)) : h("", !0),
+        e("div", vt, [
+          i.value.video ? (t(), o("div", mt, [
+            (t(!0), o($, null, F(i.value.video, (r) => (t(), o("button", {
+              key: r.id,
+              onClick: (j) => b(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"
+            }, [
+              _(A(Qe), { class: "w-6 h-6" }),
+              e("span", null, d(r.name), 1)
+            ], 8, xt))), 128))
+          ])) : h("", !0),
+          i.value.socialList ? (t(), o("button", {
+            key: 1,
+            onClick: M,
+            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", yt, [
+              _(A(Xe), { class: "w-6 h-6" }),
+              e("span", null, d(i.value.socialButt), 1)
+            ]),
+            _(A(m), { class: "w-4 h-4" })
+          ])) : h("", !0),
+          e("div", gt, [
+            k.value ? (t(), o("div", _t, [
+              e("div", wt, [
+                (t(!0), o($, null, F(i.value.socialList, (r) => (t(), o("button", {
+                  key: r.id,
+                  onClick: (j) => b(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", bt, d(r.name), 1)) : h("", !0),
+                    (t(), S(V(r == null ? void 0 : r.icon), { class: "w-[24px] h-[24px] mx-auto" }))
+                  ])
+                ], 8, kt))), 128))
+              ])
+            ])) : h("", !0)
+          ]),
+          e("div", Ct, [
+            (t(!0), o($, null, F(i.value.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", At, [
+                e("div", Bt, [
+                  e("span", Ft, d(r.name), 1)
+                ])
+              ])
+            ], 8, $t))), 128))
+          ])
+        ])
+      ])) : h("", !0)
+    ], 8, et));
+  }
+});
+const Dt = /* @__PURE__ */ K(St, [["__scopeId", "data-v-56eccaba"]]);
+export {
+  Nt as O,
+  fe as _,
+  N as a,
+  Rt as b,
+  Dt as c,
+  ce as d,
+  xe as e,
+  It as f,
+  Xe as g,
+  Ye as h,
+  Ae as r
+};