solid-slider 1.3.19 → 1.3.21

package/dist/index/index.module.js

@@ -1,115 +1,21 @@
-import { createSignal, onMount, onCleanup, createEffect, on, createContext, useContext } from 'solid-js';
+import { createSignal, onMount, onCleanup, createEffect, on, createContext, useContext, createMemo, Show, Index } from 'solid-js';
 import { access } from '@solid-primitives/utils';
 import KeenSlider from 'keen-slider';
-import { createComponent, isServer, insert, effect, classList, delegateEvents, template } from 'solid-js/web';
-
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    enumerableOnly && (symbols = symbols.filter(function (sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    })), keys.push.apply(keys, symbols);
-  }
-  return keys;
-}
-function _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = null != arguments[i] ? arguments[i] : {};
-    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
-      _defineProperty(target, key, source[key]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
-      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-    });
-  }
-  return target;
-}
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-}
-function _toConsumableArray(arr) {
-  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
-}
-function _arrayWithoutHoles(arr) {
-  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
-}
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-function _iterableToArray(iter) {
-  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
-}
-function _iterableToArrayLimit(arr, i) {
-  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-  if (_i == null) return;
-  var _arr = [];
-  var _n = true;
-  var _d = false;
-  var _s, _e;
-  try {
-    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
-      _arr.push(_s.value);
-      if (i && _arr.length === i) break;
-    }
-  } catch (err) {
-    _d = true;
-    _e = err;
-  } finally {
-    try {
-      if (!_n && _i["return"] != null) _i["return"]();
-    } finally {
-      if (_d) throw _e;
-    }
-  }
-  return _arr;
-}
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-  return arr2;
-}
-function _nonIterableSpread() {
-  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
+import { createComponent, isServer, template, insert, use, effect, className, classList, setAttribute, delegateEvents } from 'solid-js/web';
 
 /**
  * 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
+ * @param options - Values to initialize the slider with
+ * @param plugins - Extensions that enhance KeenSlider options
+ * @returns Returns mount and helper methods
+ * @returns create - Mounts the slider on provided element
+ * @returns helpers.current - Current slide number
+ * @returns helpers.next - Function to trigger the next slide
+ * @returns helpers.prev - Function to trigger the previous slide
+ * @returns helpers.details - Provides details about the current slider
+ * @returns helpers.slider - Returns the KeenSlider instance
+ * @returns helpers.destroy - Manual destroy function
  *
  * @example
  * ```ts
@@ -117,82 +23,55 @@ function _nonIterableRest() {
  * <div use:slider>...</div>
  * ```
  */
-var createSlider = function createSlider(options) {
-  var _opts;
-  for (var _len = arguments.length, plugins = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-    plugins[_key - 1] = arguments[_key];
-  }
-  var _slider3;
-  var el;
-  var opts = function opts() {
-    return access(options);
-  };
-  var _createSignal = createSignal(((_opts = opts()) === null || _opts === void 0 ? void 0 : _opts.initial) || 0),
-    _createSignal2 = _slicedToArray(_createSignal, 2),
-    current = _createSignal2[0],
-    setCurrent = _createSignal2[1];
-  var destroy = function destroy() {
-    return _slider3 && _slider3.destroy();
-  };
-  var getOptions = function getOptions() {
-    var overrides = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    return _objectSpread2(_objectSpread2({
-      selector: el.childNodes
-    }, opts()), overrides);
-  };
-  var update = function update() {
-    var _slider;
-    return (_slider = _slider3) === null || _slider === void 0 ? void 0 : _slider.update(getOptions());
+const createSlider = (options, ...plugins) => {
+  let slider;
+  let el;
+  const opts = () => access(options);
+  const [current, setCurrent] = createSignal(opts()?.initial || 0);
+  const destroy = () => slider && slider.destroy();
+  const getOptions = (overrides = {}) => {
+    const baseOpts = opts();
+    return {
+      selector: el.childNodes,
+      ...(baseOpts || {}),
+      ...overrides
+    };
   };
+  const update = () => slider?.update(getOptions());
   // Slider creation method and directive function
-  var create = function create(newEl) {
+  const create = newEl => {
     el = newEl;
     el.classList.add("keen-slider");
-    onMount(function () {
-      _slider3 = new KeenSlider(el, getOptions(), plugins);
-      _slider3.on("slideChanged", function () {
-        return setCurrent(_slider3.track.details.rel);
-      });
+    onMount(() => {
+      slider = new KeenSlider(el, getOptions(), plugins);
+      slider.on("slideChanged", () => setCurrent(slider.track.details.rel));
     });
     onCleanup(destroy);
     if (typeof options === "function") {
-      createEffect(on(function () {
-        return options;
-      }, update));
+      createEffect(on(() => options, update));
     }
   };
-  var moveTo = function moveTo(id) {
-    var _slider2;
-    var duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 250;
-    var absolute = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-    var easing = arguments.length > 3 ? arguments[3] : undefined;
-    (_slider2 = _slider3) === null || _slider2 === void 0 ? void 0 : _slider2.moveToIdx(id, absolute, {
-      duration: duration,
+  const moveTo = (id, duration = 250, absolute = false, easing) => {
+    slider?.moveToIdx(id, absolute, {
+      duration,
       easing: easing
     });
   };
   return [create, {
-    current: current,
-    next: function next() {
-      return _slider3 && _slider3.next();
-    },
-    prev: function prev() {
-      return _slider3 && _slider3.prev();
-    },
-    details: function details() {
-      return _slider3 ? _slider3.track.details : {};
-    },
-    slider: function slider() {
-      return _slider3;
-    },
-    moveTo: moveTo,
-    destroy: destroy,
-    update: update
+    current,
+    next: () => slider && slider.next(),
+    prev: () => slider && slider.prev(),
+    details: () => slider ? slider.track.details : {},
+    slider: () => slider,
+    moveTo,
+    destroy,
+    update
   }];
 };
 
-const _tmpl$ = /*#__PURE__*/template(`<div class="keen-slider"></div>`, 2),
-  _tmpl$2 = /*#__PURE__*/template(`<button></button>`, 2);
+const _tmpl$ = /*#__PURE__*/template(`<div class="keen-slider">`),
+  _tmpl$2 = /*#__PURE__*/template(`<button>`),
+  _tmpl$3 = /*#__PURE__*/template(`<div>`);
 
 // The following is a hacky way of extracting SliderHelpers
 
@@ -200,97 +79,74 @@ function returnType(func) {
   return {};
 }
 // Main context for the slider
-var SliderContext = createContext(createSignal(null));
+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.
+ * @param props.options - Accepts all KeenSlider options.
+ * @param props.plugins - A list of Solid Slider or Keen slider plugins.
  */
-var SliderProvider = function SliderProvider(props) {
-  return createComponent(SliderContext.Provider, {
-    get value() {
-      return createSignal(null);
-    },
-    get children() {
-      return props.children;
-    }
-  });
-};
+const SliderProvider = props => createComponent(SliderContext.Provider, {
+  get value() {
+    return 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.
+ * @param props.options - Accepts all KeenSlider options.
+ * @param props.plugins - A list of Solid Slider or Keen slider plugins.
  */
-var Slider = function Slider(props) {
-  if (isServer) return function () {
-    var _el$ = _tmpl$.cloneNode(true);
-    insert(_el$, function () {
-      return props.children;
-    });
+const Slider = props => {
+  if (isServer) return (() => {
+    const _el$ = _tmpl$();
+    insert(_el$, () => props.children);
     return _el$;
-  }();
-  var _useContext = useContext(SliderContext),
-    _useContext2 = _slicedToArray(_useContext, 2),
-    setHelpers = _useContext2[1];
-  var _createSlider = createSlider.apply(void 0, [props.options || {}].concat(_toConsumableArray(props.plugins || []))),
-    _createSlider2 = _slicedToArray(_createSlider, 2),
-    slider = _createSlider2[0],
-    helpers = _createSlider2[1];
+  })();
+  const [, setHelpers] = useContext(SliderContext);
+  const [slider, helpers] = createSlider(props.options || {}, ...(props.plugins || []));
   setHelpers(helpers);
-  createEffect(on(function () {
-    return access(props.children);
-  }, function () {
-    return queueMicrotask(function () {
-      return helpers.update();
-    });
-  }, {
+  createEffect(on(() => access(props.children), () => queueMicrotask(() => helpers.update()), {
     defer: true
   }));
-  return function () {
-    var _el$2 = _tmpl$.cloneNode(true);
-    slider(_el$2, function () {
-      return true;
-    });
-    insert(_el$2, function () {
-      return props.children;
-    });
+  return (() => {
+    const _el$2 = _tmpl$();
+    use(slider, _el$2, () => true);
+    insert(_el$2, () => props.children);
     return _el$2;
-  }();
+  })();
 };
 
 /**
  * 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.
+ * @param props.next - Specify if this should be a next button.
+ * @param props.prev - Specify if this should be a prev button.
+ * @param props.class - Class to override the button.
+ * @param props.classList - List of classes to override the button.
  */
-var SliderButton = function SliderButton(props) {
-  var context = useContext(SliderContext);
-  var changeSlide = function changeSlide() {
-    var _helpers, _helpers2;
+const SliderButton = props => {
+  const context = useContext(SliderContext);
+  const changeSlide = () => {
     if (context == null) return;
-    var _context = _slicedToArray(context, 1),
-      helpers = _context[0];
-    props.next ? (_helpers = helpers()) === null || _helpers === void 0 ? void 0 : _helpers.next() : (_helpers2 = helpers()) === null || _helpers2 === void 0 ? void 0 : _helpers2.prev();
+    const [helpers] = context;
+    props.next ? helpers()?.next() : helpers()?.prev();
   };
-  return function () {
-    var _el$3 = _tmpl$2.cloneNode(true);
+  return (() => {
+    const _el$3 = _tmpl$2();
     _el$3.$$click = changeSlide;
-    insert(_el$3, function () {
-      return props.children;
-    });
-    effect(function (_p$) {
-      var _v$ = props.disabled || false,
-        _v$2 = props["class"],
+    insert(_el$3, () => props.children);
+    effect(_p$ => {
+      const _v$ = props.disabled || false,
+        _v$2 = props.class,
         _v$3 = props.classList;
       _v$ !== _p$._v$ && (_el$3.disabled = _p$._v$ = _v$);
-      _v$2 !== _p$._v$2 && (_el$3.className = _p$._v$2 = _v$2);
+      _v$2 !== _p$._v$2 && className(_el$3, _p$._v$2 = _v$2);
       _p$._v$3 = classList(_el$3, _v$3, _p$._v$3);
       return _p$;
     }, {
@@ -299,9 +155,212 @@ var SliderButton = function SliderButton(props) {
       _v$3: undefined
     });
     return _el$3;
-  }();
+  })();
+};
+
+/**
+ * Navigation dots component for the slider.
+ * Displays a dot for each slide and highlights the current slide.
+ *
+ * @param props.class - Class to override the dots container.
+ * @param props.classList - List of classes to override the dots container.
+ * @param props.dotClass - Class to override individual dots.
+ * @param props.dotClassList - List of classes to override individual dots.
+ *
+ * @example
+ * ```tsx
+ * <SliderProvider>
+ *   <Slider>
+ *     <div class="keen-slider__slide">Slide 1</div>
+ *     <div class="keen-slider__slide">Slide 2</div>
+ *   </Slider>
+ *   <SliderDots />
+ * </SliderProvider>
+ * ```
+ */
+const SliderDots = props => {
+  const context = useContext(SliderContext);
+  const [slideCount, setSlideCount] = createSignal(0);
+  const handleDotClick = idx => {
+    if (context == null) return;
+    const [helpers] = context;
+    helpers()?.moveTo(idx);
+  };
+
+  // Update slide count when slider is created/updated
+  createEffect(() => {
+    if (!context) return;
+    const [helpers] = context;
+    const sliderInstance = helpers()?.slider();
+    if (sliderInstance) {
+      const updateCount = () => {
+        const details = helpers()?.details();
+        setSlideCount(details?.slides?.length || 0);
+      };
+
+      // Set initial count
+      updateCount();
+
+      // Listen for slider changes
+      sliderInstance.on("created", updateCount);
+      sliderInstance.on("updated", updateCount);
+    }
+  });
+  const slides = createMemo(() => Array.from({
+    length: slideCount()
+  }, (_, i) => i));
+  return createComponent(Show, {
+    when: context != null,
+    get children() {
+      const _el$4 = _tmpl$3();
+      insert(_el$4, createComponent(Index, {
+        get each() {
+          return slides();
+        },
+        children: idx => {
+          const [helpers] = context;
+          const isActive = () => helpers()?.current() === idx();
+          return (() => {
+            const _el$5 = _tmpl$2();
+            _el$5.$$click = () => handleDotClick(idx());
+            effect(_p$ => {
+              const _v$6 = props.dotClass || "keen-slider-dot",
+                _v$7 = {
+                  ...props.dotClassList,
+                  active: isActive()
+                },
+                _v$8 = `Go to slide ${idx() + 1}`;
+              _v$6 !== _p$._v$6 && className(_el$5, _p$._v$6 = _v$6);
+              _p$._v$7 = classList(_el$5, _v$7, _p$._v$7);
+              _v$8 !== _p$._v$8 && setAttribute(_el$5, "aria-label", _p$._v$8 = _v$8);
+              return _p$;
+            }, {
+              _v$6: undefined,
+              _v$7: undefined,
+              _v$8: undefined
+            });
+            return _el$5;
+          })();
+        }
+      }));
+      effect(_p$ => {
+        const _v$4 = props.class || "keen-slider-dots",
+          _v$5 = props.classList;
+        _v$4 !== _p$._v$4 && className(_el$4, _p$._v$4 = _v$4);
+        _p$._v$5 = classList(_el$4, _v$5, _p$._v$5);
+        return _p$;
+      }, {
+        _v$4: undefined,
+        _v$5: undefined
+      });
+      return _el$4;
+    }
+  });
+};
+
+/**
+ * Thumbnail navigation component for the slider.
+ * A second Slider that synchronizes with the main slider.
+ * User provides thumbnail slides as children.
+ *
+ * @param props.options - Options for the thumbnail slider.
+ * @param props.plugins - Plugins for the thumbnail slider.
+ *
+ * @example
+ * ```tsx
+ * <SliderProvider>
+ *   <Slider options={{ loop: true }}>
+ *     <div class="keen-slider__slide">
+ *       <img src="slide1.jpg" alt="Slide 1" />
+ *     </div>
+ *     <div class="keen-slider__slide">
+ *       <img src="slide2.jpg" alt="Slide 2" />
+ *     </div>
+ *   </Slider>
+ *   <SliderThumbnails options={{ slides: { perView: 4, spacing: 10 } }}>
+ *     <div class="keen-slider__slide">
+ *       <img src="thumb1.jpg" alt="Thumbnail 1" />
+ *     </div>
+ *     <div class="keen-slider__slide">
+ *       <img src="thumb2.jpg" alt="Thumbnail 2" />
+ *     </div>
+ *   </SliderThumbnails>
+ * </SliderProvider>
+ * ```
+ */
+const SliderThumbnails = props => {
+  if (isServer) return (() => {
+    const _el$6 = _tmpl$3();
+    insert(_el$6, () => props.children);
+    return _el$6;
+  })();
+  const mainContext = useContext(SliderContext);
+  if (!mainContext) {
+    console.warn("SliderThumbnails must be used within a SliderProvider");
+    return (() => {
+      const _el$7 = _tmpl$3();
+      insert(_el$7, () => props.children);
+      return _el$7;
+    })();
+  }
+  const [mainHelpers] = mainContext;
+
+  // Create thumbnail slider with user options
+  const [thumbSlider, thumbHelpers] = createSlider(props.options || {}, ...(props.plugins || []));
+
+  // Update on children change (same as main Slider)
+  createEffect(on(() => access(props.children), () => queueMicrotask(() => thumbHelpers.update()), {
+    defer: true
+  }));
+
+  // Sync thumbnail slider with main slider
+  onMount(() => {
+    // Wait for next tick to ensure both sliders are mounted
+    queueMicrotask(() => {
+      const mainSliderInstance = mainHelpers()?.slider();
+      const thumbSliderInstance = thumbHelpers.slider();
+      if (mainSliderInstance && thumbSliderInstance) {
+        // Function to update active thumbnail
+        const activeClassName = props.activeClass || "active";
+        const updateActiveThumbnail = () => {
+          const mainCurrent = mainHelpers()?.current();
+          if (mainCurrent !== undefined) {
+            // Remove active class from all thumbnails
+            thumbSliderInstance.slides.forEach(slide => {
+              slide.classList.remove(activeClassName);
+            });
+            // Add active class to current thumbnail
+            if (thumbSliderInstance.slides[mainCurrent]) {
+              thumbSliderInstance.slides[mainCurrent].classList.add(activeClassName);
+            }
+            // Move thumbnail slider to show active thumbnail
+            thumbHelpers.moveTo(mainCurrent);
+          }
+        };
+
+        // Listen to main slider changes
+        mainSliderInstance.on("slideChanged", updateActiveThumbnail);
+
+        // Set initial active state
+        updateActiveThumbnail();
+
+        // Add click handlers to thumbnails
+        thumbSliderInstance.slides.forEach((slide, idx) => {
+          slide.addEventListener("click", () => {
+            mainHelpers()?.moveTo(idx);
+          });
+        });
+      }
+    });
+  });
+  return (() => {
+    const _el$8 = _tmpl$3();
+    use(thumbSlider, _el$8, () => true);
+    insert(_el$8, () => props.children);
+    return _el$8;
+  })();
 };
 delegateEvents(["click"]);
 
-export { Slider, SliderButton, SliderContext, SliderProvider, createSlider, returnType };
+export { Slider, SliderButton, SliderContext, SliderDots, SliderProvider, SliderThumbnails, createSlider, returnType };
 //# sourceMappingURL=index.module.js.map