@svadmin/ui 0.72.0 → 0.74.0

package/dist/components/RangeSlider.svelte

@@ -0,0 +1,127 @@
+<script lang="ts">
+  import { cn } from '../utils.js';
+
+  export interface RangeSliderValue {
+    min: number;
+    max: number;
+  }
+
+  interface Props {
+    value?: RangeSliderValue;
+    min?: number;
+    max?: number;
+    step?: number;
+    minName?: string;
+    maxName?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    describedby?: string;
+    ariaLabel?: string;
+    showValue?: boolean;
+    class?: string;
+    onchange?: (value: RangeSliderValue) => void;
+  }
+
+  let {
+    value = $bindable({ min: 0, max: 100 }),
+    min = 0,
+    max = 100,
+    step = 1,
+    minName,
+    maxName,
+    disabled = false,
+    invalid = false,
+    describedby,
+    ariaLabel,
+    showValue = false,
+    class: className = '',
+    onchange,
+  }: Props = $props();
+
+  const boundsValid = $derived(
+    Number.isFinite(min) && Number.isFinite(max) && min < max
+      && Number.isFinite(step) && step > 0,
+  );
+  const lower = $derived(boundsValid ? Math.min(max, Math.max(min, value.min)) : min);
+  const upper = $derived(boundsValid ? Math.min(max, Math.max(lower, value.max)) : max);
+
+  function update(part: 'min' | 'max', raw: string): void {
+    if (disabled || !boundsValid) return;
+    const next = Number(raw);
+    if (!Number.isFinite(next)) return;
+    const result = part === 'min'
+      ? { min: Math.min(next, upper), max: upper }
+      : { min: lower, max: Math.max(next, lower) };
+    value = result;
+    onchange?.(result);
+  }
+</script>
+
+<div class={cn('svadmin-range-slider', className)} data-invalid={invalid ? 'true' : undefined}>
+  {#if minName}<input type="hidden" name={minName} value={lower} />{/if}
+  {#if maxName}<input type="hidden" name={maxName} value={upper} />{/if}
+  <div class="svadmin-range-slider__tracks">
+    <input
+      type="range"
+      value={lower}
+      {min}
+      max={upper}
+      {step}
+      disabled={disabled}
+      aria-label={ariaLabel ? `${ariaLabel} minimum` : 'Minimum'}
+      aria-invalid={invalid || undefined}
+      aria-describedby={describedby}
+      oninput={(event) => update('min', (event.currentTarget as HTMLInputElement).value)}
+    />
+    <input
+      type="range"
+      value={upper}
+      min={lower}
+      {max}
+      {step}
+      disabled={disabled}
+      aria-label={ariaLabel ? `${ariaLabel} maximum` : 'Maximum'}
+      aria-invalid={invalid || undefined}
+      aria-describedby={describedby}
+      oninput={(event) => update('max', (event.currentTarget as HTMLInputElement).value)}
+    />
+  </div>
+  {#if showValue}<output>{lower} - {upper}</output>{/if}
+</div>
+
+<style>
+  .svadmin-range-slider {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    inline-size: 100%;
+  }
+
+  .svadmin-range-slider__tracks {
+    display: grid;
+    flex: 1 1 auto;
+    min-inline-size: 0;
+  }
+
+  .svadmin-range-slider__tracks input {
+    grid-area: 1 / 1;
+    inline-size: 100%;
+    margin: 0;
+    accent-color: var(--primary);
+  }
+
+  .svadmin-range-slider__tracks input:last-child {
+    pointer-events: none;
+  }
+
+  .svadmin-range-slider__tracks input:last-child:focus-visible {
+    pointer-events: auto;
+  }
+
+  .svadmin-range-slider output {
+    min-inline-size: 7ch;
+    color: var(--muted-foreground);
+    text-align: end;
+    font-variant-numeric: tabular-nums;
+  }
+</style>

package/dist/components/RangeSlider.svelte.d.ts

@@ -0,0 +1,22 @@
+export interface RangeSliderValue {
+    min: number;
+    max: number;
+}
+interface Props {
+    value?: RangeSliderValue;
+    min?: number;
+    max?: number;
+    step?: number;
+    minName?: string;
+    maxName?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    describedby?: string;
+    ariaLabel?: string;
+    showValue?: boolean;
+    class?: string;
+    onchange?: (value: RangeSliderValue) => void;
+}
+declare const RangeSlider: import("svelte").Component<Props, {}, "value">;
+type RangeSlider = ReturnType<typeof RangeSlider>;
+export default RangeSlider;

package/dist/components/Rate.svelte

@@ -0,0 +1,121 @@
+<script lang="ts">
+  import { Star } from '@lucide/svelte';
+  import { cn } from '../utils.js';
+
+  interface Props {
+    value?: number;
+    count?: number;
+    allowClear?: boolean;
+    name?: string;
+    disabled?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    describedby?: string;
+    ariaLabel?: string;
+    class?: string;
+    onchange?: (value: number) => void;
+  }
+
+  let {
+    value = $bindable(0),
+    count = 5,
+    allowClear = true,
+    name,
+    disabled = false,
+    required = false,
+    invalid = false,
+    describedby,
+    ariaLabel = 'Rating',
+    class: className = '',
+    onchange,
+  }: Props = $props();
+
+  const normalizedCount = $derived(Number.isSafeInteger(count) && count > 0 && count <= 10 ? count : 5);
+  const normalizedValue = $derived(Math.min(normalizedCount, Math.max(0, Math.round(value))));
+
+  function choose(next: number): void {
+    if (disabled) return;
+    const selected = allowClear && normalizedValue === next ? 0 : next;
+    value = selected;
+    onchange?.(selected);
+  }
+
+  function handleKeydown(event: KeyboardEvent, index: number): void {
+    if (disabled) return;
+    if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {
+      event.preventDefault();
+      choose(Math.min(normalizedCount, index + 2));
+    } else if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {
+      event.preventDefault();
+      choose(Math.max(0, index));
+    } else if (event.key === 'Home') {
+      event.preventDefault();
+      choose(0);
+    } else if (event.key === 'End') {
+      event.preventDefault();
+      choose(normalizedCount);
+    }
+  }
+</script>
+
+<div
+  class={cn('svadmin-rate', className)}
+  role="radiogroup"
+  aria-label={ariaLabel}
+  aria-invalid={invalid || undefined}
+  aria-describedby={describedby}
+  data-invalid={invalid ? 'true' : undefined}
+>
+  {#if name}<input type="hidden" {name} value={normalizedValue} required={required} />{/if}
+  {#each Array(normalizedCount) as _, index (index)}
+    {@const rating = index + 1}
+    <button
+      type="button"
+      role="radio"
+      aria-label={`${rating} of ${normalizedCount}`}
+      aria-checked={normalizedValue >= rating}
+      aria-disabled={disabled ? 'true' : undefined}
+      tabindex={disabled ? -1 : normalizedValue === rating || (normalizedValue === 0 && index === 0) ? 0 : -1}
+      disabled={disabled}
+      onclick={() => choose(rating)}
+      onkeydown={(event) => handleKeydown(event, index)}
+    >
+      <Star fill={normalizedValue >= rating ? 'currentColor' : 'none'} aria-hidden="true" />
+    </button>
+  {/each}
+</div>
+
+<style>
+  .svadmin-rate {
+    display: inline-flex;
+    align-items: center;
+    gap: 2px;
+  }
+
+  .svadmin-rate button {
+    display: inline-grid;
+    place-items: center;
+    min-inline-size: 32px;
+    min-block-size: 32px;
+    padding: 4px;
+    border: 0;
+    border-radius: 4px;
+    background: transparent;
+    color: var(--muted-foreground);
+    cursor: pointer;
+  }
+
+  .svadmin-rate button[aria-checked='true'] {
+    color: var(--warning);
+  }
+
+  .svadmin-rate button:focus-visible {
+    outline: 2px solid var(--ring);
+    outline-offset: 2px;
+  }
+
+  .svadmin-rate button:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+</style>

package/dist/components/Rate.svelte.d.ts

@@ -0,0 +1,16 @@
+interface Props {
+    value?: number;
+    count?: number;
+    allowClear?: boolean;
+    name?: string;
+    disabled?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    describedby?: string;
+    ariaLabel?: string;
+    class?: string;
+    onchange?: (value: number) => void;
+}
+declare const Rate: import("svelte").Component<Props, {}, "value">;
+type Rate = ReturnType<typeof Rate>;
+export default Rate;

package/dist/components/RecordDetailDrawer.svelte

@@ -1,15 +1,19 @@
 <script lang="ts">
+  import type { ResourceRendering } from '../rendering/index.js';
   import { definedOptions } from '@svadmin/core/options';
+  import type { Snippet } from 'svelte';
   import { captureAdminContext } from '@svadmin/core';
   import { useTranslation } from '@svadmin/core/i18n';
   import BoundRecordDetailDrawer from './BoundRecordDetailDrawer.svelte';
   import DetailDrawer from './DetailDrawer.svelte';
 
-  let { resourceName, open = $bindable(false), recordId, onClose }: {
+  let { resourceName, rendering, open = $bindable(false), recordId, onClose, extraSections }: {
     resourceName: string;
+    rendering?: ResourceRendering | undefined;
     open?: boolean;
     recordId?: string | number;
     onClose?: () => void;
+    extraSections?: Snippet;
   } = $props();
   const context = captureAdminContext();
   const i18n = useTranslation();
@@ -17,7 +21,7 @@
 
 {#if open}
   {#if recordId != null}
-    <BoundRecordDetailDrawer {resourceName} {recordId} bind:open {...definedOptions({ onClose })} />
+    <BoundRecordDetailDrawer {resourceName} {recordId} {rendering} bind:open {...definedOptions({ onClose, extraSections })} />
   {:else}
     <DetailDrawer bind:open title="{context.getResource(resourceName).label} {i18n.t('common.detail')}"
       closeLabel={i18n.t('common.close')} {...definedOptions({ onClose })} data-svadmin-record-detail>

package/dist/components/RecordDetailDrawer.svelte.d.ts

@@ -1,8 +1,12 @@
+import type { ResourceRendering } from '../rendering/index.js';
+import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     resourceName: string;
+    rendering?: ResourceRendering | undefined;
     open?: boolean;
     recordId?: string | number;
     onClose?: () => void;
+    extraSections?: Snippet;
 };
 declare const RecordDetailDrawer: import("svelte").Component<$$ComponentProps, {}, "open">;
 type RecordDetailDrawer = ReturnType<typeof RecordDetailDrawer>;

package/dist/components/RelationPicker.svelte

@@ -0,0 +1,341 @@
+<script lang="ts">
+  import { Check, ChevronsUpDown, Loader2, Search, X } from '@lucide/svelte';
+  import { definedReactiveOptions } from '@svadmin/core/options';
+  import { captureAdminContext, captureAuthSession, useResourceContract, useSelect, useCan } from '@svadmin/core';
+  import type { BaseRecord, Filter, KnownResources } from '@svadmin/core';
+  import { useTranslation } from '@svadmin/core/i18n';
+  import { onDestroy, untrack } from 'svelte';
+  import { Badge } from './ui/badge/index.js';
+  import { Button } from './ui/button/index.js';
+  import { Checkbox } from './ui/checkbox/index.js';
+  import * as Dialog from './ui/dialog/index.js';
+  import { Input } from './ui/input/index.js';
+  import * as Table from './ui/table/index.js';
+
+  export interface RelationPickerOption {
+    value: string | number;
+    label: string;
+  }
+
+  interface Props {
+    resource: KnownResources;
+    value?: string | number | null | (string | number)[];
+    onchange?: (value: string | number | null | (string | number)[]) => void;
+    optionLabel?: string;
+    placeholder?: string;
+    title?: string;
+    multiple?: boolean;
+    searchable?: boolean;
+    fetchSize?: number;
+    sorters?: { field: string; order: 'asc' | 'desc' }[];
+    filters?: Filter[];
+    disabled?: boolean;
+    allowClear?: boolean;
+  }
+
+  let {
+    resource,
+    value = null,
+    onchange,
+    optionLabel = 'title',
+    placeholder,
+    title,
+    multiple = false,
+    searchable = true,
+    fetchSize = 20,
+    sorters = [],
+    filters = [],
+    disabled = false,
+    allowClear = true,
+  }: Props = $props();
+
+  const i18n = useTranslation();
+  const context = captureAdminContext();
+  let open = $state(false);
+  let searchText = $state('');
+  let appliedSearch = $state('');
+  let page = $state(1);
+  let draftValues = $state<(string | number)[]>([]);
+  let timer: ReturnType<typeof setTimeout> | undefined;
+
+  const normalizedFetchSize = $derived(
+    Number.isSafeInteger(fetchSize) && fetchSize >= 1 && fetchSize <= 200 ? fetchSize : 20,
+  );
+  const binding = useResourceContract(() => resource);
+  const permission = useCan(() => ({ resource, action: 'list' }));
+  const allowed = $derived(permission.allowed && captureAuthSession(context.authProvider).available);
+  const searchFilters = $derived<Filter[]>(appliedSearch && searchable
+    ? [{ field: optionLabel, operator: 'contains', value: appliedSearch }] : []);
+  const scope = $derived({
+    resource,
+    contract: binding.resource,
+    provider: context.providers?.[binding.dataProviderName],
+    meta: JSON.stringify(binding.meta),
+    access: context.accessControlProvider,
+    authProvider: context.authProvider,
+    tenant: context.tenantCacheKey?.__svadminTenant,
+    auth: captureAuthSession(context.authProvider).cacheKey,
+    optionLabel,
+    normalizedFetchSize,
+    filters,
+    sorters,
+  });
+  let valueInvalidated = $state(false);
+  const selectedValues = $derived(allowed && !valueInvalidated ? normalizedValues(value) : []);
+  const select = useSelect(definedReactiveOptions({
+    get resource() { return binding.resource; },
+    get dataProviderName() { return binding.dataProviderName; },
+    get optionLabel() { return optionLabel; },
+    get optionValue() {
+      return (row: BaseRecord): string | number => {
+        const id = row['id'];
+        if (typeof id === 'string' || (typeof id === 'number' && Number.isFinite(id))) return id;
+        throw new TypeError('Relation records must expose a string or number id');
+      };
+    },
+    get pagination() { return { current: page, pageSize: normalizedFetchSize }; },
+    get fetchSize() { return normalizedFetchSize; },
+    get sorters() { return sorters; },
+    get filters() { return [...filters, ...searchFilters]; },
+    get defaultValue() { return selectedValues; },
+    get queryOptions() { return { enabled: allowed }; },
+    get projectionKey() { return `relation-picker:${String(optionLabel)}:id`; },
+  }));
+
+  let loaded = $state.raw<{ scope: typeof scope; search: string; options: RelationPickerOption[] }>();
+  let observedScope = untrack(() => scope);
+  let observedValue = untrack(() => value);
+  let observedAllowed = untrack(() => allowed);
+  let draftScope = $state.raw<typeof scope>();
+
+  function normalizedValues(input: Props['value']): (string | number)[] {
+    if (Array.isArray(input)) return [...new Set(input)];
+    return input === null || input === undefined ? [] : [input];
+  }
+
+  function optionFor(valueToFind: string | number): RelationPickerOption | undefined {
+    return availableOptions.find(option => option.value === valueToFind);
+  }
+
+  $effect(() => {
+    const data = select.query.data;
+    if (!allowed || !data || select.query.isFetching || select.isError) return;
+    const currentScope = scope;
+    const previous = untrack(() => loaded);
+    const options = new Map<string | number, RelationPickerOption>(
+      page > 1 && previous?.scope === currentScope && previous.search === appliedSearch
+        ? previous.options.map(option => [option.value, option]) : [],
+    );
+    for (const option of data.options) options.set(option.value, option);
+    loaded = { scope: currentScope, search: appliedSearch, options: [...options.values()] };
+  });
+
+  const availableOptions = $derived.by(() => {
+    if (!allowed || select.isError) return [];
+    const options = new Map<string | number, RelationPickerOption>();
+    if (loaded?.scope === scope && loaded.search === appliedSearch) {
+      for (const option of loaded.options) options.set(option.value, option);
+    }
+    for (const option of select.options) options.set(option.value, option);
+    return [...options.values()];
+  });
+  const visibleValues = $derived(open ? draftValues : selectedValues);
+  const selectedLabels = $derived(selectedValues.map(item => optionFor(item)?.label ?? `#${item}`));
+  const total = $derived(select.query.data?.total ?? availableOptions.length);
+  const hasMore = $derived(total > page * normalizedFetchSize && !select.isError);
+
+  function begin(): void {
+    if (disabled || !allowed) return;
+    draftValues = [...selectedValues];
+    draftScope = scope;
+    open = true;
+  }
+
+  function toggle(item: string | number): void {
+    if (disabled || !allowed || !open || draftScope !== scope || select.isError
+      || select.isFetching || searchText !== appliedSearch) return;
+    if (!multiple) {
+      draftValues = [item];
+      commit();
+      return;
+    }
+    draftValues = draftValues.includes(item)
+      ? draftValues.filter(valueToRemove => valueToRemove !== item)
+      : [...draftValues, item];
+  }
+
+  function commit(): void {
+    if (disabled || !allowed || !open || draftScope !== scope || select.isError
+      || select.isFetching || searchText !== appliedSearch) return;
+    const next = [...draftValues];
+    onchange?.(multiple ? next : next[0] ?? null);
+    open = false;
+    resetSearch();
+  }
+
+  function cancel(): void {
+    open = false;
+    resetSearch();
+  }
+
+  function clear(event: MouseEvent): void {
+    event.stopPropagation();
+    if (!disabled && allowed) onchange?.(multiple ? [] : null);
+  }
+
+  function resetSearch(): void {
+    clearTimeout(timer);
+    searchText = '';
+    appliedSearch = '';
+    page = 1;
+    loaded = undefined;
+  }
+
+  function search(event: Event): void {
+    const input = event.currentTarget;
+    if (!(input instanceof HTMLInputElement)) return;
+    searchText = input.value;
+    clearTimeout(timer);
+    const origin = scope;
+    timer = setTimeout(() => {
+      if (origin !== scope || disabled || !allowed || !open) return;
+      appliedSearch = searchText;
+      page = 1;
+      loaded = undefined;
+    }, searchText ? 250 : 0);
+  }
+
+  function loadMore(): void {
+    if (!disabled && allowed && open && !select.isFetching && hasMore
+      && searchText === appliedSearch) page += 1;
+  }
+
+  $effect.pre(() => {
+    const currentScope = scope;
+    const currentValue = value;
+    const currentAllowed = allowed;
+    const currentDisabled = disabled;
+    untrack(() => {
+      if (observedScope !== currentScope || (observedAllowed && !currentAllowed)) {
+        observedScope = currentScope;
+        valueInvalidated = true;
+        draftValues = [];
+        open = false;
+        resetSearch();
+      }
+      observedAllowed = currentAllowed;
+      if (observedValue !== currentValue) {
+        observedValue = currentValue;
+        valueInvalidated = false;
+        open = false;
+        draftValues = [];
+        resetSearch();
+      }
+      if (currentDisabled) cancel();
+    });
+  });
+
+  onDestroy(() => clearTimeout(timer));
+</script>
+
+<div class="svadmin-relation-picker">
+  <div class="svadmin-u-44ee8ba0a421 svadmin-u-60fbb7713999">
+    {#each selectedLabels as label, index (selectedValues[index])}
+      <Badge variant="secondary">
+        {label}
+        {#if multiple && !disabled}
+          <button type="button" aria-label={`${i18n.t('common.clear')} ${label}`} onclick={() => { if (allowed) onchange?.(selectedValues.filter((_, itemIndex) => itemIndex !== index)); }}>
+            <X class="svadmin-u-6a60c09e6aaa svadmin-u-9cea05671a29" />
+          </button>
+        {/if}
+      </Badge>
+    {/each}
+    <Button type="button" variant="outline" disabled={disabled || !allowed} onclick={begin} aria-haspopup="dialog">
+      {selectedLabels.length ? i18n.t('common.edit') : (placeholder ?? i18n.t('field.selectPlaceholder'))}
+      <ChevronsUpDown class="svadmin-u-6a60c09e6aaa svadmin-u-9cea05671a29" />
+    </Button>
+    {#if allowClear && selectedValues.length > 0}
+      <Button type="button" variant="ghost" size="icon-sm" disabled={disabled} aria-label={i18n.t('common.clear')} onclick={clear}>
+        <X class="svadmin-u-6a60c09e6aaa svadmin-u-9cea05671a29" />
+      </Button>
+    {/if}
+  </div>
+
+  <Dialog.Root bind:open>
+    <Dialog.Content class="svadmin-relation-picker__dialog" aria-label={title ?? i18n.t('common.selectOption')}>
+      <Dialog.Header>
+        <Dialog.Title>{title ?? i18n.t('common.selectOption')}</Dialog.Title>
+        <Dialog.Description>{i18n.t('common.selectedItems', { count: draftValues.length })}</Dialog.Description>
+      </Dialog.Header>
+      {#if searchable}
+        <div class="svadmin-u-60fbb7713999">
+          <Search class="svadmin-u-6a60c09e6aaa svadmin-u-9cea05671a29" />
+          <Input value={searchText} oninput={search} placeholder={i18n.t('common.search')} aria-label={i18n.t('common.search')} />
+        </div>
+      {/if}
+      <div class="svadmin-relation-picker__table">
+        {#if select.isError}
+          <div role="alert">{i18n.t('select.loadFailed')}</div>
+          <Button type="button" variant="outline" onclick={() => { void select.refetch(); }}>{i18n.t('common.retry')}</Button>
+        {:else if select.isFetching && availableOptions.length === 0}
+          <div aria-live="polite"><Loader2 class="svadmin-u-6a60c09e6aaa svadmin-u-9cea05671a29" /> {i18n.t('common.loading')}</div>
+        {:else if availableOptions.length === 0}
+          <div>{i18n.t('common.noData')}</div>
+        {:else}
+          <Table.Root>
+            <Table.Header>
+              <Table.Row>
+                <Table.Head>{i18n.t('common.selectOption')}</Table.Head>
+                <Table.Head>{String(optionLabel)}</Table.Head>
+              </Table.Row>
+            </Table.Header>
+            <Table.Body>
+              {#each availableOptions as option (option.value)}
+                <Table.Row>
+                  <Table.Cell>
+                    <Checkbox checked={visibleValues.includes(option.value)} aria-label={option.label}
+                      disabled={select.isFetching || searchText !== appliedSearch}
+                      onCheckedChange={() => toggle(option.value)} />
+                  </Table.Cell>
+                  <Table.Cell>
+                    <button type="button" class="svadmin-relation-picker__option"
+                      disabled={select.isFetching || searchText !== appliedSearch} onclick={() => toggle(option.value)}>
+                      {#if visibleValues.includes(option.value)}<Check class="svadmin-u-6a60c09e6aaa svadmin-u-9cea05671a29" />{/if}
+                      {option.label}
+                    </button>
+                  </Table.Cell>
+                </Table.Row>
+              {/each}
+            </Table.Body>
+          </Table.Root>
+          {#if hasMore}
+            <Button type="button" variant="outline" disabled={select.isFetching} onclick={loadMore}>
+              {select.isFetching ? i18n.t('common.loading') : i18n.t('select.loadMore')}
+            </Button>
+          {/if}
+        {/if}
+      </div>
+      <Dialog.Footer>
+        <Button type="button" variant="outline" onclick={cancel}>{i18n.t('common.cancel')}</Button>
+        <Button type="button" onclick={commit} disabled={select.isFetching || select.isError || searchText !== appliedSearch}>{i18n.t('common.confirm')}</Button>
+      </Dialog.Footer>
+    </Dialog.Content>
+  </Dialog.Root>
+</div>
+
+<style>
+  .svadmin-relation-picker { min-width: 0; }
+  .svadmin-relation-picker__table { max-height: 24rem; overflow: auto; }
+  .svadmin-relation-picker__option {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    text-align: start;
+    overflow-wrap: anywhere;
+    max-width: 100%;
+  }
+  .svadmin-relation-picker__option:focus-visible {
+    outline: 2px solid var(--ring);
+    outline-offset: 2px;
+  }
+</style>