@vuesax-alpha/nightly/es/components/card/src/card-group.mjs

A Component Library for Vue 3

import { defineComponent, ref, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, createVNode, withCtx, renderSlot } from 'vue';
import { IconArrow } from '../../icon/index.mjs';
import { VsScrollbar } from '../../scrollbar/index.mjs';
import '../../../hooks/index.mjs';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';

const __default__ = defineComponent({
  name: "VsCardGroup"
});
const _sfc_main = defineComponent({
  ...__default__,
  setup(__props) {
    const ns = useNamespace("card");
    const scrollbarRef = ref();
    const scrollbar = ref({
      scrollTop: 0,
      scrollLeft: 0
    });
    const handleScrollbar = ({ scrollTop, scrollLeft }) => {
      scrollbar.value = { scrollTop, scrollLeft };
    };
    const handleClickNexticon = () => {
      const cards = scrollbarRef.value;
      cards.wrapRef.style.scrollBehavior = "smooth";
      cards.scrollTo(scrollbar.value.scrollLeft + cards.wrapRef.clientWidth, 0);
      cards.wrapRef.style.scrollBehavior = "unset";
    };
    const handleClickPrevicon = () => {
      const cards = scrollbarRef.value;
      cards.wrapRef.style.scrollBehavior = "smooth";
      cards.scrollTo(scrollbar.value.scrollLeft - cards.wrapRef.clientWidth, 0);
      cards.wrapRef.style.scrollBehavior = "unset";
    };
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock(
        "div",
        {
          class: normalizeClass(unref(ns).e("group"))
        },
        [
          createElementVNode(
            "button",
            {
              class: normalizeClass(unref(ns).em("group", "prev")),
              onClick: handleClickPrevicon
            },
            [
              createVNode(unref(IconArrow))
            ],
            2
          ),
          createVNode(unref(VsScrollbar), {
            ref_key: "scrollbarRef",
            ref: scrollbarRef,
            always: "",
            "view-class": unref(ns).em("group", "cards"),
            onScroll: handleScrollbar
          }, {
            default: withCtx(() => [
              renderSlot(_ctx.$slots, "default")
            ]),
            _: 3
          }, 8, ["view-class"]),
          createElementVNode(
            "div",
            {
              class: normalizeClass(unref(ns).em("group", "space"))
            },
            null,
            2
          ),
          createElementVNode(
            "button",
            {
              class: normalizeClass(unref(ns).em("group", "next")),
              onClick: handleClickNexticon
            },
            [
              createVNode(unref(IconArrow))
            ],
            2
          )
        ],
        2
      );
    };
  }
});
var CardGroup = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/home/runner/work/vuesax-alpha/vuesax-alpha/packages/components/card/src/card-group.vue"]]);

export { CardGroup as default };
//# sourceMappingURL=card-group.mjs.map