plugin-ui-for-kzt 0.0.23 → 0.0.25

package/src/components/BaseTable/README.md

@@ -0,0 +1,294 @@
+# BaseTable – универсальная таблица с пагинацией, сортировкой, выбором строк и анимацией  
+
+## 1. Обзор  
+
+`BaseTable` – готовый к использованию UI‑компонент, который покрывает самые распространённые сценарии работы с табличными данными:
+
+| Возможность | Как реализовано |
+|-------------|-----------------|
+| **Пагинация** | `BasePagination` под капотом, управляется пропом `pagination`. |
+| **Сортировка** | Указание `sortable: true` в колонке → клик генерирует событие `sort-change`. |
+| **Выбор строк** | Чек‑боксы в каждой строке и «Выбрать всё» в заголовке. |
+| **Отключённые строки** | Флаг `row.disabled` → визуальная стилизация и отключение чек‑бокса/кнопок. |
+| **Кастомные ячейки** | Слоты `cell-{key}` позволяют переопределять отрисовку любой ячейки. |
+| **Колонка‑действий** | Слот `actions` + массив `actions` (иконки + обработчики). |
+| **Меню строки** | Слот `row-menu` (например, выпадающий `BaseDropdown`). |
+
+## 2. API компонента  
+
+### Props  
+
+| Prop | Тип | По‑умолчанию | Описание |
+|------|-----|--------------|----------|
+| `data` | `Row[]` | `[]` | Массив строк, которые будут показаны в таблице. |
+| `columns` | `Column[]` | `[]` | Описание колонок (см. ниже). |
+| `rowKey` | `string \| ((row: Row) => unknown)` | `undefined` | Ключ/функция, используемая для уникального `key` строки. Если не задано – берётся `row.__uid` или JSON‑строка. |
+| `showRowSelection` | `boolean` | `false` | Показывать чек‑бокс выбора строки и «Выбрать всё» в заголовке. |
+| `checkboxTitle` | `string` | `''` | Текст рядом с чек‑боксом «Выбрать всё». |
+| `showActions` | `boolean` | `false` | Показать колонку‑действий (по‑умолчанию слоты `actions`). |
+| `actions` | `{ key: string; icon: string; handler: (row: Row) => void }[]` | `[]` | Массив действий, отрендеренных в колонке‑действий. Если `showActions` = `true`, а `actions` пустой – в слоте `actions` вы можете задать собственный UI. |
+| `showPagination` | `boolean` | `true` (авто‑вычисляется) | Показать блок пагинации в футере. |
+| `pagination` | `TPaginationProps` | `{ perPage: 10 }` | Параметры пагинации. Поддерживаемые свойства: <br>• `perPage` – количество строк на страницу.<br>• `currentPage` – текущая страница (управляемое значение).<br>• любые остальные свойства, которые принимает `BasePagination`. |
+| `showHeader` | `boolean` | `true` | Если `false`, полностью убирает `<thead>` (можно использовать собственный `slot` `header`). |
+| `rowSelectionDisabled` | `boolean` | `false` | Отключить возможность менять выбранные строки (чек‑боксы будут `disabled`). |
+| `rowClass` | `((row: Row) => string) \| string` | `''` | Дополнительный CSS‑класс для строки. Если функция – возвращает класс в зависимости от строки. |
+| `rowDisabledProp` | `string` | `'disabled'` | Имя свойства в объекте `Row`, которое считается флагом **disabled**. По‑умолчанию `row.disabled`. Позволяет переименовать, если в модели используется другое поле. |
+| `...rest` | — | — | Все остальные props передаются напрямую в `BasePagination` (через `v-bind="pagination"`). |
+
+### Events  
+
+| Event | Payload | Описание |
+|-------|---------|----------|
+| `update:selected` | `Row[]` | Вызывается каждый раз, когда меняется набор выбранных строк. |
+| `select-all` | `boolean` | Было ли отмечено «Выбрать всё». |
+| `sort-change` | `{ key: string; order: 'asc' \| 'desc' }` | Пользователь кликнул по сортируемой колонке. Компонент **не** сортирует данные сам, вы должны обновить массив `data` согласно полученному payload. |
+| `page-change` | `number` | Текущая страница изменилась (клик по пагинации). |
+
+### Slots  
+
+| Slot | Параметры | Описание |
+|------|-----------|----------|
+| `header` | — | Полностью заменяет содержимое `<thead>` (можно переопределить заголовок, добавить собственные ячейки). Если слот не задан, используется авто‑генерация из `columns`. |
+| `cell-{key}` | `{ row: Row; value: any }` | Кастомный рендер ячейки конкретного столбца. Пример: `<template #cell-name="{ row }"><strong>{{ row.name }}</strong></template>` |
+| `actions` | `{ row: Row }` | Содержимое колонки‑действий. По‑умолчанию выводятся кнопки из массива `actions`. |
+| `row-menu` | `{ row: Row }` | Дополнительный столбец‑меню (например, `BaseDropdown`). |
+| `empty` | — | Содержимое строки, показываемой когда `data` пустой (по‑умолчанию – `Нет данных`). |
+| `default` (для `<BaseTable>`) | — | Плейсхолдер – обычно не используется, так как контент задаётся через перечисленные выше слоты. |
+
+export interface Row {
+  /** Любые пользовательские поля */
+  [key: string]: unknown
+  /** Флаг, отключающий строку (по‑умолчанию `disabled`) */
+  disabled?: boolean
+}
+
+export interface Column {
+  /** Ключ доступа к полю из Row */
+  key: string
+  /** Текст в заголовке колонки */
+  label?: string
+  /** Пояснительная подсказка (title) */
+  tooltip?: string
+  /** Иконки слева и справа от заголовка (компоненты) */
+  icons?: [any, any]   // любая vue‑компонента
+  /** Делает колонку сортируемой */
+  sortable?: boolean
+  /** Ширина/стилизация – задаётся через CSS (необязательно) */
+  width?: string | number
+}
+
+export interface TPaginationProps {
+  perPage?: number          // сколько строк на страницу
+  currentPage?: number      // текущая страница (управляемый проп)
+}
+
+## 3. Примеры использования  
+
+### 3.1. Базовая таблица  
+
+<template>
+  <BaseTable :data="rows" :columns="cols" />
+</template>
+
+<script setup lang="ts">
+import BaseTable from '@/components/BaseTable/BaseTable.vue'
+
+const cols = [
+  { key: 'id', label: 'ID' },
+  { key: 'title', label: 'Заголовок' },
+  { key: 'date', label: 'Дата', sortable: true },
+]
+
+const rows = [
+  { id: 1, title: 'Заказ #123', date: '2024‑03‑01' },
+  { id: 2, title: 'Заказ #124', date: '2024‑03‑02' },
+  // …
+]
+</script>
+
+> В этом примере все функции по умолчанию (без пагинации, без выбора строк).
+
+### 3.2. Выбор строк (чек‑боксы)  
+
+<template>
+  <BaseTable
+    :data="items"
+    :columns="cols"
+    :show-row-selection="true"
+    @update:selected="onSelection"
+  />
+</template>
+
+<script setup lang="ts">
+import BaseTable from '@/components/BaseTable/BaseTable.vue'
+
+const cols = [{ key: 'name', label: 'Имя' }, { key: 'email', label: 'Email' }]
+
+const items = [
+  { id: 1, name: 'Иван', email: 'ivan@example.com' },
+  { id: 2, name: 'Мария', email: 'maria@example.com' },
+]
+
+function onSelection(selected) {
+  console.log('Выбрано строк:', selected)
+}
+</script>
+
+> При активировании `showRowSelection` в заголовке появляется чек‑бокс «Выбрать всё». Выбранные строки доступны в `selected`.
+
+<a name="example-sorting"></a>
+
+### 3.3. Сортируемые колонки  
+
+```vue
+<template>
+  <BaseTable
+    :data="sortedData"
+    :columns="cols"
+    @sort-change="handleSort"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import BaseTable from '@/components/BaseTable/BaseTable.vue'
+
+const cols = [
+  { key: 'name', label: 'Имя', sortable: true },
+  { key: 'age', label: 'Возраст', sortable: true },
+]
+
+const raw = [
+  { id: 1, name: 'Иван', age: 31 },
+  { id: 2, name: 'Мария', age: 27 },
+  { id: 3, name: 'Петр', age: 45 },
+]
+
+const sortKey = ref<string | null>(null)
+const sortOrder = ref<'asc' | 'desc'>('asc')
+
+function handleSort({ key, order }) {
+  sortKey.value = key
+  sortOrder.value = order
+}
+
+/* Сортируем массив реактивно */
+const sortedData = computed(() => {
+  if (!sortKey.value) return raw
+  return [...raw].sort((a, b) => {
+    const aVal = a[sortKey.value!]
+    const bVal = b[sortKey.value!]
+    if (aVal === bVal) return 0
+    if (sortOrder.value === 'asc') return aVal > bVal ? 1 : -1
+    else return aVal < bVal ? 1 : -1
+  })
+})
+</script>
+```
+
+> Компонент генерирует событие `sort-change`, а реальную сортировку вы делаете в родителе (как показано).
+
+<a name="example-pagination"></a>
+
+### 3.4. Пагинация  
+
+```vue
+<template>
+  <BaseTable
+    :data="bigList"
+    :columns="cols"
+    :pagination="{ perPage: 20, currentPage: 1 }"
+    @page-change="page => console.log('Страница:', page)"
+  />
+</template>
+
+<script setup lang="ts">
+import BaseTable from '@/components/BaseTable/BaseTable.vue'
+
+const cols = [{ key: 'index', label: '#' }, { key: 'value', label: 'Значение' }]
+
+// Генерируем 200 строк
+const bigList = Array.from({ length: 200 }, (_, i) => ({
+  index: i + 1,
+  value: `Элемент ${i + 1}`,
+}))
+</script>
+```
+
+> Компонент автоматически рассчитывает количество страниц (`Math.ceil(data.length / perPage)`) и отображает `BasePagination` в футере.
+
+<a name="example-disabled"></a>
+
+### 3.5. Отключённые строки  
+
+```vue
+<template>
+  <BaseTable
+    :data="rows"
+    :columns="cols"
+    :show-row-selection="true"
+    :show-actions="true"
+    :actions="rowActions"
+  />
+</template>
+
+<script setup lang="ts">
+import BaseTable from '@/components/BaseTable/BaseTable.vue'
+
+const cols = [{ key: 'name', label: 'Имя' }]
+
+const rows = [
+  { id: 1, name: 'Активный 1' },
+  { id: 2, name: 'Отключённый', disabled: true }, // <-- будет в сером стиле
+  { id: 3, name: 'Активный 2' },
+]
+
+const rowActions = [
+  {
+    key: 'edit',
+    icon: 'edit',
+    handler: (row) => console.log('edit', row),
+  },
+]
+</script>
+
+* Что происходит:
+  - Строка с полем `disabled: true` получает класс `--is-disabled`.
+  - Чек‑бокс и все кнопки в этой строке получают атрибут `disabled`.
+  - `pointer-events` отключены, поэтому пользователь не может кликнуть по ячейкам.
+
+
+### 3.6. Кастомные ячейки через слоты  
+
+<BaseTable :data="products" :columns="cols">
+  <!-- Ячейка «price» с форматированием -->
+  <template #cell-price="{ row }">
+    <span class="price">{{ formatPrice(row.price) }}</span>
+  </template>
+
+  <!-- Ячейка «status» с цветовой меткой -->
+  <template #cell-status="{ row }">
+    <span :class="['status', row.status]">{{ row.status }}</span>
+  </template>
+</BaseTable>
+
+### 3.7. Кастомные действия (вместо массива `actions`)  
+
+Если вам нужен более сложный UI в колонке‑действий, просто переопределите слот `actions`:
+
+<BaseTable
+  :data="users"
+  :columns="cols"
+  :show-actions="true"
+>
+  <template #actions="{ row }">
+    <BaseButton size="extra-small" @click="openProfile(row)">
+      <BaseIcon name="user" />
+    </BaseButton>
+
+    <BaseDropdown>
+      <BaseDropdownItem @click="archive(row)">В архив</BaseDropdownItem>
+      <BaseDropdownItem @click="remove(row)" danger>Удалить</BaseDropdownItem>
+    </BaseDropdown>
+  </template>
+</BaseTable>

package/src/components/BaseToast/BaseToast.vue

@@ -0,0 +1,200 @@
+<template>
+  <div class="base-toast" :class="classList" v-show="isOpen">
+    <div v-if="showIcon" class="base-toast__icon">
+      <base-icon :name="iconName" size="medium" />
+    </div>
+    <div class="base-toast__content">
+      <div class="base-toast__title">
+        {{ title }}
+      </div>
+      <div v-if="description" class="base-toast__description">
+        {{ description }}
+      </div>
+      <div
+        v-if="primaryActionText || secondaryActionText"
+        class="base-toast__actions"
+      >
+        <base-button
+          v-if="secondaryActionText"
+          color="secondary"
+          size="extra-small"
+          @click="emit('secondaryAction')"
+        >
+          {{ secondaryActionText }}
+        </base-button>
+        <base-button
+          v-if="primaryActionText"
+          color="primary"
+          size="extra-small"
+          @click="emit('primaryAction')"
+        >
+          {{ primaryActionText }}
+        </base-button>
+      </div>
+    </div>
+    <base-button
+      v-if="closable"
+      color="custom"
+      size="custom"
+      class="base-toast__close"
+      @click="emit('close')"
+    >
+      <base-icon name="close" size="medium" />
+    </base-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import BaseIcon from '../BaseIcon/BaseIcon.vue';
+import BaseButton from '../BaseButton/BaseButton.vue';
+import { computed } from 'vue';
+import type { IBaseToastProps } from '../../types/toast';
+
+const props = withDefaults(defineProps<IBaseToastProps>(), {
+  type: 'info',
+  showIcon: true,
+  closable: true,
+  withBackground: false,
+  isOpen: true,
+  duration: undefined,
+});
+
+const emit = defineEmits<{
+  (e: 'close'): void;
+  (e: 'primaryAction'): void;
+  (e: 'secondaryAction'): void;
+}>();
+
+const iconName = computed(() => {
+  switch (props.type) {
+    case 'success':
+      return 'toast-success';
+    case 'warning':
+      return 'toast-warning';
+    case 'error':
+      return 'toast-error';
+    case 'info':
+    default:
+      return 'toast-info';
+  }
+});
+
+const classList = computed(() => [
+  `base-toast--${props.type}`,
+  { 'base-toast--has-description': props.description },
+  { 'base-toast--has-background': props.withBackground },
+]);
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/variables';
+@import '../../styles/root';
+
+.base-toast {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-s);
+  padding: var(--spacing-m);
+  border: 1px solid var(--primary-black-200);
+  border-radius: var(--corner-radius-m);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  width: 100%;
+  max-width: 620px;
+  min-width: 335px;
+  background: var(--bg-light);
+  position: relative;
+  margin: 8px;
+  animation: slideIn 0.3s ease forwards;
+
+  @media (max-width: 768px) {
+    max-width: calc(100% - 16px);
+    min-width: calc(100% - 16px);
+    margin: 8px;
+  }
+
+  &--info,
+  &--success,
+  &--warning,
+  &--error {
+    border: none;
+  }
+
+  &.base-toast--has-background {
+    &.base-toast--info {
+      background: var(--primary-blue-100);
+    }
+    &.base-toast--success {
+      background: var(--success-green-light-05);
+    }
+    &.base-toast--warning {
+      background: var(--warning-orange-light-05);
+    }
+    &.base-toast--error {
+      background: var(--error-red-light-05);
+    }
+  }
+
+  &--has-description {
+    align-items: stretch;
+  }
+
+  &__icon {
+    display: flex;
+    align-items: flex-start;
+  }
+
+  &__content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-m);
+  }
+
+  &__title {
+    color: var(--primary-text-primary);
+    font: var(--typography-text-m-medium);
+  }
+
+  &__description {
+    color: var(--primary-text-secondary);
+    font: var(--typography-text-s-regular);
+  }
+
+  &__actions {
+    display: flex;
+    gap: var(--spacing-l);
+  }
+
+  &__close {
+    height: 100%;
+    background: none;
+    border: none;
+  }
+
+  &.base-toast--leave-active {
+    animation: slideOut 0.3s ease;
+  }
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes slideOut {
+  from {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+}
+</style>

package/src/components/BaseToast/README.md

@@ -0,0 +1,103 @@
+# Компонент `BaseToast` и Плагин `ToastPlugin`
+
+Компонент `BaseToast` — это универсальный компонент уведомлений (тостов) для отображения кратких сообщений пользователю с поддержкой различных типов (инфо, успех, предупреждение, ошибка) и кастомизацией. Плагин `ToastPlugin` интегрирует компонент в приложение Vue.js, предоставляя удобный API для управления тостами через глобальный объект `$toast`.
+
+## Использование
+
+### Базовый пример
+Используйте composable `useToast` для вызова тостов из любого компонента:
+
+```vue
+<template>
+  <div>
+    <base-button @click="openToast">Показать тост</base-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useToast } from '../composables/useToast';
+
+const toast = useToast();
+
+const openToast = () => {
+  toast.show('toast-1', {
+    title: 'Успех',
+    type: 'success',
+    description: 'Операция выполнена успешно!',
+    showIcon: true,
+    closable: true,
+    primaryActionText: 'Подтвердить',
+    secondaryActionText: 'Отмена',
+  });
+};
+</script>
+```
+
+### API
+#### Методы
+- **`$toast.show(id: string, props: IBaseToastProps)`**: Показывает новый тост.
+  - `id`: Уникальный идентификатор тоста (тосты с одинаковым `id` заменяют друг друга).
+  - `props`: Объект с настройками тоста (см. ниже).
+- **`$toast.hide(id: string)`**: Скрывает тост по указанному `id`.
+- **`$toast.clear()`**: Удаляет все тосты.
+
+#### Свойства `IBaseToastProps`
+- `title: string` (обязательно): Заголовок тоста.
+- `type?: 'info' | 'success' | 'warning' | 'error'`: Тип тоста (по умолчанию `'info'`).
+- `withBackground?: boolean`: Добавляет цветной фон в зависимости от типа (по умолчанию `false`).
+- `description?: string`: Описание тоста.
+- `showIcon?: boolean`: Показывать иконку (по умолчанию `true`).
+- `closable?: boolean`: Показывать кнопку закрытия (по умолчанию `true`).
+- `primaryActionText?: string`: Текст для основной кнопки действия.
+- `secondaryActionText?: string`: Текст для вторичной кнопки действия.
+- `duration?: number`: Время отображения в миллисекундах (по умолчанию рассчитывается: 5000 мс для текста ≤ 80 символов, 10000 мс для > 80 символов).
+
+### Примеры
+
+#### Тост с кастомным временем
+```typescript
+toast.show('toast-custom', {
+  title: 'Кастомный тост',
+  type: 'warning',
+  description: 'Это сообщение покажется на 3 секунды.',
+  duration: 3000,
+});
+```
+
+#### Тост с действиями
+```typescript
+toast.show('toast-action', {
+  title: 'Действие',
+  type: 'info',
+  primaryActionText: 'Подтвердить',
+  secondaryActionText: 'Отмена',
+  onPrimaryAction: () => console.log('Подтверждено'),
+  onSecondaryAction: () => console.log('Отменено'),
+});
+```
+
+#### Замена тоста
+```typescript
+toast.show('toast-1', { title: 'Тост 1', type: 'success' });
+toast.show('toast-1', { title: 'Тост 2', type: 'success' }); // Заменит первый тост
+```
+
+#### Несколько тостов
+```typescript
+toast.show('toast-info', { title: 'Инфо', type: 'info' });
+toast.show('toast-success', { title: 'Успех', type: 'success' });
+```
+Тосты отображаются в колонке (максимум 4 на десктопе, 3 на мобильных).
+
+
+### Анимации
+Анимации `slideIn` и `slideOut` определены в `BaseToast.vue`. Их можно переопределить, добавив собственные `@keyframes` в глобальные стили.
+
+## Поведение
+
+- **Позиционирование**: Тосты отображаются в правом верхнему углу экрана (`top: 20px`, `right: 20px`) с максимальной шириной 620px на десктопе. На мобильных устройствах (ширина ≤ 768px) растягиваются на всю ширину с отступами 8px.
+- **Автозакрытие**: По умолчанию 5 секунд для сообщений ≤ 80 символов, 10 секунд для > 80 символов. Можно задать кастомное время через `duration`.
+- **Замена тостов**: Тосты с одинаковым `id` заменяют друг друга. Тосты с разными `id` отображаются в колонке.
+- **Ограничение**: Максимум 4 тоста на десктопе, 3 на мобильных. При превышении удаляется самый старый тост.
+- **Закрытие**: Тосты закрываются при нажатии на кнопку закрытия (если `closable`), по истечении времени или при смене страницы (событие `popstate`).
+

package/src/components/BaseTooltip/BaseTooltip.vue

@@ -32,6 +32,7 @@
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, ref } from 'vue';
 import type { ITooltipProps } from '../../types/tooltip';
+import BaseIcon from '../BaseIcon/BaseIcon.vue';
 
 const props = withDefaults(defineProps<ITooltipProps>(), {
   position: 'top',

package/src/components/BaseUpload/BaseUpload.vue

@@ -389,7 +389,7 @@ gap: var(--spacing-l);
 }
 
 &__error {
-    color: var(--primary-red-500);
+    color: var(--error-red);
     margin-top: 0.5rem;
     font-size: var(--typography-text-s-regular);
 }

package/src/composables/useToast.ts

@@ -0,0 +1,10 @@
+import { inject } from 'vue';
+import type {  IToastApi } from '../types/toast';
+
+export function useToast() {
+    const toast = inject<IToastApi>('$toast');
+    if (!toast) {
+        throw new Error('toast plugin is not installed');
+    }
+    return toast;
+}