arthub-table 0.0.3

package/CHANGELOG.md

@@ -0,0 +1,36 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+## [1.0.0] - 2026-02-13
+
+### Added
+
+- Initial release of canvas-table as an NPM package
+- High-performance canvas-based table rendering engine
+- Vue 3 component (`DataGrid`) with full TypeScript support
+- **Cell Viewers**: 20+ built-in cell viewer types
+  - Text, Select, Image, Person, Progress, Datetime, Boolean, Status
+  - GroupHeader, SeparatorRow, NestedGrid, Punch, Hyperlink, File
+  - TaskNode, Module, TextWithSwitcher, Upstream, TableActionButton
+- **Viewer Registry**: Centralized viewer registration and management system
+- **Grouped Tables**: Multi-level grouping with collapsible group headers
+- **Nested Grids**: Support for nested table within cells
+- **Virtual Scrolling**: Efficient rendering for large datasets
+- **Column Features**: Resizing, reordering, fixed columns, multi-level headers
+- **Row Features**: Row selection, drag reorder, row height customization
+- **Cell Features**: Cell editing, validation, clipboard (copy/paste/clear), autofill
+- **Theming**: Light/dark theme support with custom style registration
+- **Striped Rows**: Optional row striping for visual clarity
+- **Loading State**: Cell-level loading indicators with timeout support
+- **GIF Support**: Animated GIF rendering in cells
+- **Image Management**: Async image loading with caching
+- **Keyboard Navigation**: Full keyboard support for cell navigation
+- **Event System**: Rich event API for cell clicks, edits, selections, etc.
+- Complete TypeScript type definitions for all public APIs
+- Comprehensive export of types, viewers, utilities, and constants

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 canvas-table contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,257 @@
+# canvas-table
+
+> High-performance canvas-based table/grid component for Vue 3 with TypeScript support.
+
+## Features
+
+- 🚀 **Canvas Rendering**: High-performance rendering engine using HTML5 Canvas
+- 📊 **Virtual Scrolling**: Efficiently handles large datasets with smooth scrolling
+- 🎨 **20+ Built-in Cell Viewers**: Text, Select, Image, Person, Progress, Status, DateTime, Boolean, and more
+- 🔌 **Extensible Viewer System**: Register custom cell viewers through the Viewer Registry
+- 📦 **Grouped Tables**: Multi-level collapsible group headers
+- 📐 **Nested Grids**: Support for nested table within cells
+- 📋 **Clipboard**: Copy, paste, and clear cell content
+- ✏️ **Cell Editing**: Inline editing with validation support
+- 🔒 **Fixed Columns**: Pin columns to left or right
+- 📏 **Resizable Columns**: Drag to resize column widths
+- 🔄 **Drag & Drop**: Reorder rows and columns via drag and drop
+- 🎯 **Cell Selection**: Single and multi-cell selection with keyboard navigation
+- ✅ **Validation**: Built-in cell validation with custom rules
+- 🌗 **Theming**: Light/dark theme support with custom style registration
+- 📱 **TypeScript**: Full TypeScript type definitions
+
+## Installation
+
+```bash
+npm install canvas-table
+```
+
+## Quick Start
+
+```vue
+<template>
+  <DataGrid
+    :columns="columns"
+    :data="data"
+    :width="800"
+    :height="400"
+    @after-edit-cell="handleEdit"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { DataGrid } from "canvas-table";
+import type { ColumnConfig } from "canvas-table";
+
+const columns = ref<ColumnConfig[]>([
+  { title: "Name", key: "name", width: 200, type: "text" },
+  { title: "Age", key: "age", width: 100, type: "number" },
+  { title: "Email", key: "email", width: 300, type: "text" },
+]);
+
+const data = ref([
+  { id: 1, name: "Alice", age: 28, email: "alice@example.com" },
+  { id: 2, name: "Bob", age: 32, email: "bob@example.com" },
+]);
+
+const handleEdit = (editData: any) => {
+  console.log("Cell edited:", editData);
+};
+</script>
+```
+
+## Using Cell Viewers
+
+Cell viewers provide rich data rendering within cells:
+
+```vue
+<script setup lang="ts">
+import { DataGrid, registerDefaultViewers } from "canvas-table";
+import type { ColumnConfig } from "canvas-table";
+
+// Register all built-in viewers (call once at app startup)
+registerDefaultViewers();
+
+const columns = ref<ColumnConfig[]>([
+  { title: "Task", key: "task", width: 200, type: "text", useViewer: true },
+  {
+    title: "Status",
+    key: "status",
+    width: 120,
+    type: "status",
+    useViewer: true,
+    options: [
+      { label: "To Do", value: "todo", color: "#909399" },
+      { label: "Done", value: "done", color: "#67C23A" },
+    ],
+  },
+  {
+    title: "Progress",
+    key: "progress",
+    width: 180,
+    type: "progress",
+    useViewer: true,
+  },
+  {
+    title: "Assignee",
+    key: "assignee",
+    width: 150,
+    type: "person",
+    useViewer: true,
+  },
+]);
+</script>
+```
+
+### Available Viewer Types
+
+| Type                  | Description               | Data Type                     |
+| --------------------- | ------------------------- | ----------------------------- |
+| `text`                | Plain text display        | `TextViewerData`              |
+| `select`              | Dropdown select with tags | `SelectViewerData`            |
+| `image`               | Image display             | `ImageViewerData`             |
+| `person`              | User avatar and name      | `PersonViewerData`            |
+| `progress`            | Progress bar (draggable)  | `ProgressViewerData`          |
+| `datetime`            | Date/time display         | `DatetimeViewerData`          |
+| `boolean`             | Checkbox toggle           | `BooleanViewerData`           |
+| `status`              | Status badge              | `StatusViewerData`            |
+| `hyperlink`           | Clickable link            | `HyperlinkTextViewerData`     |
+| `file`                | File preview              | `FileViewerData`              |
+| `module`              | Module tags               | `ModuleViewerData`            |
+| `table-action-button` | Action buttons            | `TableActionButtonViewerData` |
+| `nested`              | Nested grid               | `NestedGridViewerData`        |
+| `group-header`        | Group header row          | `GroupHeaderViewerData`       |
+
+## API
+
+### DataGrid Props
+
+| Prop             | Type             | Default           | Description                 |
+| ---------------- | ---------------- | ----------------- | --------------------------- |
+| `rowKey`         | `string`         | `'id'`            | Row unique identifier field |
+| `width`          | `number`         | -                 | Table width in pixels       |
+| `height`         | `number`         | -                 | Table height in pixels      |
+| `columns`        | `ColumnConfig[]` | `[]`              | Column definitions          |
+| `data`           | `any[]`          | `[]`              | Table data array            |
+| `datePattern`    | `string`         | `'absolute_date'` | Date display type           |
+| `customAutofill` | `Function`       | -                 | Custom autofill handler     |
+
+### DataGrid Events
+
+| Event                    | Payload                                    | Description                     |
+| ------------------------ | ------------------------------------------ | ------------------------------- |
+| `after-edit-cell`        | `data`                                     | Fired after a cell is edited    |
+| `after-autofill`         | `data`                                     | Fired after autofill            |
+| `after-paste`            | `data`                                     | Fired after paste               |
+| `after-clear`            | `data`                                     | Fired after clear               |
+| `on-load`                | -                                          | Fired when grid is loaded       |
+| `on-cell-text-click`     | `rowData, colId`                           | Fired when cell text is clicked |
+| `on-group-toggle`        | `groupRow, expanded`                       | Fired when group is toggled     |
+| `on-row-drag-reorder`    | `draggedRows, targetIndex`                 | Fired after row drag reorder    |
+| `on-column-drag-reorder` | `draggedColIds, targetColId, insertBefore` | Fired after column reorder      |
+
+### DataGrid Methods (via ref)
+
+| Method                         | Description                    |
+| ------------------------------ | ------------------------------ |
+| `reload()`                     | Resize and redraw              |
+| `loadData(data)`               | Load new data                  |
+| `getData()`                    | Get current data               |
+| `getCheckedRows()`             | Get checked rows               |
+| `getChangedRows()`             | Get changed rows               |
+| `validate(callback)`           | Validate all cells             |
+| `setTheme(theme)`              | Set theme ('light' or 'dark')  |
+| `setStriped(enabled)`          | Enable/disable striped rows    |
+| `showLoading(rowIds, colKeys)` | Show loading on specific cells |
+| `hideLoading(rowIds, colKeys)` | Hide loading on specific cells |
+| `setSelectedRows(rowIds)`      | Set selected rows              |
+
+## TypeScript Types
+
+canvas-table exports comprehensive TypeScript types:
+
+```typescript
+import type {
+  ColumnConfig,
+  CellData,
+  RowData,
+  HeaderConfig,
+  // Viewer types
+  CellViewer,
+  CellViewerData,
+  TextViewerData,
+  SelectViewerData,
+  ProgressViewerData,
+  // Group types
+  GroupRowData,
+  GroupedTableRowData,
+} from "canvas-table";
+```
+
+## Local Development (with AssetMatrix)
+
+### Using webpack alias
+
+1. Create `.env.local` in AssetMatrix project root:
+
+```env
+USE_LOCAL_CANVAS_TABLE=true
+LOCAL_CANVAS_TABLE_PATH=../canvas-table
+```
+
+2. Start canvas-table dev server:
+
+```bash
+cd canvas-table
+npm run serve
+```
+
+3. Start AssetMatrix with local canvas-table:
+
+```bash
+cd AssetMatrix
+npm run dev:local-canvas
+```
+
+### Using npm link
+
+```bash
+# In canvas-table directory
+npm link
+
+# In AssetMatrix directory
+npm link canvas-table
+```
+
+## Building
+
+```bash
+# Build library (CommonJS + UMD + types)
+npm run build
+
+# Build demo site
+npm run build:demo
+
+# Build only type declarations
+npm run build:types
+```
+
+## Publishing
+
+```bash
+# Bump version and publish
+npm version patch  # or minor, or major
+npm publish
+```
+
+Or push a version tag to trigger CI/CD:
+
+```bash
+git tag v1.0.1
+git push origin v1.0.1
+```
+
+## License
+
+[MIT](LICENSE)