intable 0.0.6 → 0.0.8

package/src/demo-vue.ts

@@ -0,0 +1,54 @@
+// import './index.scss'
+import 'virtual:uno.css'
+
+import { createApp, h, ref, shallowRef, toRaw, watchEffect } from 'vue'
+// import Intable from '@intable/vue'
+import Intable from '../packages/vue/src'
+
+// import './theme/element-plus.scss'
+import { log } from 'intable/utils'
+import { createMutable } from 'solid-js/store'
+import { effect } from 'solid-js/web'
+import { batch, createComputed, createEffect, createMemo } from 'solid-js'
+
+const container = document.createElement('div')
+document.body.append(container)
+
+const data = ref([{ id: '1', date: '2016-05-03' },{date: 'xxx'}])
+setTimeout(() => {
+  // data.value = [
+  //   { id: 1, date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
+  //   { id: 2, date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
+  //   { id: 3, date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
+  // ]
+}, 1000);
+
+const selected = ref([])
+watchEffect(() => {
+  // console.log(selected.value)
+  // console.log(data.value)
+})
+
+createApp(() => [
+  h(Intable, {
+    style: 'width: 600px; margin: 64px',
+    class: 'w-100 m-4',
+    data: data.value,
+    'onUpdate:data': v => data.value = v,
+    onDataChange: v => data.value = v,
+    border: true,
+    index: true,
+    size: 'small',
+    columns: [
+      { name: 'Date', id: 'date', editable: true, enum: { a: 1 }, editor: 'date' },
+      { name: 'Name', id: 'name' },
+      { name: 'Address', id: 'address', width: 250 },
+      // todo re render
+      { name: '4', id: '4', render: o => h('div', { class: 'c-red' }, '111'), fixed: 'right' },
+    ],
+    selected: selected.value,
+    'onUpdate:selected': v => selected.value = v,
+    rowSelection: { enable: true }
+  }),
+])
+  .mount(container)

package/src/index.scss

@@ -0,0 +1,105 @@
+:root {
+  color-scheme: light;
+  --bg: #fff;
+  --menu-bg: #fff;
+  --header-bg: #f6f6f7;
+}
+
+.dark {
+  color-scheme: dark;
+  --bg: #121212;
+  --menu-bg: #121212;
+  --header-bg: #161618;
+}
+
+body {
+  @apply bg-[--bg] m-0;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  font-size: 1em;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+img, iframe {
+  // margin: 1rem 0;
+}
+
+mark {
+  padding: .1rem .3rem;
+}
+
+.col-hand {
+  --w: 4px;
+  position: absolute;
+  top: 0;
+  left: 100%;
+  height: 100%;
+  // flex: 0 0 auto;
+  width: var(--gap);
+  cursor: w-resize;
+  display: flex;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 100ms linear;
+
+  &:hover, &:active {
+    opacity: 1;
+  }
+
+  &::after {
+    content: '';
+    display: block;
+    flex-shrink: 0;
+    width: 4px;
+    height: 100%;
+    background: rgba(gray, .5);
+  }
+
+  > .dot {
+    --w: 20px;
+    position: absolute;
+    top: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transform: translateY(-50%);
+    width: calc(var(--w) * 1);
+    height: calc(var(--w) * 1);
+    
+    &:hover {
+      &::after {
+        content: '+';
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: calc(var(--w) * 1);
+        height: calc(var(--w) * 1);
+        background-color: rgba(blue, .75);
+        box-shadow: 0 4px 6px rgba(#000, .2);
+      }
+    }
+
+    &::after {
+      content: '';
+      display: block;
+      width: 8px;
+      height: 8px;
+      color: #fff;
+      background-color: rgba(blue, .5);
+      border-radius: 50%;
+      transition: all 100ms;
+      cursor: pointer;
+    }
+  }
+}

package/src/index.tsx

@@ -0,0 +1,20 @@
+import { render, Suspense } from 'solid-js/web'
+import { HashRouter } from '@solidjs/router'
+import routes from '~solid-pages'
+
+render(
+  () => {
+    return (
+      <HashRouter
+        root={props => (
+          <Suspense>
+            {props.children}
+          </Suspense>
+        )}
+      >
+        {routes}
+      </HashRouter>
+    )
+  },
+  document.getElementById('root') as HTMLElement,
+)

package/src/pages/demo/BasicDemo.tsx

@@ -0,0 +1,19 @@
+import { Intable } from '../../../packages/intable/src'
+import { makeCols, makeData, replaceArray } from './helpers'
+
+const cols = makeCols(6)
+const data = makeData(20, 6)
+
+export const BasicDemo = () => (
+  <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'
+  />
+)

package/src/pages/demo/CellMergeDemo.tsx

@@ -0,0 +1,41 @@
+import { createMutable } from 'solid-js/store'
+import { range } from 'es-toolkit'
+import { Intable } from '../../../packages/intable/src'
+import { CellMergePlugin } from '../../../packages/intable/src/plugins/CellMergePlugin'
+import { replaceArray } from './helpers'
+
+const cols = createMutable([
+  { id: 'group',  name: 'Group',  width: 100, mergeRow: true },
+  { id: 'name',   name: 'Name',   width: 120 },
+  { id: 'value',  name: 'Value',  width: 100 },
+  { id: 'score',  name: 'Score',  width: 100 },
+] as any[])
+
+const data = createMutable(
+  range(20).map(i => ({
+    id: i,
+    group: 'G' + Math.floor(i / 4),
+    name: 'Item ' + i,
+    value: (i * 7) % 100,
+    score: (i * 13) % 100,
+  })),
+)
+
+/**
+ * The "Group" column auto-merges consecutive rows with equal values (mergeRow: true).
+ * CellMergePlugin is added manually since it's not a default plugin.
+ */
+export const CellMergeDemo = () => (
+  <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={[CellMergePlugin]}
+  />
+)

package/src/pages/demo/CellSelectionDemo.tsx

@@ -0,0 +1,24 @@
+import { Intable } from '../../../packages/intable/src'
+import { makeCols, makeData, replaceArray } from './helpers'
+
+const cols = makeCols(8)
+const data = makeData(30, 8)
+
+/**
+ * CellSelection is auto-loaded.
+ * Click a cell then drag or shift+click to select a range.
+ * Arrow keys to navigate.
+ */
+export const CellSelectionDemo = () => (
+  <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'
+  />
+)

package/src/pages/demo/CompositeDemo.tsx

@@ -0,0 +1,60 @@
+import { batch } from 'solid-js'
+import { createMutable } from 'solid-js/store'
+import { range } from 'es-toolkit'
+import { Intable } from '../../../packages/intable/src'
+import { VirtualScrollPlugin } from '../../../packages/intable/src/plugins/VirtualScrollPlugin'
+import { HistoryPlugin } from '../../../packages/intable/src/plugins/HistoryPlugin'
+import { DiffPlugin } from '../../../packages/intable/src/plugins/DiffPlugin'
+import { replaceArray } from './helpers'
+
+const cols = createMutable([
+  { name: 'Basic Info', children: [
+    { id: 'col_0', name: 'Name', width: 100, editable: true },
+    { id: 'col_1', name: 'Age',  width: 80,  editable: true, editor: 'number' },
+  ]},
+  { id: 'col_2', name: 'Status', width: 100, editable: true, editor: 'select', enum: { active: 'Active', inactive: 'Inactive' } },
+  { name: 'Details', children: [
+    { id: 'col_3', name: 'City',   width: 100, editable: true },
+    { id: 'col_4', name: 'Score',  width: 80,  editable: true, editor: 'number' },
+  ]},
+  ...range(5).map(i => ({ id: 'col_' + (i + 5), name: 'Extra ' + i, width: 80, editable: true })),
+] as any[])
+
+const leafColIds = range(10).map(i => 'col_' + i)
+const data = createMutable(
+  range(200).map((_, i) => ({
+    id: i,
+    ...Object.fromEntries(leafColIds.map(id => [id, `${id}_${i + 1}`])),
+    g: i % 5,
+  })),
+)
+
+cols.at(-1)!.fixed = 'right'
+
+/**
+ * Everything combined: header groups, virtual scroll, editable,
+ * expand, row selection, resize, drag, history, diff, index, border.
+ */
+export const CompositeDemo = () => (
+  <div>
+    <p class='text-sm c-gray mb-2'>All features enabled. Edit, drag, resize, select, expand, undo/redo, diff.</p>
+    <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
+      resizable={{ col: { enable: true }, row: { enable: true } }}
+      expand={{ enable: true, render: ({ data }) => <div class='p-2 c-blue'>{JSON.stringify(data)}</div> }}
+      rowSelection={{ enable: true, multiple: true }}
+      plugins={[VirtualScrollPlugin, HistoryPlugin, DiffPlugin]}
+      diff={{ onCommit: (d) => console.log('commit', d) }}
+    />
+  </div>
+)

package/src/pages/demo/CopyPasteDemo.tsx

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

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

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

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

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

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

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

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

@@ -0,0 +1,24 @@
+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 } }}
+  />
+)