intable 0.0.8 → 0.0.9

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

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

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

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

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

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

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