@destyler/carousel 0.0.7-beta.5 → 0.0.7-beta.9
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/index.d.ts +221 -218
- package/dist/index.js +718 -0
- package/package.json +12 -17
- package/dist/index.cjs +0 -684
- package/dist/index.d.cts +0 -249
- package/dist/index.d.mts +0 -249
- package/dist/index.mjs +0 -674
package/dist/index.d.ts
CHANGED
|
@@ -1,249 +1,252 @@
|
|
|
1
|
-
import * as
|
|
2
|
-
import
|
|
3
|
-
|
|
4
|
-
import
|
|
5
|
-
import { StateMachine, ContextRef, Machine } from '@zag-js/core';
|
|
6
|
-
|
|
7
|
-
declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "itemGroup" | "item" | "control" | "nextTrigger" | "prevTrigger" | "indicatorGroup" | "indicator" | "autoplayTrigger">;
|
|
1
|
+
import * as _destyler_anatomy0 from "@destyler/anatomy";
|
|
2
|
+
import * as _destyler_xstate0 from "@destyler/xstate";
|
|
3
|
+
import { AnyEventObject, ContextRef, Machine, XSend, XState } from "@destyler/xstate";
|
|
4
|
+
import { CommonProperties, DirectionProperty, NormalizeProps, Orientation, OrientationProperty, PropTypes, RequiredBy } from "@destyler/types";
|
|
8
5
|
|
|
6
|
+
//#region src/anatomy.d.ts
|
|
7
|
+
declare const anatomy: _destyler_anatomy0.AnatomyInstance<"root" | "item" | "itemGroup" | "nextTrigger" | "prevTrigger" | "indicatorGroup" | "indicator" | "control" | "autoplayTrigger">;
|
|
8
|
+
//#endregion
|
|
9
|
+
//#region src/types.d.ts
|
|
9
10
|
interface PageChangeDetails {
|
|
10
|
-
|
|
11
|
-
|
|
11
|
+
page: number;
|
|
12
|
+
pageSnapPoint: number;
|
|
12
13
|
}
|
|
13
14
|
interface DragStatusDetails {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
15
|
+
type: 'dragging.start' | 'dragging' | 'dragging.end';
|
|
16
|
+
page: number;
|
|
17
|
+
isDragging: boolean;
|
|
17
18
|
}
|
|
18
19
|
interface AutoplayStatusDetails {
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
20
|
+
type: 'autoplay.start' | 'autoplay' | 'autoplay.stop';
|
|
21
|
+
page: number;
|
|
22
|
+
isPlaying: boolean;
|
|
22
23
|
}
|
|
23
24
|
interface IntlTranslations {
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
25
|
+
nextTrigger: string;
|
|
26
|
+
prevTrigger: string;
|
|
27
|
+
indicator: (index: number) => string;
|
|
28
|
+
item: (index: number, count: number) => string;
|
|
29
|
+
autoplayStart: string;
|
|
30
|
+
autoplayStop: string;
|
|
30
31
|
}
|
|
31
32
|
type ElementIds = Partial<{
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
33
|
+
root: string;
|
|
34
|
+
item: (index: number) => string;
|
|
35
|
+
itemGroup: string;
|
|
36
|
+
nextTrigger: string;
|
|
37
|
+
prevTrigger: string;
|
|
38
|
+
indicatorGroup: string;
|
|
39
|
+
indicator: (index: number) => string;
|
|
39
40
|
}>;
|
|
40
41
|
interface PublicContext extends DirectionProperty, CommonProperties, OrientationProperty {
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
42
|
+
/**
|
|
43
|
+
* The ids of the elements in the carousel. Useful for composition.
|
|
44
|
+
*/
|
|
45
|
+
ids?: ElementIds | undefined;
|
|
46
|
+
/**
|
|
47
|
+
* The localized messages to use.
|
|
48
|
+
*/
|
|
49
|
+
translations: IntlTranslations;
|
|
50
|
+
/**
|
|
51
|
+
* The number of slides to show at a time.
|
|
52
|
+
* @default 1
|
|
53
|
+
*/
|
|
54
|
+
slidesPerPage: number;
|
|
55
|
+
/**
|
|
56
|
+
* The number of slides to scroll at a time.
|
|
57
|
+
*
|
|
58
|
+
* When set to `auto`, the number of slides to scroll is determined by the
|
|
59
|
+
* `slidesPerPage` property.
|
|
60
|
+
*
|
|
61
|
+
* @default "auto"
|
|
62
|
+
*/
|
|
63
|
+
slidesPerMove: number | 'auto';
|
|
64
|
+
/**
|
|
65
|
+
* Whether to scroll automatically. The default delay is 4000ms.
|
|
66
|
+
* @default false
|
|
67
|
+
*/
|
|
68
|
+
autoplay?: boolean | {
|
|
69
|
+
delay: number;
|
|
70
|
+
} | undefined;
|
|
71
|
+
/**
|
|
72
|
+
* Whether to allow scrolling via dragging with mouse
|
|
73
|
+
* @default false
|
|
74
|
+
*/
|
|
75
|
+
allowMouseDrag: boolean;
|
|
76
|
+
/**
|
|
77
|
+
* Whether the carousel should loop around.
|
|
78
|
+
* @default false
|
|
79
|
+
*/
|
|
80
|
+
loop: boolean;
|
|
81
|
+
/**
|
|
82
|
+
* The index of the active page.
|
|
83
|
+
*/
|
|
84
|
+
page: number;
|
|
85
|
+
/**
|
|
86
|
+
* The amount of space between items.
|
|
87
|
+
* @default "0px"
|
|
88
|
+
*/
|
|
89
|
+
spacing: string;
|
|
90
|
+
/**
|
|
91
|
+
* Defines the extra space added around the scrollable area,
|
|
92
|
+
* enabling nearby items to remain partially in view.
|
|
93
|
+
*/
|
|
94
|
+
padding?: string;
|
|
95
|
+
/**
|
|
96
|
+
* Function called when the page changes.
|
|
97
|
+
*/
|
|
98
|
+
onPageChange?: ((details: PageChangeDetails) => void) | undefined;
|
|
99
|
+
/**
|
|
100
|
+
* The threshold for determining if an item is in view.
|
|
101
|
+
* @default 0.6
|
|
102
|
+
*/
|
|
103
|
+
inViewThreshold: number | number[];
|
|
104
|
+
/**
|
|
105
|
+
* The snap type of the item.
|
|
106
|
+
* @default "mandatory"
|
|
107
|
+
*/
|
|
108
|
+
snapType: 'proximity' | 'mandatory';
|
|
109
|
+
/**
|
|
110
|
+
* The total number of slides.
|
|
111
|
+
* Useful for SSR to render the initial ating the snap points.
|
|
112
|
+
*/
|
|
113
|
+
slideCount?: number | undefined;
|
|
114
|
+
/**
|
|
115
|
+
* Function called when the drag status changes.
|
|
116
|
+
*/
|
|
117
|
+
onDragStatusChange?: ((details: DragStatusDetails) => void) | undefined;
|
|
118
|
+
/**
|
|
119
|
+
* Function called when the autoplay status changes.
|
|
120
|
+
*/
|
|
121
|
+
onAutoplayStatusChange?: ((details: AutoplayStatusDetails) => void) | undefined;
|
|
121
122
|
}
|
|
122
123
|
interface PrivateContext {
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
124
|
+
pageSnapPoints: number[];
|
|
125
|
+
slidesInView: number[];
|
|
126
|
+
timeoutRef: ContextRef<ReturnType<typeof setTimeout>>;
|
|
126
127
|
}
|
|
127
128
|
type ComputedContext = Readonly<{
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
129
|
+
isRtl: boolean;
|
|
130
|
+
isHorizontal: boolean;
|
|
131
|
+
canScrollNext: boolean;
|
|
132
|
+
canScrollPrev: boolean;
|
|
133
|
+
autoplayInterval: number;
|
|
133
134
|
}>;
|
|
134
135
|
type UserDefinedContext = RequiredBy<PublicContext, 'id'>;
|
|
135
|
-
interface MachineContext extends PublicContext, PrivateContext, ComputedContext {
|
|
136
|
-
}
|
|
136
|
+
interface MachineContext extends PublicContext, PrivateContext, ComputedContext {}
|
|
137
137
|
interface MachineState {
|
|
138
|
-
|
|
138
|
+
value: 'idle' | 'dragging' | 'autoplay';
|
|
139
139
|
}
|
|
140
|
-
type State =
|
|
141
|
-
type Send =
|
|
142
|
-
type Service = Machine<MachineContext, MachineState,
|
|
140
|
+
type State = XState<MachineContext, MachineState>;
|
|
141
|
+
type Send = XSend<AnyEventObject>;
|
|
142
|
+
type Service = Machine<MachineContext, MachineState, AnyEventObject>;
|
|
143
143
|
interface ItemProps {
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
144
|
+
/**
|
|
145
|
+
* The index of the item.
|
|
146
|
+
*/
|
|
147
|
+
index: number;
|
|
148
|
+
/**
|
|
149
|
+
* The snap alignment of the item.
|
|
150
|
+
* @default "start"
|
|
151
|
+
*/
|
|
152
|
+
snapAlign?: 'start' | 'end' | 'center' | undefined;
|
|
153
153
|
}
|
|
154
154
|
interface IndicatorProps {
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
155
|
+
/**
|
|
156
|
+
* The index of the indicator.
|
|
157
|
+
*/
|
|
158
|
+
index: number;
|
|
159
|
+
/**
|
|
160
|
+
* Whether the indicator is read only.
|
|
161
|
+
* @default false
|
|
162
|
+
*/
|
|
163
|
+
readOnly?: boolean | undefined;
|
|
164
164
|
}
|
|
165
165
|
interface MachineApi<T extends PropTypes = PropTypes> {
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
166
|
+
/**
|
|
167
|
+
* The current index of the carousel
|
|
168
|
+
*/
|
|
169
|
+
page: number;
|
|
170
|
+
/**
|
|
171
|
+
* The current snap points of the carousel
|
|
172
|
+
*/
|
|
173
|
+
pageSnapPoints: number[];
|
|
174
|
+
/**
|
|
175
|
+
* Whether the carousel is auto playing
|
|
176
|
+
*/
|
|
177
|
+
isPlaying: boolean;
|
|
178
|
+
/**
|
|
179
|
+
* Whether the carousel is being dragged. This only works when `draggable` is true.
|
|
180
|
+
*/
|
|
181
|
+
isDragging: boolean;
|
|
182
|
+
/**
|
|
183
|
+
* Whether the carousel is can scroll to the next view
|
|
184
|
+
*/
|
|
185
|
+
canScrollNext: boolean;
|
|
186
|
+
/**
|
|
187
|
+
* Whether the carousel is can scroll to the previous view
|
|
188
|
+
*/
|
|
189
|
+
canScrollPrev: boolean;
|
|
190
|
+
/**
|
|
191
|
+
* Function to scroll to a specific item index
|
|
192
|
+
*/
|
|
193
|
+
scrollToIndex: (index: number, instant?: boolean) => void;
|
|
194
|
+
/**
|
|
195
|
+
* Function to scroll to a specific page
|
|
196
|
+
*/
|
|
197
|
+
scrollTo: (page: number, instant?: boolean) => void;
|
|
198
|
+
/**
|
|
199
|
+
* Function to scroll to the next page
|
|
200
|
+
*/
|
|
201
|
+
scrollNext: (instant?: boolean) => void;
|
|
202
|
+
/**
|
|
203
|
+
* Function to scroll to the previous page
|
|
204
|
+
*/
|
|
205
|
+
scrollPrev: (instant?: boolean) => void;
|
|
206
|
+
/**
|
|
207
|
+
* Returns the current scroll progress as a percentage
|
|
208
|
+
*/
|
|
209
|
+
getProgress: () => number;
|
|
210
|
+
/**
|
|
211
|
+
* Function to start/resume autoplay
|
|
212
|
+
*/
|
|
213
|
+
play: () => void;
|
|
214
|
+
/**
|
|
215
|
+
* Function to pause autoplay
|
|
216
|
+
*/
|
|
217
|
+
pause: () => void;
|
|
218
|
+
/**
|
|
219
|
+
* Whether the item is in view
|
|
220
|
+
*/
|
|
221
|
+
isInView: (index: number) => boolean;
|
|
222
|
+
/**
|
|
223
|
+
* Function to re-compute the snap points
|
|
224
|
+
* and clamp the page
|
|
225
|
+
*/
|
|
226
|
+
refresh: () => void;
|
|
227
|
+
getRootProps: () => T['element'];
|
|
228
|
+
getControlProps: () => T['element'];
|
|
229
|
+
getItemGroupProps: () => T['element'];
|
|
230
|
+
getItemProps: (props: ItemProps) => T['element'];
|
|
231
|
+
getPrevTriggerProps: () => T['button'];
|
|
232
|
+
getNextTriggerProps: () => T['button'];
|
|
233
|
+
getAutoplayTriggerProps: () => T['button'];
|
|
234
|
+
getIndicatorGroupProps: () => T['element'];
|
|
235
|
+
getIndicatorProps: (props: IndicatorProps) => T['button'];
|
|
236
236
|
}
|
|
237
|
-
|
|
237
|
+
//#endregion
|
|
238
|
+
//#region src/connect.d.ts
|
|
238
239
|
declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
240
|
+
//#endregion
|
|
241
|
+
//#region src/machine.d.ts
|
|
242
|
+
declare function machine(userContext: UserDefinedContext): _destyler_xstate0.Machine<MachineContext, MachineState, _destyler_xstate0.AnyEventObject>;
|
|
243
|
+
//#endregion
|
|
244
|
+
//#region src/props.d.ts
|
|
245
|
+
declare const props: ("autoplay" | "id" | "ids" | "translations" | "slidesPerPage" | "slidesPerMove" | "allowMouseDrag" | "loop" | "page" | "spacing" | "padding" | "onPageChange" | "inViewThreshold" | "snapType" | "slideCount" | "onDragStatusChange" | "onAutoplayStatusChange" | "dir" | "getRootNode" | "orientation")[];
|
|
246
|
+
declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "autoplay" | "id" | "ids" | "translations" | "slidesPerPage" | "slidesPerMove" | "allowMouseDrag" | "loop" | "page" | "spacing" | "padding" | "onPageChange" | "inViewThreshold" | "snapType" | "slideCount" | "onDragStatusChange" | "onAutoplayStatusChange" | "dir" | "getRootNode" | "orientation">];
|
|
244
247
|
declare const indicatorProps: (keyof IndicatorProps)[];
|
|
245
248
|
declare const splitIndicatorProps: <Props extends IndicatorProps>(props: Props) => [IndicatorProps, Omit<Props, keyof IndicatorProps>];
|
|
246
249
|
declare const itemProps: (keyof ItemProps)[];
|
|
247
250
|
declare const splitItemProps: <Props extends ItemProps>(props: Props) => [ItemProps, Omit<Props, keyof ItemProps>];
|
|
248
|
-
|
|
249
|
-
export { type MachineApi as Api, type AutoplayStatusDetails, type UserDefinedContext as Context, type DragStatusDetails, type ElementIds, type IndicatorProps, type IntlTranslations, type ItemProps, type PageChangeDetails, type Service, anatomy, connect, indicatorProps, itemProps, machine, props, splitIndicatorProps, splitItemProps, splitProps };
|
|
251
|
+
//#endregion
|
|
252
|
+
export { type MachineApi as Api, type AutoplayStatusDetails, type UserDefinedContext as Context, type DragStatusDetails, type ElementIds, type IndicatorProps, type IntlTranslations, type ItemProps, type Orientation, type PageChangeDetails, type Service, anatomy, connect, indicatorProps, itemProps, machine, props, splitIndicatorProps, splitItemProps, splitProps };
|