vuux/dist/es/Carousel/src/index.vue.mjs

Vue3 Nuxt3 Nuxt4 组件库

import { defineComponent as h, createElementBlock as s, openBlock as r, withModifiers as k, unref as t, normalizeStyle as c, normalizeClass as i, createBlock as g, createElementVNode as n, createCommentVNode as x, TransitionGroup as C, withCtx as b, Fragment as p, renderList as f, toDisplayString as z, createVNode as _ } from "vue";
import { useCarousel as N } from "./hook/useCarousel.mjs";
import { Icon as B } from "@vuux/icons";
const w = ["href"], I = ["src"], V = {
  key: 0,
  class: "carousel-text"
}, $ = ["src"], D = {
  key: 2,
  class: "carousel-indicator"
}, E = ["onClick"], G = /* @__PURE__ */ h({
  name: "Carousel",
  __name: "index",
  props: {
    data: {},
    duration: { default: 3 },
    autoplay: { type: Boolean, default: !0 },
    height: { default: "380px" },
    width: { default: "100%" },
    fit: { default: "cover" },
    freedom: { type: Boolean },
    indicator: { type: Boolean },
    border: { type: Boolean }
  },
  setup(M) {
    const l = M, { styles: d, index: u, onMouseenter: m, onMouseleave: y, handleToggleFN: v } = N(l);
    return (F, o) => (r(), s("div", {
      class: i(["app-carousel", { "is-border": l.border }]),
      style: c(t(d)),
      onMouseenter: o[2] || (o[2] = //@ts-ignore
      (...e) => t(m) && t(m)(...e)),
      onMouseleave: o[3] || (o[3] = //@ts-ignore
      (...e) => t(y) && t(y)(...e)),
      onDragstart: o[4] || (o[4] = k(() => {
      }, ["prevent"])),
      onContextmenu: o[5] || (o[5] = k(() => {
      }, ["prevent"]))
    }, [
      l.freedom ? (r(), g(C, {
        key: 0,
        name: "carousel-fade",
        tag: "ul",
        class: "carousel-body"
      }, {
        default: b(() => [
          (r(!0), s(p, null, f(l.data, (e, a) => (r(), s("li", {
            key: e.url || a,
            class: i(["carousel-item", { "is-active": a === t(u) }])
          }, [
            n("a", {
              href: e.url ? e.url : "javascript:;",
              target: "_blank"
            }, [
              n("img", {
                src: e.src,
                style: c(t(d))
              }, null, 12, I),
              e.text ? (r(), s("p", V, z(e.text), 1)) : x("", !0)
            ], 8, w)
          ], 2))), 128))
        ]),
        _: 1
      })) : (r(), g(C, {
        key: 1,
        name: "carousel-fade",
        tag: "ul",
        class: "carousel-body"
      }, {
        default: b(() => [
          (r(!0), s(p, null, f(l.data, (e, a) => (r(), s("li", {
            key: e,
            class: i(["carousel-item", { "is-active": a === t(u) }])
          }, [
            n("img", {
              src: e,
              style: c(t(d))
            }, null, 12, $)
          ], 2))), 128))
        ]),
        _: 1
      })),
      n("div", {
        class: "carousel-btn is-prev",
        onClick: o[0] || (o[0] = (e) => t(v)(-1))
      }, [
        _(t(B), {
          name: "Icon3498333",
          size: 18,
          opacity: 0.8,
          color: "rgba(255, 255, 255, 0.8)"
        })
      ]),
      n("div", {
        class: "carousel-btn is-next",
        onClick: o[1] || (o[1] = (e) => t(v)(1))
      }, [
        _(t(B), {
          name: "Icon6657361",
          size: 18,
          opacity: 0.8,
          color: "rgba(255, 255, 255, 0.8)"
        })
      ]),
      l.indicator ? (r(), s("div", D, [
        (r(!0), s(p, null, f(l.data.length, (e) => (r(), s("span", {
          key: e,
          class: i({ "is-active": t(u) === e - 1 }),
          onClick: (a) => u.value = e - 1
        }, null, 10, E))), 128))
      ])) : x("", !0)
    ], 38));
  }
});
export {
  G as default
};