plugin-ui-for-kzt 0.0.16 → 0.0.17

package/src/components/BaseSwiper/BaseSwiper.vue

@@ -0,0 +1,229 @@
+<template>
+<div class="base-swiper">
+    <!-- Кнопки навигации -->
+    <button
+        :class="buttonClassList" 
+        class="base-swiper__nav base-swiper__nav--prev" 
+        @click="prevSlide" 
+        :disabled="currentSlide === 0"
+    >
+        <base-icon 
+            name="arrow-left-circle" 
+            size="medium" 
+        />
+    </button>
+    <div class="base-swiper__container" ref="swiperContainer">
+        <div class="base-swiper__slides">
+            <div
+            v-for="(image, index) in images"
+            :key="index"
+            class="base-swiper__slide"
+            :style="{ transform: `translateX(-${currentSlide * 100}%)` }"
+            >
+            <img :src="image" alt="Slide" class="base-swiper__image" />
+            </div>
+        </div>
+    </div>
+    <button 
+        :class="buttonClassList"
+        class="base-swiper__nav base-swiper__nav--next" 
+        @click="nextSlide" 
+        :disabled="currentSlide === images.length - 1"
+    >
+        <base-icon 
+            name="arrow-right-circle" 
+            size="medium" 
+        />
+    </button>
+
+    <!-- Пагинация -->
+    <div class="base-swiper__pagination">
+        <base-pagination
+            :type="paginationSettings.type"
+            v-model:current-page="currentPage"
+            :total-pages="images.length"
+            :color="paginationSettings.color"
+        />
+    </div>
+</div>
+</template>
+  
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, watch, computed } from 'vue';
+import BaseIcon from '../BaseIcon/BaseIcon.vue';
+import BasePagination from '../BasePagination/BasePagination.vue';
+import type { ICoreSwiperProps } from '../../types/swiper';
+
+const props = withDefaults(defineProps<ICoreSwiperProps>(), {
+    images: () => [],
+    autoplay: false,
+    autoplayInterval: 3000,
+    paginationSettings: {
+        type: 'dots',
+        color: 'primary',
+    },
+    buttonSize: 'medium',
+});
+
+const emit = defineEmits<{
+    (e: 'update:currentSlide', value: number): void;
+}>();
+
+const swiperContainer = ref<HTMLElement | null>(null);
+const currentSlide = ref(0);
+const currentPage = ref(1);
+
+const buttonClassList = computed(() => [
+    `--${props.buttonSize}-size`,
+    `--color-${props.paginationSettings.color}`,
+]);
+
+watch(currentSlide, (newSlide) => {
+    currentPage.value = newSlide + 1;
+    emit('update:currentSlide', newSlide);
+});
+
+watch(currentPage, (newPage) => {
+    currentSlide.value = newPage - 1;
+    emit('update:currentSlide', currentSlide.value);
+});
+
+const prevSlide = () => {
+    if (currentSlide.value > 0) {
+        currentSlide.value -= 1;
+    }
+};
+
+const nextSlide = () => {
+    if (currentSlide.value < props.images.length - 1) {
+        currentSlide.value += 1;
+    }
+};
+
+let autoplayIntervalId: ReturnType<typeof setInterval> | null = null;
+
+const startAutoplay = () => {
+    if (props.autoplay && !autoplayIntervalId) {
+        autoplayIntervalId = setInterval(() => {
+        nextSlide();
+        if (currentSlide.value >= props.images.length - 1) {
+            currentSlide.value = 0; // Возвращаемся к первому слайду
+        }
+        }, props.autoplayInterval);
+    }
+};
+
+const stopAutoplay = () => {
+    if (autoplayIntervalId) {
+        clearInterval(autoplayIntervalId);
+        autoplayIntervalId = null;
+    }
+};
+
+onMounted(() => {
+    startAutoplay();
+});
+
+onUnmounted(() => {
+    stopAutoplay();
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/variables';
+@import '../../styles/root';
+
+.base-swiper {
+    $swiper: &;
+
+    position: relative;
+    width: 100%;
+    max-width: 640px;
+    overflow: hidden;
+
+    &__container {
+        overflow: hidden;
+        position: relative;
+    }
+
+    &__slides {
+        display: flex;
+        width: 100%;
+        height: 100%;
+    }
+
+    &__slide {
+        flex: 0 0 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        transition: all var(--transition);
+    }
+
+    &__image {
+        max-width: 100%;
+        max-height: 400px;
+        object-fit: contain;
+        border-radius: var(--corner-radius-m);
+    }
+
+    &__nav {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        border: none;
+        cursor: pointer;
+        border-radius: 50%;
+        z-index: 10;
+
+        &--prev {
+            left: var(--spacing-m);
+        }
+
+        &--next {
+            right: var(--spacing-m);
+        }
+
+        &:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+    }
+
+    &__nav.--color-primary {
+        background: var(--primary-blue);
+        color: var(--primary-black-white);
+    }
+
+    &__nav.--color-secondary {
+        background: var(--primary-blue-50);
+        color: var(--primary-blue-800);
+    }
+
+    &__nav.--color-black {
+        background: #000;
+        color: var(--primary-black-white);
+    }
+
+    &__nav.--color-white {
+        background: var(--primary-black-white);
+        color: var(--primary-black-700);
+    }
+
+    &__nav.--medium-size {
+        padding: var(--spacing-s);
+    }
+
+    &__nav.--large-size {
+        padding: var(--spacing-2m);
+    }
+
+    &__pagination {
+        position: absolute;
+        bottom: 10px;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+}
+</style>

package/src/components/BaseTextarea/BaseTextarea.vue

@@ -88,6 +88,7 @@ function handleInput(event: Event) {
     color: var(--primary-text-primary);
     background: var(--bg-light);
     border: 1px solid var(--primary-black-300);
+    transition: all var(--transition);
 
     &::placeholder {
       color: var(--primary-text-tertiary);

package/src/index.ts

@@ -28,6 +28,8 @@ import BaseSiteInput from "./components/BaseSiteInput/BaseSiteInput.vue";
 import BaseInputPhone from "./components/BaseInputPhone/BaseInputPhone.vue";
 import BaseInputCurrency from "./components/BaseInputCurrency/BaseInputCurrency.vue";
 import BaseSegmentedButtons from "./components/BaseSegmentedButtons/BaseSegmentedButtons.vue";
+import BaseChips from "./components/BaseChips/BaseChips.vue";
+import BaseSwiper from "./components/BaseSwiper/BaseSwiper.vue";
 
 const components = { 
   Modal, 
@@ -54,7 +56,9 @@ const components = {
   BaseInputPhone,
   BaseInputCurrency,
   BasePagination,
-  BaseSegmentedButtons
+  BaseSegmentedButtons,
+  BaseChips,
+  BaseSwiper
 };
 
 // Функция для загрузки sprite.svg
@@ -134,5 +138,7 @@ export {
   BaseInputPhone,
   BaseInputCurrency,
   BasePagination,
-  BaseSegmentedButtons
+  BaseSegmentedButtons,
+  BaseChips,
+  BaseSwiper
 };

package/src/styles/root.scss

@@ -148,6 +148,8 @@
     --corner-radius-s: 10px;
     --corner-radius-m: 12px;
     --corner-radius-l: 16px;
+    --corner-radius-xl: 24px;
+    --corner-radius-2xl: 32px;
     --spacing-2xs: 2px;
     --spacing-xs: 4px;
     --spacing-2s: 6px;

package/src/types/chips.d.ts

@@ -0,0 +1,10 @@
+import type { ICoreSize } from './utils';
+
+export interface ICoreChipsBaseProps {
+    text: string;
+    active: boolean;
+    iconName?: string;
+    count?: number;
+}
+
+export type ICoreChipsProps = ICoreChipsBaseProps & ICoreSize;

package/src/types/pagination.d.ts

@@ -1,7 +1,7 @@
 import type { ICoreSize } from './utils';
 
-type PaginationColor = 'primary' | 'secondary' | 'white' | 'black';
-type PaginationType = 'dots' | 'dotsWithBackground' | 'dashes' | 'dashesWithBackground' | 'numbers';
+export type PaginationColor = 'primary' | 'secondary' | 'white' | 'black';
+export type PaginationType = 'dots' | 'dotsWithBackground' | 'dashes' | 'dashesWithBackground' | 'numbers';
 export interface IPaginationProps {
   type?: PaginationType;
   currentPage?: number;

package/src/types/swiper.d.ts

@@ -0,0 +1,17 @@
+import type { PaginationColor, PaginationType } from './pagination';
+import type { ICoreSize } from './utils';
+
+type TButtonSize = 'medium' | 'large';
+
+export interface ICoreSwiperProps {
+    images: string[];
+    paginationSettings?: {
+        type?: PaginationType;
+        color?: PaginationColor;
+        size?: ICoreSize;
+    }
+    currentSlide?: number;
+    autoplay?: boolean;
+    autoplayInterval?: number;
+    buttonSize?: TButtonSize;
+}