@inglorious/web 2.0.1 → 2.1.0

package/README.md

@@ -164,6 +164,77 @@ mount(store, renderApp, document.getElementById("root"))
 
 The router automatically intercepts clicks on local `<a>` tags and handles browser back/forward events, keeping your UI in sync with the URL.
 
+### 3. Programmatic Navigation
+
+To navigate from your JavaScript code, dispatch a `navigate` event.
+
+```javascript
+api.notify("navigate", "/users/456")
+
+// Or navigate back in history
+api.notify("navigate", -1)
+```
+
+---
+
+## Table
+
+`@inglorious/web` includes a `table` type for displaying data in a tabular format. It's designed to be flexible and customizable.
+
+### 1. Add the `table` type
+
+To use it, import the `table` type and its CSS, then create an entity for your table. You must define the `data` to be displayed and can optionally provide `columns` definitions.
+
+```javascript
+// In your entity definition file
+import { table } from "@inglorious/web"
+
+// Import base styles and a theme. You can create your own theme.
+import "@inglorious/web/table/base.css"
+import "@inglorious/web/table/theme.css"
+
+export default {
+  ...table,
+  data: [
+    { id: 1, name: "Product A", price: 100 },
+    { id: 2, name: "Product B", price: 150 },
+  ],
+  columns: [
+    { id: "id", label: "ID" },
+    { id: "name", label: "Product Name" },
+    { id: "price", label: "Price" },
+  ],
+}
+```
+
+### 2. Custom Rendering
+
+You can customize how data is rendered in the table cells by overriding the `renderValue` method. This is useful for formatting values or displaying custom content.
+
+The example below from `examples/apps/web-table/src/product-table/product-table.js` shows how to format values based on a `formatter` property in the column definition.
+
+```javascript
+import { table } from "@inglorious/web"
+import { format } from "date-fns"
+
+const formatters = {
+  isAvailable: (val) => (val ? "✔️" : "❌"),
+  createdAt: (val) => format(val, "dd/MM/yyyy HH:mm"),
+}
+
+export const productTable = {
+  ...table,
+
+  renderValue(value, column) {
+    return formatters[column.formatter]?.(value) ?? value
+  },
+}
+```
+
+### 3. Theming
+
+The table comes with a base stylesheet (`@inglorious/web/table/base.css`) and a default theme (`@inglorious/web/table/theme.css`). You can create your own theme by creating a new CSS file and styling the table elements to match your application's design.
+
 ---
 
 ## Forms
@@ -315,17 +386,6 @@ const store = createStore({ types, entities })
 
 See `src/list.js` in the package for the implementation details and the `examples/apps/web-list` demo for a complete working example. In the demo the `productList` type extends the `list` type and provides `renderItem(item, index)` to render each visible item — see `examples/apps/web-list/src/product-list/product-list.js`.
 
-### 3. Programmatic Navigation
-
-To navigate from your JavaScript code, dispatch a `navigate` event.
-
-```javascript
-api.notify("navigate", "/users/456")
-
-// Or navigate back in history
-api.notify("navigate", -1)
-```
-
 ## API Reference
 
 **`mount(store, renderFn, element)`**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/web",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "A new web framework that leverages the power of the Inglorious Store combined with the performance and simplicity of lit-html.",
   "author": "IceOnFire <antony.mistretta@gmail.com> (https://ingloriouscoderz.it)",
   "license": "MIT",
@@ -25,7 +25,9 @@
     ".": {
       "types": "./types/index.d.ts",
       "import": "./src/index.js"
-    }
+    },
+    "./table/base.css": "./src/table/base.css",
+    "./table/theme.css": "./src/table/theme.css"
   },
   "files": [
     "src",

package/src/index.js

@@ -2,10 +2,12 @@ export { form, getFieldError, getFieldValue, isFieldTouched } from "./form.js"
 export { list } from "./list.js"
 export { mount } from "./mount.js"
 export { router } from "./router.js"
-export { getPaginationInfo, getRows, getSortDirection, table } from "./table.js"
+export { table } from "./table.js"
 export { createStore } from "@inglorious/store"
 export { createDevtools } from "@inglorious/store/client/devtools.js"
 export { createSelector } from "@inglorious/store/select.js"
 export { html, render, svg } from "lit-html"
+export { choose } from "lit-html/directives/choose.js"
 export { classMap } from "lit-html/directives/class-map.js"
+export { ref } from "lit-html/directives/ref.js"
 export { repeat } from "lit-html/directives/repeat.js"

package/src/list.js

@@ -37,11 +37,15 @@ export const list = {
     entity.visibleRange = { start, end }
   },
 
-  measureHeight(entity, containerEl) {
+  mount(entity, containerEl) {
     const firstItem = containerEl.querySelector("[data-index]")
     if (!firstItem) return
 
     entity.itemHeight = firstItem.offsetHeight
+    entity.visibleRange = {
+      start: 0,
+      end: Math.ceil(entity.viewportHeight / entity.itemHeight),
+    }
   },
 
   render(entity, api) {
@@ -70,7 +74,7 @@ export const list = {
         ${ref((el) => {
           if (el && !itemHeight) {
             queueMicrotask(() => {
-              api.notify(`#${entity.id}:measureHeight`, el)
+              api.notify(`#${entity.id}:mount`, el)
             })
           }
         })}

package/src/table/base.css

@@ -0,0 +1,34 @@
+.iw-table {
+  user-select: none;
+
+  .iw-table-header {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .iw-table-header-row {
+    display: flex;
+  }
+
+  .iw-table-header-column {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .iw-table-filter-input,
+  .iw-table-filter-select {
+    width: 100%;
+  }
+
+  .iw-table-searchbar {
+    width: 100%;
+  }
+
+  .iw-table-row {
+    display: flex;
+  }
+
+  .iw-table-footer-row {
+    display: flex;
+  }
+}

package/src/table/filters/date.js

@@ -0,0 +1,42 @@
+import { html } from "@inglorious/web"
+
+const INPUT_TYPE = {
+  date: "date",
+  time: "time",
+  datetime: "datetime-local",
+}
+
+export const dateFilter = {
+  render(entity, column, api) {
+    const filter = entity.filters[column.id] ?? {}
+
+    return html`<input
+        name=${`${column.id}Min`}
+        type=${INPUT_TYPE[column.filter.type]}
+        value=${entity.filters[column.id]}
+        @input=${(event) => {
+          const value = event.target.value
+          const formattedValue = value ? new Date(value).getTime() : null
+
+          api.notify(`#${entity.id}:filterChange`, {
+            columnId: column.id,
+            value: { ...filter, min: formattedValue },
+          })
+        }}
+      />
+      <input
+        name=${`${column.id}Max`}
+        type=${INPUT_TYPE[column.filter.type]}
+        value=${entity.filters[column.id]}
+        @input=${(event) => {
+          const value = event.target.value
+          const formattedValue = value ? new Date(value).getTime() : null
+
+          api.notify(`#${entity.id}:filterChange`, {
+            columnId: column.id,
+            value: { ...filter, max: formattedValue },
+          })
+        }}
+      />`
+  },
+}

package/src/table/filters/number.js

@@ -0,0 +1,22 @@
+import { html } from "@inglorious/web"
+
+export const numberFilter = {
+  render(entity, column, api) {
+    return html`<input
+      name=${column.id}
+      type="number"
+      placeholder=${column.filter.placeholder ?? "="}
+      value=${entity.filters[column.id]}
+      @input=${(event) => {
+        const value = event.target.value
+        const formattedValue = value ? Number(value) : null
+
+        api.notify(`#${entity.id}:filterChange`, {
+          columnId: column.id,
+          value: formattedValue,
+        })
+      }}
+      class="iw-table-cell-number"
+    />`
+  },
+}

package/src/table/filters/range.js

@@ -0,0 +1,42 @@
+import { html } from "@inglorious/web"
+
+export const rangeFilter = {
+  render(entity, column, api) {
+    const filter = entity.filters[column.id] ?? {}
+
+    return html`<div class="row">
+      <input
+        name=${`${column.id}Min`}
+        type="number"
+        placeholder=${column.filter.placeholder ?? "≥"}
+        value=${filter.min}
+        @input=${(event) => {
+          const value = event.target.value
+          const formattedValue = value ? Number(value) : null
+
+          api.notify(`#${entity.id}:filterChange`, {
+            columnId: column.id,
+            value: { ...filter, min: formattedValue },
+          })
+        }}
+        class="iw-table-cell-number"
+      />
+      <input
+        name=${`${column.id}Max`}
+        type="number"
+        placeholder=${column.filter.placeholder ?? "≤"}
+        value=${filter.max}
+        @input=${(event) => {
+          const value = event.target.value
+          const formattedValue = value ? Number(value) : null
+
+          api.notify(`#${entity.id}:filterChange`, {
+            columnId: column.id,
+            value: { ...filter, max: formattedValue },
+          })
+        }}
+        class="iw-table-cell-number"
+      />
+    </div>`
+  },
+}

package/src/table/filters/select.js

@@ -0,0 +1,34 @@
+import { html } from "@inglorious/web"
+
+export const selectFilter = {
+  render(entity, column, api) {
+    return html`<select
+      name=${column.id}
+      ?multiple=${column.filter.isMultiple}
+      autocomplete="off"
+      value=${entity.filters[column.id]}
+      @change=${(event) => {
+        const value = event.target.value
+        const formattedValue = value ? format(value, column.type) : null
+
+        api.notify(`#${entity.id}:filterChange`, {
+          columnId: column.id,
+          value: formattedValue,
+        })
+      }}
+    >
+      ${column.filter.options.map(
+        (option) => html`<option value=${option}>${option}</option>`,
+      )}
+    </select>`
+  },
+}
+
+function format(value, type) {
+  if (type === "number") return Number(value)
+  if (type === "boolean")
+    return value === "true" ? true : value === "false" ? false : null
+  if (["date", "time", "datetime"].includes(type))
+    return new Date(value).getTime()
+  return value
+}

package/src/table/filters/text.js

@@ -0,0 +1,22 @@
+import { html } from "@inglorious/web"
+
+export const textFilter = {
+  render(entity, column, api) {
+    return html`<input
+      name=${column.id}
+      type="text"
+      placeholder=${column.filter.placeholder ?? "Contains..."}
+      autocomplete="off"
+      value=${entity.filters[column.id]}
+      @input=${(event) => {
+        const value = event.target.value
+        const formattedValue = value || null
+
+        api.notify(`#${entity.id}:filterChange`, {
+          columnId: column.id,
+          value: formattedValue,
+        })
+      }}
+    />`
+  },
+}

package/src/table/filters.js

@@ -0,0 +1,24 @@
+import { choose, html } from "@inglorious/web"
+
+import { dateFilter } from "./filters/date"
+import { numberFilter } from "./filters/number"
+import { rangeFilter } from "./filters/range"
+import { selectFilter } from "./filters/select"
+import { textFilter } from "./filters/text"
+
+export const filters = {
+  render(entity, column, api) {
+    return html`${choose(
+      column.filter.type,
+      [
+        ["number", () => numberFilter.render(entity, column, api)],
+        ["range", () => rangeFilter.render(entity, column, api)],
+        ["select", () => selectFilter.render(entity, column, api)],
+        ["date", () => dateFilter.render(entity, column, api)],
+        ["time", () => dateFilter.render(entity, column, api)],
+        ["datetime", () => dateFilter.render(entity, column, api)],
+      ],
+      () => textFilter.render(entity, column, api),
+    )}`
+  },
+}