@svgrid/grid 1.2.21 → 1.2.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svgrid/grid",
-  "version": "1.2.21",
+  "version": "1.2.23",
   "description": "SvGrid - a headless-first, Svelte 5-native data grid engine and render component.",
   "author": "jQWidgets <boikom@jqwidgets.com>",
   "license": "MIT",
@@ -42,6 +42,11 @@
       "svelte": "./dist/static-functions.js",
       "import": "./dist/static-functions.js"
     },
+    "./format": {
+      "types": "./dist/export-format.d.ts",
+      "svelte": "./dist/export-format.js",
+      "import": "./dist/export-format.js"
+    },
     "./flex-render": {
       "types": "./dist/flex-render.d.ts",
       "svelte": "./dist/flex-render.js",

package/src/GridFooter.svelte

@@ -47,7 +47,23 @@
     } from "./SvGrid.controller.svelte";
   import type { SvGridController } from "./SvGrid.controller.svelte";
 
-  let { ctrl }: { ctrl: SvGridController<TFeatures, TData> } = $props();
+  let {
+    ctrl,
+    pager = true,
+    showStatus = true,
+    top = false,
+    pageSizeOptions,
+  }: {
+    ctrl: SvGridController<TFeatures, TData>;
+    /** Render the pagination controls in this instance. */
+    pager?: boolean;
+    /** Render the status bar in this instance. */
+    showStatus?: boolean;
+    /** This is a top-positioned footer (styling only). */
+    top?: boolean;
+    /** Page-size choices for the selector. Defaults to `[10, 25, 50, 100]`. */
+    pageSizeOptions?: number[];
+  } = $props();
 
   // View facade: re-bind the controller's reactive members so the markup
   // (moved verbatim from SvGrid.svelte) stays identical.
@@ -63,7 +79,7 @@
   const setPageSize = $derived(ctrl.setPageSize);
 </script>
 
-    {#if statusBarEnabled && statusBarStats}
+    {#if showStatus && statusBarEnabled && statusBarStats}
       {@const s = statusBarStats}
       <div class="sv-grid-status-bar" role="status" aria-live="polite">
         {#each statusBarAggregates as agg (agg)}
@@ -96,31 +112,29 @@
       </div>
     {/if}
 
-    {#if paginationEnabled}
-      {@const totalRows = allRowsBeforePagination.length}
-      {@const pageSize = paginationState.pageSize}
+    {#if pager && paginationEnabled}
+      {@const totalRows = ctrl.paginationTotalRows}
+      {@const pageSize = ctrl.paginationPageSize}
       {@const pageCount = Math.max(1, Math.ceil(totalRows / pageSize))}
-      {@const currentPage = Math.min(paginationState.pageIndex + 1, pageCount)}
+      {@const currentPage = Math.min(ctrl.paginationPageIndex + 1, pageCount)}
       {@const rangeStart =
         totalRows === 0 ? 0 : (currentPage - 1) * pageSize + 1}
       {@const rangeEnd = Math.min(totalRows, currentPage * pageSize)}
       {@const onFirst = currentPage <= 1}
       {@const onLast = currentPage >= pageCount}
-      <div class="sv-grid-pagination" role="navigation" aria-label="Pagination">
-        <label class="sv-grid-pagination-pagesize">
+      {@const sizes = pageSizeOptions && pageSizeOptions.length ? pageSizeOptions : [10, 25, 50, 100]}
+      <div class="sv-grid-pagination" class:sv-grid-pagination-top={top} role="navigation" aria-label="Pagination">
+        <div class="sv-grid-pagination-pagesize">
           <span>Page Size:</span>
-          <select
-            onchange={(event) =>
-              setPageSize(
-                parseInt((event.currentTarget as HTMLSelectElement).value, 10),
-              )}
-          >
-            <option value="10" selected={pageSize === 10}>10</option>
-            <option value="25" selected={pageSize === 25}>25</option>
-            <option value="50" selected={pageSize === 50}>50</option>
-            <option value="100" selected={pageSize === 100}>100</option>
-          </select>
-        </label>
+          <div class="sv-grid-pagination-pagesize-dd">
+            <SvGridDropdown
+              options={sizes.map((n) => ({ value: n, label: String(n) }))}
+              value={pageSize}
+              autoOpen={false}
+              onChange={(v) => setPageSize(Number(v))}
+            />
+          </div>
+        </div>
         <span class="sv-grid-pagination-range">
           <strong>{rangeStart.toLocaleString()}</strong> to
           <strong>{rangeEnd.toLocaleString()}</strong> of

package/src/SvAutoComplete.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+  /**
+   * SvAutoComplete - a free-text input with a live-filtered suggestion list.
+   * Unlike SvComboBox, it accepts ANY value (the text), suggestions are just
+   * shortcuts. Parity: Smart `smart-input` (autocomplete). Emits the text string.
+   */
+  import { anchoredRect, portalToBody, type AnchoredRect } from './popover'
+  import { filterOptions, type ListOption } from './list-option'
+
+  type Props = {
+    value?: string
+    onChange?: (value: string) => void
+    /** Suggestions - strings or {value,label} (label is shown, value inserted). */
+    suggestions?: ReadonlyArray<string | ListOption>
+    minChars?: number
+    placeholder?: string
+    disabled?: boolean
+    name?: string
+    size?: 'sm' | 'md' | 'lg'
+    ariaLabel?: string
+  }
+
+  let { value = '', onChange, suggestions = [], minChars = 1, placeholder, disabled = false, name, size = 'md', ariaLabel }: Props = $props()
+
+  const asOptions = $derived<ListOption[]>(
+    suggestions.map((s) => (typeof s === 'string' ? { value: s, label: s } : s)),
+  )
+
+  let open = $state(false)
+  let active = $state(0)
+  let fieldEl = $state<HTMLInputElement | null>(null)
+  let panelEl = $state<HTMLDivElement | null>(null)
+  let rect = $state<AnchoredRect>({ top: 0, left: 0, width: 0, openUpward: false })
+
+  const filtered = $derived(value.length >= minChars ? filterOptions(asOptions, value).slice(0, 10) : [])
+
+  function updatePos() {
+    if (!fieldEl) return
+    rect = anchoredRect(fieldEl.getBoundingClientRect(), { estimatedHeight: Math.min(filtered.length, 8) * 34 + 8 })
+  }
+  function maybeOpen() { open = filtered.length > 0; if (open) { active = 0; updatePos() } }
+  function pick(o: ListOption | undefined) { if (!o) return; onChange?.(String(o.value)); open = false; fieldEl?.focus() }
+  function onInput(e: Event) { onChange?.((e.currentTarget as HTMLInputElement).value); queueMicrotask(maybeOpen) }
+  function onKeydown(e: KeyboardEvent) {
+    if (!open) { if (e.key === 'ArrowDown') { queueMicrotask(maybeOpen) } return }
+    if (e.key === 'ArrowDown') { e.preventDefault(); active = Math.min(active + 1, filtered.length - 1) }
+    else if (e.key === 'ArrowUp') { e.preventDefault(); active = Math.max(active - 1, 0) }
+    else if (e.key === 'Enter') { e.preventDefault(); pick(filtered[active]) }
+    else if (e.key === 'Escape') { open = false }
+  }
+
+  $effect(() => {
+    if (!open) return
+    const rp = () => updatePos()
+    window.addEventListener('scroll', rp, true); window.addEventListener('resize', rp)
+    const od = (e: PointerEvent) => { const t = e.target as Node | null; if (t && (fieldEl?.contains(t) || panelEl?.contains(t))) return; open = false }
+    document.addEventListener('pointerdown', od, true)
+    return () => { window.removeEventListener('scroll', rp, true); window.removeEventListener('resize', rp); document.removeEventListener('pointerdown', od, true) }
+  })
+</script>
+
+<input
+  bind:this={fieldEl}
+  class="sv-ac sv-ac--{size}"
+  type="text"
+  role="combobox"
+  aria-expanded={open}
+  aria-autocomplete="list"
+  value={value}
+  {placeholder}
+  {disabled}
+  aria-label={ariaLabel}
+  oninput={onInput}
+  onfocus={maybeOpen}
+  onkeydown={onKeydown}
+/>
+
+{#if open}
+  <div bind:this={panelEl} class="sv-ddl__panel" use:portalToBody style:position="fixed" style:top={`${rect.top}px`} style:left={`${rect.left}px`} style:min-width={`${rect.width}px`} role="listbox">
+    {#each filtered as opt, i (opt.value)}
+      <!-- svelte-ignore a11y_click_events_have_key_events a11y_interactive_supports_focus -->
+      <div class="sv-ddl__opt" class:is-active={i === active} role="option" tabindex="-1" aria-selected={i === active} data-idx={i} onclick={() => pick(opt)} onpointermove={() => (active = i)}>{opt.label}</div>
+    {/each}
+  </div>
+{/if}
+{#if name}<input type="hidden" {name} value={value} />{/if}
+
+<style>
+  .sv-ac {
+    --_accent: var(--sg-accent, #2563eb);
+    box-sizing: border-box; width: 220px;
+    background: var(--sg-input-bg, #fff); color: var(--sg-fg, #0f172a);
+    border: 1px solid var(--sg-input-border, var(--sg-border, #cbd5e1)); border-radius: var(--sg-radius, 8px);
+    font: inherit; padding: 0 10px; outline: none;
+  }
+  .sv-ac--sm { height: 28px; font-size: 12px; }
+  .sv-ac--md { height: 34px; font-size: 13px; }
+  .sv-ac--lg { height: 40px; font-size: 15px; }
+  .sv-ac:focus { border-color: var(--_accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_accent) 22%, transparent); }
+</style>

package/src/SvButton.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+  /**
+   * SvButton - the base button primitive for the SvGrid UI kit. Variants, sizes,
+   * loading + icon slots. Pure `--sg-*` theming. Parity: Smart `smart-button`.
+   */
+  import type { Snippet } from 'svelte'
+
+  type Props = {
+    variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger'
+    size?: 'sm' | 'md' | 'lg'
+    type?: 'button' | 'submit' | 'reset'
+    disabled?: boolean
+    loading?: boolean
+    /** Stretch to the container width. */
+    block?: boolean
+    href?: string
+    ariaLabel?: string
+    onclick?: (e: MouseEvent) => void
+    children?: Snippet
+    /** Leading icon snippet. */
+    icon?: Snippet
+  }
+
+  let {
+    variant = 'primary',
+    size = 'md',
+    type = 'button',
+    disabled = false,
+    loading = false,
+    block = false,
+    href,
+    ariaLabel,
+    onclick,
+    children,
+    icon,
+  }: Props = $props()
+
+  const isDisabled = $derived(disabled || loading)
+</script>
+
+<svelte:element
+  this={href && !isDisabled ? 'a' : 'button'}
+  class="sv-btn sv-btn--{variant} sv-btn--{size}"
+  class:sv-btn--block={block}
+  class:is-loading={loading}
+  role={href ? 'button' : undefined}
+  href={href && !isDisabled ? href : undefined}
+  type={href ? undefined : type}
+  disabled={href ? undefined : isDisabled}
+  aria-disabled={isDisabled}
+  aria-label={ariaLabel}
+  aria-busy={loading}
+  onclick={(e: MouseEvent) => { if (isDisabled) { e.preventDefault(); return } onclick?.(e) }}
+>
+  {#if loading}<span class="sv-btn__spinner" aria-hidden="true"></span>{/if}
+  {#if icon}<span class="sv-btn__icon">{@render icon()}</span>{/if}
+  {#if children}<span class="sv-btn__label">{@render children()}</span>{/if}
+</svelte:element>
+
+<style>
+  .sv-btn {
+    --_accent: var(--sg-accent, #2563eb);
+    --_on-accent: var(--sg-on-accent, #fff);
+    --_border: var(--sg-border, #cbd5e1);
+    --_radius: var(--sg-radius, 8px);
+    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
+    font: inherit; font-weight: 600; line-height: 1; white-space: nowrap;
+    border: 1px solid transparent; border-radius: var(--_radius); cursor: pointer;
+    text-decoration: none; user-select: none; transition: background 0.12s, border-color 0.12s, opacity 0.12s;
+  }
+  .sv-btn--sm { padding: 5px 10px; font-size: 12px; }
+  .sv-btn--md { padding: 8px 14px; font-size: 13px; }
+  .sv-btn--lg { padding: 11px 18px; font-size: 15px; }
+  .sv-btn--block { width: 100%; }
+  .sv-btn[disabled], .sv-btn[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; }
+
+  .sv-btn--primary { background: var(--_accent); color: var(--_on-accent); }
+  .sv-btn--primary:hover:not([disabled]):not([aria-disabled='true']) { background: color-mix(in srgb, var(--_accent) 88%, #000); }
+  .sv-btn--secondary { background: var(--sg-header-bg, #f1f5f9); color: var(--sg-fg, #0f172a); border-color: var(--_border); }
+  .sv-btn--secondary:hover:not([disabled]) { background: var(--sg-row-hover-bg, #e2e8f0); }
+  .sv-btn--outline { background: transparent; color: var(--_accent); border-color: var(--_accent); }
+  .sv-btn--outline:hover:not([disabled]) { background: color-mix(in srgb, var(--_accent) 10%, transparent); }
+  .sv-btn--ghost { background: transparent; color: var(--sg-fg, #0f172a); }
+  .sv-btn--ghost:hover:not([disabled]) { background: var(--sg-row-hover-bg, rgba(0,0,0,0.05)); }
+  .sv-btn--danger { background: var(--sg-danger, #dc2626); color: #fff; }
+  .sv-btn--danger:hover:not([disabled]) { background: color-mix(in srgb, var(--sg-danger, #dc2626) 88%, #000); }
+
+  .sv-btn:focus-visible { outline: 2px solid var(--sg-focus-ring, var(--_accent)); outline-offset: 2px; }
+
+  .sv-btn__spinner {
+    width: 13px; height: 13px; border-radius: 50%;
+    border: 2px solid currentColor; border-top-color: transparent;
+    animation: sv-btn-spin 0.6s linear infinite;
+  }
+  .sv-btn__icon { display: inline-flex; }
+  @keyframes sv-btn-spin { to { transform: rotate(360deg); } }
+</style>