@svgrid/enterprise 3.0.2 → 3.1.0

package/dist/SvSheetSort.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { Workbook } from './sheet/workbook.js';
+import type { SortKey } from './sheet/sort.js';
+type Block = {
+    top: number;
+    left: number;
+    bottom: number;
+    right: number;
+};
+type Props = {
+    open?: boolean;
+    workbook: Workbook;
+    /** The block to sort, and whether its first row looks like headers. */
+    block: Block;
+    headerGuess: boolean;
+    /** The column the dialog opens on: the active cell's. */
+    activeCol: number;
+    /**
+     * A cell's fill or font colour, for a level that sorts on one. Without
+     * it the Sort On list offers values only, since there would be no
+     * colours to offer.
+     */
+    colourAt?: (row: number, col: number, on: 'fill' | 'color') => string | null;
+    onApply: (keys: SortKey[], hasHeaders: boolean) => void;
+    onClose?: () => void;
+};
+declare const SvSheetSort: import("svelte").Component<Props, {}, "open">;
+type SvSheetSort = ReturnType<typeof SvSheetSort>;
+export default SvSheetSort;

package/dist/SvSheetSparklines.svelte

@@ -0,0 +1,135 @@
+<script lang="ts">
+  /**
+   * Excel's Create Sparklines dialog, and its Sparkline Design tab folded
+   * into the same box: the kind, the two ranges, the colours, one scale for
+   * the group or one each. Opened by Insert > Sparklines, and again by a
+   * double-click on a cell that holds one, which is how a group is edited.
+   */
+  import { SvModal } from '@svgrid/grid'
+  import { useSheetText } from './sheet-text'
+  import { parseRangeText, rangeText } from './sheet/protection'
+  import { SPARKLINE_TYPES, type SheetSparklineType, type SparklineGroup } from './sheet/sparklines'
+  import type { Rect } from './sheet/format-store'
+
+  type Props = {
+    open?: boolean
+    /** The group as it stands, new or being edited. */
+    group: SparklineGroup
+    /** True when the group is already on the sheet, which offers Delete. */
+    existing?: boolean
+    onApply: (group: SparklineGroup) => void
+    onDelete?: () => void
+    onClose?: () => void
+  }
+
+  let { open = $bindable(false), group, existing = false, onApply, onDelete, onClose }: Props = $props()
+  const t = useSheetText()
+
+  let type = $state<SheetSparklineType>('line')
+  let data = $state('')
+  let location = $state('')
+  let colour = $state('')
+  let negative = $state('')
+  let sameScale = $state(false)
+  let markers = $state(false)
+  let error = $state('')
+  let first = $state<HTMLSelectElement | null>(null)
+
+  $effect(() => {
+    if (!open) return
+    type = group.type
+    data = rangeText([group.data])
+    location = rangeText([group.location])
+    colour = group.color ?? ''
+    negative = group.negativeColor ?? ''
+    sameScale = Boolean(group.sameScale)
+    markers = Boolean(group.markers)
+    error = ''
+    queueMicrotask(() => first?.focus())
+  })
+
+  /** One rectangle, or null: these two fields take a range, not a list. */
+  function oneRect(text: string): Rect | null {
+    const rects = parseRangeText(text)
+    return rects && rects.length === 1 ? rects[0]! : null
+  }
+
+  /** The location has to hold one cell per line of the data. */
+  function shapesAgree(d: Rect, l: Rect): boolean {
+    const lines = l[2] - l[0] >= l[3] - l[1] ? d[2] - d[0] : d[3] - d[1]
+    const cells = Math.max(l[2] - l[0], l[3] - l[1])
+    return lines === cells
+  }
+
+  function ok() {
+    const d = oneRect(data)
+    const l = oneRect(location)
+    if (!d || !l) { error = t('sparklines.badRange'); return }
+    if (!shapesAgree(d, l)) { error = t('sparklines.mismatch'); return }
+    const next: SparklineGroup = { ...group, type, data: d, location: l, sameScale, markers }
+    if (colour.trim()) next.color = colour.trim()
+    else delete next.color
+    if (negative.trim()) next.negativeColor = negative.trim()
+    else delete next.negativeColor
+    open = false
+    onApply(next)
+    onClose?.()
+  }
+
+  function close() {
+    open = false
+    onClose?.()
+  }
+</script>
+
+<SvModal bind:open onClose={onClose} title={t('sparklines.title')} size="sm">
+  <form class="sv-sheet-dialog" onsubmit={(e) => { e.preventDefault(); ok() }}>
+    <label class="field">
+      <span>{t('sparklines.type')}</span>
+      <select bind:this={first} bind:value={type}>
+        {#each SPARKLINE_TYPES as kind (kind)}<option value={kind}>{t(`sparklines.type.${kind}`)}</option>{/each}
+      </select>
+    </label>
+    <label class="field">
+      <span>{t('sparklines.data')}</span>
+      <input type="text" bind:value={data} spellcheck="false" placeholder={t('sparklines.dataPlaceholder')} />
+    </label>
+    <label class="field">
+      <span>{t('sparklines.location')}</span>
+      <input type="text" bind:value={location} spellcheck="false" placeholder={t('sparklines.locationPlaceholder')} />
+    </label>
+    <label class="field">
+      <span>{t('sparklines.colour')}</span>
+      <input type="color" value={colour || '#107c41'} oninput={(e) => (colour = e.currentTarget.value)} />
+    </label>
+    {#if type !== 'line'}
+      <label class="field">
+        <span>{t('sparklines.negativeColour')}</span>
+        <input type="color" value={negative || '#c42b1c'} oninput={(e) => (negative = e.currentTarget.value)} />
+      </label>
+    {/if}
+    <div class="checks">
+      <label class="check"><input type="checkbox" bind:checked={sameScale} /> {t('sparklines.sameScale')}</label>
+      {#if type === 'line'}
+        <label class="check"><input type="checkbox" bind:checked={markers} /> {t('sparklines.markers')}</label>
+      {/if}
+    </div>
+    {#if error}<p class="error">{error}</p>{/if}
+    <p class="hint">{t('sparklines.hint')}</p>
+  </form>
+  {#snippet footer()}
+    <div class="sv-sheet-dialog-buttons">
+      {#if existing && onDelete}
+        <button type="button" class="btn" onclick={() => { open = false; onDelete?.() }}>{t('delete')}</button>
+      {/if}
+      <span class="spacer"></span>
+      <button type="button" class="btn primary" onclick={ok}>{t('ok')}</button>
+      <button type="button" class="btn" onclick={close}>{t('cancel')}</button>
+    </div>
+  {/snippet}
+</SvModal>
+
+<style>
+  .spacer { flex: 1; }
+  .error { margin: 4px 0 0; color: var(--sg-danger, #c42b1c); font-size: 12px; }
+</style>

package/dist/SvSheetSparklines.svelte.d.ts

@@ -0,0 +1,14 @@
+import { type SparklineGroup } from './sheet/sparklines.js';
+type Props = {
+    open?: boolean;
+    /** The group as it stands, new or being edited. */
+    group: SparklineGroup;
+    /** True when the group is already on the sheet, which offers Delete. */
+    existing?: boolean;
+    onApply: (group: SparklineGroup) => void;
+    onDelete?: () => void;
+    onClose?: () => void;
+};
+declare const SvSheetSparklines: import("svelte").Component<Props, {}, "open">;
+type SvSheetSparklines = ReturnType<typeof SvSheetSparklines>;
+export default SvSheetSparklines;

package/dist/SvSheetTable.svelte

@@ -0,0 +1,160 @@
+<script lang="ts">
+  /**
+   * Excel's Create Table dialog: the cells, whether the first row is the
+   * header, the name the columns will be read by, and a totals row.
+   * Opened by Insert > Table or Ctrl+T, and again on a cell inside one,
+   * which is how a table is renamed or resized.
+   */
+  import { SvModal } from '@svgrid/grid'
+  import { useSheetText } from './sheet-text'
+  import { parseRangeText, rangeText } from './sheet/protection'
+  import { isValidTableName } from './sheet/tables'
+  import {
+    TABLE_STYLES, DEFAULT_TABLE_STYLE, NO_TABLE_STYLE,
+    tableStyleColours, tableStyleLabel,
+  } from './sheet/table-styles'
+  import type { Rect } from './sheet/format-store'
+
+  type Props = {
+    open?: boolean
+    /** The block the table covers, header row included. */
+    range: Rect
+    name: string
+    headers?: boolean
+    totals?: boolean
+    existing?: boolean
+    /** The look, by Excel's name for it, or `'None'`. */
+    style?: string
+    onApply: (table: { range: Rect; name: string; headers: boolean; totals: boolean; style: string }) => void
+    onRemove?: () => void
+    onClose?: () => void
+  }
+
+  let {
+    open = $bindable(false), range, name, headers = true, totals = false, existing = false,
+    style = DEFAULT_TABLE_STYLE, onApply, onRemove, onClose,
+  }: Props = $props()
+  const t = useSheetText()
+
+  let where = $state('')
+  let label = $state('')
+  let hasHeaders = $state(true)
+  let hasTotals = $state(false)
+  let look = $state(DEFAULT_TABLE_STYLE)
+  let error = $state('')
+  let first = $state<HTMLInputElement | null>(null)
+
+  $effect(() => {
+    if (!open) return
+    where = rangeText([range])
+    label = name
+    hasHeaders = headers
+    hasTotals = totals
+    look = style
+    error = ''
+    queueMicrotask(() => first?.focus())
+  })
+
+  function ok() {
+    const rects = parseRangeText(where)
+    const block = rects && rects.length === 1 ? rects[0]! : null
+    if (!block) { error = t('table.badRange'); return }
+    if (!isValidTableName(label.trim())) { error = t('table.badName'); return }
+    open = false
+    onApply({ range: block as Rect, name: label.trim(), headers: hasHeaders, totals: hasTotals, style: look })
+    onClose?.()
+  }
+
+  function close() {
+    open = false
+    onClose?.()
+  }
+</script>
+
+<!-- Opened from inside a table it edits that table, so it does not say
+     Create: the name, the range and the style are the ones it has. -->
+<SvModal bind:open onClose={onClose} title={t(existing ? 'table.editTitle' : 'table.title')} size="sm">
+  <form class="sv-sheet-dialog" onsubmit={(e) => { e.preventDefault(); ok() }}>
+    <label class="field">
+      <span>{t('table.range')}</span>
+      <input type="text" bind:this={first} bind:value={where} spellcheck="false" placeholder={t('table.rangePlaceholder')} />
+    </label>
+    <label class="field">
+      <span>{t('table.name')}</span>
+      <input type="text" bind:value={label} spellcheck="false" placeholder={t('table.namePlaceholder')} />
+    </label>
+    <div class="checks">
+      <label class="check"><input type="checkbox" bind:checked={hasHeaders} /> {t('table.headers')}</label>
+      <label class="check"><input type="checkbox" bind:checked={hasTotals} /> {t('table.totals')}</label>
+    </div>
+    <fieldset class="styles">
+      <legend>{t('table.style')}</legend>
+      <div class="gallery" role="radiogroup" aria-label={t('table.style')}>
+        <button
+          type="button"
+          class="swatch none"
+          class:chosen={look === NO_TABLE_STYLE}
+          role="radio"
+          aria-checked={look === NO_TABLE_STYLE}
+          title={t('table.styleNone')}
+          aria-label={t('table.styleNone')}
+          onclick={() => { look = NO_TABLE_STYLE }}
+        ><span class="row head"></span><span class="row"></span><span class="row"></span></button>
+        {#each TABLE_STYLES as preset (preset.id)}
+          {@const colours = tableStyleColours(preset)}
+          <button
+            type="button"
+            class="swatch"
+            class:chosen={look === preset.id}
+            role="radio"
+            aria-checked={look === preset.id}
+            title={tableStyleLabel(preset)}
+            aria-label={tableStyleLabel(preset)}
+            onclick={() => { look = preset.id }}
+          >
+            <span class="row head" style={`background:${colours?.header}`}></span>
+            <span class="row" style={`background:${colours?.band}`}></span>
+            <span class="row"></span>
+          </button>
+        {/each}
+      </div>
+    </fieldset>
+    {#if error}<p class="error">{error}</p>{/if}
+    <p class="hint">{t('table.hint')}</p>
+  </form>
+  {#snippet footer()}
+    <div class="sv-sheet-dialog-buttons">
+      {#if existing && onRemove}
+        <button type="button" class="btn" onclick={() => { open = false; onRemove?.() }}>{t('delete')}</button>
+      {/if}
+      <span class="spacer"></span>
+      <button type="button" class="btn primary" onclick={ok}>{t('ok')}</button>
+      <button type="button" class="btn" onclick={close}>{t('cancel')}</button>
+    </div>
+  {/snippet}
+</SvModal>
+
+<style>
+  .spacer { flex: 1; }
+  /* The gallery: each swatch is a header band over two body rows, which is
+     the smallest drawing that still says what the style will look like. */
+  .styles { margin: 8px 0 0; padding: 0; border: 0; }
+  .styles legend { padding: 0 0 4px; color: var(--sg-muted, #64748b); font-size: 12px; }
+  .gallery { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
+  .swatch {
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    padding: 2px;
+    border: 1px solid var(--sg-border, #d4d4d8);
+    border-radius: 3px;
+    background: var(--sg-surface, #fff);
+    cursor: pointer;
+  }
+  .swatch .row { display: block; height: 5px; background: var(--sg-surface-2, #f1f5f9); }
+  .swatch .row.head { height: 7px; }
+  .swatch.none .row.head { background: var(--sg-border, #d4d4d8); }
+  .swatch.chosen { outline: 2px solid var(--sg-accent, #107c41); outline-offset: 1px; }
+  .swatch:focus-visible { outline: 2px solid var(--sg-accent, #107c41); outline-offset: 1px; }
+  .error { margin: 4px 0 0; color: var(--sg-danger, #c42b1c); font-size: 12px; }
+</style>

package/dist/SvSheetTable.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { Rect } from './sheet/format-store.js';
+type Props = {
+    open?: boolean;
+    /** The block the table covers, header row included. */
+    range: Rect;
+    name: string;
+    headers?: boolean;
+    totals?: boolean;
+    existing?: boolean;
+    /** The look, by Excel's name for it, or `'None'`. */
+    style?: string;
+    onApply: (table: {
+        range: Rect;
+        name: string;
+        headers: boolean;
+        totals: boolean;
+        style: string;
+    }) => void;
+    onRemove?: () => void;
+    onClose?: () => void;
+};
+declare const SvSheetTable: import("svelte").Component<Props, {}, "open">;
+type SvSheetTable = ReturnType<typeof SvSheetTable>;
+export default SvSheetTable;