snice 3.1.0 → 3.3.0

package/docs/components/virtual-scroller.md

@@ -0,0 +1,298 @@
+# Virtual Scroller Component
+
+Efficiently render large lists by only displaying visible items.
+
+## Basic Usage
+
+```javascript
+const scroller = document.querySelector('snice-virtual-scroller');
+
+scroller.items = Array.from({ length: 10000 }, (_, i) => ({
+  id: i,
+  data: `Item ${i}`
+}));
+
+scroller.renderItem = (item, index) => {
+  return `<div>${item.data}</div>`;
+};
+```
+
+## Properties
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `items` | `VirtualScrollerItem[]` | `[]` | Array of items to render |
+| `itemHeight` | `number` | `50` | Height of each item (px) |
+| `bufferSize` | `number` | `5` | Extra items to render outside viewport |
+| `estimatedItemHeight` | `number` | `50` | Estimated height for variable items |
+| `renderItem` | `Function` | - | Function to render each item |
+
+## VirtualScrollerItem Interface
+
+```typescript
+interface VirtualScrollerItem {
+  id: string | number;  // Unique identifier
+  data: any;           // Item data
+  height?: number;     // Optional custom height
+}
+```
+
+## Methods
+
+### `scrollToIndex(index: number): void`
+Scroll to specific item index.
+
+```javascript
+scroller.scrollToIndex(500);
+```
+
+### `scrollToItem(id: string | number): void`
+Scroll to item by ID.
+
+```javascript
+scroller.scrollToItem('item-123');
+```
+
+### `refresh(): void`
+Recalculate visible range and re-render.
+
+```javascript
+scroller.refresh();
+```
+
+### `getVisibleRange(): { start: number; end: number }`
+Get currently visible item indices.
+
+```javascript
+const range = scroller.getVisibleRange();
+console.log(`Showing items ${range.start} to ${range.end}`);
+```
+
+## Examples
+
+### Simple List
+
+```javascript
+const scroller = document.querySelector('snice-virtual-scroller');
+
+scroller.items = Array.from({ length: 10000 }, (_, i) => ({
+  id: i,
+  data: `Item ${i + 1}`
+}));
+
+scroller.renderItem = (item) => {
+  return `<div style="padding: 15px; border-bottom: 1px solid #eee;">
+    ${item.data}
+  </div>`;
+};
+```
+
+### User List
+
+```javascript
+scroller.items = Array.from({ length: 5000 }, (_, i) => ({
+  id: i,
+  data: {
+    name: `User ${i + 1}`,
+    email: `user${i + 1}@example.com`
+  }
+}));
+
+scroller.renderItem = (item) => {
+  return `<div class="user-item">
+    <div class="user-name">${item.data.name}</div>
+    <div class="user-email">${item.data.email}</div>
+  </div>`;
+};
+```
+
+### Variable Height Items
+
+```javascript
+scroller.items = Array.from({ length: 1000 }, (_, i) => ({
+  id: i,
+  data: {
+    title: `Post ${i + 1}`,
+    content: i % 2 === 0 ? 'Short content' : 'Longer content with more text...'
+  },
+  height: i % 2 === 0 ? 60 : 100
+}));
+
+scroller.renderItem = (item) => {
+  return `<div style="padding: 15px;">
+    <h3>${item.data.title}</h3>
+    <p>${item.data.content}</p>
+  </div>`;
+};
+```
+
+### Custom Item Height
+
+```html
+<snice-virtual-scroller
+  style="height: 600px;"
+  item-height="80">
+</snice-virtual-scroller>
+```
+
+### Custom Buffer Size
+
+```html
+<snice-virtual-scroller
+  buffer-size="10"
+  style="height: 400px;">
+</snice-virtual-scroller>
+```
+
+### Programmatic Scrolling
+
+```javascript
+// Scroll to top
+scroller.scrollToIndex(0);
+
+// Scroll to middle
+scroller.scrollToIndex(Math.floor(scroller.items.length / 2));
+
+// Scroll to specific item
+scroller.scrollToItem('item-500');
+```
+
+### With Search
+
+```javascript
+const allItems = Array.from({ length: 10000 }, (_, i) => ({
+  id: i,
+  data: { name: `Item ${i + 1}`, value: i }
+}));
+
+scroller.items = allItems;
+
+// Filter items
+function filterItems(query) {
+  if (!query) {
+    scroller.items = allItems;
+  } else {
+    scroller.items = allItems.filter(item =>
+      item.data.name.toLowerCase().includes(query.toLowerCase())
+    );
+  }
+  scroller.refresh();
+}
+```
+
+### With Sorting
+
+```javascript
+function sortItems(field, order = 'asc') {
+  scroller.items = [...scroller.items].sort((a, b) => {
+    const aVal = a.data[field];
+    const bVal = b.data[field];
+    return order === 'asc' ? aVal - bVal : bVal - aVal;
+  });
+  scroller.refresh();
+}
+```
+
+### Complex Item Rendering
+
+```javascript
+scroller.renderItem = (item, index) => {
+  return `
+    <div class="complex-item" data-id="${item.id}">
+      <div class="item-header">
+        <img src="${item.data.avatar}" alt="${item.data.name}">
+        <span>${item.data.name}</span>
+        <span class="badge">${item.data.status}</span>
+      </div>
+      <div class="item-content">
+        ${item.data.description}
+      </div>
+      <div class="item-footer">
+        <button onclick="handleEdit(${item.id})">Edit</button>
+        <button onclick="handleDelete(${item.id})">Delete</button>
+      </div>
+    </div>
+  `;
+};
+```
+
+### Infinite Scroll
+
+```javascript
+let currentPage = 1;
+const itemsPerPage = 100;
+
+async function loadMore() {
+  const newItems = await fetchItems(currentPage);
+
+  scroller.items = [
+    ...scroller.items,
+    ...newItems
+  ];
+
+  scroller.refresh();
+  currentPage++;
+}
+
+scroller.addEventListener('scroll', (e) => {
+  const { scrollTop, scrollHeight, clientHeight } = e.target;
+
+  // Load more when near bottom
+  if (scrollHeight - scrollTop - clientHeight < 200) {
+    loadMore();
+  }
+});
+```
+
+### Dynamic Updates
+
+```javascript
+// Add item
+function addItem(data) {
+  scroller.items = [
+    ...scroller.items,
+    { id: Date.now(), data }
+  ];
+  scroller.refresh();
+}
+
+// Remove item
+function removeItem(id) {
+  scroller.items = scroller.items.filter(item => item.id !== id);
+  scroller.refresh();
+}
+
+// Update item
+function updateItem(id, newData) {
+  scroller.items = scroller.items.map(item =>
+    item.id === id ? { ...item, data: { ...item.data, ...newData } } : item
+  );
+  scroller.refresh();
+}
+```
+
+## Performance
+
+Virtual scrolling provides significant performance benefits for large lists:
+
+- **Without virtual scrolling:** 10,000 items = 10,000 DOM elements
+- **With virtual scrolling:** 10,000 items = ~20-30 DOM elements (only visible items)
+
+This results in:
+- Faster initial render
+- Smooth 60fps scrolling
+- Lower memory usage
+- Better overall UX
+
+## Accessibility
+
+- Maintains scroll position
+- Keyboard navigation supported
+- Screen readers can navigate items
+- Supports ARIA attributes in rendered items
+
+## Browser Support
+
+- Modern browsers with Custom Elements v1 support
+- Uses CSS transforms for smooth scrolling
+- Efficient rendering with minimal reflows

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "snice",
-  "version": "3.1.0",
+  "version": "3.3.0",
   "type": "module",
   "description": "Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.",
   "main": "dist/index.cjs",
@@ -106,6 +106,7 @@
     "@swc/core": "^1.13.5",
     "@types/node": "^20.0.0",
     "@vitest/ui": "^1.0.0",
+    "clean-css": "^5.3.3",
     "happy-dom": "^12.0.0",
     "rollup": "^4.50.2",
     "semantic-release": "^24.2.7",

package/dist/components/snice-cell-BLFVdxPp.js

@@ -1,4 +0,0 @@
-var cssContent = "/* Cell Base */\n:host {\n  display: flex;\n  align-items: center;\n  padding: 0 var(--snice-table-cell-padding, var(--snice-spacing-md, 0.75rem)); /* Default: 12px */\n  min-height: 2.5rem; /* 40px */\n  height: 2.5rem; /* 40px */\n  min-width: 6.25rem; /* 100px */\n  flex: 1;\n  font-size: 0.875rem; /* 14px */\n  line-height: 1.25rem; /* 20px */\n}\n\n.cell-content {\n  width: 100%;\n  min-width: 6.25rem; /* 100px */\n  min-height: 1.25rem; /* 20px */\n  word-wrap: break-word;\n}\n\n/* Text Alignment */\n:host([align=\"left\"]) {\n  text-align: left;\n}\n\n:host([align=\"center\"]) {\n  text-align: center;\n}\n\n:host([align=\"right\"]) {\n  text-align: right;\n}\n\n/* Type Specific Styles */\n:host([type=\"number\"]),\n:host([type=\"currency\"]),\n:host([type=\"percent\"]),\n:host([type=\"accounting\"]),\n:host([type=\"scientific\"]),\n:host([type=\"fraction\"]) {\n  font-variant-numeric: tabular-nums;\n  text-align: right;\n}\n\n:host([type=\"date\"]) {\n  font-variant-numeric: tabular-nums;\n}\n\n:host([type=\"boolean\"]) {\n  text-align: center;\n  font-size: 1rem; /* 16px */\n}\n\n:host([type=\"rating\"]) {\n  text-align: center;\n}\n\n:host([type=\"progress\"]) {\n  /* Remove padding */\n}\n\n:host([type=\"sparkline\"]) {\n  text-align: center;\n  /* Remove padding */\n}\n\n/* Text Content Specific */\n.cell-content--text {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.cell-content--text[data-multiline=\"true\"] {\n  white-space: pre-wrap;\n  word-wrap: break-word;\n  overflow-wrap: break-word;\n}\n\n/* Number Content Specific */\n.cell-content--number {\n  font-feature-settings: 'tnum';\n}\n\n/* Date Content Specific */\n.cell-content--date {\n  font-feature-settings: 'tnum';\n}\n\n/* Boolean Content Styling */\n:host([type=\"boolean\"]) .cell-content {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* Rating Content Styling */\n:host([type=\"rating\"]) .cell-content {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.125rem; /* 2px */\n}\n\n/* Progress Content Styling */\n.cell-content--progress {\n  width: 100%;\n  min-width: 4rem; /* 64px */\n}\n\n/* Sparkline Content Styling */\n.cell-content--sparkline {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 3rem; /* 48px */\n}\n\n/* Conditional Formatting Support */\n:host(.positive) {\n  color: var(--snice-color-success);\n}\n\n:host(.negative) {\n  color: var(--snice-color-danger);\n}\n\n:host(.warning) {\n  color: var(--snice-color-warning);\n  background-color: rgb(var(--snice-color-yellow-100));\n}\n\n:host(.danger) {\n  color: var(--snice-color-danger);\n  background-color: rgb(var(--snice-color-red-100));\n}\n\n:host(.success) {\n  color: var(--snice-color-success);\n  background-color: rgb(var(--snice-color-green-100));\n}\n\n:host(.info) {\n  color: var(--snice-color-primary);\n  background-color: rgb(var(--snice-color-blue-100));\n}\n\n/* Date-specific styling */\n:host(.date--today) {\n  font-weight: var(--snice-font-weight-semibold);\n  color: var(--snice-color-primary);\n}\n\n:host(.date--past) {\n  color: var(--snice-color-text-secondary);\n}\n\n:host(.date--future) {\n  color: var(--snice-color-success);\n}\n\n/* Number-specific styling */\n:host(.number--negative.number--negative-red) {\n  color: var(--snice-color-danger);\n}\n\n:host(.number--positive.number--highlighted) {\n  color: var(--snice-color-success);\n  font-weight: var(--snice-font-weight-semibold);\n}\n\n:host(.number--zero) {\n  color: var(--snice-color-text-secondary);\n}\n\n/* Truncation Support */\n:host([truncate]) .cell-content {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Wrap Support */\n:host([wrap]) .cell-content {\n  white-space: pre-wrap;\n  word-wrap: break-word;\n  overflow-wrap: break-word;\n}\n\n/* Empty State */\n:host([value=\"\"]) .cell-content,\n:host(:not([value])) .cell-content {\n  color: #6c757d;\n}\n\n/* Loading State */\n:host(.loading) {\n  position: relative;\n  overflow: hidden;\n}\n\n:host(.loading) .cell-content {\n  opacity: 0.6;\n}\n\n:host(.loading)::after {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);\n  animation: cell-shimmer 1.5s infinite;\n}\n\n@keyframes cell-shimmer {\n  0% {\n    transform: translateX(-100%);\n  }\n  100% {\n    transform: translateX(100%);\n  }\n}\n\n/* Focus States */\n:host(:focus-within) {\n  outline: 2px solid #007bff;\n  outline-offset: -2px;\n}\n\n/* Interactive Elements */\n.cell-content button,\n.cell-content input,\n.cell-content select {\n  font-size: inherit;\n  line-height: inherit;\n}\n\n.cell-content a {\n  color: #007bff;\n  text-decoration: none;\n}\n\n.cell-content a:hover {\n  text-decoration: underline;\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n  :host {\n    font-size: 0.75rem; /* 12px */\n    line-height: 1rem; /* 16px */\n  }\n  \n  :host([type=\"boolean\"]) {\n    font-size: 0.875rem; /* 14px */\n  }\n}\n\n/* Accessibility */\n@media (prefers-reduced-motion: reduce) {\n  :host(.loading)::after {\n    animation: none;\n  }\n}\n\n/* High Contrast Mode */\n@media (prefers-contrast: high) {\n  :host(.positive) {\n    background-color: #d4edda;\n  }\n  \n  :host(.negative) {\n    background-color: #f8d7da;\n  }\n  \n  .cell-content a {\n    text-decoration: underline;\n  }\n}\n\n/* Print Styles */\n@media print {\n  :host {\n    font-size: 0.75rem; /* 12px */\n  }\n  \n  :host(.loading)::after {\n    display: none;\n  }\n  \n  .cell-content a {\n    text-decoration: underline;\n  }\n}";
-
-export { cssContent as c };
-//# sourceMappingURL=snice-cell-BLFVdxPp.js.map

package/dist/components/snice-cell-BLFVdxPp.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"snice-cell-BLFVdxPp.js","sources":["../../components/table/snice-cell.css?inline"],"sourcesContent":["export default \"/* Cell Base */\\n:host {\\n  display: flex;\\n  align-items: center;\\n  padding: 0 var(--snice-table-cell-padding, var(--snice-spacing-md, 0.75rem)); /* Default: 12px */\\n  min-height: 2.5rem; /* 40px */\\n  height: 2.5rem; /* 40px */\\n  min-width: 6.25rem; /* 100px */\\n  flex: 1;\\n  font-size: 0.875rem; /* 14px */\\n  line-height: 1.25rem; /* 20px */\\n}\\n\\n.cell-content {\\n  width: 100%;\\n  min-width: 6.25rem; /* 100px */\\n  min-height: 1.25rem; /* 20px */\\n  word-wrap: break-word;\\n}\\n\\n/* Text Alignment */\\n:host([align=\\\"left\\\"]) {\\n  text-align: left;\\n}\\n\\n:host([align=\\\"center\\\"]) {\\n  text-align: center;\\n}\\n\\n:host([align=\\\"right\\\"]) {\\n  text-align: right;\\n}\\n\\n/* Type Specific Styles */\\n:host([type=\\\"number\\\"]),\\n:host([type=\\\"currency\\\"]),\\n:host([type=\\\"percent\\\"]),\\n:host([type=\\\"accounting\\\"]),\\n:host([type=\\\"scientific\\\"]),\\n:host([type=\\\"fraction\\\"]) {\\n  font-variant-numeric: tabular-nums;\\n  text-align: right;\\n}\\n\\n:host([type=\\\"date\\\"]) {\\n  font-variant-numeric: tabular-nums;\\n}\\n\\n:host([type=\\\"boolean\\\"]) {\\n  text-align: center;\\n  font-size: 1rem; /* 16px */\\n}\\n\\n:host([type=\\\"rating\\\"]) {\\n  text-align: center;\\n}\\n\\n:host([type=\\\"progress\\\"]) {\\n  /* Remove padding */\\n}\\n\\n:host([type=\\\"sparkline\\\"]) {\\n  text-align: center;\\n  /* Remove padding */\\n}\\n\\n/* Text Content Specific */\\n.cell-content--text {\\n  overflow: hidden;\\n  text-overflow: ellipsis;\\n  white-space: nowrap;\\n}\\n\\n.cell-content--text[data-multiline=\\\"true\\\"] {\\n  white-space: pre-wrap;\\n  word-wrap: break-word;\\n  overflow-wrap: break-word;\\n}\\n\\n/* Number Content Specific */\\n.cell-content--number {\\n  font-feature-settings: 'tnum';\\n}\\n\\n/* Date Content Specific */\\n.cell-content--date {\\n  font-feature-settings: 'tnum';\\n}\\n\\n/* Boolean Content Styling */\\n:host([type=\\\"boolean\\\"]) .cell-content {\\n  display: inline-flex;\\n  align-items: center;\\n  justify-content: center;\\n}\\n\\n/* Rating Content Styling */\\n:host([type=\\\"rating\\\"]) .cell-content {\\n  display: inline-flex;\\n  align-items: center;\\n  justify-content: center;\\n  gap: 0.125rem; /* 2px */\\n}\\n\\n/* Progress Content Styling */\\n.cell-content--progress {\\n  width: 100%;\\n  min-width: 4rem; /* 64px */\\n}\\n\\n/* Sparkline Content Styling */\\n.cell-content--sparkline {\\n  display: flex;\\n  align-items: center;\\n  justify-content: center;\\n  min-width: 3rem; /* 48px */\\n}\\n\\n/* Conditional Formatting Support */\\n:host(.positive) {\\n  color: var(--snice-color-success);\\n}\\n\\n:host(.negative) {\\n  color: var(--snice-color-danger);\\n}\\n\\n:host(.warning) {\\n  color: var(--snice-color-warning);\\n  background-color: rgb(var(--snice-color-yellow-100));\\n}\\n\\n:host(.danger) {\\n  color: var(--snice-color-danger);\\n  background-color: rgb(var(--snice-color-red-100));\\n}\\n\\n:host(.success) {\\n  color: var(--snice-color-success);\\n  background-color: rgb(var(--snice-color-green-100));\\n}\\n\\n:host(.info) {\\n  color: var(--snice-color-primary);\\n  background-color: rgb(var(--snice-color-blue-100));\\n}\\n\\n/* Date-specific styling */\\n:host(.date--today) {\\n  font-weight: var(--snice-font-weight-semibold);\\n  color: var(--snice-color-primary);\\n}\\n\\n:host(.date--past) {\\n  color: var(--snice-color-text-secondary);\\n}\\n\\n:host(.date--future) {\\n  color: var(--snice-color-success);\\n}\\n\\n/* Number-specific styling */\\n:host(.number--negative.number--negative-red) {\\n  color: var(--snice-color-danger);\\n}\\n\\n:host(.number--positive.number--highlighted) {\\n  color: var(--snice-color-success);\\n  font-weight: var(--snice-font-weight-semibold);\\n}\\n\\n:host(.number--zero) {\\n  color: var(--snice-color-text-secondary);\\n}\\n\\n/* Truncation Support */\\n:host([truncate]) .cell-content {\\n  overflow: hidden;\\n  text-overflow: ellipsis;\\n  white-space: nowrap;\\n}\\n\\n/* Wrap Support */\\n:host([wrap]) .cell-content {\\n  white-space: pre-wrap;\\n  word-wrap: break-word;\\n  overflow-wrap: break-word;\\n}\\n\\n/* Empty State */\\n:host([value=\\\"\\\"]) .cell-content,\\n:host(:not([value])) .cell-content {\\n  color: #6c757d;\\n}\\n\\n/* Loading State */\\n:host(.loading) {\\n  position: relative;\\n  overflow: hidden;\\n}\\n\\n:host(.loading) .cell-content {\\n  opacity: 0.6;\\n}\\n\\n:host(.loading)::after {\\n  content: '';\\n  position: absolute;\\n  top: 0;\\n  left: 0;\\n  right: 0;\\n  bottom: 0;\\n  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);\\n  animation: cell-shimmer 1.5s infinite;\\n}\\n\\n@keyframes cell-shimmer {\\n  0% {\\n    transform: translateX(-100%);\\n  }\\n  100% {\\n    transform: translateX(100%);\\n  }\\n}\\n\\n/* Focus States */\\n:host(:focus-within) {\\n  outline: 2px solid #007bff;\\n  outline-offset: -2px;\\n}\\n\\n/* Interactive Elements */\\n.cell-content button,\\n.cell-content input,\\n.cell-content select {\\n  font-size: inherit;\\n  line-height: inherit;\\n}\\n\\n.cell-content a {\\n  color: #007bff;\\n  text-decoration: none;\\n}\\n\\n.cell-content a:hover {\\n  text-decoration: underline;\\n}\\n\\n/* Responsive Design */\\n@media (max-width: 768px) {\\n  :host {\\n    font-size: 0.75rem; /* 12px */\\n    line-height: 1rem; /* 16px */\\n  }\\n  \\n  :host([type=\\\"boolean\\\"]) {\\n    font-size: 0.875rem; /* 14px */\\n  }\\n}\\n\\n/* Accessibility */\\n@media (prefers-reduced-motion: reduce) {\\n  :host(.loading)::after {\\n    animation: none;\\n  }\\n}\\n\\n/* High Contrast Mode */\\n@media (prefers-contrast: high) {\\n  :host(.positive) {\\n    background-color: #d4edda;\\n  }\\n  \\n  :host(.negative) {\\n    background-color: #f8d7da;\\n  }\\n  \\n  .cell-content a {\\n    text-decoration: underline;\\n  }\\n}\\n\\n/* Print Styles */\\n@media print {\\n  :host {\\n    font-size: 0.75rem; /* 12px */\\n  }\\n  \\n  :host(.loading)::after {\\n    display: none;\\n  }\\n  \\n  .cell-content a {\\n    text-decoration: underline;\\n  }\\n}\";"],"names":[],"mappings":"AAAA,iBAAe,umLAAumL;;;;"}