@v-c/trigger 0.0.9 → 0.0.11

package/dist/UniqueProvider/index.js

@@ -1,153 +1,199 @@
-import { defineComponent as F, computed as a, shallowRef as v, ref as m, watch as O, createVNode as n } from "vue";
-import H from "@v-c/portal";
-import { classNames as g } from "@v-c/util";
-import { isDOM as l } from "@v-c/util/dist/Dom/findDOMNode";
-import { useTriggerContext as W, UniqueContextProvider as j, TriggerContextProvider as G } from "../context.js";
-import J from "../hooks/useAlign.js";
-import K from "../hooks/useDelay.js";
-import L from "../Popup/index.js";
-import { getAlignPopupClassName as Q } from "../util.js";
-import Z from "./UniqueContainer.js";
-import _ from "./useTargetState.js";
-const fe = /* @__PURE__ */ F((c, {
-  slots: A
+import { defineComponent, computed, shallowRef, ref, watch, createVNode } from "vue";
+import Portal from "@v-c/portal";
+import { classNames } from "@v-c/util";
+import { isDOM } from "@v-c/util/dist/Dom/findDOMNode";
+import { useTriggerContext, UniqueContextProvider, TriggerContextProvider } from "../context.js";
+import useAlign from "../hooks/useAlign.js";
+import useDelay from "../hooks/useDelay.js";
+import Popup from "../Popup/index.js";
+import { getAlignPopupClassName } from "../util.js";
+import UniqueContainer from "./UniqueContainer.js";
+import useTargetState from "./useTargetState.js";
+const UniqueProvider = /* @__PURE__ */ defineComponent((props, {
+  slots
 }) => {
-  const [d, s, i, M] = _(), e = a(() => !i.value || !c.postTriggerProps ? i.value : c.postTriggerProps(i.value)), p = v(null), C = m(null), V = v(null), E = (t) => {
-    if (!t)
+  const [trigger, open, options, onTargetVisibleChanged] = useTargetState();
+  const mergedOptions = computed(() => {
+    if (!options.value || !props.postTriggerProps) {
+      return options.value;
+    }
+    return props.postTriggerProps(options.value);
+  });
+  const popupEle = shallowRef(null);
+  const popupSize = ref(null);
+  const externalPopupRef = shallowRef(null);
+  const resolveToElement = (node) => {
+    if (!node) {
       return null;
-    if (l(t))
-      return t;
-    const o = t;
-    if (l(o?.$el))
-      return o.$el;
-    const r = o?.nativeElement;
-    if (l(r?.value))
-      return r.value;
-    if (l(r))
-      return r;
-    if (typeof o?.getElement == "function") {
-      const k = o.getElement();
-      if (l(k))
-        return k;
+    }
+    if (isDOM(node)) {
+      return node;
+    }
+    const exposed = node;
+    if (isDOM(exposed?.$el)) {
+      return exposed.$el;
+    }
+    const nativeEl = exposed?.nativeElement;
+    if (isDOM(nativeEl?.value)) {
+      return nativeEl.value;
+    }
+    if (isDOM(nativeEl)) {
+      return nativeEl;
+    }
+    if (typeof exposed?.getElement === "function") {
+      const el = exposed.getElement();
+      if (isDOM(el)) {
+        return el;
+      }
     }
     return null;
-  }, z = (t) => {
-    const o = E(t);
-    V.value = o, p.value !== o && (p.value = o);
-  }, P = v(), x = K(), D = (t, o) => {
-    P.value = o, x(() => {
-      d(t);
-    }, t.delay);
-  }, I = (t) => {
-    x(() => {
-      P.value?.() || d(!1);
-    }, t);
-  }, X = (t) => {
-    M(t);
-  }, [
-    y,
-    h,
-    N,
-    q,
-    w,
-    b,
-    R,
+  };
+  const setPopupRef = (node) => {
+    const element = resolveToElement(node);
+    externalPopupRef.value = element;
+    if (popupEle.value !== element) {
+      popupEle.value = element;
+    }
+  };
+  const isOpenRef = shallowRef();
+  const delayInvoke = useDelay();
+  const show = (showOptions, isOpen) => {
+    isOpenRef.value = isOpen;
+    delayInvoke(() => {
+      trigger(showOptions);
+    }, showOptions.delay);
+  };
+  const hide = (delay) => {
+    delayInvoke(() => {
+      if (isOpenRef.value?.()) {
+        return;
+      }
+      trigger(false);
+    }, delay);
+  };
+  const onVisibleChanged = (visible) => {
+    onTargetVisibleChanged(visible);
+  };
+  const [
+    ready,
+    offsetX,
+    offsetY,
+    offsetR,
+    offsetB,
+    arrowX,
+    arrowY,
     // scaleX - not used in UniqueProvider
     ,
     ,
     // scaleY - not used in UniqueProvider
-    u,
-    f
-  ] = J(
-    s,
-    p,
-    a(() => e.value?.target),
-    a(() => e.value?.popupPlacement),
-    a(() => e.value?.builtinPlacements || {}),
-    a(() => e.value?.popupAlign),
+    alignInfo,
+    onAlign
+  ] = useAlign(
+    open,
+    popupEle,
+    computed(() => mergedOptions.value?.target),
+    computed(() => mergedOptions.value?.popupPlacement),
+    computed(() => mergedOptions.value?.builtinPlacements || {}),
+    computed(() => mergedOptions.value?.popupAlign),
     void 0,
     // onPopupAlign
-    m(!1)
+    ref(false)
     // isMobile
-  ), S = a(() => {
-    if (!e.value)
+  );
+  const alignedClassName = computed(() => {
+    if (!mergedOptions.value) {
       return "";
-    const t = Q(e.value?.builtinPlacements || {}, e.value.prefixCls || "", u.value, !1);
-    return g(t, e.value?.getPopupClassNameFromAlign?.(u.value));
-  }), Y = {
-    show: D,
-    hide: I
+    }
+    const baseClassName = getAlignPopupClassName(mergedOptions.value?.builtinPlacements || {}, mergedOptions.value.prefixCls || "", alignInfo.value, false);
+    return classNames(baseClassName, mergedOptions.value?.getPopupClassNameFromAlign?.(alignInfo.value));
+  });
+  const contextValue = {
+    show,
+    hide
   };
-  O(() => e.value?.target, () => {
-    f();
+  watch(() => mergedOptions.value?.target, () => {
+    onAlign();
   }, {
-    immediate: !0
+    immediate: true
+  });
+  const onPrepare = () => {
+    onAlign();
+    return Promise.resolve();
+  };
+  const subPopupElements = ref({});
+  const parentContext = useTriggerContext();
+  const triggerContextValue = computed(() => {
+    return {
+      registerSubPopup: (id, subPopupEle) => {
+        if (subPopupEle) {
+          subPopupElements.value[id] = subPopupEle;
+        } else {
+          delete subPopupElements.value[id];
+        }
+        parentContext?.value?.registerSubPopup(id, subPopupEle);
+      }
+    };
   });
-  const B = () => (f(), Promise.resolve()), T = m({}), U = W(), $ = a(() => ({
-    registerSubPopup: (t, o) => {
-      o ? T.value[t] = o : delete T.value[t], U?.value?.registerSubPopup(t, o);
-    }
-  }));
   return () => {
-    const t = e?.value?.prefixCls;
-    return n(j, Y, {
-      default: () => [A?.default?.(), !!e.value && n(G, $.value, {
-        default: () => [n(L, {
-          ref: z,
-          portal: H,
-          prefixCls: t,
-          popup: e.value?.popup,
-          className: g(e.value?.popupClassName, S.value, `${t}-unique-controlled`),
-          style: e.value?.popupStyle,
-          target: e.value?.target,
-          open: s.value,
-          keepDom: !0,
-          fresh: !0,
-          autoDestroy: !1,
-          onVisibleChanged: X,
-          ready: y.value,
-          offsetX: h.value,
-          offsetY: N.value,
-          offsetR: q.value,
-          offsetB: w.value,
-          onAlign: f,
-          onPrepare: B,
-          onResize: (o) => {
-            C.value = {
-              width: o.offsetWidth,
-              height: o.offsetHeight
+    const prefixCls = mergedOptions?.value?.prefixCls;
+    return createVNode(UniqueContextProvider, contextValue, {
+      default: () => [slots?.default?.(), !!mergedOptions.value && createVNode(TriggerContextProvider, triggerContextValue.value, {
+        default: () => [createVNode(Popup, {
+          "ref": setPopupRef,
+          "portal": Portal,
+          "prefixCls": prefixCls,
+          "popup": mergedOptions.value?.popup,
+          "className": classNames(mergedOptions.value?.popupClassName, alignedClassName.value, `${prefixCls}-unique-controlled`),
+          "style": mergedOptions.value?.popupStyle,
+          "target": mergedOptions.value?.target,
+          "open": open.value,
+          "keepDom": true,
+          "fresh": true,
+          "autoDestroy": false,
+          "onVisibleChanged": onVisibleChanged,
+          "ready": ready.value,
+          "offsetX": offsetX.value,
+          "offsetY": offsetY.value,
+          "offsetR": offsetR.value,
+          "offsetB": offsetB.value,
+          "onAlign": onAlign,
+          "onPrepare": onPrepare,
+          "onResize": (size) => {
+            popupSize.value = {
+              width: size.offsetWidth,
+              height: size.offsetHeight
             };
           },
-          arrowPos: {
-            x: b.value,
-            y: R.value
+          "arrowPos": {
+            x: arrowX.value,
+            y: arrowY.value
           },
-          align: u.value,
-          zIndex: e.value?.zIndex,
-          mask: e.value?.mask,
-          arrow: e.value?.arrow,
-          motion: e.value?.popupMotion,
-          maskMotion: e.value?.maskMotion,
-          getPopupContainer: e.value.getPopupContainer
+          "align": alignInfo.value,
+          "zIndex": mergedOptions.value?.zIndex,
+          "mask": mergedOptions.value?.mask,
+          "arrow": mergedOptions.value?.arrow,
+          "motion": mergedOptions.value?.popupMotion,
+          "maskMotion": mergedOptions.value?.maskMotion,
+          "getPopupContainer": mergedOptions.value.getPopupContainer
         }, {
-          default: () => [n(Z, {
-            prefixCls: t,
-            isMobile: !1,
-            ready: y.value,
-            open: s.value,
-            align: u.value,
-            offsetX: h.value,
-            offsetY: N.value,
-            offsetR: q.value,
-            offsetB: w.value,
-            arrowPos: {
-              x: b.value,
-              y: R.value
+          default: () => [createVNode(UniqueContainer, {
+            "prefixCls": prefixCls,
+            "isMobile": false,
+            "ready": ready.value,
+            "open": open.value,
+            "align": alignInfo.value,
+            "offsetX": offsetX.value,
+            "offsetY": offsetY.value,
+            "offsetR": offsetR.value,
+            "offsetB": offsetB.value,
+            "arrowPos": {
+              x: arrowX.value,
+              y: arrowY.value
             },
-            popupSize: C.value,
-            motion: e.value?.popupMotion,
-            uniqueContainerClassName: g(e.value?.uniqueContainerClassName, S.value),
-            uniqueContainerStyle: e?.value?.uniqueContainerStyle
+            "popupSize": popupSize.value,
+            "motion": mergedOptions.value?.popupMotion,
+            "uniqueContainerClassName": classNames(mergedOptions.value?.uniqueContainerClassName, alignedClassName.value),
+            "uniqueContainerStyle": mergedOptions?.value?.uniqueContainerStyle
           }, null)]
         })]
       })]
@@ -157,11 +203,11 @@ const fe = /* @__PURE__ */ F((c, {
   props: {
     postTriggerProps: {
       type: Function,
-      required: !1,
+      required: false,
       default: void 0
     }
   }
 });
 export {
-  fe as default
+  UniqueProvider as default
 };

package/dist/UniqueProvider/useTargetState.cjs

@@ -1 +1,42 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("vue");function i(){const n=s.ref(),a=s.ref(!1),l=s.ref(!1),e=s.ref();return[u=>{const t=a.value;u===!1?(e.value=null,a.value=!1,l.value=!1):l.value&&t?e.value=u:(a.value=!0,n.value=u,e.value=null,t||(l.value=!0))},a,n,u=>{u?(l.value=!1,e.value&&(n.value=e.value,e.value=null)):(l.value=!1,e.value=null)}]}exports.default=i;
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+function useTargetState() {
+  const options = vue.ref();
+  const open = vue.ref(false);
+  const isAnimating = vue.ref(false);
+  const pendingOptionsRef = vue.ref();
+  const trigger = (nextOptions) => {
+    const wasOpen = open.value;
+    if (nextOptions === false) {
+      pendingOptionsRef.value = null;
+      open.value = false;
+      isAnimating.value = false;
+    } else {
+      if (isAnimating.value && wasOpen) {
+        pendingOptionsRef.value = nextOptions;
+      } else {
+        open.value = true;
+        options.value = nextOptions;
+        pendingOptionsRef.value = null;
+        if (!wasOpen) {
+          isAnimating.value = true;
+        }
+      }
+    }
+  };
+  const onVisibleChanged = (visible) => {
+    if (visible) {
+      isAnimating.value = false;
+      if (pendingOptionsRef.value) {
+        options.value = pendingOptionsRef.value;
+        pendingOptionsRef.value = null;
+      }
+    } else {
+      isAnimating.value = false;
+      pendingOptionsRef.value = null;
+    }
+  };
+  return [trigger, open, options, onVisibleChanged];
+}
+exports.default = useTargetState;

package/dist/UniqueProvider/useTargetState.js

@@ -1,13 +1,42 @@
-import { ref as s } from "vue";
-function o() {
-  const n = s(), u = s(!1), l = s(!1), e = s();
-  return [(a) => {
-    const t = u.value;
-    a === !1 ? (e.value = null, u.value = !1, l.value = !1) : l.value && t ? e.value = a : (u.value = !0, n.value = a, e.value = null, t || (l.value = !0));
-  }, u, n, (a) => {
-    a ? (l.value = !1, e.value && (n.value = e.value, e.value = null)) : (l.value = !1, e.value = null);
-  }];
+import { ref } from "vue";
+function useTargetState() {
+  const options = ref();
+  const open = ref(false);
+  const isAnimating = ref(false);
+  const pendingOptionsRef = ref();
+  const trigger = (nextOptions) => {
+    const wasOpen = open.value;
+    if (nextOptions === false) {
+      pendingOptionsRef.value = null;
+      open.value = false;
+      isAnimating.value = false;
+    } else {
+      if (isAnimating.value && wasOpen) {
+        pendingOptionsRef.value = nextOptions;
+      } else {
+        open.value = true;
+        options.value = nextOptions;
+        pendingOptionsRef.value = null;
+        if (!wasOpen) {
+          isAnimating.value = true;
+        }
+      }
+    }
+  };
+  const onVisibleChanged = (visible) => {
+    if (visible) {
+      isAnimating.value = false;
+      if (pendingOptionsRef.value) {
+        options.value = pendingOptionsRef.value;
+        pendingOptionsRef.value = null;
+      }
+    } else {
+      isAnimating.value = false;
+      pendingOptionsRef.value = null;
+    }
+  };
+  return [trigger, open, options, onVisibleChanged];
 }
 export {
-  o as default
+  useTargetState as default
 };

package/dist/context.cjs

@@ -1 +1,38 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),o=Symbol("TriggerContextKey");function i(){return e.inject(o,void 0)}const u=e.defineComponent((t,{slots:n})=>(e.provide(o,e.computed(()=>t)),()=>n?.default?.()),{props:["registerSubPopup"]}),r=Symbol("UniqueContextKey");function d(){return e.inject(r,void 0)}const g=e.defineComponent((t,{slots:n})=>(e.provide(r,t),()=>n?.default?.()),{props:["show","hide"]});exports.TriggerContextProvider=u;exports.UniqueContextKey=r;exports.UniqueContextProvider=g;exports.useTriggerContext=i;exports.useUniqueContext=d;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const TriggerContextKey = Symbol("TriggerContextKey");
+function useTriggerContext() {
+  return vue.inject(TriggerContextKey, void 0);
+}
+const TriggerContextProvider = vue.defineComponent(
+  (props, { slots }) => {
+    vue.provide(TriggerContextKey, vue.computed(() => props));
+    return () => {
+      return slots?.default?.();
+    };
+  },
+  {
+    props: ["registerSubPopup"]
+  }
+);
+const UniqueContextKey = Symbol("UniqueContextKey");
+function useUniqueContext() {
+  return vue.inject(UniqueContextKey, void 0);
+}
+const UniqueContextProvider = vue.defineComponent(
+  (props, { slots }) => {
+    vue.provide(UniqueContextKey, props);
+    return () => {
+      return slots?.default?.();
+    };
+  },
+  {
+    props: ["show", "hide"]
+  }
+);
+exports.TriggerContextProvider = TriggerContextProvider;
+exports.UniqueContextKey = UniqueContextKey;
+exports.UniqueContextProvider = UniqueContextProvider;
+exports.useTriggerContext = useTriggerContext;
+exports.useUniqueContext = useUniqueContext;

package/dist/context.js

@@ -1,27 +1,38 @@
-import { defineComponent as r, provide as o, computed as p, inject as n } from "vue";
-const i = Symbol("TriggerContextKey");
-function s() {
-  return n(i, void 0);
+import { defineComponent, provide, computed, inject } from "vue";
+const TriggerContextKey = Symbol("TriggerContextKey");
+function useTriggerContext() {
+  return inject(TriggerContextKey, void 0);
 }
-const g = r(
-  (e, { slots: t }) => (o(i, p(() => e)), () => t?.default?.()),
+const TriggerContextProvider = defineComponent(
+  (props, { slots }) => {
+    provide(TriggerContextKey, computed(() => props));
+    return () => {
+      return slots?.default?.();
+    };
+  },
   {
     props: ["registerSubPopup"]
   }
-), u = Symbol("UniqueContextKey");
-function x() {
-  return n(u, void 0);
+);
+const UniqueContextKey = Symbol("UniqueContextKey");
+function useUniqueContext() {
+  return inject(UniqueContextKey, void 0);
 }
-const C = r(
-  (e, { slots: t }) => (o(u, e), () => t?.default?.()),
+const UniqueContextProvider = defineComponent(
+  (props, { slots }) => {
+    provide(UniqueContextKey, props);
+    return () => {
+      return slots?.default?.();
+    };
+  },
   {
     props: ["show", "hide"]
   }
 );
 export {
-  g as TriggerContextProvider,
-  u as UniqueContextKey,
-  C as UniqueContextProvider,
-  s as useTriggerContext,
-  x as useUniqueContext
+  TriggerContextProvider,
+  UniqueContextKey,
+  UniqueContextProvider,
+  useTriggerContext,
+  useUniqueContext
 };

package/dist/hooks/useAction.cjs

@@ -1 +1,32 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("vue");function u(e){return e?Array.isArray(e)?e:[e]:[]}function i(e){return typeof e=="string"?e.toLowerCase():e}function d(e,s,a){const r=n.shallowRef(new Set),c=n.shallowRef(new Set);return n.watchEffect(()=>{const h=u(s?.value??e.value).map(i),l=u(a?.value??e.value).map(i),t=new Set(h),o=new Set(l);t.has("hover")&&!t.has("click")&&t.add("touch"),o.has("hover")&&!o.has("click")&&o.add("touch"),r.value=t,c.value=o}),[r,c]}exports.default=d;
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+function toArray(val) {
+  return val ? Array.isArray(val) ? val : [val] : [];
+}
+function normalizeAction(action) {
+  if (typeof action === "string") {
+    return action.toLowerCase();
+  }
+  return action;
+}
+function useAction(action, showAction, hideAction) {
+  const _showAction = vue.shallowRef(/* @__PURE__ */ new Set());
+  const _hideAction = vue.shallowRef(/* @__PURE__ */ new Set());
+  vue.watchEffect(() => {
+    const mergedShowAction = toArray(showAction?.value ?? action.value).map(normalizeAction);
+    const mergedHideAction = toArray(hideAction?.value ?? action.value).map(normalizeAction);
+    const showActionSet = new Set(mergedShowAction);
+    const hideActionSet = new Set(mergedHideAction);
+    if (showActionSet.has("hover") && !showActionSet.has("click")) {
+      showActionSet.add("touch");
+    }
+    if (hideActionSet.has("hover") && !hideActionSet.has("click")) {
+      hideActionSet.add("touch");
+    }
+    _showAction.value = showActionSet;
+    _hideAction.value = hideActionSet;
+  });
+  return [_showAction, _hideAction];
+}
+exports.default = useAction;

package/dist/hooks/useAction.js

@@ -1,17 +1,32 @@
-import { shallowRef as c, watchEffect as A } from "vue";
-function i(e) {
-  return e ? Array.isArray(e) ? e : [e] : [];
+import { shallowRef, watchEffect } from "vue";
+function toArray(val) {
+  return val ? Array.isArray(val) ? val : [val] : [];
 }
-function s(e) {
-  return typeof e == "string" ? e.toLowerCase() : e;
+function normalizeAction(action) {
+  if (typeof action === "string") {
+    return action.toLowerCase();
+  }
+  return action;
 }
-function w(e, a, u) {
-  const n = c(/* @__PURE__ */ new Set()), r = c(/* @__PURE__ */ new Set());
-  return A(() => {
-    const h = i(a?.value ?? e.value).map(s), f = i(u?.value ?? e.value).map(s), t = new Set(h), o = new Set(f);
-    t.has("hover") && !t.has("click") && t.add("touch"), o.has("hover") && !o.has("click") && o.add("touch"), n.value = t, r.value = o;
-  }), [n, r];
+function useAction(action, showAction, hideAction) {
+  const _showAction = shallowRef(/* @__PURE__ */ new Set());
+  const _hideAction = shallowRef(/* @__PURE__ */ new Set());
+  watchEffect(() => {
+    const mergedShowAction = toArray(showAction?.value ?? action.value).map(normalizeAction);
+    const mergedHideAction = toArray(hideAction?.value ?? action.value).map(normalizeAction);
+    const showActionSet = new Set(mergedShowAction);
+    const hideActionSet = new Set(mergedHideAction);
+    if (showActionSet.has("hover") && !showActionSet.has("click")) {
+      showActionSet.add("touch");
+    }
+    if (hideActionSet.has("hover") && !hideActionSet.has("click")) {
+      hideActionSet.add("touch");
+    }
+    _showAction.value = showActionSet;
+    _hideAction.value = hideActionSet;
+  });
+  return [_showAction, _hideAction];
 }
 export {
-  w as default
+  useAction as default
 };