Skip to content
Snippets Groups Projects
Commit 9994cd28 authored by Дмитрий Малюгин's avatar Дмитрий Малюгин :clock4:
Browse files

feat: 'Carousel' in process

parent 145551ba
No related branches found
No related tags found
1 merge request!6Finish "UI-library v1.0.0"
...@@ -25,6 +25,7 @@ export default [ ...@@ -25,6 +25,7 @@ export default [
{ {
rules: { rules: {
'vue/multi-word-component-names': 'off', 'vue/multi-word-component-names': 'off',
'@typescript-eslint/no-explicit-any': 'off',
}, },
}, },
]; ];
...@@ -80,7 +80,7 @@ export interface IPaginatorProps { ...@@ -80,7 +80,7 @@ export interface IPaginatorProps {
} }
export interface ICarouselProps { export interface ICarouselProps {
itemsProps: unknown[]; itemsProps: any[];
innerWidth?: string; innerWidth?: string;
size?: TSize; size?: TSize;
perView?: number; perView?: number;
......
<script setup lang="ts"> <script setup lang="ts">
import type { ICarouselProps } from '@interfaces/componentsProps'; 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 { computed, ref } from 'vue';
import { convertThemeToColor, convertThemeToTextColor } from '@helpers/common'; import { convertThemeToColor, convertThemeToTextColor } from '@helpers/common';
import ArrowLeftShortIcon from '@icons/Mono/ArrowLeftShortIcon.vue'; import ArrowLeftShortIcon from '@icons/Mono/ArrowLeftShortIcon.vue';
...@@ -33,19 +33,28 @@ const iconSize = computed(() => { ...@@ -33,19 +33,28 @@ const iconSize = computed(() => {
return '7'; return '7';
}); });
const itemWidth = computed(() => `calc(${props.innerWidth} / ${props.perView}`); 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}))`); const translate = computed(() => `translateX(calc(-${props.innerWidth} / ${props.perView} * ${current.value - 1}))`);
</script> </script>
<template> <template>
<section class="carouselContainer"> <section class="carouselContainer">
<CarouselArrowContainer <CarouselButtonContainer
@click="!isStartDisabled ? (current = getNewValue('-', current, itemsLength, perScroll, perView)) : null" @click="!isStartDisabled ? (current = getNewValue('-', current, itemsLength, perScroll, perView)) : null"
width="50px"
borderRadius="5px"
:textColor="textColor" :textColor="textColor"
:color="color" :color="color"
:disable="isStartDisabled" :disable="isStartDisabled"
> >
<ArrowLeftShortIcon :color="isStartDisabled ? '#aaa' : textColor" :size="iconSize" /> <ArrowLeftShortIcon :color="isStartDisabled ? '#aaa' : textColor" :size="iconSize" />
</CarouselArrowContainer> </CarouselButtonContainer>
<div class="content"> <div class="content">
<ul class="list"> <ul class="list">
<li v-for="item of Array(itemsLength).keys()" :key="item" class="item"> <li v-for="item of Array(itemsLength).keys()" :key="item" class="item">
...@@ -65,22 +74,27 @@ const translate = computed(() => `translateX(calc(-${props.innerWidth} / ${props ...@@ -65,22 +74,27 @@ const translate = computed(() => `translateX(calc(-${props.innerWidth} / ${props
</li> </li>
</ul> </ul>
</div> </div>
<CarouselArrowContainer <CarouselButtonContainer
@click="!isEndDisabled ? (current = getNewValue('+', current, itemsLength, perScroll, perView)) : null" @click="!isEndDisabled ? (current = getNewValue('+', current, itemsLength, perScroll, perView)) : null"
width="50px"
borderRadius="5px"
:textColor="textColor" :textColor="textColor"
:color="color" :color="color"
:disable="isEndDisabled" :disable="isEndDisabled"
> >
<ArrowRightShortIcon :color="isEndDisabled ? '#aaa' : textColor" :size="iconSize" /> <ArrowRightShortIcon :color="isEndDisabled ? '#aaa' : textColor" :size="iconSize" />
</CarouselArrowContainer> </CarouselButtonContainer>
<ul class="buttons"> <div class="buttons" v-if="buttonsBelow">
<li <CarouselButtonContainer
v-for="item of Array(itemsLength).keys()" v-for="item of Array(itemsLength - 1).keys()"
:key="item" :key="item"
class="button" :width="buttonSize"
:style="`width: ${iconSize}px; height: ${iconSize}px`" borderRadius="50%"
></li> :textColor="textColor"
</ul> :color="color"
><div @click="current = item + 1" class="button"></div
></CarouselButtonContainer>
</div>
</section> </section>
</template> </template>
...@@ -88,6 +102,7 @@ const translate = computed(() => `translateX(calc(-${props.innerWidth} / ${props ...@@ -88,6 +102,7 @@ const translate = computed(() => `translateX(calc(-${props.innerWidth} / ${props
.carouselContainer { .carouselContainer {
display: flex; display: flex;
min-height: 100px; min-height: 100px;
width: max-content;
position: relative; position: relative;
} }
.content { .content {
...@@ -105,10 +120,20 @@ const translate = computed(() => `translateX(calc(-${props.innerWidth} / ${props ...@@ -105,10 +120,20 @@ const translate = computed(() => `translateX(calc(-${props.innerWidth} / ${props
.buttons { .buttons {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 50%;
transform: translateX(-50%); transform: translate(-50%, 120%);
display: flex;
gap: 10px;
} }
.button { .button {
background-color: v-bind(color); 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> </style>
{ {
"extends": "@vue/tsconfig/tsconfig.dom.json", "extends": "@vue/tsconfig/tsconfig.dom.json",
"include": ["env.d.ts", "src/**/*", "src/**/*.vue", "src/**/*.ts","App.vue"], "include": [
"exclude": ["src/**/__tests__/*"], "env.d.ts",
"src/**/*",
"src/**/*.vue",
"src/**/*.ts",
"App.vue"
],
"exclude": [
"src/**/__tests__/*"
],
"compilerOptions": { "compilerOptions": {
"composite": true, "composite": true,
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
"baseUrl": "./", "baseUrl": "./",
"paths": { "paths": {
"@/*": ["src/*"], "@/*": ["src/*"],
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment