plugin-ui-for-kzt 0.0.22 → 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/BaseTabs/BaseTabs.vue

@@ -0,0 +1,193 @@
+<template>
+  <div class="base-tabs" :class="classList">
+    <div class="base-tabs__header">
+      <base-button
+        v-for="tab in tabs"
+        :key="tab.id"
+        size="custom"
+        color="custom"
+        class="base-tabs__tab"
+        :class="{ 'base-tabs__tab--active': activeTab === tab.id }"
+        @click="selectTab(tab.id)"
+        :disabled="tab.disabled"
+      >
+        <div v-if="tab.icon" class="base-tab__icon">
+          <component :is="tab.icon" />
+        </div>
+        <span>{{ tab.title }}</span>
+      </base-button>
+    </div>
+    <div class="base-tabs__content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+import type { TTabProps } from '../../types/tab.d';
+import BaseButton from '../BaseButton/BaseButton.vue';
+
+const props = withDefaults(defineProps<TTabProps>(), {
+  size: 'medium',
+  modelValue: 0,
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const activeTab = ref(props.modelValue);
+
+watch(() => props.modelValue, (newValue) => {
+  activeTab.value = newValue;
+});
+
+const selectTab = (id: number) => {
+  if (!props.tabs[id]?.disabled) {
+    activeTab.value = id;
+    emit('update:modelValue', id);
+  }
+};
+
+const classList = computed(() => [`base-tabs--${props.size}`]);
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/variables';
+@import '../../styles/root';
+
+.base-tabs {
+  width: 100%;
+
+  &__header {
+    display: flex;
+    align-items: stretch;
+    position: relative;
+    z-index: 1;
+
+    &::before {
+      content: '';
+      width: 100%;
+      border-bottom: 1px solid var(--primary-black-200);
+      position: absolute;
+      bottom: 0;
+    }
+  }
+
+  &__tab {
+    display: flex;
+    align-items: center;
+    padding: var(--spacing-m) var(--spacing-l);
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--primary-black-700);
+    transition: color 0.2s ease, border-color 0.2s ease;
+    white-space: nowrap;
+    position: relative;
+
+    @include hover {
+      & {
+        color: var(--primary-black);
+      }
+    }
+
+    @include pressed {
+      color: var(--primary-black);
+    }
+
+    @include is-disabled-state {
+      color: var(--primary-black-400);
+    }
+
+    &--active {
+      color: var(--primary-blue);
+      border-bottom: 2px solid var(--primary-blue);
+      z-index: 2;
+
+      @include hover {
+        & {
+          color: var(--primary-blue-700);
+          border-color: transparent;
+        }
+      }
+
+      @include pressed {
+        color: var(--primary-blue-deep);
+        border-color: transparent;
+      }
+    }
+
+    .base-tab__icon {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  // Размеры
+  &--extra-small {
+    .base-tabs__header {
+      gap: var(--spacing-l);
+    }
+
+    .base-tabs__tab {
+      height: 38px;
+      padding: var(--spacing-s) var(--spacing-m);
+      font: var(--typography-text-s-medium);
+      gap: var(--spacing-s);
+
+      &--active {
+        font: var(--typography-text-s-semibold);
+      }
+
+      .base-tab__icon {
+        width: 20px;
+        height: 20px;
+      }
+    }
+  }
+
+  &--small {
+    .base-tabs__header {
+      gap: var(--spacing-xl);
+    }
+
+    .base-tabs__tab {
+      height: 48px;
+      padding: var(--spacing-m) var(--spacing-l);
+      font: var(--typography-text-m-medium);
+      gap: var(--spacing-m);
+
+      &--active {
+        font: var(--typography-text-m-semibold);
+      }
+
+      .base-tab__icon {
+        width: 24px;
+        height: 24px;
+      }
+    }
+  }
+
+  &--medium {
+    .base-tabs__header {
+      gap: var(--spacing-xl);
+    }
+
+    .base-tabs__tab {
+      height: 56px;
+      padding: var(--spacing-l) var(--spacing-xl);
+      font: var(--typography-text-l-medium);
+      gap: var(--spacing-m);
+
+      &--active {
+        font: var(--typography-text-l-semibold);
+      }
+
+      .base-tab__icon {
+        width: 32px;
+        height: 32px;
+      }
+    }
+  }
+}
+</style>

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>