@adia-ai/web-components 0.0.1

package/components/table/table.a2ui.json

@@ -0,0 +1,458 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Table.json",
+  "title": "Table",
+  "description": "Data table with sorting, selection, pagination, search, column resize, keyboard nav, cell types, and CSV export. CSS grid + ARIA grid roles.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "Table"
+    },
+    "density": {
+      "description": "Controls cell padding and row height. 'compact' for dense data, 'standard' for default spacing, 'comfortable' for spacious rows.",
+      "type": "string",
+      "enum": [
+        "compact",
+        "standard",
+        "comfortable"
+      ],
+      "default": "standard"
+    },
+    "expandable": {
+      "description": "Enable row expansion",
+      "type": "boolean",
+      "default": false
+    },
+    "loading": {
+      "description": "Shows a loading overlay and skeleton rows. Sets aria-busy=\"true\". Data updates are deferred until loading is set back to false.",
+      "type": "boolean",
+      "default": false
+    },
+    "paginate": {
+      "description": "Rows per page. 0 = show all rows without pagination. When > 0, renders a pagination bar below the table.",
+      "type": "number",
+      "default": 0
+    },
+    "raw": {
+      "description": "Raw mode",
+      "type": "boolean",
+      "default": false
+    },
+    "search": {
+      "description": "Global search/filter string. Filters visible rows across all columns using case-insensitive substring matching. Resets to page 1 on change.",
+      "type": "string",
+      "default": ""
+    },
+    "selectable": {
+      "description": "Show checkbox column for row selection. Select-all checkbox in header. Shift+click for range select.",
+      "type": "boolean",
+      "default": false
+    },
+    "sortable": {
+      "description": "Enable click-to-sort on column headers. Supports multi-sort via Shift+click.",
+      "type": "boolean",
+      "default": false
+    },
+    "striped": {
+      "description": "Alternate row background colors for visual scanning.",
+      "type": "boolean",
+      "default": false
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "agent",
+    "events": {
+      "cell-click": {
+        "description": "Fired when a data cell is clicked."
+      },
+      "page": {
+        "description": "Fired when the user navigates to a different page."
+      },
+      "resize": {
+        "description": "Fired when a column is resized via drag."
+      },
+      "select": {
+        "description": "Fired when row selection changes."
+      },
+      "sort": {
+        "description": "Fired when sort state changes via header click."
+      }
+    },
+    "examples": [
+      {
+        "description": "API key management table with actions and status badges.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"hdr\",\n      \"sec\"\n    ]\n  },\n  {\n    \"id\": \"hdr\",\n    \"component\": \"Header\",\n    \"children\": [\n      \"title\",\n      \"add\"\n    ]\n  },\n  {\n    \"id\": \"title\",\n    \"component\": \"Text\",\n    \"slot\": \"heading\",\n    \"textContent\": \"API Keys\"\n  },\n  {\n    \"id\": \"add\",\n    \"component\": \"Button\",\n    \"slot\": \"action\",\n    \"text\": \"Create Key\",\n    \"variant\": \"primary\",\n    \"size\": \"sm\"\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"tbl\"\n    ]\n  },\n  {\n    \"id\": \"tbl\",\n    \"component\": \"Table\",\n    \"sortable\": true,\n    \"columns\": [\n      {\n        \"key\": \"name\",\n        \"label\": \"Name\",\n        \"sortable\": true\n      },\n      {\n        \"key\": \"key\",\n        \"label\": \"Key\"\n      },\n      {\n        \"key\": \"created\",\n        \"label\": \"Created\",\n        \"sortable\": true\n      },\n      {\n        \"key\": \"lastUsed\",\n        \"label\": \"Last Used\",\n        \"sortable\": true\n      },\n      {\n        \"key\": \"status\",\n        \"label\": \"Status\",\n        \"component\": \"Badge\"\n      }\n    ],\n    \"rows\": [\n      {\n        \"name\": \"Production API\",\n        \"key\": \"sk-****-****-3a7f\",\n        \"created\": \"2025-01-15\",\n        \"lastUsed\": \"2025-04-16\",\n        \"status\": {\n          \"text\": \"Active\",\n          \"variant\": \"success\"\n        }\n      },\n      {\n        \"name\": \"Staging API\",\n        \"key\": \"sk-****-****-9b2e\",\n        \"created\": \"2025-03-01\",\n        \"lastUsed\": \"2025-04-10\",\n        \"status\": {\n          \"text\": \"Active\",\n          \"variant\": \"success\"\n        }\n      },\n      {\n        \"name\": \"Legacy Client\",\n        \"key\": \"sk-****-****-5d1c\",\n        \"created\": \"2024-06-20\",\n        \"lastUsed\": \"2024-12-01\",\n        \"status\": {\n          \"text\": \"Revoked\",\n          \"variant\": \"danger\"\n        }\n      }\n    ]\n  }\n]",
+        "name": "api-key-table"
+      },
+      {
+        "description": "Card with header containing title and search input, table component, and pagination footer.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"size\": \"lg\",\n    \"children\": [\n      \"hdr\",\n      \"sec\",\n      \"ftr\"\n    ]\n  },\n  {\n    \"id\": \"hdr\",\n    \"component\": \"Header\",\n    \"children\": [\n      \"title-row\"\n    ]\n  },\n  {\n    \"id\": \"title-row\",\n    \"component\": \"Row\",\n    \"children\": [\n      \"title\",\n      \"search\"\n    ],\n    \"gap\": \"4\"\n  },\n  {\n    \"id\": \"title\",\n    \"component\": \"Text\",\n    \"slot\": \"heading\",\n    \"textContent\": \"Data Table\",\n    \"variant\": \"section\"\n  },\n  {\n    \"id\": \"search\",\n    \"component\": \"Input\",\n    \"placeholder\": \"Search...\",\n    \"type\": \"search\",\n    \"name\": \"search\"\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"tbl\"\n    ]\n  },\n  {\n    \"id\": \"tbl\",\n    \"component\": \"Table\",\n    \"sortable\": true\n  },\n  {\n    \"id\": \"ftr\",\n    \"component\": \"Footer\",\n    \"children\": [\n      \"pager\"\n    ]\n  },\n  {\n    \"id\": \"pager\",\n    \"component\": \"Pagination\",\n    \"totalPages\": 10,\n    \"currentPage\": 1\n  }\n]",
+        "name": "data-table-view"
+      }
+    ],
+    "keywords": [
+      "table",
+      "order",
+      "invoice",
+      "reporting",
+      "spreadsheet",
+      "grid",
+      "listing",
+      "records",
+      "database",
+      "csv",
+      "excel",
+      "rows",
+      "columns",
+      "datatable",
+      "directory",
+      "admin",
+      "backoffice",
+      "console",
+      "crm",
+      "paginate",
+      "import",
+      "export",
+      "download",
+      "billing",
+      "api",
+      "leaderboard",
+      "ranking",
+      "inventory",
+      "stock",
+      "warehouse",
+      "supply",
+      "log",
+      "audit",
+      "history",
+      "file-manager",
+      "files",
+      "assets",
+      "management",
+      "manage"
+    ],
+    "name": "AdiaTable",
+    "related": [
+      "button",
+      "input",
+      "pagination"
+    ],
+    "slots": {},
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {
+      "admin": [
+        "dashboard",
+        "table",
+        "data",
+        "sidebar",
+        "nav",
+        "settings"
+      ],
+      "api": [
+        "api",
+        "key",
+        "table",
+        "code"
+      ],
+      "assets": [
+        "data",
+        "table",
+        "file",
+        "image",
+        "gallery"
+      ],
+      "audit": [
+        "team",
+        "activity",
+        "table",
+        "data"
+      ],
+      "backoffice": [
+        "dashboard",
+        "table",
+        "data",
+        "sidebar",
+        "settings"
+      ],
+      "billing": [
+        "pricing",
+        "tier",
+        "table"
+      ],
+      "columns": [
+        "split",
+        "grid",
+        "table"
+      ],
+      "console": [
+        "dashboard",
+        "table",
+        "data",
+        "sidebar",
+        "command"
+      ],
+      "crm": [
+        "dashboard",
+        "table",
+        "data",
+        "user",
+        "profile",
+        "chart"
+      ],
+      "csv": [
+        "table",
+        "data",
+        "import"
+      ],
+      "database": [
+        "table",
+        "data",
+        "import"
+      ],
+      "datatable": [
+        "table",
+        "data"
+      ],
+      "directory": [
+        "team",
+        "avatar",
+        "group",
+        "table",
+        "data"
+      ],
+      "download": [
+        "data",
+        "table",
+        "file"
+      ],
+      "excel": [
+        "table",
+        "data",
+        "import"
+      ],
+      "export": [
+        "data",
+        "table",
+        "download"
+      ],
+      "file-manager": [
+        "data",
+        "table",
+        "file",
+        "upload"
+      ],
+      "files": [
+        "data",
+        "table",
+        "file",
+        "upload"
+      ],
+      "grid": [
+        "table",
+        "data",
+        "card",
+        "image",
+        "feature",
+        "grid"
+      ],
+      "history": [
+        "team",
+        "activity",
+        "table"
+      ],
+      "import": [
+        "data",
+        "import",
+        "file",
+        "upload",
+        "table"
+      ],
+      "inventory": [
+        "inventory",
+        "table",
+        "product",
+        "data"
+      ],
+      "invoice": [
+        "table",
+        "data",
+        "pricing"
+      ],
+      "leaderboard": [
+        "leaderboard",
+        "table",
+        "rank"
+      ],
+      "listing": [
+        "table",
+        "data",
+        "list"
+      ],
+      "log": [
+        "team",
+        "activity",
+        "table",
+        "data"
+      ],
+      "manage": [
+        "project",
+        "board",
+        "kanban",
+        "team",
+        "dashboard",
+        "settings",
+        "table"
+      ],
+      "management": [
+        "project",
+        "board",
+        "kanban",
+        "team",
+        "activity",
+        "settings",
+        "dashboard",
+        "table"
+      ],
+      "order": [
+        "table",
+        "data",
+        "inventory",
+        "form"
+      ],
+      "paginate": [
+        "pagination",
+        "nav",
+        "table"
+      ],
+      "ranking": [
+        "leaderboard",
+        "table"
+      ],
+      "records": [
+        "table",
+        "data"
+      ],
+      "reporting": [
+        "chart",
+        "dashboard",
+        "metric",
+        "stat",
+        "table",
+        "data"
+      ],
+      "rows": [
+        "table",
+        "data"
+      ],
+      "spreadsheet": [
+        "table",
+        "data"
+      ],
+      "stock": [
+        "inventory",
+        "table",
+        "product"
+      ],
+      "supply": [
+        "inventory",
+        "table"
+      ],
+      "warehouse": [
+        "inventory",
+        "table"
+      ]
+    },
+    "tag": "table-ui",
+    "tokens": {
+      "--table-accent": {
+        "description": "Accent color for checkboxes and focus"
+      },
+      "--table-border-color": {
+        "description": "Row/cell border color"
+      },
+      "--table-border-width": {
+        "description": "Border width"
+      },
+      "--table-font-family": {
+        "description": "Font family"
+      },
+      "--table-font-size": {
+        "description": "Body font size"
+      },
+      "--table-foreground": {
+        "description": "Body text color"
+      },
+      "--table-heading-background": {
+        "description": "Header row background"
+      },
+      "--table-heading-color": {
+        "description": "Header text color"
+      },
+      "--table-heading-size": {
+        "description": "Header font size"
+      },
+      "--table-heading-weight": {
+        "description": "Header font weight"
+      },
+      "--table-loading-overlay": {
+        "description": "Loading overlay background"
+      },
+      "--table-padding-x": {
+        "description": "Horizontal cell padding"
+      },
+      "--table-padding-y": {
+        "description": "Vertical cell padding"
+      },
+      "--table-radius": {
+        "description": "Border-radius for table container"
+      },
+      "--table-resize-handle-color": {
+        "description": "Column resize drag handle color"
+      },
+      "--table-resize-handle-width": {
+        "description": "Resize handle hit area width"
+      },
+      "--table-row-background": {
+        "description": "Default row background"
+      },
+      "--table-row-background-hover": {
+        "description": "Row hover background"
+      },
+      "--table-row-background-selected": {
+        "description": "Selected row background"
+      },
+      "--table-row-background-striped": {
+        "description": "Alternate row background"
+      },
+      "--table-search-highlight": {
+        "description": "Search match highlight color"
+      },
+      "--table-sort-indicator-color": {
+        "description": "Sort arrow color"
+      },
+      "--table-transition": {
+        "description": "Transition timing"
+      }
+    },
+    "traits": [],
+    "version": 1
+  }
+}