useCarousel

useCarousel - хук, определяющий логику работы для компонента типа Сarousel

Arguments

baseView

  • type: CarouselView = { columnCount: number; rowCount: number; rowGap: string; columnGap: string; }
  • default: { columnCount: 1, rowCount: 1, rowGap: '2rem' columnGap: '2rem' }

СarouselView объект, задающий базовый вид слайда, использующийся для мержа в responsiveViews и defaultView.

defaultView

  • type: Partial<CarouselView> = { columnCount?: number; rowCount?: number; rowGap?: string; columnGap?: string; }
  • default: null

СarouselView объект, задающий layout по умолчанию для Carousel. В частности, gap может иметь любое значение CSSUnit.

mode

  • type: 'horizontal' | 'vertical'
  • default: 'horizontal'

Направление переключение слайдов

Необходимое условие для режима vertical

Для использования vertical необходимо задавать высоту карусели либо передавать itemHeight для автоматического вычисления высоты. :::

loop

  • type: Ref<boolean> | boolean
  • default: true

Цикличность навигации.

fractional

  • type: Ref<boolean> | boolean
  • default: false

Режим разбивки слайдов, при котором каждый элемент - это один слайд. Иным словами, переключение между слайдами происходит по одному элементу.

isSwipeEnabled

  • type: boolean
  • default: true

Поддержка переключения между слайдами при touch событиях

responsiveViews

  • type: ResponsiveCarouselViews
  • default: null

Объект адаптивных конфигураций для Carousel. В качестве ключей указывается ширина экрана(px) или название брейкпоинта. Текущий CarouselView определяется на основе MobileFirst подхода.

Partial<CarouselView> не имеет обязательных свойств. Хук добавит недостающие свойства из baseView

itemsCount

  • type: Ref<number> | number
  • default: 0

Кол-во элементов, передающихся в компонент Carousel.

interface CarouselOptions {
  baseView?: CarouselView;
  defaultView?: Partial<CarouselView>;
  loop?: MaybeRef<boolean>;
  fractional?: MaybeRef<boolean>;
  mode?: MaybeRef<CAROUSEL_MODES>;
  isSwipeEnabled?: boolean;
  responsiveViews?: ResponsiveCarouselViews | null;
  itemsCount?: MaybeRef<number>;
}

type CarouselProvidedState = {
  views: NoramlizedCarouselViews;
  currentSlide: Ref<number>;
  fractional: MaybeRef<boolean>;
  mode: MaybeRef<CAROUSEL_MODES>;
};

Return

isVertical

  • type: ComputedRef<boolean>

Флаг режима карусели для удобства

swipeElement

  • type: Ref<HTMLElement | null>

ref для свайп элемента

isVertical

  • type: ComputedRef<boolean>

Флаг режима карусели для удобства

views

  • type: NoramlizedCarouselViews

Форматированный объет всех конфигурацией слайдов для карусели. Ключ объекта либо 'default' либо ширина экрана.

currentBreakpoint

  • type: Ref<null | number>

Текущий breakpoint из responsiveViews

currentSlide

  • type: Ref<number>

Номер текущего слайда. Нумерация начинается с 1

currentView

  • type: ComputedRef<CarouselView | null>

Текущая конфигурация layout для Carousel

nextSlide / prevSlide

  • type: () => void

Функции для переключения на следующий или предыдущий слайд.

switchCurrentSlide

  • type: (slide: number) => void

Функция переключения текущего слайда. Нумерация аналогично currentSlide

slidesCount

  • type: ComputedRef<number | null>

Общее количество слайдов при currentCarouselView

isFirstSlide / isLastSlide

  • type: СomputedRef<boolean>

Хелперы, позволяющие определить является ли текущий слайд последним или первым

onTransitionStart / onTransitionEnd

  • type: (cb: (e: TransitionEvent) => any) => void

Обертка для добавления слушателя для Transition переключения слайдов в Carousel

Помимо этого, данный хук совершает provide для компонента CarouselView таких значений, как

  • CarouselProvidedState
  • transitionHandlers

Inject следует осуществлять по названиям переменных. transitionHandlers представляет собой объект, имеющий поля onStart и onEnd. Это те самые слушатели, добавляемые через хелперы onTransitionStart и onTransitionEnd

<template>
  <div>
    <span v-show="isTransitionActive">
      Transition is being played...
    </span>

    <div>
      <div>
        <button @click="prevSlide">
          <-
        </button>

        <CarouselView
          ref="swipeElement"
          :items="items"
        >
          <template #default="{ item }">
            <div>
              {{ item.name }}
            </div>
          </template>
        </CarouselView>


        <button @clic="nextSlide">
          ->
        </button>
      </div>

      <button
        v-for="slideNumber in slidesCount"
        :key="slideNumber"
        :disabled="slideNumber === currentSlide"
        @click="switchCurrentSlide(slideNumber)"
      >
        {{ slideNumber }}
      </button>
    </div>
  </div>
</template>

import { ref } from 'vue';
import CarouselView from '#sf/components/carousel/view/index.vue';
import useCarousel from '#sf/composition/carousel/use-carousel';

export default Vue.extend({
  setup() {
    const items = [...Array(15).keys()].map(i => ({
      id: i,
      name: 'Item' + i,
    }));

    const {
      switchCurrentSlide,
      nextSlide,
      prevSlide,
      slidesCount,
      onTransitionStart,
      onTransitionEnd,
      currentSlide,
      swipeElement,
    } = useCarousel({
      itemsCount: items.length,

      loop: true,

      baseView: {
        columnCount: 3,
      },

      responsiveViews: {
        500: {
          rowCount: 2,
          columntCount: 2,
          rowGap: '1rem',
          columngGap: '2rem'
        },

        800: {
          rowCoun: 3,
          columnCount: 3,
        },

        sm: {
          rowCoun: 5,
        },
      }
    });

    const isTransitionActive = ref(false);

    onTransitionStart(() => isTransitionActive.value = true);

    onTransitionEnd(() => isTransitionActive.value = false);

    return {
      switchCurrentSlide,
      nextSlide,
      prevSlide,
      slidesCount,
      currentSlide,
      swipeElement,
    };
  },
});