@keenmate/web-grid 1.0.0-rc02

package/package.json

@@ -0,0 +1,78 @@
+{
+	"name": "@keenmate/web-grid",
+	"version": "1.0.0-rc02",
+	"description": "Framework-agnostic data grid web component with sorting, filtering, inline editing, and keyboard navigation",
+	"type": "module",
+	"main": "./dist/web-grid.umd.js",
+	"module": "./dist/web-grid.js",
+	"types": "./dist/index.d.ts",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"import": "./dist/web-grid.js",
+			"require": "./dist/web-grid.umd.js",
+			"default": "./dist/web-grid.js"
+		},
+		"./css": "./src/css/main.css",
+		"./manifest": "./component-variables.manifest.json",
+		"./dist/*": "./dist/*",
+		"./src/css/*": "./src/css/*",
+		"./package.json": "./package.json"
+	},
+	"sideEffects": [
+		"./dist/web-grid.js",
+		"./dist/web-grid.umd.js",
+		"*.css"
+	],
+	"files": [
+		"dist",
+		"src/css",
+		"component-variables.manifest.json"
+	],
+	"scripts": {
+		"dev": "vite --port 12500",
+		"build": "npm run clean:dist && tsc && vite build",
+		"build:types": "tsc",
+		"preview": "vite preview",
+		"clean": "rimraf dist --glob \"*.tgz\"",
+		"clean:dist": "rimraf dist"
+	},
+	"keywords": [
+		"grid",
+		"data-grid",
+		"table",
+		"datagrid",
+		"editable",
+		"sortable",
+		"filterable",
+		"pagination",
+		"inline-editing",
+		"web-component",
+		"custom-element",
+		"shadow-dom",
+		"typescript",
+		"dark-mode",
+		"context-menu",
+		"row-toolbar",
+		"keyboard-navigation",
+		"keenmate"
+	],
+	"author": "KeenMate",
+	"license": "MIT",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/KeenMate/web-grid.git"
+	},
+	"bugs": {
+		"url": "https://github.com/KeenMate/web-grid/issues"
+	},
+	"homepage": "https://github.com/KeenMate/web-grid#readme",
+	"devDependencies": {
+		"rimraf": "^5.0.5",
+		"typescript": "^5.3.3",
+		"vite": "^5.0.8"
+	},
+	"dependencies": {
+		"@floating-ui/dom": "^1.7.4"
+	}
+}

package/src/css/_cells.css

@@ -0,0 +1,77 @@
+/* ==============================================================================
+   CELLS
+   ==============================================================================
+   Cell styles, editable states, editing mode, validation
+*/
+
+.wg__cell {
+  padding: var(--wg-cell-padding);
+  color: var(--wg-cell-color);
+  /* Account for sticky header when scrolling into view */
+  scroll-margin-top: 3rem;
+  scroll-margin-bottom: 0.5rem;
+}
+
+/* Cell text - prevent selection flash on double-click */
+.wg__cell-text {
+  user-select: none;
+}
+
+/* Text overflow ellipsis */
+.wg__cell--ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ==============================================================================
+   EDITABLE CELLS
+   ============================================================================== */
+.wg__cell--editable {
+  cursor: pointer;
+  position: relative;
+}
+
+.wg__cell--editable:hover {
+  background: var(--wg-cell-bg-hover);
+}
+
+/* Dashed border on hover for editable cells */
+.wg__cell--editable:hover::after {
+  content: "";
+  position: absolute;
+  inset: 2px;
+  border: 1px dashed var(--wg-border-color);
+  border-radius: 2px;
+  pointer-events: none;
+}
+
+/* ==============================================================================
+   EDITING CELLS
+   ============================================================================== */
+.wg__cell--editing {
+  position: relative;
+  background: var(--wg-surface-1);
+  outline: 2px solid var(--wg-accent-color);
+  outline-offset: -2px;
+}
+
+/* Hide the dashed hover border when editing */
+.wg__cell--editing::after {
+  display: none;
+}
+
+/* ==============================================================================
+   INVALID CELLS
+   ============================================================================== */
+.wg__cell--invalid {
+  background: var(--wg-danger-bg-light, #fee);
+  box-shadow: inset 0 0 0 2px var(--wg-danger-color, #c00);
+}
+
+/* ==============================================================================
+   READ-ONLY CELLS (permanent styling, not focus-related)
+   ============================================================================== */
+.wg--navigate-mode .wg__cell:not(.wg__cell--editable) {
+  background: var(--wg-cell-readonly-bg, #f5f5f5);
+}

package/src/css/_dark-mode.css

@@ -0,0 +1,51 @@
+/* ==============================================================================
+   DARK MODE SUPPORT
+   ==============================================================================
+   Dark mode is controlled by:
+   1. OS preference: @media (prefers-color-scheme: dark)
+   2. data-theme="dark" on ancestor or host
+   3. data-bs-theme="dark" (Bootstrap 5.3+) on ancestor
+   4. .dark class on ancestor (Tailwind CSS convention)
+*/
+@media (prefers-color-scheme: dark) {
+  :host {
+    --wg-surface-1: #1f1f1f;
+    --wg-surface-2: #2b2b2b;
+    --wg-surface-3: #333333;
+    --wg-surface-floating: #2b2b2b;
+    --wg-text-color-1: #e0e0e0;
+    --wg-text-color-2: #c0c0c0;
+    --wg-text-color-3: #a0a0a0;
+    --wg-border-color: #3d3d3d;
+    --wg-border-color-hover: #5a5a5a;
+    --wg-input-bg: #1f1f1f;
+    --wg-input-border: 1px solid #5a5a5a;
+    --wg-hover-bg: #3a3a3a;
+    --wg-active-bg: #4a4a4a;
+    --wg-danger-bg-light: #442726;
+    --wg-danger-color: #f87c86;
+  }
+}
+
+/* Explicit dark mode via data-theme, data-bs-theme attribute, or .dark class */
+:host([data-theme="dark"]),
+[data-theme="dark"] :host,
+:host([data-bs-theme="dark"]),
+[data-bs-theme="dark"] :host,
+.dark :host {
+  --wg-surface-1: #1f1f1f;
+  --wg-surface-2: #2b2b2b;
+  --wg-surface-3: #333333;
+  --wg-surface-floating: #2b2b2b;
+  --wg-text-color-1: #e0e0e0;
+  --wg-text-color-2: #c0c0c0;
+  --wg-text-color-3: #a0a0a0;
+  --wg-border-color: #3d3d3d;
+  --wg-border-color-hover: #5a5a5a;
+  --wg-input-bg: #1f1f1f;
+  --wg-input-border: 1px solid #5a5a5a;
+  --wg-hover-bg: #3a3a3a;
+  --wg-active-bg: #4a4a4a;
+  --wg-danger-bg-light: #442726;
+  --wg-danger-color: #f87c86;
+}

package/src/css/_dialogs.css

@@ -0,0 +1,121 @@
+/* ==============================================================================
+   TOOLTIP (Floating UI positioned)
+   ============================================================================== */
+.wg__tooltip {
+  position: fixed;
+  z-index: var(--wg-z-tooltip, 10000);
+  max-width: 300px;
+  padding: 6px 10px;
+  background: var(--wg-tooltip-bg, #333);
+  color: var(--wg-tooltip-color, #fff);
+  font-size: var(--wg-font-size-sm);
+  line-height: 1.4;
+  border-radius: var(--wg-border-radius-sm);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity var(--wg-transition-fast);
+}
+
+.wg__tooltip--visible {
+  opacity: 1;
+}
+
+.wg__tooltip-arrow {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: var(--wg-tooltip-bg, #333);
+  transform: rotate(45deg);
+}
+
+/* Arrow positioning based on tooltip placement */
+.wg__tooltip[data-placement^="top"] .wg__tooltip-arrow {
+  bottom: -4px;
+}
+
+.wg__tooltip[data-placement^="bottom"] .wg__tooltip-arrow {
+  top: -4px;
+}
+
+.wg__tooltip[data-placement^="left"] .wg__tooltip-arrow {
+  right: -4px;
+}
+
+.wg__tooltip[data-placement^="right"] .wg__tooltip-arrow {
+  left: -4px;
+}
+
+/* ==============================================================================
+   GO TO ROW DIALOG (Ctrl+G)
+   ============================================================================== */
+.wg__goto-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.wg__goto-dialog {
+  background: var(--wg-surface-1);
+  border-radius: var(--wg-border-radius);
+  padding: var(--wg-spacing-lg);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+  min-width: 250px;
+}
+
+.wg__goto-label {
+  display: block;
+  margin-bottom: var(--wg-spacing-sm);
+  font-size: var(--wg-font-size-base);
+  color: var(--wg-text-color-1);
+}
+
+.wg__goto-input {
+  width: 100%;
+  padding: var(--wg-spacing-sm) var(--wg-spacing-md);
+  border: 1px solid var(--wg-border-color);
+  border-radius: var(--wg-border-radius-sm);
+  font-size: var(--wg-font-size-base);
+  margin-bottom: var(--wg-spacing-md);
+  box-sizing: border-box;
+}
+
+.wg__goto-input:focus {
+  outline: none;
+  border-color: var(--wg-accent-color);
+  box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.2);
+}
+
+.wg__goto-buttons {
+  display: flex;
+  gap: var(--wg-spacing-sm);
+  justify-content: flex-end;
+}
+
+.wg__goto-btn {
+  padding: var(--wg-spacing-sm) var(--wg-spacing-md);
+  border: 1px solid var(--wg-border-color);
+  border-radius: var(--wg-border-radius-sm);
+  font-size: var(--wg-font-size-sm);
+  cursor: pointer;
+  background: var(--wg-surface-1);
+  color: var(--wg-text-color-1);
+}
+
+.wg__goto-btn:hover {
+  background: var(--wg-surface-2);
+}
+
+.wg__goto-btn--go {
+  background: var(--wg-accent-color);
+  border-color: var(--wg-accent-color);
+  color: white;
+}
+
+.wg__goto-btn--go:hover {
+  background: var(--wg-accent-color-hover, #106ebe);
+}

package/src/css/_dropdown.css

@@ -0,0 +1,193 @@
+/* ==============================================================================
+   DROPDOWN
+   ==============================================================================
+   Dropdown menus and select triggers
+*/
+
+/* ==============================================================================
+   SELECT TRIGGER (custom dropdown trigger like v3)
+   ============================================================================== */
+.wg__select-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  background: transparent;
+}
+
+.wg__select-trigger:focus,
+.wg__select-trigger:focus-visible {
+  outline: none;
+  box-shadow: none;
+}
+
+.wg__select-value {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.wg__select-toggle {
+  position: relative;
+  font-size: var(--wg-dropdown-toggle-size);
+  opacity: 0.6;
+  margin-left: 4px;
+  flex-shrink: 0;
+  pointer-events: auto;
+  cursor: pointer;
+}
+
+/* Larger invisible hitbox for easier clicking */
+.wg__select-toggle::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: var(--wg-dropdown-toggle-hitbox);
+  height: 48px;
+}
+
+/* Dropdown cell in display mode (read-only, same layout as editor) */
+.wg__cell-dropdown-display {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  cursor: pointer;
+}
+
+/* Toggle visibility: on-focus mode - hide by default, show on hover/focus */
+.wg__cell-dropdown-display--toggle-on-focus .wg__select-toggle {
+  opacity: 0;
+}
+
+.wg__cell:hover .wg__cell-dropdown-display--toggle-on-focus .wg__select-toggle {
+  opacity: 0.6;
+}
+
+.wg__cell--focused .wg__cell-dropdown-display--toggle-on-focus .wg__select-toggle {
+  opacity: 0.6;
+}
+
+/* Date cell in display mode (same pattern as dropdown) */
+.wg__cell-date-display {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  cursor: pointer;
+}
+
+.wg__cell-date-display .wg__date-trigger {
+  position: relative;
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  opacity: 0.6;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: inherit;
+}
+
+/* Larger invisible hitbox for easier clicking */
+.wg__cell-date-display .wg__date-trigger::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: var(--wg-dropdown-toggle-hitbox);
+  height: 48px;
+}
+
+/* Toggle visibility: on-focus mode - hide by default, show on hover/focus */
+.wg__cell-date-display--toggle-on-focus .wg__date-trigger {
+  opacity: 0;
+}
+
+.wg__cell:hover .wg__cell-date-display--toggle-on-focus .wg__date-trigger {
+  opacity: 0.6;
+}
+
+.wg__cell--focused .wg__cell-date-display--toggle-on-focus .wg__date-trigger {
+  opacity: 0.6;
+}
+
+/* ==============================================================================
+   DROPDOWN MENU
+   ============================================================================== */
+.wg__dropdown {
+  background: var(--wg-surface-floating, #fff);
+  border: 1px solid var(--wg-border-color, #d1d1d1);
+  border-radius: 4px;
+  box-shadow: var(--wg-toolbar-shadow);
+  max-height: 200px;
+  overflow-y: auto;
+  font-size: var(--wg-font-size-base);
+  font-family: inherit;
+  line-height: var(--wg-line-height-base);
+}
+
+.wg__dropdown-option {
+  display: flex;
+  align-items: center;
+  gap: var(--wg-spacing-sm);
+  padding: 6px 12px;
+  cursor: pointer;
+  color: var(--wg-text-color-1);
+}
+
+.wg__dropdown-option:hover,
+.wg__dropdown-option--highlighted {
+  background: var(--wg-hover-bg, #f0f0f0);
+}
+
+.wg__dropdown-option--selected {
+  background: var(--wg-accent-color-light, #e6f2ff);
+}
+
+.wg__dropdown-option--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.wg__dropdown-option-icon {
+  flex-shrink: 0;
+  width: 1.5em;
+  text-align: center;
+}
+
+.wg__dropdown-option-content {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.wg__dropdown-option-label {
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.wg__dropdown-option-subtitle {
+  display: block;
+  font-size: var(--wg-font-size-sm);
+  color: var(--wg-text-color-2);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.wg__dropdown-empty {
+  padding: 8px 12px;
+  color: var(--wg-text-color-2);
+  font-style: italic;
+  text-align: center;
+}

package/src/css/_editors.css

@@ -0,0 +1,184 @@
+/* ==============================================================================
+   EDITORS
+   ==============================================================================
+   Input editors for cells: text, number, date, checkbox, custom, combobox
+*/
+
+.wg__editor {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  padding: var(--wg-cell-padding);
+  border: none;
+  background: transparent;  /* Transparent - cell provides background */
+  color: var(--wg-text-color-1);
+  font-size: var(--wg-font-size-base);
+  font-family: inherit;
+  line-height: inherit;
+  box-sizing: border-box;
+}
+
+.wg__editor:focus,
+.wg__editor:focus-visible {
+  outline: none;
+  box-shadow: none;
+}
+
+/* Text Editor */
+.wg__editor--text {
+  text-align: inherit;
+}
+
+/* Number Editor */
+.wg__editor--number {
+  text-align: right;
+}
+
+/* Date Editor */
+.wg__editor--date {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  background: var(--wg-editor-bg);
+}
+
+.wg__date-input {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  border: none;
+  background: transparent;
+  font: inherit;
+  padding: var(--wg-cell-padding-block) var(--wg-cell-padding-inline);
+  outline: none;
+  color: inherit;
+}
+
+.wg__date-trigger {
+  width: var(--wg-date-trigger-size, 28px);
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  color: var(--wg-text-secondary, #666);
+  cursor: pointer;
+  padding: 0;
+  flex-shrink: 0;
+}
+
+.wg__date-trigger:hover {
+  color: var(--wg-accent-color, #0078d4);
+  background: var(--wg-hover-bg, rgba(0, 0, 0, 0.05));
+}
+
+/* Checkbox Editor */
+.wg__editor--checkbox {
+  width: auto;
+  height: auto;
+  margin: 0 auto;
+}
+
+/* Custom Editor */
+.wg__editor--custom {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  background: var(--wg-editor-bg);
+  padding: var(--wg-cell-padding-block) var(--wg-cell-padding-inline);
+  cursor: pointer;
+}
+
+.wg__editor--custom:focus {
+  outline: none;
+}
+
+.wg__custom-value {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: block;
+  cursor: pointer;
+}
+
+/* ==============================================================================
+   COMBOBOX / AUTOCOMPLETE EDITORS
+   ============================================================================== */
+.wg__editor--combobox,
+.wg__editor--autocomplete {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  padding: var(--wg-cell-padding);
+  padding-right: 0;  /* Arrow handles right side */
+  background: transparent;  /* Transparent - cell provides background */
+  box-sizing: border-box;
+}
+
+.wg__combobox-input,
+.wg__autocomplete-input {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  padding-right: 24px;  /* Space for arrow */
+  border: none;
+  background: transparent;
+  color: var(--wg-text-color-1);
+  font-size: var(--wg-font-size-base);
+  font-family: inherit;
+  line-height: var(--wg-line-height-base);
+  outline: none;
+  box-sizing: border-box;
+  margin: 0;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.wg__combobox-input:focus,
+.wg__autocomplete-input:focus {
+  outline: none;
+}
+
+.wg__combobox-toggle {
+  position: absolute;
+  right: var(--wg-dropdown-toggle-right);
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: var(--wg-dropdown-toggle-size);
+  color: var(--wg-text-color-2);
+  pointer-events: auto;
+  cursor: pointer;
+}
+
+/* Larger invisible hitbox for easier clicking */
+.wg__combobox-toggle::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: var(--wg-dropdown-toggle-hitbox);
+  height: 48px;
+}
+
+.wg__loading-indicator {
+  position: absolute;
+  right: var(--wg-dropdown-toggle-right);
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 12px;
+  animation: wg-pulse 1s infinite;
+}
+
+@keyframes wg-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}