@studio-west/component-sw 0.11.23 → 0.11.24

package/README.md

@@ -698,7 +698,7 @@ model - состояние чекбокса (checked ) булевое  знач
 
 ## SwTable
 
-Разработка! Компонент `SwTable` представляет собой динамическую таблицу. Шаблон шапки задается вложением компонентов `SwTablecolumn` друг в друга. Содержание таблицы берется из свойства `data` - массив объектов, а слияние столбцов и строк задается подобъектом с соответствующими параметрами.
+Компонент `SwTable` представляет собой динамическую таблицу с поддержкой сложных заголовков, объединения ячеек и кастомизации содержимого через слоты.
 
 ### Свойства / Properties
 
@@ -708,15 +708,24 @@ model - состояние чекбокса (checked ) булевое  знач
 
 ### Слоты / Slots
 
-#`<name>` - пре определение шаблона столбца
+#`<prop>` - именованный слот для конкретной колонки (приоритет выше default). Доступные параметры: `{ row, $index, value }`
+
+#default - универсальный слот для всех колонок. Доступные параметры: `{ row, $index, column, value }`
+
+- `row` - весь объект строки данных
+- `$index` - индекс строки (начиная с 0)
+- `column` - имя колонки (prop)
+- `value` - значение ячейки
 
 ### Пример использования / Example Usage
 
+#### Базовый пример с вложенными колонками:
+
 ```html
 <script>
     let table = [
-        {city:{label:'Moscow', rowspan:2},district:'Center'},
-        {city:'Moscow',district:'MRCR'},
+        {city:{label:'Moscow', rowspan:2},district:'Center',speed:{max:80,min:50,midl:70}},
+        {city:'Moscow',district:'MRCR',speed:{max:130,min:90,midl:120}},
     ]
 </script>
 <sw-table :data="table">
@@ -724,6 +733,145 @@ model - состояние чекбокса (checked ) булевое  знач
       <sw-table-column label="City" prop="city"/>
       <sw-table-column label="District" prop="district"/>
   </sw-table-column>
+  <sw-table-column label="Speed" prop="speed.midl"/>
+</sw-table>
+```
+
+#### Пример с v-for для динамических колонок:
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const columns = ref([
+  { prop: 'name', label: 'Имя', width: '150px' },
+  { prop: 'age', label: 'Возраст', width: '100px' },
+  { prop: 'email', label: 'Email', width: '200px' }
+])
+
+const tableData = ref([
+  { name: 'Иван', age: 25, email: 'ivan@example.com' },
+  { name: 'Мария', age: 30, email: 'maria@example.com' },
+  { name: 'Петр', age: 35, email: 'petr@example.com' }
+])
+</script>
+
+<sw-table :data="tableData">
+  <sw-table-column 
+    v-for="column in columns" 
+    :key="column.prop"
+    :prop="column.prop"
+    :label="column.label"
+    :width="column.width"
+  />
+</sw-table>
+```
+
+#### Пример с кастомизацией через слоты:
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const users = ref([
+  { id: 1, name: 'Иван Петров', age: 25, status: 'active', email: 'ivan@example.com' },
+  { id: 2, name: 'Мария Сидорова', age: 30, status: 'inactive', email: 'maria@example.com' },
+  { id: 3, name: 'Петр Иванов', age: 35, status: 'active', email: 'petr@example.com' }
+])
+
+const deleteUser = (id) => {
+  console.log('Delete user:', id)
+}
+</script>
+
+<sw-table :data="users">
+  <sw-table-column prop="name" label="Имя" />
+  <sw-table-column prop="age" label="Возраст" />
+  <sw-table-column prop="status" label="Статус" />
+  <sw-table-column prop="actions" label="Действия" width="150px" />
+  
+  <!-- Именованный слот для конкретной колонки -->
+  <template #name="{ row, value }">
+    <strong>{{ value }}</strong>
+  </template>
+  
+  <template #age="{ value }">
+    <span style="color: blue">{{ value }} лет</span>
+  </template>
+  
+  <template #status="{ value }">
+    <span :style="{ color: value === 'active' ? 'green' : 'red' }">
+      {{ value === 'active' ? '✓ Активен' : '✗ Неактивен' }}
+    </span>
+  </template>
+  
+  <!-- Default слот для колонки actions -->
+  <template #actions="{ row }">
+    <button @click="deleteUser(row.id)">Удалить</button>
+    <a :href="`mailto:${row.email}`">Написать</a>
+  </template>
+</sw-table>
+```
+
+#### Пример с универсальным default слотом:
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const products = ref([
+  { name: 'Товар 1', price: 1000, quantity: 5 },
+  { name: 'Товар 2', price: 2500, quantity: 3 },
+  { name: 'Товар 3', price: 750, quantity: 10 }
+])
+</script>
+
+<sw-table :data="products">
+  <sw-table-column prop="name" label="Название" />
+  <sw-table-column prop="price" label="Цена" />
+  <sw-table-column prop="quantity" label="Количество" />
+  
+  <!-- Универсальный слот для всех колонок -->
+  <template #default="{ row, column, value }">
+    <span v-if="column === 'price'" style="font-weight: bold">
+      {{ value }} ₽
+    </span>
+    <span v-else-if="column === 'quantity' && value < 5" style="color: red">
+      {{ value }} ⚠️ Мало
+    </span>
+    <span v-else>{{ value }}</span>
+  </template>
+</sw-table>
+```
+
+#### Пример с объединением ячеек (rowspan/colspan):
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const complexData = ref([
+  {
+    city: { label: 'Москва', rowspan: 2 },
+    district: 'Центр',
+    population: 500000
+  },
+  {
+    city: 'Москва', // будет скрыта из-за rowspan
+    district: 'Север',
+    population: 300000
+  },
+  {
+    region: { label: 'Общая статистика', colspan: 2 },
+    total: 800000
+  }
+])
+</script>
+
+<sw-table :data="complexData">
+  <sw-table-column label="Город" prop="city" />
+  <sw-table-column label="Район" prop="district" />
+  <sw-table-column label="Население" prop="population" />
 </sw-table>
 ```
 ---

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studio-west/component-sw",
-  "version": "0.11.23",
+  "version": "0.11.24",
   "description": "Vue components of Component-SW collection.",
   "type": "module",
   "keywords": [

package/src/components/SwTable.vue

@@ -22,13 +22,29 @@
           :rowspan="cell.rowspan"
           :style="cell.style"
       >
+        <!-- Сначала пробуем именованный слот по prop -->
         <slot
+            v-if="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 }}
+        </template>
       </td>
     </tr>
     </tbody>
@@ -79,20 +95,12 @@ function buildColumnTree(vnodes) {
       // 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
-      }
-      
+        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
-        }
+        if (childColumns.length > 0) column.children = childColumns
       }
       result.push(column)
     }
@@ -183,46 +191,29 @@ function extractLeafColumns(columns) {
 // Обработка данных для tbody с поддержкой colspan
 function processBodyData(data, columns) {
   // Защита от undefined/null значений
-  if (!data || !Array.isArray(data)) {
-    return []
-  }
-  if (!columns || !Array.isArray(columns)) {
-    return []
-  }
-
+  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
-      }
-
+      if (value === null || value === undefined) return undefined
       // Пробуем обратиться как к свойству объекта или элементу массива
       value = value[key]
     }
-
     return value
   }
-
   const processedRows = []
   const cellMap = new Map() // Для отслеживания объединенных ячеек
   data.forEach((row, rowIndex) => {
     const processedRow = []
-
     columns.forEach((column, colIndex) => {
       const key = `${rowIndex}-${column.prop}`
-
       // Проверяем, не занята ли эта ячейка из-за rowspan/colspan
-      if (cellMap.has(key)) {
-        return
-      }
-
+      if (cellMap.has(key)) return
       // Получаем значение по пути (поддержка "gant.0", "gant.1" и т.д.)
       const cellData = getValueByPath(row, column.prop)
       let cellValue = cellData
@@ -237,7 +228,6 @@ function processBodyData(data, columns) {
         rowspan = cellData.rowspan || 1
         style = cellData.style || {}
       }
-
       const cell = {
         key,
         label: cellValue,
@@ -248,23 +238,17 @@ function processBodyData(data, columns) {
         originalRow: row,
         rowIndex
       }
-
       processedRow.push(cell)
-
-
       // Помечаем объединенные ячейки
       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)
-          }
+          if (cellKey) cellMap.set(cellKey, true)
         }
       }
     })
 
-    // Добавляем строку только если в ней есть ячейки
     if (processedRow.length > 0) {
       processedRows.push(processedRow)
     }