intable 0.0.5 → 0.0.7

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

@@ -0,0 +1,195 @@
+import { batch, createEffect, createMemo, createSignal, mapArray, on } from 'solid-js'
+import { combineProps } from '@solid-primitives/props'
+import { createEventListener } from '@solid-primitives/event-listener'
+import { delay, range, remove } from 'es-toolkit'
+import { autoPlacement, computePosition } from '@floating-ui/dom'
+import { type Plugin, type TableStore } from '..'
+import { useMemoAsync, useTinykeys } from '../hooks'
+import { Menu } from '../components/Menu'
+import { tree } from '../utils'
+
+declare module '../index' {
+  interface TableProps {
+
+  }
+  interface TableStore {
+
+  }
+  interface Plugin {
+    menus?: (store: TableStore) => any[]
+  }
+  interface Commands {
+    rowEquals: (a, b) => boolean
+    rowIndexOf: (data: any[], row) => number
+    rowChange: (row, i?) => void
+    // 
+    addRows: (i: number, rows: any[], before?: boolean) => void
+    deleteRows: (i: number[]) => void
+    moveRows: (ii: number[], to: number) => void
+  }
+}
+
+export const MenuPlugin: Plugin = {
+  name: 'menu',
+  priority: Infinity,
+  store: (store) => ({
+
+  }),
+  rewriteProps: {
+    Table: ({ Table }, { store }) => o => {
+      const [menuEl, setMenuEl] = createSignal<HTMLElement>()
+
+      const _menus = mapArray(() => store.plugins || [], plugin => createMemo(() => plugin.menus?.(store)))
+      const menus = createMemo(() => _menus().flatMap(e => e() || []))
+
+      const [pos, setPos] = createSignal<{ x: number; y: number }>()
+      function onContextMenu(e: PointerEvent) {
+        e.preventDefault()
+        setPos({ x: e.x, y: e.y })
+      }
+
+      createEventListener(document, 'pointerdown', e => {
+        menuEl()?.contains(e.target as Element) || setPos()
+      })
+
+      const style = useMemoAsync(() => {
+        const mel = menuEl()
+        if (!mel) return
+        return computePosition({ getBoundingClientRect: () => DOMRect.fromRect(pos()) }, mel, {
+          strategy: 'fixed',
+          placement: 'top-start',
+          middleware: [autoPlacement({ boundary: document.body, alignment: 'start' })]
+        })
+          .then(({ x, y }) => ({
+            position: 'fixed',
+            transform: `translate(${x}px, ${y}px)`,
+            top: 0,
+            left: 0,
+            'z-index': 10
+          }))
+      })
+
+      o = combineProps({ tabindex: -1, onContextMenu }, o)
+      return (
+        <Table {...o}>
+          {pos() && <Menu ref={setMenuEl} style={style() || 'position: fixed'} items={menus()} onAction={() => setPos()} />}
+          {o.children}
+        </Table>
+      )
+    },
+  },
+  menus: (store) => [
+    { label: '新增行 ↑', cb: () => store.commands.addRows(store.selected.end[1], [store.props!.newRow(store.selected.end[1])]) },
+    { label: '新增行 ↓', cb: () => store.commands.addRows(store.selected.end[1], [store.props!.newRow(store.selected.end[1])], false) },
+    { label: '删除行', cb: () => store.commands.deleteRows(range(...(e => [e[0], e[1] + 1])([store.selected.start[1], store.selected.end[1]].sort((a, b) => a - b)) as [number, number])) },
+  ],
+  commands: (store) => ({
+    rowEquals(a, b) {
+      // return a[store.props!.rowKey] == b[store.props!.rowKey]
+      return a == b
+    },
+    rowIndexOf(data, row) {
+      return data.findIndex(e => store.commands.rowEquals(e, row))
+    },
+    rowChange(row, i) {
+      const data = [...store.rawProps.data || []]
+      i = i != null
+        ? data.findIndex(ee => ee == store.props!.data[i])
+        : store.commands.rowIndexOf(data, row)
+      if (i > -1) {
+        data[i] = row
+        store.props!.onDataChange?.(data)
+      }
+    },
+    addRows(i, rows, before = true) {
+      addRows(store, i, rows, before)
+    },
+    deleteRows(ii) {
+      const { rowKey, data } = store.props!
+      const val = [...store.rawProps.data || []]
+      // const ids = new Set(data.filter((e, i) => ii.includes(i)).map(e => e[rowKey]))
+      // remove(val, e => ids.has(e[rowKey]))
+      const ids = new Set(ii.map(i => data[i]))
+      remove(val, e => ids.has(e))
+      store.props?.onDataChange?.(val)
+    },
+    moveRows(ii, to) {
+      const { data: flatData } = store.props!
+
+      // Collect the actual row objects, skipping internal/system rows
+      const rows = ii.map(i => flatData[i]).filter(r => r && !r?.[store.internal])
+      if (!rows.length) return
+
+      // Destination row — undefined means "append to end"
+      const destRow = to >= 0 && to < flatData.length ? flatData[to] : null
+
+      const { rowKey } = store.props
+      const childrenField = store.props.tree?.children || Symbol()
+      const movedKeys = new Set(rows.map((r: any) => r[rowKey]))
+
+      // 1. Remove moved nodes from wherever they live in the nested tree, preserving their original objects (no clone) so children are kept.
+      const removed: any[] = []
+      function removeNodes(nodes: any[]): any[] {
+        return nodes.reduce((acc: any[], node: any) => {
+          if (movedKeys.has(node[rowKey])) {
+            removed.push(node)
+            return acc
+          }
+          if (Array.isArray(node[childrenField]) && node[childrenField].length) {
+            const newChildren = removeNodes(node[childrenField])
+            node = newChildren.length !== node[childrenField].length
+              ? { ...node, [childrenField]: newChildren }
+              : node
+          }
+          acc.push(node)
+          return acc
+        }, [])
+      }
+      const rawData = removeNodes([...(store.rawProps.data || [])])
+
+      // 2. Insert removed nodes just before the destination node in the tree.
+      const list = tree.findParent(rawData, e => e[rowKey] === destRow?.[rowKey])?.children ?? rawData
+      const index = destRow ? list.findIndex(e => e[rowKey] === destRow[rowKey]) : -1
+      if (index > -1) list.splice(index, 0, removed)
+      else list.push(...removed)
+
+      // 3. Update selection to the new flat position (best-effort: use to - ii.length)
+      if (store.selected) {
+        const newIdx = Math.max(0, to - rows.length)
+        store.selected.start = [0, newIdx]
+        store.selected.end = [Infinity, newIdx + removed.length - 1]
+      }
+
+      store.props?.onDataChange?.(rawData)
+    }
+  })
+}
+
+function addRows(store: TableStore, i: number, rows: any[], before: boolean) {
+  const { data } = store.props!
+  const prev = i => {
+    before = false
+    while (--i >= 0 && data[i]?.[store.internal]) { }
+    return i >= 0 ? data[i] : null
+  }
+  const next = i => {
+    before = true
+    while (++i < data.length && data[i]?.[store.internal]) { }
+    return i < data.length ? data[i] : null
+  }
+  const anchor = !data[i]?.[store.internal] ? data[i] : before ? prev(i) || next(i) : next(i) || prev(i)
+  if (anchor) {
+    batch(() => {
+      i = store.commands.rowIndexOf(data, anchor)
+      if (!store.selected) return
+      store.selected.start = [0, i + (before ? 0 : 1)]
+      store.selected.end = [Infinity, i + rows.length - 1 + (before ? 0 : 1)]
+    })
+  }
+  ; (() => {
+    const data = [...store.rawProps.data || []]
+    const i = anchor ? store.commands.rowIndexOf(data, anchor) + (before ? 0 : 1) : data.length
+    data.splice(i, 0, ...rows)
+    store.props?.onDataChange?.(data)
+  })()
+}

package/packages/intable/src/plugins/RenderPlugin/components.tsx

@@ -0,0 +1,51 @@
+import { For } from 'solid-js'
+import { component } from 'undestructure-macros'
+import { combineProps } from '@solid-primitives/props'
+
+export const Checkbox = component(({ value, onChange, ...props }) => {
+  props = combineProps({ get class() { return `you-checkbox ${value && 'checked'}` } }, props)
+  return (
+    <input checked={value || false} onChange={(e) => onChange?.(e.currentTarget.checked)} type="checkbox" {...props} />
+  )
+})
+
+export const Files = component(({ ...props }) => {
+  return (
+    <Tags {...props} />
+  )
+})
+
+export const Tags = component(({ value, children, disabled, onChange, onAdd, ...props }) => { 
+  props = combineProps({ class: 'flex flex-wrap items-center gap-2 h-full' }, props)
+  const toarr = v => Array.isArray(v) ? v : (v != null ? [v] : [])
+  return (
+    <div {...props}>
+      <For each={toarr(value)}>{e => (
+        <Tag style={`background: ${e.color}`} disabled={disabled} onDel={() => onChange(toarr(value).filter(e2 => e2 != e))}>
+          {children ? children(e) : (e?.text ?? e?.label ?? e?.name ?? e)}
+        </Tag>
+      )}</For>
+      {!disabled && <Tag disabled onClick={onAdd}><ILucidePlus /></Tag>}
+    </div>
+  )
+})
+
+export const Tag = component(({ disabled, children, onDel, ...props }) => {
+  props = combineProps({ class: 'flex items-center px-2 py-1 rd-sm bg-gray/20 text-3.5 lh-[1]' }, props)
+  return (
+    <div {...props}>
+      {children}
+      {!disabled && <ILucideX class='icon-clickable flex-shrink-0 size-4! ml-1 mr--1 op-75' onClick={onDel} />}
+    </div>
+  )
+})
+
+// 评估公式
+export const evaluateFormula = (formula: string, data: any) => {
+  try {
+    const ctx = { data }
+    return (new Function(...Object.keys(ctx), `return ` + formula))(...Object.values(ctx))
+  } catch (error) {
+    return '公式错误'
+  }
+}

package/packages/intable/src/plugins/RenderPlugin/index.tsx

@@ -0,0 +1,81 @@
+import { mergeProps, type JSX } from 'solid-js'
+import { component } from 'undestructure-macros'
+import { type Plugin, type TD } from '../..'
+import { Checkbox, Files } from './components'
+import { resolveOptions } from '../../utils'
+import { renderComponent, solidComponent } from '../../components/utils'
+
+declare module '../../index' {
+  interface TableProps {
+
+  }
+  interface TableColumn {
+    // render?: string | Render
+    render?: Render
+    enum?: Record<string, any> | { label?: string; value: any }[]
+  }
+  interface TableStore {
+    renders: { [key: string]: Render }
+  }
+}
+
+export type RenderProps = Parameters<TD>[0] & { onChange: (v) => void }
+export type Render = (props: RenderProps) => JSX.Element | any
+
+export const RenderPlugin: Plugin = {
+  name: 'render',
+  priority: -Infinity,
+  store: () => ({
+    renders: { ...renders }
+  }),
+  rewriteProps: {
+    Td: ({ Td }, { store }) => o => {
+      return (
+        <Td {...o}>
+          {(() => {
+            let Comp = (e => typeof e == 'string' ? store.renders[e] : e)(o.col.render) || text
+            return renderComponent(Comp, mergeProps(o, { onChange: v => store.commands.rowChange({ ...o.data, [o.col.id]: v }, o.y) }), store.props!.renderer!)
+          })()}
+        </Td>
+      )
+    }
+  }
+}
+
+const text: Render = component(({ data, col, onChange }) => {
+  return <>{
+    (v =>
+      col.enum ? resolveOptions(col.enum).find(e => e.value == v)?.label ?? v : v
+    )(data[col.id])
+  }</>
+})
+
+const number = text
+
+const date = text
+
+const checkbox: Render = component(({ data, col, onChange }) => {
+  return (
+    <div class='flex items-center h-full'>
+      <Checkbox class='' value={data[col.id]} onChange={onChange} />
+    </div>
+  )
+})
+
+const file: Render = component(({ data, col, onChange }) => {
+  return (
+    <Files value={data[col.id]} onChange={onChange} disabled />
+  )
+})
+
+export const renders = {
+  text,
+  number,
+  date,
+  checkbox,
+  file
+}
+
+for (const k in renders) {
+  renders[k] = solidComponent(renders[k])
+}

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

@@ -0,0 +1,122 @@
+import { batch, untrack, useContext } from 'solid-js'
+import { combineProps } from '@solid-primitives/props'
+import { clamp } from 'es-toolkit'
+import { defaultsDeep } from 'es-toolkit/compat'
+import { usePointerDrag } from '../hooks'
+
+import { Ctx, type Plugin, type TableColumn, type TDProps, type THProps } from "../index"
+import { log, unFn } from '../utils'
+import { createEventListener } from '@solid-primitives/event-listener'
+import { reconcile } from 'solid-js/store'
+
+declare module '../index' {
+  interface TableProps {
+    resizable?: {
+      col?: Partial<{ enable: boolean; min: number; max: number }>
+      row?: Partial<{ enable: boolean; min: number; max: number }>
+    }
+    onColumnsChange?: (columns: TableColumn[]) => void
+  }
+  interface TableColumn {
+    resizable?: boolean
+    onWidthChange?: (width: number) => void
+  }
+  interface TableStore {
+
+  }
+  interface Commands {
+    
+  }
+}
+
+const COL = Symbol('col_size')
+const ROW = Symbol('row_size')
+
+const ColHandle = (o: THProps) => {
+  const { props, store } = useContext(Ctx)
+  let el!: HTMLDivElement
+  usePointerDrag(() => el, {
+    start(e, move, end) {
+      e.stopPropagation()
+      const i = o.x
+      const { min, max }  = props.resizable!.col
+      const th = el.parentElement as HTMLTableColElement
+      const sw = th.offsetWidth
+      move((e, { ox }) => store[COL][o.x] = clamp(sw + ox, min, max))
+      end(() => {
+        const col = props.columns[i]
+        const cols = [...store.rawProps.columns || []]
+        const index = cols.indexOf(col[store.raw] ?? col)
+        if (index > -1) {
+          cols[index] = { ...cols[index], width: th.offsetWidth }
+          props.onColumnsChange?.(cols)
+        }
+        col.onWidthChange?.(th.offsetWidth)
+      })
+    },
+  })
+  return <div ref={el} class={`in-cell__resize-handle absolute top-0 right-0 flex justify-center w-10px! ${o.x == props.columns.length - 1 ? 'justify-end!' : 'w-10px! translate-x-1/2'} after:w-1 cursor-w-resize z-1`} />
+}
+
+const RowHandle = (o: TDProps) => {
+  const { props, store } = useContext(Ctx)
+  let el!: HTMLDivElement
+  usePointerDrag(() => el, {
+    start(e, move, end) {
+      e.stopPropagation()
+      const i = o.y
+      const { min, max }  = props.resizable!.row
+      const th = el.parentElement as HTMLTableColElement
+      const sh = th.offsetHeight
+      move((e, { oy }) => store[ROW][o.y] = clamp(sh + oy, min, max))
+      end(() => {
+        const row = props.data[i]
+        const data = [...store.rawProps.data || []]
+        const index = data.indexOf(row[store.raw] ?? row)
+        if (index > -1) {
+          // todo
+        }
+      })
+    },
+  })
+  createEventListener(() => el, 'dblclick', () => o.data[COL]= void 0)
+  return <div ref={el} class={`in-cell__resize-handle absolute bottom-0 left-0 flex flex-col justify-center h-1! ${o.y == props.data.length - 1 ? 'justify-end!' : ''} after:h-1 cursor-s-resize z-1`} />
+}
+
+export const ResizePlugin: Plugin = {
+  name: 'resize',
+  priority: -Infinity,
+  store: () => ({
+    [COL]: [],
+    [ROW]: []
+  }),
+  rewriteProps: {
+    resizable: ({ resizable }) => defaultsDeep(resizable, {
+      col: { enable: true, min: 45, max: 800 },
+      row: { enable: false, min: 20, max: 400 }
+    }),
+    columns: ({ columns }, { store }) => (
+      columns = columns.map((e, i) => ({ ...e, [store.raw]: e[store.raw] ?? e })),
+      columns = columns.map(e => e.resizable === void 0 ? { ...e, resizable: store.props?.resizable?.col.enable, [store.raw]: e[store.raw] ?? e } : e),
+      columns = columns.map((e, i) => store[COL][i] ? { ...e, width: store[COL][i], [store.raw]: e[store.raw] ?? e } : e),
+      untrack(() => batch(() => reconcile(columns, { key: store.raw })(store.__resize__cols ??= [])))
+    ),
+    Th: ({ Th }, { store }) => o => {
+      o = combineProps({ class: 'relative' }, o)
+      return <Th {...o}>
+        {o.children}
+        {o.col.resizable && <ColHandle {...o} />}
+      </Th>
+    },
+    Td: ({ Td }, { store }) => !store.props?.resizable?.row.enable ? Td : o => {
+      o = combineProps({ class: 'relative' }, o)
+      return <Td {...o}>
+        {o.children}
+        {o.x == 0 && store.props?.resizable?.row.enable && <RowHandle {...o} />}
+      </Td>
+    },
+    cellStyle: ({ cellStyle }, { store }) => o => {
+      return `${unFn(cellStyle, o)};` + (store[ROW][o.y] ? `height: ${store[ROW][o.y]}px` : '')
+    }
+  }
+}

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

@@ -0,0 +1,122 @@
+import { groupBy, zipObject } from 'es-toolkit'
+import { findLast } from 'es-toolkit/compat'
+import { Ctx, type Plugin } from '..'
+import { batch, createMemo, useContext } from 'solid-js'
+import type { TableStore } from '..'
+
+declare module '../index' {
+  interface TableProps {
+    rowGroup?: {
+      fields?: string[]
+    }
+  }
+  interface TableStore {
+    rowGroup: {
+      /** Plain-object map used as Set<string>; property access is tracked by createMutable */
+      expandKeys: Record<string, true | undefined>
+      isExpand: (data) => boolean
+      expand: (data, r?) => void
+      toggleExpand: (data) => void
+    }
+  }
+}
+
+/** Serialize a group path to a plain string key for O(1) Set-style lookup */
+const pathKey = (path: any[]): string => path.join('\0')
+
+export const RowGroupPlugin: Plugin = {
+  priority: -Infinity,
+  store: (store) => ({
+    rowGroup: {
+      // Plain object acts as a reactive Map<string, true> inside createMutable.
+      // Property reads are tracked by SolidJS; O(1) vs previous O(n) isEqual scan.
+      expandKeys: {} as Record<string, true | undefined>,
+      isExpand: data => !!store.rowGroup.expandKeys[pathKey(data[GROUP].path)],
+      expand: (data, r) => batch(() =>
+        r
+          ? data[GROUP].path2.forEach(e => { store.rowGroup.expandKeys[pathKey(e[GROUP].path)] = true })
+          : (store.rowGroup.expandKeys[pathKey(data[GROUP].path)] = true)
+      ),
+      toggleExpand: data => {
+        const k = pathKey(data[GROUP].path)
+        store.rowGroup.expandKeys[k] ? delete store.rowGroup.expandKeys[k] : (store.rowGroup.expandKeys[k] = true)
+      }
+    }
+  }),
+  commands: (store, { addRows }) => ({
+    addRows(i, rows, before) {
+      const { data, rowGroup, rowKey } = store.props!
+      if (rowGroup?.fields?.length) {
+        const group = findLast(data, e => e[GROUP], i)
+        if (group) {
+          if (data[i][GROUP]) {
+            const leaf = (function r(group) { return group[GROUP]?.children[0]?.[GROUP] ? r(group[GROUP].children[0]) : group })(group)
+            store.rowGroup.expand(leaf, true)
+            const anchor = leaf[GROUP].children[0]
+            i = store.props!.data.indexOf(anchor)
+            before = true
+          }
+        }
+        addRows?.(i, rows, before)
+      } else {
+        addRows?.(...arguments)
+      }
+    },
+  }),
+  rewriteProps: {
+    data: ({ data }, { store }) => (
+      store.props?.rowGroup?.fields?.length
+        ? expandData(data, store)
+        : data
+    ),
+    newRow: ({ newRow }, { store }) => function (i) {
+      const row = newRow(...arguments)
+      const { data, rowGroup } = store.props!
+      if (rowGroup?.fields?.length) {
+        const group = findLast(data, e => e[GROUP], i)
+        if (group) {
+          const leaf = (function r(group) { return group[GROUP]?.children[0]?.[GROUP] ? r(group[GROUP].children[0]) : group })(group)
+          const extra = zipObject(rowGroup!.fields!, leaf[GROUP].path)
+          Object.assign(row, extra)
+        }
+      }
+      return row
+    },
+    Td: ({ Td }, { store }) => o => {
+      if (!o.data?.[GROUP]) return <Td {...o} />
+      
+      const { props } = useContext(Ctx)
+      const show = createMemo(() => store.rowGroup.isExpand(o.data))
+      
+      return (
+        <Td {...o}>
+          {props.columns?.findIndex(e => !e[store.internal]) == o.x ? (
+            <div class='flex items-center' style={`padding-left: ${(o.data[GROUP].path.length - 1) * 16}px`} onDblClick={() => store.rowGroup.toggleExpand(o.data)}>
+              <ILucideChevronRight class='icon-clickable mr-2' style={`transform: rotate(${show() ? 90 : 0}deg); opacity: .6`} onClick={() => store.rowGroup.toggleExpand(o.data)} />
+              {o.data[GROUP].value}
+            </div>
+          ) : o.children}
+        </Td>
+      )
+    },
+  },
+}
+
+const GROUP = Symbol('row-group')
+
+const expandData = (data, store: TableStore, path2 = [] as any[]) => {
+  const fields = store.props!.rowGroup!.fields!
+  const col = store.props!.columns.find(e => !e[store.internal])
+  if (!col) return data
+  if (fields.length == path2.length) return data
+  const path = path2[path2.length - 1]?.[GROUP].path || []
+  const obj = groupBy(data, e => e[fields[path.length]])
+  return Object.keys(obj).flatMap(k => {
+    const group = { [col.id]: k, [store.internal]: 1 } as any
+    const ps = [...path2, group]
+    group[GROUP] = { path: [...path, k], value: k, path2: ps }
+    group[GROUP].children = expandData(obj[k], store, ps)
+    const arr = store.rowGroup.isExpand(group) ? group[GROUP].children : []
+    return [group, ...arr]
+  })
+}

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

@@ -0,0 +1,65 @@
+import { createEffect, createMemo, createRenderEffect, mergeProps, on } from 'solid-js'
+import { createMutable, reconcile } from 'solid-js/store'
+import { keyBy } from 'es-toolkit'
+import { defaultsDeep, isEqual } from 'es-toolkit/compat'
+import { type Commands, type Plugin, type TableColumn, type TableProps } from '..'
+import { Checkbox } from './RenderPlugin/components'
+import { solidComponent } from '../components/utils'
+import { useSelector } from '../hooks/useSelector'
+
+declare module '../index' {
+  interface TableProps {
+    rowSelection?: {
+      enable?: boolean
+      multiple?: boolean
+      value?: any
+      selectable?: (row) => boolean
+      onChange?: (selected) => void
+    }
+  }
+  interface TableStore {
+    rowSelectionCol: TableColumn
+  }
+  interface Commands {
+    rowSelector: ReturnType<typeof useSelector>
+  }
+}
+
+export const RowSelectionPlugin: Plugin = {
+  name: 'row-selection',
+  priority: -Infinity,
+  store: (store) => ({
+    rowSelectionCol: {
+      [store.internal]: 1,
+      id: Symbol('row-selection'),
+      fixed: 'left',
+      class: 'row-selection',
+      width: 45,
+      resizable: false,
+      render: solidComponent((o) => (
+        <label>
+          <Checkbox
+            style='position: absolute'
+            value={store.commands.rowSelector.has(o.data)}
+            onChange={v => v ? store.commands.rowSelector.add(o.data) : store.commands.rowSelector.del(o.data)}
+            disabled={!store.props?.rowSelection?.selectable?.(o.data)}
+          />
+        </label>
+      ))
+    } as TableColumn,
+  }),
+  commands: (store) => ({
+    rowSelector: useSelector(mergeProps(() => ({ ...store.props?.rowSelection })))
+  }),
+  rewriteProps: {
+    rowSelection: ({ rowSelection }) => defaultsDeep(rowSelection, {
+      enable: false,
+      multiple: false,
+      selectable: () => true,
+    } as TableProps['rowSelection']),
+
+    columns: ({ columns }, { store }) => store.props?.rowSelection?.enable
+      ? [store.rowSelectionCol, ...columns]
+      : columns
+  }
+}