swipescroll/dist/index.vue.cjs.js

Touch & drag horizontal scroll for carousels on mobile, laptops and desktops

'use strict';

var vue = require('vue');
var carouselScroll_js = require('.src/core/carouselScroll.js');

// src/core/carouselScroll.js
function initCarouselScroll(container) {
  if (!container) return;
  function updateWidth() {
    console.log("Visible width:", container.clientWidth, "Total width:", container.scrollWidth);
  }
  updateWidth();
  window.addEventListener("resize", updateWidth);
  var touchStartX = 0;
  var scrollLeft = 0;

  // Solo manejamos touch
  var handleTouchStart = function handleTouchStart(e) {
    touchStartX = e.touches[0].pageX;
    scrollLeft = container.scrollLeft;
  };
  var handleTouchMove = function handleTouchMove(e) {
    var x = e.touches[0].pageX;
    var walk = (x - touchStartX) * 1.5;
    container.scrollLeft = scrollLeft - walk;
    e.preventDefault(); // evita scroll vertical del navegador
  };
  container.addEventListener("touchstart", handleTouchStart, {
    passive: false
  });
  container.addEventListener("touchmove", handleTouchMove, {
    passive: false
  });
  return function () {
    window.removeEventListener("resize", updateWidth);
    container.removeEventListener("touchstart", handleTouchStart);
    container.removeEventListener("touchmove", handleTouchMove);
  };
}

// src/hooks/vueHook.js

/**
 * Hook personalizado (composable) para habilitar scroll horizontal con arrastre
 * en un componente Vue 3.
 *
 * @param {import('vue').Ref<HTMLElement>} ref - Referencia al elemento del carrusel
 *
 * @example
 * const carouselRef = ref(null);
 * useVueCarouselScroll(carouselRef);
 *
 * return () => <div ref={carouselRef} class="carousel">...</div>;
 */
function useVueCarouselScroll(ref) {
  vue.onMounted(function () {
    var element = ref.value;
    if (!element) {
      console.warn("useVueCarouselScroll: la referencia no apunta a un elemento válido");
      return;
    }

    // Inicializa el scroll arrastrable
    carouselScroll_js.initCarouselScroll(element);
  });
}

exports.initCarouselScroll = initCarouselScroll;
exports.useVueCarouselScroll = useVueCarouselScroll;
//# sourceMappingURL=index.vue.cjs.js.map