@oneb/ui-vue 0.2.23 → 0.2.25

package/dist/OneHelpMenu-1e8e1e45.js

@@ -0,0 +1,782 @@
+import { defineComponent as z, ref as F, provide as X, computed as S, openBlock as t, createElementBlock as o, renderSlot as N, normalizeProps as R, guardReactiveProps as W, createCommentVNode as u, createVNode as _, Transition as Y, withCtx as P, normalizeClass as M, toDisplayString as c, inject as Z, withModifiers as ee, createBlock as L, resolveDynamicComponent as I, createElementVNode as e, Fragment as $, renderList as A, mergeProps as te, unref as k } from "vue";
+import { _ as j } from "./OneAvatar.vue_vue_type_script_setup_true_lang-08ab80dd.js";
+import { r as U } from "./XMarkIcon-51ef0691.js";
+import { r as G, a as J, b as oe } from "./ChevronRightIcon-8df1af46.js";
+import { OneButton as se } from "./button/index.js";
+import { _ as Q } from "./_plugin-vue_export-helper-dad06003.js";
+const ne = {
+  title: {
+    type: String
+  },
+  stick: {
+    type: String,
+    default: "right"
+  }
+}, le = {
+  variant: {
+    type: String,
+    default: "primary"
+  },
+  label: {
+    type: String
+  },
+  icon: {
+    type: [Function, Object]
+  }
+}, Lt = {
+  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"
+  }
+}, re = ["data-opened"], ie = {
+  key: 0,
+  class: "text-sm text-secondary-content px-3 py-2 text-left"
+}, ae = /* @__PURE__ */ z({
+  __name: "OneDropdown",
+  props: ne,
+  emits: ["open", "close"],
+  setup(y, { emit: p }) {
+    const f = F(!1), h = F(null), a = p, i = y, d = () => {
+      f.value = !f.value, f.value ? a("open") : a("close");
+    };
+    X("OneDropdown", {
+      onToggle: d
+    });
+    const l = S(() => {
+      var w;
+      const s = (w = h.value) == null ? void 0 : w.getBoundingClientRect(), m = s ? s.x < 270 : !1;
+      return s && s.top + 270 > window.innerHeight ? "up" + (m ? "-right" : "-left") : "down" + (m ? "-right" : "-left");
+    }), g = S(() => {
+      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 l.value.startsWith("up") ? s.push("bottom-1 mb-10") : l.value.startsWith("down") && s.push("top-1 mt-10"), i.stick === "right" ? s.push("right-0") : i.stick === "left" && s.push("left-0"), s;
+    });
+    return (s, m) => (t(), o("div", {
+      class: "relative inline-block",
+      ref_key: "menuRef",
+      ref: h,
+      "data-opened": f.value
+    }, [
+      N(s.$slots, "button", R(W({ onToggle: d, isExpanded: f.value }))),
+      f.value ? (t(), o("div", {
+        key: 0,
+        class: "fixed top-0 left-0 w-screen h-screen z-10",
+        onClick: d
+      })) : u("", !0),
+      _(Y, {
+        "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: P(() => [
+          f.value ? (t(), o("div", {
+            key: 0,
+            class: M(["menu", g.value]),
+            role: "menu",
+            "aria-orientation": "vertical",
+            tabindex: "-1"
+          }, [
+            s.title ? (t(), o("div", ie, c(s.title), 1)) : u("", !0),
+            N(s.$slots, "menu", R(W({ onToggle: d })))
+          ], 2)) : u("", !0)
+        ]),
+        _: 3
+      })
+    ], 8, re));
+  }
+}), K = /* @__PURE__ */ z({
+  __name: "OneDropdownItem",
+  props: le,
+  emits: ["click"],
+  setup(y, { emit: p }) {
+    const f = p, h = y, a = Z("OneDropdown"), i = () => {
+      a !== void 0 && a.onToggle(), f("click");
+    }, d = S(() => {
+      const l = [];
+      return h.variant === "secondary" ? l.push("text-secondary-content hover:bg-secondary-body-hover") : h.variant === "danger" ? l.push("text-danger-content hover:bg-danger-10") : h.variant === "warning" ? l.push("text-warning-content hover:bg-warning-10") : h.variant === "info" ? l.push("text-info-content hover:bg-info-10") : l.push("hover:bg-secondary-body-hover"), l;
+    });
+    return (l, g) => (t(), o("button", {
+      class: M(["px-3 py-1.5 flex items-center space-x-3 w-full whitespace-nowrap", d.value]),
+      onClick: ee(i, ["prevent"])
+    }, [
+      l.icon ? (t(), L(I(l.icon), {
+        key: 0,
+        class: "w-4 h-4"
+      })) : u("", !0),
+      e("span", null, c(l.label), 1)
+    ], 2));
+  }
+});
+function ce(y, p) {
+  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 de = {
+  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
+  }
+}, ue = {
+  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
+  }
+}, pe = {
+  help: {
+    type: Object,
+    required: !0
+  }
+}, he = ["onClick"], fe = { class: "flex flex-col items-center pt-5 pb-2 h-full" }, me = { class: "flex flex-col px-10 py-1 mt-2 text-center" }, ve = { class: "self-center text-base font-medium tracking-wide text-black" }, xe = { class: "mt-1 text-xs leading-5 text-blue-500 font-light" }, ge = { class: "text-left w-full mt-5 px-3" }, ye = { class: "-mb-2 flex-shrink-0 mt-auto pt-6 text-[8px] leading-3 text-gray-400" }, Bt = /* @__PURE__ */ z({
+  __name: "OneUserMenu",
+  props: de,
+  setup(y) {
+    const p = y, f = S(() => {
+      var i;
+      return (i = p.menu) == null ? void 0 : i.map((d) => {
+        let l = { label: d.label };
+        d.icon != null && (l = { ...l, icon: d.icon });
+        const g = typeof d.click == "function" ? d.click : () => {
+        };
+        return {
+          key: d.label,
+          args: l,
+          click: g
+        };
+      });
+    }), h = () => {
+      typeof p.onAccount == "function" && p.onAccount();
+    }, a = () => {
+      typeof p.onLogout == "function" && p.onLogout();
+    };
+    return (i, d) => (t(), L(ae, { stick: "right" }, {
+      button: P(({ onToggle: l, isExpanded: g }) => {
+        var s, m;
+        return [
+          e("button", {
+            onClick: l,
+            class: M(["p-1 rounded-full hover:bg-secondary-10", [g ? "bg-secondary-25" : ""]])
+          }, [
+            _(j, {
+              text: ((s = i.user) == null ? void 0 : s.name) || "",
+              size: i.iconSize,
+              src: (m = i.user) == null ? void 0 : m.photo_url,
+              rounded: !0
+            }, null, 8, ["text", "size", "src"])
+          ], 10, he)
+        ];
+      }),
+      menu: P(() => {
+        var l, g, s, m, w;
+        return [
+          e("div", fe, [
+            _(j, {
+              text: ((l = i.user) == null ? void 0 : l.name) || "",
+              size: 80,
+              src: (g = i.user) == null ? void 0 : g.photo_url,
+              rounded: !0,
+              class: "mx-auto"
+            }, null, 8, ["text", "src"]),
+            e("div", me, [
+              e("div", ve, c((s = i.user) == null ? void 0 : s.name), 1),
+              e("div", xe, c((m = i.user) == null ? void 0 : m.email), 1)
+            ]),
+            typeof p.onAccount == "function" ? (t(), o("a", {
+              key: 0,
+              onClick: h,
+              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"
+            }, c(i.accountLabel), 1)) : u("", !0),
+            e("div", ge, [
+              (t(!0), o($, null, A(f.value, (C) => (t(), L(K, te({
+                key: C.key
+              }, { ref_for: !0 }, C.args, {
+                onClick: C.click
+              }), null, 16, ["onClick"]))), 128)),
+              typeof i.onLogout == "function" ? (t(), L(K, {
+                key: 0,
+                icon: k(ce),
+                label: i.logoutLabel,
+                class: "rounded py-3",
+                onClick: a
+              }, null, 8, ["icon", "label"])) : u("", !0)
+            ]),
+            d[0] || (d[0] = e("div", {
+              class: "space-y-2 text-center",
+              style: { width: "240px" }
+            }, null, -1)),
+            e("div", ye, c((w = i.app) == null ? void 0 : w.version), 1)
+          ])
+        ];
+      }),
+      _: 1
+    }));
+  }
+});
+function _e(y, p) {
+  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 we = ["data-opened"], be = {
+  key: 1,
+  class: "absolute top-0 right-0 h-screen overflow-y-auto max-w-96 bg-white px-3 z-10"
+}, ke = { class: "flex justify-between items-center pt-3 mb-3" }, Ce = { class: "font-semibold text-xl px-3" }, $e = { class: "grid" }, Ae = { class: "rounded-lg m-3 border" }, Se = {
+  class: "space-x-2 flex items-center px-3 py-2",
+  style: { width: "300px" }
+}, Fe = { class: "flex justify-between relative" }, Le = { class: "flex items-center justify-between w-full text-left text-sm font-semibold" }, Be = { key: 0 }, je = { class: "text-xs font-semibold" }, ze = { class: "px-3 py-2" }, Me = { class: "text-secondary-content text-left pb-1 text-xs uppercase" }, Oe = { class: "overflow-auto max-h-full" }, Ee = {
+  key: 0,
+  class: "space-y-2"
+}, Pe = ["onClick"], Ie = { class: "flex" }, Ve = { class: "border border-secondary-stroke rounded-2xl w-14 h-14 md:w-14 md:h-14 flex items-center justify-center" }, He = { class: "pl-2" }, Te = { class: "text-sm mt-1 font-semibold" }, De = { class: "text9 mt-1" }, qe = {
+  key: 1,
+  class: "mt-2 w-full bg-[#FAFAFA] hover:bg-secondary-10 p-2 rounded-lg mb-5 text-xs hidden"
+}, Ne = /* @__PURE__ */ z({
+  __name: "OneBrowserMenu",
+  props: ue,
+  emits: ["open", "close"],
+  setup(y, { emit: p }) {
+    const f = p, h = y, a = F(!1), i = () => {
+      a.value = !a.value, a.value ? f("open") : f("close");
+    }, d = F(!1);
+    S(() => d.value ? G : J);
+    const l = () => {
+      typeof h.onChange == "function" && h.onChange();
+    }, g = (s) => {
+      typeof h.onApp == "function" && h.onApp(s);
+    };
+    return (s, m) => {
+      var w, C, r, v, b, B;
+      return t(), o("div", { "data-opened": a.value }, [
+        e("button", {
+          onClick: i,
+          class: M(["sm:p-1 sm:w-[44px] sm:h-[44px] w-8 h-8 rounded-md hover:bg-secondary-10 flex", { "bg-secondary-10": a.value }])
+        }, [
+          _(k(_e), { class: "text-secondary-base w-full p-1 hover:text-blue-600 m-auto" })
+        ], 2),
+        a.value ? (t(), o("div", {
+          key: 0,
+          class: "fixed top-0 left-0 w-screen h-screen z-10 bg-black/10",
+          onClick: i
+        })) : u("", !0),
+        a.value ? (t(), o("div", be, [
+          e("div", ke, [
+            e("div", Ce, c((w = s.workspace) == null ? void 0 : w.title), 1),
+            _(k(U), {
+              class: "w-6 cursor-pointer",
+              onClick: i
+            })
+          ]),
+          e("div", $e, [
+            e("div", Ae, [
+              e("div", Se, [
+                e("div", Fe, [
+                  _(j, {
+                    text: ((C = s.workspace) == null ? void 0 : C.name) || "",
+                    src: (r = s.workspace) == null ? void 0 : r.photo_url,
+                    size: 44,
+                    rounded: !1,
+                    class: "mx-auto"
+                  }, null, 8, ["text", "src"])
+                ]),
+                e("div", Le, c((v = s.workspace) == null ? void 0 : v.name), 1)
+              ]),
+              d.value ? (t(), o("div", Be, [
+                (t(!0), o($, null, A(s.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"
+                }, [
+                  _(j, {
+                    text: x.name,
+                    src: x.photo_url,
+                    size: 30,
+                    rounded: !1
+                  }, null, 8, ["text", "src"]),
+                  e("span", je, c(x.name), 1)
+                ]))), 128))
+              ])) : u("", !0),
+              m[0] || (m[0] = e("hr", null, null, -1)),
+              e("div", {
+                onClick: l,
+                class: "text-center py-2 cursor-pointer",
+                style: { "font-size": "10px" }
+              }, c((b = s.workspace) == null ? void 0 : b.changeLabel), 1)
+            ])
+          ]),
+          e("div", ze, [
+            e("div", Me, c((B = s.workspace) == null ? void 0 : B.appsLabel), 1),
+            e("div", Oe, [
+              s.apps && s.apps.length ? (t(), o("div", Ee, [
+                (t(!0), o($, null, A(s.apps, (x) => (t(), o("div", {
+                  key: x.id,
+                  onClick: (O) => g(x),
+                  class: "flex justify-between items-center rounded-lg hover:bg-secondary-10 p-2 bg-[#FAFAFA] cursor-pointer"
+                }, [
+                  e("div", Ie, [
+                    e("div", Ve, [
+                      _(j, {
+                        text: x.name,
+                        src: x.photo_url,
+                        size: 44,
+                        rounded: !1
+                      }, null, 8, ["text", "src"])
+                    ]),
+                    e("div", He, [
+                      e("p", Te, c(x.name), 1),
+                      e("p", De, c(x == null ? void 0 : x.short), 1)
+                    ])
+                  ]),
+                  e("div", null, [
+                    _(se, {
+                      variant: "touch",
+                      icon: k(oe),
+                      onClick: (O) => g(x)
+                    }, null, 8, ["icon", "onClick"])
+                  ])
+                ], 8, Pe))), 128))
+              ])) : u("", !0),
+              s.apps && s.apps.length ? (t(), o("button", qe, c("Дивитися всі"))) : u("", !0)
+            ])
+          ])
+        ])) : u("", !0)
+      ], 8, we);
+    };
+  }
+});
+const jt = /* @__PURE__ */ Q(Ne, [["__scopeId", "data-v-9e75279e"]]);
+function Re(y, p) {
+  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 We(y, p) {
+  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 Ke(y, p) {
+  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 Ue = ["data-opened"], Ge = {
+  key: 1,
+  class: "absolute top-0 right-0 h-screen max-w-96 bg-white px-3 z-10 flex flex-col"
+}, Je = { class: "flex justify-between items-center pt-3 mb-3" }, Qe = { class: "font-semibold text-xl px-3" }, Xe = {
+  key: 0,
+  class: "grid grid-cols-3 bg-[#FAFAFA] rounded-xl text-[#525B66] mb-2"
+}, Ye = ["onClick"], Ze = { class: "uppercase text-[8px]" }, et = { class: "overflow-y-auto grid rounded-xl" }, tt = { class: "max-h-full bg-[#FAFAFA]" }, ot = {
+  key: 0,
+  class: "space-y-2"
+}, st = ["onClick"], nt = { class: "flex" }, lt = { class: "pl-2" }, rt = { class: "text-sm mt-1 font-semibold" }, it = { class: "text-[10px] mt-1 text-[#979CA9]" }, at = { class: "mt-auto" }, ct = { key: 0 }, dt = ["onClick"], ut = { class: "flex items-center space-x-3" }, pt = { class: "h-16" }, ht = {
+  key: 0,
+  class: "bg-[#FAFAFA] rounded-lg p-3"
+}, ft = { class: "flex justify-between" }, mt = ["onClick"], vt = {
+  key: 0,
+  class: "tooltip-text min-w-[70px]"
+}, xt = { class: "flex justify-between mb-4" }, gt = ["href"], yt = { class: "flex flex-nowrap items-center w-max h-[24px]" }, _t = { class: "whitespace-nowrap overflow-hidden text-ellipsis text-left flex-shrink w-full text-[#525B66]" }, wt = { class: "py-[8px] pl-0 pr-[8px]" }, bt = /* @__PURE__ */ z({
+  __name: "OneHelpMenu",
+  props: pe,
+  emits: ["open", "close"],
+  setup(y, { emit: p }) {
+    const f = p, h = y, a = F(!1), i = () => {
+      a.value = !a.value, a.value ? f("open") : f("close");
+    }, d = S(() => w.value ? G : J), l = F(3), g = S(() => {
+      var v, b;
+      const r = ((b = (v = h.help) == null ? void 0 : v.helpList) == null ? void 0 : b.length) || 0;
+      return l.value === r;
+    });
+    S(() => {
+      var v;
+      return (((v = h.help) == null ? void 0 : v.helpList) || []).slice(0, l.value);
+    });
+    const s = () => {
+      var v, b;
+      const r = ((b = (v = h.help) == null ? void 0 : v.helpList) == null ? void 0 : b.length) || 0;
+      l.value = g.value ? 3 : r;
+    }, m = (r, v) => {
+      r && v && typeof v.openLink == "function" ? v.openLink(v) : r && window.open(r, "_blank");
+    }, w = F(!1), C = () => {
+      w.value = !w.value;
+    };
+    return (r, v) => {
+      var b, B, x, O, V, H, T, D, q;
+      return t(), o("div", { "data-opened": a.value }, [
+        e("button", {
+          onClick: i,
+          class: M(["sm:p-1 sm:w-[44px] sm:h-[44px] w-8 h-8 rounded-md hover:bg-secondary-10 flex", { "bg-secondary-10": a.value }])
+        }, [
+          _(k(Re), { class: "text-secondary-base w-full p-1 hover:text-blue-600 m-auto" })
+        ], 2),
+        a.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: i
+        })) : u("", !0),
+        a.value ? (t(), o("div", Ge, [
+          e("div", Je, [
+            e("div", Qe, c((b = r.help) == null ? void 0 : b.label), 1),
+            _(k(U), {
+              class: "w-6 cursor-pointer",
+              onClick: i
+            })
+          ]),
+          (B = r.help) != null && B.helpButton ? (t(), o("div", Xe, [
+            (t(!0), o($, null, A((x = r.help) == null ? void 0 : x.helpButton, (n) => (t(), o("button", {
+              key: n.name,
+              onClick: (E) => m(n.link, n),
+              class: "grid justify-center space-y-2 hover:bg-slate-100 p-3 rounded-xl hover:text-blue-500"
+            }, [
+              e("div", null, [
+                (t(), L(I(n == null ? void 0 : n.icon), { class: "w-[16px] h-[16px] mx-auto" }))
+              ]),
+              e("span", Ze, c(n.name), 1)
+            ], 8, Ye))), 128))
+          ])) : u("", !0),
+          e("div", et, [
+            e("div", tt, [
+              (O = r.help) != null && O.helpList && r.help.helpList.length ? (t(), o("div", ot, [
+                (t(!0), o($, null, A(r.help.helpList, (n) => (t(), o("div", {
+                  key: n.id,
+                  onClick: (E) => m(n.link, n),
+                  class: "flex justify-between items-center rounded-lg hover:bg-slate-100 p-2 cursor-pointer hover:text-[#4089E0]"
+                }, [
+                  e("div", nt, [
+                    e("div", lt, [
+                      e("p", rt, c(n.name), 1),
+                      e("p", it, c(n.category), 1)
+                    ])
+                  ])
+                ], 8, st))), 128))
+              ])) : u("", !0)
+            ])
+          ]),
+          (V = r.help) != null && V.helpList && r.help.helpList.length < 0 ? (t(), o("button", {
+            key: 1,
+            onClick: s,
+            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"
+          }, c(g.value ? r.help.buttNoMore : r.help.buttMore), 1)) : u("", !0),
+          e("div", at, [
+            (H = r.help) != null && H.video ? (t(), o("div", ct, [
+              (t(!0), o($, null, A(r.help.video, (n) => (t(), o("button", {
+                key: n.id,
+                onClick: (E) => m(n.link, n),
+                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"
+              }, [
+                _(k(We), { class: "w-6 h-6" }),
+                e("span", null, c(n.name), 1)
+              ], 8, dt))), 128))
+            ])) : u("", !0),
+            (T = r.help) != null && T.socialList ? (t(), o("button", {
+              key: 1,
+              onClick: C,
+              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", ut, [
+                _(k(Ke), { class: "w-6 h-6" }),
+                e("span", null, c(r.help.socialButt), 1)
+              ]),
+              _(k(d), { class: "w-4 h-4" })
+            ])) : u("", !0),
+            e("div", pt, [
+              w.value ? (t(), o("div", ht, [
+                e("div", ft, [
+                  (t(!0), o($, null, A((D = r.help) == null ? void 0 : D.socialList, (n) => (t(), o("button", {
+                    key: n.id,
+                    onClick: (E) => m(n.link, n),
+                    class: "flex items-center space-x-2 p-2 rounded-lg hover:bg-slate-100 hover:text-blue-500 tooltip"
+                  }, [
+                    e("div", null, [
+                      n.name ? (t(), o("div", vt, c(n.name), 1)) : u("", !0),
+                      (t(), L(I(n == null ? void 0 : n.icon), { class: "w-[24px] h-[24px] mx-auto" }))
+                    ])
+                  ], 8, mt))), 128))
+                ])
+              ])) : u("", !0)
+            ]),
+            e("div", xt, [
+              (t(!0), o($, null, A((q = r.help) == null ? void 0 : q.termsOffer, (n) => (t(), o("a", {
+                key: n.name,
+                target: "_blank",
+                href: n.link,
+                class: "ml-2 flex items-center rounded-lg text-xs hover:underline font-extralight cursor-pointer"
+              }, [
+                e("div", yt, [
+                  e("div", _t, [
+                    e("span", wt, c(n.name), 1)
+                  ])
+                ])
+              ], 8, gt))), 128))
+            ])
+          ])
+        ])) : u("", !0)
+      ], 8, Ue);
+    };
+  }
+});
+const zt = /* @__PURE__ */ Q(bt, [["__scopeId", "data-v-f5d2b453"]]);
+export {
+  jt as O,
+  ae as _,
+  K as a,
+  Bt as b,
+  zt as c,
+  ne as d,
+  ue as e,
+  Lt as f,
+  Ke as g,
+  _e as r
+};