@studio-west/component-sw 0.12.12 → 0.12.14

package/src/components/SwTable.vue

@@ -1,5 +1,13 @@
 <template>
-  <table class="sw-table">
+  <!-- Скрытый рендер слота: монтирует SwTableColumn, которые регистрируют себя через inject -->
+  <div style="display: none;" aria-hidden="true"><slot /></div>
+  <div
+      ref="wrapperRef"
+      class="sw-table-wrapper"
+      :class="{ 'fixed-active': isFixedActive }"
+      :style="wrapperStyle"
+  >
+  <table ref="tableRef" class="sw-table" :class="{ 'resizing': isResizing }">
     <thead>
     <tr v-for="(row, rowIndex) in headerRows" :key="rowIndex">
       <th
@@ -7,40 +15,43 @@
           :key="cell.key"
           :colspan="cell.colspan"
           :rowspan="cell.rowspan"
-          :style="{ minWidth: cell.width, minHeight: cell.height }"
+          :class="getHeaderCellClass(cell)"
+          :style="getHeaderCellStyle(cell)"
+          @mouseenter="onHeaderEnter(cell)"
+          @mouseleave="onHeaderLeave"
       >
         {{ cell.label }}
+        <span
+            v-if="isResizableLeaf(cell)"
+            class="resize-handle"
+            @mousedown.prevent="startResize($event, cell)"
+        />
       </th>
     </tr>
     </thead>
     <tbody>
-    <tr v-for="(row, rowIndex) in processedTableData" :key="rowIndex">
+    <tr
+        v-for="(row, rowIndex) in processedTableData"
+        :key="rowIndex"
+        @mouseenter="hoveredRowIndex = rowIndex"
+        @mouseleave="hoveredRowIndex = null"
+    >
       <td
           v-for="cell in row"
           :key="cell.key"
           :colspan="cell.colspan"
           :rowspan="cell.rowspan"
-          :style="cell.style"
+          :class="getBodyCellClass(cell, rowIndex)"
+          :style="getBodyCellStyle(cell)"
       >
-        <!-- Сначала пробуем именованный слот по prop -->
+        <!-- Именованный слот по prop колонки -->
         <slot
-            v-if="slots[cell.prop]"
+            v-if="cell.prop && slots[cell.prop]"
             :name="cell.prop"
             :row="cell.originalRow"
             :$index="cell.rowIndex"
             :value="cell.label"
         />
-        <!-- Затем пробуем слот default с данными конкретной ячейки -->
-        <slot
-            v-else-if="slots.default"
-            name="default"
-            :row="cell.originalRow"
-            :$index="cell.rowIndex"
-            :column="cell.prop"
-            :value="cell.label"
-        >
-          {{ cell.label }}
-        </slot>
         <!-- Fallback на простое значение -->
         <template v-else>
           {{ cell.label }}
@@ -49,63 +60,195 @@
     </tr>
     </tbody>
   </table>
+  </div>
 </template>
 
 <script setup>
-import { ref, useSlots, watch, onMounted, computed } from 'vue'
-import SwTableColumn from './SwTableColumn.vue'
+import {
+  ref, useSlots, computed, watchEffect, provide, reactive,
+  onMounted, onUnmounted, nextTick, watch
+} from 'vue'
 
 const props = defineProps({
-  data: {
-    type: Array,
-    required: true
-  }
+  data: { type: Array, required: true },
+  resizable: { type: Boolean, default: true },
+  maxWidth: { type: [String, Number], default: undefined }
 })
 
+const emit = defineEmits(['column-resize'])
+
 const slots = useSlots()
-const columnTree = ref([])
-// Функция для построения дерева колонок
-function buildColumnTree(vnodes) {
-  const result = []
+const columnTree = reactive([])
+const columnWidths = ref({})
+const isResizing = ref(false)
+const hoveredColIndices = ref(null)
+const hoveredRowIndex = ref(null)
+const wrapperRef = ref(null)
+const tableRef = ref(null)
+const isOverflowing = ref(false)
+const isClient = typeof window !== 'undefined' && typeof document !== 'undefined'
+let columnOrder = 0
+let resizeObserver = null
 
-  for (const vnode of vnodes) {
-    // Handle fragments (from v-for)
-    if (vnode.type === Symbol.for('v-fgt') || Array.isArray(vnode.children)) {
-      const children = Array.isArray(vnode.children) ? vnode.children : []
-      const childColumns = buildColumnTree(children)
-      result.push(...childColumns)
-      continue
-    }
+provide('swTableColumns', columnTree)
+provide('swTableAllocColumnOrder', () => columnOrder++)
 
-    // Check if this is a SwTableColumn component using multiple detection methods
-    const isTableColumn = 
-      vnode.type === SwTableColumn || 
-      (vnode.type.__name === 'SwTableColumn') ||
-      (vnode.type.name === 'SwTableColumn') ||
-      (typeof vnode.type === 'object' && vnode.type.name === 'AsyncComponentWrapper' && vnode.props?.prop !== undefined) ||
-      (typeof vnode.type === 'object' && vnode.props?.prop !== undefined) ||
-      (typeof vnode.type === 'object' && vnode.props?.label !== undefined)
-    
-    if (isTableColumn) {
-      const column = {
-        ...vnode.props,
-        children: []
-      }
-      
-      // Handle both function and array children
-      let children = []
-      if (typeof vnode.children?.default === 'function') {
-        try {children = vnode.children.default()}
-        catch (e) {console.warn('Error calling default slot:', e)}
-      } else if (Array.isArray(vnode.children)) children = vnode.children
-      if (children && children.length > 0) {
-        const childColumns = buildColumnTree(children)
-        if (childColumns.length > 0) column.children = childColumns
-      }
-      result.push(column)
+function parseWidth(width) {
+  if (width == null || width === 'auto') return null
+  if (typeof width === 'number') return width
+  const parsed = parseInt(width, 10)
+  return Number.isNaN(parsed) ? null : parsed
+}
+function formatWidth(width) {
+  return width == null ? undefined : `${width}px`
+}
+function getColumnWidth(prop, defaultWidth) {
+  if (columnWidths.value[prop] != null) return columnWidths.value[prop]
+  return parseWidth(defaultWidth)
+}
+function getColumnWidthStyle(prop, defaultWidth) {
+  const width = getColumnWidth(prop, defaultWidth)
+  if (width == null) return {}
+  const formatted = formatWidth(width)
+  return { width: formatted, minWidth: formatted }
+}
+function getColumnPixelWidth(column) {
+  if (!column?.prop) return parseWidth(column?.width) ?? parseWidth(column?.minWidth) ?? 80
+  return getColumnWidth(column.prop, column.width)
+    ?? parseWidth(column.minWidth) ?? 80
+}
+function getLeftOffsetForColIndex(colIndex) {
+  let offset = 0
+  for (let i = 0; i < colIndex; i++) {
+    offset += getColumnPixelWidth(flatColumns.value[i])
+  }
+  return offset
+}
+function getRightOffsetForColIndex(colIndex) {
+  let offset = 0
+  const columns = flatColumns.value
+  for (let i = columns.length - 1; i > colIndex; i--) {
+    offset += getColumnPixelWidth(columns[i])
+  }
+  return offset
+}
+function getCellFixedSide(cell) {
+  if (cell.fixed) return cell.fixed
+  if (cell.prop) return flatColumns.value.find((col) => col.prop === cell.prop)?.fixed
+  if (!cell.colIndices?.length) return null
+  const sides = cell.colIndices.map((i) => flatColumns.value[i]?.fixed).filter(Boolean)
+  if (sides.length && sides.every((side) => side === 'left')) return 'left'
+  if (sides.length && sides.every((side) => side === 'right')) return 'right'
+  return null
+}
+function getFixedPositionStyle(cell, inHeader = false) {
+  const side = getCellFixedSide(cell)
+  if (!side) return {}
+  const startIndex = cell.colIndex ?? cell.colIndices[0]
+  const endIndex = cell.colIndex != null
+    ? cell.colIndex + (cell.colspan || 1) - 1
+    : cell.colIndices[cell.colIndices.length - 1]
+  const zBase = inHeader ? 100 : 0
+  if (side === 'left') {
+    return {
+      position: 'sticky',
+      left: `${getLeftOffsetForColIndex(startIndex)}px`,
+      zIndex: zBase + startIndex + 1
     }
   }
-  return result
+  return {
+    position: 'sticky',
+    right: `${getRightOffsetForColIndex(endIndex)}px`,
+    zIndex: zBase + flatColumns.value.length - endIndex
+  }
+}
+function getHeaderCellStyle(cell) {
+  const style = { minHeight: cell.height && cell.height !== 'auto' ? cell.height : undefined}
+  if (cell.prop) Object.assign(style, getColumnWidthStyle(cell.prop, cell.width))
+  else if (cell.width && cell.width !== 'auto') style.minWidth = formatWidth(parseWidth(cell.width)) || cell.width
+  if (isFixedActive.value) Object.assign(style, getFixedPositionStyle(cell, true))
+  return style
+}
+function getBodyCellStyle(cell) {
+  const style = { ...cell.style }
+  if (isFixedActive.value) Object.assign(style, getFixedPositionStyle(cell))
+  return style
+}
+function isResizableLeaf(cell) {
+  if (!props.resizable || !cell.prop) return false
+  return cell.resizable !== false
+}
+function onHeaderEnter(cell) {hoveredColIndices.value = new Set(cell.colIndices)}
+function onHeaderLeave() {hoveredColIndices.value = null}
+function cellCoversHoveredColumn(cell) {
+  if (!hoveredColIndices.value) return false
+  const start = cell.colIndex
+  const end = start + (cell.colspan || 1) - 1
+  for (let i = start; i <= end; i++) {
+    if (hoveredColIndices.value.has(i)) return true
+  }
+  return false
+}
+function isRowHoveredForCell(cell, rowIndex) {
+  const hover = hoveredRowIndex.value
+  if (hover === null) return false
+  return rowIndex <= hover && hover < rowIndex + (cell.rowspan || 1)
+}
+function getFixedCellClass(cell) {
+  const side = getCellFixedSide(cell)
+  return {
+    'fixed-left': isFixedActive.value && side === 'left',
+    'fixed-right': isFixedActive.value && side === 'right'
+  }
+}
+function getBodyCellClass(cell, rowIndex) {
+  const colHover = cellCoversHoveredColumn(cell)
+  const rowHover = isRowHoveredForCell(cell, rowIndex)
+  return {
+    ...getFixedCellClass(cell),
+    'col-hover': colHover && !rowHover,
+    'row-hover': rowHover && !colHover
+  }
+}
+function getHeaderCellClass(cell) {
+  return {
+    ...getFixedCellClass(cell),
+    'resizable': isResizableLeaf(cell),
+    'col-hover': cellCoversHoveredColumn(cell)
+  }
+}
+function getMinResizeWidth(cell) {
+  return parseWidth(cell.minWidth) ?? 48
+}
+function startResize(event, cell) {
+  if (!isClient) return
+  const th = event.currentTarget.closest('th')
+  if (!th || !cell.prop) return
+  const prop = cell.prop
+  const startX = event.clientX
+  const startWidth = getColumnWidth(prop, cell.width) ?? th.offsetWidth
+  const minWidth = getMinResizeWidth(cell)
+  isResizing.value = true
+  document.body.style.cursor = 'col-resize'
+  document.body.style.userSelect = 'none'
+  const onMouseMove = (e) => {
+    const nextWidth = Math.max(minWidth, startWidth + (e.clientX - startX))
+    columnWidths.value = { ...columnWidths.value, [prop]: nextWidth }
+  }
+  const onMouseUp = () => {
+    document.removeEventListener('mousemove', onMouseMove)
+    document.removeEventListener('mouseup', onMouseUp)
+    document.body.style.cursor = ''
+    document.body.style.userSelect = ''
+    isResizing.value = false
+    emit('column-resize', { prop, width: columnWidths.value[prop] })
+    nextTick(updateOverflowState)
+  }
+  document.addEventListener('mousemove', onMouseMove)
+  document.addEventListener('mouseup', onMouseUp)
+}
+function sortColumns(columns) {
+  return [...columns].sort((a, b) => a.order - b.order)
 }
 
 // Получение максимальной глубины дерева
@@ -124,26 +267,27 @@ function getMaxDepth(columns) {
 // Преобразование дерева в строки для thead
 function buildHeaderRows(columns, depth) {
   const rows = Array.from({ length: depth }, () => [])
-
+  let leafColIndex = 0
   function processColumns(cols, rowIndex, parentKey = '') {
-    for (let i = 0; i < cols.length; i++) {
-      const col = cols[i]
+    const sortedCols = sortColumns(cols)
+    for (let i = 0; i < sortedCols.length; i++) {
+      const col = sortedCols[i]
       const key = parentKey ? `${parentKey}-${col.prop || i}` : (col.prop || i)
-
       if (col.children && col.children.length > 0) {
-        // Это родительская колонка
+        const startIndex = leafColIndex
         const leafCount = countLeafColumns(col.children)
+        processColumns(col.children, rowIndex + 1, key)
         rows[rowIndex].push({
           key,
           label: col.label,
           colspan: leafCount,
           rowspan: 1,
           width: col.width,
-          height: col.height
+          height: col.height,
+          colIndices: Array.from({ length: leafCount }, (_, j) => startIndex + j)
         })
-        processColumns(col.children, rowIndex + 1, key)
       } else {
-        // Это конечная колонка
+        const colIndex = leafColIndex++
         rows[rowIndex].push({
           key: col.prop,
           label: col.label,
@@ -151,7 +295,11 @@ function buildHeaderRows(columns, depth) {
           rowspan: depth - rowIndex,
           width: col.width,
           height: col.height,
-          prop: col.prop
+          prop: col.prop,
+          resizable: col.resizable,
+          minWidth: col.minWidth,
+          colIndex,
+          colIndices: [colIndex]
         })
       }
     }
@@ -163,9 +311,8 @@ function buildHeaderRows(columns, depth) {
 // Подсчет количества листовых колонок
 function countLeafColumns(columns) {
   let count = 0
-
   function traverse(cols) {
-    for (const col of cols) {
+    for (const col of sortColumns(cols)) {
       if (col.children && col.children.length > 0) traverse(col.children)
       else count++
     }
@@ -177,9 +324,8 @@ function countLeafColumns(columns) {
 // Извлечение плоского списка конечных колонок
 function extractLeafColumns(columns) {
   const result = []
-
   function traverse(cols) {
-    for (const col of cols) {
+    for (const col of sortColumns(cols)) {
       if (col.children && col.children.length > 0) traverse(col.children)
       else result.push(col)
     }
@@ -190,17 +336,21 @@ function extractLeafColumns(columns) {
 
 // Обработка данных для tbody с поддержкой colspan
 function processBodyData(data, columns) {
+
   // Защита от undefined/null значений
   if (!data || !Array.isArray(data)) return []
   if (!columns || !Array.isArray(columns)) return []
+
   // Функция для получения значения по пути (например, "gant.0")
   function getValueByPath(obj, path) {
     if (!obj || !path) return undefined
+
     // Разбиваем путь по точкам
     const keys = path.split('.')
     let value = obj
     for (const key of keys) {
       if (value === null || value === undefined) return undefined
+
       // Пробуем обратиться как к свойству объекта или элементу массива
       value = value[key]
     }
@@ -211,9 +361,11 @@ function processBodyData(data, columns) {
   data.forEach((row, rowIndex) => {
     const processedRow = []
     columns.forEach((column, colIndex) => {
-      const key = `${rowIndex}-${column.prop}`
+      const key = `${rowIndex}-${colIndex}`
+
       // Проверяем, не занята ли эта ячейка из-за rowspan/colspan
       if (cellMap.has(key)) return
+
       // Получаем значение по пути (поддержка "gant.0", "gant.1" и т.д.)
       const cellData = getValueByPath(row, column.prop)
       let cellValue = cellData
@@ -228,10 +380,16 @@ function processBodyData(data, columns) {
         rowspan = cellData.rowspan || 1
         style = cellData.style || {}
       }
+      style = {
+        ...style,
+        ...getColumnWidthStyle(column.prop, column.width)
+      }
       const cell = {
         key,
         label: cellValue,
         prop: column.prop,
+        fixed: column.fixed,
+        colIndex,
         colspan,
         rowspan,
         style,
@@ -243,46 +401,72 @@ function processBodyData(data, columns) {
       for (let r = 0; r < rowspan; r++) {
         for (let c = 0; c < colspan; c++) {
           if (r === 0 && c === 0) continue // Основная ячейка
-          const cellKey = `${rowIndex + r}-${columns[colIndex + c]?.prop}`
-          if (cellKey) cellMap.set(cellKey, true)
+          const cellKey = `${rowIndex + r}-${colIndex + c}`
+          cellMap.set(cellKey, true)
         }
       }
     })
-
     if (processedRow.length > 0) {
       processedRows.push(processedRow)
     }
   })
-
   return processedRows
 }
 
 // Вычисляемые свойства
-const maxDepth = computed(() => getMaxDepth(columnTree.value))
-const headerRows = computed(() => buildHeaderRows(columnTree.value, maxDepth.value))
-const flatColumns = computed(() => extractLeafColumns(columnTree.value))
+const maxDepth = computed(() => getMaxDepth(columnTree))
+const headerRows = computed(() => buildHeaderRows(columnTree, maxDepth.value))
+const flatColumns = computed(() => extractLeafColumns(columnTree))
 const processedTableData = computed(() => processBodyData(props.data, flatColumns.value))
-
-// Сбор колонок из слотов
+const hasFixedColumns = computed(() => flatColumns.value.some((col) => col.fixed))
+const wrapperStyle = computed(() => {
+  if (props.maxWidth == null) return undefined
+  const width = typeof props.maxWidth === 'number'
+    ? `${props.maxWidth}px`
+    : props.maxWidth
+  return { maxWidth: width }
+})
+const isFixedActive = computed(() => (
+  props.maxWidth != null && hasFixedColumns.value && isOverflowing.value
+))
+function updateOverflowState() {
+  if (!isClient) {
+    isOverflowing.value = false
+    return
+  }
+  const wrapper = wrapperRef.value
+  const table = tableRef.value
+  if (!wrapper || !table) {
+    isOverflowing.value = false
+    return
+  }
+  isOverflowing.value = table.scrollWidth > wrapper.clientWidth + 1
+}
+function initColumnWidths() {
+  const widths = {}
+  for (const column of flatColumns.value) {
+    const width = parseWidth(column.width)
+    if (column.prop && width != null) widths[column.prop] = width
+  }
+  columnWidths.value = widths
+}
+watchEffect(() => {
+  flatColumns.value
+  initColumnWidths()
+})
+watch(
+  [() => props.data, () => props.maxWidth, flatColumns, columnWidths, processedTableData],
+  () => nextTick(updateOverflowState)
+)
 onMounted(() => {
-  const columnVNodes = slots.default?.() || []
-  console.log('Raw slot VNodes:', columnVNodes)
-  
-  // Filter out comment nodes and other non-component nodes
-  const validVNodes = columnVNodes.filter(vnode => {
-    console.log('VNode type:', vnode.type, 'props:', vnode.props)
-    // Check for actual component types (not comments or text)
-    const isComponent = vnode.type && 
-      (typeof vnode.type === 'object' || typeof vnode.type === 'function')
-    console.log('Is component:', isComponent)
-    return isComponent
-  })
-  
-  console.log('Valid VNodes:', validVNodes)
-  columnTree.value = buildColumnTree(validVNodes)
-  console.log('SwTable mounted - columnTree:', columnTree.value)
-  console.log('SwTable mounted - flatColumns:', flatColumns.value)
-  console.log('SwTable mounted - data:', props.data)
+  updateOverflowState()
+  if (!isClient || typeof ResizeObserver === 'undefined') return
+  resizeObserver = new ResizeObserver(() => updateOverflowState())
+  if (wrapperRef.value) resizeObserver.observe(wrapperRef.value)
+  if (tableRef.value) resizeObserver.observe(tableRef.value)
+})
+onUnmounted(() => {
+  resizeObserver?.disconnect()
+  resizeObserver = null
 })
-
 </script>

package/src/components/SwTableColumn.vue

@@ -1,14 +1,14 @@
 <template>
-  <div style="display: none;"></div>
+  <div style="display: none;"><slot /></div>
 </template>
 
 <script setup>
-import { defineProps } from 'vue'
+import { inject, provide, onUnmounted, reactive, watch } from 'vue'
 
 const props = defineProps({
   prop: {
     type: String,
-    required: true
+    default: undefined
   },
   label: {
     type: String,
@@ -21,6 +21,68 @@ const props = defineProps({
   height: {
     type: [String, Number],
     default: 'auto'
+  },
+  resizable: {
+    type: Boolean,
+    default: undefined
+  },
+  minWidth: {
+    type: [String, Number],
+    default: 48
+  },
+  fixed: {
+    type: String,
+    default: undefined,
+    validator: (value) => value == null || value === 'left' || value === 'right'
+  }
+})
+
+const tableColumns = inject('swTableColumns', null)
+const parentColumn = inject('swTableParentColumn', null)
+const allocColumnOrder = inject('swTableAllocColumnOrder', null)
+
+const column = reactive({
+  order: allocColumnOrder?.() ?? 0,
+  prop: props.prop,
+  label: props.label,
+  width: props.width,
+  height: props.height,
+  resizable: props.resizable,
+  minWidth: props.minWidth,
+  fixed: props.fixed,
+  children: []
+})
+
+watch(() => props, (nextProps) => {
+  column.prop = nextProps.prop
+  column.label = nextProps.label
+  column.width = nextProps.width
+  column.height = nextProps.height
+  column.resizable = nextProps.resizable
+  column.minWidth = nextProps.minWidth
+  column.fixed = nextProps.fixed
+}, { deep: true })
+
+provide('swTableParentColumn', column)
+
+function registerColumn() {
+  if (parentColumn) {
+    parentColumn.children.push(column)
+  } else if (tableColumns) {
+    tableColumns.push(column)
   }
+}
+
+function unregisterColumn() {
+  const list = parentColumn ? parentColumn.children : tableColumns
+  if (!list) return
+  const index = list.indexOf(column)
+  if (index > -1) list.splice(index, 1)
+}
+
+registerColumn()
+
+onUnmounted(() => {
+  unregisterColumn()
 })
 </script>