solid-slider 1.3.0 → 1.3.3

package/README.md

@@ -154,6 +154,15 @@ Solid Slider is meant to be a lightweight and compact wrapper of Keen-Slider. It
 
 Thie library exports it's own CSS which is the basic Keen-Slider implementation for convenience. If you supply options as an accessor function, the slider will reactively update the configuration so that you don't have to destroy and recreate the slider. As of Keen-Slider 6 plugins are now fully supported. You may supply them as a param in createSlider. Note that plugins are not reactively updated and must be supplied on creation.
 
+## Roadmap
+
+- [ ] Create [adaptiveHeight](https://codesandbox.io/s/github/rcbyr/keen-slider-sandboxes/tree/v6/misc/adaptive-height/react?file=/src/App.js:191-403) plugin
+- [ ] Add Dots components (to display a row of dots below the slider)
+- [ ] Add slider thumbnail navigation
+- [ ] Add slider loader
+- [ ] Build [timepicker](https://keen-slider.io/examples#timepicker) component
+- [ ] Create [Scroll Wheel](https://keen-slider.io/examples#scroll-wheel-controls) component
+
 ## Changelog
 
 - 1.0.0 - Initial release
@@ -162,7 +171,9 @@ Thie library exports it's own CSS which is the basic Keen-Slider implementation
 - 1.2.5 - Added autoplay plugin and general plugin structure.
 - 1.2.7 - Maybe I should actually export the .css? That'd be a good idea, right? /s
 - 1.2.9 - Updated timer primitive and patched issue with current slide setting from initial options.
-- 1.3.0 - Introduced Slider, SliderProvider and SliderButton for ease.
+- 1.3.1 - Introduced Slider, SliderProvider and SliderButton for ease.
+- 1.3.2 - Patched issue with initial slide not setting current signal.
+- 1.3.5 - Updated to latest SolidJS version.
 
 ## Keen Options API
 

package/dist/adaptiveHeight/adaptiveHeight.d.ts

@@ -0,0 +1,11 @@
+import { KeenSliderInstance } from "keen-slider";
+/**
+ * Adaptive height is a plugin that adjusts the height of the slider to the content on change.
+ *
+ * @example
+ * ```ts
+ * const [create] = createSlider({}, [adaptiveHeight]);
+ * ```
+ */
+declare const adaptiveHeight: () => (slider: KeenSliderInstance) => void;
+export default adaptiveHeight;

package/dist/adaptiveHeight/adaptiveHeight.jsx

@@ -0,0 +1,18 @@
+/**
+ * Adaptive height is a plugin that adjusts the height of the slider to the content on change.
+ *
+ * @example
+ * ```ts
+ * const [create] = createSlider({}, [adaptiveHeight]);
+ * ```
+ */
+const adaptiveHeight = () => {
+    return (slider) => {
+        function updateHeight() {
+            slider.container.style.height = slider.slides[slider.track.details.rel].offsetHeight + "px";
+        }
+        slider.on("created", updateHeight);
+        slider.on("slideChanged", updateHeight);
+    };
+};
+export default adaptiveHeight;

package/dist/adaptiveHeight/index.common.js

@@ -0,0 +1,23 @@
+'use strict';
+
+/**
+ * Adaptive height is a plugin that adjusts the height of the slider to the content on change.
+ *
+ * @example
+ * ```ts
+ * const [create] = createSlider({}, [adaptiveHeight]);
+ * ```
+ */
+const adaptiveHeight = () => {
+  return slider => {
+    function updateHeight() {
+      slider.container.style.height = slider.slides[slider.track.details.rel].offsetHeight + "px";
+    }
+
+    slider.on("created", updateHeight);
+    slider.on("slideChanged", updateHeight);
+  };
+};
+
+module.exports = adaptiveHeight;
+//# sourceMappingURL=index.common.js.map

package/dist/adaptiveHeight/index.common.js.map

@@ -0,0 +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 = 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,MAAD,IAAgC;AACrC,IAAA,SAASC,YAAT,GAAwB;AACtBD,MAAAA,MAAM,CAACE,SAAP,CAAiBC,KAAjB,CAAuBC,MAAvB,GAAgCJ,MAAM,CAACK,MAAP,CAAcL,MAAM,CAACM,KAAP,CAAaC,OAAb,CAAqBC,GAAnC,CAAA,CAAwCC,YAAxC,GAAuD,IAAvF,CAAA;AACD,KAAA;;AACDT,IAAAA,MAAM,CAACU,EAAP,CAAU,SAAV,EAAqBT,YAArB,CAAA,CAAA;AACAD,IAAAA,MAAM,CAACU,EAAP,CAAU,cAAV,EAA0BT,YAA1B,CAAA,CAAA;AACD,GAND,CAAA;AAOD;;;;"}

package/dist/adaptiveHeight/index.module.js

@@ -0,0 +1,21 @@
+/**
+ * Adaptive height is a plugin that adjusts the height of the slider to the content on change.
+ *
+ * @example
+ * ```ts
+ * const [create] = createSlider({}, [adaptiveHeight]);
+ * ```
+ */
+const adaptiveHeight = () => {
+  return slider => {
+    function updateHeight() {
+      slider.container.style.height = slider.slides[slider.track.details.rel].offsetHeight + "px";
+    }
+
+    slider.on("created", updateHeight);
+    slider.on("slideChanged", updateHeight);
+  };
+};
+
+export { adaptiveHeight as default };
+//# sourceMappingURL=index.module.js.map

package/dist/adaptiveHeight/index.module.js.map

@@ -0,0 +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 = 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,MAAD,IAAgC;AACrC,IAAA,SAASC,YAAT,GAAwB;AACtBD,MAAAA,MAAM,CAACE,SAAP,CAAiBC,KAAjB,CAAuBC,MAAvB,GAAgCJ,MAAM,CAACK,MAAP,CAAcL,MAAM,CAACM,KAAP,CAAaC,OAAb,CAAqBC,GAAnC,CAAA,CAAwCC,YAAxC,GAAuD,IAAvF,CAAA;AACD,KAAA;;AACDT,IAAAA,MAAM,CAACU,EAAP,CAAU,SAAV,EAAqBT,YAArB,CAAA,CAAA;AACAD,IAAAA,MAAM,CAACU,EAAP,CAAU,cAAV,EAA0BT,YAA1B,CAAA,CAAA;AACD,GAND,CAAA;AAOD;;;;"}

package/dist/adaptiveHeight/style.css

@@ -0,0 +1,3 @@
+.keen-slider {
+  transition: height 0.3s;
+}

package/dist/autoplay/autoplay.d.ts

@@ -0,0 +1,27 @@
+import { Accessor } from "solid-js";
+import { KeenSliderInstance } from "keen-slider";
+/**
+ * Provides an autoplay plugin.
+ *
+ * @param {number} interval Interval in milliseconds for switching slides
+ * @param {object} options Options to customize the autoplay
+ * @param {Function} options.pause A pause signal to control the autoplay
+ * @param {boolean} options.pauseOnDrag Denotes of the autoplay should pause on drag.
+ * @param {object} options.animation Allows for control of duration and easing.
+ * @param {number} options.duration Duration for transitioning the slide.
+ * @param {number} options.easing Easing function for the transition animation.
+ *
+ * @example
+ * ```ts
+ * const [create] = createSlider({}, [autoplay]);
+ * ```
+ */
+declare const autoplay: (interval: number, options: {
+    pause?: Accessor<boolean>;
+    pauseOnDrag?: boolean;
+    animation?: {
+        duration?: number;
+        easing?: (t: number) => number;
+    };
+}) => (slider: KeenSliderInstance) => void;
+export default autoplay;

package/dist/autoplay/autoplay.jsx

@@ -0,0 +1,32 @@
+import { createEffect } from "solid-js";
+import { makeTimer } from "@solid-primitives/timer";
+/**
+ * Provides an autoplay plugin.
+ *
+ * @param {number} interval Interval in milliseconds for switching slides
+ * @param {object} options Options to customize the autoplay
+ * @param {Function} options.pause A pause signal to control the autoplay
+ * @param {boolean} options.pauseOnDrag Denotes of the autoplay should pause on drag.
+ * @param {object} options.animation Allows for control of duration and easing.
+ * @param {number} options.duration Duration for transitioning the slide.
+ * @param {number} options.easing Easing function for the transition animation.
+ *
+ * @example
+ * ```ts
+ * const [create] = createSlider({}, [autoplay]);
+ * ```
+ */
+const autoplay = (interval = 1000, options) => {
+    return (slider) => {
+        let dispose;
+        const start = () => {
+            dispose = makeTimer(() => slider.moveToIdx(slider.track.details.position + 1, true, options.animation), interval, setInterval);
+        };
+        // Pause the slider on drag
+        if (options.pauseOnDrag || true) {
+            slider.on("dragStarted", () => dispose());
+        }
+        createEffect(() => (!options.pause || options.pause() === false ? start() : dispose()));
+    };
+};
+export default autoplay;

package/dist/autoplay/index.common.js

@@ -0,0 +1,40 @@
+'use strict';
+
+var solidJs = require('solid-js');
+var timer = require('@solid-primitives/timer');
+
+/**
+ * Provides an autoplay plugin.
+ *
+ * @param {number} interval Interval in milliseconds for switching slides
+ * @param {object} options Options to customize the autoplay
+ * @param {Function} options.pause A pause signal to control the autoplay
+ * @param {boolean} options.pauseOnDrag Denotes of the autoplay should pause on drag.
+ * @param {object} options.animation Allows for control of duration and easing.
+ * @param {number} options.duration Duration for transitioning the slide.
+ * @param {number} options.easing Easing function for the transition animation.
+ *
+ * @example
+ * ```ts
+ * const [create] = createSlider({}, [autoplay]);
+ * ```
+ */
+const autoplay = (interval = 1000, options) => {
+  return slider => {
+    let dispose;
+
+    const start = () => {
+      dispose = timer.makeTimer(() => slider.moveToIdx(slider.track.details.position + 1, true, options.animation), interval, setInterval);
+    }; // Pause the slider on drag
+
+
+    if (options.pauseOnDrag || true) {
+      slider.on("dragStarted", () => dispose());
+    }
+
+    solidJs.createEffect(() => !options.pause || options.pause() === false ? start() : dispose());
+  };
+};
+
+module.exports = autoplay;
+//# sourceMappingURL=index.common.js.map

package/dist/autoplay/index.common.js.map

@@ -0,0 +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        () => 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 || true) {\n      slider.on(\"dragStarted\", () => dispose());\n    }\n    createEffect(() => (!options.pause || options.pause() === false ? start() : dispose()));\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,IADJ,EAEfC,OAFe,KAUZ;AACH,EAAA,OAAQC,MAAD,IAAgC;AACrC,IAAA,IAAIC,OAAJ,CAAA;;AACA,IAAMC,MAAAA,KAAK,GAAG,MAAM;AAClBD,MAAAA,OAAO,GAAGE,eAAS,CACjB,MAAMH,MAAM,CAACI,SAAP,CAAiBJ,MAAM,CAACK,KAAP,CAAaC,OAAb,CAAqBC,QAArB,GAAgC,CAAjD,EAAoD,IAApD,EAA0DR,OAAO,CAACS,SAAlE,CADW,EAEjBV,QAFiB,EAGjBW,WAHiB,CAAnB,CAAA;AAKD,KAND,CAFqC;;;AAUrC,IAAA,IAAIV,OAAO,CAACW,WAAR,IAAuB,IAA3B,EAAiC;AAC/BV,MAAAA,MAAM,CAACW,EAAP,CAAU,aAAV,EAAyB,MAAMV,OAAO,EAAtC,CAAA,CAAA;AACD,KAAA;;AACDW,IAAAA,oBAAY,CAAC,MAAO,CAACb,OAAO,CAACc,KAAT,IAAkBd,OAAO,CAACc,KAAR,EAAA,KAAoB,KAAtC,GAA8CX,KAAK,EAAnD,GAAwDD,OAAO,EAAvE,CAAZ,CAAA;AACD,GAdD,CAAA;AAeD;;;;"}

package/dist/autoplay/index.module.js

@@ -0,0 +1,38 @@
+import { createEffect } from 'solid-js';
+import { makeTimer } from '@solid-primitives/timer';
+
+/**
+ * Provides an autoplay plugin.
+ *
+ * @param {number} interval Interval in milliseconds for switching slides
+ * @param {object} options Options to customize the autoplay
+ * @param {Function} options.pause A pause signal to control the autoplay
+ * @param {boolean} options.pauseOnDrag Denotes of the autoplay should pause on drag.
+ * @param {object} options.animation Allows for control of duration and easing.
+ * @param {number} options.duration Duration for transitioning the slide.
+ * @param {number} options.easing Easing function for the transition animation.
+ *
+ * @example
+ * ```ts
+ * const [create] = createSlider({}, [autoplay]);
+ * ```
+ */
+const autoplay = (interval = 1000, options) => {
+  return slider => {
+    let dispose;
+
+    const start = () => {
+      dispose = makeTimer(() => slider.moveToIdx(slider.track.details.position + 1, true, options.animation), interval, setInterval);
+    }; // Pause the slider on drag
+
+
+    if (options.pauseOnDrag || true) {
+      slider.on("dragStarted", () => dispose());
+    }
+
+    createEffect(() => !options.pause || options.pause() === false ? start() : dispose());
+  };
+};
+
+export { autoplay as default };
+//# sourceMappingURL=index.module.js.map

package/dist/autoplay/index.module.js.map

@@ -0,0 +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        () => 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 || true) {\n      slider.on(\"dragStarted\", () => dispose());\n    }\n    createEffect(() => (!options.pause || options.pause() === false ? start() : dispose()));\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,IADJ,EAEfC,OAFe,KAUZ;AACH,EAAA,OAAQC,MAAD,IAAgC;AACrC,IAAA,IAAIC,OAAJ,CAAA;;AACA,IAAMC,MAAAA,KAAK,GAAG,MAAM;AAClBD,MAAAA,OAAO,GAAGE,SAAS,CACjB,MAAMH,MAAM,CAACI,SAAP,CAAiBJ,MAAM,CAACK,KAAP,CAAaC,OAAb,CAAqBC,QAArB,GAAgC,CAAjD,EAAoD,IAApD,EAA0DR,OAAO,CAACS,SAAlE,CADW,EAEjBV,QAFiB,EAGjBW,WAHiB,CAAnB,CAAA;AAKD,KAND,CAFqC;;;AAUrC,IAAA,IAAIV,OAAO,CAACW,WAAR,IAAuB,IAA3B,EAAiC;AAC/BV,MAAAA,MAAM,CAACW,EAAP,CAAU,aAAV,EAAyB,MAAMV,OAAO,EAAtC,CAAA,CAAA;AACD,KAAA;;AACDW,IAAAA,YAAY,CAAC,MAAO,CAACb,OAAO,CAACc,KAAT,IAAkBd,OAAO,CAACc,KAAR,EAAA,KAAoB,KAAtC,GAA8CX,KAAK,EAAnD,GAAwDD,OAAO,EAAvE,CAAZ,CAAA;AACD,GAdD,CAAA;AAeD;;;;"}

package/dist/index/components.d.ts

@@ -0,0 +1,50 @@
+import { Component } from "solid-js";
+import { KeenSliderOptions, KeenSliderPlugin } from "keen-slider";
+interface Func<T> {
+    ([...args]: any, args2?: any): T;
+}
+export declare function returnType<T>(func: Func<T>): T;
+export declare const SliderContext: import("solid-js").Context<import("solid-js").Signal<{
+    current: import("solid-js").Accessor<number>;
+    next: import("solid-js").Accessor<void>;
+    prev: import("solid-js").Accessor<void>;
+    moveTo: (id: number, duration?: number, absolute?: boolean, easing?: (t: number) => number) => void;
+    details: import("solid-js").Accessor<import("keen-slider").TrackDetails>;
+    slider: import("solid-js").Accessor<import("keen-slider").KeenSliderInstance<{}, {}, import("keen-slider").KeenSliderHooks>>;
+    destroy: import("solid-js").Accessor<void>;
+}>>;
+/**
+ * A helpful and simple Provider to wrap your Slider if controls such as SliderButton are used.
+ *
+ * @param props {KeenSliderOptions} options - Accepts all KeenSlider options.
+ * @param props {KeenSLiderPlugin} plugins - A list of Solid Slider or Keen slider plugins.
+ */
+export declare const SliderProvider: Component;
+/**
+ * Main Slider component for specifying the Slider on the page.
+ *
+ * @param props {KeenSliderOptions} options - Accepts all KeenSlider options.
+ * @param props {KeenSLiderPlugin} plugins - A list of Solid Slider or Keen slider plugins.
+ */
+export declare const Slider: Component<{
+    options?: KeenSliderOptions;
+    plugins?: KeenSliderPlugin[];
+}>;
+/**
+ * Provides a helpful button with next/prev to pair with your slider.
+ *
+ * @param props {boolean} next - Specify if this should be a next button.
+ * @param props {boolean} prev - Specify if this should be a prev button.
+ * @param props {string} class - Class to override the button.
+ * @param props {object} classList - List of classes to override the button.
+ */
+export declare const SliderButton: Component<{
+    next?: boolean;
+    prev?: boolean;
+    disabled?: boolean;
+    class?: string;
+    classList?: {
+        [k: string]: boolean | undefined;
+    };
+}>;
+export {};

package/dist/index/components.jsx

@@ -0,0 +1,51 @@
+import { createContext, useContext, createSignal } from "solid-js";
+import { createSlider } from "./primitive";
+import { isServer } from "solid-js/web";
+export function returnType(func) {
+    return {};
+}
+const sliderValues = returnType(createSlider);
+// Main context for the slider
+export const SliderContext = createContext(createSignal(null));
+/**
+ * A helpful and simple Provider to wrap your Slider if controls such as SliderButton are used.
+ *
+ * @param props {KeenSliderOptions} options - Accepts all KeenSlider options.
+ * @param props {KeenSLiderPlugin} plugins - A list of Solid Slider or Keen slider plugins.
+ */
+export const SliderProvider = props => (<SliderContext.Provider value={createSignal(null)}>{props.children}</SliderContext.Provider>);
+/**
+ * Main Slider component for specifying the Slider on the page.
+ *
+ * @param props {KeenSliderOptions} options - Accepts all KeenSlider options.
+ * @param props {KeenSLiderPlugin} plugins - A list of Solid Slider or Keen slider plugins.
+ */
+export const Slider = props => {
+    if (isServer)
+        return props.children;
+    const [, setHelpers] = useContext(SliderContext);
+    const [slider, helpers] = createSlider(props.options || {}, ...(props.plugins || []));
+    setHelpers(helpers);
+    slider;
+    return <div use:slider>{props.children}</div>;
+};
+/**
+ * Provides a helpful button with next/prev to pair with your slider.
+ *
+ * @param props {boolean} next - Specify if this should be a next button.
+ * @param props {boolean} prev - Specify if this should be a prev button.
+ * @param props {string} class - Class to override the button.
+ * @param props {object} classList - List of classes to override the button.
+ */
+export const SliderButton = props => {
+    const context = useContext(SliderContext);
+    const changeSlide = () => {
+        if (context == null)
+            return;
+        const [helpers] = context;
+        props.next ? helpers()?.next() : helpers()?.prev();
+    };
+    return (<button disabled={props.disabled || false} class={props.class} classList={props.classList} onClick={changeSlide}>
+      {props.children}
+    </button>);
+};

package/dist/index/index.common.js

@@ -0,0 +1,176 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var solidJs = require('solid-js');
+var KeenSlider = require('keen-slider');
+var web = require('solid-js/web');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var KeenSlider__default = /*#__PURE__*/_interopDefaultLegacy(KeenSlider);
+
+/**
+ * Creates a slider powered by KeenSlider.
+ *
+ * @param {Object} options Values to initialize the slider with
+ * @param {Array} plugins Extensions that enhance KeenSlider options
+ * @returns {[create: Function, helpers: Object]} Returns mount and helper methods
+ * @returns {Function} create Mounts the slider on provided element
+ * @returns {Function} helpers.current Current slide number
+ * @returns {Function} helpers.current Current slide number
+ * @returns {Function} helpers.next Function to trigger the next slide
+ * @returns {Function} helpers.prev Function to trigger the previous slide
+ * @returns {Function<Object>} helpers.details Provides details about the current slider
+ * @returns {Function} helpers.slider Returns the KeenSlider instance
+ * @returns {Function} helpers.destroy Manual destroy function
+ *
+ * @example
+ * ```ts
+ * const [create, { prev, next }] = createSlider();
+ * <div use:slider>...</div>
+ * ```
+ */
+const createSlider = (options, ...plugins) => {
+  let slider;
+
+  const opts = () => typeof options == "function" ? options() : options;
+
+  const [current, setCurrent] = solidJs.createSignal(opts()?.initial || 0);
+
+  const destroy = () => slider && slider.destroy(); // Slider creation method and directive function
+
+
+  const create = el => {
+    el.classList.add("keen-slider"); // @ts-ignore
+
+    const getOptions = () => ({
+      selector: el.childNodes,
+      ...opts()
+    });
+
+    solidJs.onMount(() => {
+      slider = new KeenSlider__default["default"](el, getOptions(), plugins);
+      slider.on("slideChanged", () => setCurrent(slider.track.details.rel));
+    });
+    solidJs.onCleanup(destroy);
+
+    if (typeof options === "function") {
+      solidJs.createEffect(solidJs.on(() => options, () => slider && slider.update(getOptions())));
+    }
+  };
+
+  return [create, {
+    current,
+    next: () => slider && slider.next(),
+    prev: () => slider && slider.prev(),
+    details: () => slider ? slider.track.details : {},
+    slider: () => slider,
+    moveTo: (id, duration = 250, absolute = false, easing) => slider?.moveToIdx(id, absolute, {
+      duration,
+      easing: easing
+    }),
+    destroy
+  }];
+};
+
+const _tmpl$ = /*#__PURE__*/web.template(`<div></div>`, 2),
+      _tmpl$2 = /*#__PURE__*/web.template(`<button></button>`, 2);
+
+function returnType(func) {
+  return {};
+}
+// Main context for the slider
+const SliderContext = solidJs.createContext(solidJs.createSignal(null));
+/**
+ * A helpful and simple Provider to wrap your Slider if controls such as SliderButton are used.
+ *
+ * @param props {KeenSliderOptions} options - Accepts all KeenSlider options.
+ * @param props {KeenSLiderPlugin} plugins - A list of Solid Slider or Keen slider plugins.
+ */
+
+const SliderProvider = props => web.createComponent(SliderContext.Provider, {
+  get value() {
+    return solidJs.createSignal(null);
+  },
+
+  get children() {
+    return props.children;
+  }
+
+});
+/**
+ * Main Slider component for specifying the Slider on the page.
+ *
+ * @param props {KeenSliderOptions} options - Accepts all KeenSlider options.
+ * @param props {KeenSLiderPlugin} plugins - A list of Solid Slider or Keen slider plugins.
+ */
+
+const Slider = props => {
+  if (web.isServer) return props.children;
+  const [, setHelpers] = solidJs.useContext(SliderContext);
+  const [slider, helpers] = createSlider(props.options || {}, ...(props.plugins || []));
+  setHelpers(helpers);
+  return (() => {
+    const _el$ = _tmpl$.cloneNode(true);
+
+    slider(_el$, () => true);
+
+    web.insert(_el$, () => props.children);
+
+    return _el$;
+  })();
+};
+/**
+ * Provides a helpful button with next/prev to pair with your slider.
+ *
+ * @param props {boolean} next - Specify if this should be a next button.
+ * @param props {boolean} prev - Specify if this should be a prev button.
+ * @param props {string} class - Class to override the button.
+ * @param props {object} classList - List of classes to override the button.
+ */
+
+const SliderButton = props => {
+  const context = solidJs.useContext(SliderContext);
+
+  const changeSlide = () => {
+    if (context == null) return;
+    const [helpers] = context;
+    props.next ? helpers()?.next() : helpers()?.prev();
+  };
+
+  return (() => {
+    const _el$2 = _tmpl$2.cloneNode(true);
+
+    _el$2.$$click = changeSlide;
+
+    web.insert(_el$2, () => props.children);
+
+    web.effect(_p$ => {
+      const _v$ = props.disabled || false,
+            _v$2 = props.class,
+            _v$3 = props.classList;
+
+      _v$ !== _p$._v$ && (_el$2.disabled = _p$._v$ = _v$);
+      _v$2 !== _p$._v$2 && (_el$2.className = _p$._v$2 = _v$2);
+      _p$._v$3 = web.classList(_el$2, _v$3, _p$._v$3);
+      return _p$;
+    }, {
+      _v$: undefined,
+      _v$2: undefined,
+      _v$3: undefined
+    });
+
+    return _el$2;
+  })();
+};
+
+web.delegateEvents(["click"]);
+
+exports.Slider = Slider;
+exports.SliderButton = SliderButton;
+exports.SliderContext = SliderContext;
+exports.SliderProvider = SliderProvider;
+exports.createSlider = createSlider;
+exports.returnType = returnType;
+//# sourceMappingURL=index.common.js.map

package/dist/index/index.common.js.map

@@ -0,0 +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 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  }\n] => {\n  let slider: KeenSliderInstance<O, P, H> | undefined;\n  const opts = () => typeof options == \"function\" ? options() : options;\n  const [current, setCurrent] = createSignal(opts()?.initial || 0);\n  const destroy = () => slider && slider.destroy();\n  // Slider creation method and directive function\n  const create = (el: HTMLElement) => {\n    el.classList.add(\"keen-slider\");\n    // @ts-ignore\n    const getOptions: Accessor<KeenSliderOptions<O, P, H> | undefined> = () => ({\n      selector: el.childNodes,\n      ...(opts())\n    });\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(\n        on(\n          () => options,\n          () => slider && slider.update(getOptions())\n        )\n      );\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    }\n  ];\n};\n","import { Component, createContext, useContext, createSignal, createMemo } from \"solid-js\";\nimport { createSlider } from \"./primitive\";\nimport { KeenSliderOptions, KeenSliderPlugin } from \"keen-slider\";\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: Component = 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: Component<{\n  options?: KeenSliderOptions;\n  plugins?: KeenSliderPlugin[];\n}> = props => {\n  if (isServer) return props.children;\n  const [, setHelpers] = useContext(SliderContext);\n  const [slider, helpers] = createSlider(props.options || {}, ...(props.plugins || []));\n  setHelpers(helpers);\n  slider;\n  return <div use:slider>{props.children}</div>;\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: Component<{\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","opts","current","setCurrent","createSignal","initial","destroy","create","el","classList","add","getOptions","selector","childNodes","onMount","KeenSlider","on","track","details","rel","onCleanup","createEffect","update","next","prev","moveTo","id","duration","absolute","easing","moveToIdx","returnType","func","SliderContext","createContext","SliderProvider","props","_$createComponent","children","Slider","isServer","setHelpers","useContext","helpers","SliderButton","context","changeSlide","_$effect","disabled","class","_$classList"],"mappings":"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"}

package/dist/index/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./primitive";
+export * from "./components";

package/dist/index/index.jsx

@@ -0,0 +1,2 @@
+export * from "./primitive";
+export * from "./components";