dxd-style-code 0.1.7 → 0.1.8

package/src/composables/useTableColumns.js

@@ -0,0 +1,88 @@
+import { ref, computed } from 'vue';
+
+/**
+ * Composable для управления столбцами таблицы
+ */
+export function useTableColumns(props, emit) {
+  // Скрытые столбцы (по ключу)
+  const hiddenColumns = ref([]);
+
+  // Видимые столбцы
+  const visibleColumns = computed(() => {
+    return props.columns.filter(col => !hiddenColumns.value.includes(col.key));
+  });
+
+  // Все столбцы с информацией о видимости
+  const columnsWithVisibility = computed(() => {
+    return props.columns.map(col => ({
+      ...col,
+      visible: !hiddenColumns.value.includes(col.key),
+    }));
+  });
+
+  // Переключить видимость столбца
+  const toggleColumn = (key) => {
+    const index = hiddenColumns.value.indexOf(key);
+    if (index > -1) {
+      hiddenColumns.value.splice(index, 1);
+    } else {
+      hiddenColumns.value.push(key);
+    }
+    
+    emit('column-toggle', { 
+      column: key, 
+      visible: index > -1,
+      hiddenColumns: [...hiddenColumns.value] 
+    });
+  };
+
+  // Показать столбец
+  const showColumn = (key) => {
+    const index = hiddenColumns.value.indexOf(key);
+    if (index > -1) {
+      hiddenColumns.value.splice(index, 1);
+      emit('column-show', key);
+    }
+  };
+
+  // Скрыть столбец
+  const hideColumn = (key) => {
+    if (!hiddenColumns.value.includes(key)) {
+      hiddenColumns.value.push(key);
+      emit('column-hide', key);
+    }
+  };
+
+  // Показать все столбцы
+  const showAllColumns = () => {
+    hiddenColumns.value = [];
+    emit('columns-show-all');
+  };
+
+  // Скрыть все столбцы кроме обязательных
+  const hideAllColumns = (exceptKeys = []) => {
+    hiddenColumns.value = props.columns
+      .filter(col => !exceptKeys.includes(col.key))
+      .map(col => col.key);
+    emit('columns-hide-all');
+  };
+
+  // Сбросить к дефолтным
+  const resetColumns = () => {
+    hiddenColumns.value = [];
+    emit('columns-reset');
+  };
+
+  return {
+    hiddenColumns,
+    visibleColumns,
+    columnsWithVisibility,
+    toggleColumn,
+    showColumn,
+    hideColumn,
+    showAllColumns,
+    hideAllColumns,
+    resetColumns,
+  };
+}
+

package/src/composables/useTableData.js

@@ -0,0 +1,82 @@
+import { ref, watch } from 'vue';
+
+/**
+ * Composable для управления данными таблицы
+ * Поддержка локального и API режимов
+ */
+export function useTableData(props, emit) {
+  const localData = ref([]);
+  const loading = ref(false);
+  const error = ref(null);
+
+  // Локальный режим - копируем данные из props
+  const loadLocalData = () => {
+    localData.value = [...props.data];
+  };
+
+  // API режим - загрузка данных с сервера
+  const loadApiData = async (params = {}) => {
+    if (!props.apiUrl) {
+      error.value = 'API URL не указан';
+      return;
+    }
+
+    loading.value = true;
+    error.value = null;
+
+    try {
+      const queryParams = new URLSearchParams({
+        ...props.apiParams,
+        ...params,
+      }).toString();
+
+      const url = `${props.apiUrl}${queryParams ? `?${queryParams}` : ''}`;
+      
+      const response = await fetch(url, {
+        method: props.apiMethod || 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      const data = await response.json();
+      localData.value = Array.isArray(data) ? data : data.data || [];
+      
+      emit('data-loaded', localData.value);
+    } catch (err) {
+      error.value = err.message;
+      emit('error', err);
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  // Загрузка данных в зависимости от режима
+  const loadData = (params) => {
+    if (props.mode === 'api') {
+      return loadApiData(params);
+    } else {
+      loadLocalData();
+      return Promise.resolve();
+    }
+  };
+
+  // Следим за изменениями в props.data для локального режима
+  watch(() => props.data, () => {
+    if (props.mode === 'local') {
+      loadLocalData();
+    }
+  }, { immediate: true, deep: true });
+
+  return {
+    localData,
+    loading,
+    error,
+    loadData,
+  };
+}
+

package/src/composables/useTableFilter.js

@@ -0,0 +1,158 @@
+import { ref, computed } from 'vue';
+
+/**
+ * Composable для фильтрации данных таблицы
+ */
+export function useTableFilter(data, props, emit, sourceData = null) {
+  const filters = ref({});
+  const searchQuery = ref('');
+
+  // Исходные данные для сбора опций фильтра (если не переданы, используем data)
+  const sourceDataForOptions = sourceData || data;
+
+  // Фильтрованные данные
+  const filteredData = computed(() => {
+    let result = [...data.value];
+
+    // Глобальный поиск
+    if (searchQuery.value && props.searchable) {
+      const query = searchQuery.value.toLowerCase();
+      result = result.filter(row => {
+        return props.columns.some(col => {
+          const value = row[col.key];
+          return value != null && String(value).toLowerCase().includes(query);
+        });
+      });
+    }
+
+    // Фильтрация по столбцам
+    if (props.filterable && Object.keys(filters.value).length > 0) {
+      result = result.filter(row => {
+        return Object.entries(filters.value).every(([column, filterValue]) => {
+          // Пустое значение = показать все
+          if (!filterValue || filterValue === '') return true;
+          
+          const cellValue = row[column];
+          
+          // Точное совпадение для select-based фильтров
+          return cellValue === filterValue;
+        });
+      });
+    }
+
+    return result;
+  });
+
+  // Применить фильтр для столбца
+  const applyFilter = (column, value) => {
+    if (value) {
+      filters.value[column] = value;
+    } else {
+      delete filters.value[column];
+    }
+
+    emit('filter', { column, value, filters: { ...filters.value } });
+  };
+
+  // Очистить все фильтры
+  const clearFilters = () => {
+    filters.value = {};
+    searchQuery.value = '';
+    emit('filter-clear');
+  };
+
+  // Очистить фильтр столбца
+  const clearColumnFilter = (column) => {
+    delete filters.value[column];
+    emit('filter', { column, value: null, filters: { ...filters.value } });
+  };
+
+  // Собрать уникальные значения для столбца (из исходных данных)
+  const getUniqueColumnValues = (columnKey) => {
+    const uniqueValues = new Set();
+    sourceDataForOptions.value.forEach(row => {
+      const value = row[columnKey];
+      if (value != null && value !== '') {
+        uniqueValues.add(value);
+      }
+    });
+    
+    return Array.from(uniqueValues)
+      .sort()
+      .map(value => ({
+        value: value,
+        label: String(value),
+      }));
+  };
+
+  // Получить опции фильтра для столбца
+  const getFilterOptions = (column) => {
+    // Приоритет явным filterOptions
+    if (column.filterOptions && Array.isArray(column.filterOptions)) {
+      // Добавляем опцию "Все" в начало, если её нет
+      const hasAllOption = column.filterOptions.some(opt => opt.value === '' || opt.value === null);
+      if (!hasAllOption) {
+        return [
+          { value: '', label: 'Все' },
+          ...column.filterOptions
+        ];
+      }
+      return column.filterOptions;
+    }
+    
+    // Иначе собираем из данных
+    const uniqueValues = getUniqueColumnValues(column.key);
+    // Добавляем опцию "Все" в начало
+    return [
+      { value: '', label: 'Все' },
+      ...uniqueValues
+    ];
+  };
+
+  // Получить список активных фильтров с метаданными
+  const activeFilters = computed(() => {
+    if (!props.filterable || Object.keys(filters.value).length === 0) {
+      return [];
+    }
+
+    return Object.entries(filters.value)
+      .map(([columnKey, filterValue]) => {
+        if (!filterValue || filterValue === '') return null;
+
+        // Найти колонку
+        const column = props.columns.find(col => col.key === columnKey);
+        if (!column) return null;
+
+        // Найти label для значения
+        const filterOptions = getFilterOptions(column);
+        const option = filterOptions.find(opt => opt.value === filterValue);
+        const valueLabel = option ? option.label : String(filterValue);
+
+        return {
+          column: columnKey,
+          columnLabel: column.label,
+          value: filterValue,
+          valueLabel: valueLabel,
+        };
+      })
+      .filter(Boolean);
+  });
+
+  // Количество активных фильтров
+  const activeFiltersCount = computed(() => {
+    return activeFilters.value.length;
+  });
+
+  return {
+    filters,
+    searchQuery,
+    filteredData,
+    applyFilter,
+    clearFilters,
+    clearColumnFilter,
+    getFilterOptions,
+    activeFilters,
+    activeFiltersCount,
+  };
+}
+

package/src/composables/useTablePagination.js

@@ -0,0 +1,89 @@
+import { ref, computed, watch } from 'vue';
+
+/**
+ * Composable для пагинации данных таблицы
+ */
+export function useTablePagination(data, props, emit) {
+  const currentPage = ref(1);
+  const pageSize = ref(props.defaultPageSize || 10);
+
+  // Общее количество страниц
+  const totalPages = computed(() => {
+    if (!props.paginated || data.value.length === 0) return 1;
+    return Math.ceil(data.value.length / pageSize.value);
+  });
+
+  // Пагинированные данные
+  const paginatedData = computed(() => {
+    if (!props.paginated) {
+      return data.value;
+    }
+
+    const start = (currentPage.value - 1) * pageSize.value;
+    const end = start + pageSize.value;
+    return data.value.slice(start, end);
+  });
+
+  // Информация о пагинации
+  const paginationInfo = computed(() => {
+    const total = data.value.length;
+    if (total === 0) {
+      return { from: 0, to: 0, total: 0 };
+    }
+
+    const from = (currentPage.value - 1) * pageSize.value + 1;
+    const to = Math.min(currentPage.value * pageSize.value, total);
+
+    return { from, to, total };
+  });
+
+  // Переход на страницу
+  const goToPage = (page) => {
+    if (page < 1 || page > totalPages.value) return;
+    currentPage.value = page;
+    emit('page-change', currentPage.value);
+  };
+
+  // Следующая страница
+  const nextPage = () => {
+    if (currentPage.value < totalPages.value) {
+      currentPage.value++;
+      emit('page-change', currentPage.value);
+    }
+  };
+
+  // Предыдущая страница
+  const previousPage = () => {
+    if (currentPage.value > 1) {
+      currentPage.value--;
+      emit('page-change', currentPage.value);
+    }
+  };
+
+  // Изменение размера страницы
+  const changePageSize = (newSize) => {
+    pageSize.value = newSize;
+    currentPage.value = 1; // Сброс на первую страницу
+    emit('page-size-change', pageSize.value);
+  };
+
+  // Сброс на первую страницу при изменении данных
+  watch(() => data.value.length, () => {
+    if (currentPage.value > totalPages.value) {
+      currentPage.value = Math.max(1, totalPages.value);
+    }
+  });
+
+  return {
+    currentPage,
+    pageSize,
+    totalPages,
+    paginatedData,
+    paginationInfo,
+    goToPage,
+    nextPage,
+    previousPage,
+    changePageSize,
+  };
+}
+

package/src/composables/useTableSelection.js

@@ -0,0 +1,77 @@
+import { ref, computed } from 'vue';
+
+/**
+ * Composable для выделения строк таблицы
+ */
+export function useTableSelection(data, props, emit) {
+  const selectedRows = ref([]);
+
+  // Все ли строки выбраны
+  const allSelected = computed(() => {
+    if (data.value.length === 0) return false;
+    return selectedRows.value.length === data.value.length;
+  });
+
+  // Некоторые строки выбраны (для indeterminate состояния)
+  const someSelected = computed(() => {
+    return selectedRows.value.length > 0 && selectedRows.value.length < data.value.length;
+  });
+
+  // Проверка выбрана ли строка
+  const isSelected = (id) => {
+    return selectedRows.value.includes(id);
+  };
+
+  // Переключение выделения строки
+  const toggleRow = (id) => {
+    const index = selectedRows.value.indexOf(id);
+    if (index > -1) {
+      selectedRows.value.splice(index, 1);
+    } else {
+      selectedRows.value.push(id);
+    }
+    
+    emit('row-select', { id, selected: index === -1, selectedRows: [...selectedRows.value] });
+  };
+
+  // Выбрать все строки
+  const selectAll = () => {
+    if (allSelected.value) {
+      selectedRows.value = [];
+      emit('select-all', { selected: false, selectedRows: [] });
+    } else {
+      selectedRows.value = data.value.map(row => row.id);
+      emit('select-all', { selected: true, selectedRows: [...selectedRows.value] });
+    }
+  };
+
+  // Очистить выделение
+  const clearSelection = () => {
+    selectedRows.value = [];
+    emit('selection-clear');
+  };
+
+  // Выбрать определенные строки
+  const selectRows = (ids) => {
+    selectedRows.value = [...ids];
+    emit('selection-change', [...selectedRows.value]);
+  };
+
+  // Получить выбранные объекты данных
+  const getSelectedRowsData = () => {
+    return data.value.filter(row => selectedRows.value.includes(row.id));
+  };
+
+  return {
+    selectedRows,
+    allSelected,
+    someSelected,
+    isSelected,
+    toggleRow,
+    selectAll,
+    clearSelection,
+    selectRows,
+    getSelectedRowsData,
+  };
+}
+

package/src/composables/useTableSort.js

@@ -0,0 +1,75 @@
+import { ref, computed } from 'vue';
+
+/**
+ * Composable для сортировки данных таблицы
+ */
+export function useTableSort(data, props, emit) {
+  const sortBy = ref(props.defaultSort?.column || null);
+  const sortDirection = ref(props.defaultSort?.direction || 'asc');
+
+  // Сортированные данные
+  const sortedData = computed(() => {
+    if (!sortBy.value || !props.sortable) {
+      return data.value;
+    }
+
+    const sorted = [...data.value].sort((a, b) => {
+      const aVal = a[sortBy.value];
+      const bVal = b[sortBy.value];
+
+      // Обработка null/undefined
+      if (aVal == null) return 1;
+      if (bVal == null) return -1;
+
+      // Числовая сортировка
+      if (typeof aVal === 'number' && typeof bVal === 'number') {
+        return sortDirection.value === 'asc' ? aVal - bVal : bVal - aVal;
+      }
+
+      // Строковая сортировка (case-insensitive)
+      const aStr = String(aVal).toLowerCase();
+      const bStr = String(bVal).toLowerCase();
+
+      if (sortDirection.value === 'asc') {
+        return aStr.localeCompare(bStr);
+      } else {
+        return bStr.localeCompare(aStr);
+      }
+    });
+
+    return sorted;
+  });
+
+  // Переключение сортировки
+  const toggleSort = (column) => {
+    if (sortBy.value === column) {
+      // Циклическая смена: asc -> desc -> null
+      if (sortDirection.value === 'asc') {
+        sortDirection.value = 'desc';
+      } else if (sortDirection.value === 'desc') {
+        sortBy.value = null;
+        sortDirection.value = 'asc';
+      }
+    } else {
+      sortBy.value = column;
+      sortDirection.value = 'asc';
+    }
+
+    emit('sort', { column: sortBy.value, direction: sortDirection.value });
+  };
+
+  // Сброс сортировки
+  const resetSort = () => {
+    sortBy.value = props.defaultSort?.column || null;
+    sortDirection.value = props.defaultSort?.direction || 'asc';
+  };
+
+  return {
+    sortBy,
+    sortDirection,
+    sortedData,
+    toggleSort,
+    resetSort,
+  };
+}
+

package/src/composables/useTabsScroll.js

@@ -0,0 +1,88 @@
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+
+/**
+ * Composable для управления прокруткой табов
+ * @param {Ref} containerRef - ссылка на контейнер с табами
+ * @param {Ref} showScrollButtons - показывать ли кнопки прокрутки
+ */
+export function useTabsScroll(containerRef, showScrollButtons) {
+  const canScrollLeft = ref(false);
+  const canScrollRight = ref(false);
+
+  /**
+   * Обновить состояние возможности прокрутки
+   */
+  const updateScrollState = () => {
+    if (!containerRef.value) return;
+
+    const { scrollLeft, scrollWidth, clientWidth } = containerRef.value;
+    canScrollLeft.value = scrollLeft > 0;
+    canScrollRight.value = scrollLeft + clientWidth < scrollWidth - 1; // -1 для погрешности
+  };
+
+  /**
+   * Прокрутка влево
+   */
+  const scrollLeft = () => {
+    if (containerRef.value) {
+      containerRef.value.scrollBy({ left: -200, behavior: 'smooth' });
+    }
+  };
+
+  /**
+   * Прокрутка вправо
+   */
+  const scrollRight = () => {
+    if (containerRef.value) {
+      containerRef.value.scrollBy({ left: 200, behavior: 'smooth' });
+    }
+  };
+
+  /**
+   * Прокрутка к активному табу
+   */
+  const scrollToActiveTab = () => {
+    if (!containerRef.value) return;
+
+    const activeTab = containerRef.value.querySelector('.tab-btn.active');
+    if (activeTab) {
+      activeTab.scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest',
+        inline: 'center',
+      });
+    }
+  };
+
+  let scrollHandler = null;
+
+  onMounted(() => {
+    if (containerRef.value && showScrollButtons.value) {
+      scrollHandler = () => updateScrollState();
+      containerRef.value.addEventListener('scroll', scrollHandler);
+      
+      // Инициализация состояния
+      setTimeout(updateScrollState, 0);
+      
+      // Обновление при ресайзе окна
+      window.addEventListener('resize', updateScrollState);
+    }
+  });
+
+  onBeforeUnmount(() => {
+    if (containerRef.value && scrollHandler) {
+      containerRef.value.removeEventListener('scroll', scrollHandler);
+      window.removeEventListener('resize', updateScrollState);
+    }
+  });
+
+  return {
+    canScrollLeft,
+    canScrollRight,
+    scrollLeft,
+    scrollRight,
+    scrollToActiveTab,
+    updateScrollState,
+  };
+}
+