xdesign-vue-next/cjs/swiper/swiper.js

XDesign Component for vue-next

/**
 * xdesign v1.0.6
 * (c) 2023 xdesign
 * @license MIT
 */

'use strict';

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

var arrowRightSLine = require('../_chunks/dep-68b4181e.js');
var arrowLeftSLine = require('../_chunks/dep-3ac66be1.js');
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var vue = require('vue');
var hooks_useConfig = require('../hooks/useConfig.js');
var swiper_props = require('./props.js');
var swiper_swiperItem = require('./swiper-item.js');
var hooks_tnode = require('../hooks/tnode.js');
var hooks_slot = require('../hooks/slot.js');
require('../config-provider/useConfig.js');
require('lodash/isFunction');
require('lodash/cloneDeep');
require('lodash/isString');
require('../config-provider/context.js');
require('lodash/mergeWith');
require('lodash/merge');
require('../_common/js/global-config/default-config.js');
require('../_common/js/global-config/locale/en_US.js');
require('../_chunks/dep-8d10b59f.js');
require('lodash/isArray');
require('lodash/camelCase');
require('lodash/kebabCase');
require('../utils/render-tnode.js');
require('lodash/isEmpty');
require('lodash/isObject');
require('@babel/runtime/helpers/typeof');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);

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 _objectSpread(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__default["default"](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 _isSlot(s) {
  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
}
var defaultNavigation = {
  placement: "inside",
  showSlideBtn: "always",
  size: "medium",
  type: "bars"
};
var _Swiper = vue.defineComponent({
  name: "XSwiper",
  props: _objectSpread({}, swiper_props["default"]),
  emits: ["update:current"],
  setup: function setup(props2, _ref) {
    var emit = _ref.emit;
    var prefix = hooks_useConfig.usePrefixClass();
    var renderTNodeJSX = hooks_tnode.useTNodeJSX();
    var swiperTimer = null;
    var swiperSwitchingTimer = 0;
    var isBeginToEnd = false;
    var isEndToBegin = false;
    var currentIndex = vue.ref(props2.current || props2.defaultCurrent);
    var navActiveIndex = vue.ref(props2.current || props2.defaultCurrent);
    var isHovering = vue.ref(false);
    var isSwitching = vue.ref(false);
    var showArrow = vue.ref(false);
    var swiperWrap = vue.ref();
    var getChildComponentByName = hooks_slot.useChildComponentSlots();
    var swiperItemLength = vue.ref(0);
    var navigationConfig = vue.computed(function () {
      return _objectSpread(_objectSpread({}, defaultNavigation), vue.isVNode(props2.navigation) ? {} : props2.navigation);
    });
    var isEnd = vue.computed(function () {
      if (props2.type === "card") {
        return !props2.loop && currentIndex.value + 1 >= swiperItemLength.value;
      }
      return !props2.loop && currentIndex.value + 2 >= swiperItemLength.value;
    });
    var propsToUpdateSetTimer = vue.computed(function () {
      return [props2.autoplay, currentIndex.value, props2.duration, props2.interval];
    });
    var swiperWrapClass = vue.computed(function () {
      var _ref2;
      return _ref2 = {}, _defineProperty__default["default"](_ref2, "".concat(prefix.value, "-swiper__wrap"), true), _defineProperty__default["default"](_ref2, "".concat(prefix.value, "-swiper--inside"), navigationConfig.value.placement === "inside"), _defineProperty__default["default"](_ref2, "".concat(prefix.value, "-swiper--outside"), navigationConfig.value.placement === "outside"), _defineProperty__default["default"](_ref2, "".concat(prefix.value, "-swiper--vertical"), props2.direction === "vertical"), _defineProperty__default["default"](_ref2, "".concat(prefix.value, "-swiper--large"), navigationConfig.value.size === "large"), _defineProperty__default["default"](_ref2, "".concat(prefix.value, "-swiper--small"), navigationConfig.value.size === "small"), _ref2;
    });
    var containerStyle = vue.computed(function () {
      var offsetHeight = props2.height ? "".concat(props2.height, "px") : "".concat(getWrapAttribute("offsetHeight"), "px");
      if (props2.type === "card" || props2.animation === "fade") {
        return {
          height: offsetHeight
        };
      }
      if (props2.animation === "slide") {
        var style = {
          transition: isSwitching.value ? "transform ".concat(props2.duration / 1e3, "s ease") : ""
        };
        var active = currentIndex.value;
        if (swiperItemLength.value > 1) {
          active += 1;
          if (isBeginToEnd || isEndToBegin) {
            style.transition = "";
          }
        }
        if (props2.direction === "vertical") {
          style.height = offsetHeight;
          style.transform = "translate3d(0, -".concat(active * 100, "%, 0px)");
        } else {
          style.transform = "translate3d(-".concat(active * 100, "%, 0px, 0px)");
        }
        ["msTransform", "WebkitTransform"].forEach(function (key) {
          style[key] = style.transform;
        });
        return style;
      }
      return {};
    });
    var swiperItems = function swiperItems() {
      var swiperItemList = getChildComponentByName("SwiperItem");
      swiperItemLength.value = swiperItemList.length;
      var items = swiperItemList.map(function (swiperItem, index) {
        var _slot;
        var p = _objectSpread(_objectSpread({}, props2), swiperItem.props);
        return vue.createVNode(swiper_swiperItem["default"], vue.mergeProps({
          "index": index,
          "currentIndex": currentIndex.value,
          "isSwitching": isSwitching.value,
          "getWrapAttribute": getWrapAttribute,
          "swiperItemLength": swiperItemLength.value
        }, p), _isSlot(_slot = swiperItem.children["default"]()) ? _slot : {
          "default": function _default() {
            return [_slot];
          }
        });
      });
      if (props2.animation === "slide" && items.length > 1) {
        var first = vue.cloneVNode(items[0], {
          key: "swiper-item-append-".concat(0)
        });
        var last = vue.cloneVNode(items[items.length - 1], {
          key: "swiper-item-prepend-".concat(items.length - 1)
        });
        items.unshift(last);
        items.push(first);
      }
      return items;
    };
    var swiperTo = function swiperTo(index, context) {
      var _props2$onChange;
      var targetIndex = index % swiperItemLength.value;
      navActiveIndex.value = targetIndex;
      emit("update:current", targetIndex);
      (_props2$onChange = props2.onChange) === null || _props2$onChange === void 0 ? void 0 : _props2$onChange.call(props2, targetIndex, context);
      isSwitching.value = true;
      if (props2.animation === "slide" && swiperItemLength.value > 1 && props2.type !== "card") {
        targetIndex = index;
        isBeginToEnd = false;
        isEndToBegin = false;
        if (index >= swiperItemLength.value) {
          clearTimer();
          setTimeout(function () {
            isEndToBegin = true;
            currentIndex.value = 0;
          }, props2.duration);
        }
        if (currentIndex.value === 0) {
          if (swiperItemLength.value > 2 && index === swiperItemLength.value - 1 || swiperItemLength.value === 2 && index === 0) {
            targetIndex = -1;
            navActiveIndex.value = swiperItemLength.value - 1;
            clearTimer();
            setTimeout(function () {
              isBeginToEnd = true;
              currentIndex.value = swiperItemLength.value - 1;
            }, props2.duration);
          }
        }
      }
      currentIndex.value = targetIndex;
    };
    var clearTimer = function clearTimer() {
      if (swiperTimer) {
        clearTimeout(swiperTimer);
        swiperTimer = null;
      }
    };
    var setTimer = function setTimer() {
      if (props2.autoplay && props2.interval > 0) {
        clearTimer();
        swiperTimer = setTimeout(function () {
          swiperTo(currentIndex.value + 1, {
            source: "autoplay"
          });
        }, currentIndex.value === 0 ? props2.interval - (props2.duration + 50) : props2.interval);
      }
    };
    var onMouseEnter = function onMouseEnter() {
      isHovering.value = true;
      if (props2.stopOnHover) {
        clearTimer();
      }
      if (navigationConfig.value.showSlideBtn === "hover") {
        showArrow.value = true;
      }
    };
    var onMouseLeave = function onMouseLeave() {
      isHovering.value = false;
      if (!isEnd.value) {
        setTimer();
      }
      if (navigationConfig.value.showSlideBtn === "hover") {
        showArrow.value = false;
      }
    };
    var onMouseEnterNavigationItem = function onMouseEnterNavigationItem(i) {
      if (props2.trigger === "hover") {
        swiperTo(i, {
          source: "hover"
        });
      }
    };
    var onClickNavigationItem = function onClickNavigationItem(i) {
      if (props2.trigger === "click") {
        swiperTo(i, {
          source: "click"
        });
      }
    };
    var goNext = function goNext(context) {
      if (isSwitching.value) return;
      if (props2.type === "card") {
        return swiperTo(currentIndex.value + 1 >= swiperItemLength.value ? 0 : currentIndex.value + 1, context);
      }
      return swiperTo(currentIndex.value + 1, context);
    };
    var goPrevious = function goPrevious(context) {
      if (isSwitching.value) return;
      if (currentIndex.value - 1 < 0) {
        if (props2.animation === "slide" && swiperItemLength.value === 2) {
          return swiperTo(0, context);
        }
        return swiperTo(swiperItemLength.value - 1, context);
      }
      return swiperTo(currentIndex.value - 1, context);
    };
    var getWrapAttribute = function getWrapAttribute(attr) {
      var _swiperWrap$value;
      return (_swiperWrap$value = swiperWrap.value) === null || _swiperWrap$value === void 0 || (_swiperWrap$value = _swiperWrap$value.parentNode) === null || _swiperWrap$value === void 0 ? void 0 : _swiperWrap$value[attr];
    };
    var renderPagination = function renderPagination() {
      var fractionIndex = currentIndex.value + 1 > swiperItemLength.value ? 1 : currentIndex.value + 1;
      return vue.createVNode("div", {
        "class": "".concat(prefix.value, "-swiper__arrow")
      }, [vue.createVNode("div", {
        "class": "".concat(prefix.value, "-swiper__arrow-left"),
        "onClick": function onClick() {
          return goPrevious({
            source: "click"
          });
        }
      }, [vue.createVNode(arrowLeftSLine.__unplugin_components_2, null, null)]), vue.createVNode("div", {
        "class": "".concat(prefix.value, "-swiper__navigation-text-fraction")
      }, [fractionIndex, "/", swiperItemLength.value]), vue.createVNode("div", {
        "class": "".concat(prefix.value, "-swiper__arrow-right"),
        "onClick": function onClick() {
          return goNext({
            source: "click"
          });
        }
      }, [vue.createVNode(arrowRightSLine.__unplugin_components_3, null, null)])]);
    };
    var renderArrow = function renderArrow() {
      if (!showArrow.value) return null;
      return vue.createVNode("div", {
        "class": ["".concat(prefix.value, "-swiper__arrow"), "".concat(prefix.value, "-swiper__arrow--default")]
      }, [vue.createVNode("div", {
        "class": "".concat(prefix.value, "-swiper__arrow-left"),
        "onClick": function onClick() {
          return goPrevious({
            source: "click"
          });
        }
      }, [vue.createVNode(arrowLeftSLine.__unplugin_components_2, null, null)]), vue.createVNode("div", {
        "class": "".concat(prefix.value, "-swiper__arrow-right"),
        "onClick": function onClick() {
          return goNext({
            source: "click"
          });
        }
      }, [vue.createVNode(arrowRightSLine.__unplugin_components_3, null, null)])]);
    };
    var renderNavigation = function renderNavigation() {
      var _ref3;
      if (vue.isVNode(props2.navigation)) return props2.navigation;
      var navigationSlot = renderTNodeJSX("navigation");
      if (navigationSlot && vue.isVNode(navigationSlot === null || navigationSlot === void 0 ? void 0 : navigationSlot[0])) return navigationSlot;
      if (navigationConfig.value.type === "fraction") {
        return vue.createVNode("div", {
          "class": ["".concat(prefix.value, "-swiper__navigation"), "".concat(prefix.value, "-swiper__navigation--fraction")]
        }, [renderPagination()]);
      }
      var swiperItemList = getChildComponentByName("SwiperItem");
      return vue.createVNode("ul", {
        "class": ["".concat(prefix.value, "-swiper__navigation"), (_ref3 = {}, _defineProperty__default["default"](_ref3, "".concat(prefix.value, "-swiper__navigation-bars"), navigationConfig.value.type === "bars"), _defineProperty__default["default"](_ref3, "".concat(prefix.value, "-swiper__navigation-dots"), navigationConfig.value.type === "dots"), _defineProperty__default["default"](_ref3, "".concat(prefix.value, "-swiper__navigation-dots-bar"), navigationConfig.value.type === "dots-bar"), _ref3)]
      }, [swiperItemList.map(function (_, i) {
        return vue.createVNode("li", {
          "key": i,
          "class": ["".concat(prefix.value, "-swiper__navigation-item"), _defineProperty__default["default"]({}, "".concat(prefix.value, "-is-active"), i === navActiveIndex.value)],
          "onMouseenter": function onMouseenter() {
            return onMouseEnterNavigationItem(i);
          },
          "onClick": function onClick() {
            return onClickNavigationItem(i);
          }
        }, [vue.createVNode("span", null, null)]);
      })]);
    };
    var renderSwiperItems = function renderSwiperItems() {
      return swiperItems();
    };
    vue.watch(function () {
      return propsToUpdateSetTimer.value;
    }, function () {
      setTimer();
    });
    vue.watch(function () {
      return isSwitching.value;
    }, function () {
      if (isSwitching.value) {
        if (swiperSwitchingTimer) clearTimeout(swiperSwitchingTimer);
        swiperSwitchingTimer = setTimeout(function () {
          isSwitching.value = false;
          swiperSwitchingTimer = 0;
          if (isEnd.value) {
            clearTimer();
          }
        }, props2.duration + 50);
      }
    });
    vue.watch(function () {
      return props2.current;
    }, function () {
      swiperTo(props2.current, {
        source: "autoplay"
      });
    });
    vue.onMounted(function () {
      setTimer();
      showArrow.value = navigationConfig.value.showSlideBtn === "always";
    });
    return function () {
      var _ref5;
      return vue.createVNode("div", {
        "class": ["".concat(prefix.value, "-swiper")],
        "onMouseenter": onMouseEnter,
        "onMouseleave": onMouseLeave,
        "ref": swiperWrap
      }, [vue.createVNode("div", {
        "class": swiperWrapClass.value
      }, [vue.createVNode("div", {
        "class": ["".concat(prefix.value, "-swiper__content"), (_ref5 = {}, _defineProperty__default["default"](_ref5, "".concat(prefix.value, "-swiper-fade"), props2.animation === "fade"), _defineProperty__default["default"](_ref5, "".concat(prefix.value, "-swiper-card"), props2.type === "card"), _ref5)]
      }, [vue.createVNode("div", {
        "class": "".concat(prefix.value, "-swiper__container"),
        "style": containerStyle.value
      }, [renderSwiperItems()])]), renderNavigation(), renderArrow()])]);
    };
  }
});

exports["default"] = _Swiper;
//# sourceMappingURL=swiper.js.map