@opentiny/vue-hooks 3.21.0 → 3.22.0

package/README.md

@@ -0,0 +1,3 @@
+# @opentiny/vue-hooks
+
+The `usehooks` collection provided by the `TinyVue` component library provides rich combined functions.

package/README.zh-CN.md

@@ -0,0 +1,3 @@
+# @opentiny/vue-hooks
+
+`TinyVue` 组件库提供的 `usehooks` 集合，提供丰富的组合式函数。

package/dist/index.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2022 - present TinyVue Authors.
+ * Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+export { useFloating } from './src/use-floating';
+export { useLazyShow } from './src/use-lazy-show';
+export { useEventListener } from './src/useEventListener';
+export { useInstanceSlots } from './src/useInstanceSlots';
+export { useRect } from './src/useRect';
+export { useRelation } from './src/useRelation';
+export { useTouch } from './src/useTouch';
+export { useUserAgent } from './src/useUserAgent';
+export { useWindowSize } from './src/useWindowSize';
+export { userPopper } from './src/vue-popper';
+export { usePopup } from './src/vue-popup';

package/dist/index.js

@@ -0,0 +1,24 @@
+import { useFloating as r } from "./src/use-floating.js";
+import { useLazyShow as p } from "./src/use-lazy-show.js";
+import { useEventListener as u } from "./src/useEventListener.js";
+import { useInstanceSlots as m } from "./src/useInstanceSlots.js";
+import { useRect as n } from "./src/useRect.js";
+import { useRelation as a } from "./src/useRelation.js";
+import { useTouch as l } from "./src/useTouch.js";
+import { useUserAgent as g } from "./src/useUserAgent.js";
+import { useWindowSize as w } from "./src/useWindowSize.js";
+import { userPopper as L } from "./src/vue-popper.js";
+import { usePopup as R } from "./src/vue-popup.js";
+export {
+  u as useEventListener,
+  r as useFloating,
+  m as useInstanceSlots,
+  p as useLazyShow,
+  R as usePopup,
+  n as useRect,
+  a as useRelation,
+  l as useTouch,
+  g as useUserAgent,
+  w as useWindowSize,
+  L as userPopper
+};

package/{src → dist/src}/use-floating.d.ts

@@ -1,4 +1,4 @@
-import type { Placement, Strategy, OffsetOptions, RootBoundary, Boundary, ReferenceElement } from '@floating-ui/dom';
+import { Placement, Strategy, OffsetOptions, RootBoundary, Boundary, ReferenceElement } from '@floating-ui/dom';
 interface IFloatOption {
     reference: null | ReferenceElement;
     popper: null | HTMLElement;
@@ -69,7 +69,12 @@ interface IFloatOption {
     };
 }
 /** 响应式的弹出层管理函数，适用于场景： tooltip, poppover, select, 右键菜单, floatbar, notify, 或 canvas上跟随鼠标等 */
-export declare const useFloating: (option?: Partial<IFloatOption>) => {
+export declare const useFloating: ({ reactive, watch, markRaw, onBeforeUnmount }: {
+    reactive: any;
+    watch: any;
+    markRaw: any;
+    onBeforeUnmount: any;
+}) => (option?: Partial<IFloatOption>) => {
     state: IFloatOption;
     on: (eventName: any, cb: any) => any;
     off: (eventName: any, cb: any) => any;

package/dist/src/use-floating.js

@@ -0,0 +1,141 @@
+import { autoUpdate as v, offset as C, flip as T, shift as B, limitShift as E, arrow as N, hide as O, computePosition as $ } from "@floating-ui/dom";
+const h = {
+  reference: null,
+  popper: null,
+  show: !1,
+  autoUpdate: !0,
+  strategy: "absolute",
+  placement: "bottom",
+  offset: 6,
+  arrowVisible: !0,
+  rootBoundary: "viewport",
+  boundary: "clippingAncestors",
+  boundaryPadding: 5,
+  syncHide: !0,
+  autoHide: !1,
+  gpuAcceleration: !1,
+  animate: !0,
+  animateName: "fade-in-linear",
+  appendToBody: !1,
+  customClass: "",
+  flipAble: !0,
+  shiftAble: !0
+}, j = { top: "bottom", right: "left", bottom: "top", left: "right" }, d = (e) => e === "auto" ? 0 : Number(e.slice(0, -1).replace(",", ".")) * 1e3, w = (e) => {
+  const p = window.getComputedStyle(e);
+  let r = d(p.transitionDelay) + d(p.transitionDuration);
+  return r || (r = d(p.animationDelay) + d(p.animationDuration), r) ? r : 0;
+}, _ = (e, p, r) => {
+  p.split(" ").forEach((n) => n && e.classList.toggle(n, r));
+}, b = (e) => {
+  const p = [C(e.offset)];
+  e.flipAble && p.push(
+    T({
+      rootBoundary: e.rootBoundary,
+      boundary: e.boundary,
+      padding: e.boundaryPadding
+    })
+  ), e.shiftAble && p.push(B({ limiter: E() })), e.arrowVisible && p.push(
+    N({
+      element: e.popper.querySelector(".tiny-popper__arrow"),
+      padding: 8
+    })
+  ), p.push(O()), $(e.reference, e.popper, {
+    placement: e.placement,
+    strategy: e.strategy,
+    middleware: p
+  }).then(({ x: r, y: n, placement: c, strategy: o, middlewareData: i }) => {
+    var u;
+    if (e.autoHide && e._last.show && (/* @__PURE__ */ new Date()).getTime() > e._last.timestamp + 300) {
+      e.show = !1;
+      return;
+    }
+    const s = {};
+    if (Object.assign(s, {
+      position: o
+    }), e.gpuAcceleration ? Object.assign(s, {
+      transform: `translate(${r}px,${n}px)`,
+      left: "0",
+      top: "0"
+    }) : Object.assign(s, {
+      left: `${r}px`,
+      top: `${n}px`
+    }), e.syncHide && i.hide && Object.assign(s, {
+      visibility: i.hide.referenceHidden ? "hidden" : "visible"
+    }), Object.assign(e.popper.style, s), e._last.customClass && e._last.customClass !== e.customClass && _(e.popper, e._last.customClass, !1), e.customClass && ((u = e._last) == null ? void 0 : u.customClass) !== e.customClass && (_(e.popper, e.customClass, !0), e._last.customClass = e.customClass), e.arrowVisible) {
+      const { x: t, y: l } = i.arrow, a = e._last.arrowEl, m = j[c.split("-")[0]], g = {
+        left: t !== null ? `${t}px` : "",
+        top: l !== null ? `${l}px` : "",
+        right: "",
+        bottom: "",
+        [m]: "-4px",
+        display: "block"
+      };
+      Object.assign(a.style, g);
+    } else
+      e._last.arrowInserted && (e._last.arrowEl.style.display = "none");
+    f(e, "update", { x: r, y: n, placement: c, strategy: o, middlewareData: i });
+  });
+}, P = (e) => v(e.reference, e.popper, () => {
+  b(e);
+}), S = (e) => {
+  if (!(e._last.show && e._last.popper === e.popper) && (e._last.popper && e._last.popper !== e.popper && (e._last.appendToBody ? e._last.popper.remove() : e._last.popper.style.display = "none", e._last.arrowInserted = !1, e._last.arrowEl = null), e.popper)) {
+    if (e.appendToBody ? document.body.append(e.popper) : e.popper.style.display = "block", !e._last.arrowInserted) {
+      const p = document.createElement("div");
+      p.className = "tiny-popper__arrow", e.popper.append(p), e._last.arrowInserted = !0, e._last.arrowEl = p;
+    }
+    if (e.animate) {
+      const p = `${e.animateName}-enter-from`, r = `${e.animateName}-enter-active`;
+      e.popper.classList.add(p, r), setTimeout(() => {
+        e.popper.classList.remove(p);
+      }, 0);
+      const n = w(e.popper);
+      setTimeout(() => {
+        e.popper.classList.remove(r);
+      }, n);
+    }
+    f(e, "show");
+  }
+}, y = (e) => {
+  if (e._last.show && e.popper)
+    if (e.animate && e.animateName) {
+      const p = `${e.animateName}-leave-to`, r = `${e.animateName}-leave-active`;
+      e.popper.classList.add(p, r);
+      const n = w(e.popper);
+      setTimeout(() => {
+        e.popper.classList.remove(p, r), e.appendToBody ? e.popper.remove() : e.popper.style.display = "none", f(e, "hide");
+      }, n);
+    } else
+      e.appendToBody ? e.popper.remove() : e.popper.style.display = "none", f(e, "hide");
+}, f = (e, p, r) => {
+  e._events[p].forEach((n) => n(r));
+}, A = (e, p, r = 0, n = 0) => ({
+  getBoundingClientRect() {
+    return {
+      width: 0,
+      height: 0,
+      x: e,
+      y: p,
+      top: p,
+      left: e,
+      right: e + r,
+      bottom: p + n
+    };
+  }
+}), x = ({ reactive: e, watch: p, markRaw: r, onBeforeUnmount: n }) => (c = {}) => {
+  const o = e(c);
+  let i = null;
+  Object.keys(h).forEach((l) => {
+    Object.prototype.hasOwnProperty.call(o, l) || (o[l] = h[l]);
+  }), o._last = r({}), o._events = r({ show: [], hide: [], update: [] });
+  const s = () => {
+    o.popper && o.reference && o.show ? (S(o), o.autoUpdate ? (i && i(), i = P(o)) : b(o)) : (i && i(), y(o)), o._last.popper = o.popper, o._last.reference = o.reference, o._last.show = o.show && o.popper && o.reference, o._last.appendToBody = o.appendToBody, o._last.timestamp = (/* @__PURE__ */ new Date()).getTime();
+  };
+  p(o, s, { immediate: !0 });
+  const u = (l, a) => o._events[l].push(a), t = (l, a) => o._events[l] = o._events[l].filter((m) => m !== a);
+  return n(() => {
+    i && i(), y(o);
+  }), { state: o, on: u, off: t, virtualEl: A, forceUpdate: s };
+};
+export {
+  x as useFloating
+};

package/{src → dist/src}/use-lazy-show.d.ts

@@ -1,4 +1,3 @@
-import { hooks } from '@opentiny/vue-common';
 /** 慢加载的 v-show 的办法， 灵感来自于: https://github.com/antfu/v-lazy-show
  *  适用场景： 存在初始加载时，不需要显示的区域，但又需要用v-show切换显示。 比如 tabs\collapse\dropdown\cascader\carousel等
  * @example
@@ -9,6 +8,10 @@ import { hooks } from '@opentiny/vue-common';
  *   isShow 第一次为true时，才会加载该DOM
  * </div>
  */
-export declare const useLazyShow: (show: any) => {
-    lazyShow: hooks.Ref<any>;
+export declare const useLazyShow: ({ ref, watch, isRef }: {
+    ref: any;
+    watch: any;
+    isRef: any;
+}) => (show: any) => {
+    lazyShow: any;
 };

package/dist/src/use-lazy-show.js

@@ -0,0 +1,10 @@
+const o = ({ ref: u, watch: a, isRef: l }) => (e) => {
+  const t = u(l(e) ? e.value : e);
+  if (!t.value) {
+    const n = a(e, (c) => c && (t.value = !0) && n(), { flush: "sync" });
+  }
+  return { lazyShow: t };
+};
+export {
+  o as useLazyShow
+};

package/dist/src/useEventListener.d.ts

@@ -0,0 +1,15 @@
+export declare const onMountedOrActivated: ({ onMounted, onActivated, nextTick }: {
+    onMounted: any;
+    onActivated: any;
+    nextTick: any;
+}) => (hook: any) => void;
+export declare const useEventListener: ({ unref, isRef, watch, nextTick, onMounted, onUnmounted, onActivated, onDeactivated }: {
+    unref: any;
+    isRef: any;
+    watch: any;
+    nextTick: any;
+    onMounted: any;
+    onUnmounted: any;
+    onActivated: any;
+    onDeactivated: any;
+}) => (type: any, listener: any, options?: {}) => (() => void) | undefined;

package/dist/src/useEventListener.js

@@ -0,0 +1,31 @@
+import { isServer as E, on as L, off as M } from "@opentiny/utils";
+const O = ({ onMounted: r, onActivated: f, nextTick: i }) => (o) => {
+  let s;
+  r(() => {
+    o(), i(() => s = !0);
+  }), f(() => s && o());
+}, W = ({ unref: r, isRef: f, watch: i, nextTick: o, onMounted: s, onUnmounted: g, onActivated: h, onDeactivated: x }) => (d, m, A = {}) => {
+  if (E) return;
+  const { target: t = window, passive: v = !1, capture: p = !1 } = A;
+  let l = !1, a;
+  const w = (n) => {
+    if (l) return;
+    const e = r(n);
+    e && !a && (L(e, d, m, { capture: p, passive: v }), a = !0);
+  }, c = (n) => {
+    if (l) return;
+    const e = r(n);
+    e && a && (M(e, d, m, { capture: p, passive: v }), a = !1);
+  };
+  g(() => c(t)), x(() => c(t)), O({ onMounted: s, onActivated: h, nextTick: o })(() => w(t));
+  let u;
+  return f(t) && (u = i(t, (n, e) => {
+    c(e), w(n);
+  })), () => {
+    u && u(), c(t), l = !0;
+  };
+};
+export {
+  O as onMountedOrActivated,
+  W as useEventListener
+};

package/dist/src/useInstanceSlots.d.ts

@@ -0,0 +1,6 @@
+export declare const useInstanceSlots: ({ getCurrentInstance, isVue2, nextTick, onUnmounted }: {
+    getCurrentInstance: any;
+    isVue2: any;
+    nextTick: any;
+    onUnmounted: any;
+}) => () => void;

package/dist/src/useInstanceSlots.js

@@ -0,0 +1,14 @@
+const n = ({ getCurrentInstance: o, isVue2: t, nextTick: s, onUnmounted: l }) => () => {
+  const e = o().proxy;
+  t || Object.defineProperty(e, "$scopedSlots", { configurable: !0, value: null }), Object.defineProperty(e, "instanceSlots", {
+    configurable: !0,
+    get: () => e.$scopedSlots || e.$slots
+  }), l(() => {
+    s(() => {
+      t || delete e.$scopedSlots, delete e.instanceSlots;
+    });
+  });
+};
+export {
+  n as useInstanceSlots
+};

package/dist/src/useRect.d.ts

@@ -0,0 +1 @@
+export declare const useRect: (unref: any) => (elOrRef: any) => any;

package/dist/src/useRect.js

@@ -0,0 +1,18 @@
+const r = (t) => t === window, i = (t, e) => ({
+  top: 0,
+  left: 0,
+  width: t,
+  right: t,
+  height: e,
+  bottom: e
+}), s = (t) => (e) => {
+  const n = t(e);
+  if (r(n)) {
+    const o = n.innerWidth, c = n.innerHeight;
+    return i(o, c);
+  }
+  return n && n.getBoundingClientRect ? n.getBoundingClientRect() : i(0, 0);
+};
+export {
+  s as useRect
+};

package/dist/src/useRelation.d.ts

@@ -0,0 +1,31 @@
+/**
+ * 处理组件嵌套的组合式 API
+ * relationKey 关系树上的父子组件使用同一个关系名称
+ * relationContainer 子组件顺序由关系容器确定，由根组件提供，可以不使用，子组件顺序就是组件创建顺序
+ * onChange 子组件顺序改变后的回调处理，由根组件提供，可以不使用
+ * childrenKey 在组件关系树上的所有实例中定义的子组件引用名称，默认是 instanceChildren
+ * delivery 根组件向下分发的内容
+ */
+export declare const useRelation: ({ computed, getCurrentInstance, inject, markRaw, nextTick, onMounted, onActivated, onUnmounted, provide, reactive, toRef }: {
+    computed: any;
+    getCurrentInstance: any;
+    inject: any;
+    markRaw: any;
+    nextTick: any;
+    onMounted: any;
+    onActivated: any;
+    onUnmounted: any;
+    provide: any;
+    reactive: any;
+    toRef: any;
+}) => ({ relationKey, relationContainer, onChange, childrenKey, delivery }?: {
+    relationKey: any;
+    relationContainer: any;
+    onChange: any;
+    childrenKey: any;
+    delivery: any;
+}) => {
+    children: any;
+    index: any;
+    delivery: any;
+};

package/dist/src/useRelation.js

@@ -0,0 +1,54 @@
+import { noop as y } from "@opentiny/utils";
+import { onMountedOrActivated as C } from "./useEventListener.js";
+const V = ({
+  computed: l,
+  getCurrentInstance: i,
+  inject: c,
+  markRaw: a,
+  nextTick: f,
+  onMounted: v,
+  onActivated: E,
+  onUnmounted: h,
+  provide: M,
+  reactive: m,
+  toRef: k
+}) => ({ relationKey: p, relationContainer: x, onChange: P, childrenKey: r, delivery: b } = {}) => {
+  if (!p)
+    throw new Error("[TINY Error]<relationKey> must exist.");
+  const u = i(), e = m({ children: [], indexInParent: -1 }), j = c(p, null);
+  let o = [];
+  if (j) {
+    const { link: t, unlink: n, callbacks: s, childrenKey: d, delivery: O } = j;
+    o = s, r = r || d || "instanceChildren", b = O, e.indexInParent = t(u), h(() => n(u));
+  } else {
+    r = r || "instanceChildren";
+    const t = C({ onMounted: v, onActivated: E, nextTick: f }), n = P ? () => f(P) : y;
+    let s;
+    f(() => {
+      const d = typeof x == "function" ? x() : x;
+      d && (s = new MutationObserver((O, $) => {
+        const I = [];
+        g(d.childNodes, I), o.forEach((A) => A(I, O, $)), n();
+      }), s.observe(d, { attributes: !0, childList: !0, subtree: !0 }));
+    }), t(() => n()), h(() => {
+      s && (s.disconnect(), s = null), o = null;
+    });
+  }
+  const w = (t) => {
+    const n = t.proxy;
+    return e.children.push(a(n)), l(() => e.children.indexOf(n));
+  }, N = (t) => {
+    const n = e.children.indexOf(t.proxy);
+    n > -1 && e.children.splice(n, 1);
+  };
+  return o.push((t) => D(e.children, t)), M(p, { link: w, unlink: N, callbacks: o, childrenKey: r, delivery: b }), Object.defineProperty(u.proxy, r, { configurable: !0, get: () => e.children }), h(() => delete u.proxy[r]), { children: k(e, "children"), index: k(e, "indexInParent"), delivery: b };
+}, g = (l, i) => {
+  l.length && l.forEach((c) => {
+    i.push(c), c.childNodes && g(c.childNodes, i);
+  });
+}, D = (l, i) => {
+  l.sort((c, a) => i.indexOf(c.$el) - i.indexOf(a.$el));
+};
+export {
+  V as useRelation
+};

package/dist/src/useTouch.d.ts

@@ -0,0 +1,15 @@
+export declare const useTouch: (ref: any) => () => {
+    move: (event: any) => void;
+    start: (event: any) => void;
+    reset: () => void;
+    isVertical: () => boolean;
+    isHorizontal: () => boolean;
+    startX: any;
+    startY: any;
+    deltaX: any;
+    deltaY: any;
+    offsetX: any;
+    offsetY: any;
+    direction: any;
+    isTap: any;
+};

package/dist/src/useTouch.js

@@ -0,0 +1,32 @@
+const X = (t, e) => t > e ? "horizontal" : e > t ? "vertical" : "", h = (t) => t.touches[0], _ = (t) => () => {
+  const e = t(0), v = t(0), c = t(0), n = t(0), a = t(0), l = t(0), u = t(""), s = t(!0), E = () => u.value === "vertical", F = () => u.value === "horizontal", r = () => {
+    c.value = 0, n.value = 0, a.value = 0, l.value = 0, u.value = "", s.value = !0;
+  };
+  return {
+    move: (i) => {
+      const o = h(i);
+      c.value = (o.clientX < 0 ? 0 : o.clientX) - e.value, n.value = o.clientY - v.value, a.value = Math.abs(c.value), l.value = Math.abs(n.value);
+      const T = 10;
+      (!u.value || a.value < T && l.value < T) && (u.value = X(a.value, l.value)), s.value && (a.value > 5 || l.value > 5) && (s.value = !1);
+    },
+    start: (i) => {
+      r();
+      const o = h(i);
+      e.value = o.clientX, v.value = o.clientY;
+    },
+    reset: r,
+    isVertical: E,
+    isHorizontal: F,
+    startX: e,
+    startY: v,
+    deltaX: c,
+    deltaY: n,
+    offsetX: a,
+    offsetY: l,
+    direction: u,
+    isTap: s
+  };
+};
+export {
+  _ as useTouch
+};

package/dist/src/useUserAgent.d.ts

@@ -0,0 +1,3 @@
+export declare const useUserAgent: () => {
+    isIOS: boolean | "";
+};

package/dist/src/useUserAgent.js

@@ -0,0 +1,10 @@
+import { isServer as n } from "@opentiny/utils";
+function t() {
+  return n ? !1 : window.navigator && window.navigator.userAgent && (/iP(?:ad|hone|od)/.test(window.navigator.userAgent) || // The new iPad Pro Gen3 does not identify itself as iPad, but as Macintosh.
+  // https://github.com/vueuse/vueuse/issues/3577
+  window.navigator.maxTouchPoints > 2 && /iPad|Macintosh/.test(window.navigator.userAgent));
+}
+const i = () => ({ isIOS: t() });
+export {
+  i as useUserAgent
+};

package/dist/src/useWindowSize.d.ts

@@ -0,0 +1,4 @@
+export declare const useWindowSize: (ref: any) => () => {
+    width: any;
+    height: any;
+};

package/dist/src/useWindowSize.js

@@ -0,0 +1,14 @@
+import { isServer as r, on as o } from "@opentiny/utils";
+let e, n;
+const s = (t) => () => {
+  if (!e && (e = t(0), n = t(0), !r)) {
+    const i = () => {
+      e.value = window.innerWidth, n.value = window.innerHeight;
+    };
+    i(), o(window, "resize", i, { passive: !0 }), o(window, "orientationchange", i, { passive: !0 });
+  }
+  return { width: e, height: n };
+};
+export {
+  s as useWindowSize
+};

package/{index.d.ts → dist/src/vue-emitter.d.ts}

@@ -9,6 +9,8 @@
  * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
  *
  */
-import { useFloating } from './src/use-floating';
-import { useLazyShow } from './src/use-lazy-show';
-export { useFloating, useLazyShow };
+declare const _default: (vm: any) => {
+    dispatch(componentName: any, eventName: any, params: any): void;
+    broadcast(componentName: any, eventName: any, params: any): void;
+};
+export default _default;

package/dist/src/vue-popper.js

@@ -0,0 +1,85 @@
+import { off as b, PopupManager as I, isDisplayNone as $, isServer as N, PopperJS as T, on as v } from "@opentiny/utils";
+const x = (t) => t.stopPropagation(), E = ({ state: t, props: l, vm: n, slots: d }) => {
+  let a = t.referenceElm || l.reference || n.$refs.reference && n.$refs.reference.$el || n.$refs.reference;
+  return !a && d.reference && d.reference()[0] && (t.referenceElm = d.reference()[0].elm || d.reference()[0].el, a = t.referenceElm), a;
+}, R = (t) => {
+  if (!t || !t.nodeType) return;
+  let l = (a) => parseInt(window.getComputedStyle(a).zIndex, 10) || 0, n = l(t), d;
+  do {
+    if (t = t.parentNode, t && t instanceof ShadowRoot && t.host && (t = t.host), t)
+      d = l(t);
+    else
+      break;
+    n = d > n ? d : n;
+  } while (t !== document.body);
+  return n + 1 + "";
+}, k = (t) => {
+  const {
+    parent: l,
+    emit: n,
+    nextTick: d,
+    onBeforeUnmount: a,
+    onDeactivated: J,
+    props: p,
+    watch: y,
+    reactive: g,
+    vm: f,
+    slots: w,
+    toRefs: h,
+    popperVmRef: A
+  } = t, e = g({
+    popperJS: null,
+    appended: !1,
+    // arrow 是否添加
+    popperElm: null,
+    showPopper: p.manual ? !!p.modelValue : !1,
+    referenceElm: null,
+    currentPlacement: ""
+  }), B = (o) => {
+    if (e.appended)
+      return;
+    e.appended = !0;
+    const r = document.createElement("div");
+    r.setAttribute("x-arrow", ""), r.className = "popper__arrow", o.appendChild(r);
+  }, S = (o) => {
+    const { followReferenceHide: r = !0 } = (p == null ? void 0 : p.popperOptions) || {}, { _popper: c, _reference: s } = o;
+    r && $(s) && (c.style.display = "none");
+  }, P = (o) => p.zIndex === "relative" ? R(o) : I.nextZIndex(), _ = (o) => {
+    if (N || (e.currentPlacement = e.currentPlacement || p.placement, !/^(top|bottom|left|right)(-start|-end)?$/g.test(e.currentPlacement)))
+      return;
+    const r = p.popperOptions || { gpuAcceleration: !1 };
+    e.popperElm = e.popperElm || p.popper || f.$refs.popper || A.popper || o;
+    const c = e.popperElm;
+    let s = E({ state: e, props: p, vm: f, slots: w });
+    !c || !s || s.nodeType !== Node.ELEMENT_NODE || (p.visibleArrow && B(c), p.appendToBody || p.popperAppendToBody ? document.body.appendChild(e.popperElm) : (l && l.$el && l.$el.appendChild(e.popperElm), r.forceAbsolute = !0), r.placement = e.currentPlacement, r.offset = p.offset || 0, r.arrowOffset = p.arrowOffset || 0, r.adjustArrow = p.adjustArrow || !1, r.appendToBody = p.appendToBody || p.popperAppendToBody, e.popperJS = new T(s, c, r), n("created", e), typeof r.onUpdate == "function" && e.popperJS.onUpdate(r.onUpdate), e.popperJS._popper.style.zIndex = P(e.popperJS._reference), S(e.popperJS), v(e.popperElm, "click", x));
+  }, i = (o) => {
+    o && o !== !0 && (e.popperElm = o);
+    const r = e.popperJS;
+    r ? (r._reference = E({ state: e, props: p, vm: f, slots: w }), r.update(), r._popper && o !== !0 && (r._popper.style.zIndex = P(r._reference), S(e.popperJS))) : _(o && o !== !0 ? o : void 0);
+  }, u = (o) => {
+    !e.popperJS || e.showPopper && !o || (e.popperJS.destroy(), e.popperJS = null);
+  }, m = (o) => {
+    o && e.popperElm && e.popperElm.parentNode === document.body && (b(e.popperElm, "click", x), e.popperElm.remove());
+  };
+  return y(
+    () => e.showPopper,
+    (o) => {
+      p.disabled || (o && d(i), p.trigger === "manual" && n("update:modelValue", o));
+    }
+  ), y(
+    () => p.placement,
+    (o) => {
+      var r;
+      e.currentPlacement = o, (r = e.popperJS) == null || r.setOptions({ placement: o }), !p.disabled && (o && d(i), p.trigger === "manual" && n("update:modelValue", o));
+    }
+  ), a(() => {
+    d(() => {
+      u(!0), (p.appendToBody || p.popperAppendToBody) && m("remove");
+    });
+  }), J(() => {
+    u(!0), (p.appendToBody || p.popperAppendToBody) && m("remove");
+  }), { updatePopper: i, destroyPopper: m, doDestroy: u, ...h(e) };
+};
+export {
+  k as userPopper
+};

package/dist/src/vue-popup.d.ts

@@ -0,0 +1,18 @@
+import { ISharedRenderlessFunctionParams } from 'types/shared.type';
+export interface IPopupState {
+    opened: boolean;
+    rendered: boolean;
+}
+type IPopupInputParams = ISharedRenderlessFunctionParams<never> & {
+    api: {
+        open: Function;
+        close: Function;
+    };
+    state: IPopupState;
+    props: any;
+};
+/** vue-popup 只是dialog-box 自己使用的包， 封装了一些state和几个方法，处理mount,unmount 和watch。 它内部封装了 PopupManager 的调用！
+ * 计划：drawer/image 等组件均使用该函数
+ */
+export declare const usePopup: (options: IPopupInputParams) => any;
+export {};