pragmate-ui/swiper/swiper.browser.mjs

An advanced, on-demand React UI library optimized for BeyondJS. Pragmate UI provides modular, responsive, and accessible components with a focus on efficient bundle sizes and a streamlined development process.

import * as dependency_0 from '@beyond-js/kernel/bundle';
import * as dependency_1 from 'react';
import * as dependency_2 from 'pragmate-ui/icons';
import * as dependency_3 from 'swiper';
import * as dependency_4 from 'swiper/modules';
import * as dependency_5 from '@beyond-js/reactive/model';
import * as dependency_6 from '@beyond-js/kernel/styles';

const {Bundle: __Bundle} = dependency_0;
const __pkg = new __Bundle({"module":{"vspecifier":"pragmate-ui@1.0.1/swiper"},"type":"code"}, import.meta.url).package();;

__pkg.dependencies.update([['react', dependency_1],['pragmate-ui/icons', dependency_2],['swiper', dependency_3],['swiper/modules', dependency_4],['@beyond-js/reactive/model', dependency_5],['@beyond-js/kernel/styles', dependency_6]]);

brequire('@beyond-js/kernel/styles').styles.register('pragmate-ui@1.0.1/swiper')


const ims = new Map();

/***********************************
INTERNAL MODULE: ./components/footer
***********************************/

ims.set('./components/footer', {hash: 4152585320, creator: function (require, exports) {
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.SwiperFooter = SwiperFooter;
var _react = require("react");
function SwiperFooter(props) {
  const {
    footer,
    controller,
    refs
  } = props;
  if (!footer) return null;
  return _react.default.createElement(_react.default.Fragment, null, !controller?.swiper.isEnd && _react.default.createElement("button", {
    className: "swiper-button-prev",
    onClick: props.functionNext
  }, "SKIP"), _react.default.createElement("div", {
    ref: refs.pagination,
    className: "swiper-pagination"
  }), _react.default.createElement("button", {
    className: "swiper-button-next ",
    onClick: controller?.next
  }, "Next"));
}
}});

/***************************************
INTERNAL MODULE: ./components/navigation
***************************************/

ims.set('./components/navigation', {hash: 1445369557, creator: function (require, exports) {
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.SwiperNavigation = SwiperNavigation;
var _react = require("react");
var _icons = require("pragmate-ui/icons");
var _context = require("../context");
function SwiperNavigation() {
  const {
    controller,
    navigation,
    refs: {
      prev,
      next
    }
  } = (0, _context.useSwiperContext)();
  if (!navigation) return null;
  return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_icons.IconButton, {
    ref: prev,
    icon: 'left',
    variant: 'primary',
    className: 'swiper__navigation-btn swiper-button-prev',
    onClick: controller?.prevSlide
  }), _react.default.createElement(_icons.IconButton, {
    icon: 'right',
    ref: next,
    variant: 'primary',
    onClick: controller?.nextSlide,
    className: 'swiper__navigation-btn  swiper-button-next'
  }));
}
}});

/***************************************
INTERNAL MODULE: ./components/pagination
***************************************/

ims.set('./components/pagination', {hash: 1487697459, creator: function (require, exports) {
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Pagination = Pagination;
var _react = require("react");
var _context = require("../context");
function Pagination() {
  const {
    pagination,
    refs
  } = (0, _context.useSwiperContext)();
  if (!pagination) return null;
  return _react.default.createElement("div", {
    ref: refs.pagination,
    className: "swiper-pagination"
  });
}
}});

/*************************
INTERNAL MODULE: ./context
*************************/

ims.set('./context', {hash: 522084440, creator: function (require, exports) {
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useSwiperContext = exports.SwiperContext = void 0;
var _react = require("react");
const SwiperContext = exports.SwiperContext = _react.default.createContext({});
const useSwiperContext = () => _react.default.useContext(SwiperContext);
exports.useSwiperContext = useSwiperContext;
}});

/***********************
INTERNAL MODULE: ./index
***********************/

ims.set('./index', {hash: 4094575603, creator: function (require, exports) {
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.SwiperSlider = SwiperSlider;
var _react = require("react");
var _footer = require("./components/footer");
var _navigation = require("./components/navigation");
var _slide = require("./slide");
var _useSwiper = require("./use-swiper");
var _context = require("./context");
var _pagination = require("./components/pagination");
/*bundle*/function SwiperSlider(props) {
  const {
    pagination,
    footer,
    navigation,
    children
  } = props;
  const {
    refs,
    state
  } = (0, _useSwiper.useSwiperSlider)(props);
  const {
    controller
  } = state;
  const contextValue = {
    footer,
    pagination,
    controller,
    navigation,
    refs
  };
  const cls = `swiper-container swiper ${props.className ? `${props.className} pui-swiper-slider` : 'pui-swiper-slider'};`;
  return _react.default.createElement(_context.SwiperContext.Provider, {
    value: contextValue
  }, _react.default.createElement("div", {
    ref: refs.container,
    className: cls
  }, _react.default.createElement(_slide.SlideItems, {
    items: children
  }), _react.default.createElement(_pagination.Pagination, null), _react.default.createElement(_footer.SwiperFooter, null), _react.default.createElement(_navigation.SwiperNavigation, null)));
}
}});

/************************************
INTERNAL MODULE: ./interfaces/options
************************************/

ims.set('./interfaces/options', {hash: 1670442219, creator: function (require, exports) {
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
class Swiper {
  constructor(container, options) {
    // Swiper initialization code
  }
  // Swiper methods
  slideNext(speed, runCallbacks) {}
  slidePrev(speed, runCallbacks) {}
  slideTo(index, speed, runCallbacks) {}
  update() {}
  destroy(deleteInstance, cleanStyles) {}
}
}});

/*****************************************
INTERNAL MODULE: ./interfaces/swiper-props
*****************************************/

ims.set('./interfaces/swiper-props', {hash: 3138111793, creator: function (require, exports) {
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
}});

/*****************************
INTERNAL MODULE: ./slide/index
*****************************/

ims.set('./slide/index', {hash: 721733334, creator: function (require, exports) {
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.SlideItems = SlideItems;
var _react = require("react");
var _slide = require("./slide");
function SlideItems({
  items
}) {
  const slides = items.map((slide, index) => _react.default.createElement(_slide.Slide, {
    key: index
  }, slide));
  return _react.default.createElement("div", {
    className: "swiper-wrapper"
  }, slides);
}
}});

/*****************************
INTERNAL MODULE: ./slide/slide
*****************************/

ims.set('./slide/slide', {hash: 2855517027, creator: function (require, exports) {
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Slide = Slide;
var _react = require("react");
function Slide({
  children
}) {
  return _react.default.createElement("div", {
    className: "swiper-slide"
  }, children);
}
}});

/**********************************
INTERNAL MODULE: ./state/controller
**********************************/

ims.set('./state/controller', {hash: 3431124586, creator: function (require, exports) {
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Controller = void 0;
var Swiper = require("swiper");
var _modules = require("swiper/modules");
var _model = require("@beyond-js/reactive/model");
const SwiperCasted = Swiper.Swiper;
class Controller extends _model.ReactiveModel {
  #swiper;
  get swiper() {
    return this.#swiper;
  }
  #onEnd;
  #props;
  setSwiper = (element, props, ref) => {
    this.#props = props;
    let specs = {
      // slidesPerView: props.slidesPerView ?? 3,
      spaceBetween: props.spaceBetween ?? 10,
      modules: [_modules.Navigation, _modules.Pagination],
      ...props
    };
    Object.keys(specs).forEach(key => {
      if (['children'].includes(key)) delete specs[key];
    });
    if (!Swiper) {
      console.warn('Swiper keeps without been loaded');
      return;
    }
    if (props.pagination || props.footer) {
      specs.pagination = {
        el: ref.pagination.current,
        clickable: true,
        type: props.typePagination ?? 'bullets',
        dynamicBullets: props.dynamicBullets ?? false
      };
    }
    if (props.navigation) {
      specs.navigation = {
        nextEl: ref.next.current,
        prevEl: ref.prev.current
      };
    }
    this.#swiper = new SwiperCasted(element, specs);
    if (props.activeSlide) this.#swiper.slideTo(parseInt(props.activeSlide));
    const nextSlide = () => {
      if (this.#swiper) this.#swiper.slideNext();
    };
    const prevSlide = () => {
      if (this.#swiper) this.#swiper.slidePrev();
    };
    const slideTo = index => {
      if (this.#swiper) this.#swiper.slideTo(parseInt(index));
    };
    if (props.nextSlide && typeof props.nextSlide === 'function') props.nextSlide(nextSlide);
    if (props.prevSlide && typeof props.prevSlide === 'function') props.prevSlide(prevSlide);
    if (props.slideTo && typeof props.slideTo === 'function') props.slideTo(slideTo);
    this.#swiper.on('slideChange', () => {
      if (this.#swiper?.isEnd) {
        this.#onEnd = true;
        this.triggerEvent();
      } else {
        this.#onEnd = false;
        this.triggerEvent();
      }
    });
  };
  nextSlide = () => {
    if (!this.#swiper?.isEnd) {
      this.#swiper?.slideNext(500, false);
      return;
    }
    if (!this.#onEnd) return;
    if (this.#props.onNext) this.#props.onNext();else this.#swiper?.slideNext(500, false);
  };
  prevSlide = () => {
    if (!this.#swiper?.isEnd) {
      this.#swiper?.slidePrev(500, false);
      return;
    }
    if (this.#props.onPrev) this.#props.onPrev();else this.#swiper?.slidePrev(500, false);
  };
  next = () => {
    if (!this.#swiper?.isEnd) {
      this.#swiper?.slideNext(500, false);
      return;
    }
    if (!this.#onEnd) return;
    this.#props.functionNext();
  };
}
exports.Controller = Controller;
}});

/*********************************
INTERNAL MODULE: ./state/interface
*********************************/

ims.set('./state/interface', {hash: 3704574833, creator: function (require, exports) {
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
}});

/****************************
INTERNAL MODULE: ./use-swiper
****************************/

ims.set('./use-swiper', {hash: 2195260495, creator: function (require, exports) {
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useSwiperSlider = void 0;
var _react = require("react");
var _controller = require("./state/controller");
const useSwiperSlider = props => {
  /* const { props } = useSwiperContext(); */
  const refs = {
    next: _react.default.useRef(),
    container: _react.default.useRef(),
    pagination: _react.default.useRef(),
    prev: _react.default.useRef()
  };
  const {
    slideTo
  } = props;
  const {
    container,
    prev
  } = refs;
  const [state, setState] = _react.default.useState({});
  _react.default.useEffect(() => {
    const controller = new _controller.Controller();
    const onChange = () => setState({
      ...state,
      ready: true,
      swiper: controller.swiper,
      controller,
      lastIndex: controller.lastIndex
    });
    controller.on('change', onChange);
    if (!controller.destroyed) controller.setSwiper(container.current, props, refs);
    onChange();
    return () => controller.off('change', onChange);
  }, []);
  _react.default.useEffect(() => {
    if (!state.swiper || !slideTo) return;
    state.swiper.slideTo(slideTo);
  }, [slideTo]);
  return {
    refs,
    state,
    prev,
    container
  };
};
exports.useSwiperSlider = useSwiperSlider;
}});

__pkg.exports.descriptor = [{"im":"./index","from":"SwiperSlider","name":"SwiperSlider"}];

export let SwiperSlider;

// Module exports
__pkg.exports.process = function({require, prop, value}) {
    (require || prop === 'SwiperSlider') && (SwiperSlider = require ? require('./index').SwiperSlider : value);

};
export const __beyond_pkg = __pkg;

export const hmr = new (function () {
    this.on = (event, listener) => void 0;
    this.off = (event, listener) => void 0;
});


__pkg.initialise(ims);
//# sourceMappingURL=swiper.browser.mjs.map