@svgrid/enterprise 3.1.7 → 3.1.9

package/dist/fields/viewbar/HideFieldsPanel.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+  /**
+   * The view bar's "Hide fields": a switch per field, a search, hide all /
+   * show all, and drag to reorder. The primary field is always shown.
+   */
+  import { panelFocus } from './panel-focus'
+  import { fieldColumns, primaryIdOf, type FieldColumn } from '../grid-access'
+  import { orderKeepingScreen } from '../column-order'
+  import FieldIcon from './FieldIcon.svelte'
+
+  let { ctrl, api }: { ctrl: any; api: any } = $props()
+
+  let query = $state('')
+  const primary = $derived(primaryIdOf(ctrl))
+  const columns = $derived(fieldColumns(ctrl))
+  const shown = $derived(columns.filter((c) => !query.trim() || c.header.toLowerCase().includes(query.trim().toLowerCase())))
+
+  function setVisible(c: FieldColumn, visible: boolean) {
+    if (c.id === primary && !visible) return
+    api.setColumnVisible(c.id, visible)
+  }
+  function setAll(visible: boolean) {
+    for (const c of columns) if (c.id !== primary) api.setColumnVisible(c.id, visible)
+  }
+
+  // Drag to reorder: the new order is the list's, with columns not in it kept in their slots.
+  let dragId = $state<string | null>(null)
+  let overId = $state<string | null>(null)
+  function drop(targetId: string) {
+    const from = dragId
+    dragId = overId = null
+    if (!from || from === targetId || from === primary || targetId === primary) return
+    const ids = columns.map((c) => c.id)
+    const without = ids.filter((id) => id !== from)
+    without.splice(without.indexOf(targetId) + (ids.indexOf(from) < ids.indexOf(targetId) ? 1 : 0), 0, from)
+    const all: string[] = ctrl.grid.getAllColumns().map((c: { id: string }) => c.id)
+    const user: string[] = ctrl.userColumnOrder ?? []
+    const base = user.length ? [...user, ...all.filter((id) => !user.includes(id))] : all
+    ctrl.setColumnOrderInternal(orderKeepingScreen(base, without))
+  }
+</script>
+
+<div class="sv-fvb-panel sv-fhide" use:panelFocus>
+  <input class="sv-fvb-input" type="search" placeholder="Find a field" aria-label="Find a field" bind:value={query} />
+  <ul class="sv-fhide-list" role="list">
+    {#each shown as c (c.id)}
+      <li
+        class="sv-fhide-item"
+        class:is-over={overId === c.id && dragId !== c.id}
+        draggable={c.id !== primary && !query}
+        ondragstart={(e) => {
+          dragId = c.id
+          e.dataTransfer?.setData('text/plain', c.id)
+        }}
+        ondragover={(e) => {
+          if (!dragId) return
+          e.preventDefault()
+          overId = c.id
+        }}
+        ondragleave={() => {
+          if (overId === c.id) overId = null
+        }}
+        ondrop={(e) => {
+          e.preventDefault()
+          drop(c.id)
+        }}
+        ondragend={() => (dragId = overId = null)}
+      >
+        <label class="sv-fhide-row" title={c.id === primary ? 'The primary field is always shown' : undefined}>
+          <input
+            type="checkbox"
+            role="switch"
+            class="sv-fvb-switch"
+            checked={c.visible}
+            disabled={c.id === primary}
+            onchange={(e) => setVisible(c, (e.currentTarget as HTMLInputElement).checked)}
+          />
+          <FieldIcon column={c} />
+          <span class="sv-fhide-name">{c.header}</span>
+        </label>
+        {#if c.id !== primary && !query}
+          <span class="sv-fhide-grip" aria-hidden="true">
+            <svg viewBox="0 0 24 24" width="14" height="14"><path d="M9 6h.01M15 6h.01M9 12h.01M15 12h.01M9 18h.01M15 18h.01" stroke="currentColor" stroke-width="3" stroke-linecap="round" /></svg>
+          </span>
+        {/if}
+      </li>
+    {/each}
+  </ul>
+  <div class="sv-fvb-foot">
+    <button type="button" class="sv-fvb-text-btn" onclick={() => setAll(false)}>Hide all</button>
+    <button type="button" class="sv-fvb-text-btn" onclick={() => setAll(true)}>Show all</button>
+  </div>
+</div>
+
+<style>
+  .sv-fhide { width: 300px; }
+  .sv-fhide-list { list-style: none; margin: 8px 0; padding: 0; max-height: 320px; overflow: auto; }
+  .sv-fhide-item { display: flex; align-items: center; gap: 4px; border-radius: 6px; padding: 0 4px; }
+  .sv-fhide-item:hover { background: var(--sg-row-hover-bg, #f1f5f9); }
+  .sv-fhide-item.is-over { box-shadow: inset 0 2px 0 var(--sg-accent, #2563eb); }
+  .sv-fhide-row { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; padding: 5px 0; cursor: pointer; }
+  .sv-fhide-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .sv-fhide-grip { color: var(--sg-muted, #64748b); cursor: grab; display: inline-flex; }
+</style>

package/dist/fields/viewbar/HideFieldsPanel.svelte.d.ts

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

package/dist/fields/viewbar/SortPanel.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+  /**
+   * The view bar's "Sort" (and, with `group`, its "Group"): a list of fields
+   * each with a direction labeled for its type ("1 → 9", "A → Z"),
+   * added from a field picker, removed with the bin.
+   */
+  import { panelFocus } from './panel-focus'
+  import { fieldColumns, type FieldColumn } from '../grid-access'
+  import { sortLabels } from '../view-model'
+  import { groupRules, userSorts, writeSortState, type SortRule } from './sort-state'
+  import FieldIcon from './FieldIcon.svelte'
+
+  let { ctrl, api, group = false }: { ctrl: any; api: any; group?: boolean } = $props()
+
+  // Groups go three deep, as in a spreadsheet outline.
+  const MAX_GROUPS = 3
+  const NOT_SORTABLE = new Set(['attachment', 'button'])
+  const columns = $derived(fieldColumns(ctrl).filter((c) => c.def.sortable !== false && !NOT_SORTABLE.has(c.fieldType ?? '')))
+  const rules = $derived(group ? groupRules(ctrl) : userSorts(ctrl))
+  const free = $derived(columns.filter((c) => !rules.some((r) => r.id === c.id)))
+  const col = (id: string): FieldColumn | undefined => columns.find((c) => c.id === id)
+
+  function write(next: SortRule[]) {
+    if (group) writeSortState(api, next, userSorts(ctrl))
+    else writeSortState(api, groupRules(ctrl), next)
+  }
+  const replace = (i: number, r: SortRule) => write(rules.map((x, j) => (j === i ? r : x)))
+  const remove = (i: number) => write(rules.filter((_, j) => j !== i))
+  // "+ Add another sort" opens the list of the fields not sorted by yet.
+  let adding = $state(false)
+  function add(id: string) {
+    adding = false
+    write([...rules, { id, desc: false }])
+  }
+  const canAdd = $derived(free.length > 0 && (!group || rules.length < MAX_GROUPS))
+</script>
+
+<div class="sv-fvb-panel sv-fsort" use:panelFocus>
+  {#if rules.length}
+    <p class="sv-fvb-title">{group ? 'Group by' : 'Sort by'}</p>
+    {#each rules as r, i (r.id)}
+      {@const c = col(r.id)}
+      {@const [up, down] = sortLabels(c?.def)}
+      <div class="sv-fsort-row">
+        <select class="sv-fvb-select" aria-label="Field" value={r.id} onchange={(e) => replace(i, { id: (e.currentTarget as HTMLSelectElement).value, desc: r.desc })}>
+          {#each columns.filter((x) => x.id === r.id || !rules.some((y) => y.id === x.id)) as x (x.id)}<option value={x.id}>{x.header}</option>{/each}
+        </select>
+        <select class="sv-fvb-select" aria-label="Direction" value={r.desc ? 'desc' : 'asc'} onchange={(e) => replace(i, { id: r.id, desc: (e.currentTarget as HTMLSelectElement).value === 'desc' })}>
+          <option value="asc">{up}</option>
+          <option value="desc">{down}</option>
+        </select>
+        <button type="button" class="sv-fvb-icon-btn" aria-label={group ? 'Remove group' : 'Remove sort'} onclick={() => remove(i)}>
+          <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" /></svg>
+        </button>
+      </div>
+    {/each}
+  {/if}
+  {#if !rules.length || adding}
+    {#if !rules.length}<p class="sv-fvb-title">{group ? 'Group by' : 'Sort by'}</p>{/if}
+    <ul class="sv-fsort-fields" role="list" aria-label="Fields">
+      {#each free as x (x.id)}
+        <li>
+          <button type="button" class="sv-fsort-field" onclick={() => add(x.id)}>
+            <FieldIcon column={x} />
+            <span>{x.header}</span>
+          </button>
+        </li>
+      {/each}
+    </ul>
+  {:else if canAdd}
+    <button type="button" class="sv-fvb-text-btn sv-fsort-add" onclick={() => (adding = true)}>{group ? '+ Add subgroup' : '+ Add another sort'}</button>
+  {/if}
+</div>
+
+<style>
+  .sv-fsort { width: 340px; }
+  .sv-fsort-row { display: grid; grid-template-columns: minmax(0, 1fr) 110px 28px; gap: 6px; margin: 6px 0; }
+  .sv-fsort-add { margin-top: 8px; }
+  .sv-fsort-fields { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow: auto; }
+  .sv-fsort-field {
+    display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 6px; border: 0; border-radius: 6px;
+    background: none; color: inherit; font: inherit; text-align: start; cursor: pointer;
+  }
+  .sv-fsort-field:hover { background: var(--sg-row-hover-bg, #f1f5f9); }
+</style>

package/dist/fields/viewbar/SortPanel.svelte.d.ts

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    ctrl: any;
+    api: any;
+    group?: boolean;
+};
+declare const SortPanel: import("svelte").Component<$$ComponentProps, {}, "">;
+type SortPanel = ReturnType<typeof SortPanel>;
+export default SortPanel;

package/dist/fields/viewbar/ViewsMenu.svelte

@@ -0,0 +1,250 @@
+<script lang="ts">
+  /**
+   * The view bar's view switcher: the saved views (switch, rename, duplicate,
+   * delete) and "Create" for a new one of any type the page can show. A
+   * Kanban asks what to stack by, a calendar or Gantt which date field, a
+   * gallery which attachment field makes the cover.
+   */
+  import { panelFocus } from './panel-focus'
+  import { coverColumns, dateColumns, dependencyColumns, progressColumns, stackableColumns, viewTypeInfo, type FieldView, type FieldViewType } from '../view-model'
+  import { CHART_KINDS, chartXColumns, chartYColumns, defaultChart, type ChartSetting } from '../chart-view'
+
+  let {
+    ctrl,
+    views,
+    activeId,
+    types,
+    onSwitch,
+    onCreate,
+    onRename,
+    onDuplicate,
+    onDelete,
+  }: {
+    ctrl: any
+    views: ReadonlyArray<FieldView>
+    activeId: string
+    types: ReadonlyArray<FieldViewType>
+    onSwitch: (id: string) => void
+    onCreate: (view: Omit<FieldView, 'id'>) => void
+    onRename: (id: string, name: string) => void
+    onDuplicate: (id: string) => void
+    onDelete: (id: string) => void
+  } = $props()
+
+  let renaming = $state<string | null>(null)
+  let draft = $state<{ type: FieldViewType; name: string; stackBy?: string; dateField?: string; endField?: string; progressField?: string; dependencyField?: string; coverField?: string; chart?: ChartSetting } | null>(null)
+
+  const stacks = $derived(stackableColumns(ctrl))
+  const dates = $derived(dateColumns(ctrl))
+  const covers = $derived(coverColumns(ctrl))
+  const progresses = $derived(progressColumns(ctrl))
+  const dependencies = $derived(dependencyColumns(ctrl))
+  const chartXs = $derived(chartXColumns(ctrl))
+  const chartYs = $derived(chartYColumns(ctrl))
+  /** A type the table can show: a Kanban needs a field to stack by, a calendar a date, a chart a field to group by. */
+  const possible = (t: FieldViewType) =>
+    t === 'kanban' ? stacks.length > 0 : t === 'calendar' || t === 'gantt' ? dates.length > 0 : t === 'chart' ? chartXs.length > 0 : true
+
+  function nameFor(t: FieldViewType): string {
+    const base = viewTypeInfo(t).label
+    let n = 1
+    const taken = new Set(views.map((v) => v.name))
+    while (taken.has(n === 1 ? base : `${base} ${n}`)) n += 1
+    return n === 1 ? base : `${base} ${n}`
+  }
+  function start(t: FieldViewType) {
+    draft = {
+      type: t,
+      name: nameFor(t),
+      ...(t === 'kanban' ? { stackBy: stacks[0]?.id } : {}),
+      ...(t === 'calendar' || t === 'gantt' ? { dateField: dates[0]?.id, endField: t === 'gantt' ? dates[1]?.id : undefined } : {}),
+      // A Gantt starts with the table's progress and depends-on fields, when it has them.
+      ...(t === 'gantt' ? { progressField: progresses[0]?.id, dependencyField: dependencies[0]?.id } : {}),
+      ...(t === 'gallery' && covers[0] ? { coverField: covers[0].id } : {}),
+      ...(t === 'chart' ? { chart: defaultChart(ctrl) ?? undefined } : {}),
+    }
+  }
+  function create() {
+    if (!draft) return
+    const d = draft
+    draft = null
+    onCreate({ ...d, name: d.name.trim() || nameFor(d.type) })
+  }
+  function focusSelect(node: HTMLInputElement) {
+    node.focus()
+    node.select()
+  }
+</script>
+
+<div class="sv-fvb-panel sv-fviews" use:panelFocus>
+  {#if draft}
+    {@const d = draft}
+    <p class="sv-fvb-title">New {viewTypeInfo(d.type).label.toLowerCase()} view</p>
+    <label class="sv-fviews-field">
+      <span>Name</span>
+      <input class="sv-fvb-input" bind:value={d.name} use:focusSelect onkeydown={(e) => {
+        if (e.key === 'Enter') create()
+      }} />
+    </label>
+    {#if d.type === 'kanban'}
+      <label class="sv-fviews-field">
+        <span>Stack records by</span>
+        <select class="sv-fvb-select" bind:value={d.stackBy}>
+          {#each stacks as c (c.id)}<option value={c.id}>{c.header}</option>{/each}
+        </select>
+      </label>
+    {:else if d.type === 'calendar' || d.type === 'gantt'}
+      <label class="sv-fviews-field">
+        <span>{d.type === 'gantt' ? 'Start date' : 'Date field'}</span>
+        <select class="sv-fvb-select" bind:value={d.dateField}>
+          {#each dates as c (c.id)}<option value={c.id}>{c.header}</option>{/each}
+        </select>
+      </label>
+      <label class="sv-fviews-field">
+        <span>End date</span>
+        <select class="sv-fvb-select" bind:value={d.endField}>
+          <option value={undefined}>None</option>
+          {#each dates.filter((c) => c.id !== d.dateField) as c (c.id)}<option value={c.id}>{c.header}</option>{/each}
+        </select>
+      </label>
+      {#if d.type === 'gantt' && progresses.length}
+        <label class="sv-fviews-field">
+          <span>Progress</span>
+          <select class="sv-fvb-select" bind:value={d.progressField}>
+            <option value={undefined}>None</option>
+            {#each progresses as c (c.id)}<option value={c.id}>{c.header}</option>{/each}
+          </select>
+        </label>
+      {/if}
+      {#if d.type === 'gantt' && dependencies.length}
+        <label class="sv-fviews-field">
+          <span>Depends on</span>
+          <select class="sv-fvb-select" bind:value={d.dependencyField}>
+            <option value={undefined}>None</option>
+            {#each dependencies as c (c.id)}<option value={c.id}>{c.header}</option>{/each}
+          </select>
+        </label>
+      {/if}
+    {:else if d.type === 'chart' && d.chart}
+      {@const c = d.chart}
+      <label class="sv-fviews-field">
+        <span>Chart type</span>
+        <select class="sv-fvb-select" bind:value={c.kind}>
+          {#each CHART_KINDS as k (k.kind)}<option value={k.kind}>{k.label}</option>{/each}
+        </select>
+      </label>
+      <label class="sv-fviews-field">
+        <span>Group by</span>
+        <select class="sv-fvb-select" bind:value={c.x}>
+          {#each chartXs as col (col.id)}<option value={col.id}>{col.header}</option>{/each}
+        </select>
+      </label>
+      <label class="sv-fviews-field">
+        <span>Value</span>
+        <select class="sv-fvb-select" bind:value={c.y}>
+          <option value={undefined}>Number of records</option>
+          {#each chartYs as col (col.id)}<option value={col.id}>Sum of {col.header}</option>{/each}
+        </select>
+      </label>
+    {:else if d.type === 'gallery'}
+      <label class="sv-fviews-field">
+        <span>Cover image</span>
+        <select class="sv-fvb-select" bind:value={d.coverField}>
+          <option value={undefined}>None</option>
+          {#each covers as c (c.id)}<option value={c.id}>{c.header}</option>{/each}
+        </select>
+      </label>
+    {/if}
+    <div class="sv-fvb-foot sv-fviews-actions">
+      <button type="button" class="sv-fvb-text-btn" onclick={() => (draft = null)}>Cancel</button>
+      <button type="button" class="sv-fvb-solid-btn" onclick={create}>Create view</button>
+    </div>
+  {:else}
+    <ul class="sv-fviews-list" role="list">
+      {#each views as v (v.id)}
+        <li class="sv-fviews-item" class:is-active={v.id === activeId}>
+          {#if renaming === v.id}
+            <input
+              class="sv-fvb-input"
+              aria-label="View name"
+              value={v.name}
+              use:focusSelect
+              onkeydown={(e) => {
+                if (e.key === 'Enter') {
+                  onRename(v.id, (e.currentTarget as HTMLInputElement).value.trim() || v.name)
+                  renaming = null
+                } else if (e.key === 'Escape') {
+                  e.stopPropagation()
+                  renaming = null
+                }
+              }}
+              onblur={(e) => {
+                onRename(v.id, (e.currentTarget as HTMLInputElement).value.trim() || v.name)
+                renaming = null
+              }}
+            />
+          {:else}
+            <button type="button" class="sv-fviews-pick" aria-current={v.id === activeId ? 'true' : undefined} onclick={() => onSwitch(v.id)}>
+              <svg viewBox="0 0 24 24" width="15" height="15" aria-hidden="true"><path d={viewTypeInfo(v.type).icon} fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" /></svg>
+              <span>{v.name}</span>
+            </button>
+            <span class="sv-fviews-acts">
+              <button type="button" class="sv-fvb-icon-btn" aria-label={`Rename ${v.name}`} title="Rename" onclick={() => (renaming = v.id)}>
+                <svg viewBox="0 0 24 24" width="13" height="13" aria-hidden="true"><path d="M4 20h4L19 9l-4-4L4 16z" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linejoin="round" /></svg>
+              </button>
+              <button type="button" class="sv-fvb-icon-btn" aria-label={`Duplicate ${v.name}`} title="Duplicate" onclick={() => onDuplicate(v.id)}>
+                <svg viewBox="0 0 24 24" width="13" height="13" aria-hidden="true"><path d="M8 8h12v12H8zM16 8V4H4v12h4" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linejoin="round" /></svg>
+              </button>
+              {#if views.length > 1}
+                <button type="button" class="sv-fvb-icon-btn" aria-label={`Delete ${v.name}`} title="Delete" onclick={() => onDelete(v.id)}>
+                  <svg viewBox="0 0 24 24" width="13" height="13" aria-hidden="true"><path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linejoin="round" /></svg>
+                </button>
+              {/if}
+            </span>
+          {/if}
+        </li>
+      {/each}
+    </ul>
+    <p class="sv-fvb-title sv-fviews-create">Create</p>
+    <ul class="sv-fviews-types" role="list">
+      {#each types as t (t)}
+        {@const info = viewTypeInfo(t)}
+        <li>
+          <button
+            type="button"
+            class="sv-fviews-type"
+            disabled={!possible(t)}
+            title={possible(t) ? undefined : t === 'kanban' ? 'Needs a single select field' : t === 'chart' ? 'Needs a field to group by' : 'Needs a date field'}
+            onclick={() => start(t)}
+          >
+            <svg viewBox="0 0 24 24" width="15" height="15" aria-hidden="true"><path d={info.icon} fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" /></svg>
+            <span>{info.label}</span>
+            <svg class="sv-fviews-plus" viewBox="0 0 24 24" width="13" height="13" aria-hidden="true"><path d="M12 5v14M5 12h14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" /></svg>
+          </button>
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</div>
+
+<style>
+  .sv-fviews { width: 260px; }
+  .sv-fviews-list, .sv-fviews-types { list-style: none; margin: 0; padding: 0; }
+  .sv-fviews-item { display: flex; align-items: center; gap: 2px; border-radius: 6px; }
+  .sv-fviews-item:hover, .sv-fviews-item.is-active { background: var(--sg-row-hover-bg, #f1f5f9); }
+  .sv-fviews-item .sv-fviews-acts { display: none; }
+  .sv-fviews-item:hover .sv-fviews-acts, .sv-fviews-item:focus-within .sv-fviews-acts { display: inline-flex; }
+  .sv-fviews-pick, .sv-fviews-type {
+    display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; padding: 6px 8px; border: 0; border-radius: 6px;
+    background: none; color: inherit; font: inherit; text-align: start; cursor: pointer;
+  }
+  .sv-fviews-pick span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .sv-fviews-item.is-active .sv-fviews-pick { font-weight: 600; }
+  .sv-fviews-type:hover:not(:disabled) { background: var(--sg-row-hover-bg, #f1f5f9); }
+  .sv-fviews-type:disabled { opacity: 0.45; cursor: default; }
+  .sv-fviews-plus { margin-inline-start: auto; color: var(--sg-muted, #64748b); }
+  .sv-fviews-create { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--sg-border, #e2e8f0); }
+  .sv-fviews-field { display: grid; gap: 4px; margin: 8px 0; }
+  .sv-fviews-field > span { font-size: 12px; color: var(--sg-muted, #64748b); }
+  .sv-fviews-actions { justify-content: flex-end; }
+</style>

package/dist/fields/viewbar/ViewsMenu.svelte.d.ts

@@ -0,0 +1,15 @@
+import { type FieldView, type FieldViewType } from '../view-model.js';
+type $$ComponentProps = {
+    ctrl: any;
+    views: ReadonlyArray<FieldView>;
+    activeId: string;
+    types: ReadonlyArray<FieldViewType>;
+    onSwitch: (id: string) => void;
+    onCreate: (view: Omit<FieldView, 'id'>) => void;
+    onRename: (id: string, name: string) => void;
+    onDuplicate: (id: string) => void;
+    onDelete: (id: string) => void;
+};
+declare const ViewsMenu: import("svelte").Component<$$ComponentProps, {}, "">;
+type ViewsMenu = ReturnType<typeof ViewsMenu>;
+export default ViewsMenu;

package/dist/fields/viewbar/panel-focus.d.ts

@@ -0,0 +1,3 @@
+export declare function panelFocus(node: HTMLElement): {
+    destroy: () => void;
+};

package/dist/fields/viewbar/panel-focus.js

@@ -0,0 +1,22 @@
+/**
+ * The view bar's panels open in a layer on <body>, after the bar in the page,
+ * so Tab from the button would not reach them. On open a panel takes focus
+ * (its first control); on close, if focus was still in it, focus goes back to
+ * what had it before (the button that opened it).
+ */
+const FOCUSABLE = 'input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex="-1"])';
+export function panelFocus(node) {
+    const before = document.activeElement;
+    queueMicrotask(() => {
+        if (!node.isConnected || node.contains(document.activeElement))
+            return;
+        node.querySelector(FOCUSABLE)?.focus();
+    });
+    return {
+        destroy() {
+            const active = document.activeElement;
+            if ((!active || active === document.body || node.contains(active)) && before?.isConnected)
+                before.focus();
+        },
+    };
+}

package/dist/fields/viewbar/sort-state.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Sorts and groups share the grid's sort state: a grouped field's direction
+ * is a sort entry ahead of the sorts the user picked, so the groups come in
+ * that order. These read the two apart and write them back together.
+ */
+export type SortRule = {
+    id: string;
+    desc: boolean;
+};
+/** The grid's sorting and grouping, read so a `$derived` follows them. */
+export declare function sortState(ctrl: any): {
+    sorting: SortRule[];
+    grouping: string[];
+};
+/** The user's sorts: every sort entry that is not a group's direction. */
+export declare const userSorts: (ctrl: any) => SortRule[];
+/** Each grouped field with its direction (ascending when it has no entry). */
+export declare const groupRules: (ctrl: any) => SortRule[];
+/** Write groups and sorts back as one sort state (groups first) and the grouping. */
+export declare function writeSortState(api: any, groups: SortRule[], sorts: SortRule[]): void;

package/dist/fields/viewbar/sort-state.js

@@ -0,0 +1,24 @@
+/** The grid's sorting and grouping, read so a `$derived` follows them. */
+export function sortState(ctrl) {
+    void ctrl.gridStateVersion;
+    const s = ctrl.grid?.getState?.() ?? {};
+    return { sorting: [...(s.sorting ?? [])], grouping: [...(s.grouping ?? [])] };
+}
+/** The user's sorts: every sort entry that is not a group's direction. */
+export const userSorts = (ctrl) => {
+    const { sorting, grouping } = sortState(ctrl);
+    return sorting.filter((s) => !grouping.includes(s.id));
+};
+/** Each grouped field with its direction (ascending when it has no entry). */
+export const groupRules = (ctrl) => {
+    const { sorting, grouping } = sortState(ctrl);
+    return grouping.map((id) => ({ id, desc: !!sorting.find((s) => s.id === id)?.desc }));
+};
+/** Write groups and sorts back as one sort state (groups first) and the grouping. */
+export function writeSortState(api, groups, sorts) {
+    const grouped = groups.map((g) => g.id);
+    api.setState({
+        sorting: [...groups, ...sorts.filter((s) => !grouped.includes(s.id))],
+        grouping: grouped,
+    });
+}

package/dist/gallery.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Register the Enterprise gallery view. Idempotent - safe to call from every
+ * component that uses `gallery`, or once at app start. Also invoked by
+ * {@link installEnterprise} so wiring the Pro API turns the view on too.
+ */
+export declare function enableGalleryView(): void;
+export { default as SvGridGallery } from './SvGridGallery.svelte';

package/dist/gallery.js

@@ -0,0 +1,36 @@
+/**
+ * gallery (view) - registers the Enterprise gallery renderer with the grid so
+ * `<SvGrid gallery={...}>` renders its rows as cards instead of the table.
+ * The grid ships the `gallery` prop and its config type for free; the
+ * *renderer* (SvGridGallery) is Pro and plugs in through the grid's
+ * `registerGalleryView` seam.
+ *
+ * Like the rest of Enterprise it runs without a license key during the
+ * evaluation; the grid shows the watermark and a one-time console notice.
+ *
+ * ```ts
+ * import { setLicenseKey, enableGalleryView } from '@svgrid/enterprise'
+ * setLicenseKey('YOUR-KEY')
+ * enableGalleryView()
+ * // then: <SvGrid {data} {columns} gallery={{ coverField: 'photo' }} />
+ * ```
+ */
+import { registerGalleryView } from '@svgrid/grid';
+import { hasValidLicense } from './license.js';
+import { emitUnlicensedNudge } from './watermark.js';
+import SvGridGallery from './SvGridGallery.svelte';
+let enabled = false;
+/**
+ * Register the Enterprise gallery view. Idempotent - safe to call from every
+ * component that uses `gallery`, or once at app start. Also invoked by
+ * {@link installEnterprise} so wiring the Pro API turns the view on too.
+ */
+export function enableGalleryView() {
+    if (enabled)
+        return;
+    enabled = true;
+    registerGalleryView(SvGridGallery);
+    if (!hasValidLicense())
+        emitUnlicensedNudge();
+}
+export { default as SvGridGallery } from './SvGridGallery.svelte';