photon-grid-vue 1.0.0

package/README.md

@@ -0,0 +1,61 @@
+# photon-grid-vue
+
+Vue 3 wrapper for [Photon Grid](https://github.com/abdulwahid-csit/photon-grid) — an
+enterprise-grade, framework-agnostic TypeScript data grid.
+
+## Install
+
+```bash
+npm install photon-grid-vue photon-grid-core vue
+```
+
+`vue` and `photon-grid-core` are peer dependencies.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { PhotonGrid } from 'photon-grid-vue';
+import type { ColumnDef, GridApi } from 'photon-grid-vue';
+import 'photon-grid-core/styles/photon-grid.css';
+
+const columns: ColumnDef[] = [
+  { colId: 'name', field: 'name', header: 'Name', type: 'string' },
+  { colId: 'age', field: 'age', header: 'Age', type: 'number' },
+];
+const rows = [{ name: 'Ada', age: 36 }, { name: 'Alan', age: 41 }];
+
+function onReady(api: GridApi) {
+  console.log('rows:', api.getVisibleRows().length);
+}
+</script>
+
+<template>
+  <PhotonGrid
+    :columns="columns"
+    :dataSet="rows"
+    :options="{ theme: 'light' }"
+    @gridReady="onReady"
+    @rowClicked="(e) => console.log(e)"
+  />
+</template>
+```
+
+## Props
+
+| Prop      | Type                        | Description                          |
+| --------- | --------------------------- | ------------------------------------ |
+| `columns` | `ColumnDef[]`               | Column definitions.                  |
+| `dataSet` | `Record<string, unknown>[]` | Row data.                            |
+| `options` | `Partial<GridOptions>`      | Theme, selection, and feature flags. |
+
+## Events
+
+`gridReady`, `dataChanged`, `rowClicked`, `rowDoubleClicked`, `rowSelected`,
+`cellClicked`, `cellDoubleClicked`, `cellValueChanged`, `cellSelectionChanged`,
+`columnResized`, `columnMoved`, `sortChanged`, `filterChanged`, `pageChanged`,
+`columnsStateChanged`, `themeChanged`, `exportComplete`.
+
+## License
+
+MIT

package/index.cjs

@@ -0,0 +1 @@
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});let e=require("vue"),t=require("photon-grid-core");var n=[[t.GridEventType.DATA_CHANGED,`dataChanged`],[t.GridEventType.ROW_CLICKED,`rowClicked`],[t.GridEventType.ROW_DOUBLE_CLICKED,`rowDoubleClicked`],[t.GridEventType.ROW_SELECTED,`rowSelected`],[t.GridEventType.CELL_CLICKED,`cellClicked`],[t.GridEventType.CELL_DOUBLE_CLICKED,`cellDoubleClicked`],[t.GridEventType.CELL_VALUE_CHANGED,`cellValueChanged`],[t.GridEventType.CELL_SELECTION_CHANGED,`cellSelectionChanged`],[t.GridEventType.COLUMN_RESIZED,`columnResized`],[t.GridEventType.COLUMN_MOVED,`columnMoved`],[t.GridEventType.SORT_CHANGED,`sortChanged`],[t.GridEventType.FILTER_CHANGED,`filterChanged`],[t.GridEventType.PAGE_CHANGED,`pageChanged`],[t.GridEventType.COLUMNS_STATE_CHANGED,`columnsStateChanged`],[t.GridEventType.THEME_CHANGED,`themeChanged`],[t.GridEventType.EXPORT_COMPLETE,`exportComplete`]],r=(0,e.defineComponent)({name:`PhotonGrid`,props:{columns:{type:Array,default:()=>[]},dataSet:{type:Array,default:()=>[]},options:{type:Object,default:()=>({})}},emits:[`gridReady`,`dataChanged`,`rowClicked`,`rowDoubleClicked`,`rowSelected`,`cellClicked`,`cellDoubleClicked`,`cellValueChanged`,`cellSelectionChanged`,`columnResized`,`columnMoved`,`sortChanged`,`filterChanged`,`pageChanged`,`columnsStateChanged`,`themeChanged`,`exportComplete`],setup(r,{emit:i}){let a=(0,e.ref)(null),o=(0,e.shallowRef)(null),s=[],c=()=>{for(let e of s)e();s=[],o.value?.destroy(),o.value=null},l=()=>{if(!a.value)return;let e={...r.options??{},columns:r.columns??[],data:r.dataSet??[]},c=new t.GridCore(a.value,e);o.value=c;let l=i;for(let[e,t]of n)s.push(c.api.on(e,e=>l(t,e)));l(`gridReady`,c.api)};return(0,e.onMounted)(l),(0,e.onBeforeUnmount)(c),(0,e.watch)(()=>[r.columns,r.dataSet,r.options],()=>{c(),l()}),()=>(0,e.h)(`div`,{ref:a,class:`photon-grid__host`})}});exports.PhotonGrid=r,exports.default=r;

package/index.d.ts

@@ -0,0 +1,2 @@
+export { PhotonGrid, default } from './photon-grid';
+export type * from 'photon-grid-core';

package/index.js

@@ -0,0 +1,85 @@
+import { defineComponent as e, h as t, onBeforeUnmount as n, onMounted as r, ref as i, shallowRef as a, watch as o } from "vue";
+import { GridCore as s, GridEventType as c } from "photon-grid-core";
+//#region src/photon-grid.ts
+var l = [
+	[c.DATA_CHANGED, "dataChanged"],
+	[c.ROW_CLICKED, "rowClicked"],
+	[c.ROW_DOUBLE_CLICKED, "rowDoubleClicked"],
+	[c.ROW_SELECTED, "rowSelected"],
+	[c.CELL_CLICKED, "cellClicked"],
+	[c.CELL_DOUBLE_CLICKED, "cellDoubleClicked"],
+	[c.CELL_VALUE_CHANGED, "cellValueChanged"],
+	[c.CELL_SELECTION_CHANGED, "cellSelectionChanged"],
+	[c.COLUMN_RESIZED, "columnResized"],
+	[c.COLUMN_MOVED, "columnMoved"],
+	[c.SORT_CHANGED, "sortChanged"],
+	[c.FILTER_CHANGED, "filterChanged"],
+	[c.PAGE_CHANGED, "pageChanged"],
+	[c.COLUMNS_STATE_CHANGED, "columnsStateChanged"],
+	[c.THEME_CHANGED, "themeChanged"],
+	[c.EXPORT_COMPLETE, "exportComplete"]
+], u = e({
+	name: "PhotonGrid",
+	props: {
+		columns: {
+			type: Array,
+			default: () => []
+		},
+		dataSet: {
+			type: Array,
+			default: () => []
+		},
+		options: {
+			type: Object,
+			default: () => ({})
+		}
+	},
+	emits: [
+		"gridReady",
+		"dataChanged",
+		"rowClicked",
+		"rowDoubleClicked",
+		"rowSelected",
+		"cellClicked",
+		"cellDoubleClicked",
+		"cellValueChanged",
+		"cellSelectionChanged",
+		"columnResized",
+		"columnMoved",
+		"sortChanged",
+		"filterChanged",
+		"pageChanged",
+		"columnsStateChanged",
+		"themeChanged",
+		"exportComplete"
+	],
+	setup(e, { emit: c }) {
+		let u = i(null), d = a(null), f = [], p = () => {
+			for (let e of f) e();
+			f = [], d.value?.destroy(), d.value = null;
+		}, m = () => {
+			if (!u.value) return;
+			let t = {
+				...e.options ?? {},
+				columns: e.columns ?? [],
+				data: e.dataSet ?? []
+			}, n = new s(u.value, t);
+			d.value = n;
+			let r = c;
+			for (let [e, t] of l) f.push(n.api.on(e, (e) => r(t, e)));
+			r("gridReady", n.api);
+		};
+		return r(m), n(p), o(() => [
+			e.columns,
+			e.dataSet,
+			e.options
+		], () => {
+			p(), m();
+		}), () => t("div", {
+			ref: u,
+			class: "photon-grid__host"
+		});
+	}
+});
+//#endregion
+export { u as PhotonGrid, u as default };

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "photon-grid-vue",
+  "version": "1.0.0",
+  "description": "Vue 3 wrapper for Photon Grid — an enterprise-grade, framework-agnostic TypeScript data grid.",
+  "author": "Abdul Wahid",
+  "license": "MIT",
+  "type": "module",
+  "main": "./index.cjs",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js",
+      "require": "./index.cjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "*"
+  ],
+  "sideEffects": false,
+  "peerDependencies": {
+    "photon-grid-core": "^1.0.0",
+    "vue": "^3.4.0"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "vue-grid",
+    "vue-data-grid",
+    "vue-table",
+    "datatable",
+    "data-grid",
+    "grid",
+    "table",
+    "virtualization",
+    "tree-grid",
+    "enterprise-grid",
+    "photon-grid",
+    "typescript"
+  ],
+  "homepage": "https://github.com/abdulwahid-csit/photon-grid#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/abdulwahid-csit/photon-grid.git"
+  },
+  "bugs": {
+    "url": "https://github.com/abdulwahid-csit/photon-grid/issues"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/photon-grid.d.ts

@@ -0,0 +1,72 @@
+import { PropType } from 'vue';
+import { ColumnDef, GridOptions } from 'photon-grid-core';
+/**
+ * Vue 3 wrapper around the framework-agnostic {@link GridCore}. Renders a single
+ * host element, instantiates the grid on mount, forwards the grid's typed events
+ * as Vue emits, and disposes everything on unmount. All business logic lives in
+ * Photon Core — this component only binds it to Vue's lifecycle.
+ *
+ * @example
+ * ```vue
+ * <PhotonGrid :columns="columns" :dataSet="rows" :options="{ theme: 'light' }"
+ *             @gridReady="onReady" @rowClicked="onRow" />
+ * ```
+ */
+export declare const PhotonGrid: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    /** Column definitions. */
+    columns: {
+        type: PropType<ColumnDef[]>;
+        default: () => never[];
+    };
+    /** Row data. */
+    dataSet: {
+        type: PropType<Record<string, unknown>[]>;
+        default: () => never[];
+    };
+    /** Additional grid options (theme, selection, features…). */
+    options: {
+        type: PropType<Partial<GridOptions>>;
+        default: () => {};
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("dataChanged" | "rowClicked" | "rowDoubleClicked" | "rowSelected" | "cellClicked" | "cellDoubleClicked" | "cellValueChanged" | "cellSelectionChanged" | "columnResized" | "columnMoved" | "sortChanged" | "filterChanged" | "pageChanged" | "columnsStateChanged" | "themeChanged" | "exportComplete" | "gridReady")[], "dataChanged" | "rowClicked" | "rowDoubleClicked" | "rowSelected" | "cellClicked" | "cellDoubleClicked" | "cellValueChanged" | "cellSelectionChanged" | "columnResized" | "columnMoved" | "sortChanged" | "filterChanged" | "pageChanged" | "columnsStateChanged" | "themeChanged" | "exportComplete" | "gridReady", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    /** Column definitions. */
+    columns: {
+        type: PropType<ColumnDef[]>;
+        default: () => never[];
+    };
+    /** Row data. */
+    dataSet: {
+        type: PropType<Record<string, unknown>[]>;
+        default: () => never[];
+    };
+    /** Additional grid options (theme, selection, features…). */
+    options: {
+        type: PropType<Partial<GridOptions>>;
+        default: () => {};
+    };
+}>> & Readonly<{
+    onDataChanged?: ((...args: any[]) => any) | undefined;
+    onRowClicked?: ((...args: any[]) => any) | undefined;
+    onRowDoubleClicked?: ((...args: any[]) => any) | undefined;
+    onRowSelected?: ((...args: any[]) => any) | undefined;
+    onCellClicked?: ((...args: any[]) => any) | undefined;
+    onCellDoubleClicked?: ((...args: any[]) => any) | undefined;
+    onCellValueChanged?: ((...args: any[]) => any) | undefined;
+    onCellSelectionChanged?: ((...args: any[]) => any) | undefined;
+    onColumnResized?: ((...args: any[]) => any) | undefined;
+    onColumnMoved?: ((...args: any[]) => any) | undefined;
+    onSortChanged?: ((...args: any[]) => any) | undefined;
+    onFilterChanged?: ((...args: any[]) => any) | undefined;
+    onPageChanged?: ((...args: any[]) => any) | undefined;
+    onColumnsStateChanged?: ((...args: any[]) => any) | undefined;
+    onThemeChanged?: ((...args: any[]) => any) | undefined;
+    onExportComplete?: ((...args: any[]) => any) | undefined;
+    onGridReady?: ((...args: any[]) => any) | undefined;
+}>, {
+    columns: ColumnDef[];
+    dataSet: Record<string, unknown>[];
+    options: Partial<GridOptions>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default PhotonGrid;