intable 0.0.5 → 0.0.7

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

@@ -0,0 +1,175 @@
+import { batch, createMemo } from 'solid-js'
+import { combineProps } from '@solid-primitives/props'
+import { type Plugin } from '..'
+import { usePointerDrag } from '../hooks'
+
+declare module '../index' {
+  interface TableProps {
+    
+  }
+  interface TableStore {
+    selected: { start: number[]; end: number[] }
+  }
+  interface Commands {
+    getAreaRows(): any[]
+  }
+}
+
+const inrange = (v, min, max) => v <= max && v >= min
+
+export const CellSelectionPlugin: Plugin = {
+  name: 'cell-selection',
+  store: () => ({
+    selected: { start: [], end: [] }
+  }),
+  commands: store => ({
+    getAreaRows() {
+      const { start, end } = store.selected
+      const [y1, y2] = [start[1], end[1]].sort((a, b) => a - b)
+      return store.props!.data.slice(y1, y2 + 1)
+    }
+  }),
+  rewriteProps: {
+    Table: ({ Table }, { store }) => (o) => {
+      store.cellSelectionRect ??= createMemo(() => {
+        const { start, end } = store.selected
+        const xs = [start[0], end[0]].sort((a, b) => a - b)
+        const ys = [start[1], end[1]].sort((a, b) => a - b)
+        return { xs, ys }
+      })
+      
+      usePointerDrag(() => store.table, {
+        preventDefault: false,
+        start(e, move, end) {
+          batch(() => {
+            const findCell = (e: PointerEvent) => e.composedPath().find((e) => e.tagName == 'TH' || e.tagName == 'TD') as Element
+            const getXY = (cell: Element) => [cell.getAttribute('x'), cell.getAttribute('y')]
+            const cell = findCell(e)
+            if (!cell) return
+            if (e.buttons != 1 && cell.classList.contains('range-selected')) return
+            if (cell.tagName == 'TH') {
+              const [x, y] = getXY(cell)
+              if (x == null) return
+              store.selected.start = [+x, 0]
+              store.selected.end = [+x, Infinity]
+              move(e => {
+                const cell = findCell(e)
+                if (!cell) return
+                const [x, y] = getXY(cell)
+                if (x == null) return
+                store.selected.end = [+x, Infinity]
+              })
+            }
+            if (cell.classList.contains('index')) {
+              const [x, y] = getXY(cell)
+              if (x == null || y == null) return
+              store.selected.start = [0, +y]
+              store.selected.end = [Infinity, +y]
+              move(e => {
+                const cell = findCell(e)
+                if (!cell) return
+                const [x, y] = getXY(cell)
+                if (x == null || y == null) return
+                store.selected.end = [Infinity, +y]
+              })
+            }
+            else if (cell.tagName == 'TD') {
+              const [x, y] = getXY(cell)
+              if (x == null || y == null) return
+              store.selected.start = [+x, +y]
+              store.selected.end = [...store.selected.start]
+              move(e => {
+                const cell = findCell(e)
+                if (!cell) return
+                const [x, y] = getXY(cell)
+                if (x == null || y == null) return
+                store.selected.end = [+x, +y]
+              })
+            }
+            // scrollIntoView()
+          })
+        },
+      })
+
+      o = combineProps({ class: 'select-none' }, o)
+      return <Table {...o} />
+    },
+    Th: ({ Th }, { store }) => o => {
+      const clazz = createMemo(() => {
+        const { start, end } = store.selected
+        const inx = inrange(o.x, ...[start[0], end[0]].sort((a, b) => a - b))
+        return inx ? 'col-range-highlight' : ''
+      })
+      const mo = combineProps(o, { get class() { return clazz() } })
+      return (
+        <Th {...mo}>
+          {mo.children}
+          {clazz() && <div class='area' />}
+        </Th>
+      )
+    },
+    Td: ({ Td }, { store }) => (o) => {
+      const clazz = createMemo(() => {
+        let clazz = ''
+        const { xs, ys } = store.cellSelectionRect()
+        const inx = inrange(o.x, xs[0], xs[1])
+        const iny = inrange(o.y, ys[0], ys[1])
+        if (inx && iny) {
+          clazz += 'range-selected '
+          if (o.x == xs[0]) clazz += 'range-selected-l '
+          if (o.x == xs[1]) clazz += 'range-selected-r '
+          if (o.y == ys[0]) clazz += 'range-selected-t '
+          if (o.y == ys[1]) clazz += 'range-selected-b '
+        }
+        // if (o.x == 0 && iny) clazz += 'row-range-highlight '
+        if (o.col.id == store.$index.id && iny) clazz += 'row-range-highlight '
+        return clazz
+      })
+
+      const mo = combineProps(o, { get class() { return clazz() }, tabindex: -1 })
+      return (
+        <Td {...mo}>
+          {mo.children}
+          {clazz() && <div class='area' />}
+        </Td>
+      )
+    },
+  },
+  keybindings: (store) => {
+    const scrollIntoView = () => {
+      const cell = store.table?.querySelector(`td[x="${store.selected.start[0]}"][y="${store.selected.start[1]}"]`)
+      ;(cell as HTMLElement | null)?.scrollIntoViewIfNeeded(false)
+      ;(cell as HTMLElement | null)?.focus()
+    }
+    return {
+      'ArrowLeft': () => {
+        const { start, end } = store.selected
+        if (!start.length) return
+        start[0] = end[0] = Math.max(start[0] - 1, 0)
+        end[1] = start[1]
+        scrollIntoView()
+      },
+      'ArrowRight': () => {
+        const { start, end } = store.selected
+        if (!start.length) return
+        start[0] = end[0] = Math.min(start[0] + 1, store.props!.columns!.length - 1)
+        end[1] = start[1]
+        scrollIntoView()
+      },
+      'ArrowUp': () => {
+        const { start, end } = store.selected
+        if (!start.length) return
+        start[1] = end[1] = Math.max(start[1] - 1, 0)
+        end[0] = start[0]
+        scrollIntoView()
+      },
+      'ArrowDown': () => {
+        const { start, end } = store.selected
+        if (!start.length) return
+        start[1] = end[1] = Math.min(start[1] + 1, store.props!.data!.length - 1)
+        end[0] = start[0]
+        scrollIntoView()
+      },
+    }
+  },
+}

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

@@ -0,0 +1,74 @@
+import { createEffect, createMemo, getOwner, runWithOwner } from 'solid-js'
+import { createEventListener } from '@solid-primitives/event-listener'
+import { combineProps } from '@solid-primitives/props'
+import { createKeybindingsHandler } from 'tinykeys'
+import { type Commands, type Plugin } from '..'
+
+declare module '../index' {
+  interface TableProps {
+    
+  }
+  interface TableStore {
+    commands: Commands
+  }
+  interface Plugin {
+    commands?: (store: TableStore, commands: Partial<Commands>) => Partial<Commands> & Record<string, any>
+  }
+  interface Commands {
+    
+  }
+}
+
+export const CommandPlugin: Plugin = {
+  name: 'command',
+  priority: Infinity,
+  store: (store) => {
+    const owner = getOwner()
+    const commands = createMemo(() => (
+      store.plugins.reduce((o, e) => (
+        Object.assign(o, runWithOwner(owner, () => e.commands?.(store, {...o})))
+      ), {} as Commands)
+    ))
+    return {
+      get commands() { return commands() }
+    }
+  },
+  rewriteProps: {
+    Table: ({ Table }, { store }) => o => {
+      const owner = getOwner()
+
+      // Merge keybindings from all plugins in priority order (later index = lower priority = outer wrapper).
+      // createMemo re-creates the tinykeys handler whenever plugins or user overrides change.
+      const handler = createMemo(() => {
+        const merged: Record<string, (e: KeyboardEvent) => void> = {}
+        for (const p of store.plugins) {
+          const bindings = runWithOwner(owner, () => p.keybindings?.(store))
+          if (bindings) Object.assign(merged, bindings)
+        }
+        // Apply user overrides: false = disable, function = replace
+        const overrides = store.props?.keybindings
+        if (overrides) {
+          for (const [key, val] of Object.entries(overrides)) {
+            if (val === false) delete merged[key]
+            else if (typeof val === 'function') merged[key] = val
+          }
+        }
+        // Wrap each handler: preventDefault + call
+        return createKeybindingsHandler(
+          Object.fromEntries(
+            Object.entries(merged).map(([k, fn]) => [k, (e: KeyboardEvent) => {
+              e.preventDefault()
+              fn(e)
+            }])
+          )
+        )
+      })
+
+      // Single keydown listener that proxies to the current merged handler
+      createEventListener(() => store.scroll_el, 'keydown', (e: KeyboardEvent) => handler()(e))
+
+      o = combineProps({ tabindex: -1 }, o)
+      return <Table {...o} />
+    }
+  },
+}

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

@@ -0,0 +1,63 @@
+import { createEffect } from 'solid-js'
+import { Ctx, type Plugin } from '..'
+
+declare module '../index' {
+  interface TableProps {
+    
+  }
+  interface TableStore {
+    
+  }
+  interface Plugin {
+    
+  }
+  interface Commands {
+    copy: () => void
+    paste: () => void
+  }
+}
+
+export const ClipboardPlugin: Plugin = {
+  name: 'clipboard',
+  keybindings: (store) => ({
+    '$mod+c': () => { store.commands.copy(); store.scroll_el?.classList.add('copied') },
+    '$mod+v': () => store.commands.paste(),
+  }),
+  onMount: (store) => {
+    // Remove the 'copied' CSS indicator whenever the selection changes
+    createEffect(() => {
+      JSON.stringify(store.selected)
+      store.scroll_el?.classList.remove('copied')
+    })
+  },
+  menus: (store) => [
+    // { label: '复制', onClick: () => store.commands.copy() },
+    // { label: '粘贴', onClick: () => store.commands.paste() },
+  ],
+  commands: store => ({
+    copy: () => {
+      const { start, end } = store.selected
+      if (start.length == 0) 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')
+      navigator.clipboard.writeText(text)
+    },
+    paste: async () => {
+      const { start, end } = store.selected
+      if (start.length == 0) 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)
+      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)]
+      store.props!.onDataChange?.(data)
+    },
+  })
+}

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

@@ -0,0 +1,107 @@
+import { unwrap } from 'solid-js/store'
+import { combineProps } from '@solid-primitives/props'
+import { createLazyMemo } from '@solid-primitives/memo'
+import { v4 as uuid } from 'uuid'
+import { diffArrays } from 'diff'
+import { isEqual, keyBy } from 'es-toolkit'
+import { type Plugin } from '..'
+import { log } from '../utils'
+
+declare module '../index' {
+  interface TableProps {
+    diff?: {
+      /** @default true */ added?: boolean
+      /** @default true */ removed?: boolean
+      /** @default true */ changed?: boolean
+      onCommit?: (data: any, opt: { added: any[], removed: any[], changed: any[] }) => any
+    }
+  }
+  interface TableStore {
+    diffData: any[]
+    diffDataKeyed: () => any
+  }
+  interface Commands {
+    diffCommit(data?: any[]): void
+  }
+}
+
+const DEL = Symbol('del')
+const NEW = Symbol('new')
+
+export const DiffPlugin: Plugin = {
+  priority: Infinity,
+  store: store => {
+    const data = store.rawProps.data || []
+    data.forEach(row => unwrap(row)[store.rawProps.rowKey] ??= uuid())
+    return {
+      diffData: structuredClone(unwrap(data || [])),
+      diffDataKeyed: createLazyMemo(() => keyBy(store.diffData, e => e[store.props!.rowKey]))
+    }
+  },
+  commands: store => ({
+    async diffCommit(data = store.rawProps.data || []) {
+      const { rowKey } = store.props || {}
+      data.forEach(row => unwrap(row)[rowKey] ??= uuid())
+      data = structuredClone(unwrap(data))
+      const added = [], removed = [], changed = []
+      const keyed = keyBy(data, e => e[rowKey])
+      for (const e of data) {
+        const old = store.diffDataKeyed()[e[rowKey]]
+        if (!old) added.push(e)
+        else if (!isEqual(e, old)) changed.push(e)
+      }
+      for (const e of store.diffData) {
+        !keyed[e[rowKey]] && removed.push(e)
+      }
+      await store.props!.diff?.onCommit?.(data, { added, removed, changed })
+      added[NEW] = 0
+      store.diffData = data
+    }
+  }),
+  rewriteProps: {
+    diff: ({ diff }) => ({
+      added: true,
+      removed: true,
+      changed: true,
+      ...diff
+    }),
+    data: ({ data }, { store }) => {
+      const { rowKey, diff } = store.props || {}
+      const diffData = store.diffData || []
+
+      // 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.
+      if (data.length === diffData.length && data.length > 0) {
+        let sameOrder = true
+        for (let i = 0; i < data.length; i++) {
+          if (data[i]?.[rowKey] !== diffData[i]?.[rowKey]) { sameOrder = false; break }
+        }
+        if (sameOrder) return data
+      }
+
+      // Structural change (add / delete / move) — fall back to diff library
+      const diffArr = diffArrays(diffData, data, { comparator: (a, b) => a[rowKey] == b[rowKey] })
+      return diffArr.flatMap(e => (
+        // e.added ? e.value.map(e => ({ ...e, [NEW]: 1 })) :
+        e.added ? e.value.map(e => (e[NEW] = 1, e)) :
+        e.removed ? diff!.removed ? e.value.map(e => ({ ...e, [DEL]: 1, [store.internal]: 1 })) : [] :
+        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(' ')
+      }
+    }),
+  },
+  keybindings: (store) => ({
+    '$mod+S': () => store.commands.diffCommit(),
+  }),
+}

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

@@ -0,0 +1,81 @@
+import { delay } from "es-toolkit"
+import { isMatch } from "es-toolkit/compat"
+import { Ctx, type Plugin, type TableColumn, type THProps } from "../index"
+import { useSort } from '../hooks/useSort'
+
+declare module '../index' {
+  interface TableProps {
+    colDrag?: boolean
+    rowDrag?: boolean
+  }
+  interface TableColumn {
+
+  }
+  interface TableStore {
+
+  }
+  interface Commands {
+    
+  }
+}
+
+export const DragPlugin: Plugin = {
+  rewriteProps: {
+    colDrag: ({ colDrag = false }) => colDrag,
+    rowDrag: ({ rowDrag = false }) => rowDrag,
+  },
+  onMount(store) {
+    const colDrag = useSort(() => store.scroll_el, {
+      get enable() { return store.props?.colDrag },
+      guideLine: { class: 'col__guide-line' },
+      draggable: el => ((x, y) => el.tagName == 'TH' && isMatch(store.selected, { start: [x, 0] }) && !store.props?.columns[x][store.internal] && store.thead.contains(el) && delay(300).then(() => true))(+el.getAttribute('x')!, +el.getAttribute('y')!),
+      dragover: el => el.tagName == 'THEAD',
+      children: el => [...colDrag.drag.parentElement.children].filter(e => !store.props?.columns[e.getAttribute('x')][store.internal]),
+      dragend: onColDragend
+    })
+
+    const rowDrag = useSort(() => store.scroll_el, {
+      get enable() { return store.props?.rowDrag },
+      guideLine: { class: 'row__guide-line' },
+      draggable: el => ((x, y) => el.tagName == 'TD' && isMatch(store.selected, { start: [0, y] }) && x == 0 && !store.props?.data[y][store.internal] && store.tbody.contains(el) && delay(300).then(() => true))(+el.getAttribute('x')!, +el.getAttribute('y')!),
+      dragover: el => el.tagName == 'TBODY',
+      children: el => [...rowDrag.over.children].filter(e => !store.props!.data[e.getAttribute('y')][store.internal]),
+      dragend: onRowDragend
+    })
+
+    async function onColDragend() {
+      if (colDrag.drag == colDrag.rel) return
+      const [cols, rawCols] = [store.props!.columns, [...store.rawProps.columns || []]]
+      const col1 = (col => col[store.raw] ?? col)(cols[colDrag.drag.getAttribute('x')])
+      const col2 = (col => col[store.raw] ?? col)(cols[colDrag.rel.getAttribute('x')])
+      const i1 = rawCols.indexOf(col1)
+      const i2 = rawCols.indexOf(col2)
+      if (i1 < 0 || i2 < 0) return
+      rawCols[i1].fixed = rawCols[i2].fixed
+      rawCols.splice(i2 - (i1 > i2 ? 0 : 1) + (colDrag.type == 'before' ? 0 : 1), 0, rawCols.splice(i1, 1)[0])
+      store.props!.onColumnsChange?.(rawCols)
+      // select area
+      await Promise.resolve()
+      const i = store.props!.columns.findIndex(e => e == col1 || e[store.raw] == col1)
+      if (i < 0) return
+      store.selected.start[0] = store.selected.end[0] = i
+    }
+
+    async function onRowDragend() {
+      if (rowDrag.drag == rowDrag.rel) return
+      const [data, rawData] = [store.props!.data, [...store.rawProps.data || []]]
+      const data1 = (row => row[store.raw] ?? row)(data[rowDrag.drag.getAttribute('y')])
+      const data2 = (row => row[store.raw] ?? row)(data[rowDrag.rel.getAttribute('y')])
+      const i1 = rawData.indexOf(data1)
+      const i2 = rawData.indexOf(data2)
+      if (i1 < 0 || i2 < 0) return
+      rawData.splice(i2 - (i1 > i2 ? 0 : 1) + (rowDrag.type == 'before' ? 0 : 1), 0, rawData.splice(i1, 1)[0])
+      store.props!.onDataChange?.(rawData)
+      // select area
+      await Promise.resolve()
+      const i = store.props!.data.findIndex(e => e == data1 || e[store.raw] == data1)
+      if (i < 0) return
+      store.selected.start[1] = store.selected.end[1] = i
+    }
+  },
+}