ant-design-x-vue-next/es/sources/CarouselCard.mjs

Ant Design X for Vue — community continuation aligned with @ant-design/x

import { defineComponent as g, computed as d, ref as p, watch as b, createVNode as n } from "vue";
import { b as r, g as x, R as h } from "../chunks/module-chunk.mjs";
import { Carousel as k } from "ant-design-vue";
const N = /* @__PURE__ */ g({
  name: "AXSourcesCarouselCard",
  __name: "CarouselCard",
  props: {
    prefixCls: null,
    items: null,
    activeKey: null,
    className: null,
    style: null,
    onClick: {
      type: Function
    }
  },
  setup(f) {
    const t = f, s = d(() => `${t.prefixCls}-carousel`), v = d(() => {
      var e;
      const l = ((e = t.items) == null ? void 0 : e.findIndex(({
        key: a
      }) => a === t.activeKey)) ?? 0;
      return Math.max(0, l);
    }), u = p(v.value), o = p(null);
    b(v, (l) => {
      var e, a;
      u.value = l, (a = (e = o.value) == null ? void 0 : e.goTo) == null || a.call(e, l, !1);
    }, {
      immediate: !0
    });
    const m = (l) => {
      var e;
      l.url && window.open(l.url, "_blank", "noopener,noreferrer"), (e = t.onClick) == null || e.call(t, l);
    }, $ = () => {
      var l, e;
      if (u.value > 0) {
        const a = u.value - 1;
        u.value = a, (e = (l = o.value) == null ? void 0 : l.goTo) == null || e.call(l, a, !1);
      }
    }, C = () => {
      var e, a, i;
      const l = (((e = t.items) == null ? void 0 : e.length) || 1) - 1;
      if (u.value < l) {
        const c = u.value + 1;
        u.value = c, (i = (a = o.value) == null ? void 0 : a.goTo) == null || i.call(a, c, !1);
      }
    };
    return () => {
      var l, e;
      return n("div", {
        style: t.style,
        class: r(`${s.value}-wrapper`, t.className)
      }, [n("div", {
        class: `${s.value}-title`
      }, [n("div", {
        class: `${s.value}-btn-wrapper`
      }, [n("span", {
        class: r(`${s.value}-btn`, `${s.value}-left-btn`, {
          [`${s.value}-btn-disabled`]: u.value === 0
        }),
        onClick: $
      }, [n(x, null, null)]), n("span", {
        class: r(`${s.value}-btn`, `${s.value}-right-btn`, {
          [`${s.value}-btn-disabled`]: u.value === (((l = t.items) == null ? void 0 : l.length) || 1) - 1
        }),
        onClick: C
      }, [n(h, null, null)])]), n("div", {
        class: `${s.value}-page`
      }, [`${u.value + 1}/${((e = t.items) == null ? void 0 : e.length) || 1}`])]), n(k, {
        class: s.value,
        ref: o,
        arrows: !1,
        infinite: !1,
        dots: !1,
        afterChange: (a) => {
          u.value = a;
        }
      }, {
        default: () => {
          var a;
          return [(a = t.items) == null ? void 0 : a.map((i, c) => n("div", {
            key: i.key ?? c,
            class: `${s.value}-item`,
            onClick: () => m(i)
          }, [n("div", {
            class: `${s.value}-item-title-wrapper`
          }, [i.icon && n("span", {
            class: `${s.value}-item-icon`
          }, [i.icon]), n("span", {
            class: `${s.value}-item-title`
          }, [i.title])]), i.description && n("div", {
            class: `${s.value}-item-description`
          }, [i.description])]))];
        }
      })]);
    };
  }
});
export {
  N as default
};