comic-plus/lib/components/carousel/src/main.vue.js

<p align="center"> <img width="200px" src="./logo.png"/> </p>

"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
require("../style/carousel.css");
const type = require("./type.js");
require("../../../utils/config.js");
const typescript = require("../../../utils/typescript.js");
require("@vueuse/core");
const main_props = require("./main.props.js");
require("../../../icons/index.js");
const components = require("../../../icons/components/components.js");
const _hoisted_1 = {
  key: 1,
  class: "cu-carousel__indicator"
};
const _hoisted_2 = ["onClick"];
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  ...{
    name: "CuCarousel"
  },
  __name: "main",
  props: main_props.carouselProps,
  emits: main_props.carouselEmits,
  setup(__props, { expose: __expose, emit: __emit }) {
    const props = __props;
    const emit = __emit;
    const active = vue.ref(0);
    const flag = vue.ref(true);
    const interval = vue.ref(0);
    const itemKeyList = vue.ref([]);
    const transitionName = vue.computed(() => {
      if (props.mode === "transform") {
        return "transform_" + props.direction + "_" + (flag.value ? "nex" : "pre");
      }
      return props.mode;
    });
    function start() {
      stop();
      interval.value = setInterval(() => {
        changeActive(1);
      }, props.delay);
    }
    function stop() {
      clearInterval(interval.value);
      interval.value = 0;
    }
    function mouseenter() {
      if (!props.autoPlay) return false;
      props.pauseOnHover && stop();
    }
    function mouseleave() {
      if (!props.autoPlay) return false;
      start();
    }
    function changeActive(val) {
      flag.value = val >= 0;
      active.value += val;
      active.value = active.value >= itemKeyList.value.length ? 0 : active.value < 0 ? itemKeyList.value.length - 1 : active.value;
      emit("change", active.value);
    }
    function next() {
      changeActive(1);
    }
    function prev() {
      changeActive(-1);
    }
    function setActiveIndex(num) {
      num = num >= itemKeyList.value.length ? itemKeyList.value.length : num < 0 ? 0 : num;
      if (num == active.value) return;
      flag.value = num > active.value;
      active.value = num;
      emit("change", active.value);
    }
    function dotClick(dot) {
      let index = itemKeyList.value.findIndex((v) => v === dot);
      flag.value = index >= active.value;
      active.value = index;
      emit("change", active.value);
    }
    function addItem(uid) {
      itemKeyList.value.push(uid);
    }
    function removeItem(uid) {
      itemKeyList.value.splice(
        itemKeyList.value.findIndex((id) => id === uid),
        1
      );
    }
    const current = vue.computed(() => {
      return itemKeyList.value[active.value];
    });
    vue.provide(type.CAROUSEL_PROVIDE, {
      addItem,
      removeItem,
      current
    });
    __expose({
      next,
      prev,
      setActiveIndex
    });
    vue.onMounted(() => {
      if (typescript.isNumber(props.defaultIndex) && props.defaultIndex >= 0 && props.defaultIndex < itemKeyList.value.length) {
        active.value = props.defaultIndex || 0;
        emit("change", active.value);
      }
      props.autoPlay && start();
    });
    vue.onBeforeUnmount(() => {
      stop();
    });
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock("div", {
        class: vue.normalizeClass(["cu-carousel", [_ctx.direction ? "is-" + _ctx.direction : void 0, { "outside-indicator": _ctx.indicatorPosition === "outside" }]]),
        onMouseenter: mouseenter,
        onMouseleave: mouseleave
      }, [
        vue.createElementVNode("div", {
          class: "cu-carousel__container",
          style: vue.normalizeStyle({ height: _ctx.height })
        }, [
          vue.createVNode(vue.TransitionGroup, { name: transitionName.value }, {
            default: vue.withCtx(() => [
              vue.renderSlot(_ctx.$slots, "default")
            ]),
            _: 3
          }, 8, ["name"])
        ], 4),
        _ctx.arrow != "never" ? (vue.openBlock(), vue.createElementBlock("div", {
          key: 0,
          class: vue.normalizeClass(["cu-carousel__buttons", _ctx.arrow])
        }, [
          _ctx.direction === "horizontal" ? (vue.openBlock(), vue.createElementBlock("i", {
            key: 0,
            class: "left",
            onClick: _cache[0] || (_cache[0] = ($event) => changeActive(-1))
          }, [
            vue.createVNode(vue.unref(components.Left))
          ])) : vue.createCommentVNode("", true),
          _ctx.direction === "horizontal" ? (vue.openBlock(), vue.createElementBlock("i", {
            key: 1,
            class: "right",
            onClick: _cache[1] || (_cache[1] = ($event) => changeActive(1))
          }, [
            vue.createVNode(vue.unref(components.Right))
          ])) : vue.createCommentVNode("", true),
          _ctx.direction === "vertical" ? (vue.openBlock(), vue.createElementBlock("i", {
            key: 2,
            class: "top",
            onClick: _cache[2] || (_cache[2] = ($event) => changeActive(-1))
          }, [
            vue.createVNode(vue.unref(components.Up))
          ])) : vue.createCommentVNode("", true),
          _ctx.direction === "vertical" ? (vue.openBlock(), vue.createElementBlock("i", {
            key: 3,
            class: "bottom",
            onClick: _cache[3] || (_cache[3] = ($event) => changeActive(1))
          }, [
            vue.createVNode(vue.unref(components.Down))
          ])) : vue.createCommentVNode("", true)
        ], 2)) : vue.createCommentVNode("", true),
        _ctx.indicatorPosition !== "none" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(itemKeyList.value, (dot) => {
            return vue.openBlock(), vue.createElementBlock("span", {
              key: dot,
              onClick: ($event) => dotClick(dot),
              class: vue.normalizeClass({ active: current.value === dot })
            }, null, 10, _hoisted_2);
          }), 128))
        ])) : vue.createCommentVNode("", true)
      ], 34);
    };
  }
});
exports.default = _sfc_main;