@opentiny/vue-hooks 2.19.0

package/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@opentiny/vue-hooks",
+  "version": "2.19.0",
+  "description": "",
+  "module": "./lib/index.js",
+  "main": "./lib/index.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@floating-ui/dom": "^1.6.9",
+    "@opentiny/vue-common": "~2.19.0"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "types": "index.d.ts",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  }
+}

package/src/use-floating.d.ts

@@ -0,0 +1,90 @@
+import type { Placement, Strategy, OffsetOptions, RootBoundary, Boundary, ReferenceElement } from '@floating-ui/dom';
+interface IFloatOption {
+    reference: null | ReferenceElement;
+    popper: null | HTMLElement;
+    /** ✅ 是否弹出 */
+    show: boolean;
+    /** ✅ 是否自动更新位置 */
+    autoUpdate: boolean;
+    /** ✅ 弹出层定位策略, 【不建议修改】：  'absolute' | 'fixed'   https://floating-ui.com/docs/computePosition#strategy */
+    strategy: Strategy;
+    /** ✅ 默认出现的12个位置 */
+    placement: Placement;
+    /** ✅ 弹出层偏移量 支持  number | {mainAxis,crossAxis,alignmentAxis}
+     *  1、只传入 number， 代表主轴上的偏移。
+     *  2、crossAxis,alignmentAxis 都是副轴上的偏移， 区别是：
+     *    crossAxis 固定向副轴的正方向偏移；
+     *    alignmentAxis 在副轴上，根据placement的后段决定偏移。
+     *      比如 top的副轴为水平方向。 指定alignmentAxis=20的话，    top-start时，向右20， top-end时 向左20。
+     */
+    offset: OffsetOptions;
+    /** ✅ 是否显示箭头 */
+    arrowVisible: boolean;
+    /** ✅ 溢出的根边界, 取值为： viewport: 可视视口  document: 整个文档区域  或 自定义Rect：{ x,y,width,height}  【不建议切换,不太确定它影响哪些场景】
+     *    在floating 内部， 计算所有 [...clippingAncestors, rootBoundary] 的rect 大小
+     *    'viewport' 时，访问的是 window.visualViewport, 其 width是不带滚动条的宽度。
+     */
+    rootBoundary: RootBoundary;
+    /** ✅ 裁剪元素或区域元素。  默认为最近的rel元素。 此处可自定义为某个元素或Rect */
+    boundary: Boundary;
+    /** ✅ 边界预留padding.  设置后，flip 快到边界时，提前就翻转 */
+    boundaryPadding: number;
+    /** ✅ 引用元素不可见时，是否自动隐藏。 【需要启用autoUpdate】 */
+    syncHide: boolean;
+    /** ✅ 元素弹出后，任何重新定位都自动关闭popper， 适用于右键菜单打开后，滚动就或日期组件在滚动时自动关闭。 【需要启用autoUpdate】 */
+    autoHide: boolean;
+    /** ✅ 是否加速。 加速时，绑定popper的translate属性，否则绑定left/top。 【该属性不建议切换】 */
+    gpuAcceleration: boolean;
+    /** ✅ 是否动画。  动画的机制简化， 不考虑前个动画未结束时，就开始下个动画的情况。 */
+    animate: boolean;
+    /** ✅ 动画类名 */
+    animateName: string;
+    /** ✅ 是否添加到body。【该属性不建议切换】
+     *  true时，  显示popper时，才body.append; 隐藏时popper.remove。            boundary为 body.
+     *  false时， 显示popper, 修改style.display='block', 隐藏修改 display:none  boundary为 最近的relative元素   */
+    appendToBody: boolean;
+    /** ✅ 自定义类名，以支持不同的主题色, is-dark is-light 等 ， 支持空格分隔的多个类名 */
+    customClass: string;
+    /** 是否启用flip   flip, shift 属性会影响弹层的位置。 在鼠标右击菜单等场景，想固定弹出位置时，可以关闭该属性 */
+    flipAble: boolean;
+    /** 是否启用shift */
+    shiftAble: boolean;
+    /** 缓存上次的值。 由于watch state时，取不到oldState的值，所以每次应用后，记录一下 */
+    _last: Partial<IFloatOption> & {
+        arrowInserted?: boolean;
+        arrowEl: HTMLElement;
+        timestamp: number;
+    };
+    /** 缓存用户注册事件
+     * show 事件：如果useFloating时，show=true, 那么监听不到第一次show事件。 因为第一次show事件在usFloating内部就已经触发了
+     * hide 事件：在动画结束后触发。【是否增加hiding 事件?】
+     * update 事件： 每次定位完后触发。 该事件触发频繁，已观察到有以下情况：
+     *     在 autoUpdate 时，会频繁触发。 比如切换显示，elementResize /IntersectionObserver 事件发生，内部会进入2次
+     *     在reference 不可见时，每一秒会触发一次 update
+     * */
+    _events: {
+        show: Function[];
+        hide: Function[];
+        update: Function[];
+    };
+}
+/** 响应式的弹出层管理函数，适用于场景： tooltip, poppover, select, 右键菜单, floatbar, notify, 或 canvas上跟随鼠标等 */
+export declare const useFloating: (option?: Partial<IFloatOption>) => {
+    state: IFloatOption;
+    on: (eventName: any, cb: any) => any;
+    off: (eventName: any, cb: any) => any;
+    virtualEl: (x: number, y: number, w?: number, h?: number) => {
+        getBoundingClientRect(): {
+            width: number;
+            height: number;
+            x: number;
+            y: number;
+            top: number;
+            left: number;
+            right: number;
+            bottom: number;
+        };
+    };
+    forceUpdate: () => void;
+};
+export {};

package/src/use-lazy-show.d.ts

@@ -0,0 +1,13 @@
+/** 慢加载的 v-show 的办法， 灵感来自于: https://github.com/antfu/v-lazy-show
+ *  适用场景： 存在初始加载时，不需要显示的区域，但又需要用v-show切换显示。 比如 tabs\collapse\dropdown\cascader\carousel等
+ * @example
+ * const isShow = ref(false)
+ * const { lazyShow: lazyShowPopper } = useLazyShow(isShow)
+ *
+ * <div v-if="lazyShowPopper" v-show="isShow">
+ *   isShow 第一次为true时，才会加载该DOM
+ * </div>
+ */
+export declare const useLazyShow: (show: any) => {
+    lazyShow: any;
+};