st-common-ui-vue3/es/components/StSwiper/StSwiper.vue.js

小尾巴通用 Vue3 UI 组件库

import { defineComponent as E, mergeModels as F, useModel as R, ref as n, onMounted as q, provide as r, openBlock as w, createElementBlock as h, normalizeStyle as s, unref as o, createVNode as I, withCtx as U, renderSlot as g, createElementVNode as b, createCommentVNode as M } from "vue";
import { Swiper as X } from "../../node_modules/.pnpm/swiper@11.1.15/node_modules/swiper/swiper-vue.js";
import Y from "../../node_modules/.pnpm/swiper@11.1.15/node_modules/swiper/modules/mousewheel.js";
import j from "../../node_modules/.pnpm/swiper@11.1.15/node_modules/swiper/modules/controller.js";
/* empty css                                                                            */
import * as u from "../../node_modules/.pnpm/st-common-ui-utils@0.1.1/node_modules/st-common-ui-utils/es/utils/el-size-util.js";
import A from "../StIconIconify/StIconIconify.vue.js";
import G from "../../node_modules/.pnpm/@iconify-icons_tabler@1.2.95/node_modules/@iconify-icons/tabler/chevron-compact-left.js";
import J from "../../node_modules/.pnpm/@iconify-icons_tabler@1.2.95/node_modules/@iconify-icons/tabler/chevron-compact-right.js";
import K from "../../node_modules/.pnpm/@iconify-icons_tabler@1.2.95/node_modules/@iconify-icons/tabler/chevron-compact-up.js";
import L from "../../node_modules/.pnpm/@iconify-icons_tabler@1.2.95/node_modules/@iconify-icons/tabler/chevron-compact-down.js";
const se = /* @__PURE__ */ E({
  name: "StSwiper",
  __name: "StSwiper",
  props: /* @__PURE__ */ F({
    width: { default: "100%" },
    height: { default: "100vh" },
    initialSlide: { default: 0 },
    direction: { default: "horizontal" },
    slidesPerView: { default: 1 },
    slidesOffsetBefore: {},
    slidesOffsetAfter: {},
    mousewheel: { type: Boolean, default: !0 },
    navigation: { type: Boolean, default: !1 },
    navDirection: { default: "horizontal" },
    navAlign: { default: "center" },
    navSize: { default: "3rem" },
    navColor: { default: "#efefef" },
    navDisabledColor: { default: "#9c9c9c9f" },
    transitionFun: { default: "initial" },
    transitionSpeed: { default: 500 },
    transitionDelay: { default: 0 },
    controlSwiper: {},
    swiperOverflow: { default: "hidden" },
    enableSlideClick: { type: Boolean, default: !0 },
    slideClickHandler: { type: Function, default: (d) => {
      d.slideTo(d.clickedIndex);
    } }
  }, {
    activeSlideIdx: { default: void 0 },
    activeSlideIdxModifiers: {}
  }),
  emits: ["update:activeSlideIdx"],
  setup(d, { expose: P }) {
    const k = d, l = R(d, "activeSlideIdx"), f = n(null), x = (e) => {
      f.value = e;
    };
    P({
      swiper: f
    });
    const $ = [j, Y], a = n(k.initialSlide), C = n(), v = n(0);
    q(() => {
      const e = C.value;
      v.value = e.querySelectorAll(".swiper-slide").length, (a.value >= v.value || a.value < 0) && (a.value = 0);
    });
    const y = n(!0), t = n(a.value), p = n(!1), c = n(-1), S = n(0), B = (e) => {
      p.value = !0, c.value = e.previousIndex, S.value = e.activeIndex, y.value = !1;
    }, T = () => {
      p.value = !1;
    }, V = (e) => {
      t.value = e.activeIndex, l.value = e.activeIndex, c.value = e.previousIndex, S.value = e.activeIndex;
    }, z = {
      horizontal: {
        center: {
          top: "50%",
          bottom: "initial",
          transform: "translateY(-50%)"
        },
        start: {
          top: 0,
          bottom: "initial"
        },
        end: {
          top: "initial",
          bottom: 0
        }
      },
      vertical: {
        center: {
          left: "50%",
          right: "initial",
          transform: "translateX(-50%)"
        },
        start: {
          left: 0,
          right: "initial"
        },
        end: {
          left: "initial",
          right: 0
        }
      }
    }, D = {
      horizontal: {
        prev: {
          left: 0,
          right: "initial"
        },
        next: {
          left: "initial",
          right: 0
        }
      },
      vertical: {
        prev: {
          top: 0,
          bottom: "initial"
        },
        next: {
          top: "initial",
          bottom: 0
        }
      }
    }, H = {
      horizontal: {
        prev: G,
        next: J
      },
      vertical: {
        prev: K,
        next: L
      }
    }, O = () => {
      var i;
      const e = (l.value === void 0 ? t.value : l.value) + 1;
      (i = f.value) == null || i.slideTo(e);
    }, N = () => {
      var i;
      const e = (l.value === void 0 ? t.value : l.value) - 1;
      (i = f.value) == null || i.slideTo(e);
    };
    return r("isInitial", y), r("initialSlideIdx", a), r("isSlideChange", p), r("enterSlideIdx", S), r("leaveSlideIdx", c), r("nowSlideIdx", l.value === void 0 ? t : l), (e, i) => (w(), h("div", {
      ref_key: "stSwiperContainerRef",
      ref: C,
      class: "st-swiper-container",
      style: s({
        "--transition-fun": e.transitionFun,
        "--transition-delay": o(u).elSizePreHandler(e.transitionDelay, "ms")
      })
    }, [
      I(o(X), {
        class: "st-swiper",
        style: s({
          "--swiper-overflow": e.swiperOverflow,
          width: o(u).elSizePreHandler(e.width),
          height: o(u).elSizePreHandler(e.height)
        }),
        "initial-slide": a.value,
        direction: e.direction,
        "slides-per-view": e.slidesPerView,
        "slides-offset-before": e.slidesOffsetBefore,
        "slides-offset-after": e.slidesOffsetAfter,
        modules: $,
        mousewheel: { enabled: e.mousewheel },
        controller: { control: e.controlSwiper },
        speed: e.transitionSpeed,
        onSwiper: x,
        onSlideChangeTransitionStart: B,
        onSlideChangeTransitionEnd: T,
        onActiveIndexChange: V,
        onClick: i[0] || (i[0] = (m) => e.enableSlideClick && e.slideClickHandler(m))
      }, {
        "wrapper-start": U(() => [
          g(e.$slots, "default", {
            currentSlideIdx: t.value,
            activeSlideIdx: l.value
          })
        ]),
        _: 3
      }, 8, ["style", "initial-slide", "direction", "slides-per-view", "slides-offset-before", "slides-offset-after", "mousewheel", "controller", "speed"]),
      e.navigation ? (w(), h("div", {
        key: 0,
        class: "st-swiper__nav st-swiper__nav-prev",
        style: s({
          ...D[e.navDirection].prev,
          ...z[e.navDirection][e.navAlign]
        }),
        onPointerdown: i[1] || (i[1] = (m) => t.value > 0 && N())
      }, [
        g(e.$slots, "prev", {}, () => [
          b("div", {
            class: "st-swiper__nav__content",
            style: s({
              fontSize: o(u).elSizePreHandler(e.navSize),
              color: t.value <= 0 ? e.navDisabledColor : e.navColor,
              cursor: t.value <= 0 ? "no-drop" : "pointer"
            })
          }, [
            I(o(A), {
              icon: H[e.navDirection].prev
            }, null, 8, ["icon"])
          ], 4)
        ])
      ], 36)) : M("", !0),
      e.navigation ? (w(), h("div", {
        key: 1,
        class: "st-swiper__nav st-swiper__nav-next",
        style: s({
          ...D[e.navDirection].next,
          ...z[e.navDirection][e.navAlign]
        }),
        onPointerdown: i[2] || (i[2] = (m) => t.value < v.value - 1 && O())
      }, [
        g(e.$slots, "next", {}, () => [
          b("div", {
            class: "st-swiper__nav__content",
            style: s({
              fontSize: o(u).elSizePreHandler(e.navSize),
              color: t.value >= v.value - 1 ? e.navDisabledColor : e.navColor,
              cursor: t.value >= v.value - 1 ? "no-drop" : "pointer"
            })
          }, [
            I(o(A), {
              icon: H[e.navDirection].next
            }, null, 8, ["icon"])
          ], 4)
        ])
      ], 36)) : M("", !0)
    ], 4));
  }
});
export {
  se as default
};