@svadmin/ui 0.73.0 → 0.75.0

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

@@ -1,16 +1,35 @@
+import { type SpreadsheetCellFormat, type SpreadsheetWorkbook } from '@svadmin/core';
 export interface SheetData {
     id: string;
     name: string;
     rows: number;
     cols: number;
     cells: Record<string, string>;
+    formats?: Record<string, SpreadsheetCellFormat>;
+}
+export interface SpreadsheetLimits {
+    maxRows: number;
+    maxCols: number;
+    maxCells: number;
+    maxSheets: number;
+    maxCellLength: number;
+    maxFormulaLength: number;
+    maxFormulaDepth: number;
+    maxRangeCells: number;
+    maxFormulaSteps: number;
 }
 interface Props {
     sheets?: SheetData[];
     activeSheetId?: string;
+    scopeKey?: string;
     readonly?: boolean;
     onchange?: (sheets: SheetData[]) => void;
     onexport?: (csv: string) => void;
+    onworkbookexport?: (json: string) => void;
+    onxlsxexport?: (bytes: Uint8Array) => void | Promise<void>;
+    xlsxexporter?: (workbook: SpreadsheetWorkbook) => Promise<Uint8Array | undefined>;
+    xlsximporter?: (bytes: Uint8Array, limits: SpreadsheetLimits, signal: AbortSignal) => Promise<unknown>;
+    limits?: Partial<SpreadsheetLimits>;
     class?: string;
 }
 declare const SpreadsheetView: import("svelte").Component<Props, {}, "sheets" | "activeSheetId">;

package/dist/components/TagsInput.svelte

@@ -0,0 +1,178 @@
+<script lang="ts">
+  import { X } from '@lucide/svelte';
+  import { cn } from '../utils.js';
+
+  interface Props {
+    value?: string[];
+    name?: string;
+    placeholder?: string;
+    separator?: string;
+    maxItems?: number;
+    disabled?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    describedby?: string;
+    ariaLabel?: string;
+    class?: string;
+    onchange?: (value: string[]) => void;
+  }
+
+  let {
+    value = $bindable([]),
+    name,
+    placeholder = 'Add a tag',
+    separator = ',',
+    maxItems,
+    disabled = false,
+    required = false,
+    invalid = false,
+    describedby,
+    ariaLabel,
+    class: className = '',
+    onchange,
+  }: Props = $props();
+
+  let draft = $state('');
+  let composing = $state(false);
+
+  function normalized(values: readonly string[]): string[] {
+    return [...new Set(values.map(item => item.trim()).filter(Boolean))];
+  }
+
+  function update(next: string[]): void {
+    const result = normalized(next);
+    value = result;
+    onchange?.(result);
+  }
+
+  function add(raw: string): void {
+    if (disabled) return;
+    const candidates = raw.split(separator).map(item => item.trim()).filter(Boolean);
+    if (candidates.length === 0) return;
+    const available = maxItems === undefined ? candidates : candidates.slice(0, Math.max(0, maxItems - value.length));
+    update([...value, ...available]);
+    draft = '';
+  }
+
+  function remove(index: number): void {
+    if (disabled) return;
+    update(value.filter((_, itemIndex) => itemIndex !== index));
+  }
+
+  function handleKeydown(event: KeyboardEvent): void {
+    if (disabled || composing) return;
+    if (event.key === 'Enter' || event.key === separator) {
+      event.preventDefault();
+      add(draft);
+    } else if (event.key === 'Backspace' && draft === '' && value.length > 0) {
+      event.preventDefault();
+      remove(value.length - 1);
+    }
+  }
+</script>
+
+<div
+  class={cn('svadmin-tags-input', className)}
+  data-invalid={invalid ? 'true' : undefined}
+  data-disabled={disabled ? 'true' : undefined}
+>
+  {#if name}
+    {#each value as tag (tag)}
+      <input type="hidden" {name} value={tag} />
+    {/each}
+  {/if}
+  {#each value as tag, index (tag)}
+    <span class="svadmin-tags-input__tag">
+      <span>{tag}</span>
+      <button
+        type="button"
+        aria-label={`Remove ${tag}`}
+        disabled={disabled}
+        onclick={() => remove(index)}
+      >
+        <X size={14} aria-hidden="true" />
+      </button>
+    </span>
+  {/each}
+  <input
+    value={draft}
+    {placeholder}
+    disabled={disabled || (maxItems !== undefined && value.length >= maxItems)}
+    required={required && value.length === 0}
+    aria-label={ariaLabel}
+    aria-invalid={invalid || undefined}
+    aria-describedby={describedby}
+    oninput={(event) => { draft = (event.currentTarget as HTMLInputElement).value; }}
+    onkeydown={handleKeydown}
+    oncompositionstart={() => { composing = true; }}
+    oncompositionend={(event) => { composing = false; draft = (event.currentTarget as HTMLInputElement).value; }}
+  />
+</div>
+
+<style>
+  .svadmin-tags-input {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 4px;
+    min-block-size: 36px;
+    padding: 4px 8px;
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    background: var(--background);
+  }
+
+  .svadmin-tags-input:focus-within {
+    outline: 2px solid var(--ring);
+    outline-offset: 1px;
+  }
+
+  .svadmin-tags-input[data-invalid='true'] {
+    border-color: var(--destructive);
+  }
+
+  .svadmin-tags-input__tag {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    max-inline-size: 100%;
+    padding: 2px 4px 2px 8px;
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    background: var(--muted);
+    color: var(--foreground);
+  }
+
+  .svadmin-tags-input__tag span {
+    overflow-wrap: anywhere;
+  }
+
+  .svadmin-tags-input__tag button {
+    display: inline-grid;
+    place-items: center;
+    min-block-size: 24px;
+    min-inline-size: 24px;
+    border: 0;
+    border-radius: 4px;
+    background: transparent;
+    color: var(--muted-foreground);
+    cursor: pointer;
+  }
+
+  .svadmin-tags-input__tag button:hover,
+  .svadmin-tags-input__tag button:focus-visible {
+    background: var(--accent);
+    color: var(--accent-foreground);
+  }
+
+  .svadmin-tags-input input {
+    min-inline-size: 8rem;
+    flex: 1 1 8rem;
+    min-block-size: 28px;
+    border: 0;
+    outline: 0;
+    background: transparent;
+    color: var(--foreground);
+    font: inherit;
+  }
+</style>

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

@@ -0,0 +1,17 @@
+interface Props {
+    value?: string[];
+    name?: string;
+    placeholder?: string;
+    separator?: string;
+    maxItems?: number;
+    disabled?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    describedby?: string;
+    ariaLabel?: string;
+    class?: string;
+    onchange?: (value: string[]) => void;
+}
+declare const TagsInput: import("svelte").Component<Props, {}, "value">;
+type TagsInput = ReturnType<typeof TagsInput>;
+export default TagsInput;

package/dist/components/TimePicker.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import type { ComponentProps } from 'svelte';
+  import DateTimeInput from './DateTimeInput.svelte';
+
+  export type TimePickerProps = Omit<ComponentProps<typeof DateTimeInput>, 'mode'>;
+
+  let { value = $bindable(null), ...props }: TimePickerProps = $props();
+</script>
+
+<DateTimeInput {...props} bind:value mode="time" />

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

@@ -0,0 +1,6 @@
+import type { ComponentProps } from 'svelte';
+import DateTimeInput from './DateTimeInput.svelte';
+export type TimePickerProps = Omit<ComponentProps<typeof DateTimeInput>, 'mode'>;
+declare const TimePicker: import("svelte").Component<TimePickerProps, {}, "value">;
+type TimePicker = ReturnType<typeof TimePicker>;
+export default TimePicker;

package/dist/components/TooltipButton.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-/* eslint-disable @typescript-eslint/no-explicit-any */
   import * as Tooltip from './ui/tooltip/index.js';
   import { Button } from './ui/button/index.js';
   import type { Snippet } from 'svelte';
@@ -43,8 +42,8 @@
     onclick?.(event);
   }
 
-  function mergeButtonProps(primitiveProps: Record<string, any>) {
-    const merged: Record<string, any> = { ...primitiveProps, ...restProps };
+  function mergeButtonProps(primitiveProps: Record<string, unknown>) {
+    const merged: Record<string, unknown> = { ...primitiveProps, ...restProps };
     for (const [key, userHandler] of Object.entries(restProps)) {
       const primitiveHandler = primitiveProps[key];
       if (!key.startsWith('on') || typeof userHandler !== 'function' || typeof primitiveHandler !== 'function') continue;
@@ -61,7 +60,7 @@
   <Tooltip.Trigger aria-describedby={restProps['aria-describedby']}>
     {#snippet child({ props })}
       {@const primitiveOnclick = props['onclick'] as ((event: MouseEvent) => void) | undefined}
-      {@const buttonProps = { ...mergeButtonProps(props), href, target, rel, variant, size, type, class: className, 'aria-label': restProps['aria-label'] ?? tooltip, 'aria-describedby': props['aria-describedby'], onclick: (event: MouseEvent) => handleClick(event, primitiveOnclick), disabled, tabindex } as any}
+      {@const buttonProps = { ...mergeButtonProps(props), href, target, rel, variant, size, type, class: className, 'aria-label': typeof restProps['aria-label'] === 'string' ? restProps['aria-label'] : tooltip, 'aria-describedby': typeof props['aria-describedby'] === 'string' ? props['aria-describedby'] : undefined, onclick: (event: MouseEvent) => handleClick(event, primitiveOnclick), disabled, tabindex }}
       <Button {...buttonProps}>
         {@render children()}
       </Button>