@profitliga/ui 2.0.1 → 2.0.3

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

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

package/dist/components/v2/Tooltip/Tooltip.vue.d.ts

@@ -25,11 +25,11 @@ declare const __VLS_component: DefineComponent<__VLS_PublicProps, {}, {}, {}, {}
     disabled: boolean;
     text: string;
     zIndex: number | "auto";
-    breakpointMobile: TBreakpoints;
     side: TooltipSide;
     sideOffset: number;
     align: TooltipAlign;
     alignOffset: number;
+    breakpointMobile: TBreakpoints;
     arrow: boolean;
     testId: string;
     maxWidth: number | string;

package/dist/components/v2/Tooltip/TooltipContent.vue.d.ts

@@ -24,11 +24,11 @@ declare const __VLS_component: DefineComponent<TooltipContentProps, {}, {}, {},
 }>, {
     text: string;
     zIndex: number | "auto";
-    breakpointMobile: TBreakpoints;
     side: TooltipSide;
     sideOffset: number;
     align: TooltipAlign;
     alignOffset: number;
+    breakpointMobile: TBreakpoints;
     arrow: boolean;
     testId: string;
     maxWidth: number | string;

package/package.json

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