various-ui/es/components/carousel/multiple-view/index.vue2.mjs

This is a test version of the Vue 3 component library

import { defineComponent, onMounted, onBeforeUnmount, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, createCommentVNode, createElementVNode, renderSlot, createVNode } from 'vue';
import { UiCarouselMultipleViewPropsOption, UiCarouselMultipleViewEmits } from './index.mjs';
import { useComposable } from './src/composable.mjs';
import { UiIcon } from '../../icon/index.mjs';

const __default__ = defineComponent({ name: "UiCarouselMultipleView" });
var _sfc_main = /* @__PURE__ */ defineComponent({
  ...__default__,
  props: UiCarouselMultipleViewPropsOption,
  emits: UiCarouselMultipleViewEmits,
  setup(__props, { expose: __expose, emit: __emit }) {
    const define = __props;
    const emits = __emit;
    const { refs, methods, computeds, variable } = useComposable(define, emits);
    const { main, container } = refs;
    const { switchCarousel, switchBack, switchNext, init } = methods;
    const { style, className, isLastControl, isFirstControl } = computeds;
    onMounted(() => {
      if (!main.value) return;
      else {
        variable.observer = new ResizeObserver(() => methods.init());
        variable.observer.observe(main.value);
      }
    });
    onBeforeUnmount(() => {
      variable.observer && variable.observer.disconnect();
      refs.autoTimer.value && clearInterval(refs.autoTimer.value);
    });
    ;
    __expose({ init, switchBack, switchNext, switchCarousel });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock(
        "div",
        {
          class: normalizeClass(["ui-mv-carousel", unref(className)]),
          style: normalizeStyle(unref(style))
        },
        [
          createCommentVNode(" \u8F6E\u64AD\u56FE\u5BB9\u5668, \u7528\u6765\u63A7\u5236\u8F6E\u64AD\u6EDA\u52A8 "),
          createElementVNode(
            "div",
            {
              class: "ui-mv-carousel-main",
              ref_key: "main",
              ref: main
            },
            [
              createElementVNode(
                "div",
                {
                  class: "ui-mv-carousel-container",
                  ref_key: "container",
                  ref: container
                },
                [
                  renderSlot(_ctx.$slots, "default")
                ],
                512
                /* NEED_PATCH */
              )
            ],
            512
            /* NEED_PATCH */
          ),
          createCommentVNode(" \u8F6E\u64AD\u56FE\u5DE6\u4FA7\u7BAD\u5934 "),
          unref(isFirstControl) ? renderSlot(_ctx.$slots, "arrow-back", { key: 0 }, () => [
            createElementVNode("div", {
              class: "ui-mv-carousel-control ui-mv-carousel-left-control",
              onClick: _cache[0] || (_cache[0] = ($event) => unref(switchCarousel)(-1))
            }, [
              createVNode(unref(UiIcon), { name: "arrow" })
            ])
          ]) : createCommentVNode("v-if", true),
          createCommentVNode(" \u8F6E\u64AD\u56FE\u53F3\u4FA7\u7BAD\u5934 "),
          unref(isLastControl) ? renderSlot(_ctx.$slots, "arrow-next", { key: 1 }, () => [
            createElementVNode("div", {
              class: "ui-mv-carousel-control ui-mv-carousel-right-control",
              onClick: _cache[1] || (_cache[1] = ($event) => unref(switchCarousel)(1))
            }, [
              createVNode(unref(UiIcon), { name: "arrow" })
            ])
          ]) : createCommentVNode("v-if", true)
        ],
        6
        /* CLASS, STYLE */
      );
    };
  }
});

export { _sfc_main as default };
//# sourceMappingURL=index.vue2.mjs.map