@opentiny/vue-hooks 3.22.0 → 3.24.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/src/useTouch.d.ts +2 -2
- package/dist/src/vue-emitter.d.ts +2 -2
- package/dist/src/vue-popper.d.ts +20 -0
- package/dist/src/vue-popup.d.ts +1 -1
- package/package.json +2 -2
- package/src/useRect.ts +3 -3
- package/src/useTouch.ts +5 -5
- package/src/vue-emitter.ts +5 -5
- package/src/vue-popper.ts +10 -13
- package/src/vue-popup.ts +4 -4
- package/types/shared.type.ts +15 -0
package/dist/src/useTouch.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export declare const useTouch: (ref: any) => () => {
|
|
2
|
-
move: (event:
|
|
3
|
-
start: (event:
|
|
2
|
+
move: (event: TouchEvent) => void;
|
|
3
|
+
start: (event: TouchEvent) => void;
|
|
4
4
|
reset: () => void;
|
|
5
5
|
isVertical: () => boolean;
|
|
6
6
|
isHorizontal: () => boolean;
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
*
|
|
11
11
|
*/
|
|
12
12
|
declare const _default: (vm: any) => {
|
|
13
|
-
dispatch(componentName:
|
|
14
|
-
broadcast(componentName:
|
|
13
|
+
dispatch(componentName: string, eventName: string, params: any): void;
|
|
14
|
+
broadcast(componentName: string, eventName: string, params: any): void;
|
|
15
15
|
};
|
|
16
16
|
export default _default;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { PopperJS } from '@opentiny/utils';
|
|
2
|
+
import { ISharedRenderlessFunctionParams } from '../types/shared.type';
|
|
3
|
+
export interface IPopperState {
|
|
4
|
+
popperJS: PopperJS | null;
|
|
5
|
+
appended: boolean;
|
|
6
|
+
popperElm: HTMLElement;
|
|
7
|
+
showPopper: boolean;
|
|
8
|
+
referenceElm: HTMLElement;
|
|
9
|
+
currentPlacement: string;
|
|
10
|
+
}
|
|
11
|
+
type IPopperInputParams = ISharedRenderlessFunctionParams<never> & {
|
|
12
|
+
api: {
|
|
13
|
+
open: Function;
|
|
14
|
+
close: Function;
|
|
15
|
+
};
|
|
16
|
+
state: IPopperState;
|
|
17
|
+
props: any;
|
|
18
|
+
};
|
|
19
|
+
export declare const userPopper: (options: IPopperInputParams) => any;
|
|
20
|
+
export {};
|
package/dist/src/vue-popup.d.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@opentiny/vue-hooks",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.24.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "",
|
|
6
6
|
"license": "ISC",
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
},
|
|
12
12
|
"dependencies": {
|
|
13
13
|
"@floating-ui/dom": "^1.6.9",
|
|
14
|
-
"@opentiny/utils": "~3.
|
|
14
|
+
"@opentiny/utils": "~3.24.0"
|
|
15
15
|
},
|
|
16
16
|
"devDependencies": {
|
|
17
17
|
"typescript": "~5.3.3",
|
package/src/useRect.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
const isWindow = (val) => val === window
|
|
2
|
-
const makeDOMRect = (width, height) => ({
|
|
1
|
+
const isWindow = (val: any) => val === window
|
|
2
|
+
const makeDOMRect = (width: number, height: number) => ({
|
|
3
3
|
top: 0,
|
|
4
4
|
left: 0,
|
|
5
5
|
width,
|
|
@@ -8,7 +8,7 @@ const makeDOMRect = (width, height) => ({
|
|
|
8
8
|
bottom: height
|
|
9
9
|
})
|
|
10
10
|
|
|
11
|
-
export const useRect = (unref) => (elOrRef) => {
|
|
11
|
+
export const useRect = (unref: any) => (elOrRef: any) => {
|
|
12
12
|
const el = unref(elOrRef)
|
|
13
13
|
|
|
14
14
|
if (isWindow(el)) {
|
package/src/useTouch.ts
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
const TAP_OFFSET = 5
|
|
2
2
|
|
|
3
|
-
const getDirection = (x, y) => {
|
|
3
|
+
const getDirection = (x: number, y: number) => {
|
|
4
4
|
if (x > y) return 'horizontal'
|
|
5
5
|
if (y > x) return 'vertical'
|
|
6
6
|
return ''
|
|
7
7
|
}
|
|
8
8
|
|
|
9
|
-
const touchEvent = (event) => event.touches[0]
|
|
9
|
+
const touchEvent = (event: TouchEvent) => event.touches[0]
|
|
10
10
|
|
|
11
|
-
export const useTouch = (ref) => () => {
|
|
11
|
+
export const useTouch = (ref: any) => () => {
|
|
12
12
|
const startX = ref(0)
|
|
13
13
|
const startY = ref(0)
|
|
14
14
|
const deltaX = ref(0)
|
|
@@ -30,14 +30,14 @@ export const useTouch = (ref) => () => {
|
|
|
30
30
|
isTap.value = true
|
|
31
31
|
}
|
|
32
32
|
|
|
33
|
-
const start = (event) => {
|
|
33
|
+
const start = (event: TouchEvent) => {
|
|
34
34
|
reset()
|
|
35
35
|
const touch = touchEvent(event)
|
|
36
36
|
startX.value = touch.clientX
|
|
37
37
|
startY.value = touch.clientY
|
|
38
38
|
}
|
|
39
39
|
|
|
40
|
-
const move = (event) => {
|
|
40
|
+
const move = (event: TouchEvent) => {
|
|
41
41
|
const touch = touchEvent(event)
|
|
42
42
|
// safari back will set clientX to negative number
|
|
43
43
|
deltaX.value = (touch.clientX < 0 ? 0 : touch.clientX) - startX.value
|
package/src/vue-emitter.ts
CHANGED
|
@@ -12,9 +12,9 @@
|
|
|
12
12
|
*/
|
|
13
13
|
|
|
14
14
|
// 全局未引用 ,待移除
|
|
15
|
-
export default (vm) => {
|
|
16
|
-
const broadcast = (vm, componentName, eventName, params) => {
|
|
17
|
-
vm.$children.forEach((child) => {
|
|
15
|
+
export default (vm: any) => {
|
|
16
|
+
const broadcast = (vm: any, componentName: string, eventName: string, params: any) => {
|
|
17
|
+
vm.$children.forEach((child: any) => {
|
|
18
18
|
const name = child.$options.componentName
|
|
19
19
|
|
|
20
20
|
if (name === componentName) {
|
|
@@ -26,7 +26,7 @@ export default (vm) => {
|
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
return {
|
|
29
|
-
dispatch(componentName, eventName, params) {
|
|
29
|
+
dispatch(componentName: string, eventName: string, params: any) {
|
|
30
30
|
let parent = vm.$parent || vm.$root
|
|
31
31
|
let name = parent.$options.componentName
|
|
32
32
|
|
|
@@ -42,7 +42,7 @@ export default (vm) => {
|
|
|
42
42
|
parent.$emit.apply(parent, [eventName].concat(params))
|
|
43
43
|
}
|
|
44
44
|
},
|
|
45
|
-
broadcast(componentName, eventName, params) {
|
|
45
|
+
broadcast(componentName: string, eventName: string, params: any) {
|
|
46
46
|
broadcast(vm, componentName, eventName, params)
|
|
47
47
|
}
|
|
48
48
|
}
|
package/src/vue-popper.ts
CHANGED
|
@@ -11,14 +11,11 @@
|
|
|
11
11
|
*/
|
|
12
12
|
|
|
13
13
|
import { PopupManager, PopperJS, on, off, isDisplayNone } from '@opentiny/utils'
|
|
14
|
-
|
|
15
|
-
// todo
|
|
16
|
-
import type { ISharedRenderlessFunctionParams } from 'types/shared.type'
|
|
17
|
-
|
|
14
|
+
import type { ISharedRenderlessFunctionParams } from '../types/shared.type'
|
|
18
15
|
import { isServer } from '@opentiny/utils'
|
|
19
16
|
|
|
20
17
|
export interface IPopperState {
|
|
21
|
-
popperJS:
|
|
18
|
+
popperJS: PopperJS | null
|
|
22
19
|
appended: boolean
|
|
23
20
|
popperElm: HTMLElement
|
|
24
21
|
showPopper: boolean
|
|
@@ -48,10 +45,10 @@ const getReference = ({ state, props, vm, slots }: Pick<IPopperInputParams, 'sta
|
|
|
48
45
|
return reference
|
|
49
46
|
}
|
|
50
47
|
|
|
51
|
-
const getReferMaxZIndex = (reference) => {
|
|
48
|
+
const getReferMaxZIndex = (reference: HTMLElement) => {
|
|
52
49
|
if (!reference || !reference.nodeType) return
|
|
53
50
|
|
|
54
|
-
let getZIndex = (dom) => parseInt(window.getComputedStyle(dom).zIndex, 10) || 0
|
|
51
|
+
let getZIndex = (dom: HTMLElement) => parseInt(window.getComputedStyle(dom).zIndex, 10) || 0
|
|
55
52
|
let max = getZIndex(reference)
|
|
56
53
|
let z
|
|
57
54
|
|
|
@@ -90,14 +87,14 @@ export const userPopper = (options: IPopperInputParams) => {
|
|
|
90
87
|
toRefs,
|
|
91
88
|
popperVmRef
|
|
92
89
|
} = options
|
|
93
|
-
const state = reactive
|
|
90
|
+
const state = reactive({
|
|
94
91
|
popperJS: null as any,
|
|
95
92
|
appended: false, // arrow 是否添加
|
|
96
93
|
popperElm: null as any,
|
|
97
94
|
showPopper: props.manual ? Boolean(props.modelValue) : false,
|
|
98
95
|
referenceElm: null as any,
|
|
99
96
|
currentPlacement: ''
|
|
100
|
-
})
|
|
97
|
+
}) as IPopperState
|
|
101
98
|
|
|
102
99
|
/** 创建箭头函数 */
|
|
103
100
|
const appendArrow = (el: HTMLElement) => {
|
|
@@ -123,11 +120,11 @@ export const userPopper = (options: IPopperInputParams) => {
|
|
|
123
120
|
}
|
|
124
121
|
}
|
|
125
122
|
|
|
126
|
-
const nextZIndex = (reference) => {
|
|
123
|
+
const nextZIndex = (reference: HTMLElement) => {
|
|
127
124
|
return props.zIndex === 'relative' ? getReferMaxZIndex(reference) : PopupManager.nextZIndex()
|
|
128
125
|
}
|
|
129
126
|
|
|
130
|
-
const createPopper = (dom) => {
|
|
127
|
+
const createPopper = (dom: HTMLElement) => {
|
|
131
128
|
if (isServer) {
|
|
132
129
|
return
|
|
133
130
|
}
|
|
@@ -183,7 +180,7 @@ export const userPopper = (options: IPopperInputParams) => {
|
|
|
183
180
|
/** 第一次 updatePopper 的时候,才真正执行创建
|
|
184
181
|
* popperElmOrTrue===true的场景仅在select组件动态更新面版时,不更新zIndex
|
|
185
182
|
*/
|
|
186
|
-
const updatePopper = (popperElmOrTrue?: HTMLElement) => {
|
|
183
|
+
const updatePopper = (popperElmOrTrue?: HTMLElement | boolean) => {
|
|
187
184
|
if (popperElmOrTrue && popperElmOrTrue !== true) {
|
|
188
185
|
state.popperElm = popperElmOrTrue
|
|
189
186
|
}
|
|
@@ -230,7 +227,7 @@ export const userPopper = (options: IPopperInputParams) => {
|
|
|
230
227
|
// 注意: 一直以来,state.showPopper 为false时,并未调用doDestroy. 像popover只是依赖这个值来 给reference元素 v-show一下
|
|
231
228
|
watch(
|
|
232
229
|
() => state.showPopper,
|
|
233
|
-
(val) => {
|
|
230
|
+
(val: boolean) => {
|
|
234
231
|
if (props.disabled) {
|
|
235
232
|
return
|
|
236
233
|
}
|
package/src/vue-popup.ts
CHANGED
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
import { merge, PopupManager, addClass } from '@opentiny/utils'
|
|
14
14
|
|
|
15
15
|
// todo
|
|
16
|
-
import type { ISharedRenderlessFunctionParams } from 'types/shared.type'
|
|
16
|
+
import type { ISharedRenderlessFunctionParams } from '../types/shared.type'
|
|
17
17
|
import { isServer } from '@opentiny/utils'
|
|
18
18
|
|
|
19
19
|
let idSeed = 1
|
|
@@ -53,7 +53,7 @@ const setWatchFn = ({
|
|
|
53
53
|
|
|
54
54
|
watch(
|
|
55
55
|
() => props.visible,
|
|
56
|
-
(val) => {
|
|
56
|
+
(val: boolean) => {
|
|
57
57
|
if (val) {
|
|
58
58
|
if (vm._opening) {
|
|
59
59
|
return
|
|
@@ -182,10 +182,10 @@ const closeFn =
|
|
|
182
182
|
*/
|
|
183
183
|
export const usePopup = (options: IPopupInputParams) => {
|
|
184
184
|
const { api, nextTick, onBeforeUnmount, onMounted, props, reactive, toRefs, vm, watch } = options
|
|
185
|
-
const state = reactive
|
|
185
|
+
const state = reactive({
|
|
186
186
|
opened: false,
|
|
187
187
|
rendered: false
|
|
188
|
-
})
|
|
188
|
+
}) as IPopupState
|
|
189
189
|
|
|
190
190
|
setWatchFn({ onMounted, onBeforeUnmount, watch, vm, api, props, state, nextTick })
|
|
191
191
|
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export interface ISharedRenderlessFunctionParams<T> {
|
|
2
|
+
vm: any
|
|
3
|
+
props: any
|
|
4
|
+
slots: any
|
|
5
|
+
emit: Function
|
|
6
|
+
parent: any
|
|
7
|
+
nextTick: Function
|
|
8
|
+
watch: Function
|
|
9
|
+
reactive: Function
|
|
10
|
+
toRefs: Function
|
|
11
|
+
onBeforeUnmount: Function
|
|
12
|
+
onMounted: Function
|
|
13
|
+
onDeactivated: Function
|
|
14
|
+
popperVmRef: any
|
|
15
|
+
}
|