@profitliga/ui 2.0.2 → 2.0.3

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

@@ -1,5 +1,5 @@
-import { defineComponent as Re, useModel as we, useId as xe, useAttrs as Ce, computed as u, ref as E, useTemplateRef as _, onMounted as Ae, nextTick as L, onBeforeUnmount as Ie, watch as T, openBlock as r, createElementBlock as o, mergeProps as f, unref as c, toDisplayString as v, createCommentVNode as R, createElementVNode as g, createVNode as V, withCtx as X, Fragment as ie, renderList as ne, createBlock as U, renderSlot as N, createTextVNode as j, resolveDynamicComponent as Me, withModifiers as Se, mergeModels as re } from "vue";
-import { CircleX as $e, ChevronDown as Ee } from "@lucide/vue";
+import { defineComponent as Re, useModel as we, useId as Ce, useAttrs as Se, computed as u, ref as V, useTemplateRef as R, onMounted as $e, nextTick as N, onBeforeUnmount as xe, watch as w, openBlock as o, createElementBlock as c, mergeProps as f, unref as r, toDisplayString as v, createCommentVNode as C, createElementVNode as g, createVNode as B, withCtx as X, Fragment as ie, renderList as ne, createBlock as q, renderSlot as D, createTextVNode as U, resolveDynamicComponent as Ie, withModifiers as Ae, mergeModels as oe } from "vue";
+import { CircleX as Me, ChevronDown as Ee } from "@lucide/vue";
 import Te from "../Popover/Popover.vue.js";
 import Ve from "../Radio/RadioMarker.vue.js";
 import { useTestId as Ne } from "../shared/useTestId.util.js";
@@ -8,13 +8,13 @@ import De from "./SelectCheckMarker.vue.js";
 const Fe = ["disabled", "aria-labelledby", "aria-label", "aria-describedby"], Oe = ["aria-label", "aria-multiselectable", "aria-activedescendant"], Ge = ["id", "aria-selected", "aria-disabled", "onClick", "onMouseenter"], We = { class: "select-list__label" }, ze = {
   key: 0,
   class: "select-list__empty"
-}, Le = ["aria-hidden"], Xe = ["src"], Ue = { class: "select__chip-label" }, je = ["disabled", "tabindex", "aria-label", "onClick"], qe = ["aria-hidden"], He = {
+}, Le = ["aria-hidden"], Xe = ["src"], qe = { class: "select__chip-label" }, Ue = ["disabled", "tabindex", "aria-label", "onClick"], je = ["aria-hidden"], He = {
   key: 3,
   class: "select__placeholder"
 }, Ke = "Нет вариантов", lt = /* @__PURE__ */ Re({
   inheritAttrs: !1,
   __name: "Select",
-  props: /* @__PURE__ */ re({
+  props: /* @__PURE__ */ oe({
     options: {},
     multiple: { type: Boolean, default: !1 },
     label: { default: void 0 },
@@ -38,27 +38,27 @@ const Fe = ["disabled", "aria-labelledby", "aria-label", "aria-describedby"], Oe
     },
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ re(["change", "select"], ["update:modelValue"]),
-  setup(a, { emit: ce }) {
-    const s = a, w = ce, x = we(a, "modelValue"), C = xe(), q = `select-trigger-${C}`, H = `select-label-${C}`, A = `select-list-${C}`, K = `select-message-${C}`, d = Ne(() => s.testId), B = Ce(), oe = u(() => ({
-      class: B.class,
-      style: B.style
+  emits: /* @__PURE__ */ oe(["change", "select"], ["update:modelValue"]),
+  setup(a, { emit: re }) {
+    const s = a, S = re, $ = we(a, "modelValue"), x = Ce(), j = `select-trigger-${x}`, H = `select-label-${x}`, y = `select-list-${x}`, K = `select-message-${x}`, d = Ne(() => s.testId), F = Se(), ce = u(() => ({
+      class: F.class,
+      style: F.style
     })), ue = u(() => {
-      const { class: e, style: l, ...t } = B;
+      const { class: e, style: l, ...t } = F;
       return t;
-    }), b = E(!1), P = _("fieldRef"), D = _("listRef"), I = _("contentRef"), J = _("chipsRef"), Q = _("counterRef"), m = E(Number.MAX_SAFE_INTEGER), F = E(0), n = E(-1), y = u(() => {
-      const e = x.value;
+    }), b = V(!1), P = R("fieldRef"), I = R("listRef"), A = R("contentRef"), J = R("chipsRef"), Q = R("counterRef"), m = V(Number.MAX_SAFE_INTEGER), O = V(0), n = V(-1), k = u(() => {
+      const e = $.value;
       return e == null ? [] : Array.isArray(e) ? e : [e];
     }), h = u(
-      () => s.options.filter((e) => y.value.includes(e.value))
+      () => s.options.filter((e) => k.value.includes(e.value))
     ), M = u(
       () => h.value.map((e) => e.label).join(", ")
-    ), S = u(
+    ), E = u(
       () => Math.max(0, h.value.length - m.value)
-    ), de = u(() => M.value || s.placeholder), O = u(
+    ), de = u(() => M.value || s.placeholder), G = u(
       () => s.invalid ? s.errorText ?? s.supportText : s.supportText
-    ), fe = u(() => s.width ?? F.value), ve = u(
-      () => n.value === -1 ? void 0 : `${A}-option-${n.value}`
+    ), fe = u(() => s.width ?? O.value), ve = u(
+      () => n.value === -1 ? void 0 : `${y}-option-${n.value}`
     ), be = u(() => [
       "select",
       `select--${s.size}`,
@@ -69,19 +69,19 @@ const Fe = ["disabled", "aria-labelledby", "aria-label", "aria-describedby"], Oe
         "select--multiple": s.multiple
       }
     ]);
-    function k(e) {
-      return y.value.includes(e);
+    function _(e) {
+      return k.value.includes(e);
     }
-    function G(e) {
+    function W(e) {
       const l = s.options[e];
       return !!l && !l?.disabled;
     }
     function me() {
-      return s.options.findIndex((e, l) => G(l));
+      return s.options.findIndex((e, l) => W(l));
     }
     function Y() {
       for (let e = s.options.length - 1; e >= 0; e -= 1)
-        if (G(e)) return e;
+        if (W(e)) return e;
       return -1;
     }
     function Z(e, l) {
@@ -89,13 +89,13 @@ const Fe = ["disabled", "aria-labelledby", "aria-label", "aria-describedby"], Oe
       if (t === 0) return -1;
       let i = e;
       for (let p = 0; p < t; p += 1)
-        if (i = (i + l + t) % t, G(i)) return i;
+        if (i = (i + l + t) % t, W(i)) return i;
       return -1;
     }
     function ee(e = 20) {
-      L(() => {
+      N(() => {
         if (!b.value) return;
-        const l = D.value;
+        const l = I.value;
         l && (l.focus(), document.activeElement === l) || e > 0 && requestAnimationFrame(() => ee(e - 1));
       });
     }
@@ -128,21 +128,21 @@ const Fe = ["disabled", "aria-labelledby", "aria-label", "aria-describedby"], Oe
     function te(e) {
       if (!(e.disabled || s.disabled)) {
         if (s.multiple) {
-          const l = k(e.value) ? y.value.filter((t) => t !== e.value) : [...y.value, e.value];
-          x.value = l, w("change", l);
+          const l = _(e.value) ? k.value.filter((t) => t !== e.value) : [...k.value, e.value];
+          $.value = l, S("change", l);
         } else
-          x.value = e.value, w("change", e.value), b.value = !1;
-        w("select", e);
+          $.value = e.value, S("change", e.value), b.value = !1;
+        S("select", e);
       }
     }
     function ge(e) {
       if (s.disabled) return;
-      const l = y.value.filter((t) => t !== e);
-      x.value = l, w("change", l);
+      const l = k.value.filter((t) => t !== e);
+      $.value = l, S("change", l);
     }
-    function W() {
+    function z() {
       if (!s.multiple) return;
-      const e = I.value, l = J.value;
+      const e = A.value, l = J.value;
       if (!e || !l) return;
       const t = Array.from(
         l.querySelectorAll('[data-chip="item"]')
@@ -151,52 +151,58 @@ const Fe = ["disabled", "aria-labelledby", "aria-label", "aria-describedby"], Oe
         m.value = Number.MAX_SAFE_INTEGER;
         return;
       }
-      const i = Number.parseFloat(getComputedStyle(l).columnGap) || 0, p = Number.parseFloat(getComputedStyle(e).columnGap) || 0, ye = S.value ? (Q.value?.offsetWidth ?? 0) + p : 0, ke = e.clientWidth - ye;
-      let ae = 0, z = 0;
+      const i = Number.parseFloat(getComputedStyle(l).columnGap) || 0, p = Number.parseFloat(getComputedStyle(e).columnGap) || 0, ye = E.value ? (Q.value?.offsetWidth ?? 0) + p : 0, ke = e.clientWidth - ye;
+      let ae = 0, L = 0;
       for (const _e of t) {
-        const se = ae + (z ? i : 0) + _e.offsetWidth;
+        const se = ae + (L ? i : 0) + _e.offsetWidth;
         if (se > ke) break;
-        ae = se, z += 1;
+        ae = se, L += 1;
       }
-      m.value = Math.max(z, 1);
+      m.value = Math.max(L, 1);
     }
-    let $;
-    Ae(() => {
+    let T;
+    $e(() => {
       const e = P.value;
-      e && (F.value = e.getBoundingClientRect().width, L(W), $ = new ResizeObserver((l) => {
+      e && (O.value = e.getBoundingClientRect().width, N(z), T = new ResizeObserver((l) => {
         for (const t of l)
-          t.target === e && (F.value = t.borderBoxSize?.[0]?.inlineSize ?? e.getBoundingClientRect().width);
-        W();
-      }), $.observe(e), I.value && $.observe(I.value));
-    }), Ie(() => $?.disconnect()), T(
+          t.target === e && (O.value = t.borderBoxSize?.[0]?.inlineSize ?? e.getBoundingClientRect().width);
+        z();
+      }), T.observe(e), A.value && T.observe(A.value));
+    }), xe(() => T?.disconnect()), w(
       () => h.value.map((e) => e.value).join("|"),
       () => {
-        m.value = Number.MAX_SAFE_INTEGER, L(W);
+        m.value = Number.MAX_SAFE_INTEGER, N(z);
       }
     );
     let le = null;
-    return T(b, (e) => {
+    return w(b, (e) => {
       e ? (le = document.activeElement, n.value = -1) : (n.value = -1, le?.focus());
-    }), T(D, (e) => {
+    }), w(I, (e) => {
       e && b.value && ee();
-    }), T(
+    }), w(n, (e) => {
+      e !== -1 && N(() => {
+        I.value?.querySelector(
+          `#${CSS.escape(`${y}-option-${e}`)}`
+        )?.scrollIntoView({ block: "nearest" });
+      });
+    }), w(
       () => s.disabled,
       (e) => {
         e && (b.value = !1);
       }
-    ), (e, l) => (r(), o("div", f({ class: be.value }, { ...oe.value, ...c(d)("root") }), [
-      a.label ? (r(), o("label", f({
+    ), (e, l) => (o(), c("div", f({ class: be.value }, { ...ce.value, ...r(d)("root") }), [
+      a.label ? (o(), c("label", f({
         key: 0,
         id: H,
         class: "select__label",
-        for: q
-      }, c(d)("label")), v(a.label), 17)) : R("", !0),
+        for: j
+      }, r(d)("label")), v(a.label), 17)) : C("", !0),
       g("div", f({
         ref_key: "fieldRef",
         ref: P,
         class: "select__field"
-      }, c(d)("field")), [
-        V(c(Te), {
+      }, r(d)("field")), [
+        B(r(Te), {
           open: b.value,
           "onUpdate:open": l[0] || (l[0] = (t) => b.value = t),
           width: fe.value,
@@ -207,26 +213,26 @@ const Fe = ["disabled", "aria-labelledby", "aria-label", "aria-describedby"], Oe
           arrow: !1,
           "breakpoint-mobile": a.breakpointMobile,
           "trigger-has-popup": "listbox",
-          "trigger-controls": A,
+          "trigger-controls": y,
           "test-id": a.testId
         }, {
           trigger: X(({ props: t }) => [
             g("button", f({
-              id: q,
+              id: j,
               type: "button",
               class: "select__trigger",
               disabled: a.disabled,
               "aria-labelledby": a.label ? H : void 0,
               "aria-label": a.label ? void 0 : a.ariaLabel,
-              "aria-describedby": O.value ? K : void 0
+              "aria-describedby": G.value ? K : void 0
             }, {
               ...t,
               ...ue.value,
-              ...c(d)("trigger")
+              ...r(d)("trigger")
             }), [
-              V(Be, null, {
+              B(Be, null, {
                 default: X(() => [
-                  j(v(de.value), 1)
+                  U(v(de.value), 1)
                 ]),
                 _: 1
               })
@@ -234,9 +240,9 @@ const Fe = ["disabled", "aria-labelledby", "aria-label", "aria-describedby"], Oe
           ]),
           default: X(() => [
             g("div", {
-              id: A,
+              id: y,
               ref_key: "listRef",
-              ref: D,
+              ref: I,
               role: "listbox",
               tabindex: "0",
               "aria-label": a.label ?? a.ariaLabel,
@@ -245,43 +251,43 @@ const Fe = ["disabled", "aria-labelledby", "aria-label", "aria-describedby"], Oe
               class: "select-list",
               onKeydown: pe
             }, [
-              (r(!0), o(ie, null, ne(a.options, (t, i) => (r(), o("div", f({
-                id: `${A}-option-${i}`,
+              (o(!0), c(ie, null, ne(a.options, (t, i) => (o(), c("div", f({
+                id: `${y}-option-${i}`,
                 key: t.value,
                 role: "option",
                 class: ["select-list__option", {
                   "select-list__option--active": n.value === i,
                   "select-list__option--disabled": t.disabled
                 }],
-                "aria-selected": k(t.value),
+                "aria-selected": _(t.value),
                 "aria-disabled": t.disabled || void 0
-              }, { ref_for: !0 }, c(d)("option", t.value), {
+              }, { ref_for: !0 }, r(d)("option", t.value), {
                 onClick: (p) => te(t),
                 onMouseenter: (p) => he(i, t.disabled)
               }), [
-                a.multiple ? (r(), U(De, {
+                a.multiple ? (o(), q(De, {
                   key: 0,
-                  checked: k(t.value),
+                  checked: _(t.value),
                   disabled: t.disabled,
                   state: n.value === i ? "hover" : "default"
-                }, null, 8, ["checked", "disabled", "state"])) : (r(), U(c(Ve), {
+                }, null, 8, ["checked", "disabled", "state"])) : (o(), q(r(Ve), {
                   key: 1,
-                  checked: k(t.value),
+                  checked: _(t.value),
                   disabled: t.disabled,
                   state: n.value === i ? "hover" : "default"
                 }, null, 8, ["checked", "disabled", "state"])),
-                N(e.$slots, "option", {
+                D(e.$slots, "option", {
                   option: t,
-                  selected: k(t.value),
+                  selected: _(t.value),
                   active: n.value === i,
                   index: i
                 }, () => [
                   g("span", We, v(t.label), 1)
                 ], !0)
               ], 16, Ge))), 128)),
-              a.options.length ? R("", !0) : (r(), o("p", ze, [
-                N(e.$slots, "empty", {}, () => [
-                  j(v(Ke))
+              a.options.length ? C("", !0) : (o(), c("p", ze, [
+                D(e.$slots, "empty", {}, () => [
+                  U(v(Ke))
                 ], !0)
               ]))
             ], 40, Oe)
@@ -290,38 +296,38 @@ const Fe = ["disabled", "aria-labelledby", "aria-label", "aria-describedby"], Oe
         }, 8, ["open", "width", "side", "side-offset", "align", "align-offset", "breakpoint-mobile", "test-id"]),
         g("div", {
           ref_key: "contentRef",
-          ref: I,
+          ref: A,
           class: "select__content"
         }, [
-          a.multiple && h.value.length ? (r(), o("span", {
+          a.multiple && h.value.length ? (o(), c("span", {
             key: 0,
             ref_key: "chipsRef",
             ref: J,
             class: "select__chips"
           }, [
-            (r(!0), o(ie, null, ne(h.value, (t, i) => (r(), o("span", f({
+            (o(!0), c(ie, null, ne(h.value, (t, i) => (o(), c("span", f({
               key: t.value,
               "data-chip": "item",
               class: ["select__chip", {
                 "select__chip--measured": i >= m.value
               }],
               "aria-hidden": i >= m.value || void 0
-            }, { ref_for: !0 }, c(d)("chip", t.value)), [
-              N(e.$slots, "chip", {
+            }, { ref_for: !0 }, r(d)("chip", t.value)), [
+              D(e.$slots, "chip", {
                 option: t,
                 index: i
               }, () => [
-                t.avatar ? (r(), o("img", {
+                t.avatar ? (o(), c("img", {
                   key: 0,
                   class: "select__chip-avatar",
                   src: t.avatar,
                   alt: ""
-                }, null, 8, Xe)) : t.icon ? (r(), U(Me(t.icon), {
+                }, null, 8, Xe)) : t.icon ? (o(), q(Ie(t.icon), {
                   key: 1,
                   class: "select__chip-icon",
                   "aria-hidden": "true"
-                })) : R("", !0),
-                g("span", Ue, v(t.label), 1)
+                })) : C("", !0),
+                g("span", qe, v(t.label), 1)
               ], !0),
               g("button", f({
                 type: "button",
@@ -329,44 +335,44 @@ const Fe = ["disabled", "aria-labelledby", "aria-label", "aria-describedby"], Oe
                 disabled: a.disabled,
                 tabindex: i >= m.value ? -1 : void 0,
                 "aria-label": `Убрать ${t.label}`
-              }, { ref_for: !0 }, c(d)("chip-remove", t.value), {
-                onClick: Se((p) => ge(t.value), ["stop"])
+              }, { ref_for: !0 }, r(d)("chip-remove", t.value), {
+                onClick: Ae((p) => ge(t.value), ["stop"])
               }), [
-                V(c($e), {
+                B(r(Me), {
                   class: "select__chip-icon",
                   "aria-hidden": "true"
                 })
-              ], 16, je)
+              ], 16, Ue)
             ], 16, Le))), 128))
-          ], 512)) : R("", !0),
-          a.multiple && h.value.length ? (r(), o("span", f({
+          ], 512)) : C("", !0),
+          a.multiple && h.value.length ? (o(), c("span", f({
             key: 1,
             ref_key: "counterRef",
             ref: Q,
-            class: ["select__chip select__chip--counter", { "select__chip--measured": !S.value }],
-            "aria-hidden": !S.value || void 0
-          }, c(d)("chip-counter")), " +" + v(S.value || 1), 17, qe)) : M.value ? (r(), o("span", f({
+            class: ["select__chip select__chip--counter", { "select__chip--measured": !E.value }],
+            "aria-hidden": !E.value || void 0
+          }, r(d)("chip-counter")), " +" + v(E.value || 1), 17, je)) : M.value ? (o(), c("span", f({
             key: 2,
             class: "select__value"
-          }, c(d)("value")), [
-            N(e.$slots, "value", {
+          }, r(d)("value")), [
+            D(e.$slots, "value", {
               option: h.value[0],
               displayValue: M.value
             }, () => [
-              j(v(M.value), 1)
+              U(v(M.value), 1)
             ], !0)
-          ], 16)) : (r(), o("span", He, v(a.placeholder), 1))
+          ], 16)) : (o(), c("span", He, v(a.placeholder), 1))
         ], 512),
-        V(c(Ee), {
+        B(r(Ee), {
           class: "select__arrow",
           "aria-hidden": "true"
         })
       ], 16),
-      O.value ? (r(), o("p", f({
+      G.value ? (o(), c("p", f({
         key: 1,
         id: K,
         class: "select__message"
-      }, c(d)("message")), v(O.value), 17)) : R("", !0)
+      }, r(d)("message")), v(G.value), 17)) : C("", !0)
     ], 16));
   }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@profitliga/ui",
-	"version": "2.0.2",
+	"version": "2.0.3",
 	"author": "Profit League<dev@pr-lg.ru>",
 	"license": "MIT",
 	"description": "Vue 3 UI component library with TypeScript and SCSS",