@profitliga/ui 2.0.6 → 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 g, 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 A, createCommentVNode as c, renderSlot as f, normalizeProps as se, guardReactiveProps as ae, Fragment as ne, normalizeStyle as re, resolveDynamicComponent as N, createTextVNode as le, createVNode as de, mergeModels as x } 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 { useLayerZIndex as ge } from "../shared/useLayerZIndex.util.js";
-import { useTestId as we } 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 { 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 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"], Ee = {
+}, 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__ */ x({
+  props: /* @__PURE__ */ V({
     position: { default: "right" },
     title: { default: void 0 },
     closeButton: { default: () => ({ enabled: !0 }) },
@@ -37,102 +37,103 @@ const $e = { class: "drawer-mobile" }, Ie = {
     open: { type: Boolean, default: !1 },
     openModifiers: {}
   }),
-  emits: /* @__PURE__ */ x(["escapeKeyDown", "pointerDownOutside"], ["update:open"]),
-  setup(o, { expose: V, emit: q }) {
-    const i = o, k = q, r = Y(o, "open"), E = ce.smaller(i.breakpointMobile), h = _(), v = `drawer-title-${h}`, $ = `drawer-content-${h}`, S = `drawer-body-${h}`, a = we(() => i.testId), L = g(() => ({
+  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 ? $ : void 0
-    })), B = g(() => i.title?.as ?? "h2"), F = g(
+      "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"), I = T("contentRef");
-    ke({
+    ), z = E("triggerRef"), I = E("contentRef"), M = E("layerRef");
+    he({
       host: () => z.value,
-      isOpen: () => r.value,
+      isOpen: () => n.value,
       contentId: () => $,
       hasPopup: () => "dialog"
     });
-    const { lockScroll: U, unlockScroll: Z } = ve(), C = me(() => I.value), p = ge(), H = g(
-      () => i.zIndex === "auto" ? p.zIndex.value : i.zIndex
-    ), O = ee(!1);
-    async function y(e) {
+    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" && (k("escapeKeyDown", e), e.defaultPrevented || y("escapeKey"));
-    }
-    function X(e) {
-      k("pointerDownOutside", e), !i.disableOutsidePointerEvents && !e.defaultPrevented && y("outsidePointer");
-    }
-    function R(e, l) {
-      e.defaultPrevented || !i.beforeClose || (e.preventDefault(), y(l));
+      e.key === "Escape" && (k("escapeKeyDown", e), e.defaultPrevented || p("escapeKey"));
     }
     function j(e) {
-      k("escapeKeyDown", e), R(e, "escapeKey");
+      k("pointerDownOutside", e), !i.disableOutsidePointerEvents && !e.defaultPrevented && p("outsidePointer");
+    }
+    function T(e, l) {
+      e.defaultPrevented || !i.beforeClose || (e.preventDefault(), p(l));
     }
     function G(e) {
-      k("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 = g(() => r.value && !E.value), { visible: Q, dataState: M } = be(
-      J,
-      K,
+    const Q = g(() => n.value && !S.value), { visible: W, dataState: A } = ge(
+      Q,
+      q,
       {
         onOpen: () => {
-          p.acquire(), U(), C.activate({ focusDelayMs: K }), document.addEventListener("keydown", P);
+          y.acquire(), H(), C.activate({ focusDelayMs: q }), document.addEventListener("keydown", P);
         },
         onCloseStart: () => {
           C.deactivate(), document.removeEventListener("keydown", P);
         },
         onCloseEnd: () => {
-          Z(), p.release();
+          X(), y.release();
         }
       }
     );
+    N(M, (e) => y.registerElement(e));
     let D;
-    return te(I, (e) => {
-      p.registerElement(e), D?.(), D = e ? fe(e, X, {
-        ignore: () => p.elementsAbove()
+    return N(I, (e) => {
+      D?.(), D = e ? ve(e, j, {
+        ignore: () => y.elementsAbove()
       }) : void 0;
-    }), oe(() => {
+    }), ie(() => {
       D?.(), document.removeEventListener("keydown", P), C.deactivate();
-    }), V({
-      requestClose: (e = "programmatic") => y(e)
-    }), (e, l) => t(E) ? (s(), w(t(pe), {
+    }), 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] = (b) => r.value = b),
+      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")), A(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")), [
@@ -145,54 +146,56 @@ const $e = { class: "drawer-mobile" }, Ie = {
       e.$slots.trigger ? {
         name: "trigger",
         fn: m((b) => [
-          f(e.$slots, "trigger", se(ae(b)), void 0, !0)
+          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] = (b) => 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({
+              "data-state": t(A)
+            }, t(a)("overlay")), null, 16, Oe),
+            d("div", r({
               id: $,
               ref_key: "contentRef",
               ref: I,
               role: "dialog",
               "aria-modal": "true",
               "aria-labelledby": v,
-              "aria-describedby": e.$slots.default ? S : void 0,
+              "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(N(B.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(A(o.title.text), 1)
+                    de(x(o.title.text), 1)
                   ]),
                   _: 1
-                }, 16)) : e.$slots.title ? (s(), w(N(B.value), n({
+                }, 16)) : e.$slots.title ? (s(), w(K(R.value), r({
                   key: 1,
                   id: v,
                   class: "drawer-content__title"
@@ -201,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] = (b) => y("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", Ee)) : c("", !0),
-              d("div", n({
-                id: S,
+              o.divider ? (s(), u("div", Se)) : c("", !0),
+              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
@@ -240,5 +243,5 @@ const $e = { class: "drawer-mobile" }, Ie = {
   }
 });
 export {
-  Ue as default
+  Ze as default
 };

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.6",
+	"version": "2.0.7",
 	"author": "Profit League<dev@pr-lg.ru>",
 	"license": "MIT",
 	"description": "Vue 3 UI component library with TypeScript and SCSS",