@sincpro/web-ui 1.5.0 → 1.7.0

package/dist/tokens.css

@@ -1237,3 +1237,106 @@
   writing-mode: vertical-rl;
   transform: rotate(180deg);
 }
+
+/* ==================================================================== *
+ *  RICH TEXT — the HTML of a note, a description, an email body.
+ *
+ *  The SAME rules for the editor (`RichTextInput`, Tiptap) and for reading it
+ *  (`RichTextValue`): what is written is what is read, to the line. HTML that
+ *  arrives from an engine (Odoo `html` fields) has no classes, so the look is
+ *  given by the element — and only with tokens, so it follows the theme.
+ * ==================================================================== */
+@utility rich-text {
+  font-size: var(--text-meta);
+  line-height: var(--text-meta--line-height);
+  color: var(--color-ink);
+  overflow-wrap: anywhere;
+  & > * + * {
+    margin-top: calc(var(--spacing) * 2);
+  }
+  & h2 {
+    font-size: var(--text-lead);
+    line-height: var(--text-lead--line-height);
+    font-weight: 600;
+  }
+  & h3 {
+    font-size: var(--text-body);
+    line-height: var(--text-body--line-height);
+    font-weight: 600;
+  }
+  & ul {
+    list-style: disc;
+    padding-left: calc(var(--spacing) * 5);
+  }
+  & ol {
+    list-style: decimal;
+    padding-left: calc(var(--spacing) * 5);
+  }
+  & li > p {
+    margin: 0;
+  }
+  & blockquote {
+    border-left: calc(var(--spacing) * 0.5) solid var(--color-line-strong);
+    padding-left: calc(var(--spacing) * 3);
+    color: var(--color-muted);
+  }
+  & a {
+    color: var(--color-primary);
+    text-decoration: underline;
+    text-underline-offset: calc(var(--spacing) * 0.5);
+  }
+  & code {
+    font-family: var(--font-mono);
+    background: color-mix(in oklab, var(--color-ink) 6%, transparent);
+    border-radius: var(--radius-mark);
+    padding: 0 calc(var(--spacing) * 1);
+  }
+  & pre {
+    font-family: var(--font-mono);
+    background: color-mix(in oklab, var(--color-ink) 6%, transparent);
+    border-radius: var(--radius-control);
+    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
+    overflow-x: auto;
+  }
+  & pre code {
+    background: none;
+    padding: 0;
+  }
+  & hr {
+    border: none;
+    border-top: calc(var(--spacing) * 0.25) solid var(--color-line);
+  }
+  & table {
+    border-collapse: collapse;
+    width: 100%;
+  }
+  & th,
+  & td {
+    border: calc(var(--spacing) * 0.25) solid var(--color-line-strong);
+    padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2);
+    text-align: left;
+    vertical-align: top;
+  }
+  & th {
+    font-weight: 600;
+    background: var(--color-ground);
+  }
+  /* A person named in the text: the same tint as a link, so it reads as «someone», and a
+     box so it is one thing that is deleted at once. */
+  & [data-type="mention"] {
+    color: var(--color-primary);
+    background: color-mix(in oklab, var(--color-primary) 10%, transparent);
+    border-radius: var(--radius-mark);
+    padding: 0 calc(var(--spacing) * 0.5);
+  }
+  & p.is-editor-empty:first-child::before {
+    content: attr(data-placeholder);
+    color: var(--color-muted);
+    float: left;
+    height: 0;
+    pointer-events: none;
+  }
+  & .selectedCell {
+    background: color-mix(in oklab, var(--color-primary) 10%, transparent);
+  }
+}

package/dist/views/list/List.d.ts

@@ -5,7 +5,7 @@ import type { ViewIcon } from "../../components/listing/ViewSwitcher.js";
 import type { Surface } from "../../foundations/types.js";
 import type { DataColumn, DataTableCreate } from "../../primitives/table/DataTable.js";
 import type { RowAction } from "../../primitives/table/RowActions.js";
-import type { SortState } from "../../primitives/table/Table.js";
+import type { SortState } from "../../primitives/table/sorting.js";
 import { type CardWays, type ListCalendar, type ListCrumb, type ListEmpty, type ListGantt, type ListGroup, type ListPivot, type ListPresent, type ListReport, type ListSet, type ListSheet, type ListTimeline, type RowOf } from "./types.js";
 import type { ReactNode } from "react";
 type BarProps = {
@@ -97,9 +97,10 @@ export type ListProps<T extends object> = {
             onSelect: () => void;
         };
     };
-    /** El orden, que también es del conjunto. */
-    sort?: SortState | null;
-    onSortChange?: (next: SortState | null) => void;
+    /** El orden, que también es del conjunto: una lista de criterios, el primero manda y los
+     *  demás desempatan. Vacío es «como llegaron». */
+    sort?: readonly SortState[];
+    onSortChange?: (next: SortState[]) => void;
     /** Por qué campos se puede ordenar en las caras que NO tienen encabezados
      *  donde hacer clic. */
     sortable?: readonly SortField<T>[];

package/dist/views/list/ListView.js

@@ -147,7 +147,7 @@ export function ListView({ items, keyOf, identity, crumbs, embedded = false, sur
     const sortMenu = sortable === undefined ||
         sortable.length === 0 ||
         declaredReport ||
-        present === "pivot" ? null : (_jsx(SortMenu, { fields: sortable, sort: sort ?? null, onSortChange: (next) => onSortChange?.(next), ...(surface === undefined ? {} : { surface }) }));
+        present === "pivot" ? null : (_jsx(SortMenu, { fields: sortable, sort: sort ?? [], onSortChange: (next) => onSortChange?.(next), ...(surface === undefined ? {} : { surface }) }));
     const rightViews = views ?? switcher;
     const viewsSlot = columnsMenu === null && sortMenu === null && rightViews === undefined ? undefined : (_jsxs(_Fragment, { children: [sortMenu, columnsMenu, rightViews] }));
     /* Embedded, the line is drawn only if it has something to OFFER: a count alone repeats
@@ -202,7 +202,7 @@ export function ListView({ items, keyOf, identity, crumbs, embedded = false, sur
        veces no rompe nada, pero es trabajo al pedo sobre cada render. */
     const ordered = useMemo(() => present === "table" || sortable === undefined
         ? items
-        : sortItems(items, sortable, sort ?? null), [items, present, sortable, sort]);
+        : sortItems(items, sortable, sort), [items, present, sortable, sort]);
     /**
      * La grilla que hay que dibujar: la que le pasaron plegada, o la que se arma
      * con las filas en la mano.

package/dist/views/list/types.d.ts

@@ -14,7 +14,7 @@ import type { DataColumn, DataTableCreate } from "../../primitives/table/DataTab
 import type { ReportColumn, ReportRow } from "../../primitives/table/ReportTable.js";
 import type { RowAction } from "../../primitives/table/RowActions.js";
 import type { SheetColumn } from "../../primitives/table/SheetTable.js";
-import type { SortState } from "../../primitives/table/Table.js";
+import type { SortState } from "../../primitives/table/sorting.js";
 import type { LucideIcon } from "lucide-react";
 import type { ReactNode } from "react";
 /**
@@ -276,11 +276,11 @@ export type ListViewProps<T extends object> = {
      *  Owned by the view when omitted — catalog filters must not reset them. */
     visibleColumnIds?: readonly string[];
     onVisibleColumnIdsChange?: (ids: readonly string[]) => void;
-    /** The sorting of the table. It lives outside because it belongs to the SET
-     *  and not to the presentation: switching from table to rows has no reason to
-     *  lose it. */
-    sort?: SortState | null;
-    onSortChange?: (next: SortState | null) => void;
+    /** The order of the set, outermost first: «by date, then by customer». It lives outside
+     *  because it belongs to the SET and not to the presentation: switching from table to
+     *  rows has no reason to lose it. Empty or absent is «as they came». */
+    sort?: readonly SortState[];
+    onSortChange?: (next: SortState[]) => void;
     /**
      * Por qué campos se puede ordenar, para las presentaciones que NO tienen
      * encabezados donde hacer clic.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sincpro/web-ui",
-  "version": "1.5.0",
+  "version": "1.7.0",
   "description": "An enterprise web design system for business software — ERPs, back offices, management tools — in React and Tailwind: tokens, primitives, components and the two views every management screen is made of.",
   "type": "module",
   "main": "./dist/index.js",
@@ -56,7 +56,15 @@
     "@fullcalendar/react": "7.1.3",
     "@internationalized/date": "^3.12.4",
     "@svar-ui/react-gantt": "2.8.2",
+    "@tiptap/extension-mention": "^3.32.2",
+    "@tiptap/extension-table": "^3.32.2",
+    "@tiptap/extensions": "^3.32.2",
+    "@tiptap/pm": "^3.32.2",
+    "@tiptap/react": "^3.32.2",
+    "@tiptap/starter-kit": "^3.32.2",
+    "@tiptap/suggestion": "^3.32.2",
     "@uiw/react-codemirror": "^4.25.11",
+    "dompurify": "^3.4.17",
     "lucide-react": "^1.45.0",
     "react-aria": "^3.53.1",
     "react-aria-components": "^1.22.1",