@maple-design/use 0.0.0-stage → 1.0.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/lib/index.cjs +621 -0
- package/lib/index.d.cts +109 -0
- package/lib/index.d.ts +109 -0
- package/lib/index.js +589 -0
- package/package.json +51 -3
- package/README.md +0 -3
package/lib/index.d.cts
ADDED
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
import * as vue from 'vue';
|
|
2
|
+
import { Ref, ComponentInternalInstance, ComputedRef, WatchSource } from 'vue';
|
|
3
|
+
import { MotionState } from '@maple-design/shared';
|
|
4
|
+
|
|
5
|
+
type UseEventListenerTarget = EventTarget | Ref<EventTarget | undefined | null> | (() => EventTarget | undefined | null);
|
|
6
|
+
interface UseEventListenerOptions {
|
|
7
|
+
capture?: boolean;
|
|
8
|
+
passive?: boolean;
|
|
9
|
+
}
|
|
10
|
+
declare function useEventListener<T extends keyof DocumentEventMap>(target: UseEventListenerTarget, type: T, listener: (event: DocumentEventMap[T]) => void, options?: UseEventListenerOptions): () => void;
|
|
11
|
+
declare function useEventListener(target: UseEventListenerTarget, type: string, listener: EventListener, options?: UseEventListenerOptions): () => void;
|
|
12
|
+
|
|
13
|
+
type UseClickOutsideTarget = Element | Ref<Element | undefined | null> | (() => Element | undefined | null);
|
|
14
|
+
declare function useClickOutside(target: UseClickOutsideTarget, type: string, listener: EventListener): void;
|
|
15
|
+
|
|
16
|
+
declare function onSmartMounted(hook: () => void): void;
|
|
17
|
+
|
|
18
|
+
declare function onSmartUnmounted(hook: () => void): void;
|
|
19
|
+
|
|
20
|
+
interface UseChildrenBaseProvider<C> {
|
|
21
|
+
childInstances: ComponentInternalInstance[];
|
|
22
|
+
collect(instance: ComponentInternalInstance, childProvider: C): void;
|
|
23
|
+
clear(instance: ComponentInternalInstance, childProvider: C): void;
|
|
24
|
+
}
|
|
25
|
+
declare function useChildren<P, C>(key: symbol | string): {
|
|
26
|
+
length: ComputedRef<number>;
|
|
27
|
+
childProviders: C[];
|
|
28
|
+
bindChildren: (parentProvider: P) => void;
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
declare function keyInProvides(key: symbol | string): boolean;
|
|
32
|
+
declare function useParent<P, C>(key: symbol | string): {
|
|
33
|
+
index: null;
|
|
34
|
+
parentProvider: null;
|
|
35
|
+
bindParent: null;
|
|
36
|
+
} | {
|
|
37
|
+
index: ComputedRef<number>;
|
|
38
|
+
parentProvider: Omit<P & UseChildrenBaseProvider<C>, "clear" | "childInstances" | "collect">;
|
|
39
|
+
bindParent: (childProvider: C) => void;
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
declare function onWindowResize(listener: EventListener): void;
|
|
43
|
+
|
|
44
|
+
declare function useInitialized<T>(source: WatchSource<T>, value: T): vue.Ref<boolean, boolean>;
|
|
45
|
+
|
|
46
|
+
type TouchDirection = 'horizontal' | 'vertical';
|
|
47
|
+
declare function useTouch(): {
|
|
48
|
+
startX: vue.Ref<number, number>;
|
|
49
|
+
startY: vue.Ref<number, number>;
|
|
50
|
+
deltaX: vue.Ref<number, number>;
|
|
51
|
+
deltaY: vue.Ref<number, number>;
|
|
52
|
+
offsetX: vue.Ref<number, number>;
|
|
53
|
+
offsetY: vue.Ref<number, number>;
|
|
54
|
+
prevX: vue.Ref<number, number>;
|
|
55
|
+
prevY: vue.Ref<number, number>;
|
|
56
|
+
moveX: vue.Ref<number, number>;
|
|
57
|
+
moveY: vue.Ref<number, number>;
|
|
58
|
+
direction: vue.Ref<TouchDirection | undefined, TouchDirection | undefined>;
|
|
59
|
+
touching: vue.Ref<boolean, boolean>;
|
|
60
|
+
dragging: vue.Ref<boolean, boolean>;
|
|
61
|
+
startTime: vue.Ref<number, number>;
|
|
62
|
+
distance: vue.Ref<number, number>;
|
|
63
|
+
resetTouch: () => void;
|
|
64
|
+
startTouch: (event: TouchEvent) => void;
|
|
65
|
+
moveTouch: (event: TouchEvent) => void;
|
|
66
|
+
endTouch: () => void;
|
|
67
|
+
isReachTop: (element: Element | Window) => boolean;
|
|
68
|
+
isReachBottom: (element: Element, offset?: number) => boolean;
|
|
69
|
+
};
|
|
70
|
+
|
|
71
|
+
/** Vue 3.5 supplies hydration-safe IDs. Earlier Vue versions defer IDs to mount. */
|
|
72
|
+
declare function useId(): vue.Ref<string | undefined, string | undefined>;
|
|
73
|
+
|
|
74
|
+
declare function useClientId(): vue.Ref<string | undefined, string | undefined>;
|
|
75
|
+
|
|
76
|
+
interface UseWindowSizeOptions {
|
|
77
|
+
initialWidth?: number;
|
|
78
|
+
initialHeight?: number;
|
|
79
|
+
}
|
|
80
|
+
declare function useWindowSize(options?: UseWindowSizeOptions): {
|
|
81
|
+
width: vue.Ref<number, number>;
|
|
82
|
+
height: vue.Ref<number, number>;
|
|
83
|
+
};
|
|
84
|
+
|
|
85
|
+
type ModelEvent<T> = [T][T extends any ? 0 : never];
|
|
86
|
+
interface UseVModelOptions<P, K extends keyof P, E extends string = `update:${K & (string | number)}`> {
|
|
87
|
+
passive?: boolean;
|
|
88
|
+
eventName?: E;
|
|
89
|
+
defaultValue?: P[K];
|
|
90
|
+
emit?: (event: ModelEvent<E>, value: P[K]) => void;
|
|
91
|
+
}
|
|
92
|
+
declare function useVModel<P extends Record<string, any>, K extends keyof P, E extends string = `update:${K & (string | number)}`>(props: P, key: K, options?: UseVModelOptions<P, K, E>): Ref<P[K]>;
|
|
93
|
+
|
|
94
|
+
interface UseMotionOptions {
|
|
95
|
+
from: number | (() => number);
|
|
96
|
+
to: number | (() => number);
|
|
97
|
+
duration?: number | (() => number);
|
|
98
|
+
timingFunction?: (v: number) => number;
|
|
99
|
+
onFinished?: (value: number) => void;
|
|
100
|
+
}
|
|
101
|
+
declare function useMotion(options: UseMotionOptions): {
|
|
102
|
+
value: vue.Ref<number, number>;
|
|
103
|
+
state: vue.Ref<MotionState, MotionState>;
|
|
104
|
+
start: () => void;
|
|
105
|
+
pause: () => void;
|
|
106
|
+
reset: () => void;
|
|
107
|
+
};
|
|
108
|
+
|
|
109
|
+
export { TouchDirection, UseChildrenBaseProvider, UseClickOutsideTarget, UseEventListenerOptions, UseEventListenerTarget, UseMotionOptions, UseVModelOptions, UseWindowSizeOptions, keyInProvides, onSmartMounted, onSmartUnmounted, onWindowResize, useChildren, useClickOutside, useClientId, useEventListener, useId, useInitialized, useMotion, useParent, useTouch, useVModel, useWindowSize };
|
package/lib/index.d.ts
ADDED
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
import * as vue from 'vue';
|
|
2
|
+
import { Ref, ComponentInternalInstance, ComputedRef, WatchSource } from 'vue';
|
|
3
|
+
import { MotionState } from '@maple-design/shared';
|
|
4
|
+
|
|
5
|
+
type UseEventListenerTarget = EventTarget | Ref<EventTarget | undefined | null> | (() => EventTarget | undefined | null);
|
|
6
|
+
interface UseEventListenerOptions {
|
|
7
|
+
capture?: boolean;
|
|
8
|
+
passive?: boolean;
|
|
9
|
+
}
|
|
10
|
+
declare function useEventListener<T extends keyof DocumentEventMap>(target: UseEventListenerTarget, type: T, listener: (event: DocumentEventMap[T]) => void, options?: UseEventListenerOptions): () => void;
|
|
11
|
+
declare function useEventListener(target: UseEventListenerTarget, type: string, listener: EventListener, options?: UseEventListenerOptions): () => void;
|
|
12
|
+
|
|
13
|
+
type UseClickOutsideTarget = Element | Ref<Element | undefined | null> | (() => Element | undefined | null);
|
|
14
|
+
declare function useClickOutside(target: UseClickOutsideTarget, type: string, listener: EventListener): void;
|
|
15
|
+
|
|
16
|
+
declare function onSmartMounted(hook: () => void): void;
|
|
17
|
+
|
|
18
|
+
declare function onSmartUnmounted(hook: () => void): void;
|
|
19
|
+
|
|
20
|
+
interface UseChildrenBaseProvider<C> {
|
|
21
|
+
childInstances: ComponentInternalInstance[];
|
|
22
|
+
collect(instance: ComponentInternalInstance, childProvider: C): void;
|
|
23
|
+
clear(instance: ComponentInternalInstance, childProvider: C): void;
|
|
24
|
+
}
|
|
25
|
+
declare function useChildren<P, C>(key: symbol | string): {
|
|
26
|
+
length: ComputedRef<number>;
|
|
27
|
+
childProviders: C[];
|
|
28
|
+
bindChildren: (parentProvider: P) => void;
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
declare function keyInProvides(key: symbol | string): boolean;
|
|
32
|
+
declare function useParent<P, C>(key: symbol | string): {
|
|
33
|
+
index: null;
|
|
34
|
+
parentProvider: null;
|
|
35
|
+
bindParent: null;
|
|
36
|
+
} | {
|
|
37
|
+
index: ComputedRef<number>;
|
|
38
|
+
parentProvider: Omit<P & UseChildrenBaseProvider<C>, "clear" | "childInstances" | "collect">;
|
|
39
|
+
bindParent: (childProvider: C) => void;
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
declare function onWindowResize(listener: EventListener): void;
|
|
43
|
+
|
|
44
|
+
declare function useInitialized<T>(source: WatchSource<T>, value: T): vue.Ref<boolean, boolean>;
|
|
45
|
+
|
|
46
|
+
type TouchDirection = 'horizontal' | 'vertical';
|
|
47
|
+
declare function useTouch(): {
|
|
48
|
+
startX: vue.Ref<number, number>;
|
|
49
|
+
startY: vue.Ref<number, number>;
|
|
50
|
+
deltaX: vue.Ref<number, number>;
|
|
51
|
+
deltaY: vue.Ref<number, number>;
|
|
52
|
+
offsetX: vue.Ref<number, number>;
|
|
53
|
+
offsetY: vue.Ref<number, number>;
|
|
54
|
+
prevX: vue.Ref<number, number>;
|
|
55
|
+
prevY: vue.Ref<number, number>;
|
|
56
|
+
moveX: vue.Ref<number, number>;
|
|
57
|
+
moveY: vue.Ref<number, number>;
|
|
58
|
+
direction: vue.Ref<TouchDirection | undefined, TouchDirection | undefined>;
|
|
59
|
+
touching: vue.Ref<boolean, boolean>;
|
|
60
|
+
dragging: vue.Ref<boolean, boolean>;
|
|
61
|
+
startTime: vue.Ref<number, number>;
|
|
62
|
+
distance: vue.Ref<number, number>;
|
|
63
|
+
resetTouch: () => void;
|
|
64
|
+
startTouch: (event: TouchEvent) => void;
|
|
65
|
+
moveTouch: (event: TouchEvent) => void;
|
|
66
|
+
endTouch: () => void;
|
|
67
|
+
isReachTop: (element: Element | Window) => boolean;
|
|
68
|
+
isReachBottom: (element: Element, offset?: number) => boolean;
|
|
69
|
+
};
|
|
70
|
+
|
|
71
|
+
/** Vue 3.5 supplies hydration-safe IDs. Earlier Vue versions defer IDs to mount. */
|
|
72
|
+
declare function useId(): vue.Ref<string | undefined, string | undefined>;
|
|
73
|
+
|
|
74
|
+
declare function useClientId(): vue.Ref<string | undefined, string | undefined>;
|
|
75
|
+
|
|
76
|
+
interface UseWindowSizeOptions {
|
|
77
|
+
initialWidth?: number;
|
|
78
|
+
initialHeight?: number;
|
|
79
|
+
}
|
|
80
|
+
declare function useWindowSize(options?: UseWindowSizeOptions): {
|
|
81
|
+
width: vue.Ref<number, number>;
|
|
82
|
+
height: vue.Ref<number, number>;
|
|
83
|
+
};
|
|
84
|
+
|
|
85
|
+
type ModelEvent<T> = [T][T extends any ? 0 : never];
|
|
86
|
+
interface UseVModelOptions<P, K extends keyof P, E extends string = `update:${K & (string | number)}`> {
|
|
87
|
+
passive?: boolean;
|
|
88
|
+
eventName?: E;
|
|
89
|
+
defaultValue?: P[K];
|
|
90
|
+
emit?: (event: ModelEvent<E>, value: P[K]) => void;
|
|
91
|
+
}
|
|
92
|
+
declare function useVModel<P extends Record<string, any>, K extends keyof P, E extends string = `update:${K & (string | number)}`>(props: P, key: K, options?: UseVModelOptions<P, K, E>): Ref<P[K]>;
|
|
93
|
+
|
|
94
|
+
interface UseMotionOptions {
|
|
95
|
+
from: number | (() => number);
|
|
96
|
+
to: number | (() => number);
|
|
97
|
+
duration?: number | (() => number);
|
|
98
|
+
timingFunction?: (v: number) => number;
|
|
99
|
+
onFinished?: (value: number) => void;
|
|
100
|
+
}
|
|
101
|
+
declare function useMotion(options: UseMotionOptions): {
|
|
102
|
+
value: vue.Ref<number, number>;
|
|
103
|
+
state: vue.Ref<MotionState, MotionState>;
|
|
104
|
+
start: () => void;
|
|
105
|
+
pause: () => void;
|
|
106
|
+
reset: () => void;
|
|
107
|
+
};
|
|
108
|
+
|
|
109
|
+
export { TouchDirection, UseChildrenBaseProvider, UseClickOutsideTarget, UseEventListenerOptions, UseEventListenerTarget, UseMotionOptions, UseVModelOptions, UseWindowSizeOptions, keyInProvides, onSmartMounted, onSmartUnmounted, onWindowResize, useChildren, useClickOutside, useClientId, useEventListener, useId, useInitialized, useMotion, useParent, useTouch, useVModel, useWindowSize };
|