Merge pull request #3 from confuseder/main

feat: add `<table>`

Author: sheepbox8646

packages/test/package.json

@@ -1,19 +1,20 @@
 {
   "name": "@sciux/test",
-  "private": true,
   "type": "module",
+  "private": true,
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview"
   },
-  "devDependencies": {
-    "typescript": "~5.8.3",
-    "vite": "^6.3.5"
-  },
   "dependencies": {
     "@sciux/layout": "workspace:^",
     "@sciux/model": "workspace:^",
+    "@sciux/widget": "workspace:^",
     "sciux-laplace": "catalog:"
+  },
+  "devDependencies": {
+    "typescript": "~5.8.3",
+    "vite": "^6.3.5"
   }
 }

packages/test/src/example.sciux

@@ -13,3 +13,23 @@
     </flexbox>
   </rows>
 </columns>
+
+<!-- 测试水平布局表格 -->
+<table caption="水平布局测试" align="horizon" columns="3">
+  <block>1</block>
+  <block>2</block>
+  <block>3</block>
+  <block>4</block>
+  <block>5</block>
+  <block>6</block>
+</table>
+
+<!-- 测试垂直布局表格 -->
+<table caption="垂直布局测试" align="vertical" rows="3">
+  <block>A1</block>
+  <block>A2</block>
+  <block>A3</block>
+  <block>B1</block>
+  <block>B2</block>
+  <block>B3</block>
+</table>

packages/test/src/main.ts

@@ -1,5 +1,5 @@
 import { align, block, columns, flexbox, grid, rows } from '@sciux/layout'
-// import { model } from "@sciux/model";
+import { table } from '@sciux/widget'
 import { button, checkbox, input, slider } from '@sciux/model'
 import { components, render } from 'sciux-laplace'
 import source from './example.sciux?raw'
@@ -12,6 +12,7 @@ components.set('grid', grid)
 components.set('align', align)
 components.set('button', button)
 components.set('input', input)
+components.set('table', table)
 components.set('checkbox', checkbox)
 components.set('slider', slider)
 

packages/widget/src/index.ts

@@ -0,0 +1 @@
+export { default as table } from './table'

packages/widget/src/table.ts

@@ -1,7 +1,7 @@
 /**
  * `<table>` component examples
  * ```
- * <table caption="The table description" align="horizon" :columns="3">
+ * <table `caption="The table description" align="horizon" :columns="3">
  *  <link>a link could be a part of item</link>
  *  <canvas></canvas> // A canvas also could
  *  Hello world! // A pure-text node also
@@ -28,17 +28,85 @@ const VerticalTableType = type({
   rows: 'number',
 })
 
-const TableType = type.merge(BaseTableType, HorizonTableType, VerticalTableType).partial()
+const TableAlignType = type.or(HorizonTableType, VerticalTableType)
+const TableType = type.and(BaseTableType, TableAlignType).partial()
 
 export default defineComponent<'table', typeof TableType.infer>((attrs, _context) => {
   return {
     name: 'table',
     attrs: TableType,
-    setup(_childrenResolver) {
+    setup(children) {
+      const container = document.createElement('div')
+      container.style.width = '100%'
+
       const table = document.createElement('table')
-      table.style.inset = size(toValue(attrs.inset) ?? 'md')
-      // const children = childrenResolver()
-      return table
+      table.style.width = '100%'
+      table.style.tableLayout = 'fixed'
+      table.style.borderCollapse = 'collapse'
+
+      // 应用 inset 参数到表格的内边距
+      const insetValue = toValue(attrs.inset)
+      if (insetValue !== undefined) {
+        table.style.padding = size(insetValue)
+      }
+
+      const caption = toValue(attrs.caption)
+      if (caption) {
+        const captionElement = document.createElement('h3')
+        captionElement.textContent = caption
+        captionElement.style.textAlign = 'center'
+        captionElement.style.margin = '0 0 1em 0' // 添加底部间距
+        container.append(captionElement)
+      }
+
+      const align = toValue(attrs.align)
+      const childArray = children().filter(child => child.nodeType !== 3)
+
+      if (align === 'horizon' && 'columns' in attrs) {
+        const columns = toValue(attrs.columns) ?? 1
+        const rows = Math.ceil(childArray.length / columns)
+
+        const tbody = document.createElement('tbody')
+        Array.from({ length: rows }).forEach((_, rowIndex) => {
+          const tr = document.createElement('tr')
+          Array.from({ length: columns }).forEach((_, colIndex) => {
+            const td = document.createElement('td')
+            td.style.textAlign = 'center'
+            td.style.padding = size('sm')
+            const childIndex = rowIndex * columns + colIndex
+            if (childIndex < childArray.length) {
+              td.append(childArray[childIndex])
+            }
+            tr.append(td)
+          })
+          tbody.append(tr)
+        })
+        table.append(tbody)
+      }
+      else if (align === 'vertical' && 'rows' in attrs) {
+        const rows = toValue(attrs.rows) ?? 1
+        const columns = Math.ceil(childArray.length / rows)
+
+        const tbody = document.createElement('tbody')
+        Array.from({ length: rows }).forEach((_, rowIndex) => {
+          const tr = document.createElement('tr')
+          Array.from({ length: columns }).forEach((_, colIndex) => {
+            const td = document.createElement('td')
+            td.style.textAlign = 'center'
+            td.style.padding = size('sm')
+            const childIndex = rowIndex * columns + colIndex
+            if (childIndex < childArray.length) {
+              td.append(childArray[childIndex])
+            }
+            tr.append(td)
+          })
+          tbody.append(tr)
+        })
+        table.append(tbody)
+      }
+
+      container.append(table)
+      return container
     },
   }
 })