intable 0.0.7 → 0.0.9

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

@@ -1,175 +0,0 @@
-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

@@ -1,74 +0,0 @@
-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

@@ -1,63 +0,0 @@
-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

@@ -1,107 +0,0 @@
-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

@@ -1,81 +0,0 @@
-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
-    }
-  },
-}