@oneb/ui-vue 0.3.13 → 0.3.15

package/dist/dropdown/index.js

@@ -1,21 +1,796 @@
-import { O, _ as d, b as w, e as D, d as u } from "../OneHelpMenu-8e315cb3.js";
-import { b, _ as c, a as f, c as l } from "../index-19e93dfb.js";
-import "vue";
-import "../OneAvatar.vue_vue_type_script_setup_true_lang-08ab80dd.js";
+import { d as he, e as ye, _ as we, r as ge, f as ke } from "../OneHelpMenu-d7a39a69.js";
+import { O as so, a as lo, c as no, b as ro } from "../OneHelpMenu-d7a39a69.js";
+import { defineComponent as X, ref as C, watch as ce, onBeforeUnmount as be, provide as xe, computed as I, openBlock as o, createElementBlock as l, createElementVNode as t, renderSlot as V, normalizeProps as F, guardReactiveProps as P, createBlock as U, Teleport as Ce, createCommentVNode as m, withDirectives as q, normalizeClass as w, toDisplayString as u, vShow as _e, withCtx as z, createVNode as H, unref as y, normalizeStyle as J, Fragment as M, renderList as L, onMounted as $e, onUnmounted as Me, vModelText as le, mergeProps as R, createTextVNode as ne, nextTick as T } from "vue";
+import { c as re, o as ae, s as ie, a as Ve } from "../floating-ui.dom-4509432e.js";
+import { flip as ue } from "@floating-ui/vue";
+import { _ as Ke } from "../_plugin-vue_export-helper-dad06003.js";
+import { _ as de } from "../OneAvatar.vue_vue_type_script_setup_true_lang-08ab80dd.js";
+import { useOnebI18n as Ae } from "../i18n/index.js";
+import { u as Oe, O as je } from "../useModal-85f57682.js";
 import "../XMarkIcon-51ef0691.js";
-import "../ChevronRightIcon-8df1af46.js";
+import "../ChevronDownIcon-6805ce6c.js";
+import "../ChevronRightIcon-4549a26b.js";
 import "../button/index.js";
-import "../SpinnerIcon-516264ba.js";
-import "../_plugin-vue_export-helper-dad06003.js";
-import "../useI18n-2103b39e.js";
+import "../SpinnerIcon-74648c98.js";
+import "../SpinnerIcon.vue_vue_type_style_index_0_lang-4ed993c7.js";
+const Ie = ["data-opened"], Be = {
+  key: 0,
+  class: "text-sm text-secondary-content px-3 py-2 text-left"
+}, Le = /* @__PURE__ */ X({
+  __name: "OneDropdownAuto",
+  props: he,
+  emits: ["open", "close"],
+  setup(S, { emit: g }) {
+    const n = S, c = C(!1), f = C(null), x = C(null);
+    let h = null;
+    ce(c, (p) => {
+      p && x.value && f.value ? (re(x.value, f.value, {
+        placement: n.stick ? n.stick : "bottom-start",
+        strategy: "fixed",
+        middleware: [ae(5), ue(), ie({ padding: 8 })]
+      }).then(({ x: i, y: A }) => {
+        Object.assign(f.value.style, {
+          left: `${i}px`,
+          top: `${A}px`
+        });
+      }), h = Ve(x.value, f.value, () => {
+        re(x.value, f.value, {
+          placement: n.stick ? n.stick : "bottom-start",
+          strategy: "fixed",
+          middleware: [ae(4), ue(), ie({ padding: 8 })]
+        }).then(({ x: i, y: A }) => {
+          Object.assign(f.value.style, {
+            left: `${i}px`,
+            top: `${A}px`
+          });
+        });
+      })) : h && (h(), h = null);
+    }), be(() => {
+      h && h();
+    });
+    const d = g, _ = () => {
+      c.value = !c.value, c.value ? d("open") : d("close");
+    };
+    xe("OneDropdown", {
+      onToggle: _
+    });
+    const K = I(() => [
+      "fixed z-[10000] w-fit rounded-md bg-white",
+      "py-1 shadow-lg ring-black ring-opacity-5 focus:outline-none",
+      "overflow-auto max-h-[540px] min-w-[150px] max-w-[540px]"
+    ]);
+    return (p, i) => (o(), l("div", {
+      class: "relative inline-block",
+      "data-opened": c.value
+    }, [
+      t("div", {
+        ref_key: "buttonRef",
+        ref: x
+      }, [
+        V(p.$slots, "button", F(P({ onToggle: _, isExpanded: c.value })))
+      ], 512),
+      (o(), U(Ce, { to: "body" }, [
+        c.value ? (o(), l("div", {
+          key: 0,
+          class: "fixed top-0 left-0 w-screen h-screen z-[9999]",
+          onClick: _
+        })) : m("", !0),
+        q(t("div", {
+          ref_key: "menuRef",
+          ref: f,
+          class: w(["menu", K.value]),
+          role: "menu",
+          "aria-orientation": "vertical",
+          tabindex: "-1",
+          style: { display: "none" }
+        }, [
+          p.title ? (o(), l("div", Be, u(p.title), 1)) : m("", !0),
+          V(p.$slots, "menu", F(P({ onToggle: _ })))
+        ], 2), [
+          [_e, c.value]
+        ])
+      ]))
+    ], 8, Ie));
+  }
+}), Se = {}, De = { class: "border-t border-secondary-stroke my-1" };
+function ze(S, g) {
+  return o(), l("div", De);
+}
+const Zt = /* @__PURE__ */ Ke(Se, [["render", ze]]), Ee = ["onClick"], Re = { class: "grid" }, Fe = { class: "font-semibold px-3" }, Pe = { class: "rounded-lg m-3 border" }, Ue = {
+  class: "space-x-2 flex items-center px-3 py-2",
+  style: { width: "300px" }
+}, We = { class: "flex-shrink-0" }, Ne = { class: "w-full text-left" }, Ge = { class: "flex-shrink-0" }, He = { class: "px-3 py-2" }, Te = { class: "text-secondary-content text-left pb-1 text-sm uppercase" }, qe = {
+  key: 0,
+  class: "space-y-2"
+}, Je = ["onClick"], Xe = { class: "pl-2" }, Ye = { class: "text-sm mt-1" }, Ze = { class: "text-xs mt-1" }, pe = 3, Qt = /* @__PURE__ */ X({
+  __name: "OneBrowserMenuGrid",
+  props: ye,
+  setup(S) {
+    const g = S, n = () => {
+      typeof g.onChange == "function" && g.onChange();
+    }, c = C(!1), f = I(() => g.apps ? c.value ? g.apps : g.apps.slice(0, pe) : []), x = () => {
+      c.value = !c.value;
+    }, h = (d) => {
+      typeof g.onApp == "function" && g.onApp(d);
+    };
+    return (d, _) => (o(), U(we, { stick: "right" }, {
+      button: z(({ onToggle: K, isExpanded: p }) => [
+        t("button", {
+          onClick: K,
+          class: w(["p-1 rounded-md hover:bg-secondary-10", [p ? "bg-secondary-25" : ""]])
+        }, [
+          H(y(ge), {
+            class: "text-secondary-base",
+            style: J(`width: ${d.iconSize}px; height: ${d.iconSize}px`)
+          }, null, 8, ["style"])
+        ], 10, Ee)
+      ]),
+      menu: z(() => {
+        var K, p, i, A;
+        return [
+          t("div", Re, [
+            t("div", Fe, u((K = d.workspace) == null ? void 0 : K.title), 1),
+            t("div", Pe, [
+              t("div", Ue, [
+                t("div", We, [
+                  H(de, {
+                    text: ((p = d.workspace) == null ? void 0 : p.name) || "",
+                    src: (i = d.workspace) == null ? void 0 : i.photo_url,
+                    size: 44,
+                    rounded: !1,
+                    class: "mx-auto"
+                  }, null, 8, ["text", "src"])
+                ]),
+                t("div", Ne, u((A = d.workspace) == null ? void 0 : A.name), 1),
+                t("div", Ge, [
+                  t("button", {
+                    class: "text-sm border border-secondary-stroke rounded px-2 py-0.5 text-secondary-content hover:text-primary-content",
+                    onClick: n
+                  }, u(d.changeLabel), 1)
+                ])
+              ]),
+              _[0] || (_[0] = t("hr", null, null, -1))
+            ])
+          ]),
+          t("div", He, [
+            t("div", Te, u(d.appsTitle), 1),
+            t("div", null, [
+              d.apps && d.apps.length ? (o(), l("div", qe, [
+                (o(!0), l(M, null, L(f.value, (O) => (o(), l("div", {
+                  key: O.id,
+                  onClick: (W) => h(O),
+                  class: "flex items-center rounded-lg hover:bg-secondary-10 border p-2 bg-[#FAFAFA] cursor-pointer"
+                }, [
+                  H(de, {
+                    text: O.name,
+                    src: O.photo_url,
+                    size: 44,
+                    rounded: !1
+                  }, null, 8, ["text", "src"]),
+                  t("div", Xe, [
+                    t("p", Ye, u(O.name), 1),
+                    t("p", Ze, u(O.short), 1)
+                  ])
+                ], 8, Je))), 128))
+              ])) : m("", !0),
+              d.apps && d.apps.length > pe ? (o(), l("button", {
+                key: 1,
+                onClick: x,
+                class: "mt-2 w-full bg-[#FAFAFA] hover:bg-secondary-10 p-2 rounded-lg mb-5 text-xs"
+              }, u(c.value ? "Приховати" : "Дивитися всі"), 1)) : m("", !0)
+            ])
+          ])
+        ];
+      }),
+      _: 1
+    }));
+  }
+}), Qe = ["onClick"], et = ["onKeydown"], tt = {
+  key: 0,
+  class: "text-sm font-medium text-gray-700 px-3 pt-2.5 pb-1.5"
+}, ot = {
+  key: 1,
+  class: "px-3 py-2"
+}, st = { class: "relative" }, lt = ["placeholder"], nt = {
+  key: 2,
+  class: "border-b border-gray-100"
+}, rt = ["onClick"], at = {
+  key: 3,
+  class: "flex items-center justify-between px-3 py-1.5 border-b border-gray-100"
+}, it = {
+  key: 4,
+  class: "flex justify-center py-4"
+}, ut = ["aria-selected", "onClick"], dt = {
+  key: 0,
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  "stroke-width": "1.5",
+  stroke: "currentColor",
+  class: "w-4 h-4 text-blue-600 shrink-0"
+}, pt = {
+  key: 1,
+  class: "w-4 h-4 shrink-0"
+}, ct = ["aria-selected", "onClick", "onMouseenter"], vt = {
+  key: 0,
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  "stroke-width": "1.5",
+  stroke: "currentColor",
+  class: "w-4 h-4 text-blue-600 shrink-0"
+}, mt = {
+  key: 1,
+  class: "w-4 h-4 shrink-0"
+}, ft = ["aria-selected", "onClick", "onMouseenter"], ht = {
+  key: 0,
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  "stroke-width": "1.5",
+  stroke: "currentColor",
+  class: "w-4 h-4 text-blue-600 shrink-0"
+}, yt = {
+  key: 1,
+  class: "w-4 h-4 shrink-0"
+}, wt = {
+  key: 3,
+  class: "px-3 py-4 text-sm text-gray-500 text-center"
+}, gt = { class: "pb-6" }, kt = {
+  key: 0,
+  class: "relative px-3 py-3"
+}, bt = { class: "relative" }, xt = ["placeholder"], Ct = {
+  key: 1,
+  class: "px-3 py-2"
+}, _t = {
+  key: 2,
+  class: "flex items-center justify-between px-3 py-2 border-b border-gray-100"
+}, $t = {
+  key: 3,
+  class: "flex justify-center py-8"
+}, Mt = {
+  key: 4,
+  class: "overflow-auto h-[60dvh] divide-y",
+  role: "listbox"
+}, Vt = ["aria-selected"], Kt = {
+  key: 0,
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  "stroke-width": "1.5",
+  stroke: "currentColor",
+  class: "w-5 h-5 text-blue-600 shrink-0"
+}, At = {
+  key: 1,
+  class: "w-5 h-5 shrink-0"
+}, Ot = {
+  key: 0,
+  class: "px-3 pt-3 pb-2 text-xs font-semibold text-gray-400 uppercase tracking-wide"
+}, jt = ["aria-selected", "onClick"], It = {
+  key: 0,
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  "stroke-width": "1.5",
+  stroke: "currentColor",
+  class: "w-5 h-5 text-blue-600 shrink-0"
+}, Bt = {
+  key: 1,
+  class: "w-5 h-5 shrink-0"
+}, Lt = ["aria-selected", "onClick"], St = {
+  key: 0,
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  "stroke-width": "1.5",
+  stroke: "currentColor",
+  class: "w-5 h-5 text-blue-600 shrink-0"
+}, Dt = {
+  key: 1,
+  class: "w-5 h-5 shrink-0"
+}, zt = {
+  key: 3,
+  class: "px-3 py-8 text-sm text-gray-500 text-center"
+}, eo = /* @__PURE__ */ X({
+  __name: "OneDropdownSelect",
+  props: ke,
+  emits: ["update:modelValue", "search", "create"],
+  setup(S, { emit: g }) {
+    const n = S, c = Ae(), f = g, x = C(!1);
+    let h = null;
+    $e(() => {
+      h = window.matchMedia("(max-width: 767px)"), x.value = h.matches;
+      const e = (s) => {
+        x.value = s.matches;
+      };
+      h.addEventListener("change", e), Me(() => {
+        h == null || h.removeEventListener("change", e);
+      });
+    });
+    const d = Oe(), _ = C(null), K = () => {
+      p.value = "", i.value = -1, d.open(), T(() => {
+        var e;
+        (e = _.value) == null || e.focus();
+      });
+    }, p = C(""), i = C(-1), A = C(null), O = C(null), W = C({}), N = (e, s) => {
+      e && (W.value[s] = e);
+    }, D = I(() => n.allowEmpty ? 1 : 0), B = I(() => {
+      if (!p.value.trim())
+        return n.items;
+      const e = p.value.toLowerCase();
+      return n.items.filter(
+        (s) => String(s[n.labelKey] ?? "").toLowerCase().includes(e)
+      );
+    }), Y = I(() => {
+      if (!n.groupKey)
+        return [];
+      const e = [], s = /* @__PURE__ */ new Map();
+      let a = D.value;
+      for (const r of B.value) {
+        const b = String(r[n.groupKey] ?? "");
+        let v = s.get(b);
+        v || (v = { label: b, entries: [] }, s.set(b, v), e.push(v)), v.entries.push({ item: r, flatIndex: a }), a++;
+      }
+      return e;
+    }), $ = I(() => n.multiple ? (n.modelValue ?? []).length > 0 : n.modelValue !== null && n.modelValue !== void 0), E = I(() => {
+      if (n.multiple) {
+        const e = n.modelValue ?? [];
+        return e.length === 0 ? n.placeholder : e.length === 1 ? e[0][n.labelKey] ?? n.placeholder : `${e[0][n.labelKey]} +${e.length - 1}`;
+      }
+      return n.modelValue === null || n.modelValue === void 0 ? n.placeholder : n.modelValue[n.labelKey] ?? n.placeholder;
+    }), k = (e) => n.modelValue ? n.multiple ? n.modelValue.some((a) => a[n.valueKey] === e[n.valueKey]) : n.modelValue[n.valueKey] === e[n.valueKey] : !1, Z = I(() => B.value.length + D.value), j = (e, s) => {
+      if (n.multiple) {
+        const a = (n.modelValue ?? []).slice();
+        if (e === null) {
+          f("update:modelValue", []);
+          return;
+        }
+        const r = a.findIndex((b) => b[n.valueKey] === e[n.valueKey]);
+        r >= 0 ? a.splice(r, 1) : a.push(e), f("update:modelValue", a);
+        return;
+      }
+      f("update:modelValue", e), s();
+    }, Q = () => {
+      f("update:modelValue", [...n.items]);
+    }, ee = () => {
+      f("update:modelValue", []);
+    }, te = (e) => {
+      f("create", p.value), e();
+    }, ve = () => {
+      p.value = "", i.value = -1, T(() => {
+        var e;
+        (e = A.value) == null || e.focus();
+      });
+    }, me = () => {
+      p.value = "", i.value = -1;
+    }, oe = () => {
+      i.value = 0, f("search", p.value);
+    }, se = () => {
+      T(() => {
+        const e = W.value[i.value];
+        e && e.scrollIntoView({ block: "nearest" });
+      });
+    }, fe = (e, s) => {
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault(), i.value < Z.value - 1 ? i.value++ : i.value = 0, se();
+          break;
+        case "ArrowUp":
+          e.preventDefault(), i.value > 0 ? i.value-- : i.value = Z.value - 1, se();
+          break;
+        case "Enter":
+          if (e.preventDefault(), i.value >= 0)
+            if (n.allowEmpty && i.value === 0)
+              j(null, s);
+            else {
+              const a = i.value - D.value, r = B.value[a];
+              r && j(r, s);
+            }
+          break;
+        case "Escape":
+          e.preventDefault(), s();
+          break;
+      }
+    };
+    return ce(p, () => {
+      i.value = 0;
+    }), (e, s) => x.value ? (o(), l(M, { key: 1 }, [
+      V(e.$slots, "button", F(P({ onToggle: K, isExpanded: y(d).isOpened.value, selectedLabel: E.value })), () => [
+        t("button", {
+          class: w(["inline-flex items-center justify-between gap-2 text-sm transition-colors", [
+            e.view === "pill" ? "rounded-full bg-gray-100 px-3.5 py-1.5 hover:bg-gray-200 text-gray-700" : "rounded-lg border border-gray-300 bg-white px-3 py-2 hover:bg-gray-50 min-w-[180px]"
+          ]]),
+          style: J(e.maxWidth ? { maxWidth: e.maxWidth } : void 0),
+          onClick: K
+        }, [
+          t("span", {
+            class: w(["truncate", e.view === "pill" ? "" : $.value ? "text-gray-900" : "text-gray-500"])
+          }, u(E.value), 3),
+          s[12] || (s[12] = t("svg", {
+            xmlns: "http://www.w3.org/2000/svg",
+            fill: "none",
+            viewBox: "0 0 24 24",
+            "stroke-width": "1.5",
+            stroke: "currentColor",
+            class: "w-4 h-4 text-gray-400 shrink-0"
+          }, [
+            t("path", {
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round",
+              d: "M19.5 8.25l-7.5 7.5-7.5-7.5"
+            })
+          ], -1))
+        ], 6)
+      ]),
+      y(d).isOpened.value ? (o(), U(y(je), {
+        key: 0,
+        useModal: y(d),
+        title: e.title || e.placeholder,
+        size: "sm",
+        classModal: !0,
+        titleCenter: !0
+      }, {
+        default: z(() => [
+          t("div", gt, [
+            e.searchable ? (o(), l("div", kt, [
+              t("div", bt, [
+                s[13] || (s[13] = t("svg", {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  "stroke-width": "1.5",
+                  stroke: "currentColor",
+                  class: "absolute left-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400"
+                }, [
+                  t("path", {
+                    "stroke-linecap": "round",
+                    "stroke-linejoin": "round",
+                    d: "M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+                  })
+                ], -1)),
+                q(t("input", {
+                  ref_key: "mobileSearchInputRef",
+                  ref: _,
+                  "onUpdate:modelValue": s[2] || (s[2] = (a) => p.value = a),
+                  type: "text",
+                  placeholder: e.searchPlaceholder,
+                  class: "w-full rounded-md border border-gray-300 py-2 pl-8 pr-3 text-sm outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent",
+                  onInput: oe
+                }, null, 40, xt), [
+                  [le, p.value]
+                ])
+              ])
+            ])) : m("", !0),
+            e.createLabel ? (o(), l("div", Ct, [
+              t("button", {
+                class: "w-full flex items-center justify-center gap-2 py-2 text-sm text-blue-700 hover:text-blue-500",
+                onClick: s[3] || (s[3] = (a) => te(() => y(d).close()))
+              }, [
+                s[14] || (s[14] = t("svg", {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  "stroke-width": "1.5",
+                  stroke: "currentColor",
+                  class: "w-4 h-4"
+                }, [
+                  t("path", {
+                    "stroke-linecap": "round",
+                    "stroke-linejoin": "round",
+                    d: "M12 4.5v15m7.5-7.5h-15"
+                  })
+                ], -1)),
+                t("span", null, u(e.createLabel), 1)
+              ])
+            ])) : m("", !0),
+            e.multiple ? (o(), l("div", _t, [
+              t("button", {
+                class: "text-sm text-blue-600 hover:text-blue-800 transition-colors",
+                onClick: Q
+              }, u(y(c)("ui.dropdown.selectAll")), 1),
+              $.value ? (o(), l("button", {
+                key: 0,
+                class: "text-sm text-gray-500 hover:text-gray-700 transition-colors",
+                onClick: ee
+              }, u(y(c)("ui.dropdown.clear")), 1)) : m("", !0)
+            ])) : m("", !0),
+            e.isLoading ? (o(), l("div", $t, [...s[15] || (s[15] = [
+              t("div", { class: "animate-spin w-6 h-6 border-2 border-blue-500 border-t-transparent rounded-full" }, null, -1)
+            ])])) : (o(), l("div", Mt, [
+              e.allowEmpty ? (o(), l("button", {
+                key: 0,
+                class: w(["flex items-center gap-3 w-full px-3 py-3 text-sm text-left hover:bg-gray-50 transition-colors", $.value ? "" : "bg-gray-50 font-medium"]),
+                role: "option",
+                "aria-selected": !$.value,
+                onClick: s[4] || (s[4] = (a) => j(null, () => y(d).close()))
+              }, [
+                $.value ? (o(), l("span", At)) : (o(), l("svg", Kt, [...s[16] || (s[16] = [
+                  t("path", {
+                    "stroke-linecap": "round",
+                    "stroke-linejoin": "round",
+                    d: "M4.5 12.75l6 6 9-13.5"
+                  }, null, -1)
+                ])])),
+                t("span", null, u(e.emptyLabel ?? e.placeholder), 1)
+              ], 10, Vt)) : m("", !0),
+              e.groupKey ? (o(!0), l(M, { key: 1 }, L(Y.value, (a) => (o(), l(M, {
+                key: a.label
+              }, [
+                a.label ? (o(), l("div", Ot, u(a.label), 1)) : m("", !0),
+                (o(!0), l(M, null, L(a.entries, (r) => (o(), l("button", {
+                  key: r.item[e.valueKey],
+                  class: w(["flex items-center gap-3 w-full px-3 py-3 text-sm text-left hover:bg-gray-50 transition-colors break-words", k(r.item) ? "bg-gray-50 font-medium" : ""]),
+                  role: "option",
+                  "aria-selected": k(r.item),
+                  onClick: (b) => j(r.item, () => y(d).close())
+                }, [
+                  k(r.item) ? (o(), l("svg", It, [...s[17] || (s[17] = [
+                    t("path", {
+                      "stroke-linecap": "round",
+                      "stroke-linejoin": "round",
+                      d: "M4.5 12.75l6 6 9-13.5"
+                    }, null, -1)
+                  ])])) : (o(), l("span", Bt)),
+                  V(e.$slots, "item", R({ ref_for: !0 }, { item: r.item }), () => [
+                    t("span", null, u(r.item[e.labelKey]), 1)
+                  ])
+                ], 10, jt))), 128))
+              ], 64))), 128)) : (o(!0), l(M, { key: 2 }, L(B.value, (a) => (o(), l("button", {
+                key: a[e.valueKey],
+                class: w(["flex items-center gap-3 w-full px-3 py-3 text-sm text-left hover:bg-gray-50 transition-colors break-words", k(a) ? "bg-gray-50 font-medium" : ""]),
+                role: "option",
+                "aria-selected": k(a),
+                onClick: (r) => j(a, () => y(d).close())
+              }, [
+                k(a) ? (o(), l("svg", St, [...s[18] || (s[18] = [
+                  t("path", {
+                    "stroke-linecap": "round",
+                    "stroke-linejoin": "round",
+                    d: "M4.5 12.75l6 6 9-13.5"
+                  }, null, -1)
+                ])])) : (o(), l("span", Dt)),
+                V(e.$slots, "item", R({ ref_for: !0 }, { item: a }), () => [
+                  t("span", null, u(a[e.labelKey]), 1)
+                ])
+              ], 10, Lt))), 128)),
+              B.value.length === 0 && !e.allowEmpty ? (o(), l("div", zt, [
+                V(e.$slots, "empty", {}, () => [
+                  ne(u(y(c)("ui.dropdown.nothingFound")), 1)
+                ])
+              ])) : m("", !0)
+            ]))
+          ])
+        ]),
+        _: 3
+      }, 8, ["useModal", "title"])) : m("", !0)
+    ], 64)) : (o(), U(Le, {
+      key: 0,
+      stick: e.stick,
+      onOpen: ve,
+      onClose: me
+    }, {
+      button: z(({ onToggle: a, isExpanded: r }) => [
+        V(e.$slots, "button", F(P({ onToggle: a, isExpanded: r, selectedLabel: E.value })), () => [
+          t("button", {
+            class: w(["inline-flex items-center justify-between gap-2 text-sm transition-colors", [
+              e.view === "pill" ? "rounded-full bg-gray-100 px-3.5 py-1.5 hover:bg-gray-200 text-gray-700" : "rounded-lg border border-gray-300 bg-white px-3 py-2 hover:bg-gray-50 min-w-[180px]",
+              e.view === "default" && r ? "ring-1 ring-blue-500 border-blue-500" : ""
+            ]]),
+            style: J(e.maxWidth ? { maxWidth: e.maxWidth } : void 0),
+            onClick: a
+          }, [
+            t("span", {
+              class: w(["truncate", e.view === "pill" ? "" : $.value ? "text-gray-900" : "text-gray-500"])
+            }, u(E.value), 3),
+            (o(), l("svg", {
+              xmlns: "http://www.w3.org/2000/svg",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              "stroke-width": "1.5",
+              stroke: "currentColor",
+              class: w(["w-4 h-4 text-gray-400 transition-transform shrink-0", r ? "rotate-180" : ""])
+            }, [...s[5] || (s[5] = [
+              t("path", {
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+                d: "M19.5 8.25l-7.5 7.5-7.5-7.5"
+              }, null, -1)
+            ])], 2))
+          ], 14, Qe)
+        ])
+      ]),
+      menu: z(({ onToggle: a }) => [
+        t("div", {
+          class: "min-w-[240px] w-full",
+          onKeydown: (r) => fe(r, a)
+        }, [
+          e.title ? (o(), l("div", tt, u(e.title), 1)) : m("", !0),
+          e.searchable ? (o(), l("div", ot, [
+            t("div", st, [
+              s[6] || (s[6] = t("svg", {
+                xmlns: "http://www.w3.org/2000/svg",
+                fill: "none",
+                viewBox: "0 0 24 24",
+                "stroke-width": "1.5",
+                stroke: "currentColor",
+                class: "absolute left-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400"
+              }, [
+                t("path", {
+                  "stroke-linecap": "round",
+                  "stroke-linejoin": "round",
+                  d: "M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+                })
+              ], -1)),
+              q(t("input", {
+                ref_key: "searchInputRef",
+                ref: A,
+                "onUpdate:modelValue": s[0] || (s[0] = (r) => p.value = r),
+                type: "text",
+                placeholder: e.searchPlaceholder,
+                class: "w-full rounded-md border border-gray-300 py-1.5 pl-8 pr-3 text-sm outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500",
+                onInput: oe
+              }, null, 40, lt), [
+                [le, p.value]
+              ])
+            ])
+          ])) : m("", !0),
+          e.createLabel ? (o(), l("div", nt, [
+            t("button", {
+              class: "flex items-center gap-2 w-full px-3 py-2 text-sm text-blue-700 hover:bg-gray-50 transition-colors",
+              onClick: (r) => te(a)
+            }, [
+              s[7] || (s[7] = t("svg", {
+                xmlns: "http://www.w3.org/2000/svg",
+                fill: "none",
+                viewBox: "0 0 24 24",
+                "stroke-width": "1.5",
+                stroke: "currentColor",
+                class: "w-4 h-4"
+              }, [
+                t("path", {
+                  "stroke-linecap": "round",
+                  "stroke-linejoin": "round",
+                  d: "M12 4.5v15m7.5-7.5h-15"
+                })
+              ], -1)),
+              t("span", null, u(e.createLabel), 1)
+            ], 8, rt)
+          ])) : m("", !0),
+          e.multiple ? (o(), l("div", at, [
+            t("button", {
+              class: "text-xs text-blue-600 hover:text-blue-800 transition-colors",
+              onClick: Q
+            }, u(y(c)("ui.dropdown.selectAll")), 1),
+            $.value ? (o(), l("button", {
+              key: 0,
+              class: "text-xs text-gray-500 hover:text-gray-700 transition-colors",
+              onClick: ee
+            }, u(y(c)("ui.dropdown.clear")), 1)) : m("", !0)
+          ])) : m("", !0),
+          e.isLoading ? (o(), l("div", it, [...s[8] || (s[8] = [
+            t("svg", {
+              class: "animate-spin h-5 w-5 text-gray-400",
+              xmlns: "http://www.w3.org/2000/svg",
+              fill: "none",
+              viewBox: "0 0 24 24"
+            }, [
+              t("circle", {
+                class: "opacity-25",
+                cx: "12",
+                cy: "12",
+                r: "10",
+                stroke: "currentColor",
+                "stroke-width": "4"
+              }),
+              t("path", {
+                class: "opacity-75",
+                fill: "currentColor",
+                d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+              })
+            ], -1)
+          ])])) : (o(), l("div", {
+            key: 5,
+            ref_key: "listRef",
+            ref: O,
+            class: "max-h-[300px] overflow-y-auto",
+            role: "listbox"
+          }, [
+            e.allowEmpty ? (o(), l("button", {
+              key: 0,
+              ref: (r) => N(r, 0),
+              class: w(["flex items-center gap-2 w-full px-3 py-2 text-sm text-left transition-colors", [
+                $.value ? "hover:bg-gray-50" : "bg-gray-100 font-medium",
+                i.value === 0 ? "bg-gray-50" : ""
+              ]]),
+              role: "option",
+              "aria-selected": !$.value,
+              onClick: (r) => j(null, a),
+              onMouseenter: s[1] || (s[1] = (r) => i.value = 0)
+            }, [
+              $.value ? (o(), l("span", pt)) : (o(), l("svg", dt, [...s[9] || (s[9] = [
+                t("path", {
+                  "stroke-linecap": "round",
+                  "stroke-linejoin": "round",
+                  d: "M4.5 12.75l6 6 9-13.5"
+                }, null, -1)
+              ])])),
+              t("span", null, u(e.emptyLabel ?? e.placeholder), 1)
+            ], 42, ut)) : m("", !0),
+            e.groupKey ? (o(!0), l(M, { key: 1 }, L(Y.value, (r, b) => (o(), l(M, {
+              key: r.label
+            }, [
+              r.label ? (o(), l("div", {
+                key: 0,
+                class: w(["px-3 pt-2 pb-1 text-xs font-semibold text-gray-500 uppercase tracking-wide", b > 0 ? "border-t border-gray-100 mt-1" : ""])
+              }, u(r.label), 3)) : m("", !0),
+              (o(!0), l(M, null, L(r.entries, (v) => (o(), l("button", {
+                key: v.item[e.valueKey],
+                ref_for: !0,
+                ref: (G) => N(G, v.flatIndex),
+                class: w(["flex items-center gap-2 w-full px-3 py-2 text-sm text-left transition-colors break-words", [
+                  k(v.item) ? "bg-gray-100 font-medium" : "hover:bg-gray-50",
+                  i.value === v.flatIndex ? "bg-gray-50" : ""
+                ]]),
+                role: "option",
+                "aria-selected": k(v.item),
+                onClick: (G) => j(v.item, a),
+                onMouseenter: (G) => i.value = v.flatIndex
+              }, [
+                k(v.item) ? (o(), l("svg", vt, [...s[10] || (s[10] = [
+                  t("path", {
+                    "stroke-linecap": "round",
+                    "stroke-linejoin": "round",
+                    d: "M4.5 12.75l6 6 9-13.5"
+                  }, null, -1)
+                ])])) : (o(), l("span", mt)),
+                V(e.$slots, "item", R({ ref_for: !0 }, { item: v.item }), () => [
+                  t("span", null, u(v.item[e.labelKey]), 1)
+                ])
+              ], 42, ct))), 128))
+            ], 64))), 128)) : (o(!0), l(M, { key: 2 }, L(B.value, (r, b) => (o(), l("button", {
+              key: r[e.valueKey],
+              ref_for: !0,
+              ref: (v) => N(v, D.value + b),
+              class: w(["flex items-center gap-2 w-full px-3 py-2 text-sm text-left transition-colors break-words", [
+                k(r) ? "bg-gray-100 font-medium" : "hover:bg-gray-50",
+                i.value === D.value + b ? "bg-gray-50" : ""
+              ]]),
+              role: "option",
+              "aria-selected": k(r),
+              onClick: (v) => j(r, a),
+              onMouseenter: (v) => i.value = D.value + b
+            }, [
+              k(r) ? (o(), l("svg", ht, [...s[11] || (s[11] = [
+                t("path", {
+                  "stroke-linecap": "round",
+                  "stroke-linejoin": "round",
+                  d: "M4.5 12.75l6 6 9-13.5"
+                }, null, -1)
+              ])])) : (o(), l("span", yt)),
+              V(e.$slots, "item", R({ ref_for: !0 }, { item: r }), () => [
+                t("span", null, u(r[e.labelKey]), 1)
+              ])
+            ], 42, ft))), 128)),
+            B.value.length === 0 && !e.allowEmpty ? (o(), l("div", wt, [
+              V(e.$slots, "empty", {}, () => [
+                ne(u(y(c)("ui.dropdown.nothingFound")), 1)
+              ])
+            ])) : m("", !0)
+          ], 512))
+        ], 40, et)
+      ]),
+      _: 3
+    }, 8, ["stick"]));
+  }
+});
 export {
-  O as OneBrowserMenu,
-  b as OneBrowserMenuGrid,
-  d as OneDropdown,
-  c as OneDropdownAuto,
-  f as OneDropdownDivider,
-  w as OneDropdownItem,
-  l as OneDropdownSelect,
-  D as OneHelpMenu,
-  u as OneUserMenu
+  so as OneBrowserMenu,
+  Qt as OneBrowserMenuGrid,
+  we as OneDropdown,
+  Le as OneDropdownAuto,
+  Zt as OneDropdownDivider,
+  lo as OneDropdownItem,
+  eo as OneDropdownSelect,
+  no as OneHelpMenu,
+  ro as OneUserMenu
 };