From 7b08493f996263f0a76bc084c161350c6a667df0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9=20=D0=9C=D0=B0?=
=?UTF-8?q?=D0=BB=D1=8E=D0=B3=D0=B8=D0=BD?= <d.malygin@iqdev.digital>
Date: Fri, 31 Jan 2025 17:00:37 +0500
Subject: [PATCH] feat: finish 'Carousel'
---
src/Playground.vue | 8 +++--
src/components/Carousel/Carousel.stories.ts | 7 +++-
src/components/Carousel/Carousel.vue | 40 +++++++++++----------
3 files changed, 33 insertions(+), 22 deletions(-)
diff --git a/src/Playground.vue b/src/Playground.vue
index b62d5b2..4a7b48a 100644
--- a/src/Playground.vue
+++ b/src/Playground.vue
@@ -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
diff --git a/src/components/Carousel/Carousel.stories.ts b/src/components/Carousel/Carousel.stories.ts
index 0bd8f47..6cf11b2 100644
--- a/src/components/Carousel/Carousel.stories.ts
+++ b/src/components/Carousel/Carousel.stories.ts
@@ -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',
},
};
diff --git a/src/components/Carousel/Carousel.vue b/src/components/Carousel/Carousel.vue
index 526f35e..e246121 100644
--- a/src/components/Carousel/Carousel.vue
+++ b/src/components/Carousel/Carousel.vue
@@ -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);
--
GitLab