@profitliga/ui 2.0.2 → 2.0.4

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

@@ -1,23 +1,24 @@
-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 Se, useId as we, useAttrs as Ce, computed as d, ref as V, useTemplateRef as S, onMounted as $e, nextTick as B, onBeforeUnmount as xe, watch as w, openBlock as n, createElementBlock as u, mergeProps as f, unref as o, createTextVNode as N, toDisplayString as v, createCommentVNode as y, createElementVNode as g, createVNode as q, withCtx as X, Fragment as ie, renderList as re, createBlock as U, renderSlot as D, resolveDynamicComponent as Ie, withModifiers as Ae, mergeModels as ne } 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";
-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 = {
+import { useTestId as Be } from "../shared/useTestId.util.js";
+import Ne from "../shared/VisuallyHidden.vue.js";
+import qe from "./SelectCheckMarker.vue.js";
+const De = ["disabled", "aria-labelledby", "aria-label", "aria-describedby", "aria-required"], Fe = ["aria-label", "aria-multiselectable", "aria-activedescendant"], Oe = ["id", "aria-selected", "aria-disabled", "onClick", "onMouseenter"], Ge = { class: "select-list__label" }, We = {
   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 = {
+}, ze = ["aria-hidden"], Le = ["src"], Xe = { 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__ */ ne({
     options: {},
     multiple: { type: Boolean, default: !1 },
     label: { default: void 0 },
+    required: { type: Boolean, default: !1 },
     placeholder: { default: "Выберите значение" },
     supportText: { default: void 0 },
     errorText: { default: void 0 },
@@ -30,7 +31,7 @@ const Fe = ["disabled", "aria-labelledby", "aria-label", "aria-describedby"], Oe
     side: { default: "bottom" },
     sideOffset: { default: 4 },
     ariaLabel: { default: void 0 },
-    breakpointMobile: { default: "sm" },
+    breakpointMobile: { type: [String, Boolean], default: "sm" },
     testId: { default: void 0 }
   }, {
     modelValue: {
@@ -38,28 +39,28 @@ 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
-    })), ue = u(() => {
-      const { class: e, style: l, ...t } = B;
+  emits: /* @__PURE__ */ ne(["change", "select"], ["update:modelValue"]),
+  setup(a, { emit: oe }) {
+    const s = a, C = oe, $ = Se(a, "modelValue"), x = we(), j = `select-trigger-${x}`, H = `select-label-${x}`, k = `select-list-${x}`, K = `select-message-${x}`, c = Be(() => s.testId), F = Ce(), ue = d(() => ({
+      class: F.class,
+      style: F.style
+    })), ce = d(() => {
+      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 = S("fieldRef"), I = S("listRef"), A = S("contentRef"), J = S("chipsRef"), Q = S("counterRef"), m = V(Number.MAX_SAFE_INTEGER), O = V(0), r = V(-1), _ = d(() => {
+      const e = $.value;
       return e == null ? [] : Array.isArray(e) ? e : [e];
-    }), h = u(
-      () => s.options.filter((e) => y.value.includes(e.value))
-    ), M = u(
+    }), h = d(
+      () => s.options.filter((e) => _.value.includes(e.value))
+    ), M = d(
       () => h.value.map((e) => e.label).join(", ")
-    ), S = u(
+    ), E = d(
       () => Math.max(0, h.value.length - m.value)
-    ), de = u(() => M.value || s.placeholder), O = u(
+    ), de = d(() => M.value || s.placeholder), G = d(
       () => 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}`
-    ), be = u(() => [
+    ), fe = d(() => s.width ?? O.value), ve = d(
+      () => r.value === -1 ? void 0 : `${k}-option-${r.value}`
+    ), be = d(() => [
       "select",
       `select--${s.size}`,
       {
@@ -69,19 +70,19 @@ const Fe = ["disabled", "aria-labelledby", "aria-label", "aria-describedby"], Oe
         "select--multiple": s.multiple
       }
     ]);
-    function k(e) {
-      return y.value.includes(e);
+    function R(e) {
+      return _.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,36 +90,36 @@ 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(() => {
+      B(() => {
         if (!b.value) return;
-        const l = D.value;
+        const l = I.value;
         l && (l.focus(), document.activeElement === l) || e > 0 && requestAnimationFrame(() => ee(e - 1));
       });
     }
     function he(e, l) {
-      l || (n.value = e);
+      l || (r.value = e);
     }
     function pe(e) {
       switch (e.key) {
         case "ArrowDown":
-          e.preventDefault(), n.value = Z(n.value, 1);
+          e.preventDefault(), r.value = Z(r.value, 1);
           break;
         case "ArrowUp":
-          e.preventDefault(), n.value = n.value === -1 ? Y() : Z(n.value, -1);
+          e.preventDefault(), r.value = r.value === -1 ? Y() : Z(r.value, -1);
           break;
         case "Home":
-          e.preventDefault(), n.value = me();
+          e.preventDefault(), r.value = me();
           break;
         case "End":
-          e.preventDefault(), n.value = Y();
+          e.preventDefault(), r.value = Y();
           break;
         case "Enter":
         case " ": {
-          const l = s.options[n.value];
+          const l = s.options[r.value];
           if (!l) break;
           e.preventDefault(), te(l);
           break;
@@ -128,21 +129,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 = R(e.value) ? _.value.filter((t) => t !== e.value) : [..._.value, e.value];
+          $.value = l, C("change", l);
         } else
-          x.value = e.value, w("change", e.value), b.value = !1;
-        w("select", e);
+          $.value = e.value, C("change", e.value), b.value = !1;
+        C("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 = _.value.filter((t) => t !== e);
+      $.value = l, C("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 +152,65 @@ 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, B(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, B(z);
       }
     );
     let le = null;
-    return T(b, (e) => {
-      e ? (le = document.activeElement, n.value = -1) : (n.value = -1, le?.focus());
-    }), T(D, (e) => {
+    return w(b, (e) => {
+      e ? (le = document.activeElement, r.value = -1) : (r.value = -1, le?.focus());
+    }), w(I, (e) => {
       e && b.value && ee();
-    }), T(
+    }), w(r, (e) => {
+      e !== -1 && B(() => {
+        I.value?.querySelector(
+          `#${CSS.escape(`${k}-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) => (n(), u("div", f({ class: be.value }, { ...ue.value, ...o(c)("root") }), [
+      a.label ? (n(), u("label", f({
         key: 0,
         id: H,
         class: "select__label",
-        for: q
-      }, c(d)("label")), v(a.label), 17)) : R("", !0),
+        for: j
+      }, o(c)("label")), [
+        N(v(a.label) + " ", 1),
+        a.required ? (n(), u("span", f({
+          key: 0,
+          class: "select__required",
+          "aria-hidden": "true"
+        }, o(c)("required")), "*", 16)) : y("", !0)
+      ], 16)) : y("", !0),
       g("div", f({
         ref_key: "fieldRef",
         ref: P,
         class: "select__field"
-      }, c(d)("field")), [
-        V(c(Te), {
+      }, o(c)("field")), [
+        q(o(Te), {
           open: b.value,
           "onUpdate:open": l[0] || (l[0] = (t) => b.value = t),
           width: fe.value,
@@ -207,36 +221,38 @@ 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": k,
           "test-id": a.testId
         }, {
           trigger: X(({ props: t }) => [
             g("button", f({
-              id: q,
+              id: j,
               type: "button",
+              role: "combobox",
               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,
+              "aria-required": a.required || void 0
             }, {
               ...t,
-              ...ue.value,
-              ...c(d)("trigger")
+              ...ce.value,
+              ...o(c)("trigger")
             }), [
-              V(Be, null, {
+              q(Ne, null, {
                 default: X(() => [
-                  j(v(de.value), 1)
+                  N(v(de.value), 1)
                 ]),
                 _: 1
               })
-            ], 16, Fe)
+            ], 16, De)
           ]),
           default: X(() => [
             g("div", {
-              id: A,
+              id: k,
               ref_key: "listRef",
-              ref: D,
+              ref: I,
               role: "listbox",
               tabindex: "0",
               "aria-label": a.label ?? a.ariaLabel,
@@ -245,83 +261,83 @@ 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}`,
+              (n(!0), u(ie, null, re(a.options, (t, i) => (n(), u("div", f({
+                id: `${k}-option-${i}`,
                 key: t.value,
                 role: "option",
                 class: ["select-list__option", {
-                  "select-list__option--active": n.value === i,
+                  "select-list__option--active": r.value === i,
                   "select-list__option--disabled": t.disabled
                 }],
-                "aria-selected": k(t.value),
+                "aria-selected": R(t.value),
                 "aria-disabled": t.disabled || void 0
-              }, { ref_for: !0 }, c(d)("option", t.value), {
+              }, { ref_for: !0 }, o(c)("option", t.value), {
                 onClick: (p) => te(t),
                 onMouseenter: (p) => he(i, t.disabled)
               }), [
-                a.multiple ? (r(), U(De, {
+                a.multiple ? (n(), U(qe, {
                   key: 0,
-                  checked: k(t.value),
+                  checked: R(t.value),
                   disabled: t.disabled,
-                  state: n.value === i ? "hover" : "default"
-                }, null, 8, ["checked", "disabled", "state"])) : (r(), U(c(Ve), {
+                  state: r.value === i ? "hover" : "default"
+                }, null, 8, ["checked", "disabled", "state"])) : (n(), U(o(Ve), {
                   key: 1,
-                  checked: k(t.value),
+                  checked: R(t.value),
                   disabled: t.disabled,
-                  state: n.value === i ? "hover" : "default"
+                  state: r.value === i ? "hover" : "default"
                 }, null, 8, ["checked", "disabled", "state"])),
-                N(e.$slots, "option", {
+                D(e.$slots, "option", {
                   option: t,
-                  selected: k(t.value),
-                  active: n.value === i,
+                  selected: R(t.value),
+                  active: r.value === i,
                   index: i
                 }, () => [
-                  g("span", We, v(t.label), 1)
+                  g("span", Ge, v(t.label), 1)
                 ], !0)
-              ], 16, Ge))), 128)),
-              a.options.length ? R("", !0) : (r(), o("p", ze, [
-                N(e.$slots, "empty", {}, () => [
-                  j(v(Ke))
+              ], 16, Oe))), 128)),
+              a.options.length ? y("", !0) : (n(), u("p", We, [
+                D(e.$slots, "empty", {}, () => [
+                  N(v(Ke))
                 ], !0)
               ]))
-            ], 40, Oe)
+            ], 40, Fe)
           ]),
           _: 3
         }, 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 ? (n(), u("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({
+            (n(!0), u(ie, null, re(h.value, (t, i) => (n(), u("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 }, o(c)("chip", t.value)), [
+              D(e.$slots, "chip", {
                 option: t,
                 index: i
               }, () => [
-                t.avatar ? (r(), o("img", {
+                t.avatar ? (n(), u("img", {
                   key: 0,
                   class: "select__chip-avatar",
                   src: t.avatar,
                   alt: ""
-                }, null, 8, Xe)) : t.icon ? (r(), U(Me(t.icon), {
+                }, null, 8, Le)) : t.icon ? (n(), U(Ie(t.icon), {
                   key: 1,
                   class: "select__chip-icon",
                   "aria-hidden": "true"
-                })) : R("", !0),
-                g("span", Ue, v(t.label), 1)
+                })) : y("", !0),
+                g("span", Xe, v(t.label), 1)
               ], !0),
               g("button", f({
                 type: "button",
@@ -329,44 +345,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 }, o(c)("chip-remove", t.value), {
+                onClick: Ae((p) => ge(t.value), ["stop"])
               }), [
-                V(c($e), {
+                q(o(Me), {
                   class: "select__chip-icon",
                   "aria-hidden": "true"
                 })
-              ], 16, je)
-            ], 16, Le))), 128))
-          ], 512)) : R("", !0),
-          a.multiple && h.value.length ? (r(), o("span", f({
+              ], 16, Ue)
+            ], 16, ze))), 128))
+          ], 512)) : y("", !0),
+          a.multiple && h.value.length ? (n(), u("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
+          }, o(c)("chip-counter")), " +" + v(E.value || 1), 17, je)) : M.value ? (n(), u("span", f({
             key: 2,
             class: "select__value"
-          }, c(d)("value")), [
-            N(e.$slots, "value", {
+          }, o(c)("value")), [
+            D(e.$slots, "value", {
               option: h.value[0],
               displayValue: M.value
             }, () => [
-              j(v(M.value), 1)
+              N(v(M.value), 1)
             ], !0)
-          ], 16)) : (r(), o("span", He, v(a.placeholder), 1))
+          ], 16)) : (n(), u("span", He, v(a.placeholder), 1))
         ], 512),
-        V(c(Ee), {
+        q(o(Ee), {
           class: "select__arrow",
           "aria-hidden": "true"
         })
       ], 16),
-      O.value ? (r(), o("p", f({
+      G.value ? (n(), u("p", f({
         key: 1,
         id: K,
         class: "select__message"
-      }, c(d)("message")), v(O.value), 17)) : R("", !0)
+      }, o(c)("message")), v(G.value), 17)) : y("", !0)
     ], 16));
   }
 });

package/dist/components/v2/Toast/Toast.types.d.ts

@@ -1,4 +1,4 @@
-import { TBreakpoints } from '../../../types/global.types';
+import { TBreakpointMobile } from '../../../types/global.types';
 export type ToastVariant = 'info' | 'success' | 'warning' | 'error';
 export type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
 /** Направление свайпа, которым тост закрывается. `none` — свайп отключён. */
@@ -55,7 +55,7 @@ export interface ToasterProps {
     limit?: number;
     zIndex?: number;
     /** Брейкпоинт, ниже которого стек занимает всю ширину экрана. */
-    breakpointMobile?: TBreakpoints;
+    breakpointMobile?: TBreakpointMobile;
     /** Направление свайпа. По умолчанию выводится из `position`. */
     swipeDirection?: ToastSwipeDirection;
     /** Доступное имя области с уведомлениями (`aria-label`). */

package/dist/components/v2/Toast/Toaster.css

@@ -1 +1 @@
-.toaster[data-v-6890b6d4]{width:23.75rem;max-width:calc(100vw - var(--toaster-offset) * 2);z-index:var(--toaster-z-index);pointer-events:none;flex-direction:column;gap:.5rem;display:flex;position:fixed}.toaster[data-v-6890b6d4]>*{pointer-events:auto}.toaster--top[data-v-6890b6d4]{top:var(--toaster-offset)}.toaster--bottom[data-v-6890b6d4]{bottom:var(--toaster-offset);flex-direction:column-reverse}.toaster--left[data-v-6890b6d4]{left:var(--toaster-offset)}.toaster--right[data-v-6890b6d4]{right:var(--toaster-offset)}.toaster--center[data-v-6890b6d4]{left:50%;transform:translate(-50%)}.toaster--mobile[data-v-6890b6d4]{width:auto;max-width:none;left:var(--toaster-offset);right:var(--toaster-offset);transform:none}.toast-enter-from[data-v-6890b6d4],.toast-leave-to[data-v-6890b6d4]{opacity:0;transform:var(--toaster-slide)}.toast-enter-active[data-v-6890b6d4],.toast-leave-active[data-v-6890b6d4],.toast-move[data-v-6890b6d4]{transition:transform var(--animation-duration) ease, opacity var(--animation-duration) ease}.toast-leave-active[data-v-6890b6d4]{width:100%;position:absolute}
+.toaster[data-v-ad45c627]{width:23.75rem;max-width:calc(100vw - var(--toaster-offset) * 2);z-index:var(--toaster-z-index);pointer-events:none;flex-direction:column;gap:.5rem;display:flex;position:fixed}.toaster[data-v-ad45c627]>*{pointer-events:auto}.toaster--top[data-v-ad45c627]{top:var(--toaster-offset)}.toaster--bottom[data-v-ad45c627]{bottom:var(--toaster-offset);flex-direction:column-reverse}.toaster--left[data-v-ad45c627]{left:var(--toaster-offset)}.toaster--right[data-v-ad45c627]{right:var(--toaster-offset)}.toaster--center[data-v-ad45c627]{left:50%;transform:translate(-50%)}.toaster--mobile[data-v-ad45c627]{width:auto;max-width:none;left:var(--toaster-offset);right:var(--toaster-offset);transform:none}.toast-enter-from[data-v-ad45c627],.toast-leave-to[data-v-ad45c627]{opacity:0;transform:var(--toaster-slide)}.toast-enter-active[data-v-ad45c627],.toast-leave-active[data-v-ad45c627],.toast-move[data-v-ad45c627]{transition:transform var(--animation-duration) ease, opacity var(--animation-duration) ease}.toast-leave-active[data-v-ad45c627]{width:100%;position:absolute}

package/dist/components/v2/Toast/Toaster.vue.d.ts

@@ -1,12 +1,12 @@
 import { ToasterProps, ToastSwipeDirection, ToastPosition } from './Toast.types';
 import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
-import { TBreakpoints } from '../../../types/global.types';
+import { TBreakpointMobile } from '../../../types/global.types';
 declare const _default: DefineComponent<ToasterProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ToasterProps> & Readonly<{}>, {
     label: string;
     offset: number;
     position: ToastPosition;
     zIndex: number;
-    breakpointMobile: TBreakpoints;
+    breakpointMobile: TBreakpointMobile;
     swipeDirection: ToastSwipeDirection;
     testId: string;
     limit: number;

package/dist/components/v2/Toast/Toaster.vue.js

@@ -2,7 +2,7 @@ import './Toaster.css';
 import o from "./Toaster.vue2.js";
 /* empty css             */
 import t from "../../../_virtual/_plugin-vue_export-helper.js";
-const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-6890b6d4"]]);
+const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-ad45c627"]]);
 export {
   p as default
 };

package/dist/components/v2/Toast/Toaster.vue2.js

@@ -1,27 +1,27 @@
-import { defineComponent as S, ref as x, computed as o, onMounted as y, onBeforeUnmount as L, watch as C, openBlock as i, createBlock as b, withCtx as T, createElementBlock as w, mergeProps as B, unref as a, createVNode as D, TransitionGroup as z, Fragment as E, renderList as Y, createCommentVNode as O } from "vue";
-import { breakpoints as P } from "../../../utils/breakpoints.util.js";
-import W from "../shared/Portal.vue.js";
+import { defineComponent as F, ref as k, computed as o, onMounted as x, onBeforeUnmount as L, watch as B, openBlock as i, createBlock as b, withCtx as T, createElementBlock as w, mergeProps as C, unref as a, createVNode as D, TransitionGroup as z, Fragment as E, renderList as Y, createCommentVNode as O } from "vue";
+import P from "../shared/Portal.vue.js";
+import { useIsMobile as W } from "../shared/useIsMobile.util.js";
 import { useTestId as X } from "../shared/useTestId.util.js";
 import A from "./Toast.vue.js";
 import { TOAST_DEFAULT_LIMIT as N, useToast as U } from "./useToast.js";
-const V = ["aria-label"], G = 10, Z = /* @__PURE__ */ S({
+const V = ["aria-label"], G = 10, Z = /* @__PURE__ */ F({
   __name: "Toaster",
   props: {
     position: { default: "top-right" },
     offset: { default: 24 },
     limit: { default: N },
     zIndex: { default: 9999 },
-    breakpointMobile: { default: "sm" },
+    breakpointMobile: { type: [String, Boolean], default: "sm" },
     swipeDirection: { default: void 0 },
     label: { default: "Уведомления" },
     closeLabel: { default: void 0 },
     testId: { default: void 0 }
   },
   setup(r) {
-    const s = x([]), t = r, { toasts: h, dismiss: M, pause: f, resume: v, setLimit: _ } = U(), g = X(() => t.testId), l = /* @__PURE__ */ Symbol("toaster"), I = o(
+    const s = k([]), t = r, { toasts: h, dismiss: M, pause: f, resume: v, setLimit: g } = U(), I = X(() => t.testId), l = /* @__PURE__ */ Symbol("toaster"), _ = o(
       () => s.value[0] === l
     );
-    y(() => {
+    x(() => {
       s.value = [...s.value, l], s.value.length > 1 && console.warn(
         "[Toaster] Смонтировано несколько Toaster — очередь тостов общая, поэтому лишние экземпляры не отрисовываются. Оставьте один Toaster на приложение."
       );
@@ -30,9 +30,9 @@ const V = ["aria-label"], G = 10, Z = /* @__PURE__ */ S({
         (m) => m !== l
       );
     });
-    const u = P.smaller(t.breakpointMobile), c = o(
+    const u = W(t.breakpointMobile), c = o(
       () => t.position.startsWith("bottom") ? "bottom" : "top"
-    ), d = o(() => t.position.endsWith("left") ? "left" : t.position.endsWith("center") ? "center" : "right"), p = o(() => t.swipeDirection ? t.swipeDirection : u.value || d.value === "center" ? c.value === "top" ? "up" : "down" : d.value === "left" ? "left" : "right"), $ = o(() => {
+    ), d = o(() => t.position.endsWith("left") ? "left" : t.position.endsWith("center") ? "center" : "right"), p = o(() => t.swipeDirection ? t.swipeDirection : u.value || d.value === "center" ? c.value === "top" ? "up" : "down" : d.value === "left" ? "left" : "right"), S = o(() => {
       switch (p.value) {
         case "right":
           return "translateX(120%)";
@@ -45,25 +45,25 @@ const V = ["aria-label"], G = 10, Z = /* @__PURE__ */ S({
         default:
           return c.value === "top" ? "translateY(-120%)" : "translateY(120%)";
       }
-    }), k = o(() => [
+    }), $ = o(() => [
       "toaster",
       `toaster--${c.value}`,
       `toaster--${d.value}`,
       { "toaster--mobile": u.value }
-    ]), F = o(() => ({
+    ]), y = o(() => ({
       "--toaster-offset": `${u.value ? G : t.offset}px`,
       "--toaster-z-index": String(t.zIndex),
-      "--toaster-slide": $.value
+      "--toaster-slide": S.value
     }));
-    return C(() => t.limit, _, { immediate: !0 }), (m, K) => (i(), b(W, null, {
+    return B(() => t.limit, g, { immediate: !0 }), (m, K) => (i(), b(P, null, {
       default: T(() => [
-        I.value ? (i(), w("div", B({
+        _.value ? (i(), w("div", C({
           key: 0,
-          class: k.value,
-          style: F.value,
+          class: $.value,
+          style: y.value,
           role: "region",
           "aria-label": r.label
-        }, a(g)("viewport")), [
+        }, a(I)("viewport")), [
           D(z, { name: "toast" }, {
             default: T(() => [
               (i(!0), w(E, null, Y(a(h), (e) => (i(), b(A, {

package/dist/components/v2/Tooltip/Tooltip.css

@@ -1 +1 @@
-.tooltip-trigger[data-v-ac7b22ad]{width:fit-content;display:inline-block}
+.tooltip-trigger[data-v-06f091c9]{width:fit-content;display:inline-block}