intable 0.0.7 → 0.0.8

package/src/pages/demo/index.tsx

@@ -0,0 +1,180 @@
+/**
+ * Plugin test demo index — renders a list of demo sections,
+ * one per plugin, to visually verify each feature.
+ */
+import { createSignal, createEffect, onCleanup, For, Show, mergeProps } from 'solid-js'
+import { useSearchParams } from '@solidjs/router'
+
+import { BasicDemo } from './BasicDemo'
+import { VirtualScrollDemo } from './VirtualScrollDemo'
+import { HeaderGroupDemo } from './HeaderGroupDemo'
+import { CellSelectionDemo } from './CellSelectionDemo'
+import { EditableDemo } from './EditableDemo'
+import { ExpandDemo } from './ExpandDemo'
+import { RowSelectionDemo } from './RowSelectionDemo'
+import { ResizeDemo } from './ResizeDemo'
+import { DragDemo } from './DragDemo'
+import { RowGroupDemo } from './RowGroupDemo'
+import { CellMergeDemo } from './CellMergeDemo'
+import { HistoryDemo } from './HistoryDemo'
+import { DiffDemo } from './DiffDemo'
+import { TreeDemo } from './TreeDemo'
+import { CopyPasteDemo } from './CopyPasteDemo'
+import { CompositeDemo } from './CompositeDemo'
+import { ReactDemo } from './ReactDemo'
+
+// ── Theme CSS (equivalent to: import 'intable/theme/*') ──────────────────────
+import antdCss         from '../../../packages/intable/src/theme/antd.scss?inline'
+import elementPlusCss  from '../../../packages/intable/src/theme/element-plus.scss?inline'
+import darkCss         from '../../../packages/intable/src/theme/dark.scss?inline'
+import shadcnCss       from '../../../packages/intable/src/theme/shadcn.scss?inline'
+import stripeCss       from '../../../packages/intable/src/theme/stripe.scss?inline'
+import materialCss     from '../../../packages/intable/src/theme/material.scss?inline'
+import githubCss       from '../../../packages/intable/src/theme/github.scss?inline'
+
+const THEMES = [
+  { name: 'Default',      css: '',            color: '#e5e7eb' },
+  { name: 'Antd',         css: antdCss,       color: '#1677ff' },
+  { name: 'Element Plus', css: elementPlusCss,color: '#409eff' },
+  { name: 'Dark',         css: darkCss,       color: '#0d1117' },
+  { name: 'GitHub',       css: githubCss,     color: '#1f2328' },
+  { name: 'Shadcn',       css: shadcnCss,     color: '#18181b' },
+  { name: 'Stripe',       css: stripeCss,     color: '#635bff' },
+  { name: 'Material',     css: materialCss,   color: '#6750a4' },
+]
+
+const STYLE_ID = 'intable-theme-override'
+
+function applyTheme(css: string) {
+  let el = document.getElementById(STYLE_ID) as HTMLStyleElement | null
+  if (!el) {
+    el = document.createElement('style')
+    el.id = STYLE_ID
+    document.head.appendChild(el)
+  }
+  el.textContent = css
+}
+
+// ── Custom theme dropdown ─────────────────────────────────────────────────────
+function ThemeSelect(props: { themes: typeof THEMES; value: string; onChange: (v: string) => void }) {
+  const [open, setOpen] = createSignal(false)
+  let ref!: HTMLDivElement
+
+  const current = () => props.themes.find(t => t.name === props.value)!
+
+  const handleOutside = (e: MouseEvent) => {
+    if (!ref.contains(e.target as Node)) setOpen(false)
+  }
+  createEffect(() => {
+    if (open()) document.addEventListener('mousedown', handleOutside)
+    else document.removeEventListener('mousedown', handleOutside)
+  })
+  onCleanup(() => document.removeEventListener('mousedown', handleOutside))
+
+  return (
+    <div ref={ref} class='relative w-full'>
+      <button
+        type='button'
+        class='flex items-center gap-1.5 w-full text-xs px-2 py-1.5 rd-1 b-(1 solid #d1d5db) bg-white c-#374151 cursor-pointer text-left'
+        onClick={() => setOpen(o => !o)}
+      >
+        <span class='inline-block w-2.5 h-2.5 rd-full shrink-0 b-(1 solid #0002)' style={{ background: current().color }} />
+        <span class='flex-1'>{current().name}</span>
+        <svg class='w-3 h-3 c-gray shrink-0' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5'>
+          <path stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5' />
+        </svg>
+      </button>
+      <Show when={open()}>
+        <div class='absolute top-full left-0 right-0 mt-0.5 bg-white b-(1 solid #d1d5db) rd-1 shadow-md z-50 py-0.5'>
+          <For each={props.themes}>{t => (
+            <button
+              type='button'
+              class={`flex items-center gap-1.5 w-full px-2 py-1.5 text-xs text-left cursor-pointer transition-colors ${
+                props.value === t.name ? 'bg-blue-50 c-blue-600 font-medium' : 'hover:bg-gray-50 c-#374151'
+              }`}
+              onClick={() => { props.onChange(t.name); setOpen(false) }}
+            >
+              <span class='inline-block w-2.5 h-2.5 rd-full shrink-0 b-(1 solid #0002)' style={{ background: t.color }} />
+              {t.name}
+            </button>
+          )}</For>
+        </div>
+      </Show>
+    </div>
+  )
+}
+
+// ── Demo list ─────────────────────────────────────────────────────────────────
+const demos = [
+  { name: 'Basic',           comp: BasicDemo,          desc: 'Minimal table with index, border, sticky header' },
+  { name: 'VirtualScroll',   comp: VirtualScrollDemo,  desc: 'Virtual scroll (X+Y) with 10k rows × 50 cols' },
+  { name: 'HeaderGroup',     comp: HeaderGroupDemo,     desc: 'Nested column header groups with colspan/rowspan' },
+  { name: 'CellSelection',   comp: CellSelectionDemo,   desc: 'Click and drag to select cell ranges' },
+  { name: 'Editable',        comp: EditableDemo,        desc: 'Double-click cells to edit (text, number, select, date…)' },
+  { name: 'Expand',          comp: ExpandDemo,          desc: 'Expandable rows with custom detail render' },
+  { name: 'RowSelection',    comp: RowSelectionDemo,    desc: 'Checkbox row selection (single & multiple)' },
+  { name: 'Resize',          comp: ResizeDemo,          desc: 'Drag column/row borders to resize' },
+  { name: 'Drag',            comp: DragDemo,            desc: 'Drag-and-drop column & row reordering' },
+  { name: 'RowGroup',        comp: RowGroupDemo,        desc: 'Group rows by field values with collapsible headers' },
+  { name: 'CellMerge',       comp: CellMergeDemo,       desc: 'Merge cells (rowspan/colspan)' },
+  { name: 'CopyPaste',       comp: CopyPasteDemo,       desc: 'Copy / paste cell ranges (Ctrl+C / Ctrl+V)' },
+  { name: 'Tree',            comp: TreeDemo,            desc: 'Tree-structured data with expand/collapse' },
+  { name: 'History',         comp: HistoryDemo,         desc: 'Undo / Redo (Ctrl+Z / Ctrl+Y)' },
+  { name: 'Diff',            comp: DiffDemo,            desc: 'Track changes & commit (Ctrl+S)' },
+  { name: 'Composite',       comp: CompositeDemo,       desc: 'All features combined' },
+  { name: 'React',           comp: ReactDemo,           desc: 'React integration demo' }
+]
+
+export const DemoApp = () => {
+  const [_qs, setQs] = useSearchParams<any>()
+  const qs = mergeProps({ active: demos[0].name, theme: THEMES[0].name }, () => _qs)
+
+  createEffect(() => {
+    const t = THEMES.find(t => t.name === qs.theme)
+    applyTheme(t?.css ?? '')
+  })
+
+  onCleanup(() => document.getElementById(STYLE_ID)?.remove())
+
+  return (
+    <div class='flex h-100vh'>
+      {/* sidebar */}
+      <nav class='w-52 shrink-0 of-y-auto b-r-(1 solid #e5e7eb) p-2 bg-#fafafa flex flex-col gap-1'>
+        <h2 class='font-bold text-lg px-2 py-1'>Plugin Demos</h2>
+
+        {/* Theme switcher — custom dropdown for proper color rendering */}
+        <div class='px-2 pb-2 b-b-(1 solid #e5e7eb) mb-1 relative'>
+          <label class='text-xs c-gray font-medium tracking-wide uppercase block mb-1'>Theme</label>
+          <ThemeSelect themes={THEMES} value={qs.theme} onChange={t => setQs({ theme: t })} />
+        </div>
+
+        {/* Demo list */}
+        <For each={demos}>{d => (
+          <button
+            class={`block w-full text-left px-3 py-1.5 rd-1 text-sm truncate cursor-pointer ${qs.active === d.name ? 'bg-blue-500 c-white' : 'hover:bg-gray/10'}`}
+            onClick={() => setQs({ active: d.name })}
+          >
+            {d.name}
+          </button>
+        )}</For>
+      </nav>
+
+      {/* main */}
+      <main class='flex-1 w-0 p-4 of-auto'>
+        <For each={demos}>{d => (
+          <Show when={qs.active === d.name}>
+            <div class='flex items-baseline gap-3 mb-1'>
+              <h2 class='font-bold text-xl'>{d.name}</h2>
+              <span class='text-xs c-gray font-mono'>Theme: {qs.theme}</span>
+            </div>
+            <p class='c-gray text-sm mb-3'>{d.desc}</p>
+            <d.comp />
+          </Show>
+        )}</For>
+      </main>
+    </div>
+  )
+}
+
+export default DemoApp
+

package/src/pages/index.tsx

@@ -0,0 +1,2 @@
+import { Website } from './website'
+export default Website

package/src/pages/website.scss

@@ -0,0 +1,37 @@
+/* intable official website — supplemental styles
+ * These override the component's default light-theme CSS variables
+ * so the live demo section matches the OLED dark aesthetic.
+ */
+
+/* ── Live demo: dark-theme table overrides ─────────────────────────────────── */
+.wt-live-demo {
+  /* Override the .data-table's own CSS variable declarations */
+  .data-table {
+    --bg: #0a0a12;
+    --c-primary: #6366f1;
+    --menu-bg: #1e1e2e;
+    --li-hover-bg: rgba(255, 255, 255, .06);
+    --table-b-c: rgba(255, 255, 255, .07);
+    --table-c: #cbd5e1;
+    --table-bg: #0a0a12;
+    --table-header-c: #64748b;
+    --table-header-bg: #0f0f1a;
+    --table-row-hover-bg: rgba(255, 255, 255, .04);
+    --select-area-bg: rgba(99, 102, 241, .15);
+    color-scheme: dark;
+
+    background: #0a0a12;
+
+    th, td {
+      border-color: rgba(255, 255, 255, .07);
+    }
+
+    thead th {
+      background: #0f0f1a;
+    }
+
+    tr:hover > td {
+      background: rgba(255, 255, 255, .04);
+    }
+  }
+}