tass-ui/lib/packages/components/carousel/src/carousel.vue.js

A high quality UI Toolkit built on Vue.js3+.

"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
require("../../../theme-chalk/src/carousel.scss.js");
const carouselItem_vue_vue_type_script_setup_true_lang = require("../../carousel-item/src/carousel-item.vue.js");
const _hoisted_1 = ["tas-anim", "tas-indicator", "tas-arrow"];
const _hoisted_2 = { "carousel-item": "" };
const _hoisted_3 = { class: "tas-carousel-ind" };
const _hoisted_4 = ["onClick"];
const __default__ = {
  name: "TassCarousel"
};
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  ...__default__,
  props: {
    width: { default: "100%" },
    height: { default: "280px" },
    modelValue: null,
    autoplay: { type: Boolean, default: true },
    arrow: { default: "hover" },
    anim: { default: "default" },
    indicator: { default: "inside" },
    pauseOnHover: { type: Boolean, default: true },
    interval: { default: 3e3 }
  },
  emits: ["update:modelValue", "change"],
  setup(__props, { emit }) {
    const props = __props;
    const slot = vue.useSlots();
    const slots = slot.default && slot.default();
    const active = vue.computed({
      get() {
        return props.modelValue;
      },
      set(val) {
        emit("update:modelValue", val);
      }
    });
    const anim = vue.computed(() => props.anim);
    const change = function(id) {
      emit("change", id);
      active.value = id;
    };
    const childrens = vue.ref([]);
    const slotsChange = vue.ref(true);
    const setItemInstanceBySlot = function(nodes) {
      const showNodes = nodes == null ? void 0 : nodes.filter((item) => {
        return item.children != "v-if";
      });
      showNodes == null ? void 0 : showNodes.map((item) => {
        let component = item.type;
        if (component.name != carouselItem_vue_vue_type_script_setup_true_lang.default.name) {
          setItemInstanceBySlot(item.children);
        } else {
          childrens.value.push(item);
        }
      });
    };
    vue.watch(
      slotsChange,
      () => {
        childrens.value = [];
        setItemInstanceBySlot(slot.default && slot.default());
      },
      { immediate: true, deep: true }
    );
    const sub = () => {
      var _a, _b, _c;
      for (var i = 0; i < childrens.value.length; i++) {
        if (((_a = childrens.value[i].props) == null ? void 0 : _a.id) === active.value) {
          if (i === 0) {
            active.value = (_b = childrens.value[slots.length - 1].props) == null ? void 0 : _b.id;
          } else {
            active.value = (_c = childrens.value[i - 1].props) == null ? void 0 : _c.id;
          }
          break;
        }
      }
    };
    const add = () => {
      var _a, _b, _c;
      for (var i = 0; i < childrens.value.length; i++) {
        if (((_a = childrens.value[i].props) == null ? void 0 : _a.id) === active.value) {
          if (i === childrens.value.length - 1) {
            active.value = (_b = childrens.value[0].props) == null ? void 0 : _b.id;
          } else {
            active.value = (_c = childrens.value[i + 1].props) == null ? void 0 : _c.id;
          }
          break;
        }
      }
    };
    const autoplay = () => {
      var _a, _b, _c;
      for (var i = 0; i < childrens.value.length; i++) {
        if (((_a = childrens.value[i].props) == null ? void 0 : _a.id) === active.value) {
          if (i === childrens.value.length - 1) {
            active.value = (_b = childrens.value[0].props) == null ? void 0 : _b.id;
          } else {
            active.value = (_c = childrens.value[i + 1].props) == null ? void 0 : _c.id;
          }
          break;
        }
      }
    };
    let intervalTimer = 0;
    const cleanIntervalTimer = () => {
      if (intervalTimer) {
        window.clearInterval(intervalTimer);
        intervalTimer = 0;
      }
    };
    const handleMouseEnter = () => {
      if (props.autoplay && props.pauseOnHover) {
        cleanIntervalTimer();
      }
    };
    const handleMouseLeave = () => {
      if (props.autoplay && props.pauseOnHover) {
        intervalTimer = window.setInterval(autoplay, props.interval);
      }
    };
    vue.watch(
      () => props.autoplay,
      () => {
        if (props.autoplay) {
          intervalTimer = window.setInterval(autoplay, props.interval);
        }
      },
      { immediate: true }
    );
    vue.provide("active", active);
    vue.provide("slotsChange", slotsChange);
    vue.provide("anim", anim);
    return (_ctx, _cache) => {
      const _component_tass_icon = vue.resolveComponent("tass-icon");
      return vue.openBlock(), vue.createElementBlock("div", {
        class: "tas-carousel",
        "tas-anim": vue.unref(anim),
        "tas-indicator": __props.indicator,
        "tas-arrow": __props.arrow,
        style: vue.normalizeStyle({ width: __props.width, height: __props.height }),
        onMouseenter: handleMouseEnter,
        onMouseleave: handleMouseLeave
      }, [
        vue.createElementVNode("div", _hoisted_2, [
          vue.renderSlot(_ctx.$slots, "default")
        ]),
        vue.createElementVNode("div", _hoisted_3, [
          vue.createElementVNode("ul", null, [
            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(childrens.value, (ss, index) => {
              var _a;
              return vue.openBlock(), vue.createElementBlock("li", {
                key: index,
                class: vue.normalizeClass([((_a = ss.props) == null ? void 0 : _a.id) === vue.unref(active) ? "tas-this" : ""]),
                onClick: vue.withModifiers(($event) => {
                  var _a2;
                  return change((_a2 = ss.props) == null ? void 0 : _a2.id);
                }, ["stop"])
              }, null, 10, _hoisted_4);
            }), 128))
          ])
        ]),
        vue.withDirectives(vue.createElementVNode("button", {
          class: "tas-icon tas-carousel-arrow",
          "tas-type": "sub",
          onClick: sub
        }, [
          vue.createVNode(_component_tass_icon, {
            style: { "position": "relative", "top": "-2px" },
            name: "chevronup"
          })
        ], 512), [
          [vue.vShow, vue.unref(anim) === "updown"]
        ]),
        vue.withDirectives(vue.createElementVNode("button", {
          class: "tas-icon tas-carousel-arrow",
          "tas-type": "sub",
          onClick: sub
        }, [
          vue.createVNode(_component_tass_icon, {
            style: { "position": "relative", "top": "-2px", "right": "0px" },
            name: "chevronleft"
          })
        ], 512), [
          [vue.vShow, vue.unref(anim) !== "updown"]
        ]),
        vue.withDirectives(vue.createElementVNode("button", {
          class: "tas-icon tas-carousel-arrow",
          "tas-type": "add",
          onClick: add
        }, [
          vue.createVNode(_component_tass_icon, {
            style: { "position": "relative", "top": "-2px" },
            name: "chevronright"
          })
        ], 512), [
          [vue.vShow, vue.unref(anim) !== "updown"]
        ]),
        vue.withDirectives(vue.createElementVNode("button", {
          class: "tas-icon tas-carousel-arrow",
          "tas-type": "add",
          onClick: add
        }, [
          vue.createVNode(_component_tass_icon, { name: "chevrondown" })
        ], 512), [
          [vue.vShow, vue.unref(anim) === "updown"]
        ])
      ], 44, _hoisted_1);
    };
  }
});
exports.default = _sfc_main;