├── .eslintignore
├── index.html
├── scripts
    └── tsconfig.json
├── lerna.json
├── demo
    ├── main.ts
    ├── componentList.ts
    ├── App.tsx
    └── router.ts
├── src
    ├── utils
    │   ├── testingHelpers.ts
    │   ├── typeHelpers.ts
    │   └── dom.ts
    ├── useSize
    │   ├── __demo__
    │   │   └── index.tsx
    │   └── index.ts
    ├── useToggle
    │   ├── __test__
    │   │   └── index.spec.ts
    │   ├── __demo__
    │   │   └── index.tsx
    │   └── index.ts
    ├── useReactiveRef
    │   ├── index.ts
    │   ├── __demo__
    │   │   └── index.tsx
    │   └── __test__
    │   │   └── index.spec.tsx
    ├── useClickAway
    │   ├── __demo__
    │   │   └── index.tsx
    │   ├── index.ts
    │   └── __test__
    │   │   └── index.spec.tsx
    ├── index.ts
    ├── useInViewport
    │   ├── __demo__
    │   │   └── index.tsx
    │   ├── __test__
    │   │   └── index.spec.tsx
    │   └── index.ts
    ├── useEventListener
    │   ├── __demo__
    │   │   └── index.tsx
    │   ├── index.ts
    │   └── __test__
    │   │   └── index.spec.tsx
    ├── useHover
    │   ├── __demo__
    │   │   └── index.tsx
    │   ├── __tests__
    │   │   └── index.spec.tsx
    │   └── index.ts
    ├── useDraggable
    │   ├── __demo__
    │   │   └── index.tsx
    │   ├── index.ts
    │   └── __test__
    │   │   └── index.spec.tsx
    ├── useScroll
    │   ├── index.ts
    │   ├── __test__
    │   │   └── index.spec.tsx
    │   └── __demo__
    │   │   └── index.tsx
    └── useForm
    │   ├── __demo__
    │       └── index.tsx
    │   └── index.ts
├── .prettierrc
├── jest.config.js
├── README.md
├── typings
    └── some.d.ts
├── babel.config.js
├── tsconfig.json
├── .eslintrc.js
├── LICENSE
├── webpack.config.js
├── .gitignore
└── package.json


/.eslintignore:
--------------------------------------------------------------------------------
1 | *.js


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 | <div id="app"></div>
2 | <script src="/dist/main.js"></script>


--------------------------------------------------------------------------------
/scripts/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "compilerOptions": {
3 |     "module": "commonJS",
4 |   }
5 | }


--------------------------------------------------------------------------------
/lerna.json:
--------------------------------------------------------------------------------
1 | {
2 |   "packages": [
3 |     "packages/*"
4 |   ],
5 |   "version": "0.0.0"
6 | }
7 | 


--------------------------------------------------------------------------------
/demo/main.ts:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue';
2 | import App from './App';
3 | import router from './router';
4 | const app = createApp(App);
5 | app.use(router);
6 | app.mount('#app');
7 | 


--------------------------------------------------------------------------------
/src/utils/testingHelpers.ts:
--------------------------------------------------------------------------------
1 | export function sleep(time: number): Promise<any> {
2 |   return new Promise((resolve) => {
3 |     setTimeout(() => {
4 |       resolve(true);
5 |     }, time);
6 |   });
7 | }
8 | 


--------------------------------------------------------------------------------
/demo/componentList.ts:
--------------------------------------------------------------------------------
 1 | export default [
 2 |   'useForm',
 3 |   'useSize',
 4 |   'useHover',
 5 |   'useToggle',
 6 |   'useClickAway',
 7 |   'useEventListener',
 8 |   'useReactiveRef',
 9 |   'useScroll',
10 |   'useInViewport',
11 |   'useDraggable',
12 | ];
13 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "singleQuote": true,
 3 |   "trailingComma": "all",
 4 |   "printWidth": 100,
 5 |   "proseWrap": "never",
 6 |   "overrides": [
 7 |     {
 8 |       "files": ".prettierrc",
 9 |       "options": {
10 |         "parser": "json"
11 |       }
12 |     }
13 |   ]
14 | }
15 | 


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   testURL: 'http://localhost/',
 3 |   testRegex: '.*\\.spec\\.tsx?$',
 4 |   collectCoverageFrom: [
 5 |     '**/*.{ts,tsx}',
 6 |     '!**/node_modules/**',
 7 |     '!**/__demo__/**',
 8 |     '!**/__test__/**',
 9 |     '!**/demo/**',
10 |   ],
11 | };
12 | 


--------------------------------------------------------------------------------
/src/utils/typeHelpers.ts:
--------------------------------------------------------------------------------
1 | import { ComponentPublicInstance } from 'vue';
2 | export type ElementType = Element | ComponentPublicInstance;
3 | export function isComponentPublicInstance(
4 |   instance: ElementType,
5 | ): instance is ComponentPublicInstance {
6 |   return (instance as ComponentPublicInstance).$ !== undefined;
7 | }
8 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | # @ant-design-vue/use
 4 | 
 5 | ## 该项目已废弃， useForm 已集成进入 ant-design-vue 中，其它功能推荐使用 [vueuse](https://github.com/vueuse/vueuse)
 6 | 
 7 | ## The project has been abandoned, useForm has been integrated into `ant-design-vue`，other functions recommended to use [vueuse](https://github.com/vueuse/vueuse)
 8 | 
 9 | 
10 | 
11 | 


--------------------------------------------------------------------------------
/src/useSize/__demo__/index.tsx:
--------------------------------------------------------------------------------
 1 | import { Component } from 'vue';
 2 | import useSize from '../index';
 3 | export default {
 4 |   setup() {
 5 |     const [size, elRef] = useSize();
 6 |     return () => (
 7 |       <div ref={elRef}>
 8 |         try to resize the preview window <br />
 9 |         dimensions -- width: {size.width} px, height: {size.height} px
10 |       </div>
11 |     );
12 |   },
13 | } as Component;
14 | 


--------------------------------------------------------------------------------
/src/useToggle/__test__/index.spec.ts:
--------------------------------------------------------------------------------
 1 | import useToggle from '../index';
 2 | 
 3 | describe('useToggle', () => {
 4 |   test('default', async () => {
 5 |     const [state, { toggle, setLeft, setRight }] = useToggle();
 6 |     expect(state.value).toBe(false);
 7 |     toggle();
 8 |     expect(state.value).toBe(true);
 9 |     setLeft();
10 |     expect(state.value).toBe(false);
11 |     setRight();
12 |     expect(state.value).toBe(true);
13 |   });
14 | });
15 | 


--------------------------------------------------------------------------------
/demo/App.tsx:
--------------------------------------------------------------------------------
 1 | import { Component } from 'vue';
 2 | import list from './componentList';
 3 | export default {
 4 |   setup() {
 5 |     return () => (
 6 |       <>
 7 |         <div>
 8 |           {list.map(item => (
 9 |             <router-link to={'/' + item}>
10 |               <span style="margin-right:15px">/{item}</span>
11 |             </router-link>
12 |           ))}
13 |         </div>
14 |         <hr />
15 |         <router-view></router-view>
16 |       </>
17 |     );
18 |   },
19 | } as Component;
20 | 


--------------------------------------------------------------------------------
/demo/router.ts:
--------------------------------------------------------------------------------
 1 | import { createRouter, createWebHashHistory } from 'vue-router';
 2 | import list from './componentList';
 3 | export default createRouter({
 4 |   history: createWebHashHistory(),
 5 |   strict: true,
 6 |   routes: [
 7 |     { path: '/home', redirect: '/' },
 8 |     ...list.map(componentName => {
 9 |       return {
10 |         path: `/${componentName}`,
11 |         component: () => import(`../src/${componentName}/__demo__/index.tsx`),
12 |       };
13 |     }),
14 |   ],
15 | });
16 | 


--------------------------------------------------------------------------------
/typings/some.d.ts:
--------------------------------------------------------------------------------
 1 | interface validateUtil {
 2 |   [key: string]: any;
 3 | }
 4 | declare module 'ant-design-vue/es/form/utils/validateUtil' {
 5 |   const validateRules: any;
 6 |   export { validateRules };
 7 | }
 8 | 
 9 | declare module 'ant-design-vue/es/form/utils/messages' {
10 |   const defaultValidateMessages: any;
11 |   export { defaultValidateMessages };
12 | }
13 | 
14 | declare module 'ant-design-vue/es/form/utils/asyncUtil' {
15 |   const allPromiseFinish: any;
16 |   export { allPromiseFinish };
17 | }
18 | 


--------------------------------------------------------------------------------
/src/useReactiveRef/index.ts:
--------------------------------------------------------------------------------
 1 | import { ref, ComponentPublicInstance, Ref } from 'vue';
 2 | type ElementType = HTMLElement | ComponentPublicInstance;
 3 | function useReactiveRef(): [Ref<ElementType>, (...args: any) => void] {
 4 |   let prevEle = null as ElementType | null;
 5 |   const eleRef = ref(prevEle);
 6 |   function setEle(ele: HTMLElement) {
 7 |     if (prevEle === ele) return;
 8 |     prevEle = ele;
 9 |     eleRef.value = prevEle;
10 |   }
11 |   return [eleRef, setEle];
12 | }
13 | export default useReactiveRef;
14 | 


--------------------------------------------------------------------------------
/src/useClickAway/__demo__/index.tsx:
--------------------------------------------------------------------------------
 1 | import { Component, ref, defineComponent } from 'vue';
 2 | import useClickAway from '../index';
 3 | export default defineComponent({
 4 |   setup() {
 5 |     const count = ref(0);
 6 |     const eleRef = ref(null);
 7 |     useClickAway(eleRef, () => {
 8 |       count.value++;
 9 |     });
10 |     return { eleRef, count };
11 |   },
12 |   render(_ctx) {
13 |     return (
14 |       <div>
15 |         <button ref="eleRef">click away</button>
16 |         <div>count:{_ctx.count}</div>
17 |       </div>
18 |     );
19 |   },
20 | }) as Component;
21 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
 1 | export { default as useForm } from './useForm';
 2 | export { default as useSize } from './useSize';
 3 | export { default as useHover } from './useHover';
 4 | export { default as useToggle } from './useToggle';
 5 | export { default as useClickAway } from './useClickAway';
 6 | export { default as useEventListener } from './useEventListener';
 7 | export { default as useReactiveRef } from './useReactiveRef';
 8 | export { default as useScroll } from './useScroll';
 9 | export { default as useInViewport } from './useInViewport';
10 | export { default as useDraggable } from './useDraggable';
11 | 


--------------------------------------------------------------------------------
/src/useInViewport/__demo__/index.tsx:
--------------------------------------------------------------------------------
 1 | import { Component, ref } from 'vue';
 2 | import useInViewport from '../index';
 3 | export default {
 4 |   setup() {
 5 |     const ele = ref(null);
 6 |     const inViewPort = useInViewport(ele);
 7 |     return { ele, inViewPort };
 8 |   },
 9 |   render: (_ctx) => (
10 |     <div>
11 |       <div ref="ele">observer dom</div>
12 |       <div style={{ marginTop: 70, color: _ctx.inViewPort ? '#87d068' : '#f50' }}>
13 |         {_ctx.inViewPort === null ? '' : _ctx.inViewPort ? 'visible' : 'hidden'}
14 |       </div>
15 |     </div>
16 |   ),
17 | } as Component;
18 | 


--------------------------------------------------------------------------------
/src/useEventListener/__demo__/index.tsx:
--------------------------------------------------------------------------------
 1 | import { Component, ref } from 'vue';
 2 | import useEventListener from '../index';
 3 | export default {
 4 |   setup() {
 5 |     const count = ref(0);
 6 |     const eleRef = ref(null);
 7 |     useEventListener(eleRef, {
 8 |       type: 'click',
 9 |       listener: () => {
10 |         count.value++;
11 |       },
12 |     });
13 |     return { eleRef, count };
14 |   },
15 |   render(_ctx) {
16 |     return (
17 |       <>
18 |         <div ref="eleRef">click me</div>
19 |         <div>{_ctx.count}</div>
20 |       </>
21 |     );
22 |   },
23 | } as Component;
24 | 


--------------------------------------------------------------------------------
/src/useHover/__demo__/index.tsx:
--------------------------------------------------------------------------------
 1 | import { ref, Component } from 'vue';
 2 | import useHover from '../index';
 3 | export default {
 4 |   setup() {
 5 |     const eleRef = ref(null);
 6 |     const [isHover] = useHover(eleRef, {
 7 |       onEnter: () => {
 8 |         console.log('enter');
 9 |       },
10 |     });
11 |     return {
12 |       eleRef,
13 |       isHover,
14 |     };
15 |   },
16 |   render(_ctx) {
17 |     return (
18 |       <>
19 |         <h1 ref="eleRef">move your mouse</h1>
20 |         <h2>{_ctx.isHover ? 'enter' : 'leave'}</h2>
21 |       </>
22 |     );
23 |   },
24 | } as Component;
25 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
 1 | const config = {
 2 |   presets: [
 3 |     ['@babel/preset-env', { targets: { node: 'current' } }],
 4 |     [
 5 |       '@babel/preset-typescript',
 6 |       {
 7 |         allExtensions: true,
 8 |         isTSX: true,
 9 |       },
10 |     ],
11 |   ],
12 |   plugins: [
13 |     '@vue/babel-plugin-jsx',
14 |     '@babel/plugin-proposal-optional-chaining',
15 |     ['@babel/plugin-transform-typescript', { allowNamespaces: true }],
16 |   ],
17 | };
18 | module.exports = {
19 |   plugins: ['@babel/plugin-proposal-optional-chaining'],
20 |   env: {
21 |     dev: config,
22 |     test: config,
23 |   },
24 | };
25 | 


--------------------------------------------------------------------------------
/src/useDraggable/__demo__/index.tsx:
--------------------------------------------------------------------------------
 1 | import { Component, defineComponent } from 'vue';
 2 | import useDraggable from '../index';
 3 | export default defineComponent({
 4 |   setup() {
 5 |     const [targetRef, handleRef, { delta }] = useDraggable({ controlStyle: true });
 6 |     return () => {
 7 |       return (
 8 |         <>
 9 |           <div style="height:100px;width:100px;background: #999;" ref={targetRef}>
10 |             <button ref={handleRef}>handle</button>
11 |           </div>
12 |           <h2>{delta.value.x}</h2>
13 |           <h2>{delta.value.y}</h2>
14 |         </>
15 |       );
16 |     };
17 |   },
18 | }) as Component;
19 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "allowSyntheticDefaultImports": true,
 4 |     "declaration": true,
 5 |     "module": "esnext",
 6 |     "target": "esnext",
 7 |     "moduleResolution": "node",
 8 |     "jsx": "preserve",
 9 |     "esModuleInterop": true,
10 |     "skipLibCheck": true
11 |   },
12 |   "include": ["./src", "./typings/"],
13 |   "typings": "./typings/index.d.ts",
14 |   "exclude": [
15 |     "node_modules",
16 |     "build",
17 |     "scripts",
18 |     "acceptance-tests",
19 |     "webpack",
20 |     "jest",
21 |     "src/setupTests.ts",
22 |     "tslint:latest",
23 |     "tslint-config-prettier"
24 |   ]
25 | }
26 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true,
 5 |   },
 6 |   extends: [
 7 |     'plugin:vue/vue3-essential',
 8 |     'eslint:recommended',
 9 |     '@vue/typescript/recommended',
10 |     '@vue/prettier',
11 |     '@vue/prettier/@typescript-eslint',
12 |   ],
13 |   parserOptions: {
14 |     ecmaVersion: 2020,
15 |   },
16 |   rules: {
17 |     '@typescript-eslint/no-explicit-any': 0,
18 |     '@typescript-eslint/no-inferrable-types': 0,
19 |     'vue/experimental-script-setup-vars': 0,
20 |     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
21 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
22 |   },
23 | };
24 | 


--------------------------------------------------------------------------------
/src/useReactiveRef/__demo__/index.tsx:
--------------------------------------------------------------------------------
 1 | import { Component, ref, Ref, watchEffect } from 'vue';
 2 | import useReactiveRef from '../index';
 3 | export default {
 4 |   setup() {
 5 |     const [eleRef, setEle] = useReactiveRef();
 6 |     const flag = ref(true);
 7 |     const toggle = () => {
 8 |       flag.value = !flag.value;
 9 |     };
10 |     watchEffect(() => {
11 |       console.log((eleRef as Ref<HTMLElement>).value?.innerHTML);
12 |     });
13 |     return () => (
14 |       <>
15 |         <button onClick={toggle}> toggle "h1"</button>
16 |         {flag.value ? <h1 ref={setEle}>h1</h1> : null}
17 |         <h2>{(eleRef as Ref<HTMLElement>).value?.innerHTML}</h2>
18 |       </>
19 |     );
20 |   },
21 | } as Component;
22 | 


--------------------------------------------------------------------------------
/src/utils/dom.ts:
--------------------------------------------------------------------------------
 1 | import { Ref } from 'vue';
 2 | export type BasicTarget<T = HTMLElement> =
 3 |   | (() => T | null)
 4 |   | T
 5 |   | null
 6 |   | Ref
 7 |   | Ref<T | null | undefined>;
 8 | 
 9 | type TargetElement = HTMLElement | Document | Window | Ref;
10 | 
11 | export function getTargetElement(
12 |   target?: BasicTarget<TargetElement>,
13 |   defaultElement?: TargetElement,
14 | ): TargetElement | undefined | null {
15 |   if (!target) {
16 |     return defaultElement;
17 |   }
18 | 
19 |   let targetElement: TargetElement | undefined | null;
20 | 
21 |   if (typeof target === 'function') {
22 |     targetElement = target();
23 |   } else {
24 |     targetElement = target;
25 |   }
26 | 
27 |   return targetElement;
28 | }
29 | 


--------------------------------------------------------------------------------
/src/useInViewport/__test__/index.spec.tsx:
--------------------------------------------------------------------------------
 1 | import useInViewport from '../index';
 2 | 
 3 | describe('useInViewport', () => {
 4 |   it('should be defined', () => {
 5 |     expect(useInViewport).toBeDefined();
 6 |   });
 7 |   // it('with argument', async () => {
 8 |   //   const eleRef = ref(null)
 9 |   //   let inViewPort!: Ref<boolean> | Ref<null>
10 |   //   const wrapper = shallowMount({
11 |   //     setup() {
12 |   //       inViewPort = useInViewport(eleRef);
13 |   //       return { eleRef };
14 |   //     },
15 |   //     render(_ctx) {
16 |   //       return (
17 |   //         <h1 ref='eleRef' >
18 |   //         </h1>
19 |   //       )
20 |   //     }
21 |   //   });
22 |   //   await wrapper.vm.$nextTick()
23 |   //   expect(inViewPort.value).toBe(true)
24 |   // });
25 | });
26 | 


--------------------------------------------------------------------------------
/src/useInViewport/index.ts:
--------------------------------------------------------------------------------
 1 | import { ref, Ref, watchEffect } from 'vue';
 2 | 
 3 | function useInViewport(target: Ref<HTMLElement>): Ref<boolean> | Ref<null> {
 4 |   const inViewPort = ref(null);
 5 |   let prevEl = null;
 6 |   const observer = new IntersectionObserver((entries) => {
 7 |     for (const entry of entries) {
 8 |       if (entry.isIntersecting) {
 9 |         inViewPort.value = true;
10 |       } else {
11 |         inViewPort.value = false;
12 |       }
13 |     }
14 |   });
15 |   watchEffect(() => {
16 |     if (prevEl) {
17 |       observer.disconnect();
18 |     }
19 |     if (target.value) {
20 |       observer.observe((target as Ref<HTMLElement>).value);
21 |     }
22 |     prevEl = target.value;
23 |   });
24 |   return inViewPort;
25 | }
26 | 
27 | export default useInViewport;
28 | 


--------------------------------------------------------------------------------
/src/useReactiveRef/__test__/index.spec.tsx:
--------------------------------------------------------------------------------
 1 | import { shallowMount } from '@vue/test-utils';
 2 | 
 3 | import useReactiveRef from '../index';
 4 | import { ref } from 'vue';
 5 | 
 6 | describe('useReactiveRef', () => {
 7 |   test('should work with custom event', async () => {
 8 |     const [eleRef, setEle] = useReactiveRef();
 9 |     const showH1 = ref(false);
10 |     const wrapper = shallowMount({
11 |       setup() {
12 |         return () => (
13 |           <>
14 |             {showH1.value ? <h1 ref={setEle}></h1> : null}
15 |             <h1 ref="setEle"></h1>
16 |           </>
17 |         );
18 |       },
19 |     });
20 |     expect(eleRef.value).toEqual(null);
21 |     showH1.value = true;
22 |     await wrapper.vm.$nextTick();
23 |     expect(eleRef.value).toBe(wrapper.find('h1').element);
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/src/useToggle/__demo__/index.tsx:
--------------------------------------------------------------------------------
 1 | import { Component } from 'vue';
 2 | import useToggle from '../index';
 3 | export default {
 4 |   setup() {
 5 |     const [toggleRef, { toggle, setLeft, setRight }] = useToggle();
 6 |     return {
 7 |       toggleRef,
 8 |       toggle,
 9 |       setLeft,
10 |       setRight,
11 |     };
12 |   },
13 |   render: (_ctx) => {
14 |     return (
15 |       <div>
16 |         <p>Effects：{_ctx.toggleRef.toString()}</p>
17 |         <p>
18 |           <button type="button" onClick={_ctx.toggle}>
19 |             Toggle
20 |           </button>
21 |           <button type="button" onClick={_ctx.setLeft} style="margin-left:16px">
22 |             Toggle False
23 |           </button>
24 |           <button type="button" onClick={_ctx.setRight} style="margin-left:16px">
25 |             {' '}
26 |             Toggle True
27 |           </button>
28 |         </p>
29 |       </div>
30 |     );
31 |   },
32 | } as Component;
33 | 


--------------------------------------------------------------------------------
/src/useClickAway/index.ts:
--------------------------------------------------------------------------------
 1 | import { Ref, isRef } from 'vue';
 2 | import useEventListener from '../useEventListener';
 3 | // 鼠标点击事件，click 不会监听右键
 4 | const defaultEvent = 'click';
 5 | 
 6 | type EventType = MouseEvent | TouchEvent;
 7 | 
 8 | export default function useClickAway(
 9 |   ele: Ref<HTMLElement>,
10 |   onClickAway: (event: EventType) => void,
11 |   eventName: string = defaultEvent,
12 |   container: Document | HTMLElement | Ref<HTMLElement> = document,
13 | ): () => void {
14 |   function onClickAwayFn(e: any) {
15 |     const dom = ele.value;
16 |     if (!dom || dom.contains(e.target)) {
17 |       return;
18 |     }
19 |     onClickAway(e);
20 |   }
21 |   let removeListener!: (...args: any) => any;
22 |   if (isRef(container)) {
23 |     removeListener = useEventListener(container, {
24 |       type: eventName,
25 |       listener: onClickAwayFn,
26 |     });
27 |   } else {
28 |     container.addEventListener(eventName, onClickAwayFn);
29 |     removeListener = () => {
30 |       container.removeEventListener(eventName, onClickAwayFn);
31 |     };
32 |   }
33 |   return removeListener;
34 | }
35 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 vueComponent
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/useHover/__tests__/index.spec.tsx:
--------------------------------------------------------------------------------
 1 | /* eslint-disable @typescript-eslint/no-empty-function */
 2 | import { shallowMount } from '@vue/test-utils';
 3 | import useHover from '../index';
 4 | import { ref } from 'vue';
 5 | 
 6 | describe('useHover', () => {
 7 |   test('should work with custom event', async () => {
 8 |     const onEnter = jest.fn(() => {});
 9 |     const onLeave = jest.fn(() => {});
10 |     const wrapper = shallowMount({
11 |       setup() {
12 |         const eleRef = ref(null);
13 |         const [isHover] = useHover(eleRef, {
14 |           onEnter,
15 |           onLeave,
16 |         });
17 |         return {
18 |           eleRef,
19 |           isHover,
20 |         };
21 |       },
22 |       render() {
23 |         return <h1 ref="eleRef">move your mouse</h1>;
24 |       },
25 |     });
26 |     await wrapper.vm.$nextTick();
27 |     wrapper.find('h1').trigger('mouseenter');
28 |     expect(onEnter).toHaveBeenCalled();
29 |     expect(wrapper.vm.isHover).toBe(true);
30 | 
31 |     wrapper.find('h1').trigger('mouseleave');
32 |     expect(onLeave).toHaveBeenCalled();
33 |     expect(wrapper.vm.isHover).toBe(false);
34 |   });
35 | });
36 | 


--------------------------------------------------------------------------------
/src/useClickAway/__test__/index.spec.tsx:
--------------------------------------------------------------------------------
 1 | import { mount } from '@vue/test-utils';
 2 | 
 3 | import useClickAway from '../index';
 4 | import { ref } from 'vue';
 5 | 
 6 | describe('useClickAway', () => {
 7 |   test('should work with custom funtion', async () => {
 8 |     // eslint-disable-next-line @typescript-eslint/no-empty-function
 9 |     const fn = jest.fn(() => {});
10 |     const eleRef = ref(null);
11 |     const wrapRef = ref(null);
12 |     let removeListener!: () => void;
13 |     const wrapper = mount({
14 |       setup() {
15 |         removeListener = useClickAway(eleRef, fn, 'click', wrapRef);
16 |         return { eleRef, wrapRef };
17 |       },
18 |       render() {
19 |         return (
20 |           <div ref="wrapRef">
21 |             <h1 ref="eleRef"></h1>
22 |             <h2>h2</h2>
23 |           </div>
24 |         );
25 |       },
26 |     });
27 |     await wrapper.vm.$nextTick();
28 |     wrapper.find('h1').trigger('click');
29 |     expect(fn).toHaveBeenCalledTimes(0);
30 |     wrapper.find('h2').trigger('click');
31 |     expect(fn).toHaveBeenCalledTimes(1);
32 |     removeListener();
33 |     wrapper.find('h2').trigger('click');
34 |     expect(fn).toHaveBeenCalledTimes(1);
35 |   });
36 | });
37 | 


--------------------------------------------------------------------------------
/src/useScroll/index.ts:
--------------------------------------------------------------------------------
 1 | import { Ref, ref } from 'vue';
 2 | import useEventListener from '../useEventListener';
 3 | interface Position {
 4 |   left: number;
 5 |   top: number;
 6 | }
 7 | export default function useScroll(target: Ref<HTMLElement | Document | Window>): Ref<Position> {
 8 |   const position = ref({ left: 0, top: 0 } as Position);
 9 |   const updatePosition = (currentTarget: HTMLElement | Document) => {
10 |     let newPosition;
11 |     if (currentTarget === document) {
12 |       if (!document.scrollingElement) return;
13 |       newPosition = {
14 |         left: document.scrollingElement.scrollLeft,
15 |         top: document.scrollingElement.scrollTop,
16 |       };
17 |     } else {
18 |       newPosition = {
19 |         left: (currentTarget as HTMLElement).scrollLeft,
20 |         top: (currentTarget as HTMLElement).scrollTop,
21 |       };
22 |     }
23 |     position.value = newPosition;
24 |   };
25 |   const listener = (event: Event) => {
26 |     if (!event.target) return;
27 |     updatePosition(event.target as HTMLElement | Document);
28 |   };
29 |   useEventListener(target as Ref<HTMLElement | Document | Window>, {
30 |     type: 'scroll',
31 |     listener,
32 |   });
33 | 
34 |   return position;
35 | }
36 | 


--------------------------------------------------------------------------------
/src/useSize/index.ts:
--------------------------------------------------------------------------------
 1 | import { Ref, reactive, onMounted, watch, ref } from 'vue';
 2 | import ResizeObserver from 'resize-observer-polyfill';
 3 | 
 4 | type Size = { width?: number; height?: number };
 5 | 
 6 | function useSize(target?: Ref<Element | Window | null>): [Size, Ref] {
 7 |   const elRef = target || ref(null);
 8 |   const state = reactive({
 9 |     width: ((elRef || {}) as HTMLElement).clientWidth,
10 |     height: ((elRef || {}) as HTMLElement).clientHeight,
11 |   });
12 |   onMounted(() => {
13 |     let resizeObserver = null;
14 |     watch(
15 |       elRef,
16 |       (el, preElm, onInvalidate) => {
17 |         if (!el) return;
18 |         resizeObserver && resizeObserver.disconnect();
19 |         resizeObserver = new ResizeObserver((entries) => {
20 |           entries.forEach((entry) => {
21 |             state.width = entry.target.clientWidth;
22 |             state.height = entry.target.clientHeight;
23 |           });
24 |         });
25 |         resizeObserver.observe(el as HTMLElement);
26 |         onInvalidate(() => {
27 |           resizeObserver && resizeObserver.disconnect();
28 |         });
29 |       },
30 |       { immediate: true },
31 |     );
32 |   });
33 | 
34 |   return [state, elRef];
35 | }
36 | 
37 | export default useSize;
38 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path')
 2 | const { VueLoaderPlugin } = require('vue-loader')
 3 | const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 4 | module.exports = (env = {}) => ({
 5 |   mode: env.prod ? 'production' : 'development',
 6 |   devtool: env.prod ? 'source-map' : 'cheap-module-eval-source-map',
 7 |   entry: path.resolve(__dirname, './demo/main.ts'),
 8 |   output: {
 9 |     path: path.resolve(__dirname, './dist'),
10 |     publicPath: '/dist/'
11 |   },
12 |   resolve: {
13 |     extensions:['.js','.ts','.vue','.tsx','jsx']
14 |   },
15 |   module: {
16 |     rules: [
17 |       {
18 |         test: /\.vue$/,
19 |         use: 'vue-loader'
20 |       },
21 |       {
22 |         test: /\.css$/,
23 |         use: [
24 |           {
25 |             loader: MiniCssExtractPlugin.loader,
26 |             options: { hmr: !env.prod }
27 |           },
28 |           'css-loader'
29 |         ]
30 |       },
31 |       {
32 |         test: /\.jsx?$|\.tsx?$/,
33 |         use: {
34 |           loader: 'babel-loader',
35 |         }
36 |       },
37 |     ]
38 |   },
39 |   plugins: [
40 |     new VueLoaderPlugin(),
41 |     new MiniCssExtractPlugin({
42 |       filename: '[name].css'
43 |     })
44 |   ],
45 |   devServer: {
46 |     inline: true,
47 |     hot: true,
48 |     stats: 'minimal',
49 |     contentBase: __dirname,
50 |     overlay: true
51 |   }
52 | })
53 | 


--------------------------------------------------------------------------------
/src/useEventListener/index.ts:
--------------------------------------------------------------------------------
 1 | import { watchEffect, Ref, isRef, onBeforeUnmount } from 'vue';
 2 | function useEventListener(
 3 |   target: Ref<HTMLElement | Document | Window> | HTMLElement | Document | Window,
 4 |   option: {
 5 |     type: string;
 6 |     listener: EventListenerOrEventListenerObject;
 7 |     options?: boolean | AddEventListenerOptions;
 8 |   },
 9 | ): () => void {
10 |   const { type, listener, options } = option;
11 |   const eleIsRef = isRef(target);
12 |   if (eleIsRef) {
13 |     const bindEle = target as Ref<HTMLElement | Document | Window>;
14 |     let prevEle = null;
15 |     const destroyWatcher = watchEffect(
16 |       () => {
17 |         bindEle.value?.addEventListener(type, listener, options);
18 |         if (prevEle) {
19 |           prevEle.removeEventListener(type, listener);
20 |         }
21 |         prevEle = bindEle?.value;
22 |       },
23 |       { flush: 'post' },
24 |     );
25 |     const removeListener = (isDestroyWatcher = true) => {
26 |       bindEle.value.removeEventListener(type, listener);
27 |       if (isDestroyWatcher) {
28 |         destroyWatcher();
29 |       }
30 |     };
31 |     onBeforeUnmount(() => {
32 |       removeListener(true);
33 |     });
34 |     return removeListener;
35 |   } else {
36 |     const bindEle = target as HTMLElement | Document | Window;
37 |     bindEle.addEventListener(type, listener, options);
38 |     const removeListener = () => {
39 |       bindEle.removeEventListener(type, listener);
40 |     };
41 |     onBeforeUnmount(() => {
42 |       removeListener();
43 |     });
44 |     return removeListener;
45 |   }
46 | }
47 | export default useEventListener;
48 | 


--------------------------------------------------------------------------------
/src/useToggle/index.ts:
--------------------------------------------------------------------------------
 1 | import { ref, Ref } from 'vue';
 2 | type IState = string | number | boolean | undefined;
 3 | 
 4 | export interface Actions<T = IState> {
 5 |   setLeft: () => void;
 6 |   setRight: () => void;
 7 |   toggle: (value?: T) => void;
 8 | }
 9 | 
10 | function useToggle<T = boolean | undefined>(): [Ref<boolean>, Actions<T>];
11 | 
12 | function useToggle<T = IState>(defaultValue: T): [Ref<T>, Actions<T>];
13 | 
14 | function useToggle<T = IState, U = IState>(
15 |   defaultValue: T,
16 |   reverseValue: U,
17 | ): [T | U, Actions<T | U>];
18 | 
19 | function useToggle<D extends IState = IState, R extends IState = IState>(
20 |   defaultValue: D = false as D,
21 |   reverseValue?: R | boolean,
22 | ): [Ref, Actions] {
23 |   reverseValue = reverseValue === undefined ? !defaultValue : reverseValue;
24 |   const stateRef = ref(defaultValue) as Ref;
25 |   function toggle(value?: D | R) {
26 |     if (value === undefined) {
27 |       stateRef.value = stateRef.value === defaultValue ? reverseValue : defaultValue;
28 |       return;
29 |     }
30 |     if (value === defaultValue || value === reverseValue) {
31 |       stateRef.value = value;
32 |     } else {
33 |       stateRef.value = stateRef.value === defaultValue ? reverseValue : defaultValue;
34 |       console.warn(`Function toggle parameter must be ${defaultValue} or ${reverseValue}`);
35 |     }
36 |     return;
37 |   }
38 |   function setLeft() {
39 |     stateRef.value = defaultValue;
40 |   }
41 |   function setRight() {
42 |     stateRef.value = reverseValue;
43 |   }
44 |   const actions = {
45 |     toggle,
46 |     setLeft,
47 |     setRight,
48 |   };
49 |   return [stateRef, actions];
50 | }
51 | 
52 | export default useToggle;
53 | 


--------------------------------------------------------------------------------
/src/useScroll/__test__/index.spec.tsx:
--------------------------------------------------------------------------------
 1 | import { mount } from '@vue/test-utils';
 2 | import { ref } from 'vue';
 3 | import useScroll from '../index';
 4 | 
 5 | describe('useScroll', () => {
 6 |   it('define', async () => {
 7 |     const elem = document.createElement('div');
 8 |     elem.style.height = '100px';
 9 |     if (document.body) {
10 |       document.body.appendChild(elem);
11 |     }
12 |     let scroll;
13 |     const wrapper = mount(
14 |       {
15 |         setup() {
16 |           scroll = useScroll(ref(elem));
17 |           return {};
18 |         },
19 |         render() {
20 |           return <h1 style={{ height: '999px' }}></h1>;
21 |         },
22 |       },
23 |       {
24 |         attachTo: elem,
25 |       },
26 |     );
27 |     await wrapper.vm.$nextTick();
28 |     // elem did not trigger scroll
29 |     elem.scrollTop = 120;
30 |     await wrapper.vm.$nextTick();
31 |     expect(scroll.value.left).toBe(0);
32 |     expect(scroll.value.top).toBe(0);
33 |   });
34 |   // it('define2', async () => {
35 |   //     const el = ref(null)
36 |   //     const scroll = useScroll(el)
37 |   //     const wrapper = mount({
38 |   //         setup() {
39 |   //             return { el }
40 |   //         },
41 |   //         render() {
42 |   //             return (
43 |   //                 <div ref='el' style='height:120px;overflow: scroll;'>
44 |   //                     <h1 style='height:999px'>sad</h1>
45 |   //                 </div>
46 |   //             )
47 |   //         }
48 |   //     })
49 |   //     await wrapper.vm.$nextTick()
50 |   //     el.value.scrollTop = 100
51 |   //     // elem did not trigger scroll
52 |   //     await wrapper.vm.$nextTick()
53 |   //     expect(scroll.value.left).toBe(0);
54 |   //     expect(scroll.value.top).toBe(0);
55 |   // });
56 | });
57 | 


--------------------------------------------------------------------------------
/src/useHover/index.ts:
--------------------------------------------------------------------------------
 1 | import { ref, Ref, watch } from 'vue';
 2 | export interface Options {
 3 |   onEnter?: (e: MouseEvent) => void;
 4 |   onLeave?: (e: MouseEvent) => void;
 5 | }
 6 | 
 7 | type Action = {
 8 |   actions: {
 9 |     removelistener: () => void;
10 |   };
11 | };
12 | 
13 | /**
14 |  * useHover
15 |  *
16 |  * @param {Ref<HTMLElement>)} ele
17 |  * @param {Options} [options]
18 |  * @returns
19 |  */
20 | function useHover(target: Ref<HTMLElement>, options?: Options): [Ref<boolean>, Action] {
21 |   if (!target) {
22 |     console.warn(
23 |       `fucntiuon useHover first parameter expect HTMLElement | Ref<HTMLElement>,bug got ${target}`,
24 |     );
25 |     return;
26 |   }
27 |   const isHovering = ref(null);
28 |   const { onEnter, onLeave } = options || {};
29 |   const onMouseEnter = (e: MouseEvent) => {
30 |     if (onEnter) {
31 |       onEnter(e);
32 |     }
33 |     isHovering.value = true;
34 |   };
35 |   const onMouseLeave = (e: MouseEvent) => {
36 |     if (onLeave) {
37 |       onLeave(e);
38 |     }
39 |     isHovering.value = false;
40 |   };
41 | 
42 |   const _addListeners = (ele: HTMLElement) => {
43 |     if (ele) {
44 |       ele.addEventListener('mouseenter', onMouseEnter);
45 |       ele.addEventListener('mouseleave', onMouseLeave);
46 |     }
47 |   };
48 |   const _removeListeners = (ele: HTMLElement) => {
49 |     if (ele) {
50 |       ele.removeEventListener('mouseenter', onMouseEnter);
51 |       ele.removeEventListener('mouseleave', onMouseLeave);
52 |     }
53 |   };
54 |   const removelistener = () => {
55 |     _removeListeners((target as Ref<HTMLElement>).value);
56 |     destoryWatcher();
57 |   };
58 |   const destoryWatcher = watch(
59 |     target as Ref<HTMLElement>,
60 |     (newValue, oldValue) => {
61 |       if (newValue) {
62 |         _addListeners(newValue);
63 |       }
64 |       if (oldValue) {
65 |         _removeListeners(oldValue);
66 |       }
67 |     },
68 |     { flush: 'post' },
69 |   );
70 |   return [isHovering, { actions: { removelistener } }];
71 | }
72 | 
73 | export default useHover;
74 | 


--------------------------------------------------------------------------------
/src/useEventListener/__test__/index.spec.tsx:
--------------------------------------------------------------------------------
 1 | /* eslint-disable @typescript-eslint/no-empty-function */
 2 | import { shallowMount } from '@vue/test-utils';
 3 | 
 4 | import useEventListener from '../index';
 5 | import { ref } from 'vue';
 6 | 
 7 | describe('useEventListener', () => {
 8 |   test('should work with Ref<HTMLElement> parameter', async () => {
 9 |     const clickFn = jest.fn(() => {});
10 |     const eleRef = ref(null);
11 |     let removeListener!: () => void;
12 |     const wrapper = shallowMount({
13 |       setup() {
14 |         removeListener = useEventListener(eleRef, {
15 |           type: 'click',
16 |           listener: clickFn,
17 |         });
18 |         return { eleRef };
19 |       },
20 |       render() {
21 |         return (
22 |           <>
23 |             <h1 ref="eleRef">click</h1>
24 |           </>
25 |         );
26 |       },
27 |     });
28 |     await wrapper.vm.$nextTick();
29 |     expect(clickFn).toHaveBeenCalledTimes(0);
30 |     wrapper.find('h1').trigger('click');
31 |     expect(clickFn).toHaveBeenCalledTimes(1);
32 |     removeListener();
33 |     wrapper.find('h1').trigger('click');
34 |     expect(clickFn).toHaveBeenCalledTimes(1);
35 |   });
36 |   test('should work with HTMLElement parameter', async () => {
37 |     const clickFn = jest.fn(() => {});
38 |     const eleRef = ref(null);
39 |     let removeListener!: () => void;
40 |     const wrapper = shallowMount({
41 |       setup() {
42 |         removeListener = useEventListener(eleRef, {
43 |           type: 'click',
44 |           listener: clickFn,
45 |         });
46 |         return { eleRef };
47 |       },
48 |       render() {
49 |         return (
50 |           <>
51 |             <h1 ref="eleRef">click</h1>
52 |           </>
53 |         );
54 |       },
55 |     });
56 |     await wrapper.vm.$nextTick();
57 |     expect(clickFn).toHaveBeenCalledTimes(0);
58 |     wrapper.find('h1').trigger('click');
59 |     expect(clickFn).toHaveBeenCalledTimes(1);
60 |     removeListener();
61 |     wrapper.find('h1').trigger('click');
62 |     expect(clickFn).toHaveBeenCalledTimes(1);
63 |   });
64 | });
65 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
  1 | # Logs
  2 | logs
  3 | *.log
  4 | npm-debug.log*
  5 | yarn-debug.log*
  6 | yarn-error.log*
  7 | lerna-debug.log*
  8 | 
  9 | # Diagnostic reports (https://nodejs.org/api/report.html)
 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 11 | 
 12 | # Runtime data
 13 | pids
 14 | *.pid
 15 | *.seed
 16 | *.pid.lock
 17 | 
 18 | # Directory for instrumented libs generated by jscoverage/JSCover
 19 | lib-cov
 20 | 
 21 | # Coverage directory used by tools like istanbul
 22 | coverage
 23 | *.lcov
 24 | 
 25 | # nyc test coverage
 26 | .nyc_output
 27 | 
 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
 29 | .grunt
 30 | 
 31 | # Bower dependency directory (https://bower.io/)
 32 | bower_components
 33 | 
 34 | # node-waf configuration
 35 | .lock-wscript
 36 | 
 37 | # Compiled binary addons (https://nodejs.org/api/addons.html)
 38 | build/Release
 39 | 
 40 | # Dependency directories
 41 | node_modules/
 42 | jspm_packages/
 43 | 
 44 | # TypeScript cache
 45 | *.tsbuildinfo
 46 | 
 47 | # Optional npm cache directory
 48 | .npm
 49 | 
 50 | # Optional eslint cache
 51 | .eslintcache
 52 | 
 53 | # Microbundle cache
 54 | .rpt2_cache/
 55 | .rts2_cache_cjs/
 56 | .rts2_cache_es/
 57 | .rts2_cache_umd/
 58 | 
 59 | # Optional REPL history
 60 | .node_repl_history
 61 | 
 62 | # Output of 'npm pack'
 63 | *.tgz
 64 | 
 65 | # Yarn Integrity file
 66 | .yarn-integrity
 67 | 
 68 | # dotenv environment variables file
 69 | .env
 70 | .env.test
 71 | 
 72 | # parcel-bundler cache (https://parceljs.org/)
 73 | .cache
 74 | 
 75 | # Next.js build output
 76 | .next
 77 | 
 78 | # Nuxt.js build / generate output
 79 | .nuxt
 80 | dist
 81 | 
 82 | # Gatsby files
 83 | .cache/
 84 | # Comment in the public line in if your project uses Gatsby and *not* Next.js
 85 | # https://nextjs.org/blog/next-9-1#public-directory-support
 86 | # public
 87 | 
 88 | # vuepress build output
 89 | .vuepress/dist
 90 | 
 91 | # Serverless directories
 92 | .serverless/
 93 | 
 94 | # FuseBox cache
 95 | .fusebox/
 96 | 
 97 | # DynamoDB Local files
 98 | .dynamodb/
 99 | 
100 | # TernJS port file
101 | .tern-port
102 | 
103 | es
104 | lib
105 | .idea
106 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@ant-design-vue/use",
 3 |   "version": "0.0.1-alpha.10",
 4 |   "repository": {
 5 |     "type": "git",
 6 |     "url": "git+https://github.com/vueComponent/use.git"
 7 |   },
 8 |   "main": "./lib/index.js",
 9 |   "module": "./es/index.js",
10 |   "files": [
11 |     "dist",
12 |     "lib",
13 |     "es",
14 |     "typings"
15 |   ],
16 |   "scripts": {
17 |     "dev": "NODE_ENV=dev webpack-dev-server",
18 |     "test": "jest",
19 |     "lint": "eslint src/ --fix --ext .tsx,.ts",
20 |     "compile": "vc-tools run compile",
21 |     "test-coverage": "jest --coverage",
22 |     "prepublishOnly": "npm run lint && npm run compile && npm run test"
23 |   },
24 |   "dependencies": {
25 |     "async-validator": "^3.4.0",
26 |     "lodash-es": "^4.17.15",
27 |     "resize-observer-polyfill": "^1.5.1",
28 |     "vue": "^3.0.0"
29 |   },
30 |   "devDependencies": {
31 |     "@babel/plugin-proposal-optional-chaining": "^7.11.0",
32 |     "@babel/plugin-transform-typescript": "^7.10.3",
33 |     "@babel/preset-env": "^7.10.4",
34 |     "@babel/preset-typescript": "^7.10.4",
35 |     "@babel/runtime": "^7.10.4",
36 |     "@types/jest": "^26.0.3",
37 |     "@types/lodash-es": "^4.17.3",
38 |     "@typescript-eslint/eslint-plugin": "^4.13.0",
39 |     "@typescript-eslint/parser": "^4.1.1",
40 |     "@vue/babel-plugin-jsx": "^1.0.0",
41 |     "@vue/cli-plugin-eslint": "^4.5.4",
42 |     "@vue/cli-plugin-typescript": "^4.5.4",
43 |     "@vue/compiler-sfc": "^3.0.0",
44 |     "@vue/eslint-config-prettier": "^6.0.0",
45 |     "@vue/eslint-config-typescript": "^7.0.0",
46 |     "@vue/test-utils": "^2.0.0-beta.3",
47 |     "ant-design-vue": "^2.0.0",
48 |     "babel-jest": "^26.1.0",
49 |     "babel-loader": "^8.1.0",
50 |     "css-loader": "^3.4.2",
51 |     "eslint": "^7.3.1",
52 |     "eslint-config-prettier": "^6.11.0",
53 |     "eslint-plugin-prettier": "^3.1.4",
54 |     "eslint-plugin-vue": "^7.4.1",
55 |     "jest": "^26.1.0",
56 |     "lerna": "^3.22.1",
57 |     "mini-css-extract-plugin": "^0.9.0",
58 |     "typescript": "^4.1.3",
59 |     "vc-tools": "^3.0.0",
60 |     "vue": "^3.0.0",
61 |     "vue-loader": "^16.0.0-0",
62 |     "vue-router": "^4.0.0-0",
63 |     "webpack": "^4.42.1",
64 |     "webpack-cli": "^3.3.11",
65 |     "webpack-dev-server": "^3.10.3"
66 |   }
67 | }
68 | 


--------------------------------------------------------------------------------
/src/useScroll/__demo__/index.tsx:
--------------------------------------------------------------------------------
 1 | import { Component, ref } from 'vue';
 2 | import useScroll from '../index';
 3 | export default {
 4 |   setup() {
 5 |     const eleRef = ref(null);
 6 |     const scroll = useScroll(eleRef);
 7 |     return { eleRef, scroll };
 8 |   },
 9 |   render(_ctx) {
10 |     return (
11 |       <>
12 |         <div>{JSON.stringify(_ctx.scroll)}</div>
13 |         <div
14 |           style={{
15 |             height: '160px',
16 |             width: '160px',
17 |             border: 'solid 1px #000',
18 |             overflow: 'scroll',
19 |             whiteSpace: 'nowrap',
20 |             fontSize: '32px',
21 |           }}
22 |           ref="eleRef"
23 |         >
24 |           <div>
25 |             Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aspernatur atque, debitis ex
26 |             excepturi explicabo iste iure labore molestiae neque optio perspiciatis
27 |           </div>
28 |           <div>
29 |             Aspernatur cupiditate, deleniti id incidunt mollitia omnis! A aspernatur assumenda
30 |             consequuntur culpa cumque dignissimos enim eos, et fugit natus nemo nesciunt
31 |           </div>
32 |           <div>
33 |             Alias aut deserunt expedita, inventore maiores minima officia porro rem. Accusamus
34 |             ducimus magni modi mollitia nihil nisi provident
35 |           </div>
36 |           <div>
37 |             Alias aut autem consequuntur doloremque esse facilis id molestiae neque officia placeat,
38 |             quia quisquam repellendus reprehenderit.
39 |           </div>
40 |           <div>
41 |             Adipisci blanditiis facere nam perspiciatis sit soluta ullam! Architecto aut blanditiis,
42 |             consectetur corporis cum deserunt distinctio dolore eius est exercitationem
43 |           </div>
44 |           <div>Ab aliquid asperiores assumenda corporis cumque dolorum expedita</div>
45 |           <div>
46 |             Culpa cumque eveniet natus totam! Adipisci, animi at commodi delectus distinctio dolore
47 |             earum, eum expedita facilis
48 |           </div>
49 |           <div>
50 |             Quod sit, temporibus! Amet animi fugit officiis perspiciatis, quis unde. Cumque
51 |             dignissimos distinctio, dolor eaque est fugit nisi non pariatur porro possimus, quas
52 |             quasi
53 |           </div>
54 |         </div>
55 |       </>
56 |     );
57 |   },
58 | } as Component;
59 | 


--------------------------------------------------------------------------------
/src/useForm/__demo__/index.tsx:
--------------------------------------------------------------------------------
  1 | import { Component, reactive, toRaw } from 'vue';
  2 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
  3 | import { Form, Input, Select } from 'ant-design-vue';
  4 | import 'ant-design-vue/dist/antd.min.css';
  5 | import useForm from '../index';
  6 | export default {
  7 |   setup() {
  8 |     const modelRef = reactive({
  9 |       name1: '',
 10 |       name2: '111',
 11 |       obj: {
 12 |         //嵌套数据
 13 |         test: [],
 14 |       },
 15 |     });
 16 |     const rulesRef = reactive({
 17 |       name1: [
 18 |         {
 19 |           required: true,
 20 |           message: 'Please input Activity name',
 21 |         },
 22 |         {
 23 |           min: 3,
 24 |           max: 5,
 25 |           message: 'Length should be 3 to 5',
 26 |           trigger: 'blur',
 27 |         },
 28 |       ],
 29 |       name2: [
 30 |         {
 31 |           required: true,
 32 |           message: 'Please input name2',
 33 |         },
 34 |       ],
 35 |       'obj.test': [
 36 |         {
 37 |           required: true,
 38 |           message: 'Please select',
 39 |           type: 'array',
 40 |         },
 41 |       ],
 42 |     });
 43 |     const { resetFields, validate, validateInfos, mergeValidateInfo, clearValidate } = useForm(
 44 |       modelRef,
 45 |       rulesRef,
 46 |       { debounce: { wait: 300 } },
 47 |     );
 48 |     const handleClick = (e) => {
 49 |       e.preventDefault();
 50 |       validate()
 51 |         .then(() => {
 52 |           console.log(toRaw(modelRef));
 53 |         })
 54 |         .catch((err) => {
 55 |           console.log('error', err);
 56 |         });
 57 |     };
 58 |     const handleReset = (e) => {
 59 |       e.preventDefault();
 60 |       resetFields();
 61 |     };
 62 |     const clearValidateAll = () => {
 63 |       clearValidate();
 64 |     };
 65 |     const clearValidateName1 = (name) => {
 66 |       clearValidate(name);
 67 |     };
 68 |     const handleResetWithValues = (e) => {
 69 |       e.preventDefault();
 70 |       resetFields({
 71 |         name2: 'updated values',
 72 |       });
 73 |     };
 74 |     return () => (
 75 |       <Form>
 76 |         <Form.Item
 77 |           label="Activity name1"
 78 |           {...mergeValidateInfo([validateInfos.name1, validateInfos.name2])}
 79 |         >
 80 |           <Input v-model={[modelRef.name1, 'value']} onBlur={() => validate('name1')} />
 81 |         </Form.Item>
 82 |         <Form.Item label="Activity name2" {...validateInfos.name2}>
 83 |           <Input v-model={[modelRef.name2, 'value']} />
 84 |         </Form.Item>
 85 |         <Form.Item label="test" {...validateInfos['obj.test']}>
 86 |           <Select
 87 |             v-model={[modelRef.obj.test, 'value']}
 88 |             mode="multiple"
 89 |             style="width: 300px"
 90 |             onBlur={console.log}
 91 |             onFocus={console.log}
 92 |           >
 93 |             <Select.Option value="china">
 94 |               <div>
 95 |                 <span role="img" aria-label="China">
 96 |                   🇨🇳
 97 |                 </span>
 98 |                 China (中国)
 99 |               </div>
100 |             </Select.Option>
101 |             <Select.Option value="usa">
102 |               <div>
103 |                 <span role="img" aria-label="USA">
104 |                   🇺🇸
105 |                 </span>
106 |                 USA (美国)
107 |               </div>
108 |             </Select.Option>
109 |           </Select>
110 |         </Form.Item>
111 |         <button onClick={handleClick}>submit</button>
112 |         <button onClick={handleReset}>reset</button>
113 |         <button onClick={handleResetWithValues}>reset with new updated Values</button>
114 |         <button onClick={handleReset}>reset</button>
115 |         <button onClick={clearValidateAll}>clearValidateAll</button>
116 |         <button onClick={() => clearValidateName1('name1')}>clearValidateName1</button>
117 |       </Form>
118 |     );
119 |   },
120 | } as Component;
121 | 


--------------------------------------------------------------------------------
/src/useDraggable/index.ts:
--------------------------------------------------------------------------------
  1 | import { Ref, ref, watchEffect, HTMLAttributes } from 'vue';
  2 | import { isComponentPublicInstance, ElementType } from '../utils/typeHelpers';
  3 | 
  4 | export default function useDraggable(
  5 |   config: {
  6 |     target?: Ref<ElementType>;
  7 |     handle?: Ref<ElementType>;
  8 |     controlStyle?: boolean;
  9 |     viewport?: boolean;
 10 |     rectLimits?: {
 11 |       left?: number;
 12 |       right?: number;
 13 |       top?: number;
 14 |       bottom?: number;
 15 |     };
 16 |   } = { controlStyle: true },
 17 | ): [
 18 |   Ref<ElementType>,
 19 |   Ref<ElementType>,
 20 |   {
 21 |     getTargetProps: () => HTMLAttributes;
 22 |     dragging: Ref<boolean>;
 23 |     delta: Ref<{ x: number; y: number }>;
 24 |     resetState: () => void;
 25 |   },
 26 | ] {
 27 |   const { target: configTarget, handle, controlStyle, viewport, rectLimits } = config;
 28 |   const targetRef = configTarget || ref<ElementType>(null);
 29 |   const handleRef = handle || ref<ElementType>(null);
 30 |   const dragging = ref(null);
 31 |   const prev = ref({ x: 0, y: 0 });
 32 |   const delta = ref({ x: 0, y: 0 });
 33 |   const initial = ref({ x: 0, y: 0 });
 34 |   const limits: Ref<{
 35 |     minX: number;
 36 |     maxX: number;
 37 |     minY: number;
 38 |     maxY: number;
 39 |   }> = ref(null);
 40 |   const targetEleRef = ref<HTMLElement>(null);
 41 |   const handleEleRef = ref<HTMLElement>(null);
 42 | 
 43 |   watchEffect(
 44 |     () => {
 45 |       if (!targetRef.value) {
 46 |         targetEleRef.value = null;
 47 |       } else {
 48 |         targetEleRef.value = isComponentPublicInstance(targetRef.value)
 49 |           ? targetRef.value.$el
 50 |           : targetRef.value;
 51 |       }
 52 |       if (!handleRef.value) {
 53 |         handleEleRef.value = null;
 54 |       } else {
 55 |         handleEleRef.value = isComponentPublicInstance(handleRef.value)
 56 |           ? handleRef.value.$el
 57 |           : handleRef.value;
 58 |       }
 59 |     },
 60 |     { flush: 'post' },
 61 |   );
 62 |   watchEffect(
 63 |     () => {
 64 |       const handle = handleEleRef.value || targetEleRef.value;
 65 |       if (!targetEleRef.value) return;
 66 |       handle.addEventListener('mousedown', startDragging);
 67 |       handle.addEventListener('touchstart', startDragging);
 68 |       return () => {
 69 |         handle.removeEventListener('mousedown', startDragging);
 70 |         handle.removeEventListener('touchstart', startDragging);
 71 |       };
 72 | 
 73 |       function startDragging(event) {
 74 |         event.preventDefault();
 75 |         dragging.value = true;
 76 |         const source = (event.touches && event.touches[0]) || event;
 77 |         const { clientX, clientY } = source;
 78 |         initial.value = { x: clientX, y: clientY };
 79 |         if (controlStyle) {
 80 |           targetEleRef.value.style.willChange = 'transform';
 81 |         }
 82 |         if (viewport || rectLimits) {
 83 |           const { left, top, width, height } = targetEleRef.value.getBoundingClientRect();
 84 | 
 85 |           if (viewport) {
 86 |             limits.value = {
 87 |               minX: -left + delta.value.x,
 88 |               maxX: window.innerWidth - width - left + delta.value.x,
 89 |               minY: -top + delta.value.y,
 90 |               maxY: window.innerHeight - height - top + delta.value.y,
 91 |             };
 92 |           } else {
 93 |             limits.value = {
 94 |               minX: rectLimits.left - left + delta.value.x,
 95 |               maxX: rectLimits.right - width - left + delta.value.x,
 96 |               minY: rectLimits.top - top + delta.value.y,
 97 |               maxY: rectLimits.bottom - height - top + delta.value.y,
 98 |             };
 99 |           }
100 |         }
101 |       }
102 |     },
103 |     { flush: 'post' },
104 |   );
105 | 
106 |   watchEffect(
107 |     () => {
108 |       const handle = handleEleRef.value || targetEleRef.value;
109 |       if (!targetEleRef.value) return;
110 |       const reposition = function (event) {
111 |         const source =
112 |           (event.changedTouches && event.changedTouches[0]) ||
113 |           (event.touches && event.touches[0]) ||
114 |           event;
115 |         const { clientX, clientY } = source;
116 |         const x = clientX - initial.value.x + prev.value.x;
117 |         const y = clientY - initial.value.y + prev.value.y;
118 | 
119 |         const newDelta = calcDelta({
120 |           x,
121 |           y,
122 |           limits: limits.value,
123 |         });
124 |         delta.value = newDelta;
125 | 
126 |         return newDelta;
127 |       };
128 |       if (dragging.value) {
129 |         document.addEventListener('mousemove', reposition, { passive: true });
130 |         document.addEventListener('touchmove', reposition, { passive: true });
131 |         document.addEventListener('mouseup', stopDragging);
132 |         document.addEventListener('touchend', stopDragging);
133 |       }
134 | 
135 |       if (controlStyle) {
136 |         handle.style.cursor = dragging.value ? 'grabbing' : 'grab';
137 |       }
138 | 
139 |       return () => {
140 |         if (controlStyle) {
141 |           handle.style.cursor = 'unset';
142 |         }
143 |         document.removeEventListener('mousemove', reposition);
144 |         document.removeEventListener('touchmove', reposition);
145 |         document.removeEventListener('mouseup', stopDragging);
146 |         document.removeEventListener('touchend', stopDragging);
147 |       };
148 | 
149 |       function stopDragging(event) {
150 |         event.preventDefault();
151 |         dragging.value = false;
152 |         document.removeEventListener('mousemove', reposition);
153 |         document.removeEventListener('touchmove', reposition);
154 |         document.removeEventListener('mouseup', stopDragging);
155 |         document.removeEventListener('touchend', stopDragging);
156 |         const newDelta = reposition(event);
157 |         prev.value = newDelta;
158 |         if (controlStyle) {
159 |           targetEleRef.value.style.willChange = '';
160 |         }
161 |       }
162 |     },
163 |     { flush: 'post' },
164 |   );
165 | 
166 |   watchEffect(
167 |     () => {
168 |       targetEleRef.value &&
169 |         (targetEleRef.value.style.transform = `translate(${delta.value.x}px, ${delta.value.y}px)`);
170 |     },
171 |     { flush: 'post' },
172 |   );
173 | 
174 |   const getTargetProps = () => ({
175 |     'aria-grabbed': dragging.value || null,
176 |   });
177 | 
178 |   const resetState = () => {
179 |     delta.value = { x: 0, y: 0 };
180 |     prev.value = { x: 0, y: 0 };
181 |   };
182 | 
183 |   return [targetRef, handleRef, { getTargetProps, dragging, delta, resetState }];
184 | }
185 | 
186 | function calcDelta({ x, y, limits }) {
187 |   if (!limits) {
188 |     return { x, y };
189 |   }
190 | 
191 |   const { minX, maxX, minY, maxY } = limits;
192 | 
193 |   return {
194 |     x: Math.min(Math.max(x, minX), maxX),
195 |     y: Math.min(Math.max(y, minY), maxY),
196 |   };
197 | }
198 | 


--------------------------------------------------------------------------------
/src/useForm/index.ts:
--------------------------------------------------------------------------------
  1 | import { reactive, watch, nextTick } from 'vue';
  2 | import cloneDeep from 'lodash-es/cloneDeep';
  3 | import intersection from 'lodash-es/intersection';
  4 | import isEqual from 'lodash-es/isEqual';
  5 | import debounce from 'lodash-es/debounce';
  6 | import omit from 'lodash-es/omit';
  7 | import { validateRules } from 'ant-design-vue/es/form/utils/validateUtil';
  8 | import { defaultValidateMessages } from 'ant-design-vue/es/form/utils/messages';
  9 | import { allPromiseFinish } from 'ant-design-vue/es/form/utils/asyncUtil';
 10 | import { tuple } from 'ant-design-vue/es/_util/type';
 11 | 
 12 | interface DebounceSettings {
 13 |   leading?: boolean;
 14 | 
 15 |   wait?: number;
 16 | 
 17 |   trailing?: boolean;
 18 | }
 19 | 
 20 | function isRequired(rules: any[]) {
 21 |   let isRequired = false;
 22 |   if (rules && rules.length) {
 23 |     rules.every((rule: { required: any }) => {
 24 |       if (rule.required) {
 25 |         isRequired = true;
 26 |         return false;
 27 |       }
 28 |       return true;
 29 |     });
 30 |   }
 31 |   return isRequired;
 32 | }
 33 | 
 34 | function toArray(value) {
 35 |   if (value === undefined || value === null) {
 36 |     return [];
 37 |   }
 38 | 
 39 |   return Array.isArray(value) ? value : [value];
 40 | }
 41 | 
 42 | type ValidateMessage = string | (() => string);
 43 | export interface ValidateMessages {
 44 |   default?: ValidateMessage;
 45 |   required?: ValidateMessage;
 46 |   enum?: ValidateMessage;
 47 |   whitespace?: ValidateMessage;
 48 |   date?: {
 49 |     format?: ValidateMessage;
 50 |     parse?: ValidateMessage;
 51 |     invalid?: ValidateMessage;
 52 |   };
 53 |   types?: {
 54 |     string?: ValidateMessage;
 55 |     method?: ValidateMessage;
 56 |     array?: ValidateMessage;
 57 |     object?: ValidateMessage;
 58 |     number?: ValidateMessage;
 59 |     date?: ValidateMessage;
 60 |     boolean?: ValidateMessage;
 61 |     integer?: ValidateMessage;
 62 |     float?: ValidateMessage;
 63 |     regexp?: ValidateMessage;
 64 |     email?: ValidateMessage;
 65 |     url?: ValidateMessage;
 66 |     hex?: ValidateMessage;
 67 |   };
 68 |   string?: {
 69 |     len?: ValidateMessage;
 70 |     min?: ValidateMessage;
 71 |     max?: ValidateMessage;
 72 |     range?: ValidateMessage;
 73 |   };
 74 |   number?: {
 75 |     len?: ValidateMessage;
 76 |     min?: ValidateMessage;
 77 |     max?: ValidateMessage;
 78 |     range?: ValidateMessage;
 79 |   };
 80 |   array?: {
 81 |     len?: ValidateMessage;
 82 |     min?: ValidateMessage;
 83 |     max?: ValidateMessage;
 84 |     range?: ValidateMessage;
 85 |   };
 86 |   pattern?: {
 87 |     mismatch?: ValidateMessage;
 88 |   };
 89 | }
 90 | 
 91 | export interface Props {
 92 |   [key: string]: any;
 93 | }
 94 | 
 95 | export interface validateOptions {
 96 |   validateFirst?: boolean;
 97 |   validateMessages?: ValidateMessages;
 98 |   trigger?: 'change' | 'blur' | string | string[];
 99 | }
100 | 
101 | const validateStatus = tuple('', 'success', 'warning', 'error', 'validating');
102 | export type ValidateStatus = typeof validateStatus[number];
103 | 
104 | type namesType = string | string[];
105 | export interface validateInfo {
106 |   autoLink?: boolean;
107 |   required?: boolean;
108 |   validateStatus?: ValidateStatus;
109 |   help?: string;
110 | }
111 | 
112 | export interface validateInfos {
113 |   [key: string]: validateInfo;
114 | }
115 | 
116 | function getPropByPath(obj: Props, path: string, strict: boolean) {
117 |   let tempObj = obj;
118 |   path = path.replace(/\[(\w+)\]/g, '.$1');
119 |   path = path.replace(/^\./, '');
120 | 
121 |   const keyArr = path.split('.');
122 |   let i = 0;
123 |   for (let len = keyArr.length; i < len - 1; ++i) {
124 |     if (!tempObj && !strict) break;
125 |     const key = keyArr[i];
126 |     if (key in tempObj) {
127 |       tempObj = tempObj[key];
128 |     } else {
129 |       if (strict) {
130 |         throw new Error('please transfer a valid name path to validate!');
131 |       }
132 |       break;
133 |     }
134 |   }
135 |   return {
136 |     o: tempObj,
137 |     k: keyArr[i],
138 |     v: tempObj ? tempObj[keyArr[i]] : null,
139 |     isValid: tempObj && keyArr[i] in tempObj,
140 |   };
141 | }
142 | 
143 | function useForm(
144 |   modelRef: Props,
145 |   rulesRef?: Props,
146 |   options?: {
147 |     immediate?: boolean;
148 |     deep?: boolean;
149 |     validateOnRuleChange?: boolean;
150 |     debounce?: DebounceSettings;
151 |   },
152 | ): {
153 |   modelRef: Props;
154 |   rulesRef: Props;
155 |   initialModel: Props;
156 |   validateInfos: validateInfos;
157 |   resetFields: (newValues?: Props) => void;
158 |   validate: <T = any>(names?: namesType, option?: validateOptions) => Promise<T>;
159 |   validateField: <T = any>(
160 |     name?: string,
161 |     value?: any,
162 |     rules?: [Record<string, unknown>],
163 |     option?: validateOptions,
164 |   ) => Promise<T>;
165 |   mergeValidateInfo: (items: validateInfo | validateInfo[]) => validateInfo;
166 |   clearValidate: (names?: namesType) => void;
167 | } {
168 |   const initialModel = cloneDeep(modelRef);
169 |   let validateInfos: validateInfos = {};
170 | 
171 |   Object.keys(rulesRef).forEach((key) => {
172 |     validateInfos[key] = {
173 |       autoLink: false,
174 |       required: isRequired(rulesRef[key]),
175 |     };
176 |   });
177 |   validateInfos = reactive(validateInfos);
178 |   const resetFields = (newValues: Props) => {
179 |     Object.assign(modelRef, {
180 |       ...cloneDeep(initialModel),
181 |       ...newValues,
182 |     });
183 |     //modelRef = resetReactiveValue(initialModel, modelRef);
184 |     nextTick(() => {
185 |       Object.keys(validateInfos).forEach((key) => {
186 |         validateInfos[key] = {
187 |           autoLink: false,
188 |           required: isRequired(rulesRef[key]),
189 |         };
190 |       });
191 |     });
192 |   };
193 |   const filterRules = (rules = [], trigger: string[]) => {
194 |     if (!trigger.length) {
195 |       return rules;
196 |     } else {
197 |       return rules.filter((rule) => {
198 |         const triggerList = toArray(rule.trigger || 'change');
199 |         return intersection(triggerList, trigger).length;
200 |       });
201 |     }
202 |   };
203 |   let lastValidatePromise = null;
204 |   const validateFields = (names: string[], option: validateOptions = {}, strict: boolean) => {
205 |     const promiseList = [];
206 |     const values = {};
207 |     for (let i = 0; i < names.length; i++) {
208 |       const name = names[i];
209 |       const prop = getPropByPath(modelRef, name, strict);
210 |       if (!prop.isValid) continue;
211 |       values[name] = prop.v;
212 |       const rules = filterRules(rulesRef[name], toArray(option && option.trigger));
213 |       if (rules.length) {
214 |         promiseList.push(
215 |           validateField(name, prop.v, rules, option || {})
216 |             .then(() => ({
217 |               name,
218 |               errors: [],
219 |             }))
220 |             .catch((errors: any) =>
221 |               Promise.reject({
222 |                 name,
223 |                 errors,
224 |               }),
225 |             ),
226 |         );
227 |       }
228 |     }
229 | 
230 |     const summaryPromise = allPromiseFinish(promiseList);
231 |     lastValidatePromise = summaryPromise;
232 | 
233 |     const returnPromise = summaryPromise
234 |       .then(() => {
235 |         if (lastValidatePromise === summaryPromise) {
236 |           return Promise.resolve(values);
237 |         }
238 |         return Promise.reject([]);
239 |       })
240 |       .catch((results: any[]) => {
241 |         const errorList = results.filter(
242 |           (result: { errors: string | any[] }) => result && result.errors.length,
243 |         );
244 |         return Promise.reject({
245 |           values: values,
246 |           errorFields: errorList,
247 |           outOfDate: lastValidatePromise !== summaryPromise,
248 |         });
249 |       });
250 | 
251 |     // Do not throw in console
252 |     returnPromise.catch((e: any) => e);
253 | 
254 |     return returnPromise;
255 |   };
256 |   const validateField = <T extends unknown = any>(
257 |     name: string,
258 |     value: any,
259 |     rules: any,
260 |     option: validateOptions,
261 |   ): Promise<T> => {
262 |     const promise = validateRules(
263 |       [name],
264 |       value,
265 |       rules,
266 |       {
267 |         validateMessages: defaultValidateMessages,
268 |         ...option,
269 |       },
270 |       !!option.validateFirst,
271 |     );
272 |     validateInfos[name].validateStatus = 'validating';
273 |     promise
274 |       .catch((e: any) => e)
275 |       .then((errors = []) => {
276 |         if (validateInfos[name].validateStatus === 'validating') {
277 |           validateInfos[name].validateStatus = errors.length ? 'error' : 'success';
278 |           validateInfos[name].help = errors[0];
279 |         }
280 |       });
281 |     return promise;
282 |   };
283 | 
284 |   const validate = <T extends unknown = any>(
285 |     names?: namesType,
286 |     option?: validateOptions,
287 |   ): Promise<T> => {
288 |     let keys = [];
289 |     let strict = true;
290 |     if (!names) {
291 |       strict = false;
292 |       keys = Object.keys(rulesRef);
293 |     } else if (Array.isArray(names)) {
294 |       keys = names;
295 |     } else {
296 |       keys = [names];
297 |     }
298 |     const promises = validateFields(keys, option || {}, strict);
299 |     // Do not throw in console
300 |     promises.catch((e: any) => e);
301 |     return promises;
302 |   };
303 | 
304 |   const clearValidate = (names?: namesType) => {
305 |     let keys = [];
306 |     if (!names) {
307 |       keys = Object.keys(rulesRef);
308 |     } else if (Array.isArray(names)) {
309 |       keys = names;
310 |     } else {
311 |       keys = [names];
312 |     }
313 |     keys.forEach((key) => {
314 |       validateInfos[key] &&
315 |         Object.assign(validateInfos[key], {
316 |           validateStatus: '',
317 |           help: '',
318 |         });
319 |     });
320 |   };
321 | 
322 |   const mergeValidateInfo = (items = []) => {
323 |     const info = { autoLink: false } as validateInfo;
324 |     const help = [];
325 |     const infos = Array.isArray(items) ? items : [items];
326 |     for (let i = 0; i < infos.length; i++) {
327 |       const arg = infos[i] as validateInfo;
328 |       if (arg?.validateStatus === 'error') {
329 |         info.validateStatus = 'error';
330 |         arg.help && help.push(arg.help);
331 |       }
332 |       info.required = info.required || arg?.required;
333 |     }
334 |     info.help = help.join('\n');
335 |     return info;
336 |   };
337 |   let oldModel = initialModel;
338 |   const modelFn = (model: { [x: string]: any }) => {
339 |     const names = [];
340 |     Object.keys(rulesRef).forEach((key) => {
341 |       const prop = getPropByPath(model, key, false);
342 |       const oldProp = getPropByPath(oldModel, key, false);
343 |       if (!isEqual(prop.v, oldProp.v)) {
344 |         names.push(key);
345 |       }
346 |     });
347 |     validate(names, { trigger: 'change' });
348 |     oldModel = cloneDeep(model);
349 |   };
350 |   const debounceOptions = options?.debounce;
351 |   watch(
352 |     modelRef,
353 |     debounceOptions && debounceOptions.wait
354 |       ? debounce(modelFn, debounceOptions.wait, omit(debounceOptions, ['wait']))
355 |       : modelFn,
356 |     { immediate: options && !!options.immediate, deep: true },
357 |   );
358 | 
359 |   watch(
360 |     rulesRef,
361 |     () => {
362 |       if (options && options.validateOnRuleChange) {
363 |         validate();
364 |       }
365 |     },
366 |     { deep: true },
367 |   );
368 | 
369 |   return {
370 |     modelRef,
371 |     rulesRef,
372 |     initialModel,
373 |     validateInfos,
374 |     resetFields,
375 |     validate,
376 |     validateField,
377 |     mergeValidateInfo,
378 |     clearValidate,
379 |   };
380 | }
381 | 
382 | export default useForm;
383 | 


--------------------------------------------------------------------------------
/src/useDraggable/__test__/index.spec.tsx:
--------------------------------------------------------------------------------
  1 | /* eslint-disable @typescript-eslint/no-empty-function */
  2 | import { mount } from '@vue/test-utils';
  3 | 
  4 | import useDraggable from '../index';
  5 | import { defineComponent, CSSProperties } from 'vue';
  6 | 
  7 | describe('drag', () => {
  8 |   let utils!: ReturnType<typeof setup>;
  9 |   beforeEach(() => {
 10 |     utils = setup();
 11 |   });
 12 | 
 13 |   describe('starting drag', async () => {
 14 |     it('should supply proper props to target', async () => {
 15 |       const { wrapper } = await utils;
 16 |       wrapper.find('#handle').trigger('mousedown');
 17 |       await wrapper.vm.$nextTick();
 18 |       expect(wrapper.find('[aria-grabbed]')).toBeTruthy;
 19 |     });
 20 | 
 21 |     it('should return a delta position', async () => {
 22 |       const startAt = { clientX: 10, clientY: 10 };
 23 |       const delta = { x: 5, y: 5 };
 24 |       const { drag, wrapper } = await utils;
 25 |       await drag({ start: startAt, delta });
 26 |       await wrapper.vm.$nextTick();
 27 |       expect(wrapper.find('#output').text()).toEqual(`${delta.x}, ${delta.y}`);
 28 |     });
 29 |     it('should return a correct delta position after more drag', async () => {
 30 |       const startAt = { clientX: 10, clientY: 10 };
 31 |       const delta = { x: 5, y: 5 };
 32 |       const secondStart = {
 33 |         clientX: startAt.clientX + delta.x,
 34 |         clientY: startAt.clientY + delta.y,
 35 |       };
 36 |       const { drag, wrapper } = await utils;
 37 |       await drag({ start: startAt, delta });
 38 |       await drag({
 39 |         start: secondStart,
 40 |         delta,
 41 |       });
 42 |       await wrapper.vm.$nextTick();
 43 |       expect(wrapper.find('#output').text()).toEqual(`${2 * delta.x}, ${2 * delta.y}`);
 44 |     });
 45 |   });
 46 | });
 47 | 
 48 | describe('decorate with styles', async () => {
 49 |   let utils!: ReturnType<typeof setup>;
 50 |   beforeEach(() => {
 51 |     utils = setup({ useDraggableOption: { controlStyle: true } });
 52 |   });
 53 | 
 54 |   it("should change target's style when dragging", async () => {
 55 |     const { wrapper, drag } = await utils;
 56 | 
 57 |     await drag({
 58 |       start: { clientX: 3, clientY: 3 },
 59 |       delta: { x: 10, y: 15 },
 60 |     });
 61 | 
 62 |     expect((wrapper.find('#main').element as HTMLElement).style.transform).toEqual(
 63 |       `translate(10px, 15px)`,
 64 |     );
 65 |   });
 66 | 
 67 |   it("should change target's style when dragging (touches)", async () => {
 68 |     const { wrapper, drag } = await utils;
 69 | 
 70 |     await drag({
 71 |       start: { clientX: 3, clientY: 3 },
 72 |       delta: { x: 10, y: 15 },
 73 |       touch: true,
 74 |     });
 75 |     await wrapper.vm.$nextTick();
 76 |     expect((wrapper.find('#main').element as HTMLElement).style.transform).toEqual(
 77 |       `translate(10px, 15px)`,
 78 |     );
 79 |   });
 80 | 
 81 |   it('should set proper cursor', async () => {
 82 |     const { wrapper } = await utils;
 83 |     await wrapper.vm.$nextTick();
 84 |     expect((wrapper.find('#handle').element as HTMLElement).style.cursor).toEqual('grab');
 85 |   });
 86 | 
 87 |   it('should change cursor while dragging', async () => {
 88 |     const { wrapper } = await utils;
 89 |     wrapper.find('#handle').trigger('mousedown');
 90 |     await wrapper.vm.$nextTick();
 91 |     expect((wrapper.find('#handle').element as HTMLElement).style.cursor).toEqual('grabbing');
 92 |   });
 93 | 
 94 |   it('should add `will-change: transform` to target', async () => {
 95 |     const { wrapper } = await utils;
 96 |     wrapper.find('#handle').trigger('mousedown');
 97 |     expect((wrapper.find('#main').element as HTMLElement).style.willChange).toEqual('transform');
 98 |   });
 99 | 
100 |   it('should remove `will-change: transform` from target', async () => {
101 |     const { wrapper, drag } = await utils;
102 |     await drag({
103 |       start: { clientX: 3, clientY: 3 },
104 |       delta: { x: 10, y: 15 },
105 |     });
106 |     expect((wrapper.find('#main').element as HTMLElement).style.willChange).toEqual('');
107 |   });
108 | });
109 | 
110 | describe('ending drag', () => {
111 |   let utils!: ReturnType<typeof setup>;
112 |   beforeEach(() => {
113 |     utils = setup({ useDraggableOption: { controlStyle: true }, style: {} });
114 |   });
115 |   it('should supply proper props to target', async () => {
116 |     const { drag, wrapper } = await utils;
117 | 
118 |     await drag();
119 | 
120 |     expect(wrapper.find('[aria-grabbed]')).toBeNull;
121 |   });
122 | });
123 | 
124 | describe('limit in viewport', async () => {
125 |   let utils!: ReturnType<typeof setup>;
126 |   beforeEach(() => {
127 |     utils = setup({
128 |       useDraggableOption: {
129 |         controlStyle: true,
130 |         viewport: true,
131 |       },
132 |       style: {
133 |         ...defaultStyle,
134 |         width: '180px',
135 |         left: 'auto',
136 |         right: '0',
137 |       },
138 |     });
139 |   });
140 | 
141 |   it('should not change transition beyond given rect', async () => {
142 |     const { drag, wrapper } = await utils;
143 |     const targetElement = wrapper.find('#main').element as HTMLElement;
144 |     const rect = targetElement.getBoundingClientRect();
145 |     const startAt = { clientX: rect.left + 5, clientY: rect.top + 5 };
146 |     const delta = { x: 5, y: 5 };
147 | 
148 |     await drag({ start: startAt, delta });
149 |     await wrapper.vm.$nextTick();
150 |     expect(targetElement.style.transform).toContain(`translate(5px, 5px)`);
151 |   });
152 | 
153 |   it('should leave transition as it was before limit', async () => {
154 |     const { wrapper, beginDrag, move } = await utils;
155 |     const targetElement = wrapper.find('#main').element as HTMLElement;
156 | 
157 |     const startAt = { clientX: 0 + 5, clientY: 0 + 5 };
158 |     const delta = { x: 5, y: 1 };
159 | 
160 |     await beginDrag(startAt);
161 |     await move({
162 |       clientX: startAt.clientX + delta.x,
163 |       clientY: startAt.clientY + delta.y,
164 |     });
165 |     await move({
166 |       clientX: startAt.clientX + delta.x + 10,
167 |       clientY: startAt.clientY + delta.y,
168 |     });
169 |     await move({
170 |       clientX: startAt.clientX + delta.x + 25,
171 |       clientY: startAt.clientY + delta.y,
172 |     });
173 |     await move({
174 |       clientX: startAt.clientX + delta.x + 50,
175 |       clientY: startAt.clientY + delta.y,
176 |     });
177 | 
178 |     await wrapper.vm.$nextTick();
179 |     expect(targetElement.style.transform).toContain(`translate(55px, 1px)`);
180 |   });
181 | 
182 |   it('should keep limits when dragging more than once', async () => {
183 |     const { drag, wrapper } = await utils;
184 |     const targetElement = wrapper.find('#main').element as HTMLElement;
185 |     targetElement.style.right = '50px';
186 |     const startAt = { clientX: 5, clientY: 5 };
187 |     const delta = { x: 15, y: 1 };
188 | 
189 |     await drag({ start: startAt, delta });
190 |     await drag({
191 |       start: {
192 |         clientX: startAt.clientX + delta.x,
193 |         clientY: startAt.clientY + delta.y,
194 |       },
195 |       delta: { x: 50, y: 0 },
196 |     });
197 | 
198 |     await wrapper.vm.$nextTick();
199 |     expect(targetElement.style.transform).toContain(`translate(65px, 1px)`);
200 |   });
201 | });
202 | 
203 | // describe('limit in rect', async () => {
204 | //     const limits = {
205 | //         left: 11,
206 | //         right: window.innerWidth - 11,
207 | //         top: 5,
208 | //         bottom: window.innerHeight - 13
209 | //     };
210 | 
211 | //     let utils!: ReturnType<typeof setup>
212 | //     beforeEach(() => {
213 | //         utils = setup({
214 | //             useDraggableOption: {
215 | //                 controlStyle: true,
216 | //                 rectLimits: limits,
217 | //             },
218 | //             style: {
219 | //                 ...defaultStyle,
220 | //                 width: '180px',
221 | //                 left: '20px'
222 | //             }
223 | //         });
224 | //     });
225 | 
226 | //     it('should not change transition beyond given rect', async () => {
227 | //         const { drag, wrapper } = await utils;
228 | //         const targetElement = wrapper.find('#main').element as HTMLElement;
229 | //         const rect = targetElement.getBoundingClientRect();
230 | //         const startAt = { clientX: rect.left + 5, clientY: rect.top + 5 };
231 | //         const delta = { x: -50, y: -90 };
232 | 
233 | //         await drag({ start: startAt, delta });
234 | //         await wrapper.vm.$nextTick()
235 | //         expect(targetElement.style.transform).toContain({
236 | //             left: limits.left,
237 | //             top: limits.top
238 | //         });
239 | //     });
240 | 
241 | //     it('should keep limits when dragging more than once', async () => {
242 | //         const { drag, wrapper } = await utils;
243 | //         const targetElement = wrapper.find('#main').element as HTMLElement;
244 | //         targetElement.style.right = '50px';
245 | //         targetElement.style.left = 'auto';
246 | //         const rect = targetElement.getBoundingClientRect();
247 | 
248 | //         const startAt = { clientX: rect.left + 5, clientY: rect.top + 5 };
249 | //         const delta = { x: 15, y: 1 };
250 | 
251 | //         drag({ start: startAt, delta });
252 | //         drag({
253 | //             start: {
254 | //                 clientX: startAt.clientX + delta.x,
255 | //                 clientY: startAt.clientY + delta.y
256 | //             },
257 | //             delta: { x: 50, y: 0 }
258 | //         });
259 | 
260 | //         const { left, width } = targetElement.getBoundingClientRect();
261 | //         expect(left).toEqual(limits.right - width);
262 | //     });
263 | // });
264 | 
265 | describe('reset drags', () => {
266 |   let utils!: ReturnType<typeof setup>;
267 |   beforeEach(() => {
268 |     utils = setup({ useDraggableOption: { controlStyle: true } });
269 |   });
270 | 
271 |   it('should start dragging from the original position', async () => {
272 |     const { wrapper, drag } = await utils;
273 |     await drag({ start: { clientX: 3, clientY: 5 }, delta: { x: 15, y: 20 } });
274 |     wrapper.find('#reset').trigger('click');
275 |     await wrapper.vm.$nextTick();
276 |     expect((wrapper.find('#main').element as HTMLElement).style.transform).toEqual(
277 |       'translate(0px, 0px)',
278 |     );
279 |   });
280 | 
281 |   describe('after reset', () => {
282 |     it('should start dragging from the original position', async () => {
283 |       const { wrapper, drag } = await utils;
284 |       await drag({ start: { clientX: 3, clientY: 5 }, delta: { x: 15, y: 20 } });
285 |       wrapper.find('#reset').trigger('click');
286 |       await drag({ start: { clientX: 3, clientY: 5 }, delta: { x: 15, y: 20 } });
287 |       expect((wrapper.find('#main').element as HTMLElement).style.transform).toEqual(
288 |         'translate(15px, 20px)',
289 |       );
290 |     });
291 |   });
292 | });
293 | 
294 | describe('useDraggable', () => {
295 |   test('starting drag', async () => {
296 |     const [targetRef] = useDraggable({ controlStyle: true });
297 |     mount({
298 |       setup() {
299 |         targetRef;
300 |         return { targetRef };
301 |       },
302 |       render() {
303 |         return (
304 |           <>
305 |             <h1
306 |               ref={(ele: HTMLElement) => {
307 |                 targetRef.value = ele;
308 |               }}
309 |             >
310 |               {' '}
311 |               click{' '}
312 |             </h1>
313 |           </>
314 |         );
315 |       },
316 |     });
317 |   });
318 | });
319 | const Consumer = defineComponent({
320 |   props: ['useDraggableOption', 'style'],
321 |   setup(props: { useDraggableOption: Parameters<typeof useDraggable>[0]; style: CSSProperties }) {
322 |     const [targetRef, handleRef, { getTargetProps, resetState, delta, dragging }] = useDraggable(
323 |       props.useDraggableOption,
324 |     );
325 |     return () => (
326 |       <div
327 |         class="container"
328 |         ref={targetRef}
329 |         id="main"
330 |         style={props.style || defaultStyle}
331 |         {...getTargetProps()}
332 |       >
333 |         {dragging && <span>Dragging to:</span>}
334 |         <output id="output">
335 |           {delta.value.x}, {delta.value.y}
336 |         </output>
337 |         <button id="handle" class="handle" ref={handleRef}>
338 |           handle
339 |         </button>
340 |         <button id="reset" onClick={resetState}>
341 |           reset
342 |         </button>
343 |       </div>
344 |     );
345 |   },
346 | });
347 | 
348 | const defaultStyle = { position: 'fixed', top: '11px', left: '11px' } as CSSProperties;
349 | async function setup(
350 |   props: { useDraggableOption: Parameters<typeof useDraggable>[0]; style?: CSSProperties } = {
351 |     style: {},
352 |     useDraggableOption: {},
353 |   },
354 | ) {
355 |   const wrapper = mount(
356 |     <Consumer useDraggableOption={props.useDraggableOption} style={props.style} />,
357 |   );
358 |   async function drag({
359 |     start = { clientX: 0, clientY: 0 },
360 |     delta = { x: 0, y: 0 },
361 |     touch = false,
362 |   } = {}) {
363 |     beginDrag(start, touch);
364 |     await wrapper.vm.$nextTick();
365 |     move(
366 |       {
367 |         clientX: start.clientX + delta.x,
368 |         clientY: start.clientY + delta.y,
369 |       },
370 |       touch,
371 |     );
372 |     await wrapper.vm.$nextTick();
373 |     endDrag(
374 |       {
375 |         clientX: start.clientX + delta.x,
376 |         clientY: start.clientY + delta.y,
377 |       },
378 |       touch,
379 |     );
380 |   }
381 | 
382 |   async function beginDrag(start, touch = false) {
383 |     const target = wrapper.find('#handle');
384 |     if (touch) {
385 |       const ev = new TouchEvent('touchstart', {
386 |         bubbles: true,
387 |         cancelable: true,
388 |         touches: [createTouch({ target, ...start })],
389 |       });
390 |       target.element.dispatchEvent(ev);
391 |     } else {
392 |       target.trigger('mousedown', start);
393 |     }
394 |   }
395 | 
396 |   async function move(to, touch = false) {
397 |     const target = wrapper.find('#handle');
398 |     if (touch) {
399 |       const ev = new TouchEvent('touchmove', {
400 |         bubbles: true,
401 |         cancelable: true,
402 |         touches: [
403 |           createTouch({
404 |             target,
405 |             ...to,
406 |           }),
407 |         ],
408 |       });
409 |       document.dispatchEvent(ev);
410 |     } else {
411 |       const ev = new MouseEvent('mousemove', {
412 |         view: window,
413 |         bubbles: true,
414 |         cancelable: true,
415 |         ...to,
416 |       });
417 |       document.dispatchEvent(ev);
418 |     }
419 |   }
420 | 
421 |   async function endDrag(end, touch = false) {
422 |     const target = wrapper.find('#handle');
423 |     if (touch) {
424 |       const ev = new TouchEvent('touchend', {
425 |         bubbles: true,
426 |         cancelable: true,
427 |         touches: [
428 |           createTouch({
429 |             target,
430 |             ...end,
431 |           }),
432 |         ],
433 |       });
434 |       document.dispatchEvent(ev);
435 |     } else {
436 |       const ev = new MouseEvent('mouseup', {
437 |         view: window,
438 |         bubbles: true,
439 |         cancelable: true,
440 |         ...end,
441 |       });
442 |       document.dispatchEvent(ev);
443 |     }
444 |   }
445 | 
446 |   return {
447 |     wrapper,
448 |     beginDrag,
449 |     move,
450 |     drag,
451 |   };
452 | }
453 | 
454 | class Touch {
455 |   constructor(touchInit: any) {
456 |     this.altitudeAngle = touchInit.altitudeAngle;
457 |     this.azimuthAngle = touchInit.azimuthAngle;
458 |     this.clientX = touchInit.clientX;
459 |     this.clientY = touchInit.clientY;
460 |     this.force = touchInit.force;
461 |     this.identifier = touchInit.identifier;
462 |     this.pageX = touchInit.pageX;
463 |     this.pageY = touchInit.pageY;
464 |     this.radiusX = touchInit.radiusX;
465 |     this.radiusY = touchInit.radiusY;
466 |     this.rotationAngle = touchInit.rotationAngle;
467 |     this.screenX = touchInit.screenX;
468 |     this.screenY = touchInit.screenY;
469 |     this.target = touchInit.target;
470 |     this.touchType = touchInit.touchType;
471 |   }
472 |   readonly altitudeAngle: number;
473 |   readonly azimuthAngle: number;
474 |   readonly clientX: number;
475 |   readonly clientY: number;
476 |   readonly force: number;
477 |   readonly identifier: number;
478 |   readonly pageX: number;
479 |   readonly pageY: number;
480 |   readonly radiusX: number;
481 |   readonly radiusY: number;
482 |   readonly rotationAngle: number;
483 |   readonly screenX: number;
484 |   readonly screenY: number;
485 |   readonly target: EventTarget;
486 |   readonly touchType: TouchType;
487 | }
488 | function createTouch({ target, ...rest }) {
489 |   return new Touch({ identifier: Date.now(), target, ...rest });
490 | }
491 | 


--------------------------------------------------------------------------------