plugin-ui-for-kzt 0.0.15 → 0.0.17

package/src/components/BasePagination/README.md

@@ -0,0 +1,156 @@
+# Компонент BasePagination
+
+Компонент `BasePagination` — это повторно используемый компонент Vue 3, предназначенный для навигации по страницам с различными стилями отображения. Он поддерживает числовую пагинацию с эллипсами для больших количеств страниц, а также альтернативные стили, такие как точки и тире, с или без цветного фона. Компонент легко настраивается через пропсы, слоты и переменные SCSS.
+
+## Содержание
+- [Обзор](#обзор)
+- [Использование](#использование)
+  - [Базовое использование](#базовое-использование)
+  - [Кастомизация текста через слоты](#кастомизация-текста-через-слоты)
+  - [Использование разных типов](#использование-разных-типов)
+- [Пропсы](#пропсы)
+- [Слоты](#слоты)
+- [События](#события)
+- [Стилизация](#стилизация)
+- [Зависимости](#зависимости)
+
+
+## Обзор
+
+Компонент `BasePagination` предоставляет гибкий способ навигации по нескольким страницам. Поддерживаются пять типов пагинации:
+- `numbers`: Отображает номера страниц с эллипсами для больших количеств страниц.
+- `dots`: Отображает до 3 точек для представления страниц.
+- `dotsWithBackground`: Отображает до 3 точек с цветным фоном.
+- `dashes`: Отображает до 3 тире для представления страниц.
+- `dashesWithBackground`: Отображает до 3 тире с цветным фоном.
+
+Компонент включает кнопки навигации ("Назад" и "Вперёд") с возможностью кастомизации текста через слоты, а также поддерживает разные размеры и цветовые схемы.
+
+## Использование
+
+### Базовое использование
+
+Для использования компонента `BasePagination` с настройками по умолчанию включите его в ваш шаблон и привяжите необходимые пропсы:
+
+```vue
+<template>
+  <div>
+    <base-pagination
+      :current-page="currentPage"
+      :total-pages="10"
+      @update:current-page="currentPage = $event"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import BasePagination from './components/BasePagination.vue';
+
+const currentPage = ref(1);
+</script>
+```
+
+**Результат**: Компонент отобразит числовую пагинацию с кнопками "Назад" и "Вперёд" по умолчанию.
+
+### Кастомизация текста через слоты
+
+Вы можете кастомизировать текст кнопок "Назад" и "Вперёд" с помощью слотов `previousTextButton` и `nextTextButton`:
+
+```vue
+<template>
+  <div>
+    <base-pagination
+      :current-page="currentPage"
+      :total-pages="10"
+      @update:current-page="currentPage = $event"
+    >
+      <template #previousTextButton>Назад</template>
+      <template #nextTextButton>Вперёд</template>
+    </base-pagination>
+  </div>
+</template>
+```
+
+**Результат**: Кнопки будут отображать кастомный текст "Назад" и "Вперёд".
+
+### Использование разных типов
+
+Компонент поддерживает разные типы пагинации. Пример с типом `dotsWithBackground`:
+
+```vue
+<template>
+  <div>
+    <base-pagination
+      type="dotsWithBackground"
+      :current-page="currentPage"
+      :total-pages="3"
+      color="primary"
+      @update:current-page="currentPage = $event"
+    >
+      <template #previousTextButton>Пред.</template>
+      <template #nextTextButton>След.</template>
+    </base-pagination>
+  </div>
+</template>
+```
+
+**Результат**: Отобразится пагинация с 3 точками на цветном фоне с кастомным текстом "Пред." и "След.".
+
+## Пропсы
+
+| Проп              | Тип                  | По умолчанию   | Описание                                      |
+|-------------------|----------------------|----------------|-----------------------------------------------|
+| `type`            | `PaginationType`     | `'numbers'`    | Тип пагинации (`numbers`, `dots`, `dotsWithBackground`, `dashes`, `dashesWithBackground`). |
+| `currentPage`     | `number`             | `1`            | Текущая страница.                            |
+| `totalPages`      | `number`             | `1`            | Общее количество страниц.                    |
+| `maxDisplayedPages` | `number`          | `5`            | Максимальное количество отображаемых страниц (только для `numbers`). |
+| `size`            | `ICoreSize`          | `'medium'`     | Размер пагинации (`small`, `medium`, `large`). |
+| `color`           | `PaginationColor`    | `'primary'`    | Цветовая схема (`primary`, `secondary`, `white`, `black`). |
+
+## Слоты
+
+| Слот              | По умолчанию   | Описание                                      |
+|-------------------|----------------|-----------------------------------------------|
+| `previousTextButton` | `'Назад'`    | Слот для текста кнопки "Назад".              |
+| `nextTextButton`  | `'Вперёд'`    | Слот для текста кнопки "Вперёд".             |
+
+Пример использования слотов:
+```vue
+<base-pagination :current-page="currentPage" :total-pages="10" @update:current-page="currentPage = $event">
+  <template #previousTextButton>Пред.</template>
+  <template #nextTextButton>След.</template>
+</base-pagination>
+```
+
+## События
+
+| Событие            | Описание                                      | Параметры                |
+|--------------------|-----------------------------------------------|--------------------------|
+| `update:currentPage` | Вызывается при изменении текущей страницы.    | `page` (число)           |
+
+Пример обработки события:
+```vue
+<base-pagination
+  :current-page="currentPage"
+  :total-pages="10"
+  @update:current-page="currentPage = $event"
+/>
+```
+
+## Стилизация
+
+Компонент использует SCSS для стилизации и поддерживает следующие особенности:
+- **Размеры**: `small`, `medium`, `large` с соответствующими размерами для кнопок и элементов.
+- **Цветовые схемы**: Четыре цветовых варианта (`primary`, `secondary`, `white`, `black`) для типов `dotsWithBackground` и `dashesWithBackground`.
+- **Анимации**: Плавные переходы для активных элементов (масштабирование точек и тире).
+- **Кастомные классы**: 
+  - `base-pagination--${type}` для разных типов пагинации.
+  - `--color-${color}` для цветовых схем.
+
+## Зависимости
+
+- `vue` (Vue 3)
+- `BaseButton` (компонент для кнопок)
+- `BaseIcon` (компонент для иконок)
+- `useKitSize` (композиция для управления размером)

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/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

@@ -5,7 +5,7 @@ import Tooltip from "./components/Tooltip/Tooltip.vue";
 import Spinner from "./components/Spinner/Spinner.vue";
 import ModalPlugin, { useModal } from "./plugins/modalPlugin";
 import ToasterPlugin, { useToast } from "./plugins/toasterPlugin";
-import "./icons"; // Импортируем иконки для генерации спрайта
+import "./sprite"; // Импортируем иконки для генерации спрайта
 import "./styles/root.scss";
 import BaseIcon from "./components/BaseIcon/BaseIcon.vue";
 import BaseBreadCrumbs from "./components/BaseBreadCrumbs/BaseBreadCrumbs.vue";
@@ -23,10 +23,13 @@ import BaseInputCalendar from "./components/BaseInputCalendar/BaseInputCalendar.
 import BaseOpenedListItem from "./components/BaseOpenedListItem/BaseOpenedListItem.vue";
 import BaseDropdown from "./components/BaseDropdown/BaseDropdown.vue";
 import BaseSelect from "./components/BaseSelect/BaseSelect.vue";
+import BasePagination from "./components/BasePagination/BasePagination.vue";
 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, 
@@ -52,22 +55,42 @@ const components = {
   BaseSiteInput,
   BaseInputPhone,
   BaseInputCurrency,
-  BaseSegmentedButtons
+  BasePagination,
+  BaseSegmentedButtons,
+  BaseChips,
+  BaseSwiper
 };
 
 // Функция для загрузки sprite.svg
 const loadSprite = () => {
-  fetch("/sprite.svg")
-    .then((response) => response.text())
-    .then((svg) => {
-      const div = document.createElement("div");
-      div.style.display = "none";
-      div.innerHTML = svg;
-      document.body.appendChild(div);
-    })
-    .catch((error) => {
-      console.error("Ошибка загрузки SVG-спрайта:", error);
-    });
+  const possiblePaths = [
+    "/sprite.svg",
+    "./sprite.svg", 
+    "sprite.svg",
+    "/dist/sprite.svg"
+  ];
+  
+  const tryLoadSprite = async (paths: string[]) => {
+    for (const path of paths) {
+      try {
+        const response = await fetch(path);
+        if (response.ok) {
+          const svg = await response.text();
+          const div = document.createElement("div");
+          div.style.display = "none";
+          div.innerHTML = svg;
+          document.body.appendChild(div);
+          console.log(`Спрайт загружен с пути: ${path}`);
+          return;
+        }
+      } catch (error) {
+        console.warn(`Не удалось загрузить спрайт с пути: ${path}`);
+      }
+    }
+    console.error("Не удалось загрузить SVG-спрайт ни с одного из путей");
+  };
+  
+  tryLoadSprite(possiblePaths);
 };
 
 export default {
@@ -81,10 +104,10 @@ export default {
       app.component(name, component);
     });
 
+    loadSprite();
+
     app.use(ModalPlugin);
     app.use(ToasterPlugin);
-
-    loadSprite();
   },
 };
 
@@ -114,5 +137,8 @@ export {
   BaseSiteInput,
   BaseInputPhone,
   BaseInputCurrency,
-  BaseSegmentedButtons
+  BasePagination,
+  BaseSegmentedButtons,
+  BaseChips,
+  BaseSwiper
 };

package/src/sprite.ts

@@ -0,0 +1,11 @@
+// Импортируем все иконки, чтобы они попали в спрайт
+const requireIcons = require.context(
+    "@/assets/icons",
+    false,
+    /\.svg$/
+  );
+  
+  // Автоматически добавляем спрайт в DOM при импорте
+  requireIcons.keys().forEach((fileName) => {
+    requireIcons(fileName);
+  });

package/src/styles/root.scss

@@ -142,11 +142,14 @@
     --font-weight-medium: 500;
     --font-weight-regular: 400;
     --font-weight-semibold: 600;
+    --corner-radius-3xs: 3px;
     --corner-radius-xxs: 4px;
     --corner-radius-xs: 8px;
     --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

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

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;
+}

package/webpack.config.js

@@ -60,7 +60,7 @@ module.exports = (env, argv) => {
               options: {
                 extract: true,
                 spriteFilename: "sprite.svg",
-                publicPath: "/",
+                publicPath: isProduction ? "./" : "/",
               },
             },
             {

package/dist/icons/index.d.ts

@@ -1,2 +0,0 @@
-declare const iconNames: string[];
-export default iconNames;

package/src/icons/index.ts

@@ -1,15 +0,0 @@
-const requireIcons = require.context(
-  '@/assets/icons',
-  false,
-  /\.svg$/
-);
-
-const iconNames = requireIcons.keys().map((fileName: string) => {
-  return fileName.replace(/^\.\//, '').replace(/\.svg$/, '');
-});
-
-requireIcons.keys().forEach((fileName: string) => {
-  requireIcons(fileName);
-});
-
-export default iconNames;