intable 0.0.7 → 0.0.8

package/packages/intable/src/index.tsx

@@ -2,10 +2,10 @@ import { createContext, createMemo, createSignal, For, useContext, createEffect,
 import { createMutable, reconcile } from 'solid-js/store'
 import { combineProps } from '@solid-primitives/props'
 import { createLazyMemo } from '@solid-primitives/memo'
-import { createElementSize, createResizeObserver } from '@solid-primitives/resize-observer'
+import { createElementSize, createResizeObserver, makeResizeObserver } from '@solid-primitives/resize-observer'
 import { createScrollPosition } from '@solid-primitives/scroll'
 import { difference, mapValues, memoize, sumBy } from 'es-toolkit'
-import { toReactive, useMemo, useMemoState } from './hooks'
+import { toReactive, useMemo } from './hooks'
 import { log, unFn } from './utils'
 
 import 'virtual:uno.css'
@@ -240,24 +240,26 @@ function BasePlugin(): Plugin$0 {
     priority: Infinity,
     store: (store) => {
       // 共享一个 ResizeObserver 观察所有 th，回调按 index 分发，替代每列独立 createElementSize
-      createResizeObserver(
-        () => store.ths?.filter(Boolean) as Element[] || [],
-        (_, el, e) => {
+      const thObs = makeResizeObserver((es) => {
+        for (const e of es) {
+          const el = e.target
           const { inlineSize: width, blockSize: height } = e.borderBoxSize[0]
-          const x = store.ths?.indexOf(el as HTMLElement)
-          if (x >= 0 && el.parentElement) store.thSizes[x] = { width, height }
+          const h = store.ths.indexOf(el)
+          if (h >= 0 && el.parentElement) store.thSizes[h] = { width, height }
         }
-      )
+      })
       // 共享一个 ResizeObserver 观察所有 tr，回调按 index 分发，替代每行独立 createElementSize
-      createResizeObserver(
-        () => store.trs?.filter(Boolean) as Element[] || [],
-        (_, el, e) => {
+      const trObs = makeResizeObserver((es) => {
+        for (const e of es) {
+          const el = e.target
           const { inlineSize: width, blockSize: height } = e.borderBoxSize[0]
-          const y = store.trs?.indexOf(el as HTMLElement)
+          const y = store.trs.indexOf(el)
           if (y >= 0 && el.parentElement) store.trSizes[y] = { width, height }
         }
-      )
+      })
       return {
+        thObs,
+        trObs,
         ths: [],
         thSizes: [],
         trs: [],
@@ -296,7 +298,11 @@ function BasePlugin(): Plugin$0 {
           const { y } = o
           if (y == null) return
           store.trs[y] = el()
-          onCleanup(() => { store.trSizes[y] = store.trs[y] = void 0 })
+          store.trObs.observe(el())
+          onCleanup(() => {
+            store.trSizes[y] = store.trs[y] = void 0
+            store.trObs.unobserve(el())
+          })
         })
 
         return <Tr {...o} />
@@ -318,7 +324,11 @@ function BasePlugin(): Plugin$0 {
           if ((o.colspan ?? 1) != 1) return
           const { x } = o
           store.ths[x] = el()
-          onCleanup(() => { store.thSizes[x] = store.ths[x] = void 0 })
+          store.thObs.observe(el())
+          onCleanup(() => {
+            store.thSizes[x] = store.ths[x] = void 0
+            store.thObs.unobserve(el())
+          })
         })
         
         return <Th {...mProps}>{o.children}</Th>
@@ -330,8 +340,6 @@ function BasePlugin(): Plugin$0 {
           { get class() { return unFn(props.cellClass, o) }, get style() { return unFn(props.cellStyle, o) } },
           { get class() { return o.col.class }, get style() { return o.col.style } },
           { get style() { return o.col.width ? `width: ${o.col.width}px` : '' } },
-          // todo
-          () => store.props.tdProps?.(o) || {}
         )
         return <Td {...mProps}>{o.children}</Td>
       },

package/packages/intable/src/plugins/CopyPastePlugin.tsx

@@ -1,5 +1,5 @@
 import { createEffect } from 'solid-js'
-import { Ctx, type Plugin } from '..'
+import { type Plugin } from '..'
 
 declare module '../index' {
   interface TableProps {
@@ -37,26 +37,62 @@ export const ClipboardPlugin: Plugin = {
   commands: store => ({
     copy: () => {
       const { start, end } = store.selected
-      if (start.length == 0) return
+      if (!start?.length) return
       const [x1, x2] = [start[0], end[0]].sort((a, b) => a - b)
       const [y1, y2] = [start[1], end[1]].sort((a, b) => a - b)
-      const cols = store.props!.columns!.slice(x1, x2 + 1)
-      const data = store.props!.data!.slice(y1, y2 + 1).map(row => cols.map(col => row[col.id]))
-      const text = data.map(row => row.join('\t')).join('\n')
+      // Skip internal columns (index, row-selection, etc.)
+      const cols = store.props!.columns!.slice(x1, x2 + 1).filter(col => !col[store.internal])
+      const rows = store.props!.data!.slice(y1, y2 + 1)
+      const text = rows.map(row =>
+        cols.map(col => {
+          const val = row[col.id as string] ?? ''
+          // Escape in-cell tabs/newlines so TSV structure is preserved
+          return String(val).replace(/[\t\r\n]/g, ' ')
+        }).join('\t')
+      ).join('\n')
       navigator.clipboard.writeText(text)
     },
     paste: async () => {
       const { start, end } = store.selected
-      if (start.length == 0) return
+      if (!start?.length) return
       const text = await navigator.clipboard.readText()
-      const arr2 = text.split('\n').map(row => row.split('\t'))
-      const cols = store.props!.columns!.slice(start[0], start[0] + arr2[0].length)
+      // Normalise CRLF (Excel) and CR (old Mac) line endings; trim trailing newline
+      const arr2 = text.replace(/\r\n/g, '\n').replace(/\r/g, '\n').replace(/\n$/, '').split('\n').map(r => r.split('\t'))
+      const clipH = arr2.length
+      const clipW = arr2[0].length
+
+      const [x1, x2] = [start[0], end[0]].sort((a, b) => a - b)
+      const [y1, y2] = [start[1], end[1]].sort((a, b) => a - b)
+      const selH = y2 - y1 + 1
+      const selW = x2 - x1 + 1
+      // Tile clipboard to fill the selection when it is an exact multiple
+      const pasteH = selH > clipH && selH % clipH === 0 ? selH : clipH
+      const pasteW = selW > clipW && selW % clipW === 0 ? selW : clipW
+
+      // Collect target user columns starting from x1 (skip internals), up to pasteW
+      const allCols = store.props!.columns!
+      const targetCols: typeof allCols = []
+      for (let i = x1; i < allCols.length && targetCols.length < pasteW; i++) {
+        if (!allCols[i][store.internal]) targetCols.push(allCols[i])
+      }
+
       const data = store.props!.data!.slice()
-      arr2.forEach((row, y) => {
-        row = Object.fromEntries(cols.map((col, x) => [col.id, row[x]]))
-        data[start[1] + y] = { ...data![start[1] + y], ...row }
-      })
-      store.selected.end = [start[0] + cols.length - 1, Math.min(start[1] + arr2.length - 1, store.props.data!.length - 1)]
+      const maxY = Math.min(y1 + pasteH - 1, data.length - 1)
+      for (let dy = 0; dy <= maxY - y1; dy++) {
+        const patch: Record<string, any> = {}
+        targetCols.forEach((col, dx) => {
+          patch[col.id as string] = arr2[dy % clipH][dx % clipW]
+        })
+        data[y1 + dy] = { ...data[y1 + dy], ...patch }
+      }
+
+      // Expand selection to cover the pasted region
+      let endX = x1
+      let userCount = 0
+      for (let i = x1; i < allCols.length && userCount < targetCols.length; i++) {
+        if (!allCols[i][store.internal]) { endX = i; userCount++ }
+      }
+      store.selected.end = [endX, maxY]
       store.props!.onDataChange?.(data)
     },
   })

package/packages/intable/src/plugins/DiffPlugin.tsx

@@ -10,9 +10,15 @@ import { log } from '../utils'
 declare module '../index' {
   interface TableProps {
     diff?: {
-      /** @default true */ added?: boolean
-      /** @default true */ removed?: boolean
-      /** @default true */ changed?: boolean
+      /** @default false */
+      enable?: boolean
+      data?: any[]
+      /** @default true */
+      added?: boolean
+      /** @default true */
+      removed?: boolean
+      /** @default true */
+      changed?: boolean
       onCommit?: (data: any, opt: { added: any[], removed: any[], changed: any[] }) => any
     }
   }
@@ -35,7 +41,8 @@ export const DiffPlugin: Plugin = {
     data.forEach(row => unwrap(row)[store.rawProps.rowKey] ??= uuid())
     return {
       diffData: structuredClone(unwrap(data || [])),
-      diffDataKeyed: createLazyMemo(() => keyBy(store.diffData, e => e[store.props!.rowKey]))
+      diffData2: () => store.props.diff?.data ?? store.diffData,
+      diffDataKeyed: createLazyMemo(() => keyBy(store.diffData2(), e => e[store.props!.rowKey]))
     }
   },
   commands: store => ({
@@ -50,7 +57,7 @@ export const DiffPlugin: Plugin = {
         if (!old) added.push(e)
         else if (!isEqual(e, old)) changed.push(e)
       }
-      for (const e of store.diffData) {
+      for (const e of store.diffData2()) {
         !keyed[e[rowKey]] && removed.push(e)
       }
       await store.props!.diff?.onCommit?.(data, { added, removed, changed })
@@ -60,14 +67,17 @@ export const DiffPlugin: Plugin = {
   }),
   rewriteProps: {
     diff: ({ diff }) => ({
+      enable: false,
       added: true,
       removed: true,
       changed: true,
       ...diff
     }),
     data: ({ data }, { store }) => {
+      if (!store.props.diff?.enable) return data
+      
       const { rowKey, diff } = store.props || {}
-      const diffData = store.diffData || []
+      const diffData = store.diffData2() || []
 
       // Fast path: same number of rows, same keys in same order (edit-only, no add/delete/move).
       // Skips the O(n²) diffArrays call which is the common case when only cell values changae.
@@ -88,18 +98,21 @@ export const DiffPlugin: Plugin = {
         e.value
       ))
     },
-    tdProps: ({ tdProps }, { store }) => o => combineProps(tdProps?.(o) || {}, {
-      get class() {
-        const { diff } = store.props || {}
-        const id = unwrap(o.data)[store.props!.rowKey]
-        return [
-          o.data[NEW] ? diff?.added ? 'bg-#dafaea!' : '' :
-          o.data[DEL] ? 'bg-#ffe8e8!' :
-          o.data[store.internal] ? '' :
-          diff!.changed && o.data[o.col.id] != store.diffDataKeyed()[id][o.col.id] ? 'bg-#dafaea!' : ''
-        ].join(' ')
-      }
-    }),
+    Td: ({ Td }, { store }) => !store.props.diff?.enable ? Td : o => {
+      o = combineProps(o, {
+        get class() {
+          const { diff } = store.props
+          const id = o.data[store.props!.rowKey]
+          return [
+            o.data[NEW] ? 'bg-#dafaea!' :
+            o.data[DEL] ? 'bg-#ffe8e8!' :
+            o.data[store.internal] ? '' :
+            diff!.changed && o.data[o.col.id] != store.diffDataKeyed()[id]?.[o.col.id] ? 'bg-#dafaea!' : ''
+          ].join(' ')
+        }
+      })
+      return <Td {...o} />
+    },
   },
   keybindings: (store) => ({
     '$mod+S': () => store.commands.diffCommit(),

package/packages/intable/src/theme/dark.scss

@@ -0,0 +1,46 @@
+/**
+ * intable — Dark (OLED) Theme
+ * Deep black background, high contrast, WCAG AAA compliant
+ * Best for: developer tools, night mode, coding platforms
+ */
+
+.data-table {
+  --bg: #0d1117;
+  --c-primary: #388bfd;
+
+  --menu-bg: #161b22;
+  --li-hover-bg: rgba(177, 186, 196, 0.12);
+
+  --table-b: 1px solid var(--table-b-c);
+  --table-b-c: #30363d;
+  --table-c: #e6edf3;
+  --table-bg: #0d1117;
+
+  --table-header-c: #8b949e;
+  --table-header-bg: #161b22;
+
+  --table-row-hover-bg: #161b22;
+
+  --select-area-bg: #388bfd1f;
+
+  color-scheme: dark;
+  font-size: 13px;
+
+  th, td {
+    padding: 8px 12px;
+    line-height: 20px;
+  }
+
+  &--small {
+    font-size: 12px;
+
+    th, td {
+      padding: 4px 8px;
+    }
+  }
+
+  thead th {
+    font-weight: 600;
+    letter-spacing: 0.01em;
+  }
+}

package/packages/intable/src/theme/github.scss

@@ -0,0 +1,80 @@
+/**
+ * intable — GitHub Theme
+ * Matches GitHub's Primer design system — light & dark surfaces
+ * Best for: developer tools, docs sites, code-adjacent UIs
+ */
+
+.data-table {
+  --bg: #ffffff;
+  --c-primary: #0969da;
+
+  --menu-bg: #ffffff;
+  --li-hover-bg: #f3f4f6;
+
+  --table-b: 1px solid var(--table-b-c);
+  --table-b-c: #d0d7de;
+  --table-c: #1f2328;
+  --table-bg: #ffffff;
+
+  --table-header-c: #636c76;
+  --table-header-bg: #f6f8fa;
+
+  --table-row-hover-bg: #f6f8fa;
+
+  --select-area-bg: #0969da1a;
+
+  font-size: 14px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
+
+  th, td {
+    padding: 8px 12px;
+    line-height: 1.5;
+  }
+
+  thead th {
+    font-weight: 600;
+    white-space: nowrap;
+  }
+
+  tbody tr:nth-child(even) td {
+    background-color: #f6f8fa;
+  }
+
+  tbody tr:nth-child(even):hover td {
+    background-color: var(--table-row-hover-bg);
+  }
+
+  &--small {
+    font-size: 12px;
+
+    th, td {
+      padding: 4px 8px;
+    }
+  }
+
+  // Dark (GitHub Dark Default)
+  &.dark, [data-theme="dark"] & {
+    --bg: #0d1117;
+    --c-primary: #388bfd;
+
+    --menu-bg: #161b22;
+    --li-hover-bg: rgba(177, 186, 196, 0.12);
+
+    --table-b-c: #30363d;
+    --table-c: #e6edf3;
+    --table-bg: #0d1117;
+
+    --table-header-c: #8b949e;
+    --table-header-bg: #161b22;
+
+    --table-row-hover-bg: #161b22;
+
+    --select-area-bg: #388bfd1f;
+
+    color-scheme: dark;
+
+    tbody tr:nth-child(even) td {
+      background-color: #161b22;
+    }
+  }
+}

package/packages/intable/src/theme/material.scss

@@ -0,0 +1,73 @@
+/**
+ * intable — Material Design 3 Theme
+ * Google Material You / M3 surface tones and typography
+ * Best for: Android-style web apps, admin panels, data management UIs
+ */
+
+.data-table {
+  --bg: #fffbfe;
+  --c-primary: #6750a4;
+
+  --menu-bg: #ece6f0;
+  --li-hover-bg: rgba(103, 80, 164, 0.08);
+
+  --table-b: 1px solid var(--table-b-c);
+  --table-b-c: #cac4d0;
+  --table-c: #1c1b1f;
+  --table-bg: #fffbfe;
+
+  --table-header-c: #49454f;
+  --table-header-bg: #fffbfe;
+
+  --table-row-hover-bg: rgba(103, 80, 164, 0.08);
+
+  --select-area-bg: rgba(103, 80, 164, 0.12);
+
+  font-size: 14px;
+  font-family: 'Roboto', sans-serif;
+
+  th, td {
+    padding: 10px 16px;
+    line-height: 20px;
+  }
+
+  thead th {
+    font-size: 12px;
+    font-weight: 500;
+    letter-spacing: 0.02em;
+  }
+
+  tr:not(:last-child) td {
+    border-bottom: 1px solid var(--table-b-c);
+  }
+
+  &--small {
+    font-size: 12px;
+
+    th, td {
+      padding: 6px 12px;
+    }
+  }
+
+  // Dark variant (M3 dark)
+  &.dark, [data-theme="dark"] & {
+    --bg: #1c1b1f;
+    --c-primary: #d0bcff;
+
+    --menu-bg: #2b2930;
+    --li-hover-bg: rgba(208, 188, 255, 0.08);
+
+    --table-b-c: #49454f;
+    --table-c: #e6e1e5;
+    --table-bg: #1c1b1f;
+
+    --table-header-c: #cac4d0;
+    --table-header-bg: #1c1b1f;
+
+    --table-row-hover-bg: rgba(208, 188, 255, 0.08);
+
+    --select-area-bg: rgba(208, 188, 255, 0.12);
+
+    color-scheme: dark;
+  }
+}

package/packages/intable/src/theme/shadcn.scss

@@ -0,0 +1,66 @@
+/**
+ * intable — Shadcn/Zinc Theme
+ * Neutral zinc/slate tones, clean minimal, matches shadcn/ui palette
+ * Best for: modern SaaS dashboards, admin panels, clean productivity tools
+ */
+
+.data-table {
+  --bg: #ffffff;
+  --c-primary: #18181b;
+
+  --menu-bg: #ffffff;
+  --li-hover-bg: #f4f4f5;
+
+  --table-b: 1px solid var(--table-b-c);
+  --table-b-c: #e4e4e7;
+  --table-c: #09090b;
+  --table-bg: #ffffff;
+
+  --table-header-c: #71717a;
+  --table-header-bg: #ffffff;
+
+  --table-row-hover-bg: #fafafa;
+
+  --select-area-bg: #18181b14;
+
+  font-size: 14px;
+
+  th, td {
+    padding: 10px 12px;
+    line-height: 20px;
+  }
+
+  thead th {
+    font-weight: 500;
+  }
+
+  &--small {
+    font-size: 13px;
+
+    th, td {
+      padding: 6px 10px;
+    }
+  }
+
+  // Dark mode variant
+  &.dark, [data-theme="dark"] & {
+    --bg: #09090b;
+    --c-primary: #fafafa;
+
+    --menu-bg: #09090b;
+    --li-hover-bg: #27272a;
+
+    --table-b-c: #27272a;
+    --table-c: #fafafa;
+    --table-bg: #09090b;
+
+    --table-header-c: #71717a;
+    --table-header-bg: #09090b;
+
+    --table-row-hover-bg: #18181b;
+
+    --select-area-bg: #ffffff14;
+
+    color-scheme: dark;
+  }
+}

package/packages/intable/src/theme/stripe.scss

@@ -0,0 +1,57 @@
+/**
+ * intable — Stripe Theme
+ * Ultra-clean minimal white, tight spacing, strong typographic hierarchy
+ * Best for: fintech, e-commerce, financial dashboards, data-dense UIs
+ */
+
+.data-table {
+  --bg: #ffffff;
+  --c-primary: #635bff;
+
+  --menu-bg: #ffffff;
+  --li-hover-bg: #f6f8fa;
+
+  --table-b: 1px solid var(--table-b-c);
+  --table-b-c: #e3e8ee;
+  --table-c: #0a2540;
+  --table-bg: #ffffff;
+
+  --table-header-c: #425466;
+  --table-header-bg: #f7fafc;
+
+  --table-row-hover-bg: #f7fafc;
+
+  --select-area-bg: #635bff1a;
+
+  font-size: 13.5px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+
+  th, td {
+    padding: 9px 14px;
+    line-height: 20px;
+  }
+
+  thead th {
+    font-size: 11.5px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--table-header-c);
+  }
+
+  &--small {
+    font-size: 12.5px;
+
+    th, td {
+      padding: 5px 10px;
+    }
+
+    thead th {
+      font-size: 11px;
+    }
+  }
+
+  .row-selection {
+    width: 38px;
+  }
+}

package/packages/react/package.json

@@ -1,16 +1,17 @@
 {
   "name": "@intable/react",
-  "version": "0.0.7",
+  "version": "0.0.8",
+  "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
-    },
-    "./style.scss": "./dist/style.scss"
+    ".": "./dist/index.js",
+    "./*": {
+      "import": "./dist/*.js",
+      "types": "./dist/*.d.ts"
+    }
   },
   "files": [
     "dist"
@@ -20,12 +21,16 @@
     "solid-js": "^1.9.9"
   },
   "peerDependencies": {
-    "react": "^18 | ^19 | ^20",
-    "react-dom": "^18 | ^19 | ^20"
+    "react": "^18.0.0 || ^19.0.0 || ^20.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0 || ^20.0.0"
   },
   "devDependencies": {
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "antd": "^5.22.5"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
   }
 }

package/packages/react/src/index.ts

@@ -3,7 +3,7 @@ import { createRoot } from 'react-dom/client'
 import { flushSync } from 'react-dom'
 import { type TableProps } from 'intable'
 import 'intable/wc'
-// import './style.scss'
+import './style.scss'
 
 import { onCleanup } from 'solid-js'
 

package/packages/vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intable/vue",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",

package/scripts/publish.js

@@ -57,7 +57,7 @@ function publishPackage(pkg) {
   console.log(`\n📤 Publishing ${pkg.name}...`)
   
   try {
-    execSync(`pnpm publish --no-git-checks --filter ${pkg.name}`, { stdio: 'inherit' })
+    execSync(`pnpm publish --no-git-checks --filter ${pkg.name}`, { cwd: rootDir, stdio: 'inherit' })
     console.log(`  ✅ ${pkg.name} published successfully!`)
   } catch (error) {
     console.error(`  ❌ Failed to publish ${pkg.name}:`, error.message)

package/src/index.tsx

@@ -0,0 +1,20 @@
+import { render, Suspense } from 'solid-js/web'
+import { HashRouter } from '@solidjs/router'
+import routes from '~solid-pages'
+
+render(
+  () => {
+    return (
+      <HashRouter
+        root={props => (
+          <Suspense>
+            {props.children}
+          </Suspense>
+        )}
+      >
+        {routes}
+      </HashRouter>
+    )
+  },
+  document.getElementById('root') as HTMLElement,
+)