@profitliga/ui 2.0.1 → 2.0.2

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 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 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"], Ue = { class: "select__chip-label" }, je = ["disabled", "tabindex", "aria-label", "onClick"], qe = ["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__ */ re({
     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__ */ 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
+    })), ue = u(() => {
+      const { class: e, style: l, ...t } = B;
       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 = 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;
       return e == null ? [] : Array.isArray(e) ? e : [e];
-    }), g = u(
+    }), h = 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(
+    ), M = u(
+      () => h.value.map((e) => e.label).join(", ")
+    ), S = u(
+      () => Math.max(0, h.value.length - m.value)
+    ), de = u(() => M.value || s.placeholder), O = 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 ?? F.value), ve = u(
+      () => n.value === -1 ? void 0 : `${A}-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) {
+    function k(e) {
       return y.value.includes(e);
     }
-    function O(e) {
+    function G(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) => G(l));
     }
-    function J() {
+    function Y() {
       for (let e = s.options.length - 1; e >= 0; e -= 1)
-        if (O(e)) return e;
+        if (G(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, G(i)) return i;
       return -1;
     }
-    function Y(e = 20) {
-      z(() => {
+    function ee(e = 20) {
+      L(() => {
         if (!b.value) return;
-        const l = V.value;
-        l && (l.focus(), document.activeElement === l) || e > 0 && requestAnimationFrame(() => Y(e - 1));
+        const l = D.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 = k(e.value) ? y.value.filter((t) => t !== e.value) : [...y.value, e.value];
+          x.value = l, w("change", l);
         } else
-          R.value = e.value, x("change", e.value), b.value = !1;
-        x("select", e);
+          x.value = e.value, w("change", e.value), b.value = !1;
+        w("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);
+      x.value = l, w("change", l);
     }
-    function G() {
+    function W() {
       if (!s.multiple) return;
-      const e = A.value, l = K.value;
+      const e = I.value, l = J.value;
       if (!e || !l) return;
       const t = Array.from(
         l.querySelectorAll('[data-chip="item"]')
@@ -151,55 +151,55 @@ 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 = S.value ? (Q.value?.offsetWidth ?? 0) + p : 0, ke = e.clientWidth - ye;
+      let ae = 0, z = 0;
+      for (const _e of t) {
+        const se = ae + (z ? i : 0) + _e.offsetWidth;
+        if (se > ke) break;
+        ae = se, z += 1;
       }
-      m.value = Math.max(W, 1);
+      m.value = Math.max(z, 1);
     }
-    let E;
-    we(() => {
-      const e = H.value;
-      e && (B.value = e.getBoundingClientRect().width, z(G), E = new ResizeObserver((l) => {
+    let $;
+    Ae(() => {
+      const e = P.value;
+      e && (F.value = e.getBoundingClientRect().width, L(W), $ = 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 && (F.value = t.borderBoxSize?.[0]?.inlineSize ?? e.getBoundingClientRect().width);
+        W();
+      }), $.observe(e), I.value && $.observe(I.value));
+    }), Ie(() => $?.disconnect()), T(
+      () => h.value.map((e) => e.value).join("|"),
       () => {
-        m.value = Number.MAX_SAFE_INTEGER, z(G);
+        m.value = Number.MAX_SAFE_INTEGER, L(W);
       }
     );
-    let ee = null;
+    let le = null;
     return T(b, (e) => {
-      e ? (ee = document.activeElement, i.value = -1) : (i.value = -1, ee?.focus());
-    }), T(V, (e) => {
-      e && b.value && Y();
+      e ? (le = document.activeElement, n.value = -1) : (n.value = -1, le?.focus());
+    }), T(D, (e) => {
+      e && b.value && ee();
     }), T(
       () => 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) => (r(), o("div", f({ class: be.value }, { ...oe.value, ...c(d)("root") }), [
+      a.label ? (r(), o("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: q
+      }, c(d)("label")), v(a.label), 17)) : R("", !0),
+      g("div", f({
         ref_key: "fieldRef",
-        ref: H,
+        ref: P,
         class: "select__field"
-      }, r(d)("field")), [
-        $(r(Te), {
+      }, c(d)("field")), [
+        V(c(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 +207,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": A,
           "test-id": a.testId
         }, {
-          trigger: L(({ props: t }) => [
-            p("button", f({
-              id: U,
+          trigger: X(({ props: t }) => [
+            g("button", f({
+              id: q,
               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": O.value ? K : void 0
             }, {
               ...t,
-              ...re.value,
-              ...r(d)("trigger")
+              ...ue.value,
+              ...c(d)("trigger")
             }), [
-              $(Ve, null, {
-                default: L(() => [
-                  Ae(v(oe.value), 1)
+              V(Be, null, {
+                default: X(() => [
+                  j(v(de.value), 1)
                 ]),
                 _: 1
               })
-            ], 16, De)
+            ], 16, Fe)
           ]),
-          default: L(() => [
-            p("div", {
-              id: C,
+          default: X(() => [
+            g("div", {
+              id: A,
               ref_key: "listRef",
-              ref: V,
+              ref: D,
               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}`,
+              (r(!0), o(ie, null, ne(a.options, (t, i) => (r(), o("div", f({
+                id: `${A}-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": k(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)
+              }, { ref_for: !0 }, c(d)("option", t.value), {
+                onClick: (p) => te(t),
+                onMouseenter: (p) => he(i, t.disabled)
               }), [
-                a.multiple ? (c(), X(Be, {
+                a.multiple ? (r(), U(De, {
                   key: 0,
-                  checked: M(t.value),
+                  checked: k(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"])) : (r(), U(c(Ve), {
                   key: 1,
-                  checked: M(t.value),
+                  checked: k(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)
+                N(e.$slots, "option", {
+                  option: t,
+                  selected: k(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))
+                ], !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,
+          ref: I,
           class: "select__content"
         }, [
-          a.multiple && g.value.length ? (c(), o("span", {
+          a.multiple && h.value.length ? (r(), o("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({
+            (r(!0), o(ie, null, ne(h.value, (t, i) => (r(), o("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
-            }, { 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({
+              "aria-hidden": i >= m.value || void 0
+            }, { ref_for: !0 }, c(d)("chip", t.value)), [
+              N(e.$slots, "chip", {
+                option: t,
+                index: i
+              }, () => [
+                t.avatar ? (r(), o("img", {
+                  key: 0,
+                  class: "select__chip-avatar",
+                  src: t.avatar,
+                  alt: ""
+                }, null, 8, Xe)) : t.icon ? (r(), U(Me(t.icon), {
+                  key: 1,
+                  class: "select__chip-icon",
+                  "aria-hidden": "true"
+                })) : R("", !0),
+                g("span", Ue, 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"])
+              }, { ref_for: !0 }, c(d)("chip-remove", t.value), {
+                onClick: Se((p) => ge(t.value), ["stop"])
               }), [
-                $(r(Ee), {
+                V(c($e), {
                   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, je)
+            ], 16, Le))), 128))
+          ], 512)) : R("", !0),
+          a.multiple && h.value.length ? (r(), o("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": !S.value }],
+            "aria-hidden": !S.value || void 0
+          }, c(d)("chip-counter")), " +" + v(S.value || 1), 17, qe)) : M.value ? (r(), o("span", f({
             key: 2,
             class: "select__value"
-          }, r(d)("value")), v(D.value), 17)) : (c(), o("span", qe, v(a.placeholder), 1))
+          }, c(d)("value")), [
+            N(e.$slots, "value", {
+              option: h.value[0],
+              displayValue: M.value
+            }, () => [
+              j(v(M.value), 1)
+            ], !0)
+          ], 16)) : (r(), o("span", He, v(a.placeholder), 1))
         ], 512),
-        $(r(Se), {
+        V(c(Ee), {
           class: "select__arrow",
           "aria-hidden": "true"
         })
       ], 16),
-      F.value ? (c(), o("p", f({
+      O.value ? (r(), o("p", f({
         key: 1,
-        id: q,
+        id: K,
         class: "select__message"
-      }, r(d)("message")), v(F.value), 17)) : k("", !0)
+      }, c(d)("message")), v(O.value), 17)) : R("", !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.2",
 	"author": "Profit League<dev@pr-lg.ru>",
 	"license": "MIT",
 	"description": "Vue 3 UI component library with TypeScript and SCSS",