@inglorious/web 2.1.0 → 2.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/web",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "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",
@@ -38,13 +38,13 @@
   },
   "dependencies": {
     "lit-html": "^3.3.1",
-    "@inglorious/store": "7.1.0",
+    "@inglorious/store": "7.1.1",
     "@inglorious/utils": "3.7.0"
   },
   "devDependencies": {
     "prettier": "^3.6.2",
     "vite": "^7.1.3",
-    "@inglorious/eslint-config": "1.0.1"
+    "@inglorious/eslint-config": "1.1.0"
   },
   "engines": {
     "node": ">= 22"

package/src/index.js

@@ -11,3 +11,4 @@ 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"
+export { styleMap } from "lit-html/directives/style-map.js"

package/src/list.js

@@ -1,5 +1,6 @@
 import { html } from "lit-html"
 import { ref } from "lit-html/directives/ref.js"
+import { styleMap } from "lit-html/directives/style-map.js"
 
 const LIST_START = 0
 const PRETTY_INDEX = 1
@@ -69,7 +70,7 @@ export const list = {
 
     return html`
       <div
-        style="height: ${viewportHeight}px; overflow: auto"
+        style=${styleMap({ height: `${viewportHeight}px`, overflow: "auto" })}
         @scroll=${(e) => api.notify(`#${entity.id}:scroll`, e.target)}
         ${ref((el) => {
           if (el && !itemHeight) {
@@ -79,14 +80,23 @@ export const list = {
           }
         })}
       >
-        <div style="height: ${totalHeight}px; position: relative">
+        <div
+          style=${styleMap({
+            height: `${totalHeight}px`,
+            position: "relative",
+          })}
+        >
           ${visibleItems.map((item, idx) => {
             const absoluteIndex = visibleRange.start + idx
             const top = absoluteIndex * height
 
             return html`
               <div
-                style="position: absolute; top: ${top}px; width: 100%"
+                style=${styleMap({
+                  position: "absolute",
+                  top: `${top}px`,
+                  width: "100%",
+                })}
                 data-index=${absoluteIndex}
               >
                 ${type.renderItem(item, absoluteIndex, api)}

package/src/table/filters/range.js

@@ -4,8 +4,7 @@ export const rangeFilter = {
   render(entity, column, api) {
     const filter = entity.filters[column.id] ?? {}
 
-    return html`<div class="row">
-      <input
+    return html`<input
         name=${`${column.id}Min`}
         type="number"
         placeholder=${column.filter.placeholder ?? "≥"}
@@ -36,7 +35,6 @@ export const rangeFilter = {
           })
         }}
         class="iw-table-cell-number"
-      />
-    </div>`
+      />`
   },
 }

package/src/table/logic.js

@@ -292,8 +292,8 @@ function getDefaultColumnFilter(type) {
 }
 
 function getDefaultColumnWidth(filterType) {
-  if (filterType === "number") return 100
-  if (filterType === "range") return 200
+  if (filterType === "number") return 70
+  if (filterType === "range") return 100
   if (filterType === "select") return 70
   if (filterType === "date") return 120
   if (filterType === "time") return 120

package/src/table/rendering.js

@@ -1,4 +1,5 @@
 import { html } from "lit-html"
+import { classMap } from "lit-html/directives/class-map.js"
 import { ref } from "lit-html/directives/ref.js"
 
 import { filters } from "./filters"
@@ -99,11 +100,11 @@ export const rendering = {
 
     return html`<div
       @click=${() => api.notify(`#${entity.id}:rowToggle`, rowId)}
-      class="iw-table-row ${index % DIVISOR
-        ? "iw-table-row-even"
-        : "iw-table-row-odd"} ${entity.selection.includes(rowId)
-        ? "iw-table-row-selected"
-        : ""}"
+      class=${classMap({
+        "iw-table-row": true,
+        "iw-table-row-even": index % DIVISOR,
+        "iw-table-row-selected": entity.selection.includes(rowId),
+      })}
     >
       ${Object.values(row).map((value, index) =>
         type.renderCell(entity, value, index, api),
@@ -116,7 +117,12 @@ export const rendering = {
     const column = entity.columns[index]
 
     return html`<div
-      class=${`iw-table-cell ${column.type === "number" ? "iw-table-cell-number" : ""} ${column.type === "date" ? "iw-table-cell-date" : ""} ${column.type === "boolean" ? "iw-table-cell-boolean" : ""}`}
+      class=${classMap({
+        "iw-table-cell": true,
+        "iw-table-cell-number": column.type === "number",
+        "iw-table-cell-date": column.type === "date",
+        "iw-table-cell-boolean": column.type === "boolean",
+      })}
       style=${getColumnStyle(column)}
     >
       ${type.renderValue(cell, column, api)}
@@ -182,7 +188,7 @@ export const rendering = {
         min="1"
         max=${pagination.totalPages}
         value=${pagination.page + PRETTY_PAGE}
-        class=${`iw-table-page-input`}
+        class="iw-table-page-input"
         @input=${(event) =>
           api.notify(
             `#${entity.id}:pageChange`,