@svgrid/enterprise 3.1.7 → 3.1.9

package/dist/gantt/SvGridGantt.svelte

@@ -27,6 +27,7 @@
     portalToBody,
     popIn,
     createDismissableLayer,
+    getGridExtension,
     onScrollOutside,
     SvDrawer,
     SvForm,
@@ -161,7 +162,16 @@
   }
 
   // --- columns lookup + default title field ---
-  const fieldColumns = $derived(columns.filter((c) => typeof c.field === "string"));
+  // Columns declared by field type are filled in as the grid fills them
+  // (formatter, computed value), so the task table shows what the grid shows.
+  const fieldColumns = $derived.by(() => {
+    const own = columns.filter((c) => typeof c.field === "string");
+    const fill = getGridExtension()?.column;
+    if (!fill) return own;
+    type Def = Record<string, unknown>;
+    const defs = own as unknown as Def[];
+    return defs.map((c) => (c.fieldType ? fill(c, defs) : c)) as unknown as typeof own;
+  });
   const titleField = $derived(
     gantt.titleField ?? (fieldColumns[0]?.field as string | undefined),
   );
@@ -178,7 +188,11 @@
     getTitle: (r) => (titleField ? String(fieldValue(r, titleField) ?? "") : ""),
     getProgress: (r) =>
       progressOf[key(r)] ??
-      (gantt.progressField ? (fieldValue(r, gantt.progressField) as never) : undefined),
+      (pcfg.progressValue
+        ? (pcfg.progressValue(r) as never)
+        : gantt.progressField
+          ? (fieldValue(r, gantt.progressField) as never)
+          : undefined),
     getParent: (r) =>
       gantt.parentField
         ? (fieldValue(r, gantt.parentField) as string | null | undefined)
@@ -186,9 +200,10 @@
     getMilestone: (r) =>
       gantt.milestoneField ? !!fieldValue(r, gantt.milestoneField) : false,
     getColor: (r) =>
-      gantt.colorField
+      pcfg.colorOf?.(r) ??
+      (gantt.colorField
         ? ((fieldValue(r, gantt.colorField) as string | undefined) ?? gantt.color)
-        : gantt.color,
+        : gantt.color),
   }));
 
   const tasks = $derived(resolveTasks(data, spec, cal));
@@ -323,6 +338,9 @@
     (pct: number) => new Date(axis.start.getTime() + (pct / 100) * axis.totalMs),
   );
   const bodyH = $derived(Math.max(rowH, nodes.length * rowH));
+  // The chart fills the pane below the last row too: the weekend shading runs
+  // to the bottom, and a double-click there adds a task.
+  let axisH = $state(0);
 
   // Non-working columns, as day bands. Under a day-granular axis these are
   // whole days; a tick coarser than a day (week / month) is never wholly
@@ -419,6 +437,16 @@
       });
     };
     for (const d of gantt.dependencies ?? []) push(d);
+    // Predecessors listed on the task that waits for them.
+    const pf = pcfg.predecessorField;
+    if (pf) {
+      for (const row of data) {
+        const raw = fieldValue(row, pf);
+        const ids = Array.isArray(raw) ? raw : raw == null || raw === "" ? [] : [raw];
+        const to = key(row);
+        for (const from of ids) push({ id: `${String(from)}->${to}`, from: String(from), to });
+      }
+    }
     const f = gantt.dependencyField;
     if (f) {
       for (const row of data) {
@@ -780,7 +808,7 @@
     // The hover card describes the bar as it was grabbed; after a move it
     // would go on showing those dates until the pointer left the bar.
     clearTimeout(tipTimer);
-    tipBar = null;
+    tipKey = null;
     window.addEventListener("pointermove", onDragMove);
     window.addEventListener("pointerup", onDragEnd, { once: true });
     window.addEventListener("pointercancel", onDragCancel, { once: true });
@@ -1332,6 +1360,8 @@
     kind: "field" | "duration" | "progress" | "slack";
     field?: string;
     numeric?: boolean;
+    /** The column itself, so a cell reads its value and shows it as the grid does. */
+    def?: ColumnDef<TFeatures, TData>;
   };
   /** Two columns a consumer can name in `tableColumns` without defining them. */
   const BUILT_IN: Record<string, TableCol> = {
@@ -1346,9 +1376,10 @@
     const fromDef = (c: ColumnDef<TFeatures, TData>): TableCol => ({
       id: colId(c),
       label: typeof c.header === "string" ? c.header : ((c.field as string) ?? ""),
-      width: c.width ?? 140,
+      width: pcfg.tableColumnWidths?.[colId(c)] ?? c.width ?? 140,
       kind: "field",
       field: c.field as string | undefined,
+      def: c,
     });
     const want = gantt.tableColumns;
     if (!want) return fieldColumns.map(fromDef);
@@ -1397,7 +1428,9 @@
     if (tableWFitted || tableWTouched || gantt.tableWidth != null || viewportW <= 0) return;
     tableWFitted = true;
     const trailing = tableColsWidth - (tableCols[0]?.width ?? 0);
-    tableW = Math.max(180, trailing + 120, Math.min(tableW, Math.floor(viewportW * 0.4)));
+    // Never more than 60% of the container either: with many columns the
+    // trailing ones clip (the splitter shows them), the chart keeps its room.
+    tableW = Math.min(Math.floor(viewportW * 0.6), Math.max(180, trailing + 120, Math.min(tableW, Math.floor(viewportW * 0.4))));
   });
   const showTable = $derived(tableCols.length > 0 && tableW > 0);
 
@@ -1428,10 +1461,29 @@
       }
       return String(slackDays(cpm, n.task.key));
     }
-    if (col.kind === "field" && col.field) return fmt(fieldValue(n.task.row, col.field));
+    if (col.kind === "field" && col.field) return fieldText(col, n.task.row);
     return "";
   }
 
+  /**
+   * A field cell as the grid shows it: the column's computed value
+   * (`fieldFn`) through its `formatter` (a select's label, a person's name, a
+   * date in the column's format), else the plain value.
+   */
+  function fieldText(col: TableCol, row: TData): string {
+    const def = col.def as { fieldFn?: (r: TData) => unknown; formatter?: (c: { value: unknown; row: TData; column: unknown }) => unknown } | undefined;
+    const value = def?.fieldFn ? def.fieldFn(row) : fieldValue(row, col.field!);
+    if (def?.formatter) {
+      try {
+        return String(def.formatter({ value, row, column: { id: col.id, columnDef: def } }) ?? "");
+      } catch {
+        return fmt(value);
+      }
+    }
+    if (Array.isArray(value)) return value.map(fmt).join(", ");
+    return fmt(value);
+  }
+
   // --- splitter -------------------------------------------------------------
   let splitDrag: { startX: number; startW: number } | null = null;
   function startSplit(e: PointerEvent) {
@@ -1460,6 +1512,8 @@
   let scrollEl = $state<HTMLElement | null>(null);
   let scrollTop = $state(0);
   let viewportH = $state(0);
+  // Below viewportH, which it reads (see axisH above).
+  const fillH = $derived(Math.max(bodyH, viewportH - axisH - 1));
   function onScroll() {
     if (scrollEl) scrollTop = scrollEl.scrollTop;
   }
@@ -1573,22 +1627,25 @@
   const tooltipCfg = $derived(gantt.tooltip);
   const hasTooltip = $derived(!!tooltipCfg);
   const tooltipSnippet = $derived(typeof tooltipCfg === "function" ? tooltipCfg : undefined);
-  let tipBar = $state<Bar | null>(null);
+  // The hovered bar by key, read from the bars as drawn now: a bar object
+  // kept from the hover would show the dates it had then (mid-drag, say).
+  let tipKey = $state<string | null>(null);
+  const tipBar = $derived(tipKey ? (bars.find((b) => b.key === tipKey) ?? null) : null);
   let tipPos = $state({ x: 0, y: 0 });
   let tipTimer: ReturnType<typeof setTimeout> | undefined;
   function onBarEnter(e: MouseEvent, bar: Bar) {
-    if (!hasTooltip) return;
+    if (!hasTooltip || drag) return;
     clearTimeout(tipTimer);
     const target = e.currentTarget as HTMLElement;
     tipTimer = setTimeout(() => {
       const r = target.getBoundingClientRect();
       tipPos = { x: Math.round(r.left + r.width / 2), y: Math.round(r.top) };
-      tipBar = bar;
+      tipKey = bar.key;
     }, gantt.tooltipDelay ?? 400);
   }
   function onBarLeave() {
     clearTimeout(tipTimer);
-    tipBar = null;
+    tipKey = null;
   }
   $effect(() => () => clearTimeout(tipTimer));
 
@@ -1682,6 +1739,11 @@
       suppressClick = false;
       return;
     }
+    // The app opens tasks itself (a record view): that wins over the drawer.
+    if (pcfg.onTaskOpen) {
+      pcfg.onTaskOpen(bar.row);
+      return;
+    }
     if (!hasDrawer) return;
     const next: Record<string, unknown> = {
       __start: dayInput(bar.start),
@@ -1743,8 +1805,11 @@
   let menuPanel = $state<HTMLElement | null>(null);
   function openMenu(e: MouseEvent, bar: Bar) {
     const items: MenuItem[] = [];
-    if (hasDrawer) items.push({ label: "Edit", onSelect: () => openDrawer(bar) });
-    if (editable && gantt.onTaskAdd) {
+    if (pcfg.onTaskOpen) items.push({ label: "Open", onSelect: () => pcfg.onTaskOpen?.(bar.row) });
+    else if (hasDrawer) items.push({ label: "Edit", onSelect: () => openDrawer(bar) });
+    // A subtask needs a tree to hang in: without parentField it would be
+    // just another task.
+    if (editable && gantt.onTaskAdd && gantt.parentField) {
       items.push({
         label: "Add subtask",
         onSelect: () => gantt.onTaskAdd?.(bar.start, addDays(bar.start, 1), bar.key),
@@ -1937,6 +2002,8 @@
                         ></span>
                       </span>
                       <span class="sv-gantt-meter-pct">{Math.round(drawnSpan(node).progress)}%</span>
+                    {:else if ci === 0 && pcfg.onTaskOpen}
+                      <button type="button" class="sv-gantt-cell-text sv-gantt-open" title={`Open ${node.task.title}`} onclick={() => pcfg.onTaskOpen?.(node.task.row)}>{cellText(col, node)}</button>
                     {:else}
                       <span class="sv-gantt-cell-text">{cellText(col, node)}</span>
                     {/if}
@@ -1957,7 +2024,7 @@
       {/if}
 
       <div class="sv-gantt-chart" style={`width:${axisPx}px`}>
-        <div class="sv-gantt-axis" style={`width:${axisPx}px`}>
+        <div class="sv-gantt-axis" style={`width:${axisPx}px`} bind:clientHeight={axisH}>
           <div class="sv-gantt-majors">
             {#each axis.majors as m (m.leftPct)}
               <div
@@ -1982,7 +2049,7 @@
         <div
           class="sv-gantt-body"
           bind:this={bodyEl}
-          style={`width:${axisPx}px; height:${bodyH}px`}
+          style={`width:${axisPx}px; height:${fillH}px`}
           ondblclick={onBodyDblClick}
           oncontextmenu={onBodyContextMenu}
         >
@@ -2400,6 +2467,11 @@
   }
   .sv-gantt-parent { font-weight: 600; }
   .sv-gantt-cell-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .sv-gantt-open {
+    min-width: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: start; cursor: pointer;
+  }
+  .sv-gantt-open:hover { text-decoration: underline; text-underline-offset: 2px; }
+  .sv-gantt-open:focus-visible { outline: 2px solid var(--sg-focus, var(--sg-accent, #2563eb)); outline-offset: 1px; border-radius: 3px; }
   .sv-gantt-chevron {
     flex: none;
     width: 16px;

package/dist/gantt/gantt-config.d.ts

@@ -18,6 +18,34 @@ import type { GanttConfig, RowData, SchedulerResource, TableFeatures } from '@sv
  */
 export type GanttConstraint = 'ASAP' | 'ALAP' | 'MSO' | 'MFO' | 'SNET' | 'SNLT' | 'FNET' | 'FNLT';
 export type GanttProConfig<TFeatures extends TableFeatures = TableFeatures, TData extends RowData = RowData> = GanttConfig<TFeatures, TData> & {
+    /**
+     * A bar's color from its row (a status option's color, say). Wins over
+     * `colorField` and `color`; return nothing to fall back to them.
+     */
+    colorOf?: (row: TData) => string | null | undefined;
+    /**
+     * Open a task where the app keeps it (a record view, a page) instead of
+     * the built-in drawer: a click or Enter on a bar, the task's name in the
+     * table, and "Open" in the bar's menu call it.
+     */
+    onTaskOpen?: (row: TData) => void;
+    /**
+     * Field holding the ids of the tasks this one DEPENDS ON (its predecessors),
+     * drawn as finish-to-start arrows into it. The other direction from
+     * `dependencyField`, which lists a task's successors.
+     */
+    predecessorField?: keyof TData & string;
+    /**
+     * A task's progress, 0 to 100, from its row: for a field that holds
+     * something else (a fraction, a status). Wins over `progressField` when
+     * drawing; the grip still reports 0 to 100 through `onProgressChange`.
+     */
+    progressValue?: (row: TData) => number | null | undefined;
+    /**
+     * Widths (px) of task-table columns by id, over the columns' own `width`:
+     * a grid column sized for a wide table can sit narrower beside the bars.
+     */
+    tableColumnWidths?: Record<string, number>;
     /**
      * Highlight the critical path: the chain of linked tasks with no slack,
      * where any slip moves the project's finish. Needs `dependencies`.

package/dist/index.d.ts

@@ -9,6 +9,7 @@ export { default as SvImportDialog } from './SvImportDialog.svelte';
 export { installEnterprise, type EnterpriseGridApi, type EnterpriseAIApi, type EnterprisePivotApi } from './install.js';
 export { enableSchedulerView, SvGridScheduler } from './scheduler.js';
 export { enableBoardView, SvGridBoard } from './board.js';
+export { enableGalleryView, SvGridGallery } from './gallery.js';
 export * from './gantt/index.js';
 export { enableSelectionBar, SvGridSelectionBar } from './selection-bar.js';
 export { applyBulkEdit, bulkEditableFields, bulkEditInitialValues, coerceBulkValue, type BulkEditField, type BulkEditResult } from './bulk-edit.js';
@@ -147,6 +148,8 @@ export { evaluatePredicate, evaluateScalar, evaluateChange, BUILTIN_FUNCTION_NAM
 export { parsePredicate, stringifyPredicate, stringifyScalar, validateExpression, collectColumnRefs, ExpressionParseError, } from './expressions/parse.js';
 export { OPERATORS, operatorMeta, operatorsForType, isValueless, isSetOperator, isRangeOperator, columnById, resolveColumnRef, columnLabel, columnRefText, type ExprColumn, type ExprColumnType, type OperatorMeta, } from './expressions/expression-columns.js';
 export type { ScalarExpr, PredicateExpr, ChangeExpr, ComparisonOp, ArithmeticOp, AggFn, EvalContext, ExprRow, } from './expressions/expression-types.js';
+export { registerPredicateKind, getPredicateKind, type PredicateKind, type PredicateKindContext } from './expressions/kinds.js';
+export { setAlertConditionEditor, type AlertConditionEditor } from './alerts/condition-editor.js';
 export { default as SvExpressionEditor } from './SvExpressionEditor.svelte';
 export { enableAlerts } from './alerts.js';
 export { createAlertEngine, renderTemplate, type AlertEngine, type AlertEngineOptions, type ValidateEditResult, } from './alerts/alert-engine.js';

package/dist/index.js

@@ -20,6 +20,9 @@ export { enableSchedulerView, SvGridScheduler } from './scheduler.js';
 // Kanban board view (Pro). `enableBoardView()` registers the renderer so
 // `<SvGrid board={...}>` shows lanes of cards. Config types live in @svgrid/grid.
 export { enableBoardView, SvGridBoard } from './board.js';
+// Gallery view (Pro). `enableGalleryView()` registers the renderer so
+// `<SvGrid gallery={...}>` shows rows as cards. Config types live in @svgrid/grid.
+export { enableGalleryView, SvGridGallery } from './gallery.js';
 // Gantt view (Pro). `enableGanttView()` registers the renderer so
 // `<SvGrid gantt={...}>` shows a task table beside a time chart. The `gantt`
 // prop and its config types live in @svgrid/grid; the layout model, the
@@ -188,6 +191,9 @@ export { pivotToChartSpec } from './pivot-chart.js';
 export { evaluatePredicate, evaluateScalar, evaluateChange, BUILTIN_FUNCTION_NAMES, isBuiltinFunction, } from './expressions/evaluate.js';
 export { parsePredicate, stringifyPredicate, stringifyScalar, validateExpression, collectColumnRefs, ExpressionParseError, } from './expressions/parse.js';
 export { OPERATORS, operatorMeta, operatorsForType, isValueless, isSetOperator, isRangeOperator, columnById, resolveColumnRef, columnLabel, columnRefText, } from './expressions/expression-columns.js';
+// A module's own condition kind: the `ext` node (SvGrid Base's field filter).
+export { registerPredicateKind, getPredicateKind } from './expressions/kinds.js';
+export { setAlertConditionEditor } from './alerts/condition-editor.js';
 export { default as SvExpressionEditor } from './SvExpressionEditor.svelte';
 // Alert Rules engine (Pro). Declarative "when this holds / this moves -> toast /
 // badge / highlight / flash / prevent-edit / log". Authored at runtime,

package/dist/install.js

@@ -9,6 +9,7 @@ import { aiFilter, aiSmartFill, aiSummarize, aiClassify, aiExport, aiFindAnomali
 import { createPivotModel, } from './pivot.js';
 import { enableSchedulerView } from './scheduler.js';
 import { enableBoardView } from './board.js';
+import { enableGalleryView } from './gallery.js';
 import { enableGanttView } from './gantt/gantt.js';
 import { enableSelectionBar } from './selection-bar.js';
 import { enableAdvancedFilter } from './advanced-filter-enable.js';
@@ -46,6 +47,8 @@ export function installEnterprise(api) {
     enableSchedulerView();
     // Register the Kanban board view (no-op without the `board` prop).
     enableBoardView();
+    // Register the gallery view (no-op without the `gallery` prop).
+    enableGalleryView();
     // Register the Gantt view (no-op without the `gantt` prop).
     enableGanttView();
     enableSelectionBar();

package/dist/license-core.d.ts

@@ -2,13 +2,13 @@
 export declare const VALID_PREFIX = "SVENTERPRISE-";
 /**
  * What an order bought. `grid` is the enterprise grid on its own; `suite` adds
- * the spreadsheet and the Studio. Keys issued before editions existed carry no
+ * the spreadsheet, SvGrid Base (the table database) and the Studio. Keys issued before editions existed carry no
  * edition segment and read as `suite`, so nothing an existing customer already
  * ships changes when this lands.
  */
 export type LicenseEdition = 'grid' | 'suite';
-/** The three things an edition can gate. */
-export type LicensedProduct = 'grid' | 'spreadsheet' | 'studio';
+/** The things an edition can gate. */
+export type LicensedProduct = 'grid' | 'spreadsheet' | 'base' | 'studio';
 /** Does `edition` cover `product`? Pure, and the only place the answer lives. */
 export declare function editionCovers(edition: LicenseEdition, product: LicensedProduct): boolean;
 export type LicenseStatus = 'unset' | 'invalid' | 'revoked' | 'dev' | 'eval' | 'licensed';

package/dist/license.js

@@ -139,6 +139,7 @@ export function nudgeEnterprise(feature) {
 const PRODUCT_LABEL = {
     grid: 'the enterprise grid',
     spreadsheet: 'the spreadsheet',
+    base: 'SvGrid Base',
     studio: 'the Studio',
 };
 /** One-time console notice for a feature the current edition does not cover.