From 8d1d03d150c378a2124dc5740915196751ed9bbb 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: Wed, 29 Jan 2025 17:08:17 +0500
Subject: [PATCH] feat: init 'Carousel'
---
src/common/interfaces/componentsProps.ts | 10 ++
src/components/Carousel/Carousel.stories.ts | 105 ++++++++++++++++++
src/components/Carousel/Carousel.vue | 46 ++++++++
.../Carousel/CarouselArrowContainer.vue | 86 ++++++++++++++
4 files changed, 247 insertions(+)
create mode 100644 src/components/Carousel/Carousel.stories.ts
create mode 100644 src/components/Carousel/Carousel.vue
create mode 100644 src/components/Carousel/CarouselArrowContainer.vue
diff --git a/src/common/interfaces/componentsProps.ts b/src/common/interfaces/componentsProps.ts
index 535181d..829d2a3 100644
--- a/src/common/interfaces/componentsProps.ts
+++ b/src/common/interfaces/componentsProps.ts
@@ -79,6 +79,16 @@ export interface IPaginatorProps {
darknessTheme?: TDarkness;
}
+export interface ICarouselProps {
+ itemsProps: unknown[];
+ width?: string;
+ size?: TSize;
+ perView?: number;
+ perScroll?: number;
+ theme?: TThemeColor;
+ darknessTheme?: TDarkness;
+}
+
export interface IMDProps {
items: IMDItemProps[];
size?: TSize;
diff --git a/src/components/Carousel/Carousel.stories.ts b/src/components/Carousel/Carousel.stories.ts
new file mode 100644
index 0000000..a69e2a2
--- /dev/null
+++ b/src/components/Carousel/Carousel.stories.ts
@@ -0,0 +1,105 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import Carousel from './Carousel.vue';
+
+const meta: Meta = {
+ title: 'Components/Carousel',
+ component: Carousel,
+ tags: ['pick'],
+ parameters: {
+ docs: {
+ description: {
+ component: 'A component to define number inputs with a dial.',
+ },
+ },
+ },
+ argTypes: {
+ buttons: { control: 'boolean' },
+ showLabel: { control: 'boolean' },
+ colorAsTheme: { control: 'boolean' },
+ textBold: { control: 'boolean' },
+ min: { control: 'number' },
+ max: { control: 'number' },
+ step: { control: 'number' },
+ fontSize: { control: 'text' },
+ textBefore: { control: 'text' },
+ textAfter: { control: 'text' },
+ colorGaps: { control: 'object' },
+ size: { control: 'select', options: ['small', 'normal', 'large', 'huge'] },
+ background: { control: 'color' },
+ darknessTheme: { control: 'select', options: ['100', '200', '300', '400', '500', '600', '700', '800', '900'] },
+ darknessNegativeTheme: {
+ control: 'select',
+ options: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
+ },
+ darknessColor: { control: 'select', options: ['100', '200', '300', '400', '500', '600', '700', '800', '900'] },
+ theme: {
+ control: 'select',
+ options: [
+ 'white',
+ 'blue',
+ 'sky',
+ 'cyan',
+ 'teal',
+ 'green',
+ 'yellow',
+ 'orange',
+ 'pink',
+ 'fuchsia',
+ 'purple',
+ 'indigo',
+ 'rose',
+ 'red',
+ 'black',
+ ],
+ },
+ negativeTheme: {
+ control: 'select',
+ options: [
+ 'white',
+ 'blue',
+ 'sky',
+ 'cyan',
+ 'teal',
+ 'green',
+ 'yellow',
+ 'orange',
+ 'pink',
+ 'fuchsia',
+ 'purple',
+ 'indigo',
+ 'rose',
+ 'red',
+ 'black',
+ ],
+ },
+ color: {
+ control: 'select',
+ options: [
+ 'white',
+ 'blue',
+ 'sky',
+ 'cyan',
+ 'teal',
+ 'green',
+ 'yellow',
+ 'orange',
+ 'pink',
+ 'fuchsia',
+ 'purple',
+ 'indigo',
+ 'rose',
+ 'red',
+ 'black',
+ ],
+ },
+ },
+} satisfies Meta<typeof Carousel>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Simple: Story = {
+ args: {},
+};
diff --git a/src/components/Carousel/Carousel.vue b/src/components/Carousel/Carousel.vue
new file mode 100644
index 0000000..e9310a7
--- /dev/null
+++ b/src/components/Carousel/Carousel.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { ICarouselProps } from '@interfaces/componentsProps';
+import CarouselArrowContainer from '@components/Carousel/CarouselArrowContainer.vue';
+import { computed, ref } from 'vue';
+import { convertThemeToColor, convertThemeToTextColor } from '@helpers/common';
+import ArrowLeftShortIcon from '@icons/Mono/ArrowLeftShortIcon.vue';
+import ArrowRightShortIcon from '@icons/Mono/ArrowRightShortIcon.vue';
+
+const props = withDefaults(defineProps<ICarouselProps>(), {
+ itemsProps: () => [],
+ size: 'normal',
+});
+
+const current = ref(1);
+
+const itemsLength = computed(() => Math.ceil(props.itemsProps.length / props.perView));
+const color = computed(() => convertThemeToColor(props.theme, props.darknessTheme));
+const textColor = computed(() => convertThemeToTextColor(props.theme, props.darknessTheme));
+const isStartDisabled = computed(() => current.value === 1);
+const isEndDisabled = computed(() => current.value === itemsLength.value);
+const iconSize = computed(() => {
+ const size = props.size;
+ if (size === 'normal') return '10';
+ if (size === 'large') return '15';
+ if (size === 'huge') return '18';
+ return '7';
+});
+</script>
+
+<template>
+ <section :style="`width: ${width}; min-height: 100px`" class="carouselContainer">
+ <CarouselArrowContainer :textColor="textColor" :color="color" :disable="isStartDisabled">
+ <ArrowLeftShortIcon :color="isStartDisabled ? '#aaa' : textColor" :size="iconSize" />
+ </CarouselArrowContainer>
+ <slot />
+ <CarouselArrowContainer :textColor="textColor" :color="color" :disable="isEndDisabled">
+ <ArrowRightShortIcon :color="isEndDisabled ? '#aaa' : textColor" :size="iconSize" />
+ </CarouselArrowContainer>
+ </section>
+</template>
+
+<style scoped>
+.carouselContainer {
+ display: flex;
+}
+</style>
diff --git a/src/components/Carousel/CarouselArrowContainer.vue b/src/components/Carousel/CarouselArrowContainer.vue
new file mode 100644
index 0000000..7dbf50e
--- /dev/null
+++ b/src/components/Carousel/CarouselArrowContainer.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+defineProps<{
+ disable?: boolean;
+ textColor: string;
+ color: string;
+}>();
+</script>
+
+<template>
+ <div class="arrowContainer">
+ <div
+ :class="[
+ 'icon',
+ {
+ disable,
+ },
+ ]"
+ >
+ <div
+ :class="[
+ 'bg',
+ {
+ disableBg: disable,
+ },
+ ]"
+ ></div>
+ <slot />
+ </div>
+ </div>
+</template>
+
+<style scoped>
+.arrowContainer {
+ width: 50px;
+ min-height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+.icon {
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ cursor: pointer;
+ line-height: 1.2;
+ color: v-bind(textColor);
+}
+.icon::before {
+ content: '';
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ border-radius: 50%;
+ z-index: -1;
+ background-color: v-bind(color);
+}
+.icon:hover > .bg {
+ background-color: v-bind(textColor);
+ opacity: 0.1;
+}
+.icon:active > .bg {
+ opacity: 0.2;
+}
+.bg {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ padding: 10px;
+ z-index: 5;
+ border-radius: 50%;
+ background-color: transparent;
+ opacity: 0;
+ transition: all 0.2s ease;
+}
+.disable {
+ cursor: auto;
+ pointer-events: none;
+}
+.disableBg {
+ background-color: white !important;
+}
+</style>
--
GitLab