intable 0.0.5 → 0.0.7

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

@@ -0,0 +1,252 @@
+import { createComputed, createEffect, createMemo, createRoot, createSignal, on, onCleanup, useContext, type Component, type JSX } from 'solid-js'
+import { combineProps } from '@solid-primitives/props'
+import { createAsyncMemo } from '@solid-primitives/memo'
+import { delay } from 'es-toolkit'
+import { createMutable } from 'solid-js/store'
+import { Ctx, type Plugin, type TableColumn } from '..'
+import { Checkbox, Files } from './RenderPlugin/components'
+import { chooseFile, resolveOptions } from '../utils'
+
+declare module '../index' {
+  interface TableProps {
+    validator?: (value: any, data: any, col: TableColumn) => string | boolean | Promise<string | boolean>
+  }
+  interface TableColumn {
+    editable?: boolean
+    editor?: string | Editor
+    editorProps?: any
+    editorPopup?: boolean // todo
+    validator?: (value: any, rowData: any, col: TableColumn) => boolean | string | Promise<boolean | string>
+  }
+  interface TableStore {
+    editors: { [key: string]: Editor }
+  }
+}
+
+export type Editor = (props: EditorOpt) => {
+  el: JSX.Element
+  getValue: () => any
+  destroy: () => void
+  focus?: () => void
+  blur?: () => void
+}
+
+export interface EditorOpt {
+  col: TableColumn
+  data: any
+  value: any
+  eventKey?: string
+  onChange?: (value: any) => void
+  ok: () => void
+  cancel: () => void
+  props?: any
+}
+
+export const EditablePlugin: Plugin = {
+  name: 'editable',
+  store: () => ({
+    editors: { ...editors }
+  }),
+  rewriteProps: {
+    Td: ({ Td }, { store }) => o => {
+      let el!: HTMLElement
+      const { props } = useContext(Ctx)
+      const editable = createMemo(() => !!o.col.editable && !o.data[store.internal] && !o.col[store.internal])
+      const [editing, setEditing] = createSignal(false)
+      let eventKey = ''
+
+      const selected = createMemo(() => (([x, y]) => o.x == x && o.y == y)(store.selected.start || []))
+
+      const preEdit = createMemo(() => selected() && editable() && !editing())
+
+      const [validationError, setValidationError] = createSignal<string | null>(null)
+      const [validating, setValidating] = createSignal(false)
+      createEffect(() => { if (!editing()) { setValidationError(null); setValidating(false) } })
+
+      const editorState = createAsyncMemo(async () => {
+        if (editing()) {
+          let canceled = false
+          const editor = (editor => typeof editor == 'string' ? store.editors[editor] : editor)(o.col.editor || 'text')
+          const opt = {
+            props: o.col.editorProps,
+            col: o.col,
+            eventKey,
+            data: o.data,
+            value: o.data[o.col.id],
+            ok: async () => {
+              await validate(ret.getValue())
+              setEditing(false)
+            },
+            cancel: () => (canceled = true, setValidationError(null), setEditing(false)),
+            onChange: v => validate(v).catch(() => {}) // Validate on each change but ignore errors until final submission
+          }
+          const ret = editor(opt)
+          onCleanup(() => {
+            if (!canceled && ret.getValue() !== o.data[o.col.id]) {
+              const arr = [...props.data!]
+              arr[o.y] = { ...arr[o.y], [o.col.id]: ret.getValue() }
+              props.onDataChange?.(arr)
+            }
+            if (!canceled) {
+              validate(ret.getValue())
+            }
+            ret.destroy()
+          })
+          return [opt, ret] as const
+        }
+      })
+
+      async function validate(value) {
+        if (props.validator || o.col.validator) {
+          try {
+            setValidating(true)
+            const result = await (async () => {
+              for (const v of [props.validator, o.col.validator]) {
+                if (!v) continue
+                const r = await v(value, o.data, o.col)
+                if (r !== true) return r
+              }
+              return true
+            })()
+            setValidating(false)
+            if (result !== true) {
+              setValidationError(typeof result === 'string' ? result : 'Error')
+            } else {
+              setValidationError(null)
+            }
+          } catch (e) {
+            setValidating(false)
+            setValidationError((e as Error).message || 'Error')
+          }
+          if (validationError() != null) throw new Error(validationError() || 'Error')
+        }
+      }
+
+      createEffect(() => {
+        editorState()?.[1]?.focus?.()
+      })
+      
+      createEffect(() => {
+        if (editing()) {
+          const sss = createMemo(() => JSON.stringify(store.selected))
+          createEffect(on(sss, () => setEditing(false), { defer: true }))
+        }
+      })
+
+      let input: HTMLInputElement
+      const size = createMutable({ w: 0, h: 0 })
+      createComputed(() => editing() && (size.w = el.getBoundingClientRect().width, size.h = el.getBoundingClientRect().height))
+      
+      o = combineProps(o, {
+        ref: v => el = v,
+        get class() { return [editing() ? 'is-editing' : '', validationError() !== null ? 'is-invalid' : ''].filter(Boolean).join(' ') },
+        get style() { return editing() ? `width: ${size.w}px; height: ${size.h}px; padding: 0; ` : '' },
+        onClick: () => input?.focus?.(),
+        onDblClick: () => setEditing(editable()),
+        onKeyDown: e => e.key == 'Escape' && editorState()?.[0].cancel()
+      } as JSX.HTMLAttributes<any>)
+      
+      return (
+        <Td {...o}>
+          {preEdit() &&
+            <input
+              style='position: absolute; margin-top: 1em; width: 0; height: 0; pointer-events: none; opacity: 0'
+              ref={e => { input = e; delay(0).then(() => e.focus({ preventScroll: true })) }}
+              onKeyDown={e => {
+                e.key == ' ' && e.preventDefault()
+              }}
+              onInput={e => {
+                eventKey = e.target.value
+                setEditing(!e.isComposing)
+              }}
+              onCompositionEnd={() => {
+                setEditing(true)
+              }}
+            />
+          }
+          {editorState()?.[1]?.el
+            ? <div class='in-cell-edit-wrapper'>
+                {editorState()?.[1]?.el}
+                {validating() && <span class='cell-validating' />}
+              </div>
+            : o.children
+          }
+          {validationError() !== null &&
+            <div class='cell-validation-error'>
+              {validationError()}
+            </div>
+          }
+        </Td>
+      )
+    }
+  }
+}
+
+const createEditor = (Comp: Component<any>, extra?, isSelector?): Editor => (
+  ({ eventKey, value, col, ok, cancel, props, onChange }) => createRoot(destroy => {
+    const [v, setV] = createSignal(eventKey || value)
+    let el!: HTMLElement
+    ;(<Comp
+      ref={e => el = e}
+      class='relative block px-2 size-full z-9 box-border resize-none outline-0'
+      value={v()}
+      onInput={e => (setV(e instanceof Event ? e.target.value : e), onChange?.(v()))}
+      onChange={e => (setV(e instanceof Event ? e.target.value : e), onChange?.(v()), isSelector && ok())}
+      on:pointerdown={e => e.stopPropagation()}
+      on:keydown={e => {
+        e.stopPropagation()
+        e.key == 'Enter' && ok()
+        e.key == 'Escape' && cancel()
+      }}
+      options={col.enum ? resolveOptions(col.enum ?? []) : undefined}
+      {...extra}
+      {...props}
+    />)
+    
+    return {
+      el,
+      getValue: v,
+      focus: () => el.focus(),
+      destroy,
+    }
+  })
+)
+
+const Input = o => <input {...o} />
+
+const text = createEditor(Input)
+const number = createEditor(Input, { type: 'number' })
+const range = createEditor(Input, { type: 'range' })
+const color = createEditor(Input, { type: 'color' })
+const tel = createEditor(Input, { type: 'tel' })
+const password = createEditor(Input, { type: 'password' })
+const date = createEditor(Input, { type: 'date' }, true)
+const time = createEditor(Input, { type: 'time' }, true)
+const datetime = createEditor(Input, { type: 'datetime-local' }, true)
+const select = createEditor(o => <select {...o}>{o.options?.map(e => <option value={e.value}>{e.label}</option>)}</select>, {}, true)
+
+const file = createEditor(o => {
+  const onAdd = () => chooseFile({ multiple: true }).then(files => o.onChange([...o.value || [], ...files.map(e => ({ name: e.name, size: e.size }))]))
+  return <Files {...o} class='relative z-9 outline-(2 blue) min-h-a! h-a! p-1 bg-#fff' onAdd={onAdd} />
+})
+
+const checkbox = createEditor(o => (
+  <label ref={o.ref} class='h-full flex items-center'>
+    <Checkbox {...o} ref={() => {}} onInput={() => {}} class='mx-3!' />
+  </label>
+))
+
+export const editors = {
+  text,
+  number,
+  range,
+  date,
+  time,
+  datetime,
+  color,
+  tel,
+  password,
+  file,
+  checkbox,
+  select,
+}

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

@@ -0,0 +1,80 @@
+import { createEffect, createMemo, useContext } from 'solid-js'
+import type { Component, JSX } from 'solid-js'
+import { defaultsDeep } from 'es-toolkit/compat'
+import { Ctx, type Plugin, type TableColumn, type TableProps, type TableStore } from '..'
+import { renderComponent, solidComponent } from '../components/utils'
+import { useSelector } from '../hooks/useSelector'
+import { combineProps } from '@solid-primitives/props'
+import { log } from '../utils'
+
+declare module '../index' {
+  interface TableProps {
+    expand?: {
+      enable?: boolean // todo
+      render?: (props: { data: any, y: number }) => JSX.Element
+    }
+  }
+  interface Commands {
+    expand: ReturnType<typeof useSelector<any[]>>
+  }
+}
+
+export const ExpandPlugin: Plugin = {
+  name: 'expand',
+
+  store: (store) => ({
+    expandCol: {
+      id: Symbol('expand'),
+      fixed: 'left',
+      width: 45,
+      render: solidComponent((o) => <ArrowCell store={store} data={o.data} />),
+      // todo
+      props: o => ({ onClick: () => store.commands.expand.toggle(o.data) }),
+      [store.internal]: 1
+    } as TableColumn,
+  }),
+
+  commands: (store) => ({
+    expand: useSelector({ multiple: true })
+  }),
+
+  rewriteProps: {
+    expand: ({ expand }) => defaultsDeep(expand, {
+      enable: false,
+    } as TableProps['expand']),
+
+    columns: ({ columns }, { store }) => store.props.expand?.enable
+      ? [store.expandCol, ...columns]
+      : columns,
+      
+    Tr: ({ Tr }, { store }) => store.props.expand?.enable ? o => {
+      return (
+        <Tr {...o}>{
+          !o.data?.[store.expandCol.id] ? o.children :
+          <td colspan={store.props.columns?.length} style='width: 100%'>
+            {renderComponent(store.props.expand?.render, { ...o, data: o.data[store.expandCol.id] }, store.props.renderer)}
+          </td>
+        }</Tr>
+      )
+    } : Tr,
+
+    Td: ({ Td }, { store }) => o => {
+      o = combineProps(o, { onClick: () => o.col.id == store.expandCol.id && store.commands.expand.toggle(o.data) })
+      return <Td {...o} />
+    },
+    
+    data: ({ data }, { store }) => (
+      store.commands.expand.value.length
+        ? data?.flatMap(e => store.commands.expand.has(e) ? [e, { [store.expandCol.id]: e }] : e)
+        : data
+    )
+  }
+}
+
+const ArrowCell: Component<{ data: any, store: TableStore }> = ({ data, store }) => {
+  return (
+    <div style='display: flex; align-items: center; width: 100%; height: 100%; opacity: .4'>
+      <ILucideChevronRight style={`transform: rotate(${store.commands.expand.has(data) ? 90 : 0}deg);`} />
+    </div>
+  )
+}

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

@@ -0,0 +1,289 @@
+import { For, Show, useContext, createMemo, createSignal, createEffect } from 'solid-js'
+import { Ctx, type Plugin$0, type TableColumn } from '..'
+
+declare module '../index' {
+  interface TableColumn {
+    children?: TableColumn[]
+  }
+  interface TableStore {
+    /** Returns column indices of group anchors whose span overlaps [xStart, xEnd]. */
+    _headerGroupAnchors?: (xStart: number, xEnd: number) => number[]
+  }
+}
+
+// ── Helpers ──────────────────────────────────────────────────────────────
+
+/** Count the number of leaf columns under a node (colspan). */
+function leafCount(col: TableColumn): number {
+  if (!col.children?.length) return 1
+  return col.children.reduce((n, c) => n + leafCount(c), 0)
+}
+
+/** Calculate the maximum depth of the column tree. */
+function maxDepth(columns: TableColumn[]): number {
+  let d = 0
+  for (const col of columns) {
+    if (col.children?.length) {
+      d = Math.max(d, maxDepth(col.children))
+    }
+  }
+  return d + 1
+}
+
+/** Collect all leaf columns in tree order (these are what the body renders). */
+function flatLeaves(columns: TableColumn[], out: TableColumn[] = []): TableColumn[] {
+  for (const col of columns) {
+    if (col.children?.length) {
+      flatLeaves(col.children, out)
+    } else {
+      out.push(col)
+    }
+  }
+  return out
+}
+
+// ── Flat grid for flex-compatible header rows ────────────────────────────
+
+type CellKind = 'anchor' | 'colspan-hidden' | 'rowspan-hidden'
+
+interface GridCell {
+  kind: CellKind
+  /** The column object that owns this cell (group col for anchors, leaf col for placeholders) */
+  anchorCol: TableColumn
+  colspan: number
+  rowspan: number
+}
+
+/**
+ * Build a 2-D grid `[row][colIdx]` where `colIdx` maps 1:1 with `allCols`
+ * (i.e. `props.columns` which includes internal + leaf columns).
+ *
+ * Every row has exactly `allCols.length` entries so flex rows stay aligned.
+ */
+function buildFlatGrid(
+  rawCols: TableColumn[],
+  totalDepth: number,
+  allCols: TableColumn[],
+  rawToIdx: Map<TableColumn, number>,
+  rawLeaves: TableColumn[],
+  store: any,
+): (GridCell | null)[][] {
+
+  const width = allCols.length
+  const grid: (GridCell | null)[][] = Array.from({ length: totalDepth }, () =>
+    new Array(width).fill(null),
+  )
+
+  let leafOffset = 0
+
+  function walk(cols: TableColumn[], depth: number) {
+    for (const col of cols) {
+      const hasChildren = !!col.children?.length
+      const lc = leafCount(col)
+      const rs = hasChildren ? 1 : totalDepth - depth
+
+      // Find starting index in allCols
+      const anchorLeaf = hasChildren ? rawLeaves[leafOffset] : col
+      const startIdx = rawToIdx.get(anchorLeaf)
+      if (startIdx == null) { if (!hasChildren) leafOffset++; continue }
+
+      // Anchor cell
+      grid[depth][startIdx] = { kind: 'anchor', anchorCol: col, colspan: lc, rowspan: rs }
+
+      // Colspan-covered (same row, to the right)
+      for (let dx = 1; dx < lc; dx++) {
+        grid[depth][startIdx + dx] = { kind: 'colspan-hidden', anchorCol: col, colspan: lc, rowspan: rs }
+      }
+
+      // Rowspan-covered (subsequent rows)
+      for (let dy = 1; dy < rs; dy++) {
+        for (let dx = 0; dx < lc; dx++) {
+          grid[depth + dy][startIdx + dx] = { kind: 'rowspan-hidden', anchorCol: allCols[startIdx + dx], colspan: 1, rowspan: 1 }
+        }
+      }
+
+      if (hasChildren) {
+        walk(col.children!, depth + 1)
+      } else {
+        leafOffset++
+      }
+    }
+  }
+
+  leafOffset = 0
+  walk(rawCols, 0)
+
+  // Fill positions for internal columns (index, expand, row-selection…)
+  for (let i = 0; i < width; i++) {
+    if (grid[0][i] != null) continue
+    const col = allCols[i]
+    if (col[store.internal]) {
+      grid[0][i] = { kind: 'anchor', anchorCol: col, colspan: 1, rowspan: totalDepth }
+      for (let dy = 1; dy < totalDepth; dy++) {
+        grid[dy][i] = { kind: 'rowspan-hidden', anchorCol: col, colspan: 1, rowspan: 1 }
+      }
+    }
+  }
+
+  return grid
+}
+
+// ── Plugin ───────────────────────────────────────────────────────────────
+
+export const HeaderGroupPlugin: Plugin$0 = {
+  name: 'header-group',
+
+  store: (store) => ({
+    /**
+     * Called inside VirtualScrollPlugin's X-virtualizer extras callback.
+     * Returns the column indices of every group anchor whose span overlaps [xStart, xEnd]
+     * so that group header cells are always rendered even when their anchor column has
+     * scrolled out of the visible window.
+     */
+    _headerGroupAnchors(xStart: number, xEnd: number): number[] {
+      const rawCols = store.rawProps.columns || []
+      if (!rawCols.some(c => (c as TableColumn).children?.length)) return []
+      if (maxDepth(rawCols) <= 1) return []
+
+      const allCols = store.props.columns || []
+      const rawLeaves = flatLeaves(rawCols)
+
+      const rawToIdx = new Map<TableColumn, number>()
+      for (let i = 0; i < allCols.length; i++) {
+        rawToIdx.set(allCols[i][store.raw] || allCols[i], i)
+      }
+
+      const anchors: number[] = []
+      let leafOffset = 0
+
+      function walk(cols: TableColumn[]) {
+        for (const col of cols) {
+          if (col.children?.length) {
+            const lc = leafCount(col)
+            const anchorLeaf = rawLeaves[leafOffset]
+            if (anchorLeaf) {
+              const si = rawToIdx.get(anchorLeaf)
+              if (si != null) {
+                const ei = si + lc - 1
+                if (si <= xEnd && ei >= xStart) anchors.push(si)
+              }
+            }
+            walk(col.children!)
+          } else {
+            leafOffset++
+          }
+        }
+      }
+
+      walk(rawCols)
+      return anchors
+    },
+  }),
+
+  rewriteProps: {
+    /**
+     * Flatten nested column definitions into leaf-only columns for the body.
+     * The header rendering is handled entirely by the Thead rewrite.
+     */
+    columns: ({ columns }) => flatLeaves(columns),
+
+    /**
+     * Replace the default single-row <Thead> with a multi-row header
+     * using a flat grid: every row has exactly `props.columns.length` entries
+     * so that flex-based virtual scroll renders correct alignment.
+     *
+     * Cell types:
+     *  - anchor: visible cell with content, colspan/rowspan props
+     *  - colspan-hidden: covered by an anchor to the left (display:none)
+     *  - rowspan-hidden: covered by an anchor above (visibility:hidden in
+     *    flex mode to preserve width, display:none in table mode)
+     */
+    Thead: ({ Thead }, { store }) => o => {
+      const { props } = useContext(Ctx)
+
+      const gridData = createMemo(() => {
+        const rawCols = store.rawProps.columns || []
+        const depth = maxDepth(rawCols)
+        if (depth <= 1) return null
+
+        const allCols = props.columns || []
+        const rawLeaves = flatLeaves(rawCols)
+
+        // Map raw column identity → index in allCols (props.columns)
+        const rawToIdx = new Map<TableColumn, number>()
+        for (let i = 0; i < allCols.length; i++) {
+          rawToIdx.set(allCols[i][store.raw] || allCols[i], i)
+        }
+
+        const grid = buildFlatGrid(rawCols, depth, allCols, rawToIdx, rawLeaves, store)
+        return { grid, depth }
+      })
+
+      // Measure header row height for rowspan overflow in flex mode.
+      // The last row (all leaf cells) gives the base height.
+      const [headerRowH, setHeaderRowH] = createSignal(24)
+      createEffect(() => {
+        const thead = store.thead
+        if (!thead) return
+        const trs = thead.querySelectorAll(':scope > tr')
+        const lastTr = trs[trs.length - 1] as HTMLElement | undefined
+        if (lastTr) setHeaderRowH(lastTr.offsetHeight || 24)
+      })
+
+      const isVirtual = () => !!store.virtualizerX
+
+      return (
+        <Show when={gridData()} fallback={<Thead {...o} />}>
+          {data => (
+            <Thead {...o}>
+              <For each={data().grid}>{(row, rowIdx) => (
+                <props.Tr
+                  style={isVirtual()
+                    ? `height:${headerRowH()}px;overflow:visible;position:relative;z-index:${data().depth - rowIdx()}`
+                    : ''}
+                >
+                  <props.EachCells each={props.columns}>
+                    {(col, colIdx) => {
+                      const cell = () => row[colIdx()]
+                      if (!cell()) return null
+
+                      const style = () => {
+                        const c = cell()!
+                        if (c.kind === 'anchor') {
+                          // In flex mode, rowspan cells need explicit height to overflow into rows below
+                          if (isVirtual() && c.rowspan > 1 && headerRowH()) {
+                            return `height:${c.rowspan * headerRowH()}px;position:relative;`
+                          }
+                          return ''
+                        }
+                        if (c.kind === 'colspan-hidden') return 'display:none'
+                        // rowspan-hidden: in flex mode keep width for alignment; in table mode hide completely
+                        if (c.kind === 'rowspan-hidden') return isVirtual() ? 'visibility:hidden' : 'display:none'
+                        return ''
+                      }
+
+                      const isAnchor = () => cell()!.kind === 'anchor'
+
+                      return (
+                        <props.Th
+                          x={colIdx()}
+                          col={isAnchor() ? cell()!.anchorCol : col()}
+                          colspan={isAnchor() && cell()!.colspan > 1 ? cell()!.colspan : undefined}
+                          rowspan={isAnchor() && cell()!.rowspan > 1 ? cell()!.rowspan : undefined}
+                          style={style()}
+                          covered={!isAnchor()}
+                        >
+                          {isAnchor() ? cell()!.anchorCol.name : ''}
+                        </props.Th>
+                      )
+                    }}
+                  </props.EachCells>
+                </props.Tr>
+              )}</For>
+            </Thead>
+          )}
+        </Show>
+      )
+    },
+  },
+}

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

@@ -0,0 +1,49 @@
+import { createMemo } from 'solid-js'
+import { unwrap } from 'solid-js/store'
+import { captureStoreUpdates } from '@solid-primitives/deep'
+import { combineProps } from '@solid-primitives/props'
+import { useHistory } from '../hooks'
+import { type Plugin } from '..'
+
+declare module '../index' {
+  interface TableProps {
+
+  }
+  interface TableStore {
+    history: ReturnType<typeof useHistory>
+  }
+}
+
+export const HistoryPlugin: Plugin = {
+  store: (store) => {
+    const getDelta = createMemo(() => captureStoreUpdates(store.rawProps.data || []))
+    let clonedState
+    return ({
+      history: useHistory([() => {
+        const delta = getDelta()()
+        if (!delta.length) return
+
+        for (const { path, value } of delta) {
+          if (path.length == 0) {
+            clonedState = structuredClone(unwrap(value))
+            // clonedState = [...value]
+          } else {
+            const target = [...clonedState]
+            path.reduce((o, k, i) => o[k] = i < path.length -1 ? Array.isArray(o[k]) ? [...o[k]] : { ...o[k] } : structuredClone(unwrap(value)), target)
+            clonedState = target
+          }
+        }
+        return clonedState
+      }, v => store.props!.onDataChange?.(v)])
+    })
+  },
+  keybindings: (store) => ({
+    '$mod+Z': () => store.history.undo(),
+    '$mod+Y': () => store.history.redo(),
+  }),
+  rewriteProps: {
+    tdProps: ({ tdProps }, { store }) => o => combineProps(tdProps?.(o) || {}, {
+      // get style() { return o.data[o.col.id] != store.unsaveData[o.y]?.[o.col.id] ? `background: #80808030` : `` }
+    })
+  },
+}