@polygrid/core 1.0.3-a → 1.0.3-b

package/dist/engine/const/pg-css-class.d.ts

@@ -21,5 +21,6 @@ export declare const PG_CSS_CLASS: {
     readonly footerViewport: "pg-footer-viewport";
     readonly footer: "pg-footer";
     readonly footerCell: "pg-footer-cell";
+    readonly noData: "pg-no-data";
 };
 //# sourceMappingURL=pg-css-class.d.ts.map

package/dist/engine/const/pg-css-class.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pg-css-class.d.ts","sourceRoot":"","sources":["../../../src/engine/const/pg-css-class.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;CAuBf,CAAC"}
+{"version":3,"file":"pg-css-class.d.ts","sourceRoot":"","sources":["../../../src/engine/const/pg-css-class.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;CAwBf,CAAC"}

package/dist/engine/const/pg-css-class.js

@@ -21,5 +21,6 @@ export const PG_CSS_CLASS = {
     footerViewport: "pg-footer-viewport",
     footer: "pg-footer",
     footerCell: "pg-footer-cell",
+    noData: "pg-no-data",
 };
 //# sourceMappingURL=pg-css-class.js.map

package/dist/engine/const/pg-css-class.js.map

@@ -1 +1 @@
-{"version":3,"file":"pg-css-class.js","sourceRoot":"","sources":["../../../src/engine/const/pg-css-class.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,QAAQ,EAAE,aAAa;IACvB,OAAO,EAAE,aAAa;IACtB,gBAAgB,EAAE,wBAAwB;IAC1C,YAAY,EAAE,mBAAmB;IACjC,YAAY,EAAE,mBAAmB;IACjC,mBAAmB,EAAE,2BAA2B;IAChD,mBAAmB,EAAE,2BAA2B;IAChD,OAAO,EAAE,aAAa;IACtB,YAAY,EAAE,mBAAmB;IACjC,YAAY,EAAE,mBAAmB;IACjC,cAAc,EAAE,oBAAoB;IACpC,MAAM,EAAE,WAAW;IACnB,UAAU,EAAE,gBAAgB;IAC5B,YAAY,EAAE,kBAAkB;IAChC,IAAI,EAAE,SAAS;IACf,GAAG,EAAE,QAAQ;IACb,IAAI,EAAE,SAAS;IACf,cAAc,EAAE,oBAAoB;IACpC,MAAM,EAAE,WAAW;IACnB,UAAU,EAAE,gBAAgB;CACpB,CAAC"}
+{"version":3,"file":"pg-css-class.js","sourceRoot":"","sources":["../../../src/engine/const/pg-css-class.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,QAAQ,EAAE,aAAa;IACvB,OAAO,EAAE,aAAa;IACtB,gBAAgB,EAAE,wBAAwB;IAC1C,YAAY,EAAE,mBAAmB;IACjC,YAAY,EAAE,mBAAmB;IACjC,mBAAmB,EAAE,2BAA2B;IAChD,mBAAmB,EAAE,2BAA2B;IAChD,OAAO,EAAE,aAAa;IACtB,YAAY,EAAE,mBAAmB;IACjC,YAAY,EAAE,mBAAmB;IACjC,cAAc,EAAE,oBAAoB;IACpC,MAAM,EAAE,WAAW;IACnB,UAAU,EAAE,gBAAgB;IAC5B,YAAY,EAAE,kBAAkB;IAChC,IAAI,EAAE,SAAS;IACf,GAAG,EAAE,QAAQ;IACb,IAAI,EAAE,SAAS;IACf,cAAc,EAAE,oBAAoB;IACpC,MAAM,EAAE,WAAW;IACnB,UAAU,EAAE,gBAAgB;IAC5B,MAAM,EAAE,YAAY;CACZ,CAAC"}

package/dist/engine/services/renderer/parts/body/body.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"body.d.ts","sourceRoot":"","sources":["../../../../../../src/engine/services/renderer/parts/body/body.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAG7D,wBAAgB,UAAU,CACxB,KAAK,EAAE,aAAa,EACpB,OAAO,EAAE,OAAO,GACf,cAAc,CAyBhB"}
+{"version":3,"file":"body.d.ts","sourceRoot":"","sources":["../../../../../../src/engine/services/renderer/parts/body/body.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAI7D,wBAAgB,UAAU,CACxB,KAAK,EAAE,aAAa,EACpB,OAAO,EAAE,OAAO,GACf,cAAc,CAgChB"}

package/dist/engine/services/renderer/parts/body/body.js

@@ -1,4 +1,5 @@
 import { PG_CSS_CLASS } from "../../../../const/pg-css-class";
+import { renderNoData } from "../no-data/no-data";
 import { renderRows } from "./row";
 export function renderBody(store, gridDom) {
     // viewport
@@ -8,17 +9,24 @@ export function renderBody(store, gridDom) {
     const bodyEl = document.createElement("div");
     bodyEl.className = PG_CSS_CLASS.body;
     bodyEl.innerHTML = "";
-    // render the rows
+    // if we have rows
     const rows = store.getState().rows;
-    const columns = store.getState().columns;
-    const rowHeight = store.getState().rowHeight;
-    const bodyRows = renderRows(rows, columns, rowHeight);
-    // append the rows to the body
-    const fragment = document.createDocumentFragment();
-    for (const row of bodyRows) {
-        fragment.appendChild(row);
+    if (rows.length > 0) {
+        // render the rows
+        const columns = store.getState().columns;
+        const rowHeight = store.getState().rowHeight;
+        const bodyRows = renderRows(rows, columns, rowHeight);
+        // append the rows to the body
+        const fragment = document.createDocumentFragment();
+        for (const row of bodyRows) {
+            fragment.appendChild(row);
+        }
+        bodyEl.appendChild(fragment);
+    }
+    else {
+        // render no data template
+        renderNoData(bodyEl);
     }
-    bodyEl.appendChild(fragment);
     bodyViewportEl.appendChild(bodyEl);
     gridDom.body = bodyEl;
     return bodyViewportEl;

package/dist/engine/services/renderer/parts/body/body.js.map

@@ -1 +1 @@
-{"version":3,"file":"body.js","sourceRoot":"","sources":["../../../../../../src/engine/services/renderer/parts/body/body.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAG9D,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,MAAM,UAAU,UAAU,CACxB,KAAoB,EACpB,OAAgB;IAEhB,WAAW;IACX,MAAM,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACrD,cAAc,CAAC,SAAS,GAAG,YAAY,CAAC,YAAY,CAAC;IACrD,gBAAgB;IAChB,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC7C,MAAM,CAAC,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC;IACrC,MAAM,CAAC,SAAS,GAAG,EAAE,CAAC;IACtB,kBAAkB;IAClB,MAAM,IAAI,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAC,IAAI,CAAC;IACnC,MAAM,OAAO,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAC,OAAO,CAAC;IACzC,MAAM,SAAS,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAC,SAAS,CAAC;IAC7C,MAAM,QAAQ,GAAG,UAAU,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,CAAC,CAAC;IACtD,8BAA8B;IAC9B,MAAM,QAAQ,GAAG,QAAQ,CAAC,sBAAsB,EAAE,CAAC;IACnD,KAAK,MAAM,GAAG,IAAI,QAAQ,EAAE,CAAC;QAC3B,QAAQ,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;IAC5B,CAAC;IACD,MAAM,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;IAE7B,cAAc,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAEnC,OAAO,CAAC,IAAI,GAAG,MAAM,CAAC;IAEtB,OAAO,cAAc,CAAC;AACxB,CAAC"}
+{"version":3,"file":"body.js","sourceRoot":"","sources":["../../../../../../src/engine/services/renderer/parts/body/body.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAG9D,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,MAAM,UAAU,UAAU,CACxB,KAAoB,EACpB,OAAgB;IAEhB,WAAW;IACX,MAAM,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACrD,cAAc,CAAC,SAAS,GAAG,YAAY,CAAC,YAAY,CAAC;IACrD,gBAAgB;IAChB,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC7C,MAAM,CAAC,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC;IACrC,MAAM,CAAC,SAAS,GAAG,EAAE,CAAC;IAEtB,kBAAkB;IAClB,MAAM,IAAI,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAC,IAAI,CAAC;IACnC,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;QACpB,kBAAkB;QAClB,MAAM,OAAO,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAC,OAAO,CAAC;QACzC,MAAM,SAAS,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAC,SAAS,CAAC;QAC7C,MAAM,QAAQ,GAAG,UAAU,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,CAAC,CAAC;QACtD,8BAA8B;QAC9B,MAAM,QAAQ,GAAG,QAAQ,CAAC,sBAAsB,EAAE,CAAC;QACnD,KAAK,MAAM,GAAG,IAAI,QAAQ,EAAE,CAAC;YAC3B,QAAQ,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;QAC5B,CAAC;QACD,MAAM,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;IAC/B,CAAC;SAAM,CAAC;QACN,0BAA0B;QAC1B,YAAY,CAAC,MAAM,CAAC,CAAC;IACvB,CAAC;IAED,cAAc,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAEnC,OAAO,CAAC,IAAI,GAAG,MAAM,CAAC;IAEtB,OAAO,cAAc,CAAC;AACxB,CAAC"}

package/dist/engine/services/renderer/parts/no-data/no-data.d.ts

@@ -0,0 +1,2 @@
+export declare function renderNoData(body: HTMLDivElement): void;
+//# sourceMappingURL=no-data.d.ts.map

package/dist/engine/services/renderer/parts/no-data/no-data.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"no-data.d.ts","sourceRoot":"","sources":["../../../../../../src/engine/services/renderer/parts/no-data/no-data.ts"],"names":[],"mappings":"AAEA,wBAAgB,YAAY,CAAC,IAAI,EAAE,cAAc,QAoBhD"}

package/dist/engine/services/renderer/parts/no-data/no-data.js

@@ -0,0 +1,18 @@
+import { PG_CSS_CLASS } from "../../../../const/pg-css-class";
+export function renderNoData(body) {
+    const noData = document.createElement("div");
+    noData.className = PG_CSS_CLASS.noData;
+    const icon = document.createElement("div");
+    icon.className = `${PG_CSS_CLASS.noData}__icon`;
+    const title = document.createElement("div");
+    title.className = `${PG_CSS_CLASS.noData}__title`;
+    title.textContent = "No data available";
+    const subtitle = document.createElement("div");
+    subtitle.className = `${PG_CSS_CLASS.noData}__subtitle`;
+    subtitle.textContent = "Try adjusting your filters or loading data.";
+    noData.appendChild(icon);
+    noData.appendChild(title);
+    noData.appendChild(subtitle);
+    body.appendChild(noData);
+}
+//# sourceMappingURL=no-data.js.map

package/dist/engine/services/renderer/parts/no-data/no-data.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"no-data.js","sourceRoot":"","sources":["../../../../../../src/engine/services/renderer/parts/no-data/no-data.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAE9D,MAAM,UAAU,YAAY,CAAC,IAAoB;IAC/C,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC7C,MAAM,CAAC,SAAS,GAAG,YAAY,CAAC,MAAM,CAAC;IAEvC,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC3C,IAAI,CAAC,SAAS,GAAG,GAAG,YAAY,CAAC,MAAM,QAAQ,CAAC;IAEhD,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5C,KAAK,CAAC,SAAS,GAAG,GAAG,YAAY,CAAC,MAAM,SAAS,CAAC;IAClD,KAAK,CAAC,WAAW,GAAG,mBAAmB,CAAC;IAExC,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC/C,QAAQ,CAAC,SAAS,GAAG,GAAG,YAAY,CAAC,MAAM,YAAY,CAAC;IACxD,QAAQ,CAAC,WAAW,GAAG,6CAA6C,CAAC;IAErE,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IACzB,MAAM,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IAC1B,MAAM,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;IAE7B,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;AAC3B,CAAC"}

package/dist/polygrid.css

@@ -174,3 +174,59 @@
 .pg-row.last-row {
   border-bottom: 1px solid #d0d0d0;
 }
+
+.pg-no-data {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  height: 100%;
+  width: 100%;
+
+  color: #666;
+  font-family: sans-serif;
+  text-align: center;
+
+  opacity: 0.8;
+  pointer-events: none; /* ensures no interference with scrolling */
+}
+
+.pg-no-data__icon {
+  width: 48px;
+  height: 48px;
+  margin-bottom: 12px;
+
+  background: #ddd;
+  border-radius: 50%;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  /* simple placeholder icon */
+  position: relative;
+}
+
+.pg-no-data__icon::before {
+  content: "";
+  width: 24px;
+  height: 24px;
+  border: 3px solid #bbb;
+  border-radius: 50%;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  transform: rotate(45deg);
+  display: block;
+}
+
+.pg-no-data__title {
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+
+.pg-no-data__subtitle {
+  font-size: 13px;
+  color: #999;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polygrid/core",
-  "version": "1.0.3a",
+  "version": "1.0.3-b",
   "description": "",
   "type": "module",
   "main": "./dist/index.js",