@svgrid/enterprise 3.0.0 → 3.0.2

package/dist/SvSheetTextToColumns.svelte

@@ -0,0 +1,172 @@
+<script lang="ts">
+  /**
+   * Excel's Convert Text to Columns Wizard, the delimited page: pick the
+   * delimiter (guessed from the column first), see the split in a preview,
+   * Finish writes the fields into the columns to the right of the source
+   * inside one batch, so the whole split is one Ctrl+Z.
+   */
+  import { untrack } from 'svelte'
+  import { SvModal } from '@svgrid/grid'
+  import type { GridCommandContext } from '@svgrid/grid/shortcuts'
+  import type { Workbook } from './sheet/workbook'
+  import { textToColumns, guessDelimiter } from './sheet/transforms'
+  import { colToLetters } from './sheet/address'
+
+  type Props = {
+    open?: boolean
+    workbook: Workbook
+    cmd: () => GridCommandContext | null
+    /** Called after the split, so the shell repaints and refocuses. */
+    onDone: (message: string) => void
+    onClose?: () => void
+  }
+
+  let { open = $bindable(false), workbook, cmd, onDone, onClose }: Props = $props()
+
+  const DELIMITERS = [
+    { id: 'tab', label: 'Tab', sep: '\t' },
+    { id: 'semicolon', label: 'Semicolon', sep: ';' },
+    { id: 'comma', label: 'Comma', sep: ',' },
+    { id: 'space', label: 'Space', sep: ' ' },
+    { id: 'other', label: 'Other', sep: '' },
+  ] as const
+  type DelimiterId = (typeof DELIMITERS)[number]['id']
+
+  let delimiter = $state<DelimiterId>('comma')
+  let other = $state('|')
+  let collapse = $state(false)
+  let trim = $state(true)
+  let column = $state<{ index: number; top: number; texts: string[] }>({ index: 0, top: 0, texts: [] })
+
+  const separator = $derived(
+    delimiter === 'other' ? other : DELIMITERS.find((d) => d.id === delimiter)!.sep,
+  )
+  const preview = $derived.by(() =>
+    textToColumns(column.texts.slice(0, 6), {
+      delimiters: separator ? [separator] : [','],
+      collapse,
+      trim,
+    }),
+  )
+
+  /**
+   * The column under the selection, from the selection's first row (a
+   * whole-column selection starts at the top) down to the last used row.
+   */
+  $effect(() => {
+    if (!open) return
+    untrack(prepare)
+  })
+
+  function prepare() {
+    const c = cmd()
+    const range = c?.ranges[c.ranges.length - 1]
+    const left = range ? range[1] : (c?.activeCell?.colIndex ?? 0)
+    const top = range ? range[0] : (c?.activeCell?.rowIndex ?? 0)
+    const bottom = Math.max(workbook.rowCount(workbook.active) - 1, top)
+    const texts = Array.from({ length: bottom - top + 1 }, (_, i) => workbook.getRaw(workbook.active, top + i, left))
+    column = { index: left, top, texts }
+    const guess = guessDelimiter(texts.filter((t) => t !== ''))
+    const known = DELIMITERS.find((d) => d.sep === guess && d.id !== 'other')
+    if (known) delimiter = known.id
+    else if (guess) { delimiter = 'other'; other = guess }
+  }
+
+  function finish() {
+    const c = cmd()
+    if (!c) return
+    const { rows, width } = textToColumns(column.texts, {
+      delimiters: separator ? [separator] : [','],
+      collapse,
+      trim,
+    })
+    c.batch(() => {
+      rows.forEach((fields, r) => {
+        for (let i = 0; i < width; i += 1) {
+          c.setCellValue(column.top + r, column.index + i, fields[i] ?? '')
+        }
+      })
+    })
+    open = false
+    c.setSelection(column.top, column.index)
+    c.extendSelection(column.top + rows.length - 1, column.index + width - 1)
+    onDone(`Split ${rows.length} rows into ${width} columns.`)
+    onClose?.()
+  }
+
+  function close() {
+    open = false
+    onClose?.()
+  }
+</script>
+
+<SvModal bind:open onClose={onClose} title="Convert Text to Columns Wizard" size="md">
+  <div class="sv-sheet-dialog" role="group" aria-label="Convert Text to Columns">
+    <p class="lead">Choose the delimiter your data contains. The preview shows how it splits.</p>
+    <fieldset class="group">
+      <legend>Delimiters</legend>
+      {#each DELIMITERS as d (d.id)}
+        <label class="check">
+          <input type="radio" name="sheet-delimiter" value={d.id} bind:group={delimiter} />
+          {d.label}
+          {#if d.id === 'other'}
+            <input class="other" type="text" maxlength="1" bind:value={other} aria-label="Other delimiter" />
+          {/if}
+        </label>
+      {/each}
+    </fieldset>
+    <div class="checks">
+      <label class="check"><input type="checkbox" bind:checked={collapse} /> Treat consecutive delimiters as one</label>
+      <label class="check"><input type="checkbox" bind:checked={trim} /> Trim spaces around each field</label>
+    </div>
+    <div class="preview" aria-label="Data preview">
+      <table>
+        <tbody>
+          {#each preview.rows as fields, i (i)}
+            <tr>{#each fields as field, j (j)}<td>{field}</td>{/each}</tr>
+          {/each}
+        </tbody>
+      </table>
+    </div>
+    <p class="status">
+      {column.texts.length} rows in column {colToLetters(column.index)}
+      become {preview.width} column{preview.width === 1 ? '' : 's'} from column {colToLetters(column.index)}.
+      Anything already in those columns is replaced.
+    </p>
+  </div>
+  {#snippet footer()}
+    <div class="sv-sheet-dialog-buttons">
+      <button type="button" class="btn primary" onclick={finish} disabled={column.texts.length === 0}>Finish</button>
+      <button type="button" class="btn" onclick={close}>Cancel</button>
+    </div>
+  {/snippet}
+</SvModal>
+
+<style>
+  .lead { margin: 0; }
+  .group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px 16px;
+    margin: 0;
+    padding: 6px 10px 8px;
+    border: 1px solid var(--sg-border, #d1d1d1);
+    border-radius: var(--sg-radius, 3px);
+  }
+  .group legend { padding: 0 4px; font-weight: 600; }
+  .other { width: 32px !important; height: 22px !important; padding: 0 4px !important; text-align: center; }
+  .preview {
+    max-height: 150px;
+    overflow: auto;
+    border: 1px solid var(--sg-border, #d1d1d1);
+    border-radius: var(--sg-radius, 3px);
+    background: var(--sg-bg, #fff);
+  }
+  .preview table { border-collapse: collapse; font-size: 12px; }
+  .preview td {
+    padding: 3px 8px;
+    border-right: 1px solid var(--sg-border, #e5e5e5);
+    border-bottom: 1px solid var(--sg-border, #e5e5e5);
+    white-space: nowrap;
+  }
+</style>

package/dist/SvSheetTextToColumns.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { GridCommandContext } from '@svgrid/grid/shortcuts';
+import type { Workbook } from './sheet/workbook.js';
+type Props = {
+    open?: boolean;
+    workbook: Workbook;
+    cmd: () => GridCommandContext | null;
+    /** Called after the split, so the shell repaints and refocuses. */
+    onDone: (message: string) => void;
+    onClose?: () => void;
+};
+declare const SvSheetTextToColumns: import("svelte").Component<Props, {}, "open">;
+type SvSheetTextToColumns = ReturnType<typeof SvSheetTextToColumns>;
+export default SvSheetTextToColumns;

package/dist/SvSheetValidationAlert.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+  /**
+   * The box Excel shows when an entry breaks a validation rule. Stop: the
+   * message, Retry (the cell reopens with the entry) and Cancel. Warning:
+   * the message, "Continue?", Yes (the entry lands anyway), No (retry) and
+   * Cancel. Enter takes the first button, Escape cancels.
+   */
+  import { SvModal } from '@svgrid/grid'
+
+  type Props = {
+    open?: boolean
+    alert: { style: 'stop' | 'warning'; title: string; message: string } | null
+    onRetry: () => void
+    /** Warning only: keep the entry. */
+    onAccept: () => void
+    onCancel: () => void
+  }
+
+  let { open = $bindable(false), alert, onRetry, onAccept, onCancel }: Props = $props()
+  let first = $state<HTMLButtonElement | null>(null)
+
+  $effect(() => {
+    if (!open) return
+    queueMicrotask(() => first?.focus())
+  })
+
+  function done(fn: () => void) {
+    open = false
+    fn()
+  }
+</script>
+
+<SvModal bind:open onClose={onCancel} title={alert?.title ?? 'Data validation'} size="sm">
+  <div class="sv-sheet-dialog alert" role="alertdialog" aria-describedby="sv-sheet-validation-message">
+    <span class="mark" class:warning={alert?.style === 'warning'} aria-hidden="true">{alert?.style === 'warning' ? '!' : '×'}</span>
+    <div>
+      <p id="sv-sheet-validation-message" class="message">{alert?.message}</p>
+      {#if alert?.style === 'warning'}<p class="message">Continue?</p>{/if}
+    </div>
+  </div>
+  {#snippet footer()}
+    <div class="sv-sheet-dialog-buttons">
+      {#if alert?.style === 'warning'}
+        <button bind:this={first} type="button" class="btn primary" onclick={() => done(onAccept)}>Yes</button>
+        <button type="button" class="btn" onclick={() => done(onRetry)}>No</button>
+      {:else}
+        <button bind:this={first} type="button" class="btn primary" onclick={() => done(onRetry)}>Retry</button>
+      {/if}
+      <button type="button" class="btn" onclick={() => done(onCancel)}>Cancel</button>
+    </div>
+  {/snippet}
+</SvModal>
+
+<style>
+  .alert {
+    flex-direction: row;
+    align-items: flex-start;
+    gap: 14px;
+    min-width: 300px;
+    max-width: 420px;
+  }
+  .mark {
+    flex: 0 0 auto;
+    width: 32px;
+    height: 32px;
+    display: grid;
+    place-items: center;
+    font-size: 20px;
+    font-weight: 700;
+    line-height: 1;
+    color: var(--sg-on-accent, #fff);
+    background: var(--sg-danger, #c42b1c);
+    border-radius: 50%;
+  }
+  .mark.warning {
+    color: #242424;
+    background: var(--sg-warning, #f2c811);
+  }
+  .message {
+    margin: 0 0 6px;
+    white-space: pre-wrap;
+  }
+</style>

package/dist/SvSheetValidationAlert.svelte.d.ts

@@ -0,0 +1,15 @@
+type Props = {
+    open?: boolean;
+    alert: {
+        style: 'stop' | 'warning';
+        title: string;
+        message: string;
+    } | null;
+    onRetry: () => void;
+    /** Warning only: keep the entry. */
+    onAccept: () => void;
+    onCancel: () => void;
+};
+declare const SvSheetValidationAlert: import("svelte").Component<Props, {}, "open">;
+type SvSheetValidationAlert = ReturnType<typeof SvSheetValidationAlert>;
+export default SvSheetValidationAlert;

package/dist/advanced-filter/expr-columns-from-grid.d.ts

@@ -4,7 +4,7 @@
  * Saves every consumer from hand-writing an `ExprColumn[]` that mirrors their
  * column defs and then drifting from it.
  */
-import type { ExprColumn } from '../expressions/expression-columns';
+import type { ExprColumn } from '../expressions/expression-columns.js';
 /** Grid columns as `api.getColumns()` reports them. */
 type GridColumnInfo = {
     id: string;

package/dist/advanced-filter-enable.js

@@ -6,9 +6,9 @@
  * compiler that turns an expression into a row predicate.
  */
 import { registerAdvancedFilterEngine } from '@svgrid/grid';
-import { isLicenseKeySet } from './license';
-import { emitUnlicensedNudge } from './watermark';
-import { compilePredicate } from './expressions/compile';
+import { isLicenseKeySet } from './license.js';
+import { emitUnlicensedNudge } from './watermark.js';
+import { compilePredicate } from './expressions/compile.js';
 let enabled = false;
 const advancedFilterEngine = (expr, ctx) => {
     // The grid treats null as "do not filter" and never surfaces a partially

package/dist/alerts/alert-engine-attach.d.ts

@@ -12,8 +12,8 @@
  * same as a plain-JS interval poll for non-Svelte hosts.
  */
 import type { ConditionalFormat } from '@svgrid/grid/format';
-import { type AlertEngine } from './alert-engine';
-import type { AlertEvent, AlertRule } from './alert-types';
+import { type AlertEngine } from './alert-engine.js';
+import type { AlertEvent, AlertRule } from './alert-types.js';
 export type FlashTarget = {
     rowId: string;
     columnId?: string;

package/dist/alerts/alert-engine-attach.js

@@ -1,7 +1,7 @@
 import { toast } from '@svgrid/grid';
-import { alertStore } from './alert-store.svelte';
-import { toConditionalFormats } from './alert-formats';
-import { createAlertEngine } from './alert-engine';
+import { alertStore } from './alert-store.svelte.js';
+import { toConditionalFormats } from './alert-formats.js';
+import { createAlertEngine } from './alert-engine.js';
 /**
  * Perform the side effects of a batch of fired events and return the visual
  * output: every event is recorded in the log (so the badge/panel stay accurate),

package/dist/alerts/alert-engine.d.ts

@@ -1,4 +1,4 @@
-import type { AlertEvent, AlertRule } from './alert-types';
+import type { AlertEvent, AlertRule } from './alert-types.js';
 export type AlertEngineOptions<TData> = {
     rules: AlertRule[];
     getRowId: (row: TData) => string;

package/dist/alerts/alert-engine.js

@@ -4,8 +4,8 @@
  * once when a row starts matching (not on every re-evaluation while it keeps
  * matching). The reactive/observing wrapper lives in `alert-engine-attach.ts`.
  */
-import { evaluateChange, evaluatePredicate } from '../expressions/evaluate';
-import { collectColumnRefs } from '../expressions/parse';
+import { evaluateChange, evaluatePredicate } from '../expressions/evaluate.js';
+import { collectColumnRefs } from '../expressions/parse.js';
 const AGG_ROW_KEY = '*';
 /** Fill message-template tokens from the firing context. */
 export function renderTemplate(template, ctx) {

package/dist/alerts/alert-formats.d.ts

@@ -5,7 +5,7 @@
  * already uses for color scales and data bars. No new rendering path.
  */
 import type { ConditionalFormat } from '@svgrid/grid/format';
-import type { AlertEvent, AlertRule } from './alert-types';
+import type { AlertEvent, AlertRule } from './alert-types.js';
 export type StylingContext<TData> = {
     getValue?: (row: TData, columnId: string) => unknown;
     locale?: string | ReadonlyArray<string>;

package/dist/alerts/alert-formats.js

@@ -1,4 +1,4 @@
-import { evaluatePredicate } from '../expressions/evaluate';
+import { evaluatePredicate } from '../expressions/evaluate.js';
 /** Which action kinds paint onto cells. */
 const STYLING_KINDS = new Set(['badge', 'highlight']);
 /**

package/dist/alerts/alert-observer.d.ts

@@ -25,9 +25,9 @@
  * instance to a scheduler and an `onEvents` sink; `attachAlertEngine` wraps it
  * for non-Svelte hosts.
  */
-import type { AlertEngine } from './alert-engine';
-import type { AlertEvent, AlertRule } from './alert-types';
-import { type AlertScheduler, type AlertSchedulerMode } from './alert-scheduler';
+import type { AlertEngine } from './alert-engine.js';
+import type { AlertEvent, AlertRule } from './alert-types.js';
+import { type AlertScheduler, type AlertSchedulerMode } from './alert-scheduler.js';
 export type AlertObserverOptions<TData> = {
     engine: AlertEngine<TData>;
     getRowId: (row: TData) => string;

package/dist/alerts/alert-observer.js

@@ -1,4 +1,4 @@
-import { createAlertScheduler } from './alert-scheduler';
+import { createAlertScheduler } from './alert-scheduler.js';
 const clone = (r) => r && typeof r === 'object' ? { ...r } : r;
 export function createAlertObserver(opts) {
     const { engine, getRowId, onEvents } = opts;

package/dist/alerts/alert-storage.d.ts

@@ -4,7 +4,7 @@
  * a small CRUD manager. `export()` / `import()` make a rule set shareable as
  * JSON, so a team lead can hand round a set of alerts.
  */
-import type { AlertRule } from './alert-types';
+import type { AlertRule } from './alert-types.js';
 export type AlertRulesStorage = {
     read(): AlertRule[];
     write(rules: AlertRule[]): void;

package/dist/alerts/alert-store.svelte.d.ts

@@ -8,7 +8,7 @@
  * `pushMany` (not one reassignment per event), and `activeCount` is a maintained
  * counter - not an O(n) reduce recomputed on every render.
  */
-import type { AlertEvent } from './alert-types';
+import type { AlertEvent } from './alert-types.js';
 /** The shared alerts log. Read `.events` / `.activeCount` inside a component. */
 export declare const alertStore: {
     readonly events: AlertEvent[];

package/dist/alerts/alert-types.d.ts

@@ -9,8 +9,8 @@
  *
  * Predicates and change tests come from the expression layer (`../expressions`).
  */
-import type { ChangeExpr, PredicateExpr } from '../expressions/expression-types';
-import type { Schedule } from '../scheduling';
+import type { ChangeExpr, PredicateExpr } from '../expressions/expression-types.js';
+import type { Schedule } from '../scheduling.js';
 /** Maps onto the toast variants + conditional-format intent. */
 export type AlertSeverity = 'info' | 'success' | 'warning' | 'error';
 /** What the rule watches over. */

package/dist/alerts.js

@@ -15,8 +15,8 @@
  * // spread `formats` into <SvGrid conditionalFormats={[...base, ...formats]} />
  * ```
  */
-import { isLicenseKeySet } from './license';
-import { emitUnlicensedNudge } from './watermark';
+import { isLicenseKeySet } from './license.js';
+import { emitUnlicensedNudge } from './watermark.js';
 let enabled = false;
 /** Turn on the alerts feature (soft-gated). Idempotent. */
 export function enableAlerts() {

package/dist/board.js

@@ -15,8 +15,8 @@
  * ```
  */
 import { registerBoardView } from '@svgrid/grid';
-import { isLicenseKeySet } from './license';
-import { emitUnlicensedNudge } from './watermark';
+import { isLicenseKeySet } from './license.js';
+import { emitUnlicensedNudge } from './watermark.js';
 import SvGridBoard from './SvGridBoard.svelte';
 let enabled = false;
 /**