plugin-ui-for-kzt 0.0.16 → 0.0.18

package/src/components/BaseSiteInput/BaseSiteInput.vue

@@ -1,8 +1,10 @@
 <template>
     <div :class="classList">
         <div class="base-site-input__wrapper">
-        <div class="base-site-input__url">
-            https://
+        <div class="base-site-input__url-wrapper">
+            <span class="base-site-input__url">
+                https://
+            </span>
         </div>
             <base-input 
                 v-bind="{...$props, ...$attrs}"
@@ -90,22 +92,31 @@ watch(modelValue, (value) => {
     }
 
     &__url {
+        color: var(--primary-text-tertiary);
+    }
+
+    &__url-wrapper {
+        background: var(--bg-light);
         display: flex;
         align-items: center;
         justify-content: center;
+        border-top-left-radius: var(--corner-radius-s);
         border-top: 1px solid var(--primary-black-300);
         border-bottom: 1px solid var(--primary-black-300);
         border-left: 1px solid var(--primary-black-300);
-        color: var(--primary-text-tertiary);
+        border-bottom-left-radius: var(--corner-radius-s);
     }
 
     &.--small-size {
         #{$input} {
-            &__url {
-                height: 22px;
+            &__url-wrapper{
+                height: 40px;
                 font: var(--typography-text-m-regular);
                 border-top-left-radius: var(--corner-radius-s);
                 border-bottom-left-radius: var(--corner-radius-s);
+            }
+
+            &__url {
                 padding: var(--spacing-s) var(--spacing-m) var(--spacing-s) var(--spacing-2l);
             }
         }
@@ -118,11 +129,14 @@ watch(modelValue, (value) => {
 
     &.--medium-size {
         #{$input} {
-            &__url {
-                height: 18px;
+            &__url-wrapper{
+                height: 48px;
                 font: var(--typography-text-m-regular);
                 border-top-left-radius: var(--corner-radius-m);
                 border-bottom-left-radius: var(--corner-radius-m);
+            }
+
+            &__url {
                 padding: var(--spacing-m) var(--spacing-m) var(--spacing-m) var(--spacing-2l);
             }
         }
@@ -135,11 +149,14 @@ watch(modelValue, (value) => {
 
     &.--large-size {
         #{$input} {
-            &__url {
-                height: 21px;
+            &__url-wrapper{
+                height: 56px;
                 font: var(--typography-text-l-regular);
                 border-top-left-radius: var(--corner-radius-m);
                 border-bottom-left-radius: var(--corner-radius-m);
+            }
+
+            &__url {
                 padding: var(--spacing-2l) var(--spacing-m) var(--spacing-2l) var(--spacing-l);
             }
         }

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/BaseTag/BaseTag.vue

@@ -0,0 +1,245 @@
+<template>
+<div class="base-tag" :class="classList">
+    <div class="base-tag__wrapper">
+        <div class="base-tag__text">{{ text }}</div>
+        <div v-if="closable" class="base-tag__icon" @click="handleClose">
+            <base-icon name="close" size="custom" />
+        </div>
+        <div v-if="addingTag" class="base-tag__icon">
+            <base-icon name="add" size="custom" class="base-tag__add-icon" @click="handleAddTag" />
+        </div>
+        <div v-if="isHasAddTag" class="base-tag__input-wrapper">
+            <input
+                class="base-tag__input"
+                type="text"
+                v-model="inputText"
+                @input="handleInput"
+                @keypress.enter="handleCreateTag"
+            />
+        </div>
+    </div>
+</div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import BaseIcon from '../BaseIcon/BaseIcon.vue';
+import type { ICoreTagProps } from '../../types/tag';
+import { useKitSize } from '../../composables/kit/size';
+import { useKitColor } from '../../composables/kit/color';
+
+const props = withDefaults(defineProps<ICoreTagProps>(), {
+    size: 'medium',
+    color: 'primary',
+    closable: false,
+    isHasAddTag: false,
+    addingTag: false,
+    text: '',
+});
+
+const emit = defineEmits<{
+    updateInput: [value: ICoreTagProps['inputText']];
+    close: [];
+    addTag: [];
+}>();
+
+const inputText = ref<string>(props.inputText || '');
+
+const { sizeClassList } = useKitSize(props);
+const { colorClassList } = useKitColor(props);
+
+const classList = computed(() => [
+    sizeClassList.value,
+    colorClassList.value,
+    {'--adding-tag': props.addingTag},
+]);
+
+const handleClose = () => {
+    emit('close');
+};
+
+const handleInput = (event: Event) => {
+    const target = event.target as HTMLInputElement;
+    emit('updateInput', target.value);
+};
+
+const handleCreateTag = () => {
+    if (inputText.value.trim()) {
+        emit('updateInput', inputText.value.trim());
+        inputText.value = '';
+    }
+};
+
+const handleAddTag = () => {
+    emit('addTag');
+};
+</script>
+
+<style scoped lang="scss">
+@import '@/styles/variables';
+@import '@/styles/root';
+
+.base-tag {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+
+    &__wrapper {
+        display: flex;
+        align-items: center;
+        transition: all var(--transition);
+    }
+
+    &__text {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    &__icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-left: var(--spacing-xs);
+    }
+
+    &__input-wrapper {
+        display: flex;
+        align-items: center;
+
+        .base-tag__input {
+            border: none;
+            background: transparent;
+            outline: none;
+            color: var(--primary-blue);
+        }
+    }
+
+    &.--primary-color {
+        .base-tag__wrapper {
+            background: var(--primary-black-100);
+            color: var(--primary-black-700);
+
+            @include hover {
+                background: var(--primary-black-200);
+                color: var(--primary-black-900);
+
+                .base-tag__icon {
+                    color: var(--primary-black-900);
+                }
+            }
+        }
+
+        .base-tag__icon {
+            color: var(--primary-black-500);
+        }
+    }
+
+    &.--secondary-color {
+        .base-tag__wrapper {
+            background: var(--primary-black-white);
+            color: var(--primary-black-700); // same
+
+            @include hover {
+                background: var(--primary-black-200);
+                color: var(--primary-black-900);
+
+                .base-tag__icon {
+                    color: var(--primary-black-900);
+                }
+            }
+        }
+
+        .base-tag__icon {
+            color: var(--primary-black-500);
+        }
+    }
+
+    &.--adding-tag {
+        .base-tag__wrapper {
+            color: var(--primary-black-500);
+
+            @include hover {
+                color: var(--primary-black-900);
+
+                .base-tag__icon {
+                    color: var(--primary-black-900);
+                }
+            }
+        }
+    }
+
+
+    &.--extra-small-size {
+        .base-tag__text,
+        .base-tag__input {
+            font: var(--typography-text-xs-medium);
+        }
+
+        .base-tag__wrapper {
+            border-radius: var(--corner-radius-xxs);
+            padding: var(--spacing-2xs) var(--spacing-s);
+        }
+
+        .base-tag__icon,
+        .base-tag__add-icon {
+            width: 12px;
+            height: 12px;
+        }
+    }
+
+    &.--small-size {
+        .base-tag__text,
+        .base-tag__input {
+        font: var(--typography-text-s-medium);
+        }
+
+        .base-tag__wrapper {
+            border-radius: var(--corner-radius-xxs);
+            padding: var(--spacing-2xs) var(--spacing-s);
+        }
+
+        .base-tag__icon,
+        .base-tag__add-icon {
+            width: 14px;
+            height: 14px;
+        }
+    }
+
+    &.--medium-size {
+        .base-tag__text,
+        .base-tag__input {
+            font: var(--typography-text-s-medium);
+        }
+
+        .base-tag__wrapper {
+            border-radius: var(--corner-radius-2xs);
+            padding: var(--spacing-xs) var(--spacing-2m);
+        }
+
+        .base-tag__icon,
+        .base-tag__add-icon {
+            width: 16px;
+            height: 16px;
+        }
+    }
+
+    &.--large-size {
+        .base-tag__text,
+        .base-tag__input {
+            font: var(--typography-text-m-medium);
+        }
+
+        .base-tag__wrapper {
+            border-radius: var(--corner-radius-2xs);
+            padding: var(--spacing-xs) var(--spacing-2m);
+        }
+
+        .base-tag__icon,
+        .base-tag__add-icon {
+            width: 16px;
+            height: 16px;
+        }
+    }
+}
+</style>

package/src/components/BaseTag/README.md

@@ -0,0 +1,125 @@
+# Компонент BaseTag
+
+Компонент `BaseTag` — это переиспользуемый Vue 3 компонент для отображения тегов с настраиваемым текстом, размером, цветом и поведением. Поддерживает закрываемые теги, теги с функцией добавления и поле ввода для создания новых тегов. Компонент следует методологии БЭМ для именования CSS-классов и стилизован с использованием SCSS.
+
+## Возможности
+
+- **Настраиваемый размер**: Поддерживает четыре варианта размеров: `extra-small`, `small`, `medium`, `large`.
+- **Варианты цветов**: Предлагает цветовые схемы `primary` и `secondary` с эффектами наведения.
+- **Закрываемые теги**: Опционально включает иконку закрытия для вызова события `close`.
+- **Функция добавления тега**: Поддерживает иконку добавления для создания новых тегов.
+- **Поле ввода**: Отображает поле ввода для создания новых тегов, если включен `isHasAddTag`.
+- **Поддержка TypeScript**: Полностью типизирован с использованием TypeScript.
+- **Стилизация по БЭМ**: Использует методологию БЭМ для консистентности и удобства поддержки CSS.
+- **Композаблы**: Использует `useKitSize` и `useKitColor` для модульного управления размером и цветом.
+
+
+## Использование
+
+Компонент `BaseTag` можно использовать в разных конфигурациях в зависимости от желаемой функциональности. Ниже приведены примеры типичных случаев использования.
+
+### Простой тег
+
+```vue
+<template>
+  <base-tag text="Пример тега" />
+</template>
+```
+
+Отображает тег с текстом "Пример тега" в размере `medium` и цвете `primary`.
+
+### Закрываемый тег
+
+```vue
+<template>
+  <base-tag text="Закрываемый тег" closable @close="handleClose" />
+</template>
+
+<script setup lang="ts">
+const handleClose = () => {
+  console.log('Тег закрыт');
+};
+</script>
+```
+
+Тег с иконкой закрытия, которая вызывает событие `close` при клике.
+
+### Тег с полем ввода
+
+```vue
+<template>
+  <base-tag
+    :isHasAddTag="true"
+    v-model:inputText="tagInput"
+    @updateInput="updateInput"
+    @addTag="createTag"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const tagInput = ref('');
+const updateInput = (value: string) => {
+  tagInput.value = value;
+};
+const createTag = () => {
+  console.log('Новый тег:', tagInput.value);
+};
+</script>
+```
+
+Тег с полем ввода для создания новых тегов. Поле ввода отображается, если `isHasAddTag` равно `true`.
+
+### Тег с иконкой добавления
+
+```vue
+<template>
+  <base-tag text="Добавить тег" addingTag @addTag="handleAddTag" />
+</template>
+
+<script setup lang="ts">
+const handleAddTag = () => {
+  console.log('Инициировано добавление тега');
+};
+</script>
+```
+
+Тег с иконкой добавления, которая вызывает событие `addTag` при клике.
+
+## Пропсы
+
+| Проп         | Тип      | По умолчанию | Описание                                                                 |
+|--------------|----------|--------------|--------------------------------------------------------------------------|
+| `text`       | `string` | `''`         | Текст, отображаемый в теге.                                              |
+| `size`       | `string` | `'medium'`   | Размер тега: `extra-small`, `small`, `medium`, `large`.                  |
+| `color`      | `string` | `'primary'`  | Цветовая схема: `primary`, `secondary`.                                  |
+| `closable`   | `boolean`| `false`      | Включает иконку закрытия для удаления тега.                              |
+| `isHasAddTag`| `boolean`| `false`      | Включает поле ввода для создания нового тега.                            |
+| `addingTag`  | `boolean`| `false`      | Включает иконку добавления тега.                                        |
+| `inputText`  | `string` | `''`         | Начальное значение поля ввода (используется с `v-model:inputText`).      |
+
+## События
+
+| Событие        | Параметры            | Описание                                              |
+|----------------|----------------------|-------------------------------------------------------|
+| `close`        | -                    | Вызывается при клике на иконку закрытия.              |
+| `addTag`       | -                    | Вызывается при клике на иконку добавления тега.       |
+| `updateInput`  | `value: string`      | Вызывается при изменении текста в поле ввода.         |
+
+## Стилизация
+
+Модификаторы:
+- `--primary-color`, `--secondary-color` — для цветовых схем.
+- `--extra-small-size`, `--small-size`, `--medium-size`, `--large-size` — для размеров.
+- `--adding-tag` — для стилизации тега с иконкой добавления.
+
+
+## Зависимости
+
+- **`BaseIcon`**: Компонент для отображения иконок (используется для иконок закрытия и добавления).
+- **`useKitSize`**: Композабл для управления размерами.
+- **`useKitColor`**: Композабл для управления цветами.
+
+
+