@toclocoinc/lattice-grid 1.64.0 → 1.66.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toclocoinc/lattice-grid",
-  "version": "1.64.0",
+  "version": "1.66.0",
   "description": "Lattice Grid JS: a high-performance JavaScript data grid for millions of rows, live data sources and zero runtime dependencies, free on localhost and licensed per domain to ship.",
   "keywords": [
     "data-grid",
@@ -41,6 +41,15 @@
     },
     "./modules/*.js": "./modules/*.js",
     "./modules/*.cjs": "./modules/*.cjs",
+    "./angular": {
+      "types": "./angular/types/toclocoinc-lattice-grid-angular.d.ts",
+      "default": "./angular/fesm2022/toclocoinc-lattice-grid-angular.mjs"
+    },
+    "./angular/package.json": "./angular/package.json",
+    "./svelte/*.svelte": {
+      "svelte": "./svelte/*.svelte",
+      "default": "./svelte/*.svelte"
+    },
     "./css": "./lattice-grid.min.css",
     "./lattice-grid.css": "./lattice-grid.min.css",
     "./package.json": "./package.json"
@@ -48,5 +57,21 @@
   "sideEffects": [
     "*.css"
   ],
-  "dependencies": {}
+  "dependencies": {},
+  "peerDependencies": {
+    "@angular/common": ">=17.0.0",
+    "@angular/core": ">=17.0.0",
+    "svelte": ">=5.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@angular/common": {
+      "optional": true
+    },
+    "@angular/core": {
+      "optional": true
+    },
+    "svelte": {
+      "optional": true
+    }
+  }
 }

package/svelte/Chart.svelte

@@ -0,0 +1,34 @@
+<script>
+  import { onMount, onDestroy, getContext } from 'svelte';
+  import { createChart } from '@toclocoinc/lattice-grid/modules/charts';
+  import { bindViewer, GRID_REGISTRY_KEY } from '@toclocoinc/lattice-grid/modules/svelte';
+
+  let { class: klass = '', style = '', id = undefined, ...props } = $props();
+
+  let el = $state(null);
+  let published = $state(0);
+  let binding = null;
+  const registry = getContext(GRID_REGISTRY_KEY) ?? null;
+  const unsubscribe = registry ? registry.subscribe(() => { published += 1; }) : null;
+
+  export function instance() { return binding ? binding.instance : null; }
+
+  onMount(() => {
+    binding = bindViewer({ viewer: 'chart', factory: createChart, element: el, registry });
+    binding.sync(props);
+  });
+
+  onDestroy(() => {
+    if (unsubscribe) unsubscribe();
+    if (binding) binding.destroy();
+    binding = null;
+  });
+
+  $effect(() => {
+    void published;
+    const now = { ...props };
+    if (binding) binding.sync(now);
+  });
+</script>
+
+<div bind:this={el} class={klass} {style} {id}></div>

package/svelte/Gantt.svelte

@@ -0,0 +1,34 @@
+<script>
+  import { onMount, onDestroy, getContext } from 'svelte';
+  import { createGantt } from '@toclocoinc/lattice-grid/modules/gantt';
+  import { bindViewer, GRID_REGISTRY_KEY } from '@toclocoinc/lattice-grid/modules/svelte';
+
+  let { class: klass = '', style = '', id = undefined, ...props } = $props();
+
+  let el = $state(null);
+  let published = $state(0);
+  let binding = null;
+  const registry = getContext(GRID_REGISTRY_KEY) ?? null;
+  const unsubscribe = registry ? registry.subscribe(() => { published += 1; }) : null;
+
+  export function instance() { return binding ? binding.instance : null; }
+
+  onMount(() => {
+    binding = bindViewer({ viewer: 'gantt', factory: createGantt, element: el, registry });
+    binding.sync(props);
+  });
+
+  onDestroy(() => {
+    if (unsubscribe) unsubscribe();
+    if (binding) binding.destroy();
+    binding = null;
+  });
+
+  $effect(() => {
+    void published;
+    const now = { ...props };
+    if (binding) binding.sync(now);
+  });
+</script>
+
+<div bind:this={el} class={klass} {style} {id}></div>

package/svelte/Grid.svelte

@@ -0,0 +1,30 @@
+<script>
+  import { onMount, onDestroy, getContext } from 'svelte';
+  import { createGrid } from '@toclocoinc/lattice-grid';
+  import { bindGrid, GRID_REGISTRY_KEY, ROUTER_KEY } from '@toclocoinc/lattice-grid/modules/svelte';
+
+  let { class: klass = '', style = '', id = undefined, ...props } = $props();
+
+  let el = $state(null);
+  let binding = null;
+  const registry = getContext(GRID_REGISTRY_KEY) ?? null;
+  const router = getContext(ROUTER_KEY) ?? null;
+
+  export function grid() { return binding ? binding.grid : null; }
+
+  onMount(() => {
+    binding = bindGrid({ createGrid, element: el, props, registry, router });
+  });
+
+  onDestroy(() => {
+    if (binding) binding.destroy(props);
+    binding = null;
+  });
+
+  $effect(() => {
+    const now = { ...props };
+    if (binding) binding.update(now);
+  });
+</script>
+
+<div bind:this={el} class={klass} {style} {id}></div>

package/svelte/GridProvider.svelte

@@ -0,0 +1,13 @@
+<script>
+  import { setContext } from 'svelte';
+  import { createGridRegistry, GRID_REGISTRY_KEY } from '@toclocoinc/lattice-grid/modules/svelte';
+
+  let { children } = $props();
+
+  const registry = createGridRegistry();
+  setContext(GRID_REGISTRY_KEY, registry);
+
+  export function grids() { return registry; }
+</script>
+
+{@render children?.()}

package/svelte/KPI.svelte

@@ -0,0 +1,34 @@
+<script>
+  import { onMount, onDestroy, getContext } from 'svelte';
+  import { createKPI } from '@toclocoinc/lattice-grid/modules/kpi';
+  import { bindViewer, GRID_REGISTRY_KEY } from '@toclocoinc/lattice-grid/modules/svelte';
+
+  let { class: klass = '', style = '', id = undefined, ...props } = $props();
+
+  let el = $state(null);
+  let published = $state(0);
+  let binding = null;
+  const registry = getContext(GRID_REGISTRY_KEY) ?? null;
+  const unsubscribe = registry ? registry.subscribe(() => { published += 1; }) : null;
+
+  export function instance() { return binding ? binding.instance : null; }
+
+  onMount(() => {
+    binding = bindViewer({ viewer: 'kpi', factory: createKPI, element: el, registry });
+    binding.sync(props);
+  });
+
+  onDestroy(() => {
+    if (unsubscribe) unsubscribe();
+    if (binding) binding.destroy();
+    binding = null;
+  });
+
+  $effect(() => {
+    void published;
+    const now = { ...props };
+    if (binding) binding.sync(now);
+  });
+</script>
+
+<div bind:this={el} class={klass} {style} {id}></div>

package/svelte/Kanban.svelte

@@ -0,0 +1,34 @@
+<script>
+  import { onMount, onDestroy, getContext } from 'svelte';
+  import { createKanban } from '@toclocoinc/lattice-grid/modules/kanban';
+  import { bindViewer, GRID_REGISTRY_KEY } from '@toclocoinc/lattice-grid/modules/svelte';
+
+  let { class: klass = '', style = '', id = undefined, ...props } = $props();
+
+  let el = $state(null);
+  let published = $state(0);
+  let binding = null;
+  const registry = getContext(GRID_REGISTRY_KEY) ?? null;
+  const unsubscribe = registry ? registry.subscribe(() => { published += 1; }) : null;
+
+  export function instance() { return binding ? binding.instance : null; }
+
+  onMount(() => {
+    binding = bindViewer({ viewer: 'kanban', factory: createKanban, element: el, registry });
+    binding.sync(props);
+  });
+
+  onDestroy(() => {
+    if (unsubscribe) unsubscribe();
+    if (binding) binding.destroy();
+    binding = null;
+  });
+
+  $effect(() => {
+    void published;
+    const now = { ...props };
+    if (binding) binding.sync(now);
+  });
+</script>
+
+<div bind:this={el} class={klass} {style} {id}></div>

package/svelte/Layout.svelte

@@ -0,0 +1,34 @@
+<script>
+  import { onMount, onDestroy, getContext } from 'svelte';
+  import { createLayout } from '@toclocoinc/lattice-grid/modules/layout';
+  import { bindViewer, GRID_REGISTRY_KEY } from '@toclocoinc/lattice-grid/modules/svelte';
+
+  let { class: klass = '', style = '', id = undefined, ...props } = $props();
+
+  let el = $state(null);
+  let published = $state(0);
+  let binding = null;
+  const registry = getContext(GRID_REGISTRY_KEY) ?? null;
+  const unsubscribe = registry ? registry.subscribe(() => { published += 1; }) : null;
+
+  export function instance() { return binding ? binding.instance : null; }
+
+  onMount(() => {
+    binding = bindViewer({ viewer: 'layout', factory: createLayout, element: el, registry });
+    binding.sync(props);
+  });
+
+  onDestroy(() => {
+    if (unsubscribe) unsubscribe();
+    if (binding) binding.destroy();
+    binding = null;
+  });
+
+  $effect(() => {
+    void published;
+    const now = { ...props };
+    if (binding) binding.sync(now);
+  });
+</script>
+
+<div bind:this={el} class={klass} {style} {id}></div>

package/svelte/Router.svelte

@@ -0,0 +1,16 @@
+<script>
+  import { setContext, onDestroy } from 'svelte';
+  import { createDataRouter } from '@toclocoinc/lattice-grid/modules/data-router';
+  import { createRouterHandle, ROUTER_KEY } from '@toclocoinc/lattice-grid/modules/svelte';
+
+  let { config = {}, children } = $props();
+
+  const handle = createRouterHandle({ createDataRouter, config: () => config });
+  setContext(ROUTER_KEY, handle);
+
+  export function router() { return handle.router; }
+
+  onDestroy(() => handle.destroy());
+</script>
+
+{@render children?.()}

package/svelte/Tabs.svelte

@@ -0,0 +1,53 @@
+<script>
+  import { onMount, onDestroy, getContext } from 'svelte';
+  import { createTabs } from '@toclocoinc/lattice-grid/modules/tabs';
+  import { createGrid } from '@toclocoinc/lattice-grid';
+  import { bindTabs, snippetTabIds } from '@toclocoinc/lattice-grid/modules/svelte';
+
+  let {
+    class: klass = '', style = '', id = undefined, tabs = [], ...props
+  } = $props();
+
+  let el = $state(null);
+  let open = $state([]);
+  let holders = $state({});
+  let binding = null;
+
+  const contentIds = $derived(snippetTabIds(tabs, props));
+
+  export function instance() { return binding ? binding.instance : null; }
+
+  onMount(() => {
+    binding = bindTabs({
+      createTabs,
+      createGrid,
+      element: el,
+      onPanels: (ids) => { open = ids; },
+    });
+    binding.sync({ ...props, tabs, contentIds });
+  });
+
+  onDestroy(() => {
+    if (binding) binding.destroy({ ...props, tabs, contentIds });
+    binding = null;
+  });
+
+  $effect(() => {
+    const now = { ...props, tabs, contentIds };
+    if (binding) binding.sync(now);
+  });
+
+  $effect(() => {
+    for (const tabId of open) {
+      if (binding) binding.place(tabId, holders[tabId]);
+    }
+  });
+</script>
+
+<div bind:this={el} class={klass} {style} {id}></div>
+
+{#each open as tabId (tabId)}
+  <div bind:this={holders[tabId]} style="display: contents">
+    {@render props[tabId]()}
+  </div>
+{/each}