Commit 7b08493f authored by Дмитрий Малюгин's avatar Дмитрий Малюгин 🕓
Browse files

feat: finish 'Carousel'

parent 4cd01966

src/Playground.vue

+6 −2
Original line number Diff line number Diff line
@@ -204,14 +204,17 @@ const openDrawer = () => (visibleDrawer.value = true); 
  <ProgressBar v-model="pbValue" />

  <Carousel

    style="margin: 20px"

    theme="rose"

    :itemsProps="[

      {

        index: 1,

        text: 'This is SPARTA!',

        src: 'storybook.svg',

      },

      {

        index: 2,

        text: 'This is the second item!',

        src: 'https://www.industrialempathy.com/img/remote/ZiClJf-640w.avif',

      },

      {

        index: 3,
@@ -224,8 +227,9 @@ const openDrawer = () => (visibleDrawer.value = true); 
  >

    <template v-slot="item: unknown">

      <h2 style="text-align: center; margin-bottom: 20px">Element {{ item?.index }}</h2>

      <p>{{ item?.text }}</p></template

    >

      <p>{{ item?.text }}</p>

      <img :src="item.src" :style="`width: ${item.index === 1 ? '30px' : '100%'}`"

    /></template>

  </Carousel>

  {{ tableData[1] }}

  <Table

src/components/Carousel/Carousel.stories.ts

+6 −1
Original line number Diff line number Diff line
@@ -58,6 +58,7 @@ export const Half: Story = { 
    circular: true,

    perView: 2,

    perScroll: 1,



    itemsProps: [

      {

        header: 'First',
@@ -76,6 +77,8 @@ export const Half: Story = { 
        text: 'Some text',

      },

    ],



    theme: 'sky',

  },

};
@@ -109,6 +112,8 @@ export const Full: Story = { 
    ],



    buttonsBelow: true,

    theme: 'sky',

    theme: 'green',

    size: 'large',

    innerWidth: '500px',

  },

};

src/components/Carousel/Carousel.vue

+21 −19
Original line number Diff line number Diff line
@@ -25,20 +25,21 @@ const isStartDisabled = computed(() => (props.circular ? false : current.value = 
const isEndDisabled = computed(() =>

  props.circular ? false : current.value === Math.ceil(itemsLength.value / props.perView) || !itemsLength.value,

);

const iconSize = computed(() => {

const sizeCoefficient = computed(() => {

  const size = props.size;

  if (size === 'normal') return '10';

  if (size === 'large') return '15';

  if (size === 'huge') return '18';

  return '7';

  if (size === 'normal') return 1;

  if (size === 'large') return 2;

  if (size === 'huge') return 3;

  return 0.75;

});

const iconSize = computed(() => 10 * sizeCoefficient.value);

const itemWidth = computed(() => `calc(${props.innerWidth} / ${props.perView}`);

const buttonSize = computed(() => {

  const size = props.size;

  if (size === 'normal') return '13px';

  if (size === 'large') return '19px';

  if (size === 'huge') return '24px';

  return '9px';

  if (size === 'normal') return 12 * sizeCoefficient.value + 'px';

  if (size === 'large') return 12 * sizeCoefficient.value + 'px';

  if (size === 'huge') return 15 * sizeCoefficient.value + 'px';

  return 9 * sizeCoefficient.value + 'px';

});

const translate = computed(() => `translateX(calc(-${props.innerWidth} / ${props.perView} * ${current.value - 1}))`);

</script>
@@ -47,13 +48,13 @@ const translate = computed(() => `translateX(calc(-${props.innerWidth} / ${props 
  <section class="carouselContainer">

    <CarouselButtonContainer

      @click="!isStartDisabled ? (current = getNewValue('-', current, itemsLength, perScroll, perView)) : null"

      width="50px"

      borderRadius="5px"

      :width="50 * sizeCoefficient + 'px'"

      :borderRadius="5 * sizeCoefficient + 'px'"

      :textColor="textColor"

      :color="color"

      :color="!isStartDisabled ? color : '#aaa'"

      :disable="isStartDisabled"

    >

      <ArrowLeftShortIcon :color="isStartDisabled ? '#aaa' : textColor" :size="iconSize" />

      <ArrowLeftShortIcon :size="iconSize" />

    </CarouselButtonContainer>

    <div class="content">

      <ul class="list">
@@ -76,13 +77,13 @@ const translate = computed(() => `translateX(calc(-${props.innerWidth} / ${props 
    </div>

    <CarouselButtonContainer

      @click="!isEndDisabled ? (current = getNewValue('+', current, itemsLength, perScroll, perView)) : null"

      width="50px"

      borderRadius="5px"

      :width="50 * sizeCoefficient + 'px'"

      :borderRadius="5 * sizeCoefficient + 'px'"

      :textColor="textColor"

      :color="color"

      :color="!isEndDisabled ? color : '#aaa'"

      :disable="isEndDisabled"

    >

      <ArrowRightShortIcon :color="isEndDisabled ? '#aaa' : textColor" :size="iconSize" />

      <ArrowRightShortIcon :size="iconSize" />

    </CarouselButtonContainer>

    <div class="buttons" v-if="buttonsBelow">

      <CarouselButtonContainer
@@ -92,7 +93,8 @@ const translate = computed(() => `translateX(calc(-${props.innerWidth} / ${props 
        borderRadius="50%"

        :textColor="textColor"

        :color="color"

        ><div @click="current = item + 1" class="button"></div

        @click="current = item + 1"

        ><div class="button" :style="`border-width: ${size === 'large' || size === 'huge' ? '2px' : '1px'}`"></div

      ></CarouselButtonContainer>

    </div>

  </section>
@@ -127,7 +129,7 @@ const translate = computed(() => `translateX(calc(-${props.innerWidth} / ${props 
}

.button {

  background-color: v-bind(color);

  border: 1px solid black;

  border: solid black;

  border-radius: 50%;

  cursor: pointer;

  width: v-bind(buttonSize);