@ctsy/layui-vue/es/carousel/index.js

a component library for Vue 3 base on layui-vue

var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
import { defineComponent, useSlots, computed, ref, watch, provide, openBlock, createElementBlock, normalizeStyle, createElementVNode, renderSlot, Fragment, renderList, normalizeClass, unref, withModifiers, toDisplayString } from "vue";
import _sfc_main$1 from "../carouselItem/index.js";
var index = "";
const _hoisted_1 = ["lay-anim", "lay-indicator", "lay-arrow"];
const _hoisted_2 = { "carousel-item": "" };
const _hoisted_3 = { class: "layui-carousel-ind" };
const _hoisted_4 = ["onClick"];
const __default__ = {
  name: "LayCarousel"
};
const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__), {
  props: {
    width: { default: "100%" },
    height: { default: "280px" },
    modelValue: null,
    anim: { default: "default" },
    autoplay: { type: Boolean, default: true },
    arrow: { default: "hover" },
    interval: { default: 3e3 },
    indicator: { default: "inside" }
  },
  emits: ["update:modelValue", "change"],
  setup(__props, { emit }) {
    const props = __props;
    const slot = useSlots();
    const slots = slot.default && slot.default();
    const active = computed({
      get() {
        return props.modelValue;
      },
      set(val) {
        emit("update:modelValue", val);
      }
    });
    const change = function(id) {
      emit("change", id);
      active.value = id;
    };
    const childrens = ref([]);
    const slotsChange = ref(true);
    const setItemInstanceBySlot = function(nodeList) {
      nodeList == null ? void 0 : nodeList.map((item) => {
        let component = item.type;
        if (component.name != _sfc_main$1.name) {
          setItemInstanceBySlot(item.children);
        } else {
          childrens.value.push(item);
        }
      });
    };
    watch(slotsChange, function() {
      childrens.value = [];
      setItemInstanceBySlot(slot.default && slot.default());
    });
    provide("active", active);
    provide("slotsChange", slotsChange);
    const sub = function() {
      for (var i = 0; i < childrens.value.length; i++) {
        if (childrens.value[i].props.id === active.value) {
          if (i === 0) {
            active.value = childrens.value[slots.length - 1].props.id;
          }
          active.value = childrens.value[i - 1].props.id;
          break;
        }
      }
    };
    const add = function() {
      for (var i = 0; i < childrens.value.length; i++) {
        if (childrens.value[i].props.id === active.value) {
          if (i === childrens.value.length - 1) {
            active.value = childrens.value[0].props.id;
          }
          active.value = childrens.value[i + 1].props.id;
          break;
        }
      }
    };
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        class: "layui-carousel",
        "lay-anim": __props.anim,
        "lay-indicator": __props.indicator,
        "lay-arrow": __props.arrow,
        style: normalizeStyle({ width: __props.width, height: __props.height })
      }, [
        createElementVNode("div", _hoisted_2, [
          renderSlot(_ctx.$slots, "default")
        ]),
        createElementVNode("div", _hoisted_3, [
          createElementVNode("ul", null, [
            (openBlock(true), createElementBlock(Fragment, null, renderList(childrens.value, (ss) => {
              return openBlock(), createElementBlock("li", {
                key: ss,
                class: normalizeClass([ss.props.id === unref(active) ? "layui-this" : ""]),
                onClick: withModifiers(($event) => change(ss.props.id), ["stop"])
              }, null, 10, _hoisted_4);
            }), 128))
          ])
        ]),
        createElementVNode("button", {
          class: "layui-icon layui-carousel-arrow",
          "lay-type": "sub",
          onClick: sub
        }, toDisplayString(__props.anim === "updown" ? "\uE619" : "\uE603"), 1),
        createElementVNode("button", {
          class: "layui-icon layui-carousel-arrow",
          "lay-type": "add",
          onClick: add
        }, toDisplayString(__props.anim === "updown" ? "\uE61A" : "\uE602"), 1)
      ], 12, _hoisted_1);
    };
  }
}));
_sfc_main.install = (app) => {
  app.component(_sfc_main.name, _sfc_main);
};
export { _sfc_main as default };