@v-c/trigger 0.0.9 → 0.0.11

package/dist/hooks/useDelay.cjs

@@ -1 +1,27 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("vue");function r(){const e=o.ref(null),u=()=>{e.value&&(clearTimeout(e.value),e.value=null)},n=(l,t)=>{u(),t===0?l():e.value=setTimeout(()=>{l()},t*1e3)};return o.onBeforeUnmount(()=>{u()}),n}exports.default=r;
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+function useDelay() {
+  const delayRef = vue.ref(null);
+  const clearDelay = () => {
+    if (delayRef.value) {
+      clearTimeout(delayRef.value);
+      delayRef.value = null;
+    }
+  };
+  const delayInvoke = (callback, delay) => {
+    clearDelay();
+    if (delay === 0) {
+      callback();
+    } else {
+      delayRef.value = setTimeout(() => {
+        callback();
+      }, delay * 1e3);
+    }
+  };
+  vue.onBeforeUnmount(() => {
+    clearDelay();
+  });
+  return delayInvoke;
+}
+exports.default = useDelay;

package/dist/hooks/useDelay.js

@@ -1,16 +1,27 @@
-import { ref as t, onBeforeUnmount as a } from "vue";
-function f() {
-  const e = t(null), l = () => {
-    e.value && (clearTimeout(e.value), e.value = null);
-  }, n = (o, u) => {
-    l(), u === 0 ? o() : e.value = setTimeout(() => {
-      o();
-    }, u * 1e3);
+import { ref, onBeforeUnmount } from "vue";
+function useDelay() {
+  const delayRef = ref(null);
+  const clearDelay = () => {
+    if (delayRef.value) {
+      clearTimeout(delayRef.value);
+      delayRef.value = null;
+    }
   };
-  return a(() => {
-    l();
-  }), n;
+  const delayInvoke = (callback, delay) => {
+    clearDelay();
+    if (delay === 0) {
+      callback();
+    } else {
+      delayRef.value = setTimeout(() => {
+        callback();
+      }, delay * 1e3);
+    }
+  };
+  onBeforeUnmount(() => {
+    clearDelay();
+  });
+  return delayInvoke;
 }
 export {
-  f as default
+  useDelay as default
 };

package/dist/hooks/useOffsetStyle.cjs

@@ -1 +1,36 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const m=require("vue");function d(u,a,s,o,i,r,v,c){const t="auto";return m.computed(()=>{const e=u.value?{}:{left:"-1000vw",top:"-1000vh",right:t,bottom:t};if(!u.value&&(a.value||!s.value)){const{points:l}=o.value??{},n=o.value?.dynamicInset||o.value?._experimental?.dynamicInset,f=n&&l?.[0]?.[1]==="r",p=n&&l?.[0]?.[0]==="b";f?(e.right=`${i.value}px`,e.left=t):(e.left=`${v.value}px`,e.right=t),p?(e.bottom=`${r.value}px`,e.top=t):(e.top=`${c.value}px`,e.bottom=t)}return e})}exports.default=d;
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+function useOffsetStyle(isMobile, ready, open, align, offsetR, offsetB, offsetX, offsetY) {
+  const AUTO = "auto";
+  return vue.computed(() => {
+    const offsetStyle = isMobile.value ? {} : {
+      left: "-1000vw",
+      top: "-1000vh",
+      right: AUTO,
+      bottom: AUTO
+    };
+    if (!isMobile.value && (ready.value || !open.value)) {
+      const { points } = align.value ?? {};
+      const dynamicInset = align.value?.dynamicInset || align.value?._experimental?.dynamicInset;
+      const alignRight = dynamicInset && points?.[0]?.[1] === "r";
+      const alignBottom = dynamicInset && points?.[0]?.[0] === "b";
+      if (alignRight) {
+        offsetStyle.right = `${offsetR.value}px`;
+        offsetStyle.left = AUTO;
+      } else {
+        offsetStyle.left = `${offsetX.value}px`;
+        offsetStyle.right = AUTO;
+      }
+      if (alignBottom) {
+        offsetStyle.bottom = `${offsetB.value}px`;
+        offsetStyle.top = AUTO;
+      } else {
+        offsetStyle.top = `${offsetY.value}px`;
+        offsetStyle.bottom = AUTO;
+      }
+    }
+    return offsetStyle;
+  });
+}
+exports.default = useOffsetStyle;

package/dist/hooks/useOffsetStyle.js

@@ -1,20 +1,36 @@
-import { computed as m } from "vue";
-function d(l, u, s, o, f, v, i, p) {
-  const e = "auto";
-  return m(() => {
-    const t = l.value ? {} : {
+import { computed } from "vue";
+function useOffsetStyle(isMobile, ready, open, align, offsetR, offsetB, offsetX, offsetY) {
+  const AUTO = "auto";
+  return computed(() => {
+    const offsetStyle = isMobile.value ? {} : {
       left: "-1000vw",
       top: "-1000vh",
-      right: e,
-      bottom: e
+      right: AUTO,
+      bottom: AUTO
     };
-    if (!l.value && (u.value || !s.value)) {
-      const { points: a } = o.value ?? {}, n = o.value?.dynamicInset || o.value?._experimental?.dynamicInset, r = n && a?.[0]?.[1] === "r", c = n && a?.[0]?.[0] === "b";
-      r ? (t.right = `${f.value}px`, t.left = e) : (t.left = `${i.value}px`, t.right = e), c ? (t.bottom = `${v.value}px`, t.top = e) : (t.top = `${p.value}px`, t.bottom = e);
+    if (!isMobile.value && (ready.value || !open.value)) {
+      const { points } = align.value ?? {};
+      const dynamicInset = align.value?.dynamicInset || align.value?._experimental?.dynamicInset;
+      const alignRight = dynamicInset && points?.[0]?.[1] === "r";
+      const alignBottom = dynamicInset && points?.[0]?.[0] === "b";
+      if (alignRight) {
+        offsetStyle.right = `${offsetR.value}px`;
+        offsetStyle.left = AUTO;
+      } else {
+        offsetStyle.left = `${offsetX.value}px`;
+        offsetStyle.right = AUTO;
+      }
+      if (alignBottom) {
+        offsetStyle.bottom = `${offsetB.value}px`;
+        offsetStyle.top = AUTO;
+      } else {
+        offsetStyle.top = `${offsetY.value}px`;
+        offsetStyle.bottom = AUTO;
+      }
     }
-    return t;
+    return offsetStyle;
   });
 }
 export {
-  d as default
+  useOffsetStyle as default
 };

package/dist/hooks/useWatch.cjs

@@ -1 +1,37 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("vue"),s=require("../util.cjs");function L(n,t,l,o,v){a.watch([n,t,l],async(m,h,d)=>{if(await a.nextTick(),n.value&&t.value&&l.value){let e=function(){o(),v()};const f=t.value,i=l.value,E=s.collectScroller(f),S=s.collectScroller(i),r=s.getWin(i),u=new Set([r,...E,...S]);u.forEach(c=>{c.addEventListener("scroll",e,{passive:!0})}),r.addEventListener("resize",e,{passive:!0}),o(),d(()=>{u.forEach(c=>{c.removeEventListener("scroll",e),r.removeEventListener("resize",e)})})}})}exports.default=L;
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const util = require("../util.cjs");
+function useWatch(open, target, popup, onAlign, onScroll) {
+  vue.watch([open, target, popup], async (_n, _o, onCleanup) => {
+    await vue.nextTick();
+    if (open.value && target.value && popup.value) {
+      let notifyScroll = function() {
+        onAlign();
+        onScroll();
+      };
+      const targetElement = target.value;
+      const popupElement = popup.value;
+      const targetScrollList = util.collectScroller(targetElement);
+      const popupScrollList = util.collectScroller(popupElement);
+      const win = util.getWin(popupElement);
+      const mergedList = /* @__PURE__ */ new Set([
+        win,
+        ...targetScrollList,
+        ...popupScrollList
+      ]);
+      mergedList.forEach((scroller) => {
+        scroller.addEventListener("scroll", notifyScroll, { passive: true });
+      });
+      win.addEventListener("resize", notifyScroll, { passive: true });
+      onAlign();
+      onCleanup(() => {
+        mergedList.forEach((scroller) => {
+          scroller.removeEventListener("scroll", notifyScroll);
+          win.removeEventListener("resize", notifyScroll);
+        });
+      });
+    }
+  });
+}
+exports.default = useWatch;

package/dist/hooks/useWatch.js

@@ -1,26 +1,37 @@
-import { watch as L, nextTick as d } from "vue";
-import { collectScroller as a, getWin as S } from "../util.js";
-function y(s, t, r, c, v) {
-  L([s, t, r], async (h, p, u) => {
-    if (await d(), s.value && t.value && r.value) {
-      let e = function() {
-        c(), v();
+import { watch, nextTick } from "vue";
+import { collectScroller, getWin } from "../util.js";
+function useWatch(open, target, popup, onAlign, onScroll) {
+  watch([open, target, popup], async (_n, _o, onCleanup) => {
+    await nextTick();
+    if (open.value && target.value && popup.value) {
+      let notifyScroll = function() {
+        onAlign();
+        onScroll();
       };
-      const f = t.value, l = r.value, m = a(f), E = a(l), n = S(l), i = /* @__PURE__ */ new Set([
-        n,
-        ...m,
-        ...E
+      const targetElement = target.value;
+      const popupElement = popup.value;
+      const targetScrollList = collectScroller(targetElement);
+      const popupScrollList = collectScroller(popupElement);
+      const win = getWin(popupElement);
+      const mergedList = /* @__PURE__ */ new Set([
+        win,
+        ...targetScrollList,
+        ...popupScrollList
       ]);
-      i.forEach((o) => {
-        o.addEventListener("scroll", e, { passive: !0 });
-      }), n.addEventListener("resize", e, { passive: !0 }), c(), u(() => {
-        i.forEach((o) => {
-          o.removeEventListener("scroll", e), n.removeEventListener("resize", e);
+      mergedList.forEach((scroller) => {
+        scroller.addEventListener("scroll", notifyScroll, { passive: true });
+      });
+      win.addEventListener("resize", notifyScroll, { passive: true });
+      onAlign();
+      onCleanup(() => {
+        mergedList.forEach((scroller) => {
+          scroller.removeEventListener("scroll", notifyScroll);
+          win.removeEventListener("resize", notifyScroll);
         });
       });
     }
   });
 }
 export {
-  y as default
+  useWatch as default
 };

package/dist/hooks/useWinClick.cjs

@@ -1 +1,67 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const x=require("@v-c/util"),D=require("@v-c/util/dist/Dom/shadow"),r=require("vue"),N=require("../util.cjs");function S(a,v,l,w,f,m,g,p){const d=r.shallowRef(a.value);r.watchEffect(()=>{d.value=a.value});const u=r.shallowRef(!1);r.watch([v,l,w,f,m],([L,s,i,R,E],_,P)=>{if(L&&i&&(!R||E)){const c=()=>{u.value=!1},e=n=>{d.value&&!g(n.composedPath?.()?.[0]||n.target)&&!u.value&&p(!1)},t=N.getWin(i);t.addEventListener("pointerdown",c,!0),t.addEventListener("mousedown",e,!0),t.addEventListener("contextmenu",e,!0);const o=D.getShadowRoot(s);if(o&&(o.addEventListener("mousedown",e,!0),o.addEventListener("contextmenu",e,!0)),process.env.NODE_ENV!=="production"&&s){const n=s.getRootNode?.(),q=i.getRootNode?.();x.warning(n===q,"trigger element and popup element should in same shadow root.")}P(()=>{t.removeEventListener("pointerdown",c,!0),t.removeEventListener("mousedown",e,!0),t.removeEventListener("contextmenu",e,!0),o&&(o.removeEventListener("mousedown",e,!0),o.removeEventListener("contextmenu",e,!0))})}});function h(){u.value=!0}return h}exports.default=S;
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const util$1 = require("@v-c/util");
+const shadow = require("@v-c/util/dist/Dom/shadow");
+const vue = require("vue");
+const util = require("../util.cjs");
+function useWinClick(open, clickToHide, targetEle, popupEle, mask, maskClosable, inPopupOrChild, triggerOpen) {
+  const openRef = vue.shallowRef(open.value);
+  vue.watchEffect(() => {
+    openRef.value = open.value;
+  });
+  const popupPointerDownRef = vue.shallowRef(false);
+  vue.watch(
+    [clickToHide, targetEle, popupEle, mask, maskClosable],
+    ([clickToHide2, targetEle2, popupEle2, mask2, maskClosable2], _o, onCleanup) => {
+      if (clickToHide2 && popupEle2 && (!mask2 || maskClosable2)) {
+        const onPointerDown = () => {
+          popupPointerDownRef.value = false;
+        };
+        const onTriggerClose = (e) => {
+          if (openRef.value && !inPopupOrChild(e.composedPath?.()?.[0] || e.target) && !popupPointerDownRef.value) {
+            triggerOpen(false);
+          }
+        };
+        const win = util.getWin(popupEle2);
+        win.addEventListener("pointerdown", onPointerDown, true);
+        win.addEventListener("mousedown", onTriggerClose, true);
+        win.addEventListener("contextmenu", onTriggerClose, true);
+        const targetShadowRoot = shadow.getShadowRoot(targetEle2);
+        if (targetShadowRoot) {
+          targetShadowRoot.addEventListener("mousedown", onTriggerClose, true);
+          targetShadowRoot.addEventListener("contextmenu", onTriggerClose, true);
+        }
+        if (process.env.NODE_ENV !== "production" && targetEle2) {
+          const targetRoot = targetEle2.getRootNode?.();
+          const popupRoot = popupEle2.getRootNode?.();
+          util$1.warning(
+            targetRoot === popupRoot,
+            `trigger element and popup element should in same shadow root.`
+          );
+        }
+        onCleanup(() => {
+          win.removeEventListener("pointerdown", onPointerDown, true);
+          win.removeEventListener("mousedown", onTriggerClose, true);
+          win.removeEventListener("contextmenu", onTriggerClose, true);
+          if (targetShadowRoot) {
+            targetShadowRoot.removeEventListener(
+              "mousedown",
+              onTriggerClose,
+              true
+            );
+            targetShadowRoot.removeEventListener(
+              "contextmenu",
+              onTriggerClose,
+              true
+            );
+          }
+        });
+      }
+    }
+  );
+  function onPopupPointerDown() {
+    popupPointerDownRef.value = true;
+  }
+  return onPopupPointerDown;
+}
+exports.default = useWinClick;

package/dist/hooks/useWinClick.js

@@ -1,50 +1,67 @@
-import { warning as D } from "@v-c/util";
-import { getShadowRoot as N } from "@v-c/util/dist/Dom/shadow";
-import { shallowRef as m, watchEffect as C, watch as S } from "vue";
-import { getWin as W } from "../util.js";
-function b(u, v, c, f, w, p, l, g) {
-  const a = m(u.value);
-  C(() => {
-    a.value = u.value;
+import { warning } from "@v-c/util";
+import { getShadowRoot } from "@v-c/util/dist/Dom/shadow";
+import { shallowRef, watchEffect, watch } from "vue";
+import { getWin } from "../util.js";
+function useWinClick(open, clickToHide, targetEle, popupEle, mask, maskClosable, inPopupOrChild, triggerOpen) {
+  const openRef = shallowRef(open.value);
+  watchEffect(() => {
+    openRef.value = open.value;
   });
-  const r = m(!1);
-  S(
-    [v, c, f, w, p],
-    ([E, i, s, R, h], _, x) => {
-      if (E && s && (!R || h)) {
-        const d = () => {
-          r.value = !1;
-        }, e = (n) => {
-          a.value && !l(n.composedPath?.()?.[0] || n.target) && !r.value && g(!1);
-        }, t = W(s);
-        t.addEventListener("pointerdown", d, !0), t.addEventListener("mousedown", e, !0), t.addEventListener("contextmenu", e, !0);
-        const o = N(i);
-        if (o && (o.addEventListener("mousedown", e, !0), o.addEventListener("contextmenu", e, !0)), process.env.NODE_ENV !== "production" && i) {
-          const n = i.getRootNode?.(), P = s.getRootNode?.();
-          D(
-            n === P,
-            "trigger element and popup element should in same shadow root."
+  const popupPointerDownRef = shallowRef(false);
+  watch(
+    [clickToHide, targetEle, popupEle, mask, maskClosable],
+    ([clickToHide2, targetEle2, popupEle2, mask2, maskClosable2], _o, onCleanup) => {
+      if (clickToHide2 && popupEle2 && (!mask2 || maskClosable2)) {
+        const onPointerDown = () => {
+          popupPointerDownRef.value = false;
+        };
+        const onTriggerClose = (e) => {
+          if (openRef.value && !inPopupOrChild(e.composedPath?.()?.[0] || e.target) && !popupPointerDownRef.value) {
+            triggerOpen(false);
+          }
+        };
+        const win = getWin(popupEle2);
+        win.addEventListener("pointerdown", onPointerDown, true);
+        win.addEventListener("mousedown", onTriggerClose, true);
+        win.addEventListener("contextmenu", onTriggerClose, true);
+        const targetShadowRoot = getShadowRoot(targetEle2);
+        if (targetShadowRoot) {
+          targetShadowRoot.addEventListener("mousedown", onTriggerClose, true);
+          targetShadowRoot.addEventListener("contextmenu", onTriggerClose, true);
+        }
+        if (process.env.NODE_ENV !== "production" && targetEle2) {
+          const targetRoot = targetEle2.getRootNode?.();
+          const popupRoot = popupEle2.getRootNode?.();
+          warning(
+            targetRoot === popupRoot,
+            `trigger element and popup element should in same shadow root.`
           );
         }
-        x(() => {
-          t.removeEventListener("pointerdown", d, !0), t.removeEventListener("mousedown", e, !0), t.removeEventListener("contextmenu", e, !0), o && (o.removeEventListener(
-            "mousedown",
-            e,
-            !0
-          ), o.removeEventListener(
-            "contextmenu",
-            e,
-            !0
-          ));
+        onCleanup(() => {
+          win.removeEventListener("pointerdown", onPointerDown, true);
+          win.removeEventListener("mousedown", onTriggerClose, true);
+          win.removeEventListener("contextmenu", onTriggerClose, true);
+          if (targetShadowRoot) {
+            targetShadowRoot.removeEventListener(
+              "mousedown",
+              onTriggerClose,
+              true
+            );
+            targetShadowRoot.removeEventListener(
+              "contextmenu",
+              onTriggerClose,
+              true
+            );
+          }
         });
       }
     }
   );
-  function L() {
-    r.value = !0;
+  function onPopupPointerDown() {
+    popupPointerDownRef.value = true;
   }
-  return L;
+  return onPopupPointerDown;
 }
 export {
-  b as default
+  useWinClick as default
 };