From 9994cd28f250a6a491193237646023f32fddd4de 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: Thu, 30 Jan 2025 19:16:06 +0500
Subject: [PATCH] feat: 'Carousel' in process
---
eslint.config.js | 1 +
src/common/interfaces/componentsProps.ts | 2 +-
src/components/Carousel/Carousel.vue | 53 +++++++++++++++++-------
tsconfig.app.json | 13 ++++--
4 files changed, 51 insertions(+), 18 deletions(-)
diff --git a/eslint.config.js b/eslint.config.js
index 977eb79..2fb8d80 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -25,6 +25,7 @@ export default [
{
rules: {
'vue/multi-word-component-names': 'off',
+ '@typescript-eslint/no-explicit-any': 'off',
},
},
];
diff --git a/src/common/interfaces/componentsProps.ts b/src/common/interfaces/componentsProps.ts
index 730438a..b81ef92 100644
--- a/src/common/interfaces/componentsProps.ts
+++ b/src/common/interfaces/componentsProps.ts
@@ -80,7 +80,7 @@ export interface IPaginatorProps {
}
export interface ICarouselProps {
- itemsProps: unknown[];
+ itemsProps: any[];
innerWidth?: string;
size?: TSize;
perView?: number;
diff --git a/src/components/Carousel/Carousel.vue b/src/components/Carousel/Carousel.vue
index ae856fb..526f35e 100644
--- a/src/components/Carousel/Carousel.vue
+++ b/src/components/Carousel/Carousel.vue
@@ -1,6 +1,6 @@
<script setup lang="ts">
import type { ICarouselProps } from '@interfaces/componentsProps';
-import CarouselArrowContainer from '@components/Carousel/CarouselArrowContainer.vue';
+import CarouselButtonContainer from '@components/Carousel/CarouselButtonContainer.vue';
import { computed, ref } from 'vue';
import { convertThemeToColor, convertThemeToTextColor } from '@helpers/common';
import ArrowLeftShortIcon from '@icons/Mono/ArrowLeftShortIcon.vue';
@@ -33,19 +33,28 @@ const iconSize = computed(() => {
return '7';
});
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';
+});
const translate = computed(() => `translateX(calc(-${props.innerWidth} / ${props.perView} * ${current.value - 1}))`);
</script>
<template>
<section class="carouselContainer">
- <CarouselArrowContainer
+ <CarouselButtonContainer
@click="!isStartDisabled ? (current = getNewValue('-', current, itemsLength, perScroll, perView)) : null"
+ width="50px"
+ borderRadius="5px"
:textColor="textColor"
:color="color"
:disable="isStartDisabled"
>
<ArrowLeftShortIcon :color="isStartDisabled ? '#aaa' : textColor" :size="iconSize" />
- </CarouselArrowContainer>
+ </CarouselButtonContainer>
<div class="content">
<ul class="list">
<li v-for="item of Array(itemsLength).keys()" :key="item" class="item">
@@ -65,22 +74,27 @@ const translate = computed(() => `translateX(calc(-${props.innerWidth} / ${props
</li>
</ul>
</div>
- <CarouselArrowContainer
+ <CarouselButtonContainer
@click="!isEndDisabled ? (current = getNewValue('+', current, itemsLength, perScroll, perView)) : null"
+ width="50px"
+ borderRadius="5px"
:textColor="textColor"
:color="color"
:disable="isEndDisabled"
>
<ArrowRightShortIcon :color="isEndDisabled ? '#aaa' : textColor" :size="iconSize" />
- </CarouselArrowContainer>
- <ul class="buttons">
- <li
- v-for="item of Array(itemsLength).keys()"
+ </CarouselButtonContainer>
+ <div class="buttons" v-if="buttonsBelow">
+ <CarouselButtonContainer
+ v-for="item of Array(itemsLength - 1).keys()"
:key="item"
- class="button"
- :style="`width: ${iconSize}px; height: ${iconSize}px`"
- ></li>
- </ul>
+ :width="buttonSize"
+ borderRadius="50%"
+ :textColor="textColor"
+ :color="color"
+ ><div @click="current = item + 1" class="button"></div
+ ></CarouselButtonContainer>
+ </div>
</section>
</template>
@@ -88,6 +102,7 @@ const translate = computed(() => `translateX(calc(-${props.innerWidth} / ${props
.carouselContainer {
display: flex;
min-height: 100px;
+ width: max-content;
position: relative;
}
.content {
@@ -105,10 +120,20 @@ const translate = computed(() => `translateX(calc(-${props.innerWidth} / ${props
.buttons {
position: absolute;
bottom: 0;
- left: 0;
- transform: translateX(-50%);
+ left: 50%;
+ transform: translate(-50%, 120%);
+ display: flex;
+ gap: 10px;
}
.button {
background-color: v-bind(color);
+ border: 1px solid black;
+ border-radius: 50%;
+ cursor: pointer;
+ width: v-bind(buttonSize);
+ height: v-bind(buttonSize);
+ :hover {
+ filter: brightness(50%);
+ }
}
</style>
diff --git a/tsconfig.app.json b/tsconfig.app.json
index a7560fb..3a5cd26 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -1,11 +1,18 @@
{
"extends": "@vue/tsconfig/tsconfig.dom.json",
- "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "src/**/*.ts","App.vue"],
- "exclude": ["src/**/__tests__/*"],
+ "include": [
+ "env.d.ts",
+ "src/**/*",
+ "src/**/*.vue",
+ "src/**/*.ts",
+ "App.vue"
+ ],
+ "exclude": [
+ "src/**/__tests__/*"
+ ],
"compilerOptions": {
"composite": true,
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-
"baseUrl": "./",
"paths": {
"@/*": ["src/*"],
--
GitLab