solid-slider 1.3.20 → 1.3.21
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/README.md +7 -1
- package/dist/autoplay/autoplay.d.ts +7 -7
- package/dist/autoplay/autoplay.jsx +7 -7
- package/dist/autoplay/index.common.js +7 -7
- package/dist/autoplay/index.common.js.map +1 -1
- package/dist/autoplay/index.module.js +7 -7
- package/dist/autoplay/index.module.js.map +1 -1
- package/dist/index/components.d.ts +16 -16
- package/dist/index/components.jsx +14 -14
- package/dist/index/index.common.js +32 -32
- package/dist/index/index.common.js.map +1 -1
- package/dist/index/index.module.js +32 -32
- package/dist/index/index.module.js.map +1 -1
- package/dist/index/primitive.d.ts +11 -11
- package/dist/index/primitive.jsx +18 -16
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,3 +1,8 @@
|
|
|
1
|
+
<p>
|
|
2
|
+
<img width="100%" src="https://assets.solidjs.com/banner?type=Solid%20Slider&background=tiles&project=%20" alt="Solid Slider">
|
|
3
|
+
</p>
|
|
4
|
+
|
|
5
|
+
|
|
1
6
|
# Solid Slider
|
|
2
7
|
|
|
3
8
|
[](https://bundlephobia.com/package/solid-slider)
|
|
@@ -397,10 +402,11 @@ Thie library exports it's own CSS which is the basic Keen-Slider implementation
|
|
|
397
402
|
- 1.3.14 - Patched npm packaging issue (thanks [joeygrable94 ](https://www.github.com/joeygrable94))
|
|
398
403
|
- 1.3.15 - Updated to Solid 1.7.11
|
|
399
404
|
- 1.3.16 - Updated dependencies and move Solid from dependency to peer
|
|
400
|
-
- 1.3.17 - Added
|
|
405
|
+
- 1.3.17 - Added types definition to exports (thanks [ChristophP](https://github.com/ChristophP))
|
|
401
406
|
- 1.3.18 - Adjusted documentation and minor source cleanup
|
|
402
407
|
- 1.3.19 - Attempt to fix export paths
|
|
403
408
|
- 1.3.20 - Package maintenance (bumping versions) and added new dot and thumbnail navigation components
|
|
409
|
+
- 1.3.21 - Patched type for SliderDots (thanks [Violettica](https://github.com/Violettica)), improved additional types.
|
|
404
410
|
|
|
405
411
|
## Keen Options API
|
|
406
412
|
|
|
@@ -3,13 +3,13 @@ import { Accessor } from "solid-js";
|
|
|
3
3
|
/**
|
|
4
4
|
* Provides an autoplay plugin.
|
|
5
5
|
*
|
|
6
|
-
* @param
|
|
7
|
-
* @param
|
|
8
|
-
* @param
|
|
9
|
-
* @param
|
|
10
|
-
* @param
|
|
11
|
-
* @param
|
|
12
|
-
* @param
|
|
6
|
+
* @param interval - Interval in milliseconds for switching slides
|
|
7
|
+
* @param options - Options to customize the autoplay
|
|
8
|
+
* @param options.pause - A pause signal to control the autoplay
|
|
9
|
+
* @param options.pauseOnDrag - Denotes of the autoplay should pause on drag.
|
|
10
|
+
* @param options.animation - Allows for control of duration and easing.
|
|
11
|
+
* @param options.duration - Duration for transitioning the slide.
|
|
12
|
+
* @param options.easing - Easing function for the transition animation.
|
|
13
13
|
*
|
|
14
14
|
* @example
|
|
15
15
|
* ```ts
|
|
@@ -3,13 +3,13 @@ import { createEffect } from "solid-js";
|
|
|
3
3
|
/**
|
|
4
4
|
* Provides an autoplay plugin.
|
|
5
5
|
*
|
|
6
|
-
* @param
|
|
7
|
-
* @param
|
|
8
|
-
* @param
|
|
9
|
-
* @param
|
|
10
|
-
* @param
|
|
11
|
-
* @param
|
|
12
|
-
* @param
|
|
6
|
+
* @param interval - Interval in milliseconds for switching slides
|
|
7
|
+
* @param options - Options to customize the autoplay
|
|
8
|
+
* @param options.pause - A pause signal to control the autoplay
|
|
9
|
+
* @param options.pauseOnDrag - Denotes of the autoplay should pause on drag.
|
|
10
|
+
* @param options.animation - Allows for control of duration and easing.
|
|
11
|
+
* @param options.duration - Duration for transitioning the slide.
|
|
12
|
+
* @param options.easing - Easing function for the transition animation.
|
|
13
13
|
*
|
|
14
14
|
* @example
|
|
15
15
|
* ```ts
|
|
@@ -6,13 +6,13 @@ var solidJs = require('solid-js');
|
|
|
6
6
|
/**
|
|
7
7
|
* Provides an autoplay plugin.
|
|
8
8
|
*
|
|
9
|
-
* @param
|
|
10
|
-
* @param
|
|
11
|
-
* @param
|
|
12
|
-
* @param
|
|
13
|
-
* @param
|
|
14
|
-
* @param
|
|
15
|
-
* @param
|
|
9
|
+
* @param interval - Interval in milliseconds for switching slides
|
|
10
|
+
* @param options - Options to customize the autoplay
|
|
11
|
+
* @param options.pause - A pause signal to control the autoplay
|
|
12
|
+
* @param options.pauseOnDrag - Denotes of the autoplay should pause on drag.
|
|
13
|
+
* @param options.animation - Allows for control of duration and easing.
|
|
14
|
+
* @param options.duration - Duration for transitioning the slide.
|
|
15
|
+
* @param options.easing - Easing function for the transition animation.
|
|
16
16
|
*
|
|
17
17
|
* @example
|
|
18
18
|
* ```ts
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.common.js","sources":["../../src/plugins/autoplay.tsx"],"sourcesContent":["import { makeTimer } from \"@solid-primitives/timer\";\nimport { KeenSliderInstance } from \"keen-slider\";\nimport { Accessor, createEffect } from \"solid-js\";\n\n/**\n * Provides an autoplay plugin.\n *\n * @param
|
|
1
|
+
{"version":3,"file":"index.common.js","sources":["../../src/plugins/autoplay.tsx"],"sourcesContent":["import { makeTimer } from \"@solid-primitives/timer\";\nimport { KeenSliderInstance } from \"keen-slider\";\nimport { Accessor, createEffect } from \"solid-js\";\n\n/**\n * Provides an autoplay plugin.\n *\n * @param interval - Interval in milliseconds for switching slides\n * @param options - Options to customize the autoplay\n * @param options.pause - A pause signal to control the autoplay\n * @param options.pauseOnDrag - Denotes of the autoplay should pause on drag.\n * @param options.animation - Allows for control of duration and easing.\n * @param options.duration - Duration for transitioning the slide.\n * @param options.easing - Easing function for the transition animation.\n *\n * @example\n * ```ts\n * const [create] = createSlider({}, [autoplay]);\n * ```\n */\nexport const autoplay = (\n interval: number = 1000,\n options: {\n pause?: Accessor<boolean>;\n pauseOnDrag?: boolean;\n animation?: {\n duration?: number;\n easing?: (t: number) => number;\n };\n },\n) => {\n return (slider: KeenSliderInstance) => {\n let dispose: Function;\n const start = () => {\n dispose = makeTimer(\n () =>\n slider.moveToIdx(\n slider.track.details.position + 1,\n true,\n options.animation,\n ),\n interval,\n setInterval,\n );\n };\n // Pause the slider on drag\n if (options.pauseOnDrag !== false) {\n slider.on(\"dragStarted\", () => dispose?.());\n }\n createEffect(() =>\n !options.pause || options.pause() === false ? start() : dispose?.(),\n );\n };\n};\n"],"names":["autoplay","interval","options","slider","dispose","start","makeTimer","moveToIdx","track","details","position","animation","setInterval","pauseOnDrag","on","createEffect","pause"],"mappings":";;;;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,QAAQ,GAAGA,CACtBC,QAAgB,GAAG,IAAI,EACvBC,OAOC,KACE;AACH,EAAA,OAAQC,MAA0B,IAAK;AACrC,IAAA,IAAIC,OAAiB;IACrB,MAAMC,KAAK,GAAGA,MAAM;AAClBD,MAAAA,OAAO,GAAGE,eAAS,CACjB,MACEH,MAAM,CAACI,SAAS,CACdJ,MAAM,CAACK,KAAK,CAACC,OAAO,CAACC,QAAQ,GAAG,CAAC,EACjC,IAAI,EACJR,OAAO,CAACS,SACV,CAAC,EACHV,QAAQ,EACRW,WACF,CAAC;IACH,CAAC;AACD;AACA,IAAA,IAAIV,OAAO,CAACW,WAAW,KAAK,KAAK,EAAE;MACjCV,MAAM,CAACW,EAAE,CAAC,aAAa,EAAE,MAAMV,OAAO,IAAI,CAAC;AAC7C,IAAA;IACAW,oBAAY,CAAC,MACX,CAACb,OAAO,CAACc,KAAK,IAAId,OAAO,CAACc,KAAK,EAAE,KAAK,KAAK,GAAGX,KAAK,EAAE,GAAGD,OAAO,IACjE,CAAC;EACH,CAAC;AACH;;;;"}
|
|
@@ -4,13 +4,13 @@ import { createEffect } from 'solid-js';
|
|
|
4
4
|
/**
|
|
5
5
|
* Provides an autoplay plugin.
|
|
6
6
|
*
|
|
7
|
-
* @param
|
|
8
|
-
* @param
|
|
9
|
-
* @param
|
|
10
|
-
* @param
|
|
11
|
-
* @param
|
|
12
|
-
* @param
|
|
13
|
-
* @param
|
|
7
|
+
* @param interval - Interval in milliseconds for switching slides
|
|
8
|
+
* @param options - Options to customize the autoplay
|
|
9
|
+
* @param options.pause - A pause signal to control the autoplay
|
|
10
|
+
* @param options.pauseOnDrag - Denotes of the autoplay should pause on drag.
|
|
11
|
+
* @param options.animation - Allows for control of duration and easing.
|
|
12
|
+
* @param options.duration - Duration for transitioning the slide.
|
|
13
|
+
* @param options.easing - Easing function for the transition animation.
|
|
14
14
|
*
|
|
15
15
|
* @example
|
|
16
16
|
* ```ts
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.module.js","sources":["../../src/plugins/autoplay.tsx"],"sourcesContent":["import { makeTimer } from \"@solid-primitives/timer\";\nimport { KeenSliderInstance } from \"keen-slider\";\nimport { Accessor, createEffect } from \"solid-js\";\n\n/**\n * Provides an autoplay plugin.\n *\n * @param
|
|
1
|
+
{"version":3,"file":"index.module.js","sources":["../../src/plugins/autoplay.tsx"],"sourcesContent":["import { makeTimer } from \"@solid-primitives/timer\";\nimport { KeenSliderInstance } from \"keen-slider\";\nimport { Accessor, createEffect } from \"solid-js\";\n\n/**\n * Provides an autoplay plugin.\n *\n * @param interval - Interval in milliseconds for switching slides\n * @param options - Options to customize the autoplay\n * @param options.pause - A pause signal to control the autoplay\n * @param options.pauseOnDrag - Denotes of the autoplay should pause on drag.\n * @param options.animation - Allows for control of duration and easing.\n * @param options.duration - Duration for transitioning the slide.\n * @param options.easing - Easing function for the transition animation.\n *\n * @example\n * ```ts\n * const [create] = createSlider({}, [autoplay]);\n * ```\n */\nexport const autoplay = (\n interval: number = 1000,\n options: {\n pause?: Accessor<boolean>;\n pauseOnDrag?: boolean;\n animation?: {\n duration?: number;\n easing?: (t: number) => number;\n };\n },\n) => {\n return (slider: KeenSliderInstance) => {\n let dispose: Function;\n const start = () => {\n dispose = makeTimer(\n () =>\n slider.moveToIdx(\n slider.track.details.position + 1,\n true,\n options.animation,\n ),\n interval,\n setInterval,\n );\n };\n // Pause the slider on drag\n if (options.pauseOnDrag !== false) {\n slider.on(\"dragStarted\", () => dispose?.());\n }\n createEffect(() =>\n !options.pause || options.pause() === false ? start() : dispose?.(),\n );\n };\n};\n"],"names":["autoplay","interval","options","slider","dispose","start","makeTimer","moveToIdx","track","details","position","animation","setInterval","pauseOnDrag","on","createEffect","pause"],"mappings":";;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,QAAQ,GAAGA,CACtBC,QAAgB,GAAG,IAAI,EACvBC,OAOC,KACE;AACH,EAAA,OAAQC,MAA0B,IAAK;AACrC,IAAA,IAAIC,OAAiB;IACrB,MAAMC,KAAK,GAAGA,MAAM;AAClBD,MAAAA,OAAO,GAAGE,SAAS,CACjB,MACEH,MAAM,CAACI,SAAS,CACdJ,MAAM,CAACK,KAAK,CAACC,OAAO,CAACC,QAAQ,GAAG,CAAC,EACjC,IAAI,EACJR,OAAO,CAACS,SACV,CAAC,EACHV,QAAQ,EACRW,WACF,CAAC;IACH,CAAC;AACD;AACA,IAAA,IAAIV,OAAO,CAACW,WAAW,KAAK,KAAK,EAAE;MACjCV,MAAM,CAACW,EAAE,CAAC,aAAa,EAAE,MAAMV,OAAO,IAAI,CAAC;AAC7C,IAAA;IACAW,YAAY,CAAC,MACX,CAACb,OAAO,CAACc,KAAK,IAAId,OAAO,CAACc,KAAK,EAAE,KAAK,KAAK,GAAGX,KAAK,EAAE,GAAGD,OAAO,IACjE,CAAC;EACH,CAAC;AACH;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { FlowComponent } from "solid-js";
|
|
1
|
+
import { FlowComponent, Component } from "solid-js";
|
|
2
2
|
import { KeenSliderOptions, KeenSliderPlugin } from "keen-slider";
|
|
3
3
|
interface Func<T> {
|
|
4
4
|
([...args]: any, args2?: any): T;
|
|
@@ -17,15 +17,15 @@ export declare const SliderContext: import("solid-js").Context<import("solid-js"
|
|
|
17
17
|
/**
|
|
18
18
|
* A helpful and simple Provider to wrap your Slider if controls such as SliderButton are used.
|
|
19
19
|
*
|
|
20
|
-
* @param props
|
|
21
|
-
* @param props
|
|
20
|
+
* @param props.options - Accepts all KeenSlider options.
|
|
21
|
+
* @param props.plugins - A list of Solid Slider or Keen slider plugins.
|
|
22
22
|
*/
|
|
23
23
|
export declare const SliderProvider: FlowComponent;
|
|
24
24
|
/**
|
|
25
25
|
* Main Slider component for specifying the Slider on the page.
|
|
26
26
|
*
|
|
27
|
-
* @param props
|
|
28
|
-
* @param props
|
|
27
|
+
* @param props.options - Accepts all KeenSlider options.
|
|
28
|
+
* @param props.plugins - A list of Solid Slider or Keen slider plugins.
|
|
29
29
|
*/
|
|
30
30
|
export declare const Slider: FlowComponent<{
|
|
31
31
|
options?: KeenSliderOptions;
|
|
@@ -34,10 +34,10 @@ export declare const Slider: FlowComponent<{
|
|
|
34
34
|
/**
|
|
35
35
|
* Provides a helpful button with next/prev to pair with your slider.
|
|
36
36
|
*
|
|
37
|
-
* @param props
|
|
38
|
-
* @param props
|
|
39
|
-
* @param props
|
|
40
|
-
* @param props
|
|
37
|
+
* @param props.next - Specify if this should be a next button.
|
|
38
|
+
* @param props.prev - Specify if this should be a prev button.
|
|
39
|
+
* @param props.class - Class to override the button.
|
|
40
|
+
* @param props.classList - List of classes to override the button.
|
|
41
41
|
*/
|
|
42
42
|
export declare const SliderButton: FlowComponent<{
|
|
43
43
|
next?: boolean;
|
|
@@ -52,10 +52,10 @@ export declare const SliderButton: FlowComponent<{
|
|
|
52
52
|
* Navigation dots component for the slider.
|
|
53
53
|
* Displays a dot for each slide and highlights the current slide.
|
|
54
54
|
*
|
|
55
|
-
* @param props
|
|
56
|
-
* @param props
|
|
57
|
-
* @param props
|
|
58
|
-
* @param props
|
|
55
|
+
* @param props.class - Class to override the dots container.
|
|
56
|
+
* @param props.classList - List of classes to override the dots container.
|
|
57
|
+
* @param props.dotClass - Class to override individual dots.
|
|
58
|
+
* @param props.dotClassList - List of classes to override individual dots.
|
|
59
59
|
*
|
|
60
60
|
* @example
|
|
61
61
|
* ```tsx
|
|
@@ -68,7 +68,7 @@ export declare const SliderButton: FlowComponent<{
|
|
|
68
68
|
* </SliderProvider>
|
|
69
69
|
* ```
|
|
70
70
|
*/
|
|
71
|
-
export declare const SliderDots:
|
|
71
|
+
export declare const SliderDots: Component<{
|
|
72
72
|
class?: string;
|
|
73
73
|
classList?: {
|
|
74
74
|
[k: string]: boolean | undefined;
|
|
@@ -83,8 +83,8 @@ export declare const SliderDots: FlowComponent<{
|
|
|
83
83
|
* A second Slider that synchronizes with the main slider.
|
|
84
84
|
* User provides thumbnail slides as children.
|
|
85
85
|
*
|
|
86
|
-
* @param props
|
|
87
|
-
* @param props
|
|
86
|
+
* @param props.options - Options for the thumbnail slider.
|
|
87
|
+
* @param props.plugins - Plugins for the thumbnail slider.
|
|
88
88
|
*
|
|
89
89
|
* @example
|
|
90
90
|
* ```tsx
|
|
@@ -11,8 +11,8 @@ export const SliderContext = createContext(createSignal(null));
|
|
|
11
11
|
/**
|
|
12
12
|
* A helpful and simple Provider to wrap your Slider if controls such as SliderButton are used.
|
|
13
13
|
*
|
|
14
|
-
* @param props
|
|
15
|
-
* @param props
|
|
14
|
+
* @param props.options - Accepts all KeenSlider options.
|
|
15
|
+
* @param props.plugins - A list of Solid Slider or Keen slider plugins.
|
|
16
16
|
*/
|
|
17
17
|
export const SliderProvider = (props) => (<SliderContext.Provider value={createSignal(null)}>
|
|
18
18
|
{props.children}
|
|
@@ -20,8 +20,8 @@ export const SliderProvider = (props) => (<SliderContext.Provider value={createS
|
|
|
20
20
|
/**
|
|
21
21
|
* Main Slider component for specifying the Slider on the page.
|
|
22
22
|
*
|
|
23
|
-
* @param props
|
|
24
|
-
* @param props
|
|
23
|
+
* @param props.options - Accepts all KeenSlider options.
|
|
24
|
+
* @param props.plugins - A list of Solid Slider or Keen slider plugins.
|
|
25
25
|
*/
|
|
26
26
|
export const Slider = (props) => {
|
|
27
27
|
if (isServer)
|
|
@@ -38,10 +38,10 @@ export const Slider = (props) => {
|
|
|
38
38
|
/**
|
|
39
39
|
* Provides a helpful button with next/prev to pair with your slider.
|
|
40
40
|
*
|
|
41
|
-
* @param props
|
|
42
|
-
* @param props
|
|
43
|
-
* @param props
|
|
44
|
-
* @param props
|
|
41
|
+
* @param props.next - Specify if this should be a next button.
|
|
42
|
+
* @param props.prev - Specify if this should be a prev button.
|
|
43
|
+
* @param props.class - Class to override the button.
|
|
44
|
+
* @param props.classList - List of classes to override the button.
|
|
45
45
|
*/
|
|
46
46
|
export const SliderButton = (props) => {
|
|
47
47
|
const context = useContext(SliderContext);
|
|
@@ -59,10 +59,10 @@ export const SliderButton = (props) => {
|
|
|
59
59
|
* Navigation dots component for the slider.
|
|
60
60
|
* Displays a dot for each slide and highlights the current slide.
|
|
61
61
|
*
|
|
62
|
-
* @param props
|
|
63
|
-
* @param props
|
|
64
|
-
* @param props
|
|
65
|
-
* @param props
|
|
62
|
+
* @param props.class - Class to override the dots container.
|
|
63
|
+
* @param props.classList - List of classes to override the dots container.
|
|
64
|
+
* @param props.dotClass - Class to override individual dots.
|
|
65
|
+
* @param props.dotClassList - List of classes to override individual dots.
|
|
66
66
|
*
|
|
67
67
|
* @example
|
|
68
68
|
* ```tsx
|
|
@@ -123,8 +123,8 @@ export const SliderDots = (props) => {
|
|
|
123
123
|
* A second Slider that synchronizes with the main slider.
|
|
124
124
|
* User provides thumbnail slides as children.
|
|
125
125
|
*
|
|
126
|
-
* @param props
|
|
127
|
-
* @param props
|
|
126
|
+
* @param props.options - Options for the thumbnail slider.
|
|
127
|
+
* @param props.plugins - Plugins for the thumbnail slider.
|
|
128
128
|
*
|
|
129
129
|
* @example
|
|
130
130
|
* ```tsx
|
|
@@ -8,17 +8,16 @@ var web = require('solid-js/web');
|
|
|
8
8
|
/**
|
|
9
9
|
* Creates a slider powered by KeenSlider.
|
|
10
10
|
*
|
|
11
|
-
* @param
|
|
12
|
-
* @param
|
|
13
|
-
* @returns
|
|
14
|
-
* @returns
|
|
15
|
-
* @returns
|
|
16
|
-
* @returns
|
|
17
|
-
* @returns
|
|
18
|
-
* @returns
|
|
19
|
-
* @returns
|
|
20
|
-
* @returns
|
|
21
|
-
* @returns {Function} helpers.destroy Manual destroy function
|
|
11
|
+
* @param options - Values to initialize the slider with
|
|
12
|
+
* @param plugins - Extensions that enhance KeenSlider options
|
|
13
|
+
* @returns Returns mount and helper methods
|
|
14
|
+
* @returns create - Mounts the slider on provided element
|
|
15
|
+
* @returns helpers.current - Current slide number
|
|
16
|
+
* @returns helpers.next - Function to trigger the next slide
|
|
17
|
+
* @returns helpers.prev - Function to trigger the previous slide
|
|
18
|
+
* @returns helpers.details - Provides details about the current slider
|
|
19
|
+
* @returns helpers.slider - Returns the KeenSlider instance
|
|
20
|
+
* @returns helpers.destroy - Manual destroy function
|
|
22
21
|
*
|
|
23
22
|
* @example
|
|
24
23
|
* ```ts
|
|
@@ -32,13 +31,14 @@ const createSlider = (options, ...plugins) => {
|
|
|
32
31
|
const opts = () => utils.access(options);
|
|
33
32
|
const [current, setCurrent] = solidJs.createSignal(opts()?.initial || 0);
|
|
34
33
|
const destroy = () => slider && slider.destroy();
|
|
35
|
-
const getOptions = (overrides = {}
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
34
|
+
const getOptions = (overrides = {}) => {
|
|
35
|
+
const baseOpts = opts();
|
|
36
|
+
return {
|
|
37
|
+
selector: el.childNodes,
|
|
38
|
+
...(baseOpts || {}),
|
|
39
|
+
...overrides
|
|
40
|
+
};
|
|
41
|
+
};
|
|
42
42
|
const update = () => slider?.update(getOptions());
|
|
43
43
|
// Slider creation method and directive function
|
|
44
44
|
const create = newEl => {
|
|
@@ -86,8 +86,8 @@ const SliderContext = solidJs.createContext(solidJs.createSignal(null));
|
|
|
86
86
|
/**
|
|
87
87
|
* A helpful and simple Provider to wrap your Slider if controls such as SliderButton are used.
|
|
88
88
|
*
|
|
89
|
-
* @param props
|
|
90
|
-
* @param props
|
|
89
|
+
* @param props.options - Accepts all KeenSlider options.
|
|
90
|
+
* @param props.plugins - A list of Solid Slider or Keen slider plugins.
|
|
91
91
|
*/
|
|
92
92
|
const SliderProvider = props => web.createComponent(SliderContext.Provider, {
|
|
93
93
|
get value() {
|
|
@@ -101,8 +101,8 @@ const SliderProvider = props => web.createComponent(SliderContext.Provider, {
|
|
|
101
101
|
/**
|
|
102
102
|
* Main Slider component for specifying the Slider on the page.
|
|
103
103
|
*
|
|
104
|
-
* @param props
|
|
105
|
-
* @param props
|
|
104
|
+
* @param props.options - Accepts all KeenSlider options.
|
|
105
|
+
* @param props.plugins - A list of Solid Slider or Keen slider plugins.
|
|
106
106
|
*/
|
|
107
107
|
const Slider = props => {
|
|
108
108
|
if (web.isServer) return (() => {
|
|
@@ -127,10 +127,10 @@ const Slider = props => {
|
|
|
127
127
|
/**
|
|
128
128
|
* Provides a helpful button with next/prev to pair with your slider.
|
|
129
129
|
*
|
|
130
|
-
* @param props
|
|
131
|
-
* @param props
|
|
132
|
-
* @param props
|
|
133
|
-
* @param props
|
|
130
|
+
* @param props.next - Specify if this should be a next button.
|
|
131
|
+
* @param props.prev - Specify if this should be a prev button.
|
|
132
|
+
* @param props.class - Class to override the button.
|
|
133
|
+
* @param props.classList - List of classes to override the button.
|
|
134
134
|
*/
|
|
135
135
|
const SliderButton = props => {
|
|
136
136
|
const context = solidJs.useContext(SliderContext);
|
|
@@ -164,10 +164,10 @@ const SliderButton = props => {
|
|
|
164
164
|
* Navigation dots component for the slider.
|
|
165
165
|
* Displays a dot for each slide and highlights the current slide.
|
|
166
166
|
*
|
|
167
|
-
* @param props
|
|
168
|
-
* @param props
|
|
169
|
-
* @param props
|
|
170
|
-
* @param props
|
|
167
|
+
* @param props.class - Class to override the dots container.
|
|
168
|
+
* @param props.classList - List of classes to override the dots container.
|
|
169
|
+
* @param props.dotClass - Class to override individual dots.
|
|
170
|
+
* @param props.dotClassList - List of classes to override individual dots.
|
|
171
171
|
*
|
|
172
172
|
* @example
|
|
173
173
|
* ```tsx
|
|
@@ -265,8 +265,8 @@ const SliderDots = props => {
|
|
|
265
265
|
* A second Slider that synchronizes with the main slider.
|
|
266
266
|
* User provides thumbnail slides as children.
|
|
267
267
|
*
|
|
268
|
-
* @param props
|
|
269
|
-
* @param props
|
|
268
|
+
* @param props.options - Options for the thumbnail slider.
|
|
269
|
+
* @param props.plugins - Plugins for the thumbnail slider.
|
|
270
270
|
*
|
|
271
271
|
* @example
|
|
272
272
|
* ```tsx
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.common.js","sources":["../../src/primitive.tsx","../../src/components.tsx"],"sourcesContent":["import {\n on,\n onMount,\n createSignal,\n onCleanup,\n Accessor,\n createEffect,\n} from \"solid-js\";\nimport { access } from \"@solid-primitives/utils\";\nimport KeenSlider, {\n KeenSliderHooks,\n KeenSliderInstance,\n KeenSliderOptions,\n KeenSliderPlugin,\n TrackDetails,\n} from \"keen-slider\";\n\ndeclare module \"solid-js\" {\n namespace JSX {\n interface Directives {\n slider: {};\n }\n }\n}\n\nexport type SliderControls<O, P, H extends string> = [\n create: (el: HTMLElement) => void,\n helpers: {\n current: Accessor<number>;\n next: VoidFunction;\n prev: VoidFunction;\n moveTo: (\n id: number,\n duration?: number,\n absolute?: boolean,\n easing?: (t: number) => number,\n ) => void;\n details: () => TrackDetails;\n slider: () => KeenSliderInstance<O, P, H> | undefined;\n destroy: VoidFunction;\n update: VoidFunction;\n },\n];\n\n/**\n * Creates a slider powered by KeenSlider.\n *\n * @param {Object} options Values to initialize the slider with\n * @param {Array} plugins Extensions that enhance KeenSlider options\n * @returns {[create: Function, helpers: Object]} Returns mount and helper methods\n * @returns {Function} create Mounts the slider on provided element\n * @returns {Function} helpers.current Current slide number\n * @returns {Function} helpers.current Current slide number\n * @returns {Function} helpers.next Function to trigger the next slide\n * @returns {Function} helpers.prev Function to trigger the previous slide\n * @returns {Function<Object>} helpers.details Provides details about the current slider\n * @returns {Function} helpers.slider Returns the KeenSlider instance\n * @returns {Function} helpers.destroy Manual destroy function\n *\n * @example\n * ```ts\n * const [create, { prev, next }] = createSlider();\n * <div use:slider>...</div>\n * ```\n */\nexport const createSlider = <\n O = {},\n P = {},\n H extends string = KeenSliderHooks,\n>(\n options?: KeenSliderOptions<O, P, H> | Accessor<KeenSliderOptions<O, P, H>>,\n ...plugins: KeenSliderPlugin<O, P, H>[]\n): SliderControls<O, P, H> => {\n let slider: KeenSliderInstance<O, P, H> | undefined;\n let el: HTMLElement;\n const opts = () => access(options);\n const [current, setCurrent] = createSignal(opts()?.initial || 0);\n const destroy = () => slider && slider.destroy();\n const getOptions: Accessor<KeenSliderOptions<O, P, H> | undefined> = (\n overrides = {},\n // @ts-ignore\n ) => ({\n selector: el.childNodes,\n ...opts(),\n ...overrides,\n });\n const update = () => slider?.update(getOptions());\n // Slider creation method and directive function\n const create = (newEl: HTMLElement) => {\n el = newEl;\n el.classList.add(\"keen-slider\");\n onMount(() => {\n slider = new KeenSlider<O, P, H>(el, getOptions(), plugins);\n slider.on(\"slideChanged\", () => setCurrent(slider!.track.details.rel));\n });\n onCleanup(destroy);\n if (typeof options === \"function\") {\n createEffect(on(() => options, update));\n }\n };\n const moveTo = (\n id: number,\n duration = 250,\n absolute = false,\n easing?: (t: number) => number,\n ) => {\n slider?.moveToIdx(id, absolute, { duration, easing: easing });\n };\n return [\n create,\n {\n current,\n next: () => slider && slider.next(),\n prev: () => slider && slider.prev(),\n details: () => (slider ? slider.track.details : ({} as TrackDetails)),\n slider: () => slider,\n moveTo,\n destroy,\n update,\n },\n ];\n};\n","import {\n on,\n createContext,\n useContext,\n createSignal,\n FlowComponent,\n createEffect,\n For,\n Show,\n JSX,\n createMemo,\n Index,\n onMount,\n} from \"solid-js\";\nimport { access } from \"@solid-primitives/utils\";\nimport { isServer } from \"solid-js/web\";\nimport { KeenSliderOptions, KeenSliderPlugin } from \"keen-slider\";\nimport { createSlider } from \"./primitive\";\n\n// The following is a hacky way of extracting SliderHelpers\ninterface Func<T> {\n ([...args]: any, args2?: any): T;\n}\nexport function returnType<T>(func: Func<T>) {\n return {} as T;\n}\nconst sliderValues = returnType(createSlider);\ntype SliderHelpers = (typeof sliderValues)[1];\n\n// Main context for the slider\nexport const SliderContext = createContext(\n createSignal<SliderHelpers | null>(null),\n);\n\n/**\n * A helpful and simple Provider to wrap your Slider if controls such as SliderButton are used.\n *\n * @param props {KeenSliderOptions} options - Accepts all KeenSlider options.\n * @param props {KeenSLiderPlugin} plugins - A list of Solid Slider or Keen slider plugins.\n */\nexport const SliderProvider: FlowComponent = (props) => (\n <SliderContext.Provider value={createSignal<SliderHelpers | null>(null)}>\n {props.children}\n </SliderContext.Provider>\n);\n\n/**\n * Main Slider component for specifying the Slider on the page.\n *\n * @param props {KeenSliderOptions} options - Accepts all KeenSlider options.\n * @param props {KeenSLiderPlugin} plugins - A list of Solid Slider or Keen slider plugins.\n */\nexport const Slider: FlowComponent<{\n options?: KeenSliderOptions;\n plugins?: KeenSliderPlugin[];\n}> = (props) => {\n if (isServer) return <div class=\"keen-slider\">{props.children}</div>;\n const [, setHelpers] = useContext(SliderContext);\n const [slider, helpers] = createSlider(\n props.options || {},\n ...(props.plugins || []),\n );\n setHelpers(helpers);\n createEffect(\n on(\n () => access(props.children),\n () => queueMicrotask(() => helpers.update()),\n { defer: true },\n ),\n );\n slider;\n return (\n <div use:slider class=\"keen-slider\">\n {props.children}\n </div>\n );\n};\n\n/**\n * Provides a helpful button with next/prev to pair with your slider.\n *\n * @param props {boolean} next - Specify if this should be a next button.\n * @param props {boolean} prev - Specify if this should be a prev button.\n * @param props {string} class - Class to override the button.\n * @param props {object} classList - List of classes to override the button.\n */\nexport const SliderButton: FlowComponent<{\n next?: boolean;\n prev?: boolean;\n disabled?: boolean;\n class?: string;\n classList?: { [k: string]: boolean | undefined };\n}> = (props) => {\n const context = useContext(SliderContext);\n const changeSlide = () => {\n if (context == null) return;\n const [helpers] = context;\n props.next ? helpers()?.next() : helpers()?.prev();\n };\n return (\n <button\n disabled={props.disabled || false}\n class={props.class}\n classList={props.classList}\n onClick={changeSlide}\n >\n {props.children}\n </button>\n );\n};\n\n/**\n * Navigation dots component for the slider.\n * Displays a dot for each slide and highlights the current slide.\n *\n * @param props {string} class - Class to override the dots container.\n * @param props {object} classList - List of classes to override the dots container.\n * @param props {string} dotClass - Class to override individual dots.\n * @param props {object} dotClassList - List of classes to override individual dots.\n *\n * @example\n * ```tsx\n * <SliderProvider>\n * <Slider>\n * <div class=\"keen-slider__slide\">Slide 1</div>\n * <div class=\"keen-slider__slide\">Slide 2</div>\n * </Slider>\n * <SliderDots />\n * </SliderProvider>\n * ```\n */\nexport const SliderDots: FlowComponent<{\n class?: string;\n classList?: { [k: string]: boolean | undefined };\n dotClass?: string;\n dotClassList?: { [k: string]: boolean | undefined };\n}> = (props) => {\n const context = useContext(SliderContext);\n const [slideCount, setSlideCount] = createSignal(0);\n\n const handleDotClick = (idx: number) => {\n if (context == null) return;\n const [helpers] = context;\n helpers()?.moveTo(idx);\n };\n\n // Update slide count when slider is created/updated\n createEffect(() => {\n if (!context) return;\n const [helpers] = context;\n const sliderInstance = helpers()?.slider();\n\n if (sliderInstance) {\n const updateCount = () => {\n const details = helpers()?.details();\n setSlideCount(details?.slides?.length || 0);\n };\n\n // Set initial count\n updateCount();\n\n // Listen for slider changes\n sliderInstance.on(\"created\", updateCount);\n sliderInstance.on(\"updated\", updateCount);\n }\n });\n\n const slides = createMemo(() =>\n Array.from({ length: slideCount() }, (_, i) => i),\n );\n\n return (\n <Show when={context != null}>\n <div\n class={props.class || \"keen-slider-dots\"}\n classList={props.classList}\n >\n <Index each={slides()}>\n {(idx) => {\n const [helpers] = context!;\n const isActive = () => helpers()?.current() === idx();\n return (\n <button\n class={props.dotClass || \"keen-slider-dot\"}\n classList={{\n ...props.dotClassList,\n active: isActive(),\n }}\n onClick={() => handleDotClick(idx())}\n aria-label={`Go to slide ${idx() + 1}`}\n />\n );\n }}\n </Index>\n </div>\n </Show>\n );\n};\n\n/**\n * Thumbnail navigation component for the slider.\n * A second Slider that synchronizes with the main slider.\n * User provides thumbnail slides as children.\n *\n * @param props {KeenSliderOptions} options - Options for the thumbnail slider.\n * @param props {KeenSliderPlugin[]} plugins - Plugins for the thumbnail slider.\n *\n * @example\n * ```tsx\n * <SliderProvider>\n * <Slider options={{ loop: true }}>\n * <div class=\"keen-slider__slide\">\n * <img src=\"slide1.jpg\" alt=\"Slide 1\" />\n * </div>\n * <div class=\"keen-slider__slide\">\n * <img src=\"slide2.jpg\" alt=\"Slide 2\" />\n * </div>\n * </Slider>\n * <SliderThumbnails options={{ slides: { perView: 4, spacing: 10 } }}>\n * <div class=\"keen-slider__slide\">\n * <img src=\"thumb1.jpg\" alt=\"Thumbnail 1\" />\n * </div>\n * <div class=\"keen-slider__slide\">\n * <img src=\"thumb2.jpg\" alt=\"Thumbnail 2\" />\n * </div>\n * </SliderThumbnails>\n * </SliderProvider>\n * ```\n */\nexport const SliderThumbnails: FlowComponent<{\n options?: KeenSliderOptions;\n plugins?: KeenSliderPlugin[];\n activeClass?: string;\n}> = (props) => {\n if (isServer) return <div>{props.children}</div>;\n\n const mainContext = useContext(SliderContext);\n\n if (!mainContext) {\n console.warn(\"SliderThumbnails must be used within a SliderProvider\");\n return <div>{props.children}</div>;\n }\n\n const [mainHelpers] = mainContext;\n\n // Create thumbnail slider with user options\n const [thumbSlider, thumbHelpers] = createSlider(\n props.options || {},\n ...(props.plugins || []),\n );\n\n // Update on children change (same as main Slider)\n createEffect(\n on(\n () => access(props.children),\n () => queueMicrotask(() => thumbHelpers.update()),\n { defer: true },\n ),\n );\n\n // Sync thumbnail slider with main slider\n onMount(() => {\n // Wait for next tick to ensure both sliders are mounted\n queueMicrotask(() => {\n const mainSliderInstance = mainHelpers()?.slider();\n const thumbSliderInstance = thumbHelpers.slider();\n\n if (mainSliderInstance && thumbSliderInstance) {\n // Function to update active thumbnail\n const activeClassName = props.activeClass || \"active\";\n const updateActiveThumbnail = () => {\n const mainCurrent = mainHelpers()?.current();\n if (mainCurrent !== undefined) {\n // Remove active class from all thumbnails\n thumbSliderInstance.slides.forEach((slide) => {\n slide.classList.remove(activeClassName);\n });\n // Add active class to current thumbnail\n if (thumbSliderInstance.slides[mainCurrent]) {\n thumbSliderInstance.slides[mainCurrent].classList.add(\n activeClassName,\n );\n }\n // Move thumbnail slider to show active thumbnail\n thumbHelpers.moveTo(mainCurrent);\n }\n };\n\n // Listen to main slider changes\n mainSliderInstance.on(\"slideChanged\", updateActiveThumbnail);\n\n // Set initial active state\n updateActiveThumbnail();\n\n // Add click handlers to thumbnails\n thumbSliderInstance.slides.forEach((slide, idx) => {\n slide.addEventListener(\"click\", () => {\n mainHelpers()?.moveTo(idx);\n });\n });\n }\n });\n });\n\n // Prevent tree-shaking\n thumbSlider;\n\n return <div use:thumbSlider>{props.children}</div>;\n};\n"],"names":["createSlider","options","plugins","slider","el","opts","access","current","setCurrent","createSignal","initial","destroy","getOptions","overrides","selector","childNodes","update","create","newEl","classList","add","onMount","KeenSlider","on","track","details","rel","onCleanup","createEffect","moveTo","id","duration","absolute","easing","moveToIdx","next","prev","returnType","func","SliderContext","createContext","SliderProvider","props","_$createComponent","Provider","value","children","Slider","isServer","_el$","_tmpl$","_$insert","setHelpers","useContext","helpers","queueMicrotask","defer","_el$2","_$use","SliderButton","context","changeSlide","_el$3","_tmpl$2","$$click","_$effect","_p$","_v$","disabled","_v$2","class","_v$3","_$className","_$classList","undefined","SliderDots","slideCount","setSlideCount","handleDotClick","idx","sliderInstance","updateCount","slides","length","createMemo","Array","from","_","i","Show","when","_el$4","_tmpl$3","Index","each","isActive","_el$5","_v$6","dotClass","_v$7","dotClassList","active","_v$8","_$setAttribute","_v$4","_v$5","SliderThumbnails","_el$6","mainContext","console","warn","_el$7","mainHelpers","thumbSlider","thumbHelpers","mainSliderInstance","thumbSliderInstance","activeClassName","activeClass","updateActiveThumbnail","mainCurrent","forEach","slide","remove","addEventListener","_el$8","_$delegateEvents"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.common.js","sources":["../../src/primitive.tsx","../../src/components.tsx"],"sourcesContent":["import {\n on,\n onMount,\n createSignal,\n onCleanup,\n Accessor,\n createEffect,\n} from \"solid-js\";\nimport { access } from \"@solid-primitives/utils\";\nimport KeenSlider, {\n KeenSliderHooks,\n KeenSliderInstance,\n KeenSliderOptions,\n KeenSliderPlugin,\n TrackDetails,\n} from \"keen-slider\";\n\ndeclare module \"solid-js\" {\n namespace JSX {\n interface Directives {\n slider: {};\n thumbSlider: {};\n }\n }\n}\n\nexport type SliderControls<O, P, H extends string> = [\n create: (el: HTMLElement) => void,\n helpers: {\n current: Accessor<number>;\n next: VoidFunction;\n prev: VoidFunction;\n moveTo: (\n id: number,\n duration?: number,\n absolute?: boolean,\n easing?: (t: number) => number,\n ) => void;\n details: () => TrackDetails;\n slider: () => KeenSliderInstance<O, P, H> | undefined;\n destroy: VoidFunction;\n update: VoidFunction;\n },\n];\n\n/**\n * Creates a slider powered by KeenSlider.\n *\n * @param options - Values to initialize the slider with\n * @param plugins - Extensions that enhance KeenSlider options\n * @returns Returns mount and helper methods\n * @returns create - Mounts the slider on provided element\n * @returns helpers.current - Current slide number\n * @returns helpers.next - Function to trigger the next slide\n * @returns helpers.prev - Function to trigger the previous slide\n * @returns helpers.details - Provides details about the current slider\n * @returns helpers.slider - Returns the KeenSlider instance\n * @returns helpers.destroy - Manual destroy function\n *\n * @example\n * ```ts\n * const [create, { prev, next }] = createSlider();\n * <div use:slider>...</div>\n * ```\n */\nexport const createSlider = <\n O = {},\n P = {},\n H extends string = KeenSliderHooks,\n>(\n options?: KeenSliderOptions<O, P, H> | Accessor<KeenSliderOptions<O, P, H>>,\n ...plugins: KeenSliderPlugin<O, P, H>[]\n): SliderControls<O, P, H> => {\n let slider: KeenSliderInstance<O, P, H> | undefined;\n let el: HTMLElement;\n const opts = () => access(options);\n const [current, setCurrent] = createSignal((opts() as any)?.initial || 0);\n const destroy = () => slider && slider.destroy();\n const getOptions = (overrides = {}): KeenSliderOptions<O, P, H> => {\n const baseOpts = opts();\n return {\n selector: el.childNodes,\n ...(baseOpts || {}),\n ...overrides,\n } as KeenSliderOptions<O, P, H>;\n };\n const update = () => slider?.update(getOptions());\n // Slider creation method and directive function\n const create = (newEl: HTMLElement) => {\n el = newEl;\n el.classList.add(\"keen-slider\");\n onMount(() => {\n slider = new KeenSlider<O, P, H>(el, getOptions(), plugins);\n slider.on(\"slideChanged\", () => setCurrent(slider!.track.details.rel));\n });\n onCleanup(destroy);\n if (typeof options === \"function\") {\n createEffect(on(() => options, update));\n }\n };\n const moveTo = (\n id: number,\n duration = 250,\n absolute = false,\n easing?: (t: number) => number,\n ) => {\n slider?.moveToIdx(id, absolute, { duration, easing: easing });\n };\n return [\n create,\n {\n current,\n next: () => slider && slider.next(),\n prev: () => slider && slider.prev(),\n details: () => (slider ? slider.track.details : ({} as TrackDetails)),\n slider: () => slider,\n moveTo,\n destroy,\n update,\n },\n ];\n};\n","import {\n on,\n createContext,\n useContext,\n createSignal,\n FlowComponent,\n Component,\n createEffect,\n Show,\n JSX,\n createMemo,\n Index,\n onMount,\n} from \"solid-js\";\nimport { access } from \"@solid-primitives/utils\";\nimport { isServer } from \"solid-js/web\";\nimport { KeenSliderOptions, KeenSliderPlugin } from \"keen-slider\";\nimport { createSlider } from \"./primitive\";\n\n// The following is a hacky way of extracting SliderHelpers\ninterface Func<T> {\n ([...args]: any, args2?: any): T;\n}\nexport function returnType<T>(func: Func<T>) {\n return {} as T;\n}\nconst sliderValues = returnType(createSlider);\ntype SliderHelpers = (typeof sliderValues)[1];\n\n// Main context for the slider\nexport const SliderContext = createContext(\n createSignal<SliderHelpers | null>(null),\n);\n\n/**\n * A helpful and simple Provider to wrap your Slider if controls such as SliderButton are used.\n *\n * @param props.options - Accepts all KeenSlider options.\n * @param props.plugins - A list of Solid Slider or Keen slider plugins.\n */\nexport const SliderProvider: FlowComponent = (props) => (\n <SliderContext.Provider value={createSignal<SliderHelpers | null>(null)}>\n {props.children}\n </SliderContext.Provider>\n);\n\n/**\n * Main Slider component for specifying the Slider on the page.\n *\n * @param props.options - Accepts all KeenSlider options.\n * @param props.plugins - A list of Solid Slider or Keen slider plugins.\n */\nexport const Slider: FlowComponent<{\n options?: KeenSliderOptions;\n plugins?: KeenSliderPlugin[];\n}> = (props) => {\n if (isServer) return <div class=\"keen-slider\">{props.children}</div>;\n const [, setHelpers] = useContext(SliderContext);\n const [slider, helpers] = createSlider(\n props.options || {},\n ...(props.plugins || []),\n );\n setHelpers(helpers);\n createEffect(\n on(\n () => access(props.children),\n () => queueMicrotask(() => helpers.update()),\n { defer: true },\n ),\n );\n slider;\n return (\n <div use:slider class=\"keen-slider\">\n {props.children}\n </div>\n );\n};\n\n/**\n * Provides a helpful button with next/prev to pair with your slider.\n *\n * @param props.next - Specify if this should be a next button.\n * @param props.prev - Specify if this should be a prev button.\n * @param props.class - Class to override the button.\n * @param props.classList - List of classes to override the button.\n */\nexport const SliderButton: FlowComponent<{\n next?: boolean;\n prev?: boolean;\n disabled?: boolean;\n class?: string;\n classList?: { [k: string]: boolean | undefined };\n}> = (props) => {\n const context = useContext(SliderContext);\n const changeSlide = () => {\n if (context == null) return;\n const [helpers] = context;\n props.next ? helpers()?.next() : helpers()?.prev();\n };\n return (\n <button\n disabled={props.disabled || false}\n class={props.class}\n classList={props.classList}\n onClick={changeSlide}\n >\n {props.children}\n </button>\n );\n};\n\n/**\n * Navigation dots component for the slider.\n * Displays a dot for each slide and highlights the current slide.\n *\n * @param props.class - Class to override the dots container.\n * @param props.classList - List of classes to override the dots container.\n * @param props.dotClass - Class to override individual dots.\n * @param props.dotClassList - List of classes to override individual dots.\n *\n * @example\n * ```tsx\n * <SliderProvider>\n * <Slider>\n * <div class=\"keen-slider__slide\">Slide 1</div>\n * <div class=\"keen-slider__slide\">Slide 2</div>\n * </Slider>\n * <SliderDots />\n * </SliderProvider>\n * ```\n */\nexport const SliderDots: Component<{\n class?: string;\n classList?: { [k: string]: boolean | undefined };\n dotClass?: string;\n dotClassList?: { [k: string]: boolean | undefined };\n}> = (props) => {\n const context = useContext(SliderContext);\n const [slideCount, setSlideCount] = createSignal(0);\n\n const handleDotClick = (idx: number) => {\n if (context == null) return;\n const [helpers] = context;\n helpers()?.moveTo(idx);\n };\n\n // Update slide count when slider is created/updated\n createEffect(() => {\n if (!context) return;\n const [helpers] = context;\n const sliderInstance = helpers()?.slider();\n\n if (sliderInstance) {\n const updateCount = () => {\n const details = helpers()?.details();\n setSlideCount(details?.slides?.length || 0);\n };\n\n // Set initial count\n updateCount();\n\n // Listen for slider changes\n sliderInstance.on(\"created\", updateCount);\n sliderInstance.on(\"updated\", updateCount);\n }\n });\n\n const slides = createMemo(() =>\n Array.from({ length: slideCount() }, (_, i) => i),\n );\n\n return (\n <Show when={context != null}>\n <div\n class={props.class || \"keen-slider-dots\"}\n classList={props.classList}\n >\n <Index each={slides()}>\n {(idx) => {\n const [helpers] = context!;\n const isActive = () => helpers()?.current() === idx();\n return (\n <button\n class={props.dotClass || \"keen-slider-dot\"}\n classList={{\n ...props.dotClassList,\n active: isActive(),\n }}\n onClick={() => handleDotClick(idx())}\n aria-label={`Go to slide ${idx() + 1}`}\n />\n );\n }}\n </Index>\n </div>\n </Show>\n );\n};\n\n/**\n * Thumbnail navigation component for the slider.\n * A second Slider that synchronizes with the main slider.\n * User provides thumbnail slides as children.\n *\n * @param props.options - Options for the thumbnail slider.\n * @param props.plugins - Plugins for the thumbnail slider.\n *\n * @example\n * ```tsx\n * <SliderProvider>\n * <Slider options={{ loop: true }}>\n * <div class=\"keen-slider__slide\">\n * <img src=\"slide1.jpg\" alt=\"Slide 1\" />\n * </div>\n * <div class=\"keen-slider__slide\">\n * <img src=\"slide2.jpg\" alt=\"Slide 2\" />\n * </div>\n * </Slider>\n * <SliderThumbnails options={{ slides: { perView: 4, spacing: 10 } }}>\n * <div class=\"keen-slider__slide\">\n * <img src=\"thumb1.jpg\" alt=\"Thumbnail 1\" />\n * </div>\n * <div class=\"keen-slider__slide\">\n * <img src=\"thumb2.jpg\" alt=\"Thumbnail 2\" />\n * </div>\n * </SliderThumbnails>\n * </SliderProvider>\n * ```\n */\nexport const SliderThumbnails: FlowComponent<{\n options?: KeenSliderOptions;\n plugins?: KeenSliderPlugin[];\n activeClass?: string;\n}> = (props) => {\n if (isServer) return <div>{props.children}</div>;\n\n const mainContext = useContext(SliderContext);\n\n if (!mainContext) {\n console.warn(\"SliderThumbnails must be used within a SliderProvider\");\n return <div>{props.children}</div>;\n }\n\n const [mainHelpers] = mainContext;\n\n // Create thumbnail slider with user options\n const [thumbSlider, thumbHelpers] = createSlider(\n props.options || {},\n ...(props.plugins || []),\n );\n\n // Update on children change (same as main Slider)\n createEffect(\n on(\n () => access(props.children),\n () => queueMicrotask(() => thumbHelpers.update()),\n { defer: true },\n ),\n );\n\n // Sync thumbnail slider with main slider\n onMount(() => {\n // Wait for next tick to ensure both sliders are mounted\n queueMicrotask(() => {\n const mainSliderInstance = mainHelpers()?.slider();\n const thumbSliderInstance = thumbHelpers.slider();\n\n if (mainSliderInstance && thumbSliderInstance) {\n // Function to update active thumbnail\n const activeClassName = props.activeClass || \"active\";\n const updateActiveThumbnail = () => {\n const mainCurrent = mainHelpers()?.current();\n if (mainCurrent !== undefined) {\n // Remove active class from all thumbnails\n thumbSliderInstance.slides.forEach((slide) => {\n slide.classList.remove(activeClassName);\n });\n // Add active class to current thumbnail\n if (thumbSliderInstance.slides[mainCurrent]) {\n thumbSliderInstance.slides[mainCurrent].classList.add(\n activeClassName,\n );\n }\n // Move thumbnail slider to show active thumbnail\n thumbHelpers.moveTo(mainCurrent);\n }\n };\n\n // Listen to main slider changes\n mainSliderInstance.on(\"slideChanged\", updateActiveThumbnail);\n\n // Set initial active state\n updateActiveThumbnail();\n\n // Add click handlers to thumbnails\n thumbSliderInstance.slides.forEach((slide, idx) => {\n slide.addEventListener(\"click\", () => {\n mainHelpers()?.moveTo(idx);\n });\n });\n }\n });\n });\n\n // Prevent tree-shaking\n thumbSlider;\n\n return <div use:thumbSlider>{props.children}</div>;\n};\n"],"names":["createSlider","options","plugins","slider","el","opts","access","current","setCurrent","createSignal","initial","destroy","getOptions","overrides","baseOpts","selector","childNodes","update","create","newEl","classList","add","onMount","KeenSlider","on","track","details","rel","onCleanup","createEffect","moveTo","id","duration","absolute","easing","moveToIdx","next","prev","returnType","func","SliderContext","createContext","SliderProvider","props","_$createComponent","Provider","value","children","Slider","isServer","_el$","_tmpl$","_$insert","setHelpers","useContext","helpers","queueMicrotask","defer","_el$2","_$use","SliderButton","context","changeSlide","_el$3","_tmpl$2","$$click","_$effect","_p$","_v$","disabled","_v$2","class","_v$3","_$className","_$classList","undefined","SliderDots","slideCount","setSlideCount","handleDotClick","idx","sliderInstance","updateCount","slides","length","createMemo","Array","from","_","i","Show","when","_el$4","_tmpl$3","Index","each","isActive","_el$5","_v$6","dotClass","_v$7","dotClassList","active","_v$8","_$setAttribute","_v$4","_v$5","SliderThumbnails","_el$6","mainContext","console","warn","_el$7","mainHelpers","thumbSlider","thumbHelpers","mainSliderInstance","thumbSliderInstance","activeClassName","activeClass","updateActiveThumbnail","mainCurrent","forEach","slide","remove","addEventListener","_el$8","_$delegateEvents"],"mappings":"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"}
|
|
@@ -6,17 +6,16 @@ import { createComponent, isServer, template, insert, use, effect, className, cl
|
|
|
6
6
|
/**
|
|
7
7
|
* Creates a slider powered by KeenSlider.
|
|
8
8
|
*
|
|
9
|
-
* @param
|
|
10
|
-
* @param
|
|
11
|
-
* @returns
|
|
12
|
-
* @returns
|
|
13
|
-
* @returns
|
|
14
|
-
* @returns
|
|
15
|
-
* @returns
|
|
16
|
-
* @returns
|
|
17
|
-
* @returns
|
|
18
|
-
* @returns
|
|
19
|
-
* @returns {Function} helpers.destroy Manual destroy function
|
|
9
|
+
* @param options - Values to initialize the slider with
|
|
10
|
+
* @param plugins - Extensions that enhance KeenSlider options
|
|
11
|
+
* @returns Returns mount and helper methods
|
|
12
|
+
* @returns create - Mounts the slider on provided element
|
|
13
|
+
* @returns helpers.current - Current slide number
|
|
14
|
+
* @returns helpers.next - Function to trigger the next slide
|
|
15
|
+
* @returns helpers.prev - Function to trigger the previous slide
|
|
16
|
+
* @returns helpers.details - Provides details about the current slider
|
|
17
|
+
* @returns helpers.slider - Returns the KeenSlider instance
|
|
18
|
+
* @returns helpers.destroy - Manual destroy function
|
|
20
19
|
*
|
|
21
20
|
* @example
|
|
22
21
|
* ```ts
|
|
@@ -30,13 +29,14 @@ const createSlider = (options, ...plugins) => {
|
|
|
30
29
|
const opts = () => access(options);
|
|
31
30
|
const [current, setCurrent] = createSignal(opts()?.initial || 0);
|
|
32
31
|
const destroy = () => slider && slider.destroy();
|
|
33
|
-
const getOptions = (overrides = {}
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
32
|
+
const getOptions = (overrides = {}) => {
|
|
33
|
+
const baseOpts = opts();
|
|
34
|
+
return {
|
|
35
|
+
selector: el.childNodes,
|
|
36
|
+
...(baseOpts || {}),
|
|
37
|
+
...overrides
|
|
38
|
+
};
|
|
39
|
+
};
|
|
40
40
|
const update = () => slider?.update(getOptions());
|
|
41
41
|
// Slider creation method and directive function
|
|
42
42
|
const create = newEl => {
|
|
@@ -84,8 +84,8 @@ const SliderContext = createContext(createSignal(null));
|
|
|
84
84
|
/**
|
|
85
85
|
* A helpful and simple Provider to wrap your Slider if controls such as SliderButton are used.
|
|
86
86
|
*
|
|
87
|
-
* @param props
|
|
88
|
-
* @param props
|
|
87
|
+
* @param props.options - Accepts all KeenSlider options.
|
|
88
|
+
* @param props.plugins - A list of Solid Slider or Keen slider plugins.
|
|
89
89
|
*/
|
|
90
90
|
const SliderProvider = props => createComponent(SliderContext.Provider, {
|
|
91
91
|
get value() {
|
|
@@ -99,8 +99,8 @@ const SliderProvider = props => createComponent(SliderContext.Provider, {
|
|
|
99
99
|
/**
|
|
100
100
|
* Main Slider component for specifying the Slider on the page.
|
|
101
101
|
*
|
|
102
|
-
* @param props
|
|
103
|
-
* @param props
|
|
102
|
+
* @param props.options - Accepts all KeenSlider options.
|
|
103
|
+
* @param props.plugins - A list of Solid Slider or Keen slider plugins.
|
|
104
104
|
*/
|
|
105
105
|
const Slider = props => {
|
|
106
106
|
if (isServer) return (() => {
|
|
@@ -125,10 +125,10 @@ const Slider = props => {
|
|
|
125
125
|
/**
|
|
126
126
|
* Provides a helpful button with next/prev to pair with your slider.
|
|
127
127
|
*
|
|
128
|
-
* @param props
|
|
129
|
-
* @param props
|
|
130
|
-
* @param props
|
|
131
|
-
* @param props
|
|
128
|
+
* @param props.next - Specify if this should be a next button.
|
|
129
|
+
* @param props.prev - Specify if this should be a prev button.
|
|
130
|
+
* @param props.class - Class to override the button.
|
|
131
|
+
* @param props.classList - List of classes to override the button.
|
|
132
132
|
*/
|
|
133
133
|
const SliderButton = props => {
|
|
134
134
|
const context = useContext(SliderContext);
|
|
@@ -162,10 +162,10 @@ const SliderButton = props => {
|
|
|
162
162
|
* Navigation dots component for the slider.
|
|
163
163
|
* Displays a dot for each slide and highlights the current slide.
|
|
164
164
|
*
|
|
165
|
-
* @param props
|
|
166
|
-
* @param props
|
|
167
|
-
* @param props
|
|
168
|
-
* @param props
|
|
165
|
+
* @param props.class - Class to override the dots container.
|
|
166
|
+
* @param props.classList - List of classes to override the dots container.
|
|
167
|
+
* @param props.dotClass - Class to override individual dots.
|
|
168
|
+
* @param props.dotClassList - List of classes to override individual dots.
|
|
169
169
|
*
|
|
170
170
|
* @example
|
|
171
171
|
* ```tsx
|
|
@@ -263,8 +263,8 @@ const SliderDots = props => {
|
|
|
263
263
|
* A second Slider that synchronizes with the main slider.
|
|
264
264
|
* User provides thumbnail slides as children.
|
|
265
265
|
*
|
|
266
|
-
* @param props
|
|
267
|
-
* @param props
|
|
266
|
+
* @param props.options - Options for the thumbnail slider.
|
|
267
|
+
* @param props.plugins - Plugins for the thumbnail slider.
|
|
268
268
|
*
|
|
269
269
|
* @example
|
|
270
270
|
* ```tsx
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.module.js","sources":["../../src/primitive.tsx","../../src/components.tsx"],"sourcesContent":["import {\n on,\n onMount,\n createSignal,\n onCleanup,\n Accessor,\n createEffect,\n} from \"solid-js\";\nimport { access } from \"@solid-primitives/utils\";\nimport KeenSlider, {\n KeenSliderHooks,\n KeenSliderInstance,\n KeenSliderOptions,\n KeenSliderPlugin,\n TrackDetails,\n} from \"keen-slider\";\n\ndeclare module \"solid-js\" {\n namespace JSX {\n interface Directives {\n slider: {};\n }\n }\n}\n\nexport type SliderControls<O, P, H extends string> = [\n create: (el: HTMLElement) => void,\n helpers: {\n current: Accessor<number>;\n next: VoidFunction;\n prev: VoidFunction;\n moveTo: (\n id: number,\n duration?: number,\n absolute?: boolean,\n easing?: (t: number) => number,\n ) => void;\n details: () => TrackDetails;\n slider: () => KeenSliderInstance<O, P, H> | undefined;\n destroy: VoidFunction;\n update: VoidFunction;\n },\n];\n\n/**\n * Creates a slider powered by KeenSlider.\n *\n * @param {Object} options Values to initialize the slider with\n * @param {Array} plugins Extensions that enhance KeenSlider options\n * @returns {[create: Function, helpers: Object]} Returns mount and helper methods\n * @returns {Function} create Mounts the slider on provided element\n * @returns {Function} helpers.current Current slide number\n * @returns {Function} helpers.current Current slide number\n * @returns {Function} helpers.next Function to trigger the next slide\n * @returns {Function} helpers.prev Function to trigger the previous slide\n * @returns {Function<Object>} helpers.details Provides details about the current slider\n * @returns {Function} helpers.slider Returns the KeenSlider instance\n * @returns {Function} helpers.destroy Manual destroy function\n *\n * @example\n * ```ts\n * const [create, { prev, next }] = createSlider();\n * <div use:slider>...</div>\n * ```\n */\nexport const createSlider = <\n O = {},\n P = {},\n H extends string = KeenSliderHooks,\n>(\n options?: KeenSliderOptions<O, P, H> | Accessor<KeenSliderOptions<O, P, H>>,\n ...plugins: KeenSliderPlugin<O, P, H>[]\n): SliderControls<O, P, H> => {\n let slider: KeenSliderInstance<O, P, H> | undefined;\n let el: HTMLElement;\n const opts = () => access(options);\n const [current, setCurrent] = createSignal(opts()?.initial || 0);\n const destroy = () => slider && slider.destroy();\n const getOptions: Accessor<KeenSliderOptions<O, P, H> | undefined> = (\n overrides = {},\n // @ts-ignore\n ) => ({\n selector: el.childNodes,\n ...opts(),\n ...overrides,\n });\n const update = () => slider?.update(getOptions());\n // Slider creation method and directive function\n const create = (newEl: HTMLElement) => {\n el = newEl;\n el.classList.add(\"keen-slider\");\n onMount(() => {\n slider = new KeenSlider<O, P, H>(el, getOptions(), plugins);\n slider.on(\"slideChanged\", () => setCurrent(slider!.track.details.rel));\n });\n onCleanup(destroy);\n if (typeof options === \"function\") {\n createEffect(on(() => options, update));\n }\n };\n const moveTo = (\n id: number,\n duration = 250,\n absolute = false,\n easing?: (t: number) => number,\n ) => {\n slider?.moveToIdx(id, absolute, { duration, easing: easing });\n };\n return [\n create,\n {\n current,\n next: () => slider && slider.next(),\n prev: () => slider && slider.prev(),\n details: () => (slider ? slider.track.details : ({} as TrackDetails)),\n slider: () => slider,\n moveTo,\n destroy,\n update,\n },\n ];\n};\n","import {\n on,\n createContext,\n useContext,\n createSignal,\n FlowComponent,\n createEffect,\n For,\n Show,\n JSX,\n createMemo,\n Index,\n onMount,\n} from \"solid-js\";\nimport { access } from \"@solid-primitives/utils\";\nimport { isServer } from \"solid-js/web\";\nimport { KeenSliderOptions, KeenSliderPlugin } from \"keen-slider\";\nimport { createSlider } from \"./primitive\";\n\n// The following is a hacky way of extracting SliderHelpers\ninterface Func<T> {\n ([...args]: any, args2?: any): T;\n}\nexport function returnType<T>(func: Func<T>) {\n return {} as T;\n}\nconst sliderValues = returnType(createSlider);\ntype SliderHelpers = (typeof sliderValues)[1];\n\n// Main context for the slider\nexport const SliderContext = createContext(\n createSignal<SliderHelpers | null>(null),\n);\n\n/**\n * A helpful and simple Provider to wrap your Slider if controls such as SliderButton are used.\n *\n * @param props {KeenSliderOptions} options - Accepts all KeenSlider options.\n * @param props {KeenSLiderPlugin} plugins - A list of Solid Slider or Keen slider plugins.\n */\nexport const SliderProvider: FlowComponent = (props) => (\n <SliderContext.Provider value={createSignal<SliderHelpers | null>(null)}>\n {props.children}\n </SliderContext.Provider>\n);\n\n/**\n * Main Slider component for specifying the Slider on the page.\n *\n * @param props {KeenSliderOptions} options - Accepts all KeenSlider options.\n * @param props {KeenSLiderPlugin} plugins - A list of Solid Slider or Keen slider plugins.\n */\nexport const Slider: FlowComponent<{\n options?: KeenSliderOptions;\n plugins?: KeenSliderPlugin[];\n}> = (props) => {\n if (isServer) return <div class=\"keen-slider\">{props.children}</div>;\n const [, setHelpers] = useContext(SliderContext);\n const [slider, helpers] = createSlider(\n props.options || {},\n ...(props.plugins || []),\n );\n setHelpers(helpers);\n createEffect(\n on(\n () => access(props.children),\n () => queueMicrotask(() => helpers.update()),\n { defer: true },\n ),\n );\n slider;\n return (\n <div use:slider class=\"keen-slider\">\n {props.children}\n </div>\n );\n};\n\n/**\n * Provides a helpful button with next/prev to pair with your slider.\n *\n * @param props {boolean} next - Specify if this should be a next button.\n * @param props {boolean} prev - Specify if this should be a prev button.\n * @param props {string} class - Class to override the button.\n * @param props {object} classList - List of classes to override the button.\n */\nexport const SliderButton: FlowComponent<{\n next?: boolean;\n prev?: boolean;\n disabled?: boolean;\n class?: string;\n classList?: { [k: string]: boolean | undefined };\n}> = (props) => {\n const context = useContext(SliderContext);\n const changeSlide = () => {\n if (context == null) return;\n const [helpers] = context;\n props.next ? helpers()?.next() : helpers()?.prev();\n };\n return (\n <button\n disabled={props.disabled || false}\n class={props.class}\n classList={props.classList}\n onClick={changeSlide}\n >\n {props.children}\n </button>\n );\n};\n\n/**\n * Navigation dots component for the slider.\n * Displays a dot for each slide and highlights the current slide.\n *\n * @param props {string} class - Class to override the dots container.\n * @param props {object} classList - List of classes to override the dots container.\n * @param props {string} dotClass - Class to override individual dots.\n * @param props {object} dotClassList - List of classes to override individual dots.\n *\n * @example\n * ```tsx\n * <SliderProvider>\n * <Slider>\n * <div class=\"keen-slider__slide\">Slide 1</div>\n * <div class=\"keen-slider__slide\">Slide 2</div>\n * </Slider>\n * <SliderDots />\n * </SliderProvider>\n * ```\n */\nexport const SliderDots: FlowComponent<{\n class?: string;\n classList?: { [k: string]: boolean | undefined };\n dotClass?: string;\n dotClassList?: { [k: string]: boolean | undefined };\n}> = (props) => {\n const context = useContext(SliderContext);\n const [slideCount, setSlideCount] = createSignal(0);\n\n const handleDotClick = (idx: number) => {\n if (context == null) return;\n const [helpers] = context;\n helpers()?.moveTo(idx);\n };\n\n // Update slide count when slider is created/updated\n createEffect(() => {\n if (!context) return;\n const [helpers] = context;\n const sliderInstance = helpers()?.slider();\n\n if (sliderInstance) {\n const updateCount = () => {\n const details = helpers()?.details();\n setSlideCount(details?.slides?.length || 0);\n };\n\n // Set initial count\n updateCount();\n\n // Listen for slider changes\n sliderInstance.on(\"created\", updateCount);\n sliderInstance.on(\"updated\", updateCount);\n }\n });\n\n const slides = createMemo(() =>\n Array.from({ length: slideCount() }, (_, i) => i),\n );\n\n return (\n <Show when={context != null}>\n <div\n class={props.class || \"keen-slider-dots\"}\n classList={props.classList}\n >\n <Index each={slides()}>\n {(idx) => {\n const [helpers] = context!;\n const isActive = () => helpers()?.current() === idx();\n return (\n <button\n class={props.dotClass || \"keen-slider-dot\"}\n classList={{\n ...props.dotClassList,\n active: isActive(),\n }}\n onClick={() => handleDotClick(idx())}\n aria-label={`Go to slide ${idx() + 1}`}\n />\n );\n }}\n </Index>\n </div>\n </Show>\n );\n};\n\n/**\n * Thumbnail navigation component for the slider.\n * A second Slider that synchronizes with the main slider.\n * User provides thumbnail slides as children.\n *\n * @param props {KeenSliderOptions} options - Options for the thumbnail slider.\n * @param props {KeenSliderPlugin[]} plugins - Plugins for the thumbnail slider.\n *\n * @example\n * ```tsx\n * <SliderProvider>\n * <Slider options={{ loop: true }}>\n * <div class=\"keen-slider__slide\">\n * <img src=\"slide1.jpg\" alt=\"Slide 1\" />\n * </div>\n * <div class=\"keen-slider__slide\">\n * <img src=\"slide2.jpg\" alt=\"Slide 2\" />\n * </div>\n * </Slider>\n * <SliderThumbnails options={{ slides: { perView: 4, spacing: 10 } }}>\n * <div class=\"keen-slider__slide\">\n * <img src=\"thumb1.jpg\" alt=\"Thumbnail 1\" />\n * </div>\n * <div class=\"keen-slider__slide\">\n * <img src=\"thumb2.jpg\" alt=\"Thumbnail 2\" />\n * </div>\n * </SliderThumbnails>\n * </SliderProvider>\n * ```\n */\nexport const SliderThumbnails: FlowComponent<{\n options?: KeenSliderOptions;\n plugins?: KeenSliderPlugin[];\n activeClass?: string;\n}> = (props) => {\n if (isServer) return <div>{props.children}</div>;\n\n const mainContext = useContext(SliderContext);\n\n if (!mainContext) {\n console.warn(\"SliderThumbnails must be used within a SliderProvider\");\n return <div>{props.children}</div>;\n }\n\n const [mainHelpers] = mainContext;\n\n // Create thumbnail slider with user options\n const [thumbSlider, thumbHelpers] = createSlider(\n props.options || {},\n ...(props.plugins || []),\n );\n\n // Update on children change (same as main Slider)\n createEffect(\n on(\n () => access(props.children),\n () => queueMicrotask(() => thumbHelpers.update()),\n { defer: true },\n ),\n );\n\n // Sync thumbnail slider with main slider\n onMount(() => {\n // Wait for next tick to ensure both sliders are mounted\n queueMicrotask(() => {\n const mainSliderInstance = mainHelpers()?.slider();\n const thumbSliderInstance = thumbHelpers.slider();\n\n if (mainSliderInstance && thumbSliderInstance) {\n // Function to update active thumbnail\n const activeClassName = props.activeClass || \"active\";\n const updateActiveThumbnail = () => {\n const mainCurrent = mainHelpers()?.current();\n if (mainCurrent !== undefined) {\n // Remove active class from all thumbnails\n thumbSliderInstance.slides.forEach((slide) => {\n slide.classList.remove(activeClassName);\n });\n // Add active class to current thumbnail\n if (thumbSliderInstance.slides[mainCurrent]) {\n thumbSliderInstance.slides[mainCurrent].classList.add(\n activeClassName,\n );\n }\n // Move thumbnail slider to show active thumbnail\n thumbHelpers.moveTo(mainCurrent);\n }\n };\n\n // Listen to main slider changes\n mainSliderInstance.on(\"slideChanged\", updateActiveThumbnail);\n\n // Set initial active state\n updateActiveThumbnail();\n\n // Add click handlers to thumbnails\n thumbSliderInstance.slides.forEach((slide, idx) => {\n slide.addEventListener(\"click\", () => {\n mainHelpers()?.moveTo(idx);\n });\n });\n }\n });\n });\n\n // Prevent tree-shaking\n thumbSlider;\n\n return <div use:thumbSlider>{props.children}</div>;\n};\n"],"names":["createSlider","options","plugins","slider","el","opts","access","current","setCurrent","createSignal","initial","destroy","getOptions","overrides","selector","childNodes","update","create","newEl","classList","add","onMount","KeenSlider","on","track","details","rel","onCleanup","createEffect","moveTo","id","duration","absolute","easing","moveToIdx","next","prev","returnType","func","SliderContext","createContext","SliderProvider","props","_$createComponent","Provider","value","children","Slider","isServer","_el$","_tmpl$","_$insert","setHelpers","useContext","helpers","queueMicrotask","defer","_el$2","_$use","SliderButton","context","changeSlide","_el$3","_tmpl$2","$$click","_$effect","_p$","_v$","disabled","_v$2","class","_v$3","_$className","_$classList","undefined","SliderDots","slideCount","setSlideCount","handleDotClick","idx","sliderInstance","updateCount","slides","length","createMemo","Array","from","_","i","Show","when","_el$4","_tmpl$3","Index","each","isActive","_el$5","_v$6","dotClass","_v$7","dotClassList","active","_v$8","_$setAttribute","_v$4","_v$5","SliderThumbnails","_el$6","mainContext","console","warn","_el$7","mainHelpers","thumbSlider","thumbHelpers","mainSliderInstance","thumbSliderInstance","activeClassName","activeClass","updateActiveThumbnail","mainCurrent","forEach","slide","remove","addEventListener","_el$8","_$delegateEvents"],"mappings":";;;;;AA4CA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,YAAY,GAAGA,CAK1BC,OAA2E,EAC3E,GAAGC,OAAoC,KACX;AAC5B,EAAA,IAAIC,MAA+C;AACnD,EAAA,IAAIC,EAAe;AACnB,EAAA,MAAMC,IAAI,GAAGA,MAAMC,MAAM,CAACL,OAAO,CAAC;AAClC,EAAA,MAAM,CAACM,OAAO,EAAEC,UAAU,CAAC,GAAGC,YAAY,CAACJ,IAAI,EAAE,EAAEK,OAAO,IAAI,CAAC,CAAC;EAChE,MAAMC,OAAO,GAAGA,MAAMR,MAAM,IAAIA,MAAM,CAACQ,OAAO,EAAE;AAChD,EAAA,MAAMC,UAA4D,GAAGA,CACnEC,SAAS,GAAG;AACZ;QACI;IACJC,QAAQ,EAAEV,EAAE,CAACW,UAAU;IACvB,GAAGV,IAAI,EAAE;IACT,GAAGQ;AACL,GAAC,CAAC;EACF,MAAMG,MAAM,GAAGA,MAAMb,MAAM,EAAEa,MAAM,CAACJ,UAAU,EAAE,CAAC;AACjD;EACA,MAAMK,MAAM,GAAIC,KAAkB,IAAK;AACrCd,IAAAA,EAAE,GAAGc,KAAK;AACVd,IAAAA,EAAE,CAACe,SAAS,CAACC,GAAG,CAAC,aAAa,CAAC;AAC/BC,IAAAA,OAAO,CAAC,MAAM;MACZlB,MAAM,GAAG,IAAImB,UAAU,CAAUlB,EAAE,EAAEQ,UAAU,EAAE,EAAEV,OAAO,CAAC;AAC3DC,MAAAA,MAAM,CAACoB,EAAE,CAAC,cAAc,EAAE,MAAMf,UAAU,CAACL,MAAM,CAAEqB,KAAK,CAACC,OAAO,CAACC,GAAG,CAAC,CAAC;AACxE,IAAA,CAAC,CAAC;IACFC,SAAS,CAAChB,OAAO,CAAC;AAClB,IAAA,IAAI,OAAOV,OAAO,KAAK,UAAU,EAAE;MACjC2B,YAAY,CAACL,EAAE,CAAC,MAAMtB,OAAO,EAAEe,MAAM,CAAC,CAAC;AACzC,IAAA;EACF,CAAC;AACD,EAAA,MAAMa,MAAM,GAAGA,CACbC,EAAU,EACVC,QAAQ,GAAG,GAAG,EACdC,QAAQ,GAAG,KAAK,EAChBC,MAA8B,KAC3B;AACH9B,IAAAA,MAAM,EAAE+B,SAAS,CAACJ,EAAE,EAAEE,QAAQ,EAAE;MAAED,QAAQ;AAAEE,MAAAA,MAAM,EAAEA;AAAO,KAAC,CAAC;EAC/D,CAAC;EACD,OAAO,CACLhB,MAAM,EACN;IACEV,OAAO;IACP4B,IAAI,EAAEA,MAAMhC,MAAM,IAAIA,MAAM,CAACgC,IAAI,EAAE;IACnCC,IAAI,EAAEA,MAAMjC,MAAM,IAAIA,MAAM,CAACiC,IAAI,EAAE;AACnCX,IAAAA,OAAO,EAAEA,MAAOtB,MAAM,GAAGA,MAAM,CAACqB,KAAK,CAACC,OAAO,GAAI,EAAoB;IACrEtB,MAAM,EAAEA,MAAMA,MAAM;IACpB0B,MAAM;IACNlB,OAAO;AACPK,IAAAA;AACF,GAAC,CACF;AACH;;;;;;ACtGA;;AAIO,SAASqB,UAAUA,CAAIC,IAAa,EAAE;AAC3C,EAAA,OAAO,EAAE;AACX;AAIA;AACO,MAAMC,aAAa,GAAGC,aAAa,CACxC/B,YAAY,CAAuB,IAAI,CACzC;;AAEA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMgC,cAA6B,GAAIC,KAAK,IAAAC,eAAA,CAChDJ,aAAa,CAACK,QAAQ,EAAA;AAAA,EAAA,IAACC,KAAKA,GAAA;IAAA,OAAEpC,YAAY,CAAuB,IAAI,CAAC;AAAA,EAAA,CAAA;AAAA,EAAA,IAAAqC,QAAAA,GAAA;IAAA,OACpEJ,KAAK,CAACI,QAAQ;AAAA,EAAA;AAAA,CAAA;;AAInB;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,MAGX,GAAIL,KAAK,IAAK;AACd,EAAA,IAAIM,QAAQ,EAAE,OAAA,CAAA,MAAA;IAAA,MAAAC,IAAA,GAAAC,MAAA,EAAA;AAAAC,IAAAA,MAAA,CAAAF,IAAA,EAAA,MAAiCP,KAAK,CAACI,QAAQ,CAAA;AAAA,IAAA,OAAAG,IAAA;AAAA,EAAA,CAAA,GAAA;AAC7D,EAAA,MAAM,GAAGG,UAAU,CAAC,GAAGC,UAAU,CAACd,aAAa,CAAC;EAChD,MAAM,CAACpC,MAAM,EAAEmD,OAAO,CAAC,GAAGtD,YAAY,CACpC0C,KAAK,CAACzC,OAAO,IAAI,EAAE,EACnB,IAAIyC,KAAK,CAACxC,OAAO,IAAI,EAAE,CACzB,CAAC;EACDkD,UAAU,CAACE,OAAO,CAAC;EACnB1B,YAAY,CACVL,EAAE,CACA,MAAMjB,MAAM,CAACoC,KAAK,CAACI,QAAQ,CAAC,EAC5B,MAAMS,cAAc,CAAC,MAAMD,OAAO,CAACtC,MAAM,EAAE,CAAC,EAC5C;AAAEwC,IAAAA,KAAK,EAAE;AAAK,GAChB,CACF,CAAC;AAED,EAAA,OAAA,CAAA,MAAA;IAAA,MAAAC,KAAA,GAAAP,MAAA,EAAA;IAAAQ,GAAA,CACWvD,MAAM,EAAAsD,KAAA,EAAA,MAAA,IAAA,CAAA;AAAAN,IAAAA,MAAA,CAAAM,KAAA,EAAA,MACZf,KAAK,CAACI,QAAQ,CAAA;AAAA,IAAA,OAAAW,KAAA;AAAA,EAAA,CAAA,GAAA;AAGrB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAME,YAMX,GAAIjB,KAAK,IAAK;AACd,EAAA,MAAMkB,OAAO,GAAGP,UAAU,CAACd,aAAa,CAAC;EACzC,MAAMsB,WAAW,GAAGA,MAAM;IACxB,IAAID,OAAO,IAAI,IAAI,EAAE;AACrB,IAAA,MAAM,CAACN,OAAO,CAAC,GAAGM,OAAO;AACzBlB,IAAAA,KAAK,CAACP,IAAI,GAAGmB,OAAO,EAAE,EAAEnB,IAAI,EAAE,GAAGmB,OAAO,EAAE,EAAElB,IAAI,EAAE;EACpD,CAAC;AACD,EAAA,OAAA,CAAA,MAAA;IAAA,MAAA0B,KAAA,GAAAC,OAAA,EAAA;IAAAD,KAAA,CAAAE,OAAA,GAKaH,WAAW;AAAAV,IAAAA,MAAA,CAAAW,KAAA,EAAA,MAEnBpB,KAAK,CAACI,QAAQ,CAAA;AAAAmB,IAAAA,MAAA,CAAAC,GAAA,IAAA;AAAA,MAAA,MAAAC,GAAA,GALLzB,KAAK,CAAC0B,QAAQ,IAAI,KAAK;QAAAC,IAAA,GAC1B3B,KAAK,CAAC4B,KAAK;QAAAC,IAAA,GACP7B,KAAK,CAACvB,SAAS;AAAAgD,MAAAA,GAAA,KAAAD,GAAA,CAAAC,GAAA,KAAAL,KAAA,CAAAM,QAAA,GAAAF,GAAA,CAAAC,GAAA,GAAAA,GAAA,CAAA;AAAAE,MAAAA,IAAA,KAAAH,GAAA,CAAAG,IAAA,IAAAG,SAAA,CAAAV,KAAA,EAAAI,GAAA,CAAAG,IAAA,GAAAA,IAAA,CAAA;MAAAH,GAAA,CAAAK,IAAA,GAAAE,SAAA,CAAAX,KAAA,EAAAS,IAAA,EAAAL,GAAA,CAAAK,IAAA,CAAA;AAAA,MAAA,OAAAL,GAAA;AAAA,IAAA,CAAA,EAAA;AAAAC,MAAAA,GAAA,EAAAO,SAAA;AAAAL,MAAAA,IAAA,EAAAK,SAAA;AAAAH,MAAAA,IAAA,EAAAG;AAAA,KAAA,CAAA;AAAA,IAAA,OAAAZ,KAAA;AAAA,EAAA,CAAA,GAAA;AAMhC;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMa,UAKX,GAAIjC,KAAK,IAAK;AACd,EAAA,MAAMkB,OAAO,GAAGP,UAAU,CAACd,aAAa,CAAC;EACzC,MAAM,CAACqC,UAAU,EAAEC,aAAa,CAAC,GAAGpE,YAAY,CAAC,CAAC,CAAC;EAEnD,MAAMqE,cAAc,GAAIC,GAAW,IAAK;IACtC,IAAInB,OAAO,IAAI,IAAI,EAAE;AACrB,IAAA,MAAM,CAACN,OAAO,CAAC,GAAGM,OAAO;AACzBN,IAAAA,OAAO,EAAE,EAAEzB,MAAM,CAACkD,GAAG,CAAC;EACxB,CAAC;;AAED;AACAnD,EAAAA,YAAY,CAAC,MAAM;IACjB,IAAI,CAACgC,OAAO,EAAE;AACd,IAAA,MAAM,CAACN,OAAO,CAAC,GAAGM,OAAO;IACzB,MAAMoB,cAAc,GAAG1B,OAAO,EAAE,EAAEnD,MAAM,EAAE;AAE1C,IAAA,IAAI6E,cAAc,EAAE;MAClB,MAAMC,WAAW,GAAGA,MAAM;QACxB,MAAMxD,OAAO,GAAG6B,OAAO,EAAE,EAAE7B,OAAO,EAAE;QACpCoD,aAAa,CAACpD,OAAO,EAAEyD,MAAM,EAAEC,MAAM,IAAI,CAAC,CAAC;MAC7C,CAAC;;AAED;AACAF,MAAAA,WAAW,EAAE;;AAEb;AACAD,MAAAA,cAAc,CAACzD,EAAE,CAAC,SAAS,EAAE0D,WAAW,CAAC;AACzCD,MAAAA,cAAc,CAACzD,EAAE,CAAC,SAAS,EAAE0D,WAAW,CAAC;AAC3C,IAAA;AACF,EAAA,CAAC,CAAC;EAEF,MAAMC,MAAM,GAAGE,UAAU,CAAC,MACxBC,KAAK,CAACC,IAAI,CAAC;IAAEH,MAAM,EAAEP,UAAU;GAAI,EAAE,CAACW,CAAC,EAAEC,CAAC,KAAKA,CAAC,CAClD,CAAC;EAED,OAAA7C,eAAA,CACG8C,IAAI,EAAA;IAACC,IAAI,EAAE9B,OAAO,IAAI,IAAI;AAAA,IAAA,IAAAd,QAAAA,GAAA;MAAA,MAAA6C,KAAA,GAAAC,OAAA,EAAA;AAAAzC,MAAAA,MAAA,CAAAwC,KAAA,EAAAhD,eAAA,CAKtBkD,KAAK,EAAA;AAAA,QAAA,IAACC,IAAIA,GAAA;UAAA,OAAEZ,MAAM,EAAE;AAAA,QAAA,CAAA;QAAApC,QAAA,EACjBiC,GAAG,IAAK;AACR,UAAA,MAAM,CAACzB,OAAO,CAAC,GAAGM,OAAQ;AAC1B,UAAA,MAAMmC,QAAQ,GAAGA,MAAMzC,OAAO,EAAE,EAAE/C,OAAO,EAAE,KAAKwE,GAAG,EAAE;AACrD,UAAA,OAAA,CAAA,MAAA;YAAA,MAAAiB,KAAA,GAAAjC,OAAA,EAAA;YAAAiC,KAAA,CAAAhC,OAAA,GAOa,MAAMc,cAAc,CAACC,GAAG,EAAE,CAAC;AAAAd,YAAAA,MAAA,CAAAC,GAAA,IAAA;AAAA,cAAA,MAAA+B,IAAA,GAL7BvD,KAAK,CAACwD,QAAQ,IAAI,iBAAiB;AAAAC,gBAAAA,IAAA,GAC/B;kBACT,GAAGzD,KAAK,CAAC0D,YAAY;kBACrBC,MAAM,EAAEN,QAAQ;iBACjB;AAAAO,gBAAAA,IAAA,GAEW,CAAA,YAAA,EAAevB,GAAG,EAAE,GAAG,CAAC,CAAA,CAAE;AAAAkB,cAAAA,IAAA,KAAA/B,GAAA,CAAA+B,IAAA,IAAAzB,SAAA,CAAAwB,KAAA,EAAA9B,GAAA,CAAA+B,IAAA,GAAAA,IAAA,CAAA;cAAA/B,GAAA,CAAAiC,IAAA,GAAA1B,SAAA,CAAAuB,KAAA,EAAAG,IAAA,EAAAjC,GAAA,CAAAiC,IAAA,CAAA;AAAAG,cAAAA,IAAA,KAAApC,GAAA,CAAAoC,IAAA,IAAAC,YAAA,CAAAP,KAAA,EAAA,YAAA,EAAA9B,GAAA,CAAAoC,IAAA,GAAAA,IAAA,CAAA;AAAA,cAAA,OAAApC,GAAA;AAAA,YAAA,CAAA,EAAA;AAAA+B,cAAAA,IAAA,EAAAvB,SAAA;AAAAyB,cAAAA,IAAA,EAAAzB,SAAA;AAAA4B,cAAAA,IAAA,EAAA5B;AAAA,aAAA,CAAA;AAAA,YAAA,OAAAsB,KAAA;AAAA,UAAA,CAAA,GAAA;AAG5C,QAAA;AAAC,OAAA,CAAA,CAAA;AAAA/B,MAAAA,MAAA,CAAAC,GAAA,IAAA;AAAA,QAAA,MAAAsC,IAAA,GAlBI9D,KAAK,CAAC4B,KAAK,IAAI,kBAAkB;UAAAmC,IAAA,GAC7B/D,KAAK,CAACvB,SAAS;AAAAqF,QAAAA,IAAA,KAAAtC,GAAA,CAAAsC,IAAA,IAAAhC,SAAA,CAAAmB,KAAA,EAAAzB,GAAA,CAAAsC,IAAA,GAAAA,IAAA,CAAA;QAAAtC,GAAA,CAAAuC,IAAA,GAAAhC,SAAA,CAAAkB,KAAA,EAAAc,IAAA,EAAAvC,GAAA,CAAAuC,IAAA,CAAA;AAAA,QAAA,OAAAvC,GAAA;AAAA,MAAA,CAAA,EAAA;AAAAsC,QAAAA,IAAA,EAAA9B,SAAA;AAAA+B,QAAAA,IAAA,EAAA/B;AAAA,OAAA,CAAA;AAAA,MAAA,OAAAiB,KAAA;AAAA,IAAA;AAAA,GAAA,CAAA;AAsBlC;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMe,gBAIX,GAAIhE,KAAK,IAAK;AACd,EAAA,IAAIM,QAAQ,EAAE,OAAA,CAAA,MAAA;IAAA,MAAA2D,KAAA,GAAAf,OAAA,EAAA;AAAAzC,IAAAA,MAAA,CAAAwD,KAAA,EAAA,MAAajE,KAAK,CAACI,QAAQ,CAAA;AAAA,IAAA,OAAA6D,KAAA;AAAA,EAAA,CAAA,GAAA;AAEzC,EAAA,MAAMC,WAAW,GAAGvD,UAAU,CAACd,aAAa,CAAC;EAE7C,IAAI,CAACqE,WAAW,EAAE;AAChBC,IAAAA,OAAO,CAACC,IAAI,CAAC,uDAAuD,CAAC;AACrE,IAAA,OAAA,CAAA,MAAA;MAAA,MAAAC,KAAA,GAAAnB,OAAA,EAAA;AAAAzC,MAAAA,MAAA,CAAA4D,KAAA,EAAA,MAAarE,KAAK,CAACI,QAAQ,CAAA;AAAA,MAAA,OAAAiE,KAAA;AAAA,IAAA,CAAA,GAAA;AAC7B,EAAA;AAEA,EAAA,MAAM,CAACC,WAAW,CAAC,GAAGJ,WAAW;;AAEjC;EACA,MAAM,CAACK,WAAW,EAAEC,YAAY,CAAC,GAAGlH,YAAY,CAC9C0C,KAAK,CAACzC,OAAO,IAAI,EAAE,EACnB,IAAIyC,KAAK,CAACxC,OAAO,IAAI,EAAE,CACzB,CAAC;;AAED;EACA0B,YAAY,CACVL,EAAE,CACA,MAAMjB,MAAM,CAACoC,KAAK,CAACI,QAAQ,CAAC,EAC5B,MAAMS,cAAc,CAAC,MAAM2D,YAAY,CAAClG,MAAM,EAAE,CAAC,EACjD;AAAEwC,IAAAA,KAAK,EAAE;AAAK,GAChB,CACF,CAAC;;AAED;AACAnC,EAAAA,OAAO,CAAC,MAAM;AACZ;AACAkC,IAAAA,cAAc,CAAC,MAAM;MACnB,MAAM4D,kBAAkB,GAAGH,WAAW,EAAE,EAAE7G,MAAM,EAAE;AAClD,MAAA,MAAMiH,mBAAmB,GAAGF,YAAY,CAAC/G,MAAM,EAAE;MAEjD,IAAIgH,kBAAkB,IAAIC,mBAAmB,EAAE;AAC7C;AACA,QAAA,MAAMC,eAAe,GAAG3E,KAAK,CAAC4E,WAAW,IAAI,QAAQ;QACrD,MAAMC,qBAAqB,GAAGA,MAAM;UAClC,MAAMC,WAAW,GAAGR,WAAW,EAAE,EAAEzG,OAAO,EAAE;UAC5C,IAAIiH,WAAW,KAAK9C,SAAS,EAAE;AAC7B;AACA0C,YAAAA,mBAAmB,CAAClC,MAAM,CAACuC,OAAO,CAAEC,KAAK,IAAK;AAC5CA,cAAAA,KAAK,CAACvG,SAAS,CAACwG,MAAM,CAACN,eAAe,CAAC;AACzC,YAAA,CAAC,CAAC;AACF;AACA,YAAA,IAAID,mBAAmB,CAAClC,MAAM,CAACsC,WAAW,CAAC,EAAE;cAC3CJ,mBAAmB,CAAClC,MAAM,CAACsC,WAAW,CAAC,CAACrG,SAAS,CAACC,GAAG,CACnDiG,eACF,CAAC;AACH,YAAA;AACA;AACAH,YAAAA,YAAY,CAACrF,MAAM,CAAC2F,WAAW,CAAC;AAClC,UAAA;QACF,CAAC;;AAED;AACAL,QAAAA,kBAAkB,CAAC5F,EAAE,CAAC,cAAc,EAAEgG,qBAAqB,CAAC;;AAE5D;AACAA,QAAAA,qBAAqB,EAAE;;AAEvB;QACAH,mBAAmB,CAAClC,MAAM,CAACuC,OAAO,CAAC,CAACC,KAAK,EAAE3C,GAAG,KAAK;AACjD2C,UAAAA,KAAK,CAACE,gBAAgB,CAAC,OAAO,EAAE,MAAM;AACpCZ,YAAAA,WAAW,EAAE,EAAEnF,MAAM,CAACkD,GAAG,CAAC;AAC5B,UAAA,CAAC,CAAC;AACJ,QAAA,CAAC,CAAC;AACJ,MAAA;AACF,IAAA,CAAC,CAAC;AACJ,EAAA,CAAC,CAAC;AAKF,EAAA,OAAA,CAAA,MAAA;IAAA,MAAA8C,KAAA,GAAAjC,OAAA,EAAA;IAAAlC,GAAA,CAAgBuD,WAAW,EAAAY,KAAA,EAAA,MAAA,IAAA,CAAA;AAAA1E,IAAAA,MAAA,CAAA0E,KAAA,EAAA,MAAEnF,KAAK,CAACI,QAAQ,CAAA;AAAA,IAAA,OAAA+E,KAAA;AAAA,EAAA,CAAA,GAAA;AAC7C;AAAEC,cAAA,CAAA,CAAA,OAAA,CAAA,CAAA;;;;"}
|
|
1
|
+
{"version":3,"file":"index.module.js","sources":["../../src/primitive.tsx","../../src/components.tsx"],"sourcesContent":["import {\n on,\n onMount,\n createSignal,\n onCleanup,\n Accessor,\n createEffect,\n} from \"solid-js\";\nimport { access } from \"@solid-primitives/utils\";\nimport KeenSlider, {\n KeenSliderHooks,\n KeenSliderInstance,\n KeenSliderOptions,\n KeenSliderPlugin,\n TrackDetails,\n} from \"keen-slider\";\n\ndeclare module \"solid-js\" {\n namespace JSX {\n interface Directives {\n slider: {};\n thumbSlider: {};\n }\n }\n}\n\nexport type SliderControls<O, P, H extends string> = [\n create: (el: HTMLElement) => void,\n helpers: {\n current: Accessor<number>;\n next: VoidFunction;\n prev: VoidFunction;\n moveTo: (\n id: number,\n duration?: number,\n absolute?: boolean,\n easing?: (t: number) => number,\n ) => void;\n details: () => TrackDetails;\n slider: () => KeenSliderInstance<O, P, H> | undefined;\n destroy: VoidFunction;\n update: VoidFunction;\n },\n];\n\n/**\n * Creates a slider powered by KeenSlider.\n *\n * @param options - Values to initialize the slider with\n * @param plugins - Extensions that enhance KeenSlider options\n * @returns Returns mount and helper methods\n * @returns create - Mounts the slider on provided element\n * @returns helpers.current - Current slide number\n * @returns helpers.next - Function to trigger the next slide\n * @returns helpers.prev - Function to trigger the previous slide\n * @returns helpers.details - Provides details about the current slider\n * @returns helpers.slider - Returns the KeenSlider instance\n * @returns helpers.destroy - Manual destroy function\n *\n * @example\n * ```ts\n * const [create, { prev, next }] = createSlider();\n * <div use:slider>...</div>\n * ```\n */\nexport const createSlider = <\n O = {},\n P = {},\n H extends string = KeenSliderHooks,\n>(\n options?: KeenSliderOptions<O, P, H> | Accessor<KeenSliderOptions<O, P, H>>,\n ...plugins: KeenSliderPlugin<O, P, H>[]\n): SliderControls<O, P, H> => {\n let slider: KeenSliderInstance<O, P, H> | undefined;\n let el: HTMLElement;\n const opts = () => access(options);\n const [current, setCurrent] = createSignal((opts() as any)?.initial || 0);\n const destroy = () => slider && slider.destroy();\n const getOptions = (overrides = {}): KeenSliderOptions<O, P, H> => {\n const baseOpts = opts();\n return {\n selector: el.childNodes,\n ...(baseOpts || {}),\n ...overrides,\n } as KeenSliderOptions<O, P, H>;\n };\n const update = () => slider?.update(getOptions());\n // Slider creation method and directive function\n const create = (newEl: HTMLElement) => {\n el = newEl;\n el.classList.add(\"keen-slider\");\n onMount(() => {\n slider = new KeenSlider<O, P, H>(el, getOptions(), plugins);\n slider.on(\"slideChanged\", () => setCurrent(slider!.track.details.rel));\n });\n onCleanup(destroy);\n if (typeof options === \"function\") {\n createEffect(on(() => options, update));\n }\n };\n const moveTo = (\n id: number,\n duration = 250,\n absolute = false,\n easing?: (t: number) => number,\n ) => {\n slider?.moveToIdx(id, absolute, { duration, easing: easing });\n };\n return [\n create,\n {\n current,\n next: () => slider && slider.next(),\n prev: () => slider && slider.prev(),\n details: () => (slider ? slider.track.details : ({} as TrackDetails)),\n slider: () => slider,\n moveTo,\n destroy,\n update,\n },\n ];\n};\n","import {\n on,\n createContext,\n useContext,\n createSignal,\n FlowComponent,\n Component,\n createEffect,\n Show,\n JSX,\n createMemo,\n Index,\n onMount,\n} from \"solid-js\";\nimport { access } from \"@solid-primitives/utils\";\nimport { isServer } from \"solid-js/web\";\nimport { KeenSliderOptions, KeenSliderPlugin } from \"keen-slider\";\nimport { createSlider } from \"./primitive\";\n\n// The following is a hacky way of extracting SliderHelpers\ninterface Func<T> {\n ([...args]: any, args2?: any): T;\n}\nexport function returnType<T>(func: Func<T>) {\n return {} as T;\n}\nconst sliderValues = returnType(createSlider);\ntype SliderHelpers = (typeof sliderValues)[1];\n\n// Main context for the slider\nexport const SliderContext = createContext(\n createSignal<SliderHelpers | null>(null),\n);\n\n/**\n * A helpful and simple Provider to wrap your Slider if controls such as SliderButton are used.\n *\n * @param props.options - Accepts all KeenSlider options.\n * @param props.plugins - A list of Solid Slider or Keen slider plugins.\n */\nexport const SliderProvider: FlowComponent = (props) => (\n <SliderContext.Provider value={createSignal<SliderHelpers | null>(null)}>\n {props.children}\n </SliderContext.Provider>\n);\n\n/**\n * Main Slider component for specifying the Slider on the page.\n *\n * @param props.options - Accepts all KeenSlider options.\n * @param props.plugins - A list of Solid Slider or Keen slider plugins.\n */\nexport const Slider: FlowComponent<{\n options?: KeenSliderOptions;\n plugins?: KeenSliderPlugin[];\n}> = (props) => {\n if (isServer) return <div class=\"keen-slider\">{props.children}</div>;\n const [, setHelpers] = useContext(SliderContext);\n const [slider, helpers] = createSlider(\n props.options || {},\n ...(props.plugins || []),\n );\n setHelpers(helpers);\n createEffect(\n on(\n () => access(props.children),\n () => queueMicrotask(() => helpers.update()),\n { defer: true },\n ),\n );\n slider;\n return (\n <div use:slider class=\"keen-slider\">\n {props.children}\n </div>\n );\n};\n\n/**\n * Provides a helpful button with next/prev to pair with your slider.\n *\n * @param props.next - Specify if this should be a next button.\n * @param props.prev - Specify if this should be a prev button.\n * @param props.class - Class to override the button.\n * @param props.classList - List of classes to override the button.\n */\nexport const SliderButton: FlowComponent<{\n next?: boolean;\n prev?: boolean;\n disabled?: boolean;\n class?: string;\n classList?: { [k: string]: boolean | undefined };\n}> = (props) => {\n const context = useContext(SliderContext);\n const changeSlide = () => {\n if (context == null) return;\n const [helpers] = context;\n props.next ? helpers()?.next() : helpers()?.prev();\n };\n return (\n <button\n disabled={props.disabled || false}\n class={props.class}\n classList={props.classList}\n onClick={changeSlide}\n >\n {props.children}\n </button>\n );\n};\n\n/**\n * Navigation dots component for the slider.\n * Displays a dot for each slide and highlights the current slide.\n *\n * @param props.class - Class to override the dots container.\n * @param props.classList - List of classes to override the dots container.\n * @param props.dotClass - Class to override individual dots.\n * @param props.dotClassList - List of classes to override individual dots.\n *\n * @example\n * ```tsx\n * <SliderProvider>\n * <Slider>\n * <div class=\"keen-slider__slide\">Slide 1</div>\n * <div class=\"keen-slider__slide\">Slide 2</div>\n * </Slider>\n * <SliderDots />\n * </SliderProvider>\n * ```\n */\nexport const SliderDots: Component<{\n class?: string;\n classList?: { [k: string]: boolean | undefined };\n dotClass?: string;\n dotClassList?: { [k: string]: boolean | undefined };\n}> = (props) => {\n const context = useContext(SliderContext);\n const [slideCount, setSlideCount] = createSignal(0);\n\n const handleDotClick = (idx: number) => {\n if (context == null) return;\n const [helpers] = context;\n helpers()?.moveTo(idx);\n };\n\n // Update slide count when slider is created/updated\n createEffect(() => {\n if (!context) return;\n const [helpers] = context;\n const sliderInstance = helpers()?.slider();\n\n if (sliderInstance) {\n const updateCount = () => {\n const details = helpers()?.details();\n setSlideCount(details?.slides?.length || 0);\n };\n\n // Set initial count\n updateCount();\n\n // Listen for slider changes\n sliderInstance.on(\"created\", updateCount);\n sliderInstance.on(\"updated\", updateCount);\n }\n });\n\n const slides = createMemo(() =>\n Array.from({ length: slideCount() }, (_, i) => i),\n );\n\n return (\n <Show when={context != null}>\n <div\n class={props.class || \"keen-slider-dots\"}\n classList={props.classList}\n >\n <Index each={slides()}>\n {(idx) => {\n const [helpers] = context!;\n const isActive = () => helpers()?.current() === idx();\n return (\n <button\n class={props.dotClass || \"keen-slider-dot\"}\n classList={{\n ...props.dotClassList,\n active: isActive(),\n }}\n onClick={() => handleDotClick(idx())}\n aria-label={`Go to slide ${idx() + 1}`}\n />\n );\n }}\n </Index>\n </div>\n </Show>\n );\n};\n\n/**\n * Thumbnail navigation component for the slider.\n * A second Slider that synchronizes with the main slider.\n * User provides thumbnail slides as children.\n *\n * @param props.options - Options for the thumbnail slider.\n * @param props.plugins - Plugins for the thumbnail slider.\n *\n * @example\n * ```tsx\n * <SliderProvider>\n * <Slider options={{ loop: true }}>\n * <div class=\"keen-slider__slide\">\n * <img src=\"slide1.jpg\" alt=\"Slide 1\" />\n * </div>\n * <div class=\"keen-slider__slide\">\n * <img src=\"slide2.jpg\" alt=\"Slide 2\" />\n * </div>\n * </Slider>\n * <SliderThumbnails options={{ slides: { perView: 4, spacing: 10 } }}>\n * <div class=\"keen-slider__slide\">\n * <img src=\"thumb1.jpg\" alt=\"Thumbnail 1\" />\n * </div>\n * <div class=\"keen-slider__slide\">\n * <img src=\"thumb2.jpg\" alt=\"Thumbnail 2\" />\n * </div>\n * </SliderThumbnails>\n * </SliderProvider>\n * ```\n */\nexport const SliderThumbnails: FlowComponent<{\n options?: KeenSliderOptions;\n plugins?: KeenSliderPlugin[];\n activeClass?: string;\n}> = (props) => {\n if (isServer) return <div>{props.children}</div>;\n\n const mainContext = useContext(SliderContext);\n\n if (!mainContext) {\n console.warn(\"SliderThumbnails must be used within a SliderProvider\");\n return <div>{props.children}</div>;\n }\n\n const [mainHelpers] = mainContext;\n\n // Create thumbnail slider with user options\n const [thumbSlider, thumbHelpers] = createSlider(\n props.options || {},\n ...(props.plugins || []),\n );\n\n // Update on children change (same as main Slider)\n createEffect(\n on(\n () => access(props.children),\n () => queueMicrotask(() => thumbHelpers.update()),\n { defer: true },\n ),\n );\n\n // Sync thumbnail slider with main slider\n onMount(() => {\n // Wait for next tick to ensure both sliders are mounted\n queueMicrotask(() => {\n const mainSliderInstance = mainHelpers()?.slider();\n const thumbSliderInstance = thumbHelpers.slider();\n\n if (mainSliderInstance && thumbSliderInstance) {\n // Function to update active thumbnail\n const activeClassName = props.activeClass || \"active\";\n const updateActiveThumbnail = () => {\n const mainCurrent = mainHelpers()?.current();\n if (mainCurrent !== undefined) {\n // Remove active class from all thumbnails\n thumbSliderInstance.slides.forEach((slide) => {\n slide.classList.remove(activeClassName);\n });\n // Add active class to current thumbnail\n if (thumbSliderInstance.slides[mainCurrent]) {\n thumbSliderInstance.slides[mainCurrent].classList.add(\n activeClassName,\n );\n }\n // Move thumbnail slider to show active thumbnail\n thumbHelpers.moveTo(mainCurrent);\n }\n };\n\n // Listen to main slider changes\n mainSliderInstance.on(\"slideChanged\", updateActiveThumbnail);\n\n // Set initial active state\n updateActiveThumbnail();\n\n // Add click handlers to thumbnails\n thumbSliderInstance.slides.forEach((slide, idx) => {\n slide.addEventListener(\"click\", () => {\n mainHelpers()?.moveTo(idx);\n });\n });\n }\n });\n });\n\n // Prevent tree-shaking\n thumbSlider;\n\n return <div use:thumbSlider>{props.children}</div>;\n};\n"],"names":["createSlider","options","plugins","slider","el","opts","access","current","setCurrent","createSignal","initial","destroy","getOptions","overrides","baseOpts","selector","childNodes","update","create","newEl","classList","add","onMount","KeenSlider","on","track","details","rel","onCleanup","createEffect","moveTo","id","duration","absolute","easing","moveToIdx","next","prev","returnType","func","SliderContext","createContext","SliderProvider","props","_$createComponent","Provider","value","children","Slider","isServer","_el$","_tmpl$","_$insert","setHelpers","useContext","helpers","queueMicrotask","defer","_el$2","_$use","SliderButton","context","changeSlide","_el$3","_tmpl$2","$$click","_$effect","_p$","_v$","disabled","_v$2","class","_v$3","_$className","_$classList","undefined","SliderDots","slideCount","setSlideCount","handleDotClick","idx","sliderInstance","updateCount","slides","length","createMemo","Array","from","_","i","Show","when","_el$4","_tmpl$3","Index","each","isActive","_el$5","_v$6","dotClass","_v$7","dotClassList","active","_v$8","_$setAttribute","_v$4","_v$5","SliderThumbnails","_el$6","mainContext","console","warn","_el$7","mainHelpers","thumbSlider","thumbHelpers","mainSliderInstance","thumbSliderInstance","activeClassName","activeClass","updateActiveThumbnail","mainCurrent","forEach","slide","remove","addEventListener","_el$8","_$delegateEvents"],"mappings":"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"}
|
|
@@ -4,6 +4,7 @@ declare module "solid-js" {
|
|
|
4
4
|
namespace JSX {
|
|
5
5
|
interface Directives {
|
|
6
6
|
slider: {};
|
|
7
|
+
thumbSlider: {};
|
|
7
8
|
}
|
|
8
9
|
}
|
|
9
10
|
}
|
|
@@ -23,17 +24,16 @@ export type SliderControls<O, P, H extends string> = [
|
|
|
23
24
|
/**
|
|
24
25
|
* Creates a slider powered by KeenSlider.
|
|
25
26
|
*
|
|
26
|
-
* @param
|
|
27
|
-
* @param
|
|
28
|
-
* @returns
|
|
29
|
-
* @returns
|
|
30
|
-
* @returns
|
|
31
|
-
* @returns
|
|
32
|
-
* @returns
|
|
33
|
-
* @returns
|
|
34
|
-
* @returns
|
|
35
|
-
* @returns
|
|
36
|
-
* @returns {Function} helpers.destroy Manual destroy function
|
|
27
|
+
* @param options - Values to initialize the slider with
|
|
28
|
+
* @param plugins - Extensions that enhance KeenSlider options
|
|
29
|
+
* @returns Returns mount and helper methods
|
|
30
|
+
* @returns create - Mounts the slider on provided element
|
|
31
|
+
* @returns helpers.current - Current slide number
|
|
32
|
+
* @returns helpers.next - Function to trigger the next slide
|
|
33
|
+
* @returns helpers.prev - Function to trigger the previous slide
|
|
34
|
+
* @returns helpers.details - Provides details about the current slider
|
|
35
|
+
* @returns helpers.slider - Returns the KeenSlider instance
|
|
36
|
+
* @returns helpers.destroy - Manual destroy function
|
|
37
37
|
*
|
|
38
38
|
* @example
|
|
39
39
|
* ```ts
|
package/dist/index/primitive.jsx
CHANGED
|
@@ -4,17 +4,16 @@ import KeenSlider from "keen-slider";
|
|
|
4
4
|
/**
|
|
5
5
|
* Creates a slider powered by KeenSlider.
|
|
6
6
|
*
|
|
7
|
-
* @param
|
|
8
|
-
* @param
|
|
9
|
-
* @returns
|
|
10
|
-
* @returns
|
|
11
|
-
* @returns
|
|
12
|
-
* @returns
|
|
13
|
-
* @returns
|
|
14
|
-
* @returns
|
|
15
|
-
* @returns
|
|
16
|
-
* @returns
|
|
17
|
-
* @returns {Function} helpers.destroy Manual destroy function
|
|
7
|
+
* @param options - Values to initialize the slider with
|
|
8
|
+
* @param plugins - Extensions that enhance KeenSlider options
|
|
9
|
+
* @returns Returns mount and helper methods
|
|
10
|
+
* @returns create - Mounts the slider on provided element
|
|
11
|
+
* @returns helpers.current - Current slide number
|
|
12
|
+
* @returns helpers.next - Function to trigger the next slide
|
|
13
|
+
* @returns helpers.prev - Function to trigger the previous slide
|
|
14
|
+
* @returns helpers.details - Provides details about the current slider
|
|
15
|
+
* @returns helpers.slider - Returns the KeenSlider instance
|
|
16
|
+
* @returns helpers.destroy - Manual destroy function
|
|
18
17
|
*
|
|
19
18
|
* @example
|
|
20
19
|
* ```ts
|
|
@@ -28,11 +27,14 @@ export const createSlider = (options, ...plugins) => {
|
|
|
28
27
|
const opts = () => access(options);
|
|
29
28
|
const [current, setCurrent] = createSignal(opts()?.initial || 0);
|
|
30
29
|
const destroy = () => slider && slider.destroy();
|
|
31
|
-
const getOptions = (overrides = {}) =>
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
30
|
+
const getOptions = (overrides = {}) => {
|
|
31
|
+
const baseOpts = opts();
|
|
32
|
+
return {
|
|
33
|
+
selector: el.childNodes,
|
|
34
|
+
...(baseOpts || {}),
|
|
35
|
+
...overrides,
|
|
36
|
+
};
|
|
37
|
+
};
|
|
36
38
|
const update = () => slider?.update(getOptions());
|
|
37
39
|
// Slider creation method and directive function
|
|
38
40
|
const create = (newEl) => {
|