@svgrid/enterprise 3.1.21 → 3.1.23

package/dist/SvGridBoard.svelte

@@ -13,6 +13,7 @@
   //     `onCardMove` fires purely as a notification for persistence / mirroring
   // Themes entirely from the grid's `--sg-*` tokens.
   import { tick, untrack } from "svelte";
+  import { cardMarkFor, type CardMark } from "./review/card-marks.svelte";
   import type {
     ColumnDef,
     RowData,
@@ -901,6 +902,19 @@
       overRow = null;
     }
   }
+  // The rest of the lane (its "+ Add a card" row, the space under the list)
+  // takes a drop too, as the last card. Without it the marker from the last
+  // dragover stayed up there and the drop was lost.
+  function onLaneShellDragOver(e: DragEvent, laneId: string, swimId: string | null) {
+    if (!dragRow) return;
+    e.preventDefault();
+    if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
+    if (!(e.target as Element).closest(".sv-board-lane-body")) {
+      overLane = laneId;
+      overSwim = swimId;
+      overRow = null;
+    }
+  }
   function onLaneDrop(e: DragEvent, laneId: string, swimId: string | null) {
     e.preventDefault();
     const row = dragRow;
@@ -1142,6 +1156,12 @@
   });
 </script>
 
+{#snippet proposedMark(mark: CardMark | null)}
+  <!-- Proposals from a change review (@svgrid/enterprise/review) waiting on this row. -->
+  {#if mark}<span class="sv-card-proposed" title={mark.text}><span class="sv-card-proposed-dot" aria-hidden="true"></span>{mark.label}</span>{/if}
+{/snippet}
+
+
 <div
   class="sv-board"
   class:is-swim={!!swimField}
@@ -1300,6 +1320,8 @@
     class:is-collapsed={isCollapsed}
     style={lane.color ? `--sv-board-accent: ${lane.color};` : undefined}
     aria-label={laneTitle(lane)}
+    ondragover={isCollapsed ? undefined : (e) => onLaneShellDragOver(e, lane.id, swimId)}
+    ondrop={isCollapsed ? undefined : (e) => onLaneDrop(e, lane.id, swimId)}
   >
     <!-- A reorderable lane header is a keyboard handle (Ctrl+arrows move the lane). -->
     <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
@@ -1424,6 +1446,7 @@
             onkeydown={(e) => onCardKeydown(e, row, lane.id)}
           >
             {#if isFlagged(row)}<span class="sv-board-card-flag" aria-label="Blocked"></span>{/if}
+            {@render proposedMark(cardMarkFor(getRowId, row, indexOf.get(row) ?? 0))}
             {#if isEditing}
               <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
               <form
@@ -1892,6 +1915,22 @@
   .sv-board-lane-body.is-virtual .sv-board-card {
     margin-bottom: 8px;
   }
+
+  .sv-card-proposed {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    align-self: flex-start;
+    margin-bottom: 4px;
+    padding: 1px 7px;
+    border-radius: 999px;
+    font-size: 11px;
+    font-weight: 600;
+    color: color-mix(in srgb, var(--sg-warning, #d97706) 75%, var(--sg-fg, #111827));
+    background: color-mix(in srgb, var(--sg-warning, #d97706) 14%, transparent);
+  }
+  .sv-card-proposed-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sg-warning, #d97706); }
+
   .sv-board-card {
     background: var(--sg-bg, #fff);
     border: 1px solid var(--sg-border, #e4e7ec);

package/dist/SvGridGallery.svelte

@@ -15,6 +15,7 @@
   // Themes entirely from the grid's `--sg-*` tokens.
   import type { ColumnDef, GalleryConfig, RowData, TableFeatures } from "@svgrid/grid";
   import { formatValueForExport, getGridExtension } from "@svgrid/grid";
+  import { cardMarkFor, type CardMark } from "./review/card-marks.svelte";
 
   let {
     data,
@@ -140,6 +141,12 @@
   };
 </script>
 
+{#snippet proposedMark(mark: CardMark | null)}
+  <!-- Proposals from a change review (@svgrid/enterprise/review) waiting on this row. -->
+  {#if mark}<span class="sv-card-proposed" title={mark.text}><span class="sv-card-proposed-dot" aria-hidden="true"></span>{mark.label}</span>{/if}
+{/snippet}
+
+
 <div class="sv-gal" style:--sv-gal-card={`${cardWidth}px`} role="list" aria-label="Records">
   {#each shown as row, i (keyOf(row, i))}
     {@const url = coverUrl(row)}
@@ -168,6 +175,7 @@
       <!-- svelte-ignore a11y_click_events_have_key_events -->
       <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
       <div class="sv-gal-card" class:is-clickable={!!gallery.onCardClick} role="listitem" onclick={() => open(row)}>
+        {@render proposedMark(cardMarkFor(getRowId, row, i))}
         {#if coverField}
           <div class="sv-gal-cover" class:is-contain={gallery.coverFit === "contain"} class:is-empty={!url}>
             {#if url}<img src={url} alt="" loading="lazy" decoding="async" />{/if}
@@ -283,4 +291,19 @@
     .sv-gal-card, .sv-gal-cover img { transition: none; }
     .sv-gal-card.is-clickable:hover, .sv-gal-card.is-clickable:hover .sv-gal-cover img { transform: none; }
   }
+
+  .sv-card-proposed {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    align-self: flex-start;
+    margin-bottom: 4px;
+    padding: 1px 7px;
+    border-radius: 999px;
+    font-size: 11px;
+    font-weight: 600;
+    color: color-mix(in srgb, var(--sg-warning, #d97706) 75%, var(--sg-fg, #111827));
+    background: color-mix(in srgb, var(--sg-warning, #d97706) 14%, transparent);
+  }
+  .sv-card-proposed-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sg-warning, #d97706); }
 </style>

package/dist/SvGridRowCount.svelte

@@ -0,0 +1,23 @@
+<!--
+  The status bar's row count ("250 rows", "12 of 250 rows" while filters hide
+  some), drawn by the grid's `statusBarRows` seam once enableRowCount() has
+  run. It sits outside the bar's live region: the grid already announces
+  filter results, so a count in there would be read out twice.
+-->
+<script lang="ts">
+  let { ctrl }: { ctrl: any } = $props()
+
+  // When the server filters or pages, the grid holds one page and knows only
+  // `rowCount`, so that is both numbers.
+  const external = $derived(ctrl.props.externalFilter === true || ctrl.props.externalPagination === true)
+  const filtered = $derived(ctrl.paginationTotalRows as number)
+  const total = $derived(external ? filtered : ((ctrl.props.data?.length as number | undefined) ?? filtered))
+  const messages = $derived(ctrl.messages)
+  const fmt = (n: number) => n.toLocaleString()
+  const text = $derived(
+    (filtered !== total ? `${fmt(filtered)} ${messages.of} ` : "") +
+      `${fmt(total)} ${total === 1 ? messages.rowSuffix : messages.rowsSuffix}`,
+  )
+</script>
+
+<span class="sv-grid-status-item sv-grid-status-rows">{text}</span>

package/dist/SvGridRowCount.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    ctrl: any;
+};
+declare const SvGridRowCount: import("svelte").Component<$$ComponentProps, {}, "">;
+type SvGridRowCount = ReturnType<typeof SvGridRowCount>;
+export default SvGridRowCount;

package/dist/SvGridScheduler.svelte

@@ -16,6 +16,7 @@
   // Themes entirely from the grid's `--sg-*` tokens; the model math lives in
   // ./scheduler-model (pure + unit-tested).
   import { untrack } from "svelte";
+  import { cardMarkFor } from "./review/card-marks.svelte";
   import type {
     ColumnDef,
     RowData,
@@ -3232,6 +3233,12 @@
   }
 </script>
 
+{#snippet proposed(row: TData)}
+  <!-- Proposals from a change review (@svgrid/enterprise/review) waiting on this event's row. -->
+  {@const mark = cardMarkFor(getRowId, row, indexOf.get(row) ?? 0)}
+  {#if mark}<span class="sv-sched-proposed" role="img" aria-label={mark.label} title="{mark.label}: {mark.text}"></span>{/if}
+{/snippet}
+
 <div class="sv-sched" role="group" aria-roledescription="calendar">
   <!-- toolbar -->
   <div class="sv-sched-toolbar">
@@ -3400,7 +3407,7 @@
                         onpointerdown={(e) => startMonthResize(e, s.event, "start")}
                       ></span>
                     {/if}
-                    {#if scheduler.event}{@render scheduler.event(s.event.row)}{:else}{#if !s.event.allDay && !s.continuesLeft}<span class="sv-sched-dot"></span><span class="sv-sched-bar-time">{fmtTime(s.event.start)}</span>{/if}<span class="sv-sched-bar-title">{s.event.title}</span>{/if}
+                    {@render proposed(s.event.row)}{#if scheduler.event}{@render scheduler.event(s.event.row)}{:else}{#if !s.event.allDay && !s.continuesLeft}<span class="sv-sched-dot"></span><span class="sv-sched-bar-time">{fmtTime(s.event.start)}</span>{/if}<span class="sv-sched-bar-title">{s.event.title}</span>{/if}
                     {#if canEditBar && resizable && !s.continuesRight}
                       <!-- svelte-ignore a11y_no_static_element_interactions -->
                       <span
@@ -3447,7 +3454,7 @@
                   <span class="sv-sched-agenda-time">
                     {ev.allDay ? "all day" : `${fmtTime(ev.start)} - ${fmtTime(ev.end)}`}
                   </span>
-                  <span class="sv-sched-agenda-title">{ev.title}</span>
+                  {@render proposed(ev.row)}<span class="sv-sched-agenda-title">{ev.title}</span>
                   {#if ev.resourceId}<span class="sv-sched-tag">{ev.resourceId}</span>{/if}
                 {/if}
               </button>
@@ -3602,7 +3609,7 @@
                       <span class="sv-sched-chip-resize sv-sched-chip-resize-start" aria-hidden="true" onpointerdown={(e) => startTlDrag(e, it.event, "resize-start")}></span>
                     {/if}
                     {#if wpx >= 22}
-                      {#if scheduler.event}{@render scheduler.event(it.event.row)}{:else}{#if view === "timelineDay" && !it.event.allDay && !g.continuesLeft}<span class="sv-sched-bar-time">{fmtTime(it.event.start)}</span>{/if}<span class="sv-sched-bar-title">{it.event.title}</span>{/if}
+                      {@render proposed(it.event.row)}{#if scheduler.event}{@render scheduler.event(it.event.row)}{:else}{#if view === "timelineDay" && !it.event.allDay && !g.continuesLeft}<span class="sv-sched-bar-time">{fmtTime(it.event.start)}</span>{/if}<span class="sv-sched-bar-title">{it.event.title}</span>{/if}
                     {/if}
                     {#if canEdit && resizable && !g.continuesRight}
                       <!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -3745,7 +3752,7 @@
                       onpointerdown={(e) => startAllDayResize(e, s.event, "start")}
                     ></span>
                   {/if}
-                  {#if scheduler.event}{@render scheduler.event(s.event.row)}{:else}<span class="sv-sched-bar-title">{s.event.title}</span>{/if}
+                  {@render proposed(s.event.row)}{#if scheduler.event}{@render scheduler.event(s.event.row)}{:else}<span class="sv-sched-bar-title">{s.event.title}</span>{/if}
                   {#if canEditBar && resizable && !s.continuesRight}
                     <!-- svelte-ignore a11y_no_static_element_interactions -->
                     <span
@@ -3768,7 +3775,7 @@
               >
                 {#each colAllDay(col) as ev (ev.key)}
                   <button type="button" class="sv-sched-chip" style={eventStyle(ev)} onclick={() => openEvent(ev)} oncontextmenu={(e) => openMenu(e, ev)}>
-                    <span class="sv-sched-chip-title">{ev.title}</span>
+                    {@render proposed(ev.row)}<span class="sv-sched-chip-title">{ev.title}</span>
                   </button>
                 {/each}
               </div>
@@ -3861,7 +3868,7 @@
                       onpointerdown={(e) => startTimeDrag(e, p.event, col, "resize-start")}
                     ></span>
                   {/if}
-                  {#if scheduler.event}{@render scheduler.event(p.event.row)}{:else}<span class="sv-sched-event-time">{fmtTime(isResize ? drag!.previewStart : p.event.start)}{isResize ? ` - ${fmtTime(drag!.previewEnd)}` : ""}</span><span class="sv-sched-event-title">{p.event.title}</span>{/if}
+                  {@render proposed(p.event.row)}{#if scheduler.event}{@render scheduler.event(p.event.row)}{:else}<span class="sv-sched-event-time">{fmtTime(isResize ? drag!.previewStart : p.event.start)}{isResize ? ` - ${fmtTime(drag!.previewEnd)}` : ""}</span><span class="sv-sched-event-title">{p.event.title}</span>{/if}
                   {#if canEdit && resizable}
                     <!-- svelte-ignore a11y_no_static_element_interactions -->
                     <span
@@ -4012,7 +4019,7 @@
           <span class="sv-sched-listpop-time">
             {ev.allDay ? "all day" : `${fmtTime(ev.start)} - ${fmtTime(ev.end)}`}
           </span>
-          <span class="sv-sched-listpop-title">{ev.title}</span>
+          {@render proposed(ev.row)}<span class="sv-sched-listpop-title">{ev.title}</span>
         </button>
       {/each}
     </div>
@@ -4519,6 +4526,17 @@
   }
   .sv-sched-chip:hover { background: color-mix(in srgb, var(--sv-sched-accent) 26%, transparent); }
   .sv-sched-chip-title { overflow: hidden; text-overflow: ellipsis; }
+  .sv-sched-proposed {
+    display: inline-block;
+    flex: none;
+    width: 7px;
+    height: 7px;
+    margin-right: 4px;
+    border-radius: 50%;
+    vertical-align: middle;
+    background: var(--sg-warning, #d97706);
+    box-shadow: 0 0 0 1.5px var(--sg-bg, #fff);
+  }
 
   /* time-grid */
   .sv-sched-grid { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }