solid-slider 1.0.4 → 1.1.0

package/README.md

@@ -62,7 +62,7 @@ const MyComponent = () => {
 
 - 1.0.0 - Initial release
 - 1.0.3 - Changed the exported API to be slightly more flexible.
-- 1.0.4 - Fixed slider directive definition
+- 1.1.0 - Upgraded to KeenSlider 6 and improved general reactivity.
 
 ## Keen Options API
 

package/dist/index.d.ts

@@ -1,10 +1,9 @@
-import KeenSlider, { TOptionsEvents, TDetails } from "keen-slider";
-export declare type SliderOptions = TOptionsEvents;
-export declare type SliderDetails = TDetails;
+import { Accessor } from "solid-js";
+import { KeenSliderHooks, KeenSliderInstance, KeenSliderOptions, KeenSliderPlugin, TrackDetails } from "keen-slider";
 declare module "solid-js" {
     namespace JSX {
         interface Directives {
-            ["slider"]?: {};
+            slider: {};
         }
     }
 }
@@ -12,32 +11,31 @@ declare module "solid-js" {
  * Creates a slider powered by KeenSlider.
  *
  * @param {options} Options to initialize the slider with
- * @returns {Array} An array of useful utilities
- * @returns [create] Register and creation function to call on setup
- * @returns [current] Current slide number
- * @returns [next] Function to trigger the next slide
- * @returns [prev] Function to trigger the previous slide
- * @returns [moveTo] Allow you to change the slider to a specific slide
- * @returns [refresh] Refresh trigger
- * @returns [details] Retrieve a list of SliderDetails
- * @returns [slider] Gain access to the slider itself
- * @returns [destroy] Destroy the entire slider (this is automatically handled)
+ * @param {plugins} Plugins that enhance KeenSlider options
+ * @returns {Object} An object of useful helpers
+ * @returns {create} Register and creation function to call on setup
+ * @returns {current} Current slide number
+ * @returns {next} Function to trigger the next slide
+ * @returns {prev} Function to trigger the previous slide
+ * @returns {moveTo} Allow you to change the slider to a specific slide
+ * @returns {refresh} Refresh trigger
+ * @returns {details} Retrieve a list of SliderDetails
+ * @returns {slider} Gain access to the slider itself
+ * @returns {destroy} Destroy the entire slider (this is automatically handled)
  *
  * @example
  * ```ts
- * const [create] = createSlider();
+ * const [create, { prev, next }] = createSlider();
  * <div use:slider>...</div>
  * ```
  */
-declare const createSlider: (options?: SliderOptions) => [(el: HTMLElement) => void, {
-    current: () => number;
-    next: () => void;
-    prev: () => void;
-    moveTo: (id: number, duration?: number | undefined) => void;
-    resize: () => void;
-    refresh: () => void;
-    details: () => SliderDetails;
-    slider: () => KeenSlider;
-    destroy: () => void;
+declare const createSlider: <O = {}, P = {}, H extends string = KeenSliderHooks>(options?: KeenSliderOptions<O, P, H> | undefined, plugins?: KeenSliderPlugin<O, P, H>[] | undefined) => [create: (el: HTMLElement) => void, helpers: {
+    current: Accessor<number>;
+    next: Accessor<void>;
+    prev: Accessor<void>;
+    moveTo: (id: number, duration?: number | undefined, absolute?: boolean | undefined, easing?: ((t: number) => number) | undefined) => void;
+    details: Accessor<TrackDetails>;
+    slider: Accessor<KeenSliderInstance<O, P, H> | undefined>;
+    destroy: Accessor<void>;
 }];
 export default createSlider;

package/dist/index.js

@@ -1,53 +1,52 @@
-import { onMount, onCleanup, createSignal } from "solid-js";
+import { on, onMount, createSignal, onCleanup, createEffect } from "solid-js";
 import KeenSlider from "keen-slider";
 /**
  * Creates a slider powered by KeenSlider.
  *
  * @param {options} Options to initialize the slider with
- * @returns {Array} An array of useful utilities
- * @returns [create] Register and creation function to call on setup
- * @returns [current] Current slide number
- * @returns [next] Function to trigger the next slide
- * @returns [prev] Function to trigger the previous slide
- * @returns [moveTo] Allow you to change the slider to a specific slide
- * @returns [refresh] Refresh trigger
- * @returns [details] Retrieve a list of SliderDetails
- * @returns [slider] Gain access to the slider itself
- * @returns [destroy] Destroy the entire slider (this is automatically handled)
+ * @param {plugins} Plugins that enhance KeenSlider options
+ * @returns {Object} An object of useful helpers
+ * @returns {create} Register and creation function to call on setup
+ * @returns {current} Current slide number
+ * @returns {next} Function to trigger the next slide
+ * @returns {prev} Function to trigger the previous slide
+ * @returns {moveTo} Allow you to change the slider to a specific slide
+ * @returns {refresh} Refresh trigger
+ * @returns {details} Retrieve a list of SliderDetails
+ * @returns {slider} Gain access to the slider itself
+ * @returns {destroy} Destroy the entire slider (this is automatically handled)
  *
  * @example
  * ```ts
- * const [create] = createSlider();
+ * const [create, { prev, next }] = createSlider();
  * <div use:slider>...</div>
  * ```
  */
-const createSlider = (options = {}) => {
+const createSlider = (options, plugins) => {
     let slider;
     const [current, setCurrent] = createSignal(0);
     const destroy = () => slider && slider.destroy();
+    // Slider creation method and directive function
     const create = (el) => {
-        let opts = { ...options };
-        // @ts-ignore
-        opts.slides = el.childNodes;
-        opts.slideChanged = instance => {
-            options.slideChanged && options.slideChanged(instance);
-            setCurrent(instance.details().relativeSlide);
-        };
         el.classList.add("keen-slider");
-        onMount(() => (slider = new KeenSlider(el, opts)));
+        // @ts-ignore
+        const opts = () => ({ selector: el.childNodes, ...options });
+        onMount(() => {
+            slider = new KeenSlider(el, opts(), plugins);
+            slider.on('slideChanged', () => setCurrent(slider.track.details.rel));
+        });
         onCleanup(destroy);
+        createEffect(on(() => options, () => slider && slider.update(opts())));
     };
     return [
         create,
         {
             current,
-            next: () => slider.next(),
-            prev: () => slider.prev(),
-            moveTo: (id, duration = 250) => slider.moveToSlide(id, duration),
-            resize: () => slider.resize(),
-            refresh: () => slider.refresh(),
-            details: () => slider.details(),
+            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
         }
     ];

package/dist/slider.css

@@ -1,4 +1,5 @@
-.keen-slider {
+.keen-slider:not([data-keen-slider-disabled]) {
+  align-content: flex-start;
   display: flex;
   overflow: hidden;
   position: relative;
@@ -10,19 +11,20 @@
   -khtml-user-select: none;
   touch-action: pan-y;
   -webkit-tap-highlight-color: transparent;
+  width: 100%;
 }
-.keen-slider__slide {
+.keen-slider:not([data-keen-slider-disabled]) .keen-slider__slide {
   position: relative;
   overflow: hidden;
   width: 100%;
   min-height: 100%;
 }
-.keen-slider[data-keen-slider-v] {
-  flex-wrap: wrap;
+.keen-slider:not([data-keen-slider-disabled])[data-keen-slider-reverse] {
+  flex-direction: row-reverse;
 }
-.keen-slider[data-keen-slider-v] .keen-slider__slide {
-  width: 100%;
+.keen-slider:not([data-keen-slider-disabled])[data-keen-slider-v] {
+  flex-wrap: wrap;
 }
-.keen-slider[data-keen-slider-moves] * {
+.keen-slider:not([data-keen-slider-disabled])[data-keen-slider-moves] * {
   pointer-events: none;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "solid-slider",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "description": "A slider/carousel component for Solid powered by KeenSlider.",
   "author": "David Di Biase",
   "license": "ISC",
@@ -27,7 +27,7 @@
   },
   "keywords": [
     "slider",
-    "carouse",
+    "carousel",
     "solid",
     "keen",
     "slider",
@@ -37,12 +37,11 @@
     "gallery",
     "plugin"
   ],
-  "peerDependencies": {
-    "solid-js": "^1.0.7"
-  },
   "dependencies": {
-    "keen-slider": "^5.5.1",
-    "solid-js": "^1.1.7"
+    "keen-slider": "^6.6.3",
+    "rimraf": "^3.0.2",
+    "solid-js": "^1.3.5",
+    "typescript": "^4.5.5"
   },
   "devDependencies": {
     "prettier": "^2.4.1"