@profitliga/ui 2.0.5 → 2.0.7

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

@@ -1,27 +1,27 @@
-import { defineComponent as W, useModel as Y, useId as _, computed as b, useTemplateRef as T, ref as ee, watch as te, onBeforeUnmount as oe, unref as t, openBlock as s, createBlock as w, createSlots as ie, withCtx as m, createElementVNode as d, createElementBlock as u, mergeProps as n, toDisplayString as N, createCommentVNode as c, renderSlot as f, normalizeProps as se, guardReactiveProps as ae, Fragment as ne, normalizeStyle as re, resolveDynamicComponent as x, createTextVNode as le, createVNode as de, mergeModels as A } from "vue";
-import { X as ue } from "@lucide/vue";
-import { breakpoints as ce } from "../../../utils/breakpoints.util.js";
-import { onClickOutside as fe } from "../../../utils/onClickOutside.util.js";
-import { useBodyScroll as ve } from "../../../utils/useBodyScroll.util.js";
-import { useFocusTrap as me } from "../../../utils/useFocusTrap.util.js";
+import { defineComponent as Y, useModel as ee, useId as te, computed as g, useTemplateRef as E, ref as oe, watch as N, onBeforeUnmount as ie, unref as t, openBlock as s, createBlock as w, createSlots as se, withCtx as m, createElementVNode as d, createElementBlock as u, mergeProps as r, toDisplayString as x, createCommentVNode as c, renderSlot as f, normalizeProps as ae, guardReactiveProps as re, Fragment as ne, normalizeStyle as le, resolveDynamicComponent as K, createTextVNode as de, createVNode as ue, mergeModels as V } from "vue";
+import { X as ce } from "@lucide/vue";
+import { breakpoints as fe } from "../../../utils/breakpoints.util.js";
+import { onClickOutside as ve } from "../../../utils/onClickOutside.util.js";
+import { useBodyScroll as me } from "../../../utils/useBodyScroll.util.js";
+import { useFocusTrap as ye } from "../../../utils/useFocusTrap.util.js";
 import pe from "../BottomSheet/BottomSheet.vue.js";
-import { ANIMATION_DURATION_MS as K } from "../shared/animation.const.js";
-import ye from "../shared/Portal.vue.js";
-import { useDelayedVisibility as be } from "../shared/useDelayedVisibility.util.js";
+import { ANIMATION_DURATION_MS as q } from "../shared/animation.const.js";
+import be from "../shared/Portal.vue.js";
+import { useDelayedVisibility as ge } from "../shared/useDelayedVisibility.util.js";
 import { useLayerZIndex as we } from "../shared/useLayerZIndex.util.js";
-import { useTestId as ge } from "../shared/useTestId.util.js";
-import { useTriggerAria as ke } from "../shared/useTriggerAria.util.js";
-import he from "../shared/VisuallyHidden.vue.js";
-const $e = { class: "drawer-mobile" }, Ie = {
+import { useTestId as ke } from "../shared/useTestId.util.js";
+import { useTriggerAria as he } from "../shared/useTriggerAria.util.js";
+import $e from "../shared/VisuallyHidden.vue.js";
+const Ie = { class: "drawer-mobile" }, Ce = {
   key: 1,
   class: "drawer-mobile__divider"
-}, Ce = ["data-state"], Oe = ["aria-describedby", "data-state"], Pe = { class: "drawer-content__header" }, De = ["aria-label"], Se = {
+}, Oe = ["data-state"], Pe = ["aria-describedby", "data-state"], De = { class: "drawer-content__header" }, Ee = ["aria-label"], Se = {
   key: 0,
   class: "drawer-content__divider"
-}, Ue = /* @__PURE__ */ W({
+}, Ze = /* @__PURE__ */ Y({
   inheritAttrs: !1,
   __name: "Drawer",
-  props: /* @__PURE__ */ A({
+  props: /* @__PURE__ */ V({
     position: { default: "right" },
     title: { default: void 0 },
     closeButton: { default: () => ({ enabled: !0 }) },
@@ -37,100 +37,103 @@ const $e = { class: "drawer-mobile" }, Ie = {
     open: { type: Boolean, default: !1 },
     openModifiers: {}
   }),
-  emits: /* @__PURE__ */ A(["escapeKeyDown", "pointerDownOutside"], ["update:open"]),
-  setup(o, { expose: V, emit: q }) {
-    const i = o, g = q, r = Y(o, "open"), S = ce.smaller(i.breakpointMobile), k = _(), v = `drawer-title-${k}`, h = `drawer-content-${k}`, B = `drawer-body-${k}`, a = ge(() => i.testId), L = b(() => ({
+  emits: /* @__PURE__ */ V(["escapeKeyDown", "pointerDownOutside"], ["update:open"]),
+  setup(o, { expose: L, emit: F }) {
+    const i = o, k = F, n = ee(o, "open"), S = fe.smaller(i.breakpointMobile), h = te(), v = `drawer-title-${h}`, $ = `drawer-content-${h}`, B = `drawer-body-${h}`, a = ke(() => i.testId), U = g(() => ({
       "aria-haspopup": "dialog",
-      "aria-expanded": r.value,
-      "aria-controls": r.value ? h : void 0
-    })), E = b(() => i.title?.as ?? "h2"), F = b(
+      "aria-expanded": n.value,
+      "aria-controls": n.value ? $ : void 0
+    })), R = g(() => i.title?.as ?? "h2"), Z = g(
       () => i.position === "left" || i.position === "right" ? { width: `${i.width}px` } : { height: `${i.height}px` }
-    ), z = T("triggerRef"), $ = T("contentRef");
-    ke({
+    ), z = E("triggerRef"), I = E("contentRef"), M = E("layerRef");
+    he({
       host: () => z.value,
-      isOpen: () => r.value,
-      contentId: () => h,
+      isOpen: () => n.value,
+      contentId: () => $,
       hasPopup: () => "dialog"
     });
-    const { lockScroll: U, unlockScroll: Z } = ve(), I = me(() => $.value), C = we(), H = b(
-      () => i.zIndex === "auto" ? C.zIndex.value : i.zIndex
-    ), O = ee(!1);
+    const { lockScroll: H, unlockScroll: X } = me(), C = ye(() => I.value), y = we(), _ = g(
+      () => i.zIndex === "auto" ? y.zIndex.value : i.zIndex
+    ), O = oe(!1);
     async function p(e) {
       if (!i.beforeClose) {
-        r.value = !1;
+        n.value = !1;
         return;
       }
       if (!O.value) {
         O.value = !0;
         try {
-          await i.beforeClose(e) && (r.value = !1);
+          await i.beforeClose(e) && (n.value = !1);
         } finally {
           O.value = !1;
         }
       }
     }
     function P(e) {
-      e.key === "Escape" && (g("escapeKeyDown", e), e.defaultPrevented || p("escapeKey"));
+      e.key === "Escape" && (k("escapeKeyDown", e), e.defaultPrevented || p("escapeKey"));
     }
-    function X(e) {
-      g("pointerDownOutside", e), !i.disableOutsidePointerEvents && !e.defaultPrevented && p("outsidePointer");
+    function j(e) {
+      k("pointerDownOutside", e), !i.disableOutsidePointerEvents && !e.defaultPrevented && p("outsidePointer");
     }
-    function R(e, l) {
+    function T(e, l) {
       e.defaultPrevented || !i.beforeClose || (e.preventDefault(), p(l));
     }
-    function j(e) {
-      g("escapeKeyDown", e), R(e, "escapeKey");
-    }
     function G(e) {
-      g("pointerDownOutside", e), !i.disableOutsidePointerEvents && R(e, "outsidePointer");
+      k("escapeKeyDown", e), T(e, "escapeKey");
+    }
+    function J(e) {
+      k("pointerDownOutside", e), !i.disableOutsidePointerEvents && T(e, "outsidePointer");
     }
-    const J = b(() => r.value && !S.value), { visible: Q, dataState: M } = be(
-      J,
-      K,
+    const Q = g(() => n.value && !S.value), { visible: W, dataState: A } = ge(
+      Q,
+      q,
       {
         onOpen: () => {
-          C.acquire(), U(), I.activate({ focusDelayMs: K }), document.addEventListener("keydown", P);
+          y.acquire(), H(), C.activate({ focusDelayMs: q }), document.addEventListener("keydown", P);
         },
         onCloseStart: () => {
-          I.deactivate(), document.removeEventListener("keydown", P);
+          C.deactivate(), document.removeEventListener("keydown", P);
         },
         onCloseEnd: () => {
-          Z(), C.release();
+          X(), y.release();
         }
       }
     );
+    N(M, (e) => y.registerElement(e));
     let D;
-    return te($, (e) => {
-      D?.(), D = e ? fe(e, X) : void 0;
-    }), oe(() => {
-      D?.(), document.removeEventListener("keydown", P), I.deactivate();
-    }), V({
+    return N(I, (e) => {
+      D?.(), D = e ? ve(e, j, {
+        ignore: () => y.elementsAbove()
+      }) : void 0;
+    }), ie(() => {
+      D?.(), document.removeEventListener("keydown", P), C.deactivate();
+    }), L({
       requestClose: (e = "programmatic") => p(e)
     }), (e, l) => t(S) ? (s(), w(t(pe), {
       key: 0,
-      open: r.value,
-      "onUpdate:open": l[0] || (l[0] = (y) => r.value = y),
+      open: n.value,
+      "onUpdate:open": l[0] || (l[0] = (b) => n.value = b),
       "z-index": o.zIndex,
       "disable-outside-pointer-events": o.disableOutsidePointerEvents,
       "disable-swipe-to-close": !!o.beforeClose,
       "labelled-by": o.title?.text && !e.$slots.title ? v : void 0,
       "test-id": o.testId,
-      onEscapeKeyDown: j,
-      onPointerDownOutside: G
-    }, ie({
+      onEscapeKeyDown: G,
+      onPointerDownOutside: J
+    }, se({
       default: m(() => [
-        d("div", $e, [
-          o.title?.text && !e.$slots.title ? (s(), u("div", n({
+        d("div", Ie, [
+          o.title?.text && !e.$slots.title ? (s(), u("div", r({
             key: 0,
             id: v,
             class: "drawer-mobile__title"
-          }, t(a)("title")), N(o.title.text), 17)) : c("", !0),
-          o.divider ? (s(), u("div", Ie)) : c("", !0),
-          d("div", n({ class: "drawer-mobile__content" }, t(a)("body")), [
+          }, t(a)("title")), x(o.title.text), 17)) : c("", !0),
+          o.divider ? (s(), u("div", Ce)) : c("", !0),
+          d("div", r({ class: "drawer-mobile__content" }, t(a)("body")), [
             f(e.$slots, "title", {}, void 0, !0),
             f(e.$slots, "default", {}, void 0, !0)
           ], 16),
-          e.$slots.actions ? (s(), u("div", n({
+          e.$slots.actions ? (s(), u("div", r({
             key: 2,
             class: "drawer-mobile__actions"
           }, t(a)("actions")), [
@@ -142,55 +145,57 @@ const $e = { class: "drawer-mobile" }, Ie = {
     }, [
       e.$slots.trigger ? {
         name: "trigger",
-        fn: m((y) => [
-          f(e.$slots, "trigger", se(ae(y)), void 0, !0)
+        fn: m((b) => [
+          f(e.$slots, "trigger", ae(re(b)), void 0, !0)
         ]),
         key: "0"
       } : void 0
     ]), 1032, ["open", "z-index", "disable-outside-pointer-events", "disable-swipe-to-close", "labelled-by", "test-id"])) : (s(), u(ne, { key: 1 }, [
-      e.$slots.trigger ? (s(), u("span", n({
+      e.$slots.trigger ? (s(), u("span", r({
         key: 0,
         ref_key: "triggerRef",
         ref: z,
         class: "drawer-trigger"
       }, t(a)("trigger"), {
-        onClick: l[1] || (l[1] = (y) => r.value = !0)
+        onClick: l[1] || (l[1] = (b) => n.value = !0)
       }), [
-        f(e.$slots, "trigger", { props: L.value }, void 0, !0)
+        f(e.$slots, "trigger", { props: U.value }, void 0, !0)
       ], 16)) : c("", !0),
-      t(Q) ? (s(), w(ye, { key: 1 }, {
+      t(W) ? (s(), w(be, { key: 1 }, {
         default: m(() => [
           d("div", {
+            ref_key: "layerRef",
+            ref: M,
             class: "drawer-layer",
-            style: re({ zIndex: H.value })
+            style: le({ zIndex: _.value })
           }, [
-            d("div", n({
+            d("div", r({
               class: "overlay drawer-overlay",
-              "data-state": t(M)
-            }, t(a)("overlay")), null, 16, Ce),
-            d("div", n({
-              id: h,
+              "data-state": t(A)
+            }, t(a)("overlay")), null, 16, Oe),
+            d("div", r({
+              id: $,
               ref_key: "contentRef",
-              ref: $,
+              ref: I,
               role: "dialog",
               "aria-modal": "true",
               "aria-labelledby": v,
               "aria-describedby": e.$slots.default ? B : void 0,
               class: ["drawer-content", `drawer-content--${o.position}`],
-              "data-state": t(M),
-              style: F.value
+              "data-state": t(A),
+              style: Z.value
             }, { ...e.$attrs, ...t(a)("content") }), [
-              d("div", Pe, [
-                o.title?.text ? (s(), w(x(E.value), n({
+              d("div", De, [
+                o.title?.text ? (s(), w(K(R.value), r({
                   key: 0,
                   id: v,
                   class: "drawer-content__title"
                 }, t(a)("title")), {
                   default: m(() => [
-                    le(N(o.title.text), 1)
+                    de(x(o.title.text), 1)
                   ]),
                   _: 1
-                }, 16)) : e.$slots.title ? (s(), w(x(E.value), n({
+                }, 16)) : e.$slots.title ? (s(), w(K(R.value), r({
                   key: 1,
                   id: v,
                   class: "drawer-content__title"
@@ -199,37 +204,37 @@ const $e = { class: "drawer-mobile" }, Ie = {
                     f(e.$slots, "title", {}, void 0, !0)
                   ]),
                   _: 3
-                }, 16)) : (s(), w(he, { key: 2 }, {
+                }, 16)) : (s(), w($e, { key: 2 }, {
                   default: m(() => [
                     d("h2", { id: v }, "Боковая панель")
                   ]),
                   _: 1
                 })),
-                o.closeButton?.enabled ? (s(), u("button", n({
+                o.closeButton?.enabled ? (s(), u("button", r({
                   key: 3,
                   type: "button",
                   class: "drawer-content__close",
                   "aria-label": o.closeButton.label ?? "Закрыть"
                 }, t(a)("close"), {
-                  onClick: l[2] || (l[2] = (y) => p("closeButton"))
+                  onClick: l[2] || (l[2] = (b) => p("closeButton"))
                 }), [
-                  de(t(ue), { size: 20 })
-                ], 16, De)) : c("", !0)
+                  ue(t(ce), { size: 20 })
+                ], 16, Ee)) : c("", !0)
               ]),
               o.divider ? (s(), u("div", Se)) : c("", !0),
-              d("div", n({
+              d("div", r({
                 id: B,
                 class: "drawer-content__wrapper"
               }, t(a)("body")), [
                 f(e.$slots, "default", {}, void 0, !0)
               ], 16),
-              e.$slots.actions ? (s(), u("div", n({
+              e.$slots.actions ? (s(), u("div", r({
                 key: 1,
                 class: "drawer-content__actions"
               }, t(a)("actions")), [
                 f(e.$slots, "actions", {}, void 0, !0)
               ], 16)) : c("", !0)
-            ], 16, Oe)
+            ], 16, Pe)
           ], 4)
         ]),
         _: 3
@@ -238,5 +243,5 @@ const $e = { class: "drawer-mobile" }, Ie = {
   }
 });
 export {
-  Ue as default
+  Ze as default
 };

package/dist/components/v2/shared/useLayerZIndex.util.d.ts

@@ -17,5 +17,15 @@ export interface UseLayerZIndexReturn {
     zIndex: Ref<number | undefined>;
     acquire: () => void;
     release: () => void;
+    /** Элемент контента слоя — источник для чужого `elementsAbove()`. */
+    registerElement: (el: HTMLElement | null) => void;
+    /**
+     * DOM-элементы слоёв, открытых позже текущего (значит, лежащих выше по
+     * z-index) — например, ConfirmDialog поверх BottomSheet. Передавать в
+     * `onClickOutside` как `ignore`: клик по вложенному слою не должен
+     * считаться «кликом вне» текущего — иначе закрытие вложенного окна
+     * утаскивало бы за собой и родителя.
+     */
+    elementsAbove: () => HTMLElement[];
 }
 export declare function useLayerZIndex(): UseLayerZIndexReturn;

package/dist/components/v2/shared/useLayerZIndex.util.js

@@ -1,18 +1,30 @@
-import { ref as u, onBeforeUnmount as a } from "vue";
-const i = 1e3, f = 10;
-let n = 0, o = 0;
-function l() {
-  const e = u();
-  function r() {
-    e.value === void 0 && (n++, o++, e.value = i + o * f);
+import { ref as a, onBeforeUnmount as d } from "vue";
+const v = 1e3, x = 10;
+let i = 0, u = 0;
+const o = [];
+function m() {
+  const t = a();
+  let e;
+  function f() {
+    t.value === void 0 && (i++, u++, t.value = v + u * x, e = { zIndex: t.value, el: null }, o.push(e));
   }
-  function t() {
-    e.value !== void 0 && (e.value = void 0, n = Math.max(0, n - 1), n === 0 && (o = 0));
+  function l() {
+    if (t.value !== void 0 && (t.value = void 0, i = Math.max(0, i - 1), i === 0 && (u = 0), e)) {
+      const n = o.indexOf(e);
+      n !== -1 && o.splice(n, 1), e = void 0;
+    }
   }
-  return a(t), { zIndex: e, acquire: r, release: t };
+  function s(n) {
+    e && (e.el = n);
+  }
+  function c() {
+    const n = e;
+    return n ? o.filter((r) => r !== n && r.zIndex > n.zIndex).map((r) => r.el).filter((r) => r !== null) : [];
+  }
+  return d(l), { zIndex: t, acquire: f, release: l, registerElement: s, elementsAbove: c };
 }
 export {
-  i as LAYER_BASE_Z_INDEX,
-  f as LAYER_Z_INDEX_STEP,
-  l as useLayerZIndex
+  v as LAYER_BASE_Z_INDEX,
+  x as LAYER_Z_INDEX_STEP,
+  m as useLayerZIndex
 };

package/dist/utils/onClickOutside.util.js

@@ -1,30 +1,36 @@
-import { toValue as f, unref as p } from "vue";
-const u = /* @__PURE__ */ new WeakMap();
-function d(t) {
-  const r = p(t);
-  return r?.$el ?? r;
+import { toValue as p, unref as g } from "vue";
+const s = /* @__PURE__ */ new WeakMap();
+let c = 0;
+const E = 500;
+function l(t) {
+  const o = g(t);
+  return o?.$el ?? o;
 }
-function g(t) {
-  return typeof t == "string" ? document.querySelector(t) : d(t);
+function L(t) {
+  return typeof t == "string" ? document.querySelector(t) : l(t);
 }
-function w(t, r, l = {}) {
-  const n = g(t);
+function y(t, o, d = {}) {
+  const n = L(t);
   if (!n) return () => {
   };
-  const i = u.get(n);
-  i && (i(), u.delete(n));
-  const o = (s) => {
-    const c = s.target instanceof Node ? s.target : null;
-    if (!c) return;
-    const m = (f(l.ignore) ?? []).map((e) => typeof e == "string" ? document.querySelector(e) : d(e)).filter((e) => e != null);
-    n.contains(c) || m.some((e) => e.contains(c)) || r(s);
+  const a = s.get(n);
+  a && (a(), s.delete(n));
+  const u = (r) => {
+    if (r.type === "touchstart")
+      c = r.timeStamp;
+    else if (c > 0 && r.timeStamp - c < E)
+      return;
+    const i = r.target instanceof Node ? r.target : null;
+    if (!i) return;
+    const f = (p(d.ignore) ?? []).map((e) => typeof e == "string" ? document.querySelector(e) : l(e)).filter((e) => e != null);
+    n.contains(i) || f.some((e) => e.contains(i)) || o(r);
   };
-  document.addEventListener("mousedown", o, { capture: !0 }), document.addEventListener("touchstart", o, { capture: !0 });
-  const a = () => {
-    document.removeEventListener("mousedown", o, { capture: !0 }), document.removeEventListener("touchstart", o, { capture: !0 }), u.delete(n);
+  document.addEventListener("mousedown", u, { capture: !0 }), document.addEventListener("touchstart", u, { capture: !0 });
+  const m = () => {
+    document.removeEventListener("mousedown", u, { capture: !0 }), document.removeEventListener("touchstart", u, { capture: !0 }), s.delete(n);
   };
-  return u.set(n, a), a;
+  return s.set(n, m), m;
 }
 export {
-  w as onClickOutside
+  y as onClickOutside
 };

package/package.json

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