twico-ui 1.19.0 → 1.20.0

package/dist/index.d.cts

@@ -2046,6 +2046,13 @@ interface DatatableColumn<T = any> {
   headerName?: string;
   /** Data type. "actions" renders per-row action buttons via getActions. @default "string" */
   type?: "string" | "number" | "actions";
+  /** Filter operators + value comparison for this column, **decoupled from the edit `type`** (#270).
+   *  A `"number"` column edits by coercing its commit with `Number()`, which would wipe a custom value
+   *  (e.g. a value+unit measurement edited via `renderEditCell`) — so such a column must edit as
+   *  `type: "string"`, yet may still want **numeric** filter operators (`=` `≠` `>` `≥` `<` `≤`).
+   *  Set `filterType: "number"` to offer them (provide a `valueGetter` returning the numeric value so
+   *  the comparison is numeric). Falls back to `type`. Sorting still uses `type`. @default type */
+  filterType?: "string" | "number";
   /** Column width: a px number, or `"auto"` to size to the header's intrinsic width (chrome + label) so a short column fits without truncating or wasting the 160px default. @default 160 (120 for actions) */
   width?: number | "auto";
   /** Lower bound (px) for the resolved width, incl. `"auto"` and user resizes. */

package/dist/index.d.ts

@@ -2046,6 +2046,13 @@ interface DatatableColumn<T = any> {
   headerName?: string;
   /** Data type. "actions" renders per-row action buttons via getActions. @default "string" */
   type?: "string" | "number" | "actions";
+  /** Filter operators + value comparison for this column, **decoupled from the edit `type`** (#270).
+   *  A `"number"` column edits by coercing its commit with `Number()`, which would wipe a custom value
+   *  (e.g. a value+unit measurement edited via `renderEditCell`) — so such a column must edit as
+   *  `type: "string"`, yet may still want **numeric** filter operators (`=` `≠` `>` `≥` `<` `≤`).
+   *  Set `filterType: "number"` to offer them (provide a `valueGetter` returning the numeric value so
+   *  the comparison is numeric). Falls back to `type`. Sorting still uses `type`. @default type */
+  filterType?: "string" | "number";
   /** Column width: a px number, or `"auto"` to size to the header's intrinsic width (chrome + label) so a short column fits without truncating or wasting the 160px default. @default 160 (120 for actions) */
   width?: number | "auto";
   /** Lower bound (px) for the resolved width, incl. `"auto"` and user resizes. */

package/dist/index.mjs

@@ -6748,6 +6748,7 @@ function Select({
         "data-disabled": o.disabled || void 0,
         "data-selected": isSel || void 0,
         "data-active": idx === active || void 0,
+        title: typeof o.label === "string" ? o.label : void 0,
         onMouseEnter: () => {
           if (!o.disabled) setActive(idx);
         },
@@ -8202,14 +8203,16 @@ var DT_CSS = `
 .twc-dt__resizer:focus-visible::after { background: var(--color-primary); }
 .twc-dt[data-resizing="true"] { cursor: col-resize; user-select: none; }
 
-/* Column reorder (drag) */
-.twc-dt__th-label[draggable="true"] { cursor: grab; }
+/* Column reorder (drag) \u2014 the grab affordance lives on the header grip only (#267, the column analog
+   of #263), not the whole header, so a plain hover to read/sort/open the \u22EE menu isn't shown as
+   draggable (the header stays a drag source for the mouse). */
 .twc-dt__th[data-dragging="true"] { opacity: 0.45; }
 .twc-dt__th[data-dropbefore="true"] .twc-dt__th-inner { box-shadow: inset 3px 0 0 var(--color-primary); }
 .twc-dt__th[data-dropafter="true"] .twc-dt__th-inner { box-shadow: inset -3px 0 0 var(--color-primary); }
-.twc-dt__grip { display: inline-flex; color: var(--color-text-subtle); opacity: 0; margin-inline-end: -2px; transition: opacity var(--duration-fast); flex: none; }
+.twc-dt__grip { display: inline-flex; color: var(--color-text-subtle); opacity: 0; margin-inline-end: -2px; transition: opacity var(--duration-fast); flex: none; cursor: grab; }
 .twc-dt__grip svg { width: 13px; height: 13px; }
 .twc-dt__th:hover .twc-dt__grip { opacity: 0.5; }
+.twc-dt__grip:active, .twc-dt__th[data-dragging="true"] .twc-dt__grip { cursor: grabbing; }
 
 /* Summary / aggregation footer row */
 .twc-dt__table tfoot td { position: sticky; bottom: 0; z-index: 3; background: var(--color-surface-sunken);
@@ -8472,13 +8475,15 @@ th.twc-dt__rownum .twc-dt__th-inner { padding-inline: 8px; gap: 2px; justify-con
 .twc-dt__col-list { max-height: 230px; overflow-y: auto; }
 .twc-dt__col-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--radius-md); cursor: pointer; }
 .twc-dt__col-row:hover { background: var(--color-surface-sunken); }
-.twc-dt__col-row[draggable="true"] { cursor: grab; }
+/* #271 (columns-panel analog of #263/#267): grab lives on the grip only, not the whole row \u2014 the row
+   keeps its 'cursor: pointer' (toggles visibility) and stays a drag source for the mouse. */
 .twc-dt__col-row[data-dragging="true"] { opacity: 0.5; }
 .twc-dt__col-row[data-dropbefore="true"] { box-shadow: inset 0 3px 0 var(--color-primary); }
 .twc-dt__col-row[data-dropafter="true"] { box-shadow: inset 0 -3px 0 var(--color-primary); }
-.twc-dt__col-grip { display: inline-flex; color: var(--color-text-subtle); flex: none; opacity: 0.45; }
+.twc-dt__col-grip { display: inline-flex; color: var(--color-text-subtle); flex: none; opacity: 0.45; cursor: grab; }
 .twc-dt__col-row:hover .twc-dt__col-grip { opacity: 0.8; }
 .twc-dt__col-grip svg { width: 14px; height: 14px; }
+.twc-dt__col-grip:active, .twc-dt__col-row[data-dragging="true"] .twc-dt__col-grip { cursor: grabbing; }
 .twc-dt__col-name { flex: 1; font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .twc-dt__col-pins { display: inline-flex; gap: 2px; flex: none; }
 .twc-dt__col-pin { display: inline-grid; place-items: center; width: 24px; height: 24px; border: none; padding: 0; background: transparent; color: var(--color-text-subtle); cursor: pointer; border-radius: var(--radius-sm); transition: background-color var(--duration-fast), color var(--duration-fast); }
@@ -8616,6 +8621,11 @@ var NUM_OPS = [
 ];
 var opsFor = (type) => type === "number" ? NUM_OPS : STR_OPS;
 var isMultiOp = (op) => op === "isAnyOf";
+var filterTypeOf = (col) => {
+  const ft = col && col.filterType;
+  if (ft === "number" || ft === "string") return ft;
+  return col && col.type === "number" ? "number" : "string";
+};
 var getColVal = (col, row) => col && col.valueGetter ? col.valueGetter(row) : row == null ? void 0 : row[col && col.field];
 var diffValueNode = (col, v, row) => col.renderCell ? col.renderCell(v, row) : col.valueFormatter ? col.valueFormatter(v, row) : v == null ? "" : v;
 function renderDiffCell(col, val, row) {
@@ -8698,7 +8708,10 @@ function runDatatableQuery(rows, query, options = {}) {
   let out = Array.isArray(rows) ? rows : [];
   const quick = String(q.quickFilter || "").trim().toLowerCase();
   if (quick) out = out.filter((r2) => searchFields.some((f) => String(gv(f, r2) ?? "").toLowerCase().includes(quick)));
-  for (const f of q.filters || []) out = out.filter((r2) => testFilter(gv(f.field, r2), f.op, f.value, typeOf(f.field)));
+  for (const f of q.filters || []) {
+    const fc = cols.find((c) => c.field === f.field);
+    out = out.filter((r2) => testFilter(gv(f.field, r2), f.op, f.value, filterTypeOf(fc)));
+  }
   if (q.sort && q.sort.field) {
     const { field, dir } = q.sort, numeric = typeOf(field) === "number";
     out = [...out].sort((a, b) => {
@@ -9516,7 +9529,7 @@ function Datatable({
     for (const f of filters) {
       const col = colByField[f.field];
       if (!col) continue;
-      out = out.filter((r2) => testFilter(getColVal(col, r2), f.op, f.value, col.type));
+      out = out.filter((r2) => testFilter(getColVal(col, r2), f.op, f.value, filterTypeOf(col)));
     }
     if (sort) {
       const col = colByField[sort.field];
@@ -9834,7 +9847,7 @@ function Datatable({
   }
   function addFilter(field) {
     const col = colByField[field] || cols[0];
-    setFilters((f) => [...f, { id: Date.now() + Math.random(), field: col.field, op: opsFor(col.type)[0].value, value: "" }]);
+    setFilters((f) => [...f, { id: Date.now() + Math.random(), field: col.field, op: opsFor(filterTypeOf(col))[0].value, value: "" }]);
   }
   function setPin(field, side) {
     setPins((p) => {
@@ -11649,7 +11662,7 @@ function Datatable({
       ] }),
       filters.length === 0 ? /* @__PURE__ */ jsx("div", { className: "twc-dt__empty", style: { padding: "16px 12px" }, children: "No filters applied" }) : filters.map((f) => {
         const col = colByField[f.field] || cols[0];
-        const ops = opsFor(col.type);
+        const ops = opsFor(filterTypeOf(col));
         const op = ops.find((o) => o.value === f.op) || ops[0];
         return /* @__PURE__ */ jsxs("div", { className: "twc-dt__frow", children: [
           /* @__PURE__ */ jsx("div", { className: "twc-dt__f-col", children: /* @__PURE__ */ jsx(
@@ -11661,7 +11674,7 @@ function Datatable({
               options: filterableCols.map((c) => ({ value: c.field, label: c.headerName })),
               onChange: (v) => {
                 const nc = colByField[v];
-                setFilters((arr) => arr.map((x) => x.id === f.id ? { ...x, field: v, op: opsFor(nc.type)[0].value, value: "" } : x));
+                setFilters((arr) => arr.map((x) => x.id === f.id ? { ...x, field: v, op: opsFor(filterTypeOf(nc))[0].value, value: "" } : x));
               }
             }
           ) }),
@@ -11700,7 +11713,7 @@ function Datatable({
             Input,
             {
               size: "sm",
-              type: col.type === "number" ? "number" : "text",
+              type: filterTypeOf(col) === "number" ? "number" : "text",
               placeholder: "Value",
               value: f.value,
               onChange: (e) => setFilters((arr) => arr.map((x) => x.id === f.id ? { ...x, value: e.target.value } : x))