intable 0.0.8 → 0.0.9

package/src/pages/demo/CopyPasteDemo.tsx

@@ -1,26 +0,0 @@
-import { Intable } from '../../../packages/intable/src'
-import { makeCols, makeData, replaceArray } from './helpers'
-
-const cols = makeCols(6, { editable: true })
-const data = makeData(20, 6)
-
-/**
- * Select a cell range then Ctrl+C to copy, Ctrl+V to paste.
- * CopyPaste (ClipboardPlugin) is auto-loaded.
- */
-export const CopyPasteDemo = () => (
-  <div>
-    <p class='text-sm c-gray mb-2'>Select cells → Ctrl+C to copy → click target cell → Ctrl+V to paste.</p>
-    <Intable
-      class='w-full h-50vh'
-      columns={cols}
-      onColumnsChange={v => replaceArray(cols, v)}
-      data={data}
-      onDataChange={v => replaceArray(data, v)}
-      index
-      border
-      stickyHeader
-      size='small'
-    />
-  </div>
-)

package/src/pages/demo/DiffDemo.tsx

@@ -1,33 +0,0 @@
-import { Intable } from '../../../packages/intable/src'
-import { DiffPlugin } from '../../../packages/intable/src/plugins/DiffPlugin'
-import { makeCols, makeData, replaceArray } from './helpers'
-
-const cols = makeCols(5, { editable: true })
-const data = makeData(15, 5)
-
-/**
- * Edit cells — changed cells are highlighted.
- * Right-click → add/delete rows shows added/removed highlights.
- * Press Ctrl+S to commit & clear highlights.
- */
-export const DiffDemo = () => (
-  <div>
-    <p class='text-sm c-gray mb-2'>Edit cells to see change highlights. Ctrl+S to commit.</p>
-    <Intable
-      class='w-full h-50vh'
-      columns={cols}
-      onColumnsChange={v => replaceArray(cols, v)}
-      data={data}
-      onDataChange={v => replaceArray(data, v)}
-      index
-      border
-      stickyHeader
-      size='small'
-      plugins={[DiffPlugin]}
-      diff={{
-        enable: true,
-        onCommit: (d) => console.log('Diff committed:', d),
-      }}
-    />
-  </div>
-)

package/src/pages/demo/DragDemo.tsx

@@ -1,25 +0,0 @@
-import { Intable } from '../../../packages/intable/src'
-import { makeCols, makeData, replaceArray } from './helpers'
-
-const cols = makeCols(6)
-const data = makeData(20, 6)
-
-/**
- * Drag column headers to reorder columns.
- * Drag the index cell (row number) to reorder rows.
- */
-export const DragDemo = () => (
-  <Intable
-    class='w-full h-60vh'
-    columns={cols}
-    onColumnsChange={v => replaceArray(cols, v)}
-    data={data}
-    onDataChange={v => replaceArray(data, v)}
-    index
-    border
-    stickyHeader
-    size='small'
-    colDrag
-    rowDrag
-  />
-)

package/src/pages/demo/EditableDemo.tsx

@@ -1,58 +0,0 @@
-import { z } from 'zod'
-import { createMutable } from 'solid-js/store'
-import { Intable } from '../../../packages/intable/src'
-import { ZodValidatorPlugin } from '../../../packages/intable/src/plugins/ZodValidatorPlugin'
-import { makeData, replaceArray } from './helpers'
-
-const RESERVED = ['admin', 'root', 'null']
-
-const cols = createMutable([
-  {
-    id: 'col_0', name: 'Text (1–20 chars, no reserved)', width: 180, editable: true,
-    zodSchema: z.string().min(1, 'Required').max(20, 'Max 20 characters'),
-    validator: (value: string) =>
-      RESERVED.includes(value.toLowerCase()) ? `"${value}" is a reserved word` : true,
-  },
-  {
-    id: 'col_1', name: 'Number (0–100)', width: 140, editable: true, editor: 'number',
-    zodSchema: z.coerce.number({ error: 'Must be a number' }).min(0, 'Min 0').max(100, 'Max 100'),
-  },
-  { id: 'col_2', name: 'Date',     width: 130, editable: true, editor: 'date' },
-  { id: 'col_3', name: 'Color',    width: 100, editable: true, editor: 'color' },
-  { id: 'col_4', name: 'Checkbox', width: 100, editable: true, editor: 'checkbox' },
-  {
-    id: 'col_5', name: 'Select', width: 120, editable: true, editor: 'select',
-    enum: { A: 'Option A', B: 'Option B', C: 'Option C' },
-  },
-  { id: 'col_6', name: 'Range',    width: 120, editable: true, editor: 'range' },
-  { id: 'col_7', name: 'ReadOnly', width: 100 },
-] as any[])
-
-const data = makeData(20, 8)
-
-/**
- * Double-click (or start typing) on an editable cell to enter edit mode.
- * Press Enter or click outside to commit. Escape to cancel.
- *
- * Validation:
- *  - Text:   Zod min/max length + col.validator blocks reserved words
- *  - Number: Zod coerce + range 0–100
- *  - Table-level validator: blocks any value containing "error"
- */
-export const EditableDemo = () => (
-  <Intable
-    class='w-full h-60vh'
-    columns={cols}
-    onColumnsChange={v => replaceArray(cols, v)}
-    data={data}
-    onDataChange={v => replaceArray(data, v)}
-    index
-    border
-    stickyHeader
-    size='small'
-    plugins={[ZodValidatorPlugin]}
-    validator={(value) =>
-      String(value ?? '').toLowerCase().includes('error') ? 'Value must not contain "error"' : true
-    }
-  />
-)

package/src/pages/demo/ExpandDemo.tsx

@@ -1,32 +0,0 @@
-import { Intable } from '../../../packages/intable/src'
-import { makeCols, makeData, replaceArray } from './helpers'
-
-const cols = makeCols(6)
-const data = makeData(20, 6)
-
-/**
- * Click the chevron on the left to expand a row.
- * The expand render shows JSON of the row data.
- */
-export const ExpandDemo = () => (
-  <Intable
-    class='w-full h-60vh'
-    columns={cols}
-    onColumnsChange={v => replaceArray(cols, v)}
-    data={data}
-    onDataChange={v => replaceArray(data, v)}
-    index
-    border
-    stickyHeader
-    size='small'
-    expand={{
-      enable: true,
-      render: ({ data }) => (
-        <div class='p-3 bg-gray-50 text-sm'>
-          <b>Row Detail:</b>
-          <pre class='mt-1'>{JSON.stringify(data, null, 2)}</pre>
-        </div>
-      ),
-    }}
-  />
-)

package/src/pages/demo/HeaderGroupDemo.tsx

@@ -1,36 +0,0 @@
-import { createMutable } from 'solid-js/store'
-import { Intable } from '../../../packages/intable/src'
-import { VirtualScrollPlugin } from '../../../packages/intable/src/plugins/VirtualScrollPlugin'
-import { makeData, replaceArray } from './helpers'
-import { range } from 'es-toolkit'
-
-const cols = createMutable([
-  { name: 'Basic Info', children: [
-    { id: 'col_0', name: 'Name', width: 100 },
-    { id: 'col_1', name: 'Age', width: 80 },
-  ]},
-  { id: 'col_2', name: 'Status', width: 100 },
-  { name: 'Address', children: [
-    { id: 'col_3', name: 'City', width: 100 },
-    { id: 'col_4', name: 'Street', width: 120 },
-    { id: 'col_5', name: 'Zip', width: 80 },
-  ]},
-  ...range(6).map(i => ({ id: 'col_' + (i + 6), name: 'Extra ' + i, width: 80 })),
-] as any[])
-
-const data = makeData(100, 12)
-
-export const HeaderGroupDemo = () => (
-  <Intable
-    class='w-full h-60vh'
-    columns={cols}
-    onColumnsChange={v => replaceArray(cols, v)}
-    data={data}
-    onDataChange={v => replaceArray(data, v)}
-    index
-    border
-    stickyHeader
-    size='small'
-    plugins={[VirtualScrollPlugin]}
-  />
-)

package/src/pages/demo/HistoryDemo.tsx

@@ -1,28 +0,0 @@
-import { Intable } from '../../../packages/intable/src'
-import { HistoryPlugin } from '../../../packages/intable/src/plugins/HistoryPlugin'
-import { makeCols, makeData, replaceArray } from './helpers'
-
-const cols = makeCols(5, { editable: true })
-const data = makeData(15, 5)
-
-/**
- * Edit cells then press Ctrl+Z to undo, Ctrl+Y to redo.
- * HistoryPlugin must be added manually.
- */
-export const HistoryDemo = () => (
-  <div>
-    <p class='text-sm c-gray mb-2'>Edit a cell, then Ctrl+Z to undo, Ctrl+Y to redo.</p>
-    <Intable
-      class='w-full h-50vh'
-      columns={cols}
-      onColumnsChange={v => replaceArray(cols, v)}
-      data={data}
-      onDataChange={v => replaceArray(data, v)}
-      index
-      border
-      stickyHeader
-      size='small'
-      plugins={[HistoryPlugin]}
-    />
-  </div>
-)

package/src/pages/demo/ReactDemo.tsx

@@ -1,59 +0,0 @@
-import { useEffect, useRef, useState, createElement as h, type FC } from 'react'
-
-import { Intable, component } from '../../../packages/react/src'
-import { range } from 'es-toolkit'
-
-export const ReactDemo = component(() => {
-  const [cols, setCols] = useState([
-    { id: 'col_0', name: 'Column 1', width: 120, editable: true },
-    { name: 'HeaderGroup', children: [
-      { id: 'col_1', name: 'Column 2', width: 120, editable: true, render: (props) => h('div', { style: { color: 'red' } }, props.data[props.col.id]) },
-      { id: 'col_2', name: 'Column 3', width: 120, editable: true },
-    ] },
-    { id: 'col_3', name: 'Column 4', width: 120, editable: true },
-    { id: 'col_4', name: 'Column 5', width: 120, editable: true },
-    { id: 'col_5', name: 'Column 6', width: 120, editable: true },
-    { id: 'col_6', name: 'Column 7', editable: true },
-    { id: 'col_7', name: 'Column 8', editable: true },
-  ])
-
-  const [data, setData] = useState(range(20).map(i => {
-    const row: Record<string, any> = { id: i }
-    for (let j = 0; j < cols.length; j++) {
-      row['col_' + j] = `col_${j}_${i + 1}`
-    }
-    return row
-  }))
-  
-  return h(Intable, {
-    className: 'w-full h-60vh',
-    columns: cols,
-    onColumnsChange: v => setCols(v),
-    data: data,
-    onDataChange: v => setData(v),
-    index: true,
-    border: true,
-    stickyHeader: true,
-    size: 'small',
-    // 
-    resizable: { col: { enable: true }, row: { enable: true } },
-    // 
-    colDrag: true,
-    rowDrag: true,
-    // 
-    rowSelection: {
-      enable: true,
-      multiple: true,
-      onChange: (selected, unselected) => console.log('selected:', selected, 'unselected:', unselected),
-    },
-    expand: {
-      enable: true,
-      render: ({ data }) => (
-        h('div', { className: 'p-3 bg-gray-50 text-sm' }, [
-          h('b', null, 'Row Detail:'),
-          h('pre', { className: 'mt-1' }, JSON.stringify(data, null, 2))
-        ])
-      )
-    },
-  })
-})

package/src/pages/demo/ResizeDemo.tsx

@@ -1,24 +0,0 @@
-import { Intable } from '../../../packages/intable/src'
-import { makeCols, makeData, replaceArray } from './helpers'
-
-const cols = makeCols(6)
-const data = makeData(20, 6)
-
-/**
- * Drag column header borders to resize columns.
- * Row resize is also enabled — drag row bottom borders.
- */
-export const ResizeDemo = () => (
-  <Intable
-    class='w-full h-60vh'
-    columns={cols}
-    onColumnsChange={v => replaceArray(cols, v)}
-    data={data}
-    onDataChange={v => replaceArray(data, v)}
-    index
-    border
-    stickyHeader
-    size='small'
-    resizable={{ col: { enable: true }, row: { enable: true } }}
-  />
-)

package/src/pages/demo/RowGroupDemo.tsx

@@ -1,43 +0,0 @@
-import { createMutable } from 'solid-js/store'
-import { range } from 'es-toolkit'
-import { Intable } from '../../../packages/intable/src'
-import { replaceArray } from './helpers'
-
-const cols = createMutable([
-  { id: 'name',     name: 'Name',     width: 120 },
-  { id: 'category', name: 'Category', width: 120 },
-  { id: 'region',   name: 'Region',   width: 120 },
-  { id: 'value',    name: 'Value',    width: 100 },
-])
-
-const categories = ['Electronics', 'Clothing', 'Food']
-const regions = ['East', 'West', 'North', 'South']
-
-const data = createMutable(
-  range(40).map(i => ({
-    id: i,
-    name: 'Item ' + i,
-    category: categories[i % 3],
-    region: regions[i % 4],
-    value: Math.round(Math.random() * 1000),
-  })),
-)
-
-/**
- * Rows are grouped by `category` then `region`.
- * Click group headers to expand/collapse.
- */
-export const RowGroupDemo = () => (
-  <Intable
-    class='w-full h-60vh'
-    columns={cols}
-    onColumnsChange={v => replaceArray(cols, v)}
-    data={data}
-    onDataChange={v => replaceArray(data, v)}
-    index
-    border
-    stickyHeader
-    size='small'
-    rowGroup={{ fields: ['category', 'region'] }}
-  />
-)

package/src/pages/demo/RowSelectionDemo.tsx

@@ -1,27 +0,0 @@
-import { Intable } from '../../../packages/intable/src'
-import { makeCols, makeData, replaceArray } from './helpers'
-
-const cols = makeCols(6)
-const data = makeData(20, 6)
-
-/**
- * Checkbox column on the left. Click to select, header checkbox for select-all.
- */
-export const RowSelectionDemo = () => (
-  <Intable
-    class='w-full h-60vh'
-    columns={cols}
-    onColumnsChange={v => replaceArray(cols, v)}
-    data={data}
-    onDataChange={v => replaceArray(data, v)}
-    index
-    border
-    stickyHeader
-    size='small'
-    rowSelection={{
-      enable: true,
-      multiple: true,
-      onChange: (selected, unselected) => console.log('selected:', selected, 'unselected:', unselected),
-    }}
-  />
-)

package/src/pages/demo/TreeDemo.tsx

@@ -1,45 +0,0 @@
-import { createMutable } from 'solid-js/store'
-import { Intable } from '../../../packages/intable/src'
-import { replaceArray } from './helpers'
-
-const cols = createMutable([
-  { id: 'name',  name: 'Name',  width: 200 },
-  { id: 'size',  name: 'Size',  width: 100 },
-  { id: 'type',  name: 'Type',  width: 120 },
-])
-
-const data = createMutable([
-  { id: 1, name: 'src',    size: '-', type: 'folder', children: [
-    { id: 2, name: 'index.ts', size: '2KB',  type: 'file' },
-    { id: 3, name: 'utils',    size: '-',    type: 'folder', children: [
-      { id: 4, name: 'helper.ts', size: '1KB', type: 'file' },
-      { id: 5, name: 'math.ts',   size: '3KB', type: 'file' },
-    ]},
-    { id: 6, name: 'components', size: '-', type: 'folder', children: [
-      { id: 7, name: 'App.tsx',    size: '4KB', type: 'file' },
-      { id: 8, name: 'Button.tsx', size: '1KB', type: 'file' },
-    ]},
-  ]},
-  { id: 9, name: 'package.json', size: '1KB', type: 'file' },
-  { id: 10, name: 'README.md',    size: '2KB', type: 'file' },
-])
-
-/**
- * Tree-structured data with expand/collapse.
- * TreePlugin must be added manually.
- */
-export const TreeDemo = () => (
-  <Intable
-    class='w-full h-60vh'
-    columns={cols}
-    onColumnsChange={v => replaceArray(cols, v)}
-    data={data}
-    onDataChange={v => replaceArray(data, v)}
-    index
-    border
-    stickyHeader
-    size='small'
-    tree={{ children: 'children' }}
-    rowKey='id'
-  />
-)

package/src/pages/demo/VirtualScrollDemo.tsx

@@ -1,21 +0,0 @@
-import { Intable } from '../../../packages/intable/src'
-import { VirtualScrollPlugin } from '../../../packages/intable/src/plugins/VirtualScrollPlugin'
-import { makeCols, makeData, replaceArray } from './helpers'
-
-const cols = makeCols(50, { width: 80 })
-const data = makeData(1000, 50)
-
-export const VirtualScrollDemo = () => (
-  <Intable
-    class='h-60vh'
-    columns={cols}
-    onColumnsChange={v => replaceArray(cols, v)}
-    data={data}
-    onDataChange={v => replaceArray(data, v)}
-    index
-    border
-    stickyHeader
-    size='small'
-    plugins={[VirtualScrollPlugin]}
-  />
-)

package/src/pages/demo/helpers.tsx

@@ -1,39 +0,0 @@
-/**
- * Shared helpers for demo data generation.
- */
-import { createMutable } from 'solid-js/store'
-import { batch } from 'solid-js'
-import { range } from 'es-toolkit'
-
-/** Generate flat tabular data */
-export function makeData(rows: number, colCount: number) {
-  const colIds = range(colCount).map(i => 'col_' + i)
-  return createMutable(
-    range(rows).map((_, i) =>
-      Object.fromEntries([
-        ['id', i],
-        ...colIds.map(id => [id, `${id}_${i + 1}`]),
-      ]),
-    ),
-  )
-}
-
-/** Generate column definitions */
-export function makeCols(count: number, extra?: Partial<{ width: number; editable: boolean }>) {
-  return createMutable(
-    range(count).map(i => ({
-      id: 'col_' + i,
-      name: 'Col ' + i,
-      width: 100,
-      ...extra,
-    })),
-  )
-}
-
-/** Shortcut for batch-replacing a reactive array */
-export function replaceArray<T>(arr: T[], next: T[]) {
-  batch(() => {
-    arr.length = 0
-    arr.push(...next)
-  })
-}