@profitliga/ui 2.0.1 → 2.0.3

package/dist/components/v2/Combobox/Combobox.vue2.js

@@ -1,18 +1,18 @@
-import { defineComponent as Ee, useModel as ve, useId as Ne, useAttrs as Ve, computed as d, ref as F, useTemplateRef as C, onMounted as De, nextTick as j, onBeforeUnmount as Fe, watch as T, openBlock as r, createElementBlock as f, mergeProps as v, unref as s, toDisplayString as _, createCommentVNode as x, createVNode as S, withCtx as H, createElementVNode as h, Fragment as me, renderList as he, createBlock as Q, resolveDynamicComponent as Le, withModifiers as pe, mergeModels as xe } from "vue";
-import { Search as Oe, CircleX as Pe, ChevronDown as We } from "@lucide/vue";
-import { breakpoints as Ge } from "../../../utils/breakpoints.util.js";
-import ze from "../Input/Input.vue.js";
-import Ue from "../Popover/Popover.vue.js";
-import Xe from "../Radio/RadioMarker.vue.js";
-import qe from "../Select/SelectCheckMarker.vue.js";
-import { useTestId as Ke } from "../shared/useTestId.util.js";
-const je = ["value", "placeholder", "disabled", "readonly", "aria-labelledby", "aria-label", "aria-describedby", "aria-activedescendant"], He = ["aria-hidden"], Qe = ["src"], Je = { class: "combobox__chip-label" }, Ye = ["disabled", "tabindex", "aria-label", "onClick"], Ze = ["aria-hidden"], ea = ["disabled"], aa = { class: "combobox-list" }, la = {
+import { defineComponent as Ge, useModel as ye, useId as ze, useAttrs as Ue, computed as u, ref as E, useTemplateRef as R, shallowRef as Xe, watch as I, onMounted as qe, nextTick as G, onBeforeUnmount as Ke, openBlock as c, createElementBlock as f, mergeProps as v, unref as s, toDisplayString as w, createCommentVNode as g, createVNode as M, withCtx as Y, createElementVNode as x, renderSlot as z, createTextVNode as ge, Fragment as ke, renderList as _e, createBlock as Z, resolveDynamicComponent as je, withModifiers as ee, mergeModels as we } from "vue";
+import { Search as Qe, CircleX as He, X as Je, ChevronDown as Ye } from "@lucide/vue";
+import { breakpoints as Ze } from "../../../utils/breakpoints.util.js";
+import ea from "../Input/Input.vue.js";
+import aa from "../Popover/Popover.vue.js";
+import la from "../Radio/RadioMarker.vue.js";
+import ta from "../Select/SelectCheckMarker.vue.js";
+import { useTestId as oa } from "../shared/useTestId.util.js";
+const ia = ["value", "placeholder", "disabled", "readonly", "aria-labelledby", "aria-label", "aria-describedby", "aria-activedescendant"], sa = ["aria-hidden"], na = ["src"], ua = { class: "combobox__chip-label" }, ra = ["disabled", "tabindex", "aria-label", "onClick"], ca = ["aria-hidden"], da = ["aria-label"], fa = ["disabled"], va = { class: "combobox-list" }, ba = {
   key: 0,
   class: "combobox-list__search"
-}, ta = ["aria-label", "aria-multiselectable"], oa = ["id", "aria-selected", "aria-disabled", "onClick", "onMouseenter"], ia = { class: "combobox-list__label" }, sa = 64, ma = /* @__PURE__ */ Ee({
+}, ma = ["aria-label", "aria-multiselectable"], ha = ["id", "aria-selected", "aria-disabled", "onClick", "onMouseenter"], pa = { class: "combobox-list__label" }, xa = 64, Ma = /* @__PURE__ */ Ge({
   inheritAttrs: !1,
   __name: "Combobox",
-  props: /* @__PURE__ */ xe({
+  props: /* @__PURE__ */ we({
     options: {},
     multiple: { type: Boolean, default: !1 },
     filter: { type: Boolean, default: !0 },
@@ -25,6 +25,7 @@ const je = ["value", "placeholder", "disabled", "readonly", "aria-labelledby", "
     invalid: { type: Boolean, default: !1 },
     size: { default: "default" },
     disabled: { type: Boolean, default: !1 },
+    hideEmptyList: { type: Boolean, default: !1 },
     emptyText: { default: "Нет вариантов" },
     notFoundText: { default: "Ничего не найдено" },
     loadingText: { default: "Загрузка…" },
@@ -44,412 +45,482 @@ const je = ["value", "placeholder", "disabled", "readonly", "aria-labelledby", "
     search: { default: "" },
     searchModifiers: {}
   }),
-  emits: /* @__PURE__ */ xe(["change", "select", "search"], ["update:modelValue", "update:search"]),
-  setup(t, { emit: ke }) {
-    const o = t, k = ke, A = ve(t, "modelValue"), n = ve(t, "search"), $ = Ne(), J = `combobox-input-${$}`, Y = `combobox-label-${$}`, w = `combobox-list-${$}`, Z = `combobox-message-${$}`, b = Ke(() => o.testId), L = Ve(), ye = d(() => ({
-      class: L.class,
-      style: L.style
-    })), ge = d(() => {
-      const { class: e, style: a, ...l } = L;
+  emits: /* @__PURE__ */ we(["change", "select", "search", "clear"], ["update:modelValue", "update:search"]),
+  setup(i, { emit: Ce }) {
+    const o = i, p = Ce, T = ye(i, "modelValue"), n = ye(i, "search"), V = ze(), ae = `combobox-input-${V}`, le = `combobox-label-${V}`, C = `combobox-list-${V}`, te = `combobox-message-${V}`, d = oa(() => o.testId), U = Ue(), Re = u(() => ({
+      class: U.class,
+      style: U.style
+    })), Ie = u(() => {
+      const { class: e, style: a, ...l } = U;
       return l;
-    }), I = Ge.smaller(o.breakpointMobile), c = F(!1), ee = C("fieldRef"), B = C("contentRef"), ae = C("chipsRef"), le = C("counterRef"), O = C("inputRef"), te = C("listRef"), y = F(Number.MAX_SAFE_INTEGER), P = F(0), u = F(-1), g = d(() => {
-      const e = A.value;
+    }), k = Ze.smaller(o.breakpointMobile), b = E(!1), oe = R("fieldRef"), N = R("contentRef"), ie = R("chipsRef"), se = R("counterRef"), L = R("inputRef"), ne = R("listRef"), _ = E(Number.MAX_SAFE_INTEGER), X = E(0), r = E(-1), m = u(() => {
+      const e = T.value;
       return e == null ? [] : Array.isArray(e) ? e : [e];
-    }), R = d(
-      () => o.options.filter((e) => g.value.includes(e.value))
-    ), W = d(
-      () => R.value.map((e) => e.label).join(", ")
-    ), G = d(
-      () => o.multiple && R.value.length > 0
-    ), E = d(
-      () => Math.max(0, R.value.length - y.value)
-    ), _e = d(() => c.value ? n.value : o.multiple ? "" : W.value), we = d(() => G.value ? "" : c.value && !o.multiple && W.value ? W.value : o.placeholder), p = d(() => {
+    }), q = Xe(/* @__PURE__ */ new Map());
+    I(
+      [m, () => o.options],
+      () => {
+        const e = /* @__PURE__ */ new Map();
+        for (const a of m.value) {
+          const l = o.options.find((t) => t.value === a) ?? q.value.get(a);
+          l && e.set(a, l);
+        }
+        q.value = e;
+      },
+      { immediate: !0 }
+    );
+    const S = u(() => {
+      const e = o.options.filter(
+        (t) => m.value.includes(t.value)
+      );
+      if (e.length === m.value.length) return e;
+      const a = new Set(e.map((t) => t.value)), l = m.value.filter((t) => !a.has(t)).map((t) => q.value.get(t)).filter((t) => t !== void 0);
+      return [...e, ...l];
+    }), ue = u(
+      () => S.value.map((e) => e.label).join(", ")
+    ), K = u(
+      () => o.multiple && S.value.length > 0
+    ), Me = u(
+      () => !o.multiple && !o.disabled && m.value.length > 0
+    ), Te = u(() => "Очистить поле"), D = u(
+      () => Math.max(0, S.value.length - _.value)
+    ), $ = E(!1), Se = u(() => b.value && $.value ? n.value : o.multiple ? "" : ue.value), $e = u(() => K.value ? "" : o.placeholder), y = u(() => {
       const e = n.value.trim().toLowerCase();
       return !o.filter || !e ? o.options : o.options.filter(
         (a) => a.label.toLowerCase().includes(e)
       );
-    }), z = d(
+    }), Ae = u(
+      () => o.loading || y.value.length > 0
+    ), F = u({
+      get: () => b.value && (!o.hideEmptyList || k.value || Ae.value),
+      set: (e) => {
+        b.value = e;
+      }
+    }), j = u(
       () => o.invalid ? o.errorText ?? o.supportText : o.supportText
-    ), Ce = d(() => o.width ?? P.value), oe = d(
-      () => c.value && u.value !== -1 ? `${w}-option-${u.value}` : void 0
-    ), Ie = d(() => [
+    ), Be = u(() => o.width ?? X.value), re = u(
+      () => F.value && r.value !== -1 ? `${C}-option-${r.value}` : void 0
+    ), Ee = u(() => [
       "combobox",
       `combobox--${o.size}`,
       {
-        "combobox--open": c.value,
+        /* Стрелка и рамка следуют за видимым списком, а не за намерением открыть. */
+        "combobox--open": F.value,
         "combobox--invalid": o.invalid,
         "combobox--disabled": o.disabled,
         "combobox--multiple": o.multiple
       }
     ]);
-    function N(e) {
-      return g.value.includes(e);
+    function A(e) {
+      return m.value.includes(e);
     }
-    function U(e) {
-      const a = p.value[e];
+    function Q(e) {
+      const a = y.value[e];
       return !!a && !a?.disabled;
     }
-    function ie() {
-      return p.value.findIndex((e, a) => U(a));
+    function ce() {
+      return y.value.findIndex((e, a) => Q(a));
     }
-    function Re() {
-      for (let e = p.value.length - 1; e >= 0; e -= 1)
-        if (U(e)) return e;
+    function Ve() {
+      for (let e = y.value.length - 1; e >= 0; e -= 1)
+        if (Q(e)) return e;
       return -1;
     }
-    function se(e, a) {
-      const l = p.value.length;
+    function de(e, a) {
+      const l = y.value.length;
       if (l === 0) return -1;
-      let i = e;
-      for (let m = 0; m < l; m += 1)
-        if (i = (i + a + l) % l, U(i)) return i;
+      let t = e;
+      for (let h = 0; h < l; h += 1)
+        if (t = (t + a + l) % l, Q(t)) return t;
       return -1;
     }
-    function X() {
-      I.value || O.value?.focus();
+    function O() {
+      k.value || L.value?.focus();
+    }
+    function B() {
+      o.disabled || b.value || (b.value = !0);
     }
-    function M() {
-      o.disabled || c.value || (c.value = !0);
+    function P() {
+      b.value = !1;
     }
-    function V() {
-      c.value = !1;
+    function Ne() {
+      o.disabled || (T.value = void 0, p("change", void 0), p("clear"), $.value = !1, n.value && (n.value = "", p("search", "")), O());
     }
-    function Me(e) {
-      e.stopPropagation(), !o.disabled && (M(), X());
+    function Le(e) {
+      e.stopPropagation(), !o.disabled && (B(), O());
     }
-    function Te() {
+    function De() {
       if (!o.disabled) {
-        if (c.value) {
-          V();
+        if (b.value) {
+          P();
           return;
         }
-        M(), X();
+        B(), O();
       }
     }
-    function ne(e) {
+    function fe(e) {
       const a = e.target.value;
-      n.value = a, k("search", a), M();
+      $.value = !0, n.value = a, p("search", a), B();
     }
-    function Se(e) {
-      I.value || e.preventDefault();
+    function Fe(e) {
+      k.value || e.preventDefault();
     }
-    function Ae(e, a) {
-      a || (u.value = e);
+    function Oe(e, a) {
+      a || (r.value = e);
     }
-    function ue(e) {
+    function ve(e) {
       switch (e.key) {
         case "ArrowDown":
-          if (e.preventDefault(), !c.value) {
-            M();
+          if (e.preventDefault(), !b.value) {
+            B();
             break;
           }
-          u.value = se(u.value, 1);
+          r.value = de(r.value, 1);
           break;
         case "ArrowUp":
-          if (e.preventDefault(), !c.value) {
-            M();
+          if (e.preventDefault(), !b.value) {
+            B();
             break;
           }
-          u.value = u.value === -1 ? Re() : se(u.value, -1);
+          r.value = r.value === -1 ? Ve() : de(r.value, -1);
           break;
         case "Enter": {
-          if (!c.value) break;
-          const a = p.value[u.value];
+          if (!b.value) break;
+          const a = y.value[r.value];
           if (!a) break;
-          e.preventDefault(), re(a);
+          e.preventDefault(), be(a);
           break;
         }
         case "Escape":
-          if (c.value) {
+          if (b.value) {
             n.value = "";
             break;
           }
           n.value && (n.value = "");
           break;
         case "Tab":
-          V();
+          P();
           break;
         case "Backspace": {
           if (!o.multiple || n.value) break;
-          const a = g.value[g.value.length - 1];
+          const a = m.value[m.value.length - 1];
           if (a === void 0) break;
-          ce(a);
+          me(a);
           break;
         }
       }
     }
-    function re(e) {
+    function be(e) {
       if (!(e.disabled || o.disabled)) {
         if (o.multiple) {
-          const a = N(e.value) ? g.value.filter((l) => l !== e.value) : [...g.value, e.value];
-          A.value = a, k("change", a), n.value && (n.value = "", k("search", "")), X();
+          const a = A(e.value) ? m.value.filter((l) => l !== e.value) : [...m.value, e.value];
+          T.value = a, p("change", a), n.value && (n.value = "", p("search", "")), O();
         } else
-          A.value = e.value, k("change", e.value), V(), I.value || O.value?.focus();
-        k("select", e);
+          T.value = e.value, p("change", e.value), P(), k.value || L.value?.focus();
+        p("select", e);
       }
     }
-    function ce(e) {
+    function me(e) {
       if (o.disabled) return;
-      const a = g.value.filter((l) => l !== e);
-      A.value = a, k("change", a);
+      const a = m.value.filter((l) => l !== e);
+      T.value = a, p("change", a);
     }
-    function q() {
+    function H() {
       if (!o.multiple) return;
-      const e = B.value, a = ae.value;
+      const e = N.value, a = ie.value;
       if (!e || !a) return;
       const l = Array.from(
         a.querySelectorAll('[data-chip="item"]')
       );
       if (!l.length) {
-        y.value = Number.MAX_SAFE_INTEGER;
+        _.value = Number.MAX_SAFE_INTEGER;
         return;
       }
-      const i = Number.parseFloat(getComputedStyle(a).columnGap) || 0, m = Number.parseFloat(getComputedStyle(e).columnGap) || 0, de = E.value ? (le.value?.offsetWidth ?? 0) + m : 0, $e = e.clientWidth - de - sa - m;
-      let be = 0, K = 0;
-      for (const Be of l) {
-        const fe = be + (K ? i : 0) + Be.offsetWidth;
-        if (fe > $e) break;
-        be = fe, K += 1;
+      const t = Number.parseFloat(getComputedStyle(a).columnGap) || 0, h = Number.parseFloat(getComputedStyle(e).columnGap) || 0, he = D.value ? (se.value?.offsetWidth ?? 0) + h : 0, Pe = e.clientWidth - he - xa - h;
+      let pe = 0, J = 0;
+      for (const We of l) {
+        const xe = pe + (J ? t : 0) + We.offsetWidth;
+        if (xe > Pe) break;
+        pe = xe, J += 1;
       }
-      y.value = Math.max(K, 1);
+      _.value = Math.max(J, 1);
     }
-    let D;
-    return De(() => {
-      const e = ee.value;
-      e && (P.value = e.getBoundingClientRect().width, j(q), D = new ResizeObserver((a) => {
+    let W;
+    return qe(() => {
+      const e = oe.value;
+      e && (X.value = e.getBoundingClientRect().width, G(H), W = new ResizeObserver((a) => {
         for (const l of a)
-          l.target === e && (P.value = l.borderBoxSize?.[0]?.inlineSize ?? e.getBoundingClientRect().width);
-        q();
-      }), D.observe(e), B.value && D.observe(B.value));
-    }), Fe(() => D?.disconnect()), T(
-      () => R.value.map((e) => e.value).join("|"),
+          l.target === e && (X.value = l.borderBoxSize?.[0]?.inlineSize ?? e.getBoundingClientRect().width);
+        H();
+      }), W.observe(e), N.value && W.observe(N.value));
+    }), Ke(() => W?.disconnect()), I(
+      () => S.value.map((e) => e.value).join("|"),
       () => {
-        y.value = Number.MAX_SAFE_INTEGER, j(q);
+        _.value = Number.MAX_SAFE_INTEGER, G(H);
       }
-    ), T([p, n], () => {
-      u.value = n.value ? ie() : -1;
-    }), T(c, (e) => {
+    ), I([y, n], () => {
+      r.value = n.value ? ce() : -1;
+    }), I(b, (e) => {
       if (e) {
-        u.value = n.value ? ie() : -1;
+        r.value = n.value ? ce() : -1, $.value = !1, !k.value && !o.multiple && ue.value && G(() => L.value?.select());
         return;
       }
-      u.value = -1, n.value && (n.value = "", k("search", ""));
-    }), T(u, (e) => {
-      e !== -1 && j(() => {
-        te.value?.querySelector(
-          `#${CSS.escape(`${w}-option-${e}`)}`
+      r.value = -1, $.value = !1, n.value && (n.value = "", p("search", ""));
+    }), I(r, (e) => {
+      e !== -1 && G(() => {
+        ne.value?.querySelector(
+          `#${CSS.escape(`${C}-option-${e}`)}`
         )?.scrollIntoView({ block: "nearest" });
       });
-    }), T(
+    }), I(
       () => o.disabled,
       (e) => {
-        e && V();
+        e && P();
       }
-    ), (e, a) => (r(), f("div", v({ class: Ie.value }, { ...ye.value, ...s(b)("root") }), [
-      t.label ? (r(), f("label", v({
+    ), (e, a) => (c(), f("div", v({ class: Ee.value }, { ...Re.value, ...s(d)("root") }), [
+      i.label ? (c(), f("label", v({
         key: 0,
-        id: Y,
+        id: le,
         class: "combobox__label",
-        for: J
-      }, s(b)("label")), _(t.label), 17)) : x("", !0),
-      S(s(Ue), {
-        open: c.value,
-        "onUpdate:open": a[1] || (a[1] = (l) => c.value = l),
-        width: Ce.value,
-        side: t.side,
-        "side-offset": t.sideOffset,
-        align: t.align,
-        "align-offset": t.alignOffset,
+        for: ae
+      }, s(d)("label")), w(i.label), 17)) : g("", !0),
+      M(s(aa), {
+        open: F.value,
+        "onUpdate:open": a[1] || (a[1] = (l) => F.value = l),
+        width: Be.value,
+        side: i.side,
+        "side-offset": i.sideOffset,
+        align: i.align,
+        "align-offset": i.alignOffset,
         arrow: !1,
-        "breakpoint-mobile": t.breakpointMobile,
+        "breakpoint-mobile": i.breakpointMobile,
         "trigger-has-popup": "listbox",
-        "trigger-controls": w,
+        "trigger-controls": C,
         "trap-focus": !1,
-        "test-id": t.testId
+        "test-id": i.testId
       }, {
-        trigger: H(({ props: l }) => [
-          h("div", v({
+        trigger: Y(({ props: l }) => [
+          x("div", v({
             ref_key: "fieldRef",
-            ref: ee,
+            ref: oe,
             class: "combobox__field"
-          }, s(b)("field"), { onClick: Me }), [
-            h("div", {
+          }, s(d)("field"), { onClick: Le }), [
+            x("div", {
               ref_key: "contentRef",
-              ref: B,
+              ref: N,
               class: "combobox__content"
             }, [
-              h("input", v({
-                id: J,
+              x("input", v({
+                id: ae,
                 ref_key: "inputRef",
-                ref: O,
+                ref: L,
                 role: "combobox",
                 type: "text",
                 class: "combobox__input",
                 autocomplete: "off",
                 spellcheck: "false",
                 "aria-autocomplete": "list",
-                value: _e.value,
-                placeholder: we.value,
-                disabled: t.disabled,
-                readonly: s(I),
-                "aria-labelledby": t.label ? Y : void 0,
-                "aria-label": t.label ? void 0 : t.ariaLabel,
-                "aria-describedby": z.value ? Z : void 0,
-                "aria-activedescendant": oe.value
+                value: Se.value,
+                placeholder: $e.value,
+                disabled: i.disabled,
+                readonly: s(k),
+                "aria-labelledby": i.label ? le : void 0,
+                "aria-label": i.label ? void 0 : i.ariaLabel,
+                "aria-describedby": j.value ? te : void 0,
+                "aria-activedescendant": re.value
               }, {
                 ...l,
-                ...ge.value,
-                ...s(b)("input")
+                ...Ie.value,
+                ...s(d)("input")
               }, {
-                onInput: ne,
-                onKeydown: ue
-              }), null, 16, je),
-              G.value ? (r(), f("span", {
+                onInput: fe,
+                onKeydown: ve
+              }), null, 16, ia),
+              K.value ? (c(), f("span", {
                 key: 0,
                 ref_key: "chipsRef",
-                ref: ae,
+                ref: ie,
                 class: "combobox__chips"
               }, [
-                (r(!0), f(me, null, he(R.value, (i, m) => (r(), f("span", v({
-                  key: i.value,
+                (c(!0), f(ke, null, _e(S.value, (t, h) => (c(), f("span", v({
+                  key: t.value,
                   "data-chip": "item",
                   class: ["combobox__chip", {
-                    "combobox__chip--measured": m >= y.value
+                    "combobox__chip--measured": h >= _.value
                   }],
-                  "aria-hidden": m >= y.value || void 0
-                }, { ref_for: !0 }, s(b)("chip", i.value)), [
-                  i.avatar ? (r(), f("img", {
-                    key: 0,
-                    class: "combobox__chip-avatar",
-                    src: i.avatar,
-                    alt: ""
-                  }, null, 8, Qe)) : i.icon ? (r(), Q(Le(i.icon), {
-                    key: 1,
-                    class: "combobox__chip-icon",
-                    "aria-hidden": "true"
-                  })) : x("", !0),
-                  h("span", Je, _(i.label), 1),
-                  h("button", v({
+                  "aria-hidden": h >= _.value || void 0
+                }, { ref_for: !0 }, s(d)("chip", t.value)), [
+                  z(e.$slots, "chip", {
+                    option: t,
+                    index: h
+                  }, () => [
+                    t.avatar ? (c(), f("img", {
+                      key: 0,
+                      class: "combobox__chip-avatar",
+                      src: t.avatar,
+                      alt: ""
+                    }, null, 8, na)) : t.icon ? (c(), Z(je(t.icon), {
+                      key: 1,
+                      class: "combobox__chip-icon",
+                      "aria-hidden": "true"
+                    })) : g("", !0),
+                    x("span", ua, w(t.label), 1)
+                  ], !0),
+                  x("button", v({
                     type: "button",
                     class: "combobox__chip-remove",
-                    disabled: t.disabled,
-                    tabindex: m >= y.value ? -1 : void 0,
-                    "aria-label": `Убрать ${i.label}`
-                  }, { ref_for: !0 }, s(b)("chip-remove", i.value), {
-                    onClick: pe((de) => ce(i.value), ["stop"])
+                    disabled: i.disabled,
+                    tabindex: h >= _.value ? -1 : void 0,
+                    "aria-label": `Убрать ${t.label}`
+                  }, { ref_for: !0 }, s(d)("chip-remove", t.value), {
+                    onClick: ee((he) => me(t.value), ["stop"])
                   }), [
-                    S(s(Pe), {
+                    M(s(He), {
                       class: "combobox__chip-icon",
                       "aria-hidden": "true"
                     })
-                  ], 16, Ye)
-                ], 16, He))), 128))
-              ], 512)) : x("", !0),
-              G.value ? (r(), f("span", v({
+                  ], 16, ra)
+                ], 16, sa))), 128))
+              ], 512)) : g("", !0),
+              K.value ? (c(), f("span", v({
                 key: 1,
                 ref_key: "counterRef",
-                ref: le,
+                ref: se,
                 class: ["combobox__chip combobox__chip--counter", {
-                  "combobox__chip--measured": !E.value
+                  "combobox__chip--measured": !D.value
                 }],
-                "aria-hidden": !E.value || void 0
-              }, s(b)("chip-counter")), " +" + _(E.value || 1), 17, Ze)) : x("", !0)
+                "aria-hidden": !D.value || void 0
+              }, s(d)("chip-counter")), " +" + w(D.value || 1), 17, ca)) : g("", !0)
             ], 512),
-            h("button", v({
+            Me.value ? (c(), f("button", v({
+              key: 0,
+              type: "button",
+              class: "combobox__clear-button",
+              "aria-label": Te.value
+            }, s(d)("clear"), {
+              onClick: ee(Ne, ["stop"])
+            }), [
+              M(s(Je), {
+                class: "combobox__clear",
+                "aria-hidden": "true"
+              })
+            ], 16, da)) : g("", !0),
+            x("button", v({
               type: "button",
               class: "combobox__arrow-button",
               tabindex: "-1",
               "aria-hidden": "true",
-              disabled: t.disabled
-            }, s(b)("arrow"), {
-              onClick: pe(Te, ["stop"])
+              disabled: i.disabled
+            }, s(d)("arrow"), {
+              onClick: ee(De, ["stop"])
             }), [
-              S(s(We), { class: "combobox__arrow" })
-            ], 16, ea)
+              M(s(Ye), { class: "combobox__arrow" })
+            ], 16, fa)
           ], 16)
         ]),
-        default: H(() => [
-          h("div", aa, [
-            s(I) ? (r(), f("div", la, [
-              S(s(ze), v({
+        default: Y(() => [
+          x("div", va, [
+            s(k) ? (c(), f("div", ba, [
+              M(s(ea), v({
                 modelValue: n.value,
                 "onUpdate:modelValue": a[0] || (a[0] = (l) => n.value = l),
                 "native-type": "search",
-                placeholder: t.searchPlaceholder,
-                "aria-label": t.searchPlaceholder,
-                "aria-controls": w,
-                "aria-activedescendant": oe.value,
+                placeholder: i.searchPlaceholder,
+                "aria-label": i.searchPlaceholder,
+                "aria-controls": C,
+                "aria-activedescendant": re.value,
                 "aria-autocomplete": "list",
                 autocomplete: "off",
                 spellcheck: "false"
-              }, s(b)("search"), {
-                onInput: ne,
-                onKeydown: ue
+              }, s(d)("search"), {
+                onInput: fe,
+                onKeydown: ve
               }), {
-                prefix: H(() => [
-                  S(s(Oe), { "aria-hidden": "true" })
+                prefix: Y(() => [
+                  M(s(Qe), { "aria-hidden": "true" })
                 ]),
                 _: 1
               }, 16, ["modelValue", "placeholder", "aria-label", "aria-activedescendant"])
-            ])) : x("", !0),
-            h("div", {
-              id: w,
+            ])) : g("", !0),
+            x("div", {
               ref_key: "listRef",
-              ref: te,
-              role: "listbox",
-              "aria-label": t.label ?? t.ariaLabel,
-              "aria-multiselectable": t.multiple || void 0,
-              class: "combobox-list__options",
-              onMousedown: Se
+              ref: ne,
+              class: "combobox-list__scroll",
+              onMousedown: Fe
             }, [
-              t.loading ? (r(), f("p", v({
-                key: 0,
-                class: "combobox-list__status"
-              }, s(b)("loading")), _(t.loadingText), 17)) : x("", !0),
-              (r(!0), f(me, null, he(p.value, (l, i) => (r(), f("div", v({
-                id: `${w}-option-${i}`,
-                key: l.value,
-                role: "option",
-                class: ["combobox-list__option", {
-                  "combobox-list__option--active": u.value === i,
-                  "combobox-list__option--disabled": l.disabled
-                }],
-                "aria-selected": N(l.value),
-                "aria-disabled": l.disabled || void 0
-              }, { ref_for: !0 }, s(b)("option", l.value), {
-                onClick: (m) => re(l),
-                onMouseenter: (m) => Ae(i, l.disabled)
-              }), [
-                t.multiple ? (r(), Q(qe, {
+              x("div", {
+                id: C,
+                role: "listbox",
+                "aria-label": i.label ?? i.ariaLabel,
+                "aria-multiselectable": i.multiple || void 0,
+                class: "combobox-list__options"
+              }, [
+                i.loading ? (c(), f("p", v({
                   key: 0,
-                  checked: N(l.value),
-                  disabled: l.disabled,
-                  state: u.value === i ? "hover" : "default"
-                }, null, 8, ["checked", "disabled", "state"])) : (r(), Q(s(Xe), {
+                  class: "combobox-list__status"
+                }, s(d)("loading")), [
+                  z(e.$slots, "loading", {}, () => [
+                    ge(w(i.loadingText), 1)
+                  ], !0)
+                ], 16)) : g("", !0),
+                (c(!0), f(ke, null, _e(y.value, (l, t) => (c(), f("div", v({
+                  id: `${C}-option-${t}`,
+                  key: l.value,
+                  role: "option",
+                  class: ["combobox-list__option", {
+                    "combobox-list__option--active": r.value === t,
+                    "combobox-list__option--disabled": l.disabled
+                  }],
+                  "aria-selected": A(l.value),
+                  "aria-disabled": l.disabled || void 0
+                }, { ref_for: !0 }, s(d)("option", l.value), {
+                  onClick: (h) => be(l),
+                  onMouseenter: (h) => Oe(t, l.disabled)
+                }), [
+                  i.multiple ? (c(), Z(ta, {
+                    key: 0,
+                    checked: A(l.value),
+                    disabled: l.disabled,
+                    state: r.value === t ? "hover" : "default"
+                  }, null, 8, ["checked", "disabled", "state"])) : (c(), Z(s(la), {
+                    key: 1,
+                    checked: A(l.value),
+                    disabled: l.disabled,
+                    state: r.value === t ? "hover" : "default"
+                  }, null, 8, ["checked", "disabled", "state"])),
+                  z(e.$slots, "option", {
+                    option: l,
+                    selected: A(l.value),
+                    active: r.value === t,
+                    index: t
+                  }, () => [
+                    x("span", pa, w(l.label), 1)
+                  ], !0)
+                ], 16, ha))), 128)),
+                !i.loading && !y.value.length ? (c(), f("p", v({
                   key: 1,
-                  checked: N(l.value),
-                  disabled: l.disabled,
-                  state: u.value === i ? "hover" : "default"
-                }, null, 8, ["checked", "disabled", "state"])),
-                h("span", ia, _(l.label), 1)
-              ], 16, oa))), 128)),
-              !t.loading && !p.value.length ? (r(), f("p", v({
-                key: 1,
-                class: "combobox-list__status"
-              }, s(b)("empty")), _(t.options.length ? t.notFoundText : t.emptyText), 17)) : x("", !0)
-            ], 40, ta)
+                  class: "combobox-list__status"
+                }, s(d)("empty")), [
+                  z(e.$slots, "empty", {
+                    notFound: !!i.options.length
+                  }, () => [
+                    ge(w(i.options.length ? i.notFoundText : i.emptyText), 1)
+                  ], !0)
+                ], 16)) : g("", !0)
+              ], 8, ma)
+            ], 544)
           ])
         ]),
-        _: 1
+        _: 3
       }, 8, ["open", "width", "side", "side-offset", "align", "align-offset", "breakpoint-mobile", "test-id"]),
-      z.value ? (r(), f("p", v({
+      j.value ? (c(), f("p", v({
         key: 1,
-        id: Z,
+        id: te,
         class: "combobox__message"
-      }, s(b)("message")), _(z.value), 17)) : x("", !0)
+      }, s(d)("message")), w(j.value), 17)) : g("", !0)
     ], 16));
   }
 });
 export {
-  ma as default
+  Ma as default
 };