solid-slider 1.3.12 → 1.3.13
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 +41 -1
- package/dist/adaptiveHeight/adaptiveHeight.d.ts +2 -3
- package/dist/adaptiveHeight/adaptiveHeight.jsx +4 -6
- package/dist/adaptiveHeight/index.common.js +6 -4
- package/dist/adaptiveHeight/index.common.js.map +1 -1
- package/dist/adaptiveHeight/index.module.js +4 -4
- package/dist/adaptiveHeight/index.module.js.map +1 -1
- package/dist/adaptiveWidth/adaptiveWidth.d.ts +10 -0
- package/dist/adaptiveWidth/adaptiveWidth.jsx +17 -0
- package/dist/adaptiveWidth/index.common.js +24 -0
- package/dist/adaptiveWidth/index.common.js.map +1 -0
- package/dist/adaptiveWidth/index.module.js +20 -0
- package/dist/adaptiveWidth/index.module.js.map +1 -0
- package/dist/adaptiveWidth/style.css +3 -0
- package/dist/autoplay/autoplay.d.ts +3 -4
- package/dist/autoplay/autoplay.jsx +5 -6
- package/dist/autoplay/index.common.js +5 -3
- package/dist/autoplay/index.common.js.map +1 -1
- package/dist/autoplay/index.module.js +3 -3
- package/dist/autoplay/index.module.js.map +1 -1
- package/dist/index/components.d.ts +2 -2
- package/dist/index/components.jsx +5 -7
- package/dist/index/index.common.js +3 -3
- package/dist/index/index.common.js.map +1 -1
- package/dist/index/index.d.ts +2 -2
- package/dist/index/index.jsx +2 -2
- package/dist/index/index.module.js +3 -3
- package/dist/index/index.module.js.map +1 -1
- package/dist/index/primitive.d.ts +3 -3
- package/dist/index/primitive.js +9 -9
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -92,6 +92,44 @@ const MyComponent = () => {
|
|
|
92
92
|
};
|
|
93
93
|
```
|
|
94
94
|
|
|
95
|
+
### Adaptive Height Plugin
|
|
96
|
+
|
|
97
|
+
You may include the adaptive height plugin by providing it as a prop:
|
|
98
|
+
|
|
99
|
+
```tsx
|
|
100
|
+
import createSlider from “solid-slider”;
|
|
101
|
+
import autoplay from “solid-slider/plugins/adaptiveHeight”;
|
|
102
|
+
|
|
103
|
+
const MyComponent = () => {
|
|
104
|
+
return (
|
|
105
|
+
<Slider options={{ loop: true }} plugins={[adaptiveHeight]}>
|
|
106
|
+
<div class=“slide1”>1</div>
|
|
107
|
+
<div class=“slide2”>2</div>
|
|
108
|
+
<div class=“slide3”>3</div>
|
|
109
|
+
</Slider>
|
|
110
|
+
);
|
|
111
|
+
};
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
### Adaptive Width Plugin
|
|
115
|
+
|
|
116
|
+
You may include the adaptive width plugin by providing it as a prop:
|
|
117
|
+
|
|
118
|
+
```tsx
|
|
119
|
+
import createSlider from “solid-slider”;
|
|
120
|
+
import autoplay from “solid-slider/plugins/adaptiveWidth”;
|
|
121
|
+
|
|
122
|
+
const MyComponent = () => {
|
|
123
|
+
return (
|
|
124
|
+
<Slider options={{ loop: true }} plugins={[adaptiveWidth]}>
|
|
125
|
+
<div class=“slide1”>1</div>
|
|
126
|
+
<div class=“slide2”>2</div>
|
|
127
|
+
<div class=“slide3”>3</div>
|
|
128
|
+
</Slider>
|
|
129
|
+
);
|
|
130
|
+
};
|
|
131
|
+
```
|
|
132
|
+
|
|
95
133
|
## Use as Primitive
|
|
96
134
|
|
|
97
135
|
The following is an example of how to create and then bind options using a directive.
|
|
@@ -156,7 +194,8 @@ Thie library exports it's own CSS which is the basic Keen-Slider implementation
|
|
|
156
194
|
|
|
157
195
|
## Roadmap
|
|
158
196
|
|
|
159
|
-
- [
|
|
197
|
+
- [x] Create [adaptiveHeight](https://codesandbox.io/s/github/rcbyr/keen-slider-sandboxes/tree/v6/misc/adaptive-height/react?file=/src/App.js:191-403) plugin
|
|
198
|
+
- [x] Create [adaptiveWidth](https://github.com/joeygrable94/solid-slider) plugin
|
|
160
199
|
- [ ] Add Dots components (to display a row of dots below the slider)
|
|
161
200
|
- [ ] Add slider thumbnail navigation
|
|
162
201
|
- [ ] Add slider loader
|
|
@@ -179,6 +218,7 @@ Thie library exports it's own CSS which is the basic Keen-Slider implementation
|
|
|
179
218
|
- 1.3.9 - Fixed Keen URLs, type issues and truthy error with autoplay (thanks [ishanAhuja](https://www.github.com/ishanAhuja) and [ahhshm](https://www.github.com/ahhshm))
|
|
180
219
|
- 1.3.11 - Upgraded importance dependencies including Solid 1.6
|
|
181
220
|
- 1.3.12 - Patched slider to reactively update on updating children
|
|
221
|
+
- 1.3.13 - Incorporated adaptiveHeight plugin (thanks [joeygrable94](https://www.github.com/joeygrable94))
|
|
182
222
|
|
|
183
223
|
## Keen Options API
|
|
184
224
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { KeenSliderInstance } from
|
|
1
|
+
import { KeenSliderInstance } from 'keen-slider';
|
|
2
2
|
/**
|
|
3
3
|
* Adaptive height is a plugin that adjusts the height of the slider to the content on change.
|
|
4
4
|
*
|
|
@@ -7,5 +7,4 @@ import { KeenSliderInstance } from "keen-slider";
|
|
|
7
7
|
* const [create] = createSlider({}, [adaptiveHeight]);
|
|
8
8
|
* ```
|
|
9
9
|
*/
|
|
10
|
-
declare const adaptiveHeight: () => (slider: KeenSliderInstance) => void;
|
|
11
|
-
export default adaptiveHeight;
|
|
10
|
+
export declare const adaptiveHeight: () => (slider: KeenSliderInstance) => void;
|
|
@@ -6,14 +6,12 @@
|
|
|
6
6
|
* const [create] = createSlider({}, [adaptiveHeight]);
|
|
7
7
|
* ```
|
|
8
8
|
*/
|
|
9
|
-
const adaptiveHeight = () => {
|
|
9
|
+
export const adaptiveHeight = () => {
|
|
10
10
|
return (slider) => {
|
|
11
11
|
function updateHeight() {
|
|
12
|
-
slider.container.style.height =
|
|
13
|
-
slider.slides[slider.track.details.rel].offsetHeight + "px";
|
|
12
|
+
slider.container.style.height = slider.slides[slider.track.details.rel].offsetHeight + 'px';
|
|
14
13
|
}
|
|
15
|
-
slider.on(
|
|
16
|
-
slider.on(
|
|
14
|
+
slider.on('created', updateHeight);
|
|
15
|
+
slider.on('slideChanged', updateHeight);
|
|
17
16
|
};
|
|
18
17
|
};
|
|
19
|
-
export default adaptiveHeight;
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
3
5
|
/**
|
|
4
6
|
* Adaptive height is a plugin that adjusts the height of the slider to the content on change.
|
|
5
7
|
*
|
|
@@ -11,12 +13,12 @@
|
|
|
11
13
|
const adaptiveHeight = () => {
|
|
12
14
|
return slider => {
|
|
13
15
|
function updateHeight() {
|
|
14
|
-
slider.container.style.height = slider.slides[slider.track.details.rel].offsetHeight +
|
|
16
|
+
slider.container.style.height = slider.slides[slider.track.details.rel].offsetHeight + 'px';
|
|
15
17
|
}
|
|
16
|
-
slider.on(
|
|
17
|
-
slider.on(
|
|
18
|
+
slider.on('created', updateHeight);
|
|
19
|
+
slider.on('slideChanged', updateHeight);
|
|
18
20
|
};
|
|
19
21
|
};
|
|
20
22
|
|
|
21
|
-
|
|
23
|
+
exports.adaptiveHeight = adaptiveHeight;
|
|
22
24
|
//# sourceMappingURL=index.common.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.common.js","sources":["../../src/plugins/adaptiveHeight.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"index.common.js","sources":["../../src/plugins/adaptiveHeight.tsx"],"sourcesContent":["import { KeenSliderInstance } from 'keen-slider';\n\n/**\n * Adaptive height is a plugin that adjusts the height of the slider to the content on change.\n *\n * @example\n * ```ts\n * const [create] = createSlider({}, [adaptiveHeight]);\n * ```\n */\nexport const adaptiveHeight = () => {\n return (slider: KeenSliderInstance) => {\n function updateHeight() {\n slider.container.style.height = slider.slides[slider.track.details.rel].offsetHeight + 'px';\n }\n slider.on('created', updateHeight);\n slider.on('slideChanged', updateHeight);\n };\n};\n"],"names":["adaptiveHeight","slider","updateHeight","container","style","height","slides","track","details","rel","offsetHeight","on"],"mappings":";;;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,cAAc,GAAG,MAAM;AAClC,EAAA,OAAQC,MAA0B,IAAK;AACrC,IAAA,SAASC,YAAY,GAAG;MACtBD,MAAM,CAACE,SAAS,CAACC,KAAK,CAACC,MAAM,GAAGJ,MAAM,CAACK,MAAM,CAACL,MAAM,CAACM,KAAK,CAACC,OAAO,CAACC,GAAG,CAAC,CAACC,YAAY,GAAG,IAAI,CAAA;AAC7F,KAAA;AACAT,IAAAA,MAAM,CAACU,EAAE,CAAC,SAAS,EAAET,YAAY,CAAC,CAAA;AAClCD,IAAAA,MAAM,CAACU,EAAE,CAAC,cAAc,EAAET,YAAY,CAAC,CAAA;GACxC,CAAA;AACH;;;;"}
|
|
@@ -9,12 +9,12 @@
|
|
|
9
9
|
const adaptiveHeight = () => {
|
|
10
10
|
return slider => {
|
|
11
11
|
function updateHeight() {
|
|
12
|
-
slider.container.style.height = slider.slides[slider.track.details.rel].offsetHeight +
|
|
12
|
+
slider.container.style.height = slider.slides[slider.track.details.rel].offsetHeight + 'px';
|
|
13
13
|
}
|
|
14
|
-
slider.on(
|
|
15
|
-
slider.on(
|
|
14
|
+
slider.on('created', updateHeight);
|
|
15
|
+
slider.on('slideChanged', updateHeight);
|
|
16
16
|
};
|
|
17
17
|
};
|
|
18
18
|
|
|
19
|
-
export { adaptiveHeight
|
|
19
|
+
export { adaptiveHeight };
|
|
20
20
|
//# sourceMappingURL=index.module.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.module.js","sources":["../../src/plugins/adaptiveHeight.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"index.module.js","sources":["../../src/plugins/adaptiveHeight.tsx"],"sourcesContent":["import { KeenSliderInstance } from 'keen-slider';\n\n/**\n * Adaptive height is a plugin that adjusts the height of the slider to the content on change.\n *\n * @example\n * ```ts\n * const [create] = createSlider({}, [adaptiveHeight]);\n * ```\n */\nexport const adaptiveHeight = () => {\n return (slider: KeenSliderInstance) => {\n function updateHeight() {\n slider.container.style.height = slider.slides[slider.track.details.rel].offsetHeight + 'px';\n }\n slider.on('created', updateHeight);\n slider.on('slideChanged', updateHeight);\n };\n};\n"],"names":["adaptiveHeight","slider","updateHeight","container","style","height","slides","track","details","rel","offsetHeight","on"],"mappings":"AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,cAAc,GAAG,MAAM;AAClC,EAAA,OAAQC,MAA0B,IAAK;AACrC,IAAA,SAASC,YAAY,GAAG;MACtBD,MAAM,CAACE,SAAS,CAACC,KAAK,CAACC,MAAM,GAAGJ,MAAM,CAACK,MAAM,CAACL,MAAM,CAACM,KAAK,CAACC,OAAO,CAACC,GAAG,CAAC,CAACC,YAAY,GAAG,IAAI,CAAA;AAC7F,KAAA;AACAT,IAAAA,MAAM,CAACU,EAAE,CAAC,SAAS,EAAET,YAAY,CAAC,CAAA;AAClCD,IAAAA,MAAM,CAACU,EAAE,CAAC,cAAc,EAAET,YAAY,CAAC,CAAA;GACxC,CAAA;AACH;;;;"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { KeenSliderInstance } from 'keen-slider';
|
|
2
|
+
/**
|
|
3
|
+
* Adaptive width is a plugin that adjusts the width of the slider to the content on change.
|
|
4
|
+
*
|
|
5
|
+
* @example
|
|
6
|
+
* ```ts
|
|
7
|
+
* const [create] = createSlider({}, [adaptiveWidth]);
|
|
8
|
+
* ```
|
|
9
|
+
*/
|
|
10
|
+
export declare const adaptiveWidth: () => (slider: KeenSliderInstance) => void;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Adaptive width is a plugin that adjusts the width of the slider to the content on change.
|
|
3
|
+
*
|
|
4
|
+
* @example
|
|
5
|
+
* ```ts
|
|
6
|
+
* const [create] = createSlider({}, [adaptiveWidth]);
|
|
7
|
+
* ```
|
|
8
|
+
*/
|
|
9
|
+
export const adaptiveWidth = () => {
|
|
10
|
+
return (slider) => {
|
|
11
|
+
function updateWidth() {
|
|
12
|
+
slider.container.style.width = slider.slides[slider.track.details.rel].offsetWidth + 'px';
|
|
13
|
+
}
|
|
14
|
+
slider.on('created', updateWidth);
|
|
15
|
+
slider.on('slideChanged', updateWidth);
|
|
16
|
+
};
|
|
17
|
+
};
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Adaptive width is a plugin that adjusts the width of the slider to the content on change.
|
|
7
|
+
*
|
|
8
|
+
* @example
|
|
9
|
+
* ```ts
|
|
10
|
+
* const [create] = createSlider({}, [adaptiveWidth]);
|
|
11
|
+
* ```
|
|
12
|
+
*/
|
|
13
|
+
const adaptiveWidth = () => {
|
|
14
|
+
return slider => {
|
|
15
|
+
function updateWidth() {
|
|
16
|
+
slider.container.style.width = slider.slides[slider.track.details.rel].offsetWidth + 'px';
|
|
17
|
+
}
|
|
18
|
+
slider.on('created', updateWidth);
|
|
19
|
+
slider.on('slideChanged', updateWidth);
|
|
20
|
+
};
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
exports.adaptiveWidth = adaptiveWidth;
|
|
24
|
+
//# sourceMappingURL=index.common.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.common.js","sources":["../../src/plugins/adaptiveWidth.tsx"],"sourcesContent":["import { KeenSliderInstance } from 'keen-slider';\n\n/**\n * Adaptive width is a plugin that adjusts the width of the slider to the content on change.\n *\n * @example\n * ```ts\n * const [create] = createSlider({}, [adaptiveWidth]);\n * ```\n */\nexport const adaptiveWidth = () => {\n return (slider: KeenSliderInstance) => {\n function updateWidth() {\n slider.container.style.width = slider.slides[slider.track.details.rel].offsetWidth + 'px';\n }\n slider.on('created', updateWidth);\n slider.on('slideChanged', updateWidth);\n };\n};\n"],"names":["adaptiveWidth","slider","updateWidth","container","style","width","slides","track","details","rel","offsetWidth","on"],"mappings":";;;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,aAAa,GAAG,MAAM;AACjC,EAAA,OAAQC,MAA0B,IAAK;AACrC,IAAA,SAASC,WAAW,GAAG;MACrBD,MAAM,CAACE,SAAS,CAACC,KAAK,CAACC,KAAK,GAAGJ,MAAM,CAACK,MAAM,CAACL,MAAM,CAACM,KAAK,CAACC,OAAO,CAACC,GAAG,CAAC,CAACC,WAAW,GAAG,IAAI,CAAA;AAC3F,KAAA;AACAT,IAAAA,MAAM,CAACU,EAAE,CAAC,SAAS,EAAET,WAAW,CAAC,CAAA;AACjCD,IAAAA,MAAM,CAACU,EAAE,CAAC,cAAc,EAAET,WAAW,CAAC,CAAA;GACvC,CAAA;AACH;;;;"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Adaptive width is a plugin that adjusts the width of the slider to the content on change.
|
|
3
|
+
*
|
|
4
|
+
* @example
|
|
5
|
+
* ```ts
|
|
6
|
+
* const [create] = createSlider({}, [adaptiveWidth]);
|
|
7
|
+
* ```
|
|
8
|
+
*/
|
|
9
|
+
const adaptiveWidth = () => {
|
|
10
|
+
return slider => {
|
|
11
|
+
function updateWidth() {
|
|
12
|
+
slider.container.style.width = slider.slides[slider.track.details.rel].offsetWidth + 'px';
|
|
13
|
+
}
|
|
14
|
+
slider.on('created', updateWidth);
|
|
15
|
+
slider.on('slideChanged', updateWidth);
|
|
16
|
+
};
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
export { adaptiveWidth };
|
|
20
|
+
//# sourceMappingURL=index.module.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.module.js","sources":["../../src/plugins/adaptiveWidth.tsx"],"sourcesContent":["import { KeenSliderInstance } from 'keen-slider';\n\n/**\n * Adaptive width is a plugin that adjusts the width of the slider to the content on change.\n *\n * @example\n * ```ts\n * const [create] = createSlider({}, [adaptiveWidth]);\n * ```\n */\nexport const adaptiveWidth = () => {\n return (slider: KeenSliderInstance) => {\n function updateWidth() {\n slider.container.style.width = slider.slides[slider.track.details.rel].offsetWidth + 'px';\n }\n slider.on('created', updateWidth);\n slider.on('slideChanged', updateWidth);\n };\n};\n"],"names":["adaptiveWidth","slider","updateWidth","container","style","width","slides","track","details","rel","offsetWidth","on"],"mappings":"AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,aAAa,GAAG,MAAM;AACjC,EAAA,OAAQC,MAA0B,IAAK;AACrC,IAAA,SAASC,WAAW,GAAG;MACrBD,MAAM,CAACE,SAAS,CAACC,KAAK,CAACC,KAAK,GAAGJ,MAAM,CAACK,MAAM,CAACL,MAAM,CAACM,KAAK,CAACC,OAAO,CAACC,GAAG,CAAC,CAACC,WAAW,GAAG,IAAI,CAAA;AAC3F,KAAA;AACAT,IAAAA,MAAM,CAACU,EAAE,CAAC,SAAS,EAAET,WAAW,CAAC,CAAA;AACjCD,IAAAA,MAAM,CAACU,EAAE,CAAC,cAAc,EAAET,WAAW,CAAC,CAAA;GACvC,CAAA;AACH;;;;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { KeenSliderInstance } from 'keen-slider';
|
|
2
|
+
import { Accessor } from 'solid-js';
|
|
3
3
|
/**
|
|
4
4
|
* Provides an autoplay plugin.
|
|
5
5
|
*
|
|
@@ -16,7 +16,7 @@ import { KeenSliderInstance } from "keen-slider";
|
|
|
16
16
|
* const [create] = createSlider({}, [autoplay]);
|
|
17
17
|
* ```
|
|
18
18
|
*/
|
|
19
|
-
declare const autoplay: (interval: number, options: {
|
|
19
|
+
export declare const autoplay: (interval: number, options: {
|
|
20
20
|
pause?: Accessor<boolean>;
|
|
21
21
|
pauseOnDrag?: boolean;
|
|
22
22
|
animation?: {
|
|
@@ -24,4 +24,3 @@ declare const autoplay: (interval: number, options: {
|
|
|
24
24
|
easing?: (t: number) => number;
|
|
25
25
|
};
|
|
26
26
|
}) => (slider: KeenSliderInstance) => void;
|
|
27
|
-
export default autoplay;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { makeTimer } from '@solid-primitives/timer';
|
|
2
|
+
import { createEffect } from 'solid-js';
|
|
3
3
|
/**
|
|
4
4
|
* Provides an autoplay plugin.
|
|
5
5
|
*
|
|
@@ -16,7 +16,7 @@ import { makeTimer } from "@solid-primitives/timer";
|
|
|
16
16
|
* const [create] = createSlider({}, [autoplay]);
|
|
17
17
|
* ```
|
|
18
18
|
*/
|
|
19
|
-
const autoplay = (interval = 1000, options) => {
|
|
19
|
+
export const autoplay = (interval = 1000, options) => {
|
|
20
20
|
return (slider) => {
|
|
21
21
|
let dispose;
|
|
22
22
|
const start = () => {
|
|
@@ -24,9 +24,8 @@ const autoplay = (interval = 1000, options) => {
|
|
|
24
24
|
};
|
|
25
25
|
// Pause the slider on drag
|
|
26
26
|
if (options.pauseOnDrag !== false) {
|
|
27
|
-
slider.on(
|
|
27
|
+
slider.on('dragStarted', () => dispose?.());
|
|
28
28
|
}
|
|
29
|
-
createEffect(() => !options.pause || options.pause() === false ? start() : dispose?.());
|
|
29
|
+
createEffect(() => (!options.pause || options.pause() === false ? start() : dispose?.()));
|
|
30
30
|
};
|
|
31
31
|
};
|
|
32
|
-
export default autoplay;
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
4
5
|
var timer = require('@solid-primitives/timer');
|
|
6
|
+
var solidJs = require('solid-js');
|
|
5
7
|
|
|
6
8
|
/**
|
|
7
9
|
* Provides an autoplay plugin.
|
|
@@ -27,11 +29,11 @@ const autoplay = (interval = 1000, options) => {
|
|
|
27
29
|
};
|
|
28
30
|
// Pause the slider on drag
|
|
29
31
|
if (options.pauseOnDrag !== false) {
|
|
30
|
-
slider.on(
|
|
32
|
+
slider.on('dragStarted', () => dispose?.());
|
|
31
33
|
}
|
|
32
34
|
solidJs.createEffect(() => !options.pause || options.pause() === false ? start() : dispose?.());
|
|
33
35
|
};
|
|
34
36
|
};
|
|
35
37
|
|
|
36
|
-
|
|
38
|
+
exports.autoplay = autoplay;
|
|
37
39
|
//# sourceMappingURL=index.common.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.common.js","sources":["../../src/plugins/autoplay.tsx"],"sourcesContent":["import {
|
|
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 {number} interval Interval in milliseconds for switching slides\n * @param {object} options Options to customize the autoplay\n * @param {Function} options.pause A pause signal to control the autoplay\n * @param {boolean} options.pauseOnDrag Denotes of the autoplay should pause on drag.\n * @param {object} options.animation Allows for control of duration and easing.\n * @param {number} options.duration Duration for transitioning the slide.\n * @param {number} 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 () => slider.moveToIdx(slider.track.details.position + 1, true, options.animation),\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(() => (!options.pause || options.pause() === false ? start() : dispose?.()));\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,GAAG,CACtBC,QAAgB,GAAG,IAAI,EACvBC,OAOC,KACE;AACH,EAAA,OAAQC,MAA0B,IAAK;AACrC,IAAA,IAAIC,OAAiB,CAAA;IACrB,MAAMC,KAAK,GAAG,MAAM;AAClBD,MAAAA,OAAO,GAAGE,eAAS,CACjB,MAAMH,MAAM,CAACI,SAAS,CAACJ,MAAM,CAACK,KAAK,CAACC,OAAO,CAACC,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAER,OAAO,CAACS,SAAS,CAAC,EAClFV,QAAQ,EACRW,WAAW,CACZ,CAAA;KACF,CAAA;AACD;AACA,IAAA,IAAIV,OAAO,CAACW,WAAW,KAAK,KAAK,EAAE;MACjCV,MAAM,CAACW,EAAE,CAAC,aAAa,EAAE,MAAMV,OAAO,IAAI,CAAC,CAAA;AAC7C,KAAA;AACAW,IAAAA,oBAAY,CAAC,MAAO,CAACb,OAAO,CAACc,KAAK,IAAId,OAAO,CAACc,KAAK,EAAE,KAAK,KAAK,GAAGX,KAAK,EAAE,GAAGD,OAAO,IAAK,CAAC,CAAA;GAC1F,CAAA;AACH;;;;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { createEffect } from 'solid-js';
|
|
2
1
|
import { makeTimer } from '@solid-primitives/timer';
|
|
2
|
+
import { createEffect } from 'solid-js';
|
|
3
3
|
|
|
4
4
|
/**
|
|
5
5
|
* Provides an autoplay plugin.
|
|
@@ -25,11 +25,11 @@ const autoplay = (interval = 1000, options) => {
|
|
|
25
25
|
};
|
|
26
26
|
// Pause the slider on drag
|
|
27
27
|
if (options.pauseOnDrag !== false) {
|
|
28
|
-
slider.on(
|
|
28
|
+
slider.on('dragStarted', () => dispose?.());
|
|
29
29
|
}
|
|
30
30
|
createEffect(() => !options.pause || options.pause() === false ? start() : dispose?.());
|
|
31
31
|
};
|
|
32
32
|
};
|
|
33
33
|
|
|
34
|
-
export { autoplay
|
|
34
|
+
export { autoplay };
|
|
35
35
|
//# sourceMappingURL=index.module.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.module.js","sources":["../../src/plugins/autoplay.tsx"],"sourcesContent":["import {
|
|
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 {number} interval Interval in milliseconds for switching slides\n * @param {object} options Options to customize the autoplay\n * @param {Function} options.pause A pause signal to control the autoplay\n * @param {boolean} options.pauseOnDrag Denotes of the autoplay should pause on drag.\n * @param {object} options.animation Allows for control of duration and easing.\n * @param {number} options.duration Duration for transitioning the slide.\n * @param {number} 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 () => slider.moveToIdx(slider.track.details.position + 1, true, options.animation),\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(() => (!options.pause || options.pause() === false ? start() : dispose?.()));\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,GAAG,CACtBC,QAAgB,GAAG,IAAI,EACvBC,OAOC,KACE;AACH,EAAA,OAAQC,MAA0B,IAAK;AACrC,IAAA,IAAIC,OAAiB,CAAA;IACrB,MAAMC,KAAK,GAAG,MAAM;AAClBD,MAAAA,OAAO,GAAGE,SAAS,CACjB,MAAMH,MAAM,CAACI,SAAS,CAACJ,MAAM,CAACK,KAAK,CAACC,OAAO,CAACC,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAER,OAAO,CAACS,SAAS,CAAC,EAClFV,QAAQ,EACRW,WAAW,CACZ,CAAA;KACF,CAAA;AACD;AACA,IAAA,IAAIV,OAAO,CAACW,WAAW,KAAK,KAAK,EAAE;MACjCV,MAAM,CAACW,EAAE,CAAC,aAAa,EAAE,MAAMV,OAAO,IAAI,CAAC,CAAA;AAC7C,KAAA;AACAW,IAAAA,YAAY,CAAC,MAAO,CAACb,OAAO,CAACc,KAAK,IAAId,OAAO,CAACc,KAAK,EAAE,KAAK,KAAK,GAAGX,KAAK,EAAE,GAAGD,OAAO,IAAK,CAAC,CAAA;GAC1F,CAAA;AACH;;;;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { FlowComponent } from
|
|
2
|
-
import { KeenSliderOptions, KeenSliderPlugin } from
|
|
1
|
+
import { FlowComponent } from 'solid-js';
|
|
2
|
+
import { KeenSliderOptions, KeenSliderPlugin } from 'keen-slider';
|
|
3
3
|
interface Func<T> {
|
|
4
4
|
([...args]: any, args2?: any): T;
|
|
5
5
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { on, createContext, useContext, createSignal, createEffect
|
|
2
|
-
import { createSlider } from
|
|
3
|
-
import { access } from
|
|
4
|
-
import { isServer } from
|
|
1
|
+
import { on, createContext, useContext, createSignal, createEffect } from 'solid-js';
|
|
2
|
+
import { createSlider } from './primitive';
|
|
3
|
+
import { access } from '@solid-primitives/utils';
|
|
4
|
+
import { isServer } from 'solid-js/web';
|
|
5
5
|
export function returnType(func) {
|
|
6
6
|
return {};
|
|
7
7
|
}
|
|
@@ -14,9 +14,7 @@ export const SliderContext = createContext(createSignal(null));
|
|
|
14
14
|
* @param props {KeenSliderOptions} options - Accepts all KeenSlider options.
|
|
15
15
|
* @param props {KeenSLiderPlugin} plugins - A list of Solid Slider or Keen slider plugins.
|
|
16
16
|
*/
|
|
17
|
-
export const SliderProvider = (props) => (<SliderContext.Provider value={createSignal(null)}>
|
|
18
|
-
{props.children}
|
|
19
|
-
</SliderContext.Provider>);
|
|
17
|
+
export const SliderProvider = (props) => (<SliderContext.Provider value={createSignal(null)}>{props.children}</SliderContext.Provider>);
|
|
20
18
|
/**
|
|
21
19
|
* Main Slider component for specifying the Slider on the page.
|
|
22
20
|
*
|
|
@@ -49,13 +49,13 @@ const createSlider = (options, ...plugins) => {
|
|
|
49
49
|
// Slider creation method and directive function
|
|
50
50
|
const create = newEl => {
|
|
51
51
|
el = newEl;
|
|
52
|
-
el.classList.add(
|
|
52
|
+
el.classList.add('keen-slider');
|
|
53
53
|
solidJs.onMount(() => {
|
|
54
54
|
slider = new KeenSlider__default["default"](el, getOptions(), plugins);
|
|
55
|
-
slider.on(
|
|
55
|
+
slider.on('slideChanged', () => setCurrent(slider.track.details.rel));
|
|
56
56
|
});
|
|
57
57
|
solidJs.onCleanup(destroy);
|
|
58
|
-
if (typeof options ===
|
|
58
|
+
if (typeof options === 'function') {
|
|
59
59
|
solidJs.createEffect(solidJs.on(() => options, update));
|
|
60
60
|
}
|
|
61
61
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.common.js","sources":["../../src/primitive.ts","../../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\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): [\n create: (el: HTMLElement) => void,\n helpers: {\n current: Accessor<number>;\n next: Accessor<void>;\n prev: Accessor<void>;\n moveTo: (\n id: number,\n duration?: number,\n absolute?: boolean,\n easing?: (t: number) => number\n ) => void;\n details: Accessor<TrackDetails>;\n slider: Accessor<KeenSliderInstance<O, P, H> | undefined>;\n destroy: Accessor<void>;\n update: VoidFunction;\n }\n] => {\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 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 id: number,\n duration = 250,\n absolute = false,\n easing?: (t: number) => number\n ) => slider?.moveToIdx(id, absolute, { duration, easing: easing }),\n destroy,\n update,\n },\n ];\n};\n","import {\n on,\n createContext,\n useContext,\n createSignal,\n FlowComponent,\n createEffect,\n} from \"solid-js\";\nimport { createSlider } from \"./primitive\";\nimport { KeenSliderOptions, KeenSliderPlugin } from \"keen-slider\";\nimport { access } from \"@solid-primitives/utils\";\nimport { isServer } from \"solid-js/web\";\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(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"],"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","next","prev","moveTo","id","duration","absolute","easing","moveToIdx","returnType","func","SliderContext","createContext","SliderProvider","props","_$createComponent","children","Slider","isServer","_$insert","setHelpers","useContext","helpers","queueMicrotask","defer","SliderButton","context","changeSlide","_$effect","disabled","class","_$classList","_$delegateEvents"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.common.js","sources":["../../src/primitive.ts","../../src/components.tsx"],"sourcesContent":["import { on, onMount, createSignal, onCleanup, Accessor, createEffect } 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\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 = <O = {}, P = {}, H extends string = KeenSliderHooks>(\n options?: KeenSliderOptions<O, P, H> | Accessor<KeenSliderOptions<O, P, H>>,\n ...plugins: KeenSliderPlugin<O, P, H>[]\n): [\n create: (el: HTMLElement) => void,\n helpers: {\n current: Accessor<number>;\n next: Accessor<void>;\n prev: Accessor<void>;\n moveTo: (\n id: number,\n duration?: number,\n absolute?: boolean,\n easing?: (t: number) => number\n ) => void;\n details: Accessor<TrackDetails>;\n slider: Accessor<KeenSliderInstance<O, P, H> | undefined>;\n destroy: Accessor<void>;\n update: VoidFunction;\n }\n] => {\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 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: (id: number, duration = 250, absolute = false, easing?: (t: number) => number) =>\n slider?.moveToIdx(id, absolute, { duration, easing: easing }),\n destroy,\n update\n }\n ];\n};\n","import { on, createContext, useContext, createSignal, FlowComponent, createEffect } from 'solid-js';\nimport { createSlider } from './primitive';\nimport { KeenSliderOptions, KeenSliderPlugin } from 'keen-slider';\nimport { access } from '@solid-primitives/utils';\nimport { isServer } from 'solid-js/web';\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(createSignal<SliderHelpers | null>(null));\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(null)}>{props.children}</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(props.options || {}, ...(props.plugins || []));\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"],"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","next","prev","moveTo","id","duration","absolute","easing","moveToIdx","returnType","func","SliderContext","createContext","SliderProvider","props","_$createComponent","children","Slider","isServer","_$insert","setHelpers","useContext","helpers","queueMicrotask","defer","SliderButton","context","changeSlide","_$effect","disabled","class","_$classList","_$delegateEvents"],"mappings":"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"}
|
package/dist/index/index.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export * from
|
|
2
|
-
export * from
|
|
1
|
+
export * from './primitive';
|
|
2
|
+
export * from './components';
|
package/dist/index/index.jsx
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export * from
|
|
2
|
-
export * from
|
|
1
|
+
export * from './primitive';
|
|
2
|
+
export * from './components';
|
|
@@ -41,13 +41,13 @@ const createSlider = (options, ...plugins) => {
|
|
|
41
41
|
// Slider creation method and directive function
|
|
42
42
|
const create = newEl => {
|
|
43
43
|
el = newEl;
|
|
44
|
-
el.classList.add(
|
|
44
|
+
el.classList.add('keen-slider');
|
|
45
45
|
onMount(() => {
|
|
46
46
|
slider = new KeenSlider(el, getOptions(), plugins);
|
|
47
|
-
slider.on(
|
|
47
|
+
slider.on('slideChanged', () => setCurrent(slider.track.details.rel));
|
|
48
48
|
});
|
|
49
49
|
onCleanup(destroy);
|
|
50
|
-
if (typeof options ===
|
|
50
|
+
if (typeof options === 'function') {
|
|
51
51
|
createEffect(on(() => options, update));
|
|
52
52
|
}
|
|
53
53
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.module.js","sources":["../../src/primitive.ts","../../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\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): [\n create: (el: HTMLElement) => void,\n helpers: {\n current: Accessor<number>;\n next: Accessor<void>;\n prev: Accessor<void>;\n moveTo: (\n id: number,\n duration?: number,\n absolute?: boolean,\n easing?: (t: number) => number\n ) => void;\n details: Accessor<TrackDetails>;\n slider: Accessor<KeenSliderInstance<O, P, H> | undefined>;\n destroy: Accessor<void>;\n update: VoidFunction;\n }\n] => {\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 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 id: number,\n duration = 250,\n absolute = false,\n easing?: (t: number) => number\n ) => slider?.moveToIdx(id, absolute, { duration, easing: easing }),\n destroy,\n update,\n },\n ];\n};\n","import {\n on,\n createContext,\n useContext,\n createSignal,\n FlowComponent,\n createEffect,\n} from \"solid-js\";\nimport { createSlider } from \"./primitive\";\nimport { KeenSliderOptions, KeenSliderPlugin } from \"keen-slider\";\nimport { access } from \"@solid-primitives/utils\";\nimport { isServer } from \"solid-js/web\";\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(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"],"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","next","prev","moveTo","id","duration","absolute","easing","moveToIdx","returnType","func","SliderContext","createContext","SliderProvider","props","_$createComponent","children","Slider","isServer","_$insert","setHelpers","useContext","helpers","queueMicrotask","defer","SliderButton","context","changeSlide","_$effect","disabled","class","_$classList","_$delegateEvents"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.module.js","sources":["../../src/primitive.ts","../../src/components.tsx"],"sourcesContent":["import { on, onMount, createSignal, onCleanup, Accessor, createEffect } 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\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 = <O = {}, P = {}, H extends string = KeenSliderHooks>(\n options?: KeenSliderOptions<O, P, H> | Accessor<KeenSliderOptions<O, P, H>>,\n ...plugins: KeenSliderPlugin<O, P, H>[]\n): [\n create: (el: HTMLElement) => void,\n helpers: {\n current: Accessor<number>;\n next: Accessor<void>;\n prev: Accessor<void>;\n moveTo: (\n id: number,\n duration?: number,\n absolute?: boolean,\n easing?: (t: number) => number\n ) => void;\n details: Accessor<TrackDetails>;\n slider: Accessor<KeenSliderInstance<O, P, H> | undefined>;\n destroy: Accessor<void>;\n update: VoidFunction;\n }\n] => {\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 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: (id: number, duration = 250, absolute = false, easing?: (t: number) => number) =>\n slider?.moveToIdx(id, absolute, { duration, easing: easing }),\n destroy,\n update\n }\n ];\n};\n","import { on, createContext, useContext, createSignal, FlowComponent, createEffect } from 'solid-js';\nimport { createSlider } from './primitive';\nimport { KeenSliderOptions, KeenSliderPlugin } from 'keen-slider';\nimport { access } from '@solid-primitives/utils';\nimport { isServer } from 'solid-js/web';\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(createSignal<SliderHelpers | null>(null));\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(null)}>{props.children}</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(props.options || {}, ...(props.plugins || []));\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"],"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","next","prev","moveTo","id","duration","absolute","easing","moveToIdx","returnType","func","SliderContext","createContext","SliderProvider","props","_$createComponent","children","Slider","isServer","_$insert","setHelpers","useContext","helpers","queueMicrotask","defer","SliderButton","context","changeSlide","_$effect","disabled","class","_$classList","_$delegateEvents"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { Accessor } from
|
|
2
|
-
import { KeenSliderHooks, KeenSliderInstance, KeenSliderOptions, KeenSliderPlugin, TrackDetails } from
|
|
3
|
-
declare module
|
|
1
|
+
import { Accessor } from 'solid-js';
|
|
2
|
+
import { KeenSliderHooks, KeenSliderInstance, KeenSliderOptions, KeenSliderPlugin, TrackDetails } from 'keen-slider';
|
|
3
|
+
declare module 'solid-js' {
|
|
4
4
|
namespace JSX {
|
|
5
5
|
interface Directives {
|
|
6
6
|
slider: {};
|
package/dist/index/primitive.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { on, onMount, createSignal, onCleanup, createEffect
|
|
2
|
-
import { access } from
|
|
3
|
-
import KeenSlider from
|
|
1
|
+
import { on, onMount, createSignal, onCleanup, createEffect } from 'solid-js';
|
|
2
|
+
import { access } from '@solid-primitives/utils';
|
|
3
|
+
import KeenSlider from 'keen-slider';
|
|
4
4
|
/**
|
|
5
5
|
* Creates a slider powered by KeenSlider.
|
|
6
6
|
*
|
|
@@ -33,19 +33,19 @@ export const createSlider = (options, ...plugins) => {
|
|
|
33
33
|
) => ({
|
|
34
34
|
selector: el.childNodes,
|
|
35
35
|
...opts(),
|
|
36
|
-
...overrides
|
|
36
|
+
...overrides
|
|
37
37
|
});
|
|
38
38
|
const update = () => slider?.update(getOptions());
|
|
39
39
|
// Slider creation method and directive function
|
|
40
40
|
const create = (newEl) => {
|
|
41
41
|
el = newEl;
|
|
42
|
-
el.classList.add(
|
|
42
|
+
el.classList.add('keen-slider');
|
|
43
43
|
onMount(() => {
|
|
44
44
|
slider = new KeenSlider(el, getOptions(), plugins);
|
|
45
|
-
slider.on(
|
|
45
|
+
slider.on('slideChanged', () => setCurrent(slider.track.details.rel));
|
|
46
46
|
});
|
|
47
47
|
onCleanup(destroy);
|
|
48
|
-
if (typeof options ===
|
|
48
|
+
if (typeof options === 'function') {
|
|
49
49
|
createEffect(on(() => options, update));
|
|
50
50
|
}
|
|
51
51
|
};
|
|
@@ -59,7 +59,7 @@ export const createSlider = (options, ...plugins) => {
|
|
|
59
59
|
slider: () => slider,
|
|
60
60
|
moveTo: (id, duration = 250, absolute = false, easing) => slider?.moveToIdx(id, absolute, { duration, easing: easing }),
|
|
61
61
|
destroy,
|
|
62
|
-
update
|
|
63
|
-
}
|
|
62
|
+
update
|
|
63
|
+
}
|
|
64
64
|
];
|
|
65
65
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "solid-slider",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.13",
|
|
4
4
|
"description": "A slider utility for SolidJS.",
|
|
5
5
|
"author": "David Di Biase",
|
|
6
6
|
"repository": {
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
"homepage": "https://github.com/davedbase/solid-slider#readme",
|
|
15
15
|
"scripts": {
|
|
16
16
|
"format": "prettier -w \"src/**/*.{js,ts,json,css,tsx,jsx}\"",
|
|
17
|
-
"build": "rollup -c rollup.config.js && cp src/slider.css dist/slider.css && cp src/plugins/adaptiveHeight.css dist/adaptiveHeight/style.css"
|
|
17
|
+
"build": "rollup -c rollup.config.js && cp src/slider.css dist/slider.css && cp src/plugins/adaptiveHeight.css dist/adaptiveHeight/style.css && cp src/plugins/adaptiveWidth.css dist/adaptiveWidth/style.css"
|
|
18
18
|
},
|
|
19
19
|
"type": "module",
|
|
20
20
|
"main": "dist/index/index.common.js",
|