plugin-ui-for-kzt 0.0.14 → 0.0.16

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

@@ -293,7 +293,7 @@ defineSlots<{
       }
 
       &__header {
-        height: 22px;
+        height: 40px;
         padding: var(--spacing-s) var(--spacing-2l);
         border-radius: var(--corner-radius-s);
       }
@@ -320,7 +320,7 @@ defineSlots<{
       }
 
       &__header {
-        height: 22px;
+        height: 48px;
         padding: var(--spacing-m) var(--spacing-2l);
       }
 
@@ -346,7 +346,7 @@ defineSlots<{
       }
 
       &__header {
-        height: 30px;
+        height: 56px;
         padding: var(--spacing-m) var(--spacing-l);
       }
 

package/src/components/Modal/Modal.vue

@@ -10,7 +10,6 @@
       <div class="modal-container-header-title">
         <component :is="getTypeModal.img"/>
         <div>{{ options.title }}</div>
-        <div>{{ getTypeModal.nameClass }}</div>
       </div>
       <div
           class="modal-container-header-show-more"

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,6 +23,7 @@ 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";
@@ -52,22 +53,40 @@ const components = {
   BaseSiteInput,
   BaseInputPhone,
   BaseInputCurrency,
+  BasePagination,
   BaseSegmentedButtons
 };
 
 // Функция для загрузки 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 +100,10 @@ export default {
       app.component(name, component);
     });
 
+    loadSprite();
+
     app.use(ModalPlugin);
     app.use(ToasterPlugin);
-
-    loadSprite();
   },
 };
 
@@ -114,5 +133,6 @@ export {
   BaseSiteInput,
   BaseInputPhone,
   BaseInputCurrency,
+  BasePagination,
   BaseSegmentedButtons
 };

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,6 +142,7 @@
     --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;

package/src/types/pagination.d.ts

@@ -0,0 +1,13 @@
+import type { ICoreSize } from './utils';
+
+type PaginationColor = 'primary' | 'secondary' | 'white' | 'black';
+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/webpack.config.js

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

package/src/icons/index.ts

@@ -1,9 +0,0 @@
-const requireIcons = require.context(
-    "@/assets/icons",
-    false,
-    /\.svg$/
-  );
-  
-  requireIcons.keys().forEach((fileName) => {
-    requireIcons(fileName);
-  });