plugin-ui-for-kzt 0.0.23 → 0.0.27

package/src/components/BaseTable/BaseTable.vue

@@ -0,0 +1,411 @@
+<template>
+    <div class="base-table">
+        <div class="base-table__wrapper">
+            <table class="base-table__table">
+                <thead v-if="hasHeader">
+                    <slot name="header">
+                    <tr class="base-table__header">
+                        <!-- Чек‑бокс «Выбрать всё» -->
+                        <th v-if="showRowSelection" class="base-table__header-column">
+                            <span v-if="checkboxTitle">{{ checkboxTitle }}</span>
+                            <BaseCheckbox id="selectAll" size="small" v-model="isAllSelected" />
+                        </th>
+        
+                        <!-- Обычные колонки -->
+                        <th v-for="col in columns"
+                            :key="String(col.key)"
+                            class="base-table__header-column"
+                            @click="onHeaderClick(col)"
+                            :title="col.tooltip"
+                        >
+                            <div class="column-header">
+                                <component
+                                    v-if="col.icons?.[0]"
+                                    :is="col.icons[0]"
+                                    class="header-icon"
+                                />
+                                <span v-if="col.label">{{ col.label }}</span>
+                                <component
+                                    v-if="col.icons?.[1]"
+                                    :is="col.icons[1]"
+                                    class="header-icon"
+                                />
+                                <BaseIcon
+                                    v-if="col.sortable"
+                                    name="arrow-up"
+                                    size="extra-small"
+                                    class="base-table__sort-icon"
+                                    :class="{ '--active': sortOrder === 'desc' && sortKey === col.key }"
+                                />
+                            </div>
+                        </th>
+        
+                        <!-- Колонка‑действий -->
+                        <th v-if="showActions" class="base-table__cell base-table__header-column base-table__actions-column"></th>
+                    </tr>
+                    </slot>
+                </thead>
+                <transition-group tag="tbody"
+                    name="row"
+                    class="base-table__tbody"
+                    appear
+                >
+                        <!-- Список строк -->
+                        <template v-if="paginatedData.length">
+                            <tr 
+                                v-for="(row, rowIndex) in paginatedData"
+                                :key="rowId(row)"
+                                :class="{ '--is-disabled': row.disabled }"
+                                class="base-table__row"
+                            >
+            
+                            <!-- Чек‑бокс отдельной строки -->
+                            <td v-if="showRowSelection" class="base-table__cell">
+                            <BaseCheckbox
+                                :id="row.id"
+                                size="small"
+                                :modelValue="isRowSelected(row)"
+                                :disabled="row.disabled"
+                                @update:modelValue="toggleRow(row)"
+                            />
+                            </td>
+            
+                            <!-- Ячейки -->
+                            <td v-for="col in columns"
+                                :key="String(col.key)"
+                                class="base-table__cell">
+                            <!-- Пользовательский рендеринг ячейки -->
+                            <slot
+                                :name="`cell-${String(col.key)}`"
+                                :row="row"
+                                :value="row[col.key]"
+                            >
+                                {{ row[col.key] }}
+                            </slot>
+                            </td>
+            
+                            <!-- Колонка‑действий -->
+                            <td v-if="showActions" class="base-table__cell base-table__actions-column">
+                            <slot name="actions" :row="row">
+                                <BaseButton
+                                    v-for="action in actions"
+                                    :key="action.key"
+                                    :disabled="row.disabled"
+                                    size="extra-small"
+                                    color="quaternary-gray"
+                                    @click="action.handler(row)"
+                                >
+                                    <BaseIcon :name="action.icon" size="extra-small" />
+                                </BaseButton>
+                            </slot>
+                            </td>
+    
+                            <td v-if="$slots['row-menu']" class="base-table__cell base-table__menu-column">
+                                <slot name="row-menu" :row="row"></slot>
+                            </td>
+                        </tr>
+                        </template>
+            
+                        <!-- Пустой набор данных -->
+                        <tr v-else>
+                            <td :colspan="colspan" class="base-table__empty">
+                                <slot name="empty">
+                                    <div>
+                                        Нет данных
+                                    </div>
+                                </slot>
+                            </td>
+                        </tr>
+                    </transition-group>
+
+            </table>
+
+            <div v-if="showPagination" class="base-table__footer">
+                <BasePagination
+                    :totalPages="totalPages"
+                    :currentPage="currentPage"
+                    size="small"
+                    v-bind="pagination"
+                    @update:currentPage="onPageChange"
+                />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, defineProps, defineEmits, useSlots } from 'vue'
+import BasePagination from '../BasePagination/BasePagination.vue'
+import BaseCheckbox from '../BaseCheckbox/BaseCheckbox.vue'
+import BaseButton from '../BaseButton/BaseButton.vue'
+import BaseIcon from '../BaseIcon/BaseIcon.vue'
+import type {
+    Row,
+    Column,
+    BaseTableProps,
+} from '../../types/table'
+import type { TPaginationProps } from '../../types/pagination'
+
+const props = defineProps<BaseTableProps>()
+const emit = defineEmits<{
+    (e: 'update:selected', rows: Row[]): void
+    (e: 'select-all', selected: boolean): void
+    (e: 'sort-change', payload: { key: string; order: 'asc' | 'desc' }): void
+    (e: 'page-change', page: number): void
+}>()
+
+const colspan = computed(() => {
+    const base = props.columns.length
+    const extra =
+        (props.showRowSelection ? 1 : 0) +
+        (props.showActions ? 1 : 0) +
+        (useSlots()['row-menu'] ? 1 : 0)
+    return base + extra
+})
+
+const hasHeader = computed(() => props.columns.length > 0 || !!useSlots().header)
+
+/* ----------  Утилиты  ---------- */
+function rowId(row: Row): unknown {
+    if (props.rowKey) {
+        return typeof props.rowKey === 'function'
+        ? (props.rowKey as (r: Row) => unknown)(row)
+        : (row as any)[props.rowKey]
+    }
+
+    return (row as any).__uid ?? JSON.stringify(row)
+}
+
+/* ----------  СОРТИРОВКА  ---------- */
+const sortKey   = ref<string | null>(null)
+const sortOrder = ref<'asc' | 'desc'>('asc')
+
+function onHeaderClick(col: Column) {
+    if (!col.sortable) return
+
+    if (sortKey.value === col.key) {
+        sortOrder.value = sortOrder.value === 'desc' ? 'asc' : 'desc'
+    } else {
+        sortKey.value = col.key
+        sortOrder.value = 'desc'
+    }
+
+    emit('sort-change', { key: col.key, order: sortOrder.value })
+}
+
+/* ----------  ПАГИНАЦИЯ  ---------- */
+const pagination = computed<TPaginationProps>(() => props.pagination ?? { perPage: 10 })
+const perPage = computed(() => pagination.value.totalPages ?? 10)
+
+const totalPages = computed(() => {
+    if (!props.pagination) return 1
+    return Math.max(1, Math.ceil(props.data.length / perPage.value))
+})
+
+const showPagination = computed(() => totalPages.value > 1)
+
+const currentPage = ref(pagination.value.currentPage ?? 1)
+
+function onPageChange(page: number) {
+    currentPage.value = page
+    emit('page-change', page)
+}
+
+const paginatedData = computed(() => {
+    const start = (currentPage.value - 1) * perPage.value
+    const end = start + perPage.value
+    return props.data.slice(start, end)
+})
+
+/* ----------  ВЫБОР СТРОК (чек‑боксы) ---------- */
+const selectedIds = ref<Set<unknown>>(new Set())
+
+function isRowSelected(row: Row): boolean {
+    return selectedIds.value.has(rowId(row))
+}
+
+function toggleRow(row: Row) {
+    const id = rowId(row)
+    if (selectedIds.value.has(id)) selectedIds.value.delete(id)
+    else selectedIds.value.add(id)
+    emitSelected()
+}
+
+/* computed‑getter/setter «Выбрать всё» */
+const isAllSelected = computed<boolean>({
+    get: () => {
+        if (!props.showRowSelection) return false
+        return props.data.length > 0 && props.data.every((r: Row) => selectedIds.value.has(rowId(r)))
+    },
+    set: (val: boolean) => {
+        if (!props.showRowSelection) return
+        if (val) props.data.forEach((r: Row) => selectedIds.value.add(rowId(r)))
+        else selectedIds.value.clear()
+        emitSelected()
+    },
+})
+
+/** Эмитим массив выбранных строк */
+function emitSelected() {
+    const rows = props.data.filter((r: Row) => selectedIds.value.has(rowId(r)))
+    emit('update:selected', rows)
+}
+
+/* Синхронзация при изменении props.data */
+watch(
+    () => props.data,
+    () => {
+        const newIds = new Set(props.data.map(rowId))
+        selectedIds.value.forEach(id => {
+        if (!newIds.has(id)) selectedIds.value.delete(id)
+        })
+    },
+    { 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">
+@import '@/styles/variables';
+@import '@/styles/root';
+
+.base-table {
+    width: 100%;
+
+    &__wrapper {
+        display: flex;
+        flex-direction: column;
+        border: 1px solid var(--primary-black-200);
+        border-radius: var(--corner-radius-m);
+        background: var(--bg-light);
+        overflow: hidden;
+    }
+
+    &__table {
+        width: 100%;
+        border-collapse: collapse;
+        table-layout: fixed;
+    }
+
+    &__header-column,
+    &__cell {
+        text-align: left;
+        vertical-align: middle;
+    }
+
+    &__header {
+        width: 100%;
+        background: var(--primary-black-50);
+        border: 1px solid var(--primary-black-200);
+        color: var(--primary-black-600);
+        font: var(--typography-text-s-medium);
+    }
+
+    &__cell {
+        padding: var(--spacing-l) var(--spacing-xl);
+    }
+
+    &__cell:nth-child(odd) {
+        color: var(--primary-black-600);
+    }
+
+    &__cell:nth-child(even) {
+        color: var(--primary-text-primary);
+    }
+
+    &__header-column {
+        padding: var(--spacing-m) var(--spacing-xl);
+        user-select: none;
+    }
+
+    &__empty {
+        text-align: center;
+        font: var(--typography-text-xl-medium);
+        padding: var(--spacing-m);
+        width: 100%;
+    }
+
+    .column-header {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        cursor: pointer;
+    }
+
+    &__sort-icon {
+        color: var(--primary-black-600);
+        transition: transform 0.2s;
+    }
+
+    &__sort-icon.--active {
+        transform: rotate(180deg);
+    }
+
+    &__actions-column,
+    &__menu-column {
+        width: auto;
+        text-align: right;
+    }
+
+    &__footer {
+        padding: 20px;
+        display: flex;
+        justify-content: center;
+        background: var(--bg-light);
+    }
+
+    &__row {
+        border-bottom: 1px solid var(--primary-black-100);
+
+        &:hover {
+            background: var(--primary-black-100);
+        }
+
+        &.--is-disabled {
+            cursor: not-allowed;
+            background: var(--primary-black-50);
+        }
+    }
+}
+
+.row-enter-active,
+.row-leave-active {
+    transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.row-enter-from {
+    opacity: 0;
+    transform: translateY(12px);
+}
+.row-enter-to {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.row-leave-from {
+    opacity: 1;
+    transform: translateY(0);
+}
+.row-leave-to {
+    opacity: 0;
+    transform: translateY(-12px);
+}
+
+.row-leave-active {
+    position: absolute;
+    width: 100%;
+    left: 0;
+    top: -250px;
+    opacity: 0;
+}
+
+.base-table__tbody {
+    position: relative;
+}
+</style>