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 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
- - [ ] Create [adaptiveHeight](https://codesandbox.io/s/github/rcbyr/keen-slider-sandboxes/tree/v6/misc/adaptive-height/react?file=/src/App.js:191-403) plugin
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 "keen-slider";
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("created", updateHeight);
16
- slider.on("slideChanged", updateHeight);
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 + "px";
16
+ slider.container.style.height = slider.slides[slider.track.details.rel].offsetHeight + 'px';
15
17
  }
16
- slider.on("created", updateHeight);
17
- slider.on("slideChanged", updateHeight);
18
+ slider.on('created', updateHeight);
19
+ slider.on('slideChanged', updateHeight);
18
20
  };
19
21
  };
20
22
 
21
- module.exports = adaptiveHeight;
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 { Accessor, createEffect } from \"solid-js\";\nimport { makeTimer } from \"@solid-primitives/timer\";\nimport { 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 */\nconst adaptiveHeight = () => {\n return (slider: KeenSliderInstance) => {\n function updateHeight() {\n slider.container.style.height =\n slider.slides[slider.track.details.rel].offsetHeight + \"px\";\n }\n slider.on(\"created\", updateHeight);\n slider.on(\"slideChanged\", updateHeight);\n };\n};\n\nexport default adaptiveHeight;\n"],"names":["adaptiveHeight","slider","updateHeight","container","style","height","slides","track","details","rel","offsetHeight","on"],"mappings":";;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACMA,MAAAA,cAAc,GAAG,MAAM;AAC3B,EAAA,OAAQC,MAA0B,IAAK;AACrC,IAAA,SAASC,YAAY,GAAG;MACtBD,MAAM,CAACE,SAAS,CAACC,KAAK,CAACC,MAAM,GAC3BJ,MAAM,CAACK,MAAM,CAACL,MAAM,CAACM,KAAK,CAACC,OAAO,CAACC,GAAG,CAAC,CAACC,YAAY,GAAG,IAAI,CAAA;AAC/D,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;;;;"}
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 + "px";
12
+ slider.container.style.height = slider.slides[slider.track.details.rel].offsetHeight + 'px';
13
13
  }
14
- slider.on("created", updateHeight);
15
- slider.on("slideChanged", updateHeight);
14
+ slider.on('created', updateHeight);
15
+ slider.on('slideChanged', updateHeight);
16
16
  };
17
17
  };
18
18
 
19
- export { adaptiveHeight as default };
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 { Accessor, createEffect } from \"solid-js\";\nimport { makeTimer } from \"@solid-primitives/timer\";\nimport { 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 */\nconst adaptiveHeight = () => {\n return (slider: KeenSliderInstance) => {\n function updateHeight() {\n slider.container.style.height =\n slider.slides[slider.track.details.rel].offsetHeight + \"px\";\n }\n slider.on(\"created\", updateHeight);\n slider.on(\"slideChanged\", updateHeight);\n };\n};\n\nexport default adaptiveHeight;\n"],"names":["adaptiveHeight","slider","updateHeight","container","style","height","slides","track","details","rel","offsetHeight","on"],"mappings":"AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACMA,MAAAA,cAAc,GAAG,MAAM;AAC3B,EAAA,OAAQC,MAA0B,IAAK;AACrC,IAAA,SAASC,YAAY,GAAG;MACtBD,MAAM,CAACE,SAAS,CAACC,KAAK,CAACC,MAAM,GAC3BJ,MAAM,CAACK,MAAM,CAACL,MAAM,CAACM,KAAK,CAACC,OAAO,CAACC,GAAG,CAAC,CAACC,YAAY,GAAG,IAAI,CAAA;AAC/D,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;;;;"}
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;;;;"}
@@ -0,0 +1,3 @@
1
+ .keen-slider {
2
+ transition: width 0.3s;
3
+ }
@@ -1,5 +1,5 @@
1
- import { Accessor } from "solid-js";
2
- import { KeenSliderInstance } from "keen-slider";
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 { createEffect } from "solid-js";
2
- import { makeTimer } from "@solid-primitives/timer";
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("dragStarted", () => dispose?.());
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
- var solidJs = require('solid-js');
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("dragStarted", () => dispose?.());
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
- module.exports = autoplay;
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 { Accessor, createEffect } from \"solid-js\";\nimport { makeTimer } from \"@solid-primitives/timer\";\nimport { KeenSliderInstance } from \"keen-slider\";\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 */\nconst 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\nexport default autoplay;\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;AACMA,MAAAA,QAAQ,GAAG,CACfC,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,MACEH,MAAM,CAACI,SAAS,CACdJ,MAAM,CAACK,KAAK,CAACC,OAAO,CAACC,QAAQ,GAAG,CAAC,EACjC,IAAI,EACJR,OAAO,CAACS,SAAS,CAClB,EACHV,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,MACX,CAACb,OAAO,CAACc,KAAK,IAAId,OAAO,CAACc,KAAK,EAAE,KAAK,KAAK,GAAGX,KAAK,EAAE,GAAGD,OAAO,IAAI,CACpE,CAAA;GACF,CAAA;AACH;;;;"}
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("dragStarted", () => dispose?.());
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 as default };
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 { Accessor, createEffect } from \"solid-js\";\nimport { makeTimer } from \"@solid-primitives/timer\";\nimport { KeenSliderInstance } from \"keen-slider\";\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 */\nconst 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\nexport default autoplay;\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;AACMA,MAAAA,QAAQ,GAAG,CACfC,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,MACEH,MAAM,CAACI,SAAS,CACdJ,MAAM,CAACK,KAAK,CAACC,OAAO,CAACC,QAAQ,GAAG,CAAC,EACjC,IAAI,EACJR,OAAO,CAACS,SAAS,CAClB,EACHV,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,MACX,CAACb,OAAO,CAACc,KAAK,IAAId,OAAO,CAACc,KAAK,EAAE,KAAK,KAAK,GAAGX,KAAK,EAAE,GAAGD,OAAO,IAAI,CACpE,CAAA;GACF,CAAA;AACH;;;;"}
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 "solid-js";
2
- import { KeenSliderOptions, KeenSliderPlugin } from "keen-slider";
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, } from "solid-js";
2
- import { createSlider } from "./primitive";
3
- import { access } from "@solid-primitives/utils";
4
- import { isServer } from "solid-js/web";
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("keen-slider");
52
+ el.classList.add('keen-slider');
53
53
  solidJs.onMount(() => {
54
54
  slider = new KeenSlider__default["default"](el, getOptions(), plugins);
55
- slider.on("slideChanged", () => setCurrent(slider.track.details.rel));
55
+ slider.on('slideChanged', () => setCurrent(slider.track.details.rel));
56
56
  });
57
57
  solidJs.onCleanup(destroy);
58
- if (typeof options === "function") {
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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"}
@@ -1,2 +1,2 @@
1
- export * from "./primitive";
2
- export * from "./components";
1
+ export * from './primitive';
2
+ export * from './components';
@@ -1,2 +1,2 @@
1
- export * from "./primitive";
2
- export * from "./components";
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("keen-slider");
44
+ el.classList.add('keen-slider');
45
45
  onMount(() => {
46
46
  slider = new KeenSlider(el, getOptions(), plugins);
47
- slider.on("slideChanged", () => setCurrent(slider.track.details.rel));
47
+ slider.on('slideChanged', () => setCurrent(slider.track.details.rel));
48
48
  });
49
49
  onCleanup(destroy);
50
- if (typeof options === "function") {
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":";;;;;AAyBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,YAAY,GAAG,CAK1BC,OAA2E,EAC3E,GAAGC,OAAoC,KAkBpC;AACH,EAAA,IAAIC,MAA+C,CAAA;AACnD,EAAA,IAAIC,EAAe,CAAA;AACnB,EAAA,MAAMC,IAAI,GAAG,MAAMC,MAAM,CAACL,OAAO,CAAC,CAAA;AAClC,EAAA,MAAM,CAACM,OAAO,EAAEC,UAAU,CAAC,GAAGC,YAAY,CAACJ,IAAI,EAAE,EAAEK,OAAO,IAAI,CAAC,CAAC,CAAA;EAChE,MAAMC,OAAO,GAAG,MAAMR,MAAM,IAAIA,MAAM,CAACQ,OAAO,EAAE,CAAA;AAChD,EAAA,MAAMC,UAA4D,GAAG,CACnEC,SAAS,GAAG,EAAC;AACf;QACM;IACJC,QAAQ,EAAEV,EAAE,CAACW,UAAU;AACvB,IAAA,GAAGV,IAAI,EAAE;IACT,GAAGQ,SAAAA;AACL,GAAC,CAAC,CAAA;EACF,MAAMG,MAAM,GAAG,MAAMb,MAAM,EAAEa,MAAM,CAACJ,UAAU,EAAE,CAAC,CAAA;AACjD;EACA,MAAMK,MAAM,GAAIC,KAAkB,IAAK;AACrCd,IAAAA,EAAE,GAAGc,KAAK,CAAA;AACVd,IAAAA,EAAE,CAACe,SAAS,CAACC,GAAG,CAAC,aAAa,CAAC,CAAA;AAC/BC,IAAAA,OAAO,CAAC,MAAM;MACZlB,MAAM,GAAG,IAAImB,UAAU,CAAUlB,EAAE,EAAEQ,UAAU,EAAE,EAAEV,OAAO,CAAC,CAAA;AAC3DC,MAAAA,MAAM,CAACoB,EAAE,CAAC,cAAc,EAAE,MAAMf,UAAU,CAACL,MAAM,CAAEqB,KAAK,CAACC,OAAO,CAACC,GAAG,CAAC,CAAC,CAAA;AACxE,KAAC,CAAC,CAAA;IACFC,SAAS,CAAChB,OAAO,CAAC,CAAA;AAClB,IAAA,IAAI,OAAOV,OAAO,KAAK,UAAU,EAAE;MACjC2B,YAAY,CAACL,EAAE,CAAC,MAAMtB,OAAO,EAAEe,MAAM,CAAC,CAAC,CAAA;AACzC,KAAA;GACD,CAAA;EACD,OAAO,CACLC,MAAM,EACN;IACEV,OAAO;AACPsB,IAAAA,IAAI,EAAE,MAAM1B,MAAM,IAAIA,MAAM,CAAC0B,IAAI,EAAE;AACnCC,IAAAA,IAAI,EAAE,MAAM3B,MAAM,IAAIA,MAAM,CAAC2B,IAAI,EAAE;IACnCL,OAAO,EAAE,MAAOtB,MAAM,GAAGA,MAAM,CAACqB,KAAK,CAACC,OAAO,GAAI,EAAoB;IACrEtB,MAAM,EAAE,MAAMA,MAAM;IACpB4B,MAAM,EAAE,CACNC,EAAU,EACVC,QAAQ,GAAG,GAAG,EACdC,QAAQ,GAAG,KAAK,EAChBC,MAA8B,KAC3BhC,MAAM,EAAEiC,SAAS,CAACJ,EAAE,EAAEE,QAAQ,EAAE;MAAED,QAAQ;AAAEE,MAAAA,MAAM,EAAEA,MAAAA;AAAO,KAAC,CAAC;IAClExB,OAAO;AACPK,IAAAA,MAAAA;AACF,GAAC,CACF,CAAA;AACH;;;;;ACvGA;;AAIO,SAASqB,UAAU,CAAIC,IAAa,EAAE;AAC3C,EAAA,OAAO,EAAE,CAAA;AACX,CAAA;AAIA;AACO,MAAMC,aAAa,GAAGC,aAAa,CACxC/B,YAAY,CAAuB,IAAI,CAAC,EACzC;;AAED;AACA;AACA;AACA;AACA;AACA;MACagC,cAA6B,GAAIC,KAAK,IAChDC,eAAA,CAAA,aAAa,CAAC,QAAQ,EAAA;AAAA,EAAA,IAAC,KAAK,GAAA;IAAA,OAAElC,YAAY,CAAC,IAAI,CAAC,CAAA;AAAA,GAAA;AAAA,EAAA,IAAA,QAAA,GAAA;IAAA,OAC9CiC,KAAK,CAACE,QAAQ,CAAA;AAAA,GAAA;AAAA,CAElB,EAAA;;AAED;AACA;AACA;AACA;AACA;AACA;AACaC,MAAAA,MAGX,GAAIH,KAAK,IAAK;AACd,EAAA,IAAII,QAAQ,EAAE,OAAA,CAAA,MAAA;AAAA,IAAA,MAAA,IAAA,GAAA,MAAA,CAAA,SAAA,CAAA,IAAA,CAAA,CAAA;IAAAC,MAAiCL,CAAAA,IAAAA,EAAAA,MAAAA,KAAK,CAACE,QAAQ,CAAA,CAAA;AAAA,IAAA,OAAA,IAAA,CAAA;AAAA,GAAA,GAAA,CAAA;AAC7D,EAAA,MAAM,GAAGI,UAAU,CAAC,GAAGC,UAAU,CAACV,aAAa,CAAC,CAAA;EAChD,MAAM,CAACpC,MAAM,EAAE+C,OAAO,CAAC,GAAGlD,YAAY,CACpC0C,KAAK,CAACzC,OAAO,IAAI,EAAE,EACnB,IAAIyC,KAAK,CAACxC,OAAO,IAAI,EAAE,CAAC,CACzB,CAAA;EACD8C,UAAU,CAACE,OAAO,CAAC,CAAA;EACnBtB,YAAY,CACVL,EAAE,CACA,MAAMjB,MAAM,CAACoC,KAAK,CAACE,QAAQ,CAAC,EAC5B,MAAMO,cAAc,CAAC,MAAMD,OAAO,CAAClC,MAAM,EAAE,CAAC,EAC5C;AAAEoC,IAAAA,KAAK,EAAE,IAAA;AAAK,GAAC,CAChB,CACF,CAAA;AAED,EAAA,OAAA,CAAA,MAAA;AAAA,IAAA,MAAA,KAAA,GAAA,MAAA,CAAA,SAAA,CAAA,IAAA,CAAA,CAAA;IACW,MAAM,CAAA,KAAA,EAAA,MAAA,IAAA,CAAA,CAAA;IAAAL,MACZL,CAAAA,KAAAA,EAAAA,MAAAA,KAAK,CAACE,QAAQ,CAAA,CAAA;AAAA,IAAA,OAAA,KAAA,CAAA;AAAA,GAAA,GAAA,CAAA;AAGrB,EAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACaS,MAAAA,YAMX,GAAIX,KAAK,IAAK;AACd,EAAA,MAAMY,OAAO,GAAGL,UAAU,CAACV,aAAa,CAAC,CAAA;EACzC,MAAMgB,WAAW,GAAG,MAAM;IACxB,IAAID,OAAO,IAAI,IAAI,EAAE,OAAA;AACrB,IAAA,MAAM,CAACJ,OAAO,CAAC,GAAGI,OAAO,CAAA;AACzBZ,IAAAA,KAAK,CAACb,IAAI,GAAGqB,OAAO,EAAE,EAAErB,IAAI,EAAE,GAAGqB,OAAO,EAAE,EAAEpB,IAAI,EAAE,CAAA;GACnD,CAAA;AACD,EAAA,OAAA,CAAA,MAAA;AAAA,IAAA,MAAA,KAAA,GAAA,OAAA,CAAA,SAAA,CAAA,IAAA,CAAA,CAAA;AAAA,IAAA,KAAA,CAAA,OAAA,GAKayB,WAAW,CAAA;IAAAR,MAEnBL,CAAAA,KAAAA,EAAAA,MAAAA,KAAK,CAACE,QAAQ,CAAA,CAAA;AAAA,IAAAY,MAAA,CAAA,GAAA,IAAA;AAAA,MAAA,MAAA,GAAA,GALLd,KAAK,CAACe,QAAQ,IAAI,KAAK;QAAA,IAC1Bf,GAAAA,KAAK,CAACgB,KAAK;QAAA,IACPhB,GAAAA,KAAK,CAACvB,SAAS,CAAA;AAAA,MAAA,GAAA,KAAA,GAAA,CAAA,GAAA,KAAA,KAAA,CAAA,QAAA,GAAA,GAAA,CAAA,GAAA,GAAA,GAAA,CAAA,CAAA;AAAA,MAAA,IAAA,KAAA,GAAA,CAAA,IAAA,KAAA,KAAA,CAAA,SAAA,GAAA,GAAA,CAAA,IAAA,GAAA,IAAA,CAAA,CAAA;AAAA,MAAA,GAAA,CAAA,IAAA,GAAAwC,SAAA,CAAA,KAAA,EAAA,IAAA,EAAA,GAAA,CAAA,IAAA,CAAA,CAAA;AAAA,MAAA,OAAA,GAAA,CAAA;AAAA,KAAA,EAAA;AAAA,MAAA,GAAA,EAAA,SAAA;AAAA,MAAA,IAAA,EAAA,SAAA;AAAA,MAAA,IAAA,EAAA,SAAA;AAAA,KAAA,CAAA,CAAA;AAAA,IAAA,OAAA,KAAA,CAAA;AAAA,GAAA,GAAA,CAAA;AAMhC,EAAC;AAACC,cAAA,CAAA,CAAA,OAAA,CAAA,CAAA;;;;"}
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 "solid-js";
2
- import { KeenSliderHooks, KeenSliderInstance, KeenSliderOptions, KeenSliderPlugin, TrackDetails } from "keen-slider";
3
- declare module "solid-js" {
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: {};
@@ -1,6 +1,6 @@
1
- import { on, onMount, createSignal, onCleanup, createEffect, } from "solid-js";
2
- import { access } from "@solid-primitives/utils";
3
- import KeenSlider from "keen-slider";
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("keen-slider");
42
+ el.classList.add('keen-slider');
43
43
  onMount(() => {
44
44
  slider = new KeenSlider(el, getOptions(), plugins);
45
- slider.on("slideChanged", () => setCurrent(slider.track.details.rel));
45
+ slider.on('slideChanged', () => setCurrent(slider.track.details.rel));
46
46
  });
47
47
  onCleanup(destroy);
48
- if (typeof options === "function") {
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.12",
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",