@ornery/ui-grid-vanilla 1.0.6 → 1.0.8

package/README.md

@@ -45,6 +45,7 @@ class MyComponent extends HTMLElement {
 ```
 
 The `.html` template uses ES6 template literal syntax:
+
 ```html
 <div class="my-class">${this.myProp}</div>
 ```
@@ -60,10 +61,10 @@ Templates are compiled at build time by `@ornery/web-components/vite` (or `/webp
 
 Cell and row slot templates support dual binding syntax:
 
-| Syntax | Example | Description |
-|--------|---------|-------------|
-| `{{ }}` | `{{value}}` | Mustache-style, original grid syntax |
-| `${ }` | `${this.value}` | ES6 template literal, `@ornery/web-components` native |
+| Syntax  | Example         | Description                                           |
+| ------- | --------------- | ----------------------------------------------------- |
+| `{{ }}` | `{{value}}`     | Mustache-style, original grid syntax                  |
+| `${ }`  | `${this.value}` | ES6 template literal, `@ornery/web-components` native |
 
 Both resolve against the same context: `{ $implicit, value, valueText, row, column, rowIndex }`.
 
@@ -75,6 +76,53 @@ npm install @ornery/ui-grid-vanilla @ornery/ui-grid-core
 
 ## Usage
 
+### No-Bundler Browser Usage
+
+Use the browser bundle when a static HTML host needs to consume the grid without Vite, Webpack, tsup, or another package-aware build step. The bundle includes `@ornery/ui-grid-core` and registers `<ui-grid-element>` when the module loads.
+
+After `npm run build:vanilla` from the repo root, the browser-ready file is written to `projects/ui-grid-vanilla/dist/browser/ui-grid-element.js`.
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>UI Grid Browser Bundle</title>
+    <script type="module" src="./ui-grid-element.js"></script>
+  </head>
+  <body>
+    <ui-grid-element
+      grid-id="static-grid"
+      enable-sorting
+      enable-filtering
+      column-defs='[{"name":"name"},{"name":"role"},{"name":"salary","type":"number","align":"end"}]'
+      data='[{"name":"Alice","role":"Engineer","salary":120000},{"name":"Bob","role":"Designer","salary":95000}]'
+    >
+    </ui-grid-element>
+  </body>
+</html>
+```
+
+For imperative setup in the same no-bundler environment, import from that same file:
+
+```html
+<div id="grid"></div>
+
+<script type="module">
+  import { mountVanillaUiGrid } from './ui-grid-element.js';
+
+  await mountVanillaUiGrid(document.querySelector('#grid'), {
+    id: 'static-mounted-grid',
+    columnDefs: [{ name: 'name' }, { name: 'role' }],
+    data: [{ name: 'Alice', role: 'Engineer' }],
+    enableSorting: true,
+    enableFiltering: true,
+  });
+</script>
+```
+
+The package `dist/index.js` file is CommonJS for Node/package consumers, and `dist/index.mjs` is package ESM for bundlers or import-map setups. Use `dist/browser/ui-grid-element.js` for direct browser loading.
+
 ### Imperative (JavaScript)
 
 ```js
@@ -103,7 +151,8 @@ const grid = await mountVanillaUiGrid(document.getElementById('grid'), {
   enable-sorting
   enable-filtering
   column-defs='[{"name":"name","field":"name"},{"name":"age","field":"age","align":"end"}]'
-  data='[{"name":"Alice","age":30},{"name":"Bob","age":25}]'>
+  data='[{"name":"Alice","age":30},{"name":"Bob","age":25}]'
+>
 </ui-grid-element>
 ```
 
@@ -131,10 +180,21 @@ Define reusable components from HTML alone with `<template is="ui-grid-template"
 <!-- Define a badge component -->
 <template is="ui-grid-template" name="ui-status-badge" status="unknown">
   <style>
-    :host { display: inline-block; }
-    .badge { padding: 2px 8px; border-radius: 4px; }
-    .badge-active { background: #d1fae5; color: #065f46; }
-    .badge-inactive { background: #fee2e2; color: #991b1b; }
+    :host {
+      display: inline-block;
+    }
+    .badge {
+      padding: 2px 8px;
+      border-radius: 4px;
+    }
+    .badge-active {
+      background: #d1fae5;
+      color: #065f46;
+    }
+    .badge-inactive {
+      background: #fee2e2;
+      color: #991b1b;
+    }
   </style>
   <span class="badge badge-${this.status}">${this.status}</span>
 </template>
@@ -156,7 +216,7 @@ import { defineConfig } from 'vite';
 import webComponents from '@ornery/web-components/vite';
 
 export default defineConfig({
-  plugins: [webComponents()]
+  plugins: [webComponents()],
 });
 ```
 
@@ -166,7 +226,7 @@ export default defineConfig({
 import webComponents from '@ornery/web-components/webpack';
 
 export default {
-  plugins: [webComponents()]
+  plugins: [webComponents()],
 };
 ```
 
@@ -184,13 +244,17 @@ export default defineConfig({
 ## API
 
 ### `mountVanillaUiGrid(target, options, rustModule?, tagName?)`
+
 Mount a grid into a target element. Returns the grid element.
 
 ### `defineStandaloneUiGridElement(tagName?)`
+
 Register the `<ui-grid-element>` custom element (and all sub-components).
 
 ### `UIGridTemplate`
+
 Exported class for the `<template is="ui-grid-template">` element. Auto-registered when the grid is defined.
 
 ### Grid Element Properties
+
 See `VanillaUiGridElement` type — all `GridOptions` fields are available as both HTML attributes and JS properties.

package/dist/adopt-styles.d.ts

@@ -0,0 +1,2 @@
+export declare function adoptStyles(shadowRoot: ShadowRoot, css: string, key: object): void;
+//# sourceMappingURL=adopt-styles.d.ts.map

package/dist/adopt-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"adopt-styles.d.ts","sourceRoot":"","sources":["../src/adopt-styles.ts"],"names":[],"mappings":"AAiBA,wBAAgB,WAAW,CAAC,UAAU,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,CAqBlF"}

package/dist/attribute-bridge.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Declarative attribute bridge.
+ *
+ * The grid element accepts its full `GridOptions` shape through HTML
+ * attributes so it can be driven declaratively from any framework (or
+ * plain HTML). This module owns:
+ *
+ *   - `OBSERVED_GRID_ATTRIBUTES`: the list passed to `observedAttributes`
+ *   - `parseGridAttributeOptions(el)`: reads attributes off an element and
+ *     returns the `Partial<GridOptions>` they describe
+ *   - the individual attribute parsers (boolean / tri-state / number / JSON)
+ *
+ * The element keeps its own `attributeOptions` cache and `buildEffectiveOptions`
+ * merge so JS-set properties can override attribute values, but the parsing
+ * itself lives here.
+ */
+import type { GridOptions } from '@ornery/ui-grid-core';
+/** The list passed to `static observedAttributes`. Every kebab-case name
+ * that corresponds to a GridOptions field lives here. */
+export declare const OBSERVED_GRID_ATTRIBUTES: readonly string[];
+/**
+ * Read every supported attribute off the element and produce the
+ * corresponding `Partial<GridOptions>`. Missing attributes are simply
+ * absent from the result — the element merges this with its imperative
+ * `options` setter so JS-set properties win.
+ */
+export declare function parseGridAttributeOptions(el: Element): Partial<GridOptions>;
+/** Present attribute → true. Absent → undefined (no override). */
+export declare function parseBoolean(el: Element, name: string): boolean | undefined;
+/**
+ * Tri-state boolean. Present + empty/"true" → true; "false"/"0"/"off" →
+ * false; absent → undefined. Use for flags that default to true in the
+ * model so consumers can opt out with `attr="false"` without removing
+ * the attribute.
+ */
+export declare function parseTriStateBoolean(el: Element, name: string): boolean | undefined;
+export declare function parseNumber(el: Element, name: string): number | undefined;
+export declare function parseJson<T = unknown>(el: Element, name: string): T | undefined;
+//# sourceMappingURL=attribute-bridge.d.ts.map

package/dist/attribute-bridge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"attribute-bridge.d.ts","sourceRoot":"","sources":["../src/attribute-bridge.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,EAAiB,WAAW,EAAc,MAAM,sBAAsB,CAAC;AAEnF;yDACyD;AACzD,eAAO,MAAM,wBAAwB,EAAE,SAAS,MAAM,EAuDrD,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,yBAAyB,CAAC,EAAE,EAAE,OAAO,GAAG,OAAO,CAAC,WAAW,CAAC,CAwK3E;AAED,kEAAkE;AAClE,wBAAgB,YAAY,CAAC,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAE3E;AAED;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAAC,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAOnF;AAED,wBAAgB,WAAW,CAAC,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAKzE;AAED,wBAAgB,SAAS,CAAC,CAAC,GAAG,OAAO,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC,GAAG,SAAS,CAS/E"}