plugin-ui-for-kzt 0.0.28 → 0.0.30

package/src/components/BaseTable/BaseTable.vue

@@ -4,21 +4,22 @@
             <table class="base-table__table">
                 <thead v-if="hasHeader">
                     <slot name="header">
-                    <tr class="base-table__header">
+                    <tr class="base-table__header" :style="headerStyle">
                         <!-- Чек‑бокс «Выбрать всё» -->
-                        <th v-if="showRowSelection" class="base-table__header-column">
+                        <th v-if="showRowSelection" class="base-table__header-column" :style="getColumnStyle(0)">
                             <span v-if="checkboxTitle">{{ checkboxTitle }}</span>
                             <BaseCheckbox id="selectAll" size="small" v-model="isAllSelected" />
                         </th>
         
                         <!-- Обычные колонки -->
-                        <th v-for="col in columns"
+                        <th v-for="(col, index) in columns"
                             :key="String(col.key)"
                             class="base-table__header-column"
                             @click="onHeaderClick(col)"
                             :title="col.tooltip"
+                            :style="{ ...getColumnStyle(getColumnIndex(Number(index))), ...getAlignStyle(col) }"
                         >
-                            <div class="column-header">
+                            <div class="column-header" :style="{ justifyContent: getAlignStyle(col).justifyContent }">
                                 <component
                                     v-if="col.icons?.[0]"
                                     :is="col.icons[0]"
@@ -41,11 +42,84 @@
                         </th>
         
                         <!-- Колонка‑действий -->
-                        <th v-if="showActions" class="base-table__cell base-table__header-column base-table__actions-column"></th>
+                        <th v-if="showActions" class="base-table__cell base-table__header-column base-table__actions-column" :style="getColumnStyle(actionsColumnIndex)"></th>
+                        
+                        <!-- Колонка меню -->
+                        <th v-if="$slots['row-menu']" class="base-table__cell base-table__header-column base-table__menu-column" :style="getColumnStyle(menuColumnIndex)"></th>
                     </tr>
                     </slot>
                 </thead>
-                <transition-group tag="tbody"
+                <!-- Виртуальный скролл для больших списков -->
+                <template v-if="useVirtualScroll">
+                    <tbody class="base-table__virtual-tbody">
+                        <tr>
+                            <td :colspan="colspan" class="base-table__virtual-cell">
+                                <recycle-scroller
+                                    :items="paginatedData"
+                                    :item-size="60"
+                                    key-field="id"
+                                    class="base-table__scroller"
+                                    :style="{ maxHeight: virtualScrollHeight + 'px' }"
+                                    @scroll="handleScroll"
+                                >
+                                    <template #default="{ item, index }: { item: Row, index: number }">
+                                        <div class="base-table__virtual-row" :style="{ gridTemplateColumns: virtualGridColumns }">
+                                            <!-- Чек‑бокс отдельной строки -->
+                                            <div v-if="showRowSelection" class="base-table__virtual-cell-checkbox">
+                                                <BaseCheckbox
+                                                    :id="String(item.id || index)"
+                                                    size="small"
+                                                    :modelValue="isRowSelected(item)"
+                                                    :disabled="Boolean(item.disabled)"
+                                                    @update:modelValue="toggleRow(item)"
+                                                />
+                                            </div>
+                                
+                                            <!-- Ячейки -->
+                                            <div v-for="col in columns"
+                                                :key="String(col.key)"
+                                                class="base-table__virtual-cell-content"
+                                                :style="getAlignStyle(col)">
+                                                <!-- Пользовательский рендеринг ячейки -->
+                                                <slot
+                                                    :name="`cell-${String(col.key)}`"
+                                                    :row="item"
+                                                    :value="item[col.key]"
+                                                >
+                                                    {{ item[col.key] }}
+                                                </slot>
+                                            </div>
+                                
+                                            <!-- Колонка‑действий -->
+                                            <div v-if="showActions" class="base-table__virtual-cell-actions">
+                                                <slot name="actions" :row="item">
+                                                    <BaseButton
+                                                        v-for="action in actions"
+                                                        :key="action.key"
+                                                        :disabled="Boolean(item.disabled)"
+                                                        size="extra-small"
+                                                        color="quaternary-gray"
+                                                        only-icon
+                                                        @click="action.handler(item)"
+                                                    >
+                                                        <BaseIcon :name="typeof action.icon === 'string' ? action.icon : 'help'" size="custom" />
+                                                    </BaseButton>
+                                                </slot>
+                                            </div>
+                                    
+                                            <div v-if="$slots['row-menu']" class="base-table__virtual-cell-menu">
+                                                <slot name="row-menu" :row="item"></slot>
+                                            </div>
+                                        </div>
+                                    </template>
+                                </recycle-scroller>
+                            </td>
+                        </tr>
+                    </tbody>
+                </template>
+
+                <!-- Обычный рендеринг для небольших списков -->
+                <transition-group v-else tag="tbody"
                     name="row"
                     class="base-table__tbody"
                     appear
@@ -54,18 +128,18 @@
                         <template v-if="paginatedData.length">
                             <tr 
                                 v-for="(row, rowIndex) in paginatedData"
-                                :key="rowId(row)"
-                                :class="{ '--is-disabled': row.disabled }"
+                                :key="String(rowId(row))"
+                                :class="{ '--is-disabled': Boolean(row.disabled) }"
                                 class="base-table__row"
                             >
             
                             <!-- Чек‑бокс отдельной строки -->
                             <td v-if="showRowSelection" class="base-table__cell">
                             <BaseCheckbox
-                                :id="row.id"
+                                :id="String(row.id || rowIndex)"
                                 size="small"
                                 :modelValue="isRowSelected(row)"
-                                :disabled="row.disabled"
+                                :disabled="Boolean(row.disabled)"
                                 @update:modelValue="toggleRow(row)"
                             />
                             </td>
@@ -73,7 +147,8 @@
                             <!-- Ячейки -->
                             <td v-for="col in columns"
                                 :key="String(col.key)"
-                                class="base-table__cell">
+                                class="base-table__cell"
+                                :style="getAlignStyle(col)">
                             <!-- Пользовательский рендеринг ячейки -->
                             <slot
                                 :name="`cell-${String(col.key)}`"
@@ -90,12 +165,13 @@
                                 <BaseButton
                                     v-for="action in actions"
                                     :key="action.key"
-                                    :disabled="row.disabled"
+                                    :disabled="Boolean(row.disabled)"
                                     size="extra-small"
                                     color="quaternary-gray"
+                                    only-icon
                                     @click="action.handler(row)"
                                 >
-                                    <BaseIcon :name="action.icon" size="extra-small" />
+                                    <BaseIcon :name="typeof action.icon === 'string' ? action.icon : 'help'" size="custom" />
                                 </BaseButton>
                             </slot>
                             </td>
@@ -135,6 +211,8 @@
 
 <script setup lang="ts">
 import { ref, computed, watch, defineProps, defineEmits, useSlots } from 'vue'
+import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
+import { RecycleScroller } from 'vue-virtual-scroller'
 import BasePagination from '../BasePagination/BasePagination.vue'
 import BaseCheckbox from '../BaseCheckbox/BaseCheckbox.vue'
 import BaseButton from '../BaseButton/BaseButton.vue'
@@ -152,6 +230,7 @@ const emit = defineEmits<{
     (e: 'select-all', selected: boolean): void
     (e: 'sort-change', payload: { key: string; order: 'asc' | 'desc' }): void
     (e: 'page-change', page: number): void
+    (e: 'scroll-end'): void
 }>()
 
 const colspan = computed(() => {
@@ -195,14 +274,15 @@ function onHeaderClick(col: Column) {
 
 /* ----------  ПАГИНАЦИЯ  ---------- */
 const pagination = computed<TPaginationProps>(() => props.pagination ?? { perPage: 10 })
-const perPage = computed(() => pagination.value.totalPages ?? 10)
+const perPage = computed(() => pagination.value.perPage ?? 10)
 
 const totalPages = computed(() => {
     if (!props.pagination) return 1
-    return Math.max(1, Math.ceil(props.data.length / perPage.value))
+    const perPageValue = Number(perPage.value) || 10
+    return Math.max(1, Math.ceil(props.data.length / perPageValue))
 })
 
-const showPagination = computed(() => totalPages.value > 1)
+const showPagination = computed(() => props.pagination && totalPages.value > 1)
 
 const currentPage = ref(pagination.value.currentPage ?? 1)
 
@@ -212,11 +292,121 @@ function onPageChange(page: number) {
 }
 
 const paginatedData = computed(() => {
-    const start = (currentPage.value - 1) * perPage.value
-    const end = start + perPage.value
+    if (!props.pagination) {
+        return props.data
+    }
+    
+    const perPageValue = Number(perPage.value) || 10
+    const start = (currentPage.value - 1) * perPageValue
+    const end = start + perPageValue
     return props.data.slice(start, end)
 })
 
+const useVirtualScroll = computed<boolean>(() => props.virtualScroll && props.data.length > (props.virtualScrollThreshold ?? 100))
+const virtualScrollHeight = computed<number>(() => props.virtualScrollHeight ?? 400)
+
+const scrollbarWidth = ref<number>(0)
+
+function getScrollbarWidth(): number {
+    const outer = document.createElement('div')
+    outer.style.visibility = 'hidden'
+    outer.style.overflow = 'scroll'
+    document.body.appendChild(outer)
+    
+    const inner = document.createElement('div')
+    outer.appendChild(inner)
+    
+    const width = outer.offsetWidth - inner.offsetWidth
+    document.body.removeChild(outer)
+    
+    return width
+}
+
+watch(useVirtualScroll, (isVirtual) => {
+    if (isVirtual) {
+        scrollbarWidth.value = getScrollbarWidth()
+    }
+}, { immediate: true })
+
+const allColumnWidths = computed(() => {
+    const widths = []
+
+    if (props.showRowSelection) {
+        widths.push('60px')
+    }
+    
+    for (let i = 0; i < props.columns.length; i++) {
+        const col = props.columns[i]
+        if (col.width) {
+            widths.push(typeof col.width === 'number' ? `${col.width}px` : col.width)
+        } else {
+            widths.push('1fr')
+        }
+    }
+    
+    if (props.showActions) {
+        widths.push('auto')
+    }
+    
+    if (useSlots()['row-menu']) {
+        widths.push('auto')
+    }
+    
+    return widths as string[]
+})
+
+const virtualGridColumns = computed<string>(() => allColumnWidths.value.join(' '))
+
+const actionsColumnIndex = computed<number>(() => {
+    const total = allColumnWidths.value.length
+    return useSlots()['row-menu'] ? total - 2 : total - 1
+})
+
+const menuColumnIndex = computed<number>(() => allColumnWidths.value.length - 1)
+
+function getColumnIndex(colIndex: number): number {
+    return props.showRowSelection ? colIndex + 1 : colIndex
+}
+
+const headerStyle = computed(() => {
+    if (!useVirtualScroll.value) return {}
+    return {
+        display: 'grid' as const,
+        gridTemplateColumns: virtualGridColumns.value,
+        paddingRight: `${scrollbarWidth.value}px`
+    }
+})
+
+function getColumnStyle(index: number): Record<string, string | undefined> {
+    if (!useVirtualScroll.value) return {}
+    
+    const width = allColumnWidths.value[index]
+    if (!width) return {}
+    
+    return {
+        width: width === 'auto' || width.includes('fr') ? width : width,
+        minWidth: width === 'auto' || width.includes('fr') ? undefined : width,
+        maxWidth: width === 'auto' || width.includes('fr') ? undefined : width,
+    }
+}
+
+function getAlignStyle(col: Column): { textAlign: 'left' | 'center' | 'right'; justifyContent: string } {
+    const align = col.align || 'left'
+    return {
+        textAlign: align,
+        justifyContent: align === 'right' ? 'flex-end' : align === 'center' ? 'center' : 'flex-start'
+    }
+}
+
+const handleScroll = (event: Event) => {
+    const target = event.target as HTMLElement
+    const { scrollTop, scrollHeight, clientHeight } = target
+    
+    if (scrollTop + clientHeight >= scrollHeight - 100) {
+        emit('scroll-end')
+    }
+}
+
 /* ----------  ВЫБОР СТРОК (чек‑боксы) ---------- */
 const selectedIds = ref<Set<unknown>>(new Set())
 
@@ -255,7 +445,7 @@ function emitSelected() {
 watch(
     () => props.data,
     () => {
-        const newIds = new Set(props.data.map(rowId))
+        const newIds = new Set(props.data.map((row: Row) => rowId(row)))
         selectedIds.value.forEach(id => {
         if (!newIds.has(id)) selectedIds.value.delete(id)
         })
@@ -263,12 +453,6 @@ watch(
     { deep: true }
 )
 
-/* ----------  Подтаблица (expand / collapse) ---------- */
-const expandedRows = ref<Set<number>>(new Set())
-function toggleSubRow(idx: number) {
-    if (expandedRows.value.has(idx)) expandedRows.value.delete(idx)
-    else expandedRows.value.add(idx)
-}
 </script>
 
 <style scoped lang="scss">
@@ -290,7 +474,7 @@ function toggleSubRow(idx: number) {
     &__table {
         width: 100%;
         border-collapse: collapse;
-        table-layout: fixed;
+        table-layout: auto;
     }
 
     &__header-column,
@@ -353,6 +537,11 @@ function toggleSubRow(idx: number) {
         text-align: right;
     }
 
+    &__actions-column {
+        display: flex;
+        align-items: center;
+    }
+
     &__footer {
         padding: 20px;
         display: flex;
@@ -408,4 +597,67 @@ function toggleSubRow(idx: number) {
 .base-table__tbody {
     position: relative;
 }
+
+.base-table__virtual-tbody {
+    width: 100%;
+}
+
+.base-table__virtual-cell {
+    padding: 0;
+    border: none;
+}
+
+.base-table__scroller {
+    width: 100%;
+}
+
+.base-table__virtual-row {
+    display: grid;
+    align-items: center;
+    width: 100%;
+    min-height: 60px;
+    border-bottom: 1px solid var(--primary-black-100);
+    padding: var(--spacing-l) 0;
+    gap: 0;
+}
+
+.base-table__virtual-row:hover {
+    background: var(--primary-black-100);
+}
+
+.base-table__virtual-row.--is-disabled {
+    cursor: not-allowed;
+    background: var(--primary-black-50);
+}
+
+.base-table__virtual-cell-checkbox {
+    display: flex;
+    align-items: center;
+    padding: 0 var(--spacing-xl);
+}
+
+.base-table__virtual-cell-content {
+    display: flex;
+    align-items: center;
+    text-align: left;
+    white-space: nowrap;
+    padding: 0 var(--spacing-xl);
+
+    @include text-clamp(1);
+}
+
+.base-table__virtual-cell-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-xs);
+    justify-content: flex-end;
+    padding: 0 var(--spacing-xl);
+}
+
+.base-table__virtual-cell-menu {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 var(--spacing-xl);
+}
 </style>

package/src/components/BaseTable/README.md

@@ -73,8 +73,26 @@ export interface Column {
   icons?: [any, any]   // любая vue‑компонента
   /** Делает колонку сортируемой */
   sortable?: boolean
-  /** Ширина/стилизация – задаётся через CSS (необязательно) */
+  /** 
+   * Ширина колонки (необязательно)
+   * Поддерживаемые форматы:
+   * - Строка с единицами: '120px', '1fr', '2fr', 'auto'
+   * - Число (будет преобразовано в пиксели): 120 → '120px'
+   * - Если не указано, используется '1fr' (равномерное распределение)
+   * 
+   * Важно: ширины применяются как к обычной таблице, так и к виртуальному скроллу,
+   * обеспечивая полную синхронизацию thead и tbody
+   */
   width?: string | number
+  /**
+   * Выравнивание содержимого колонки (необязательно)
+   * - 'left' - выравнивание влево (по умолчанию)
+   * - 'center' - выравнивание по центру
+   * - 'right' - выравнивание вправо
+   * 
+   * Применяется как к заголовку, так и к ячейкам колонки
+   */
+  align?: 'left' | 'center' | 'right'
 }
 
 export interface TPaginationProps {
@@ -292,3 +310,80 @@ const rowActions = [
     </BaseDropdown>
   </template>
 </BaseTable>
+
+### 3.8. Настройка ширины колонок
+
+Можно точно контролировать ширину каждой колонки через свойство `width`:
+
+```vue
+<template>
+  <BaseTable
+    :data="data"
+    :columns="columns"
+    :virtual-scroll="true"
+    :virtual-scroll-height="400"
+    :show-row-selection="true"
+    :show-actions="true"
+  />
+</template>
+
+<script setup lang="ts">
+import BaseTable from '@/components/BaseTable/BaseTable.vue'
+
+const columns = [
+  { key: 'id', label: 'ID', width: '80px' },         // Фиксированная ширина
+  { key: 'name', label: 'Имя', width: 200 },         // Число автоматически → '200px'
+  { key: 'email', label: 'Email', width: '1fr' },    // Гибкая ширина (CSS Grid)
+  { key: 'status', label: 'Статус', width: '120px' } // Фиксированная ширина
+]
+
+const data = [
+  { id: 1, name: 'Иван', email: 'ivan@example.com', status: 'Активен' },
+  // ...
+]
+</script>
+```
+
+**Преимущества:**
+- ✅ Ширины колонок **синхронизированы** между `<thead>` и виртуальным скроллом
+- ✅ Поддержка различных единиц: `px`, `fr`, `auto`, числа
+- ✅ Если `width` не указан, используется `1fr` (равномерное распределение)
+- ✅ Особенно важно для виртуального скролла, где `thead` и `tbody` используют разные системы рендеринга
+- ✅ Автоматическая компенсация ширины скроллбара - thead получает `padding-right`, предотвращая смещение колонок
+
+### 3.9. Выравнивание содержимого колонок
+
+Вы можете настроить выравнивание для каждой колонки через свойство `align`:
+
+```vue
+<template>
+  <BaseTable
+    :data="data"
+    :columns="columns"
+  />
+</template>
+
+<script setup lang="ts">
+import BaseTable from '@/components/BaseTable/BaseTable.vue'
+
+const columns = [
+  { key: 'id', label: 'ID', width: '80px', align: 'center' },      // ID по центру
+  { key: 'name', label: 'Имя', width: '200px', align: 'left' },    // Текст влево (по умолчанию)
+  { key: 'price', label: 'Цена', width: '120px', align: 'right' }, // Числа вправо
+  { key: 'status', label: 'Статус', width: '100px', align: 'center' } // Статус по центру
+]
+
+const data = [
+  { id: 1, name: 'Товар 1', price: '1000₸', status: 'Активен' },
+  { id: 2, name: 'Товар 2', price: '2500₸', status: 'Неактивен' },
+  // ...
+]
+</script>
+```
+
+**Когда использовать:**
+- `align: 'left'` - текстовые данные (имена, описания) - по умолчанию
+- `align: 'center'` - короткие значения (ID, статусы, иконки)
+- `align: 'right'` - числовые данные (цены, количество, проценты)
+
+**Важно:** Выравнивание применяется и к заголовку колонки, и к её содержимому, обеспечивая визуальную согласованность.

package/src/components/BaseTooltip/BaseTooltip.vue

@@ -1,6 +1,7 @@
 <template>
-  <div class="base-tooltip-container">
+  <div class="base-tooltip-container" ref="containerRef">
     <div
+      ref="triggerRef"
       class="base-tooltip__trigger"
       @mouseenter="showTooltip"
       @mouseleave="hideTooltip"
@@ -17,6 +18,7 @@
     <Transition name="tooltip">
       <div
         v-if="isVisible"
+        ref="tooltipRef"
         class="base-tooltip"
         :class="classList"
       >
@@ -42,6 +44,9 @@ const props = withDefaults(defineProps<ITooltipProps>(), {
 });
 
 const isVisible = ref(false);
+const containerRef = ref<HTMLElement>();
+const triggerRef = ref<HTMLElement>();
+const tooltipRef = ref<HTMLElement>();
 
 function showTooltip() {
   if (props.trigger === 'hover') {
@@ -62,10 +67,9 @@ function toggleTooltip() {
 }
 
 function handleClickOutside(event: MouseEvent) {
-  if (props.trigger === 'click' && isVisible.value) {
-    const tooltip = document.querySelector('.base-tooltip');
-    const trigger = document.querySelector('.base-tooltip__trigger');
-    if (tooltip && trigger && !tooltip.contains(event.target as Node) && !trigger.contains(event.target as Node)) {
+  if (props.trigger === 'click' && isVisible.value && containerRef.value) {
+    const target = event.target as Node;
+    if (!containerRef.value.contains(target)) {
       isVisible.value = false;
     }
   }