@vuesax-alpha/nightly/lib/components/card/src/card-group.js

A Component Library for Vue 3

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var index$1 = require('../../icon/index.js');
var index$2 = require('../../scrollbar/index.js');
require('../../../hooks/index.js');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
var index = require('../../../hooks/use-namespace/index.js');

const __default__ = vue.defineComponent({
  name: "VsCardGroup"
});
const _sfc_main = vue.defineComponent({
  ...__default__,
  setup(__props) {
    const ns = index.useNamespace("card");
    const scrollbarRef = vue.ref();
    const scrollbar = vue.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 vue.openBlock(), vue.createElementBlock(
        "div",
        {
          class: vue.normalizeClass(vue.unref(ns).e("group"))
        },
        [
          vue.createElementVNode(
            "button",
            {
              class: vue.normalizeClass(vue.unref(ns).em("group", "prev")),
              onClick: handleClickPrevicon
            },
            [
              vue.createVNode(vue.unref(index$1.IconArrow))
            ],
            2
          ),
          vue.createVNode(vue.unref(index$2.VsScrollbar), {
            ref_key: "scrollbarRef",
            ref: scrollbarRef,
            always: "",
            "view-class": vue.unref(ns).em("group", "cards"),
            onScroll: handleScrollbar
          }, {
            default: vue.withCtx(() => [
              vue.renderSlot(_ctx.$slots, "default")
            ]),
            _: 3
          }, 8, ["view-class"]),
          vue.createElementVNode(
            "div",
            {
              class: vue.normalizeClass(vue.unref(ns).em("group", "space"))
            },
            null,
            2
          ),
          vue.createElementVNode(
            "button",
            {
              class: vue.normalizeClass(vue.unref(ns).em("group", "next")),
              onClick: handleClickNexticon
            },
            [
              vue.createVNode(vue.unref(index$1.IconArrow))
            ],
            2
          )
        ],
        2
      );
    };
  }
});
var CardGroup = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "/home/runner/work/vuesax-alpha/vuesax-alpha/packages/components/card/src/card-group.vue"]]);

exports["default"] = CardGroup;
//# sourceMappingURL=card-group.js.map