@svadmin/ui 0.70.0 → 0.73.0

package/dist/components/FieldRenderer.svelte

@@ -4,6 +4,8 @@
 </script>
 
 <script lang="ts">
+  import { definedOptions } from '@svadmin/core/options';
+
   import type { FieldDefinition } from '@svadmin/core';
   import { useTranslation } from '@svadmin/core/i18n';
   import { Input } from './ui/input/index.js';
@@ -16,6 +18,12 @@
   import { Button } from './ui/button/index.js';
   import TooltipButton from './TooltipButton.svelte';
   import ComboboxField from './ComboboxField.svelte';
+  import NumberInput from './NumberInput.svelte';
+  import MoneyInput from './MoneyInput.svelte';
+  import PercentInput from './PercentInput.svelte';
+  import DateTimeInput from './DateTimeInput.svelte';
+  import DateRangeInput, { type DateRangeInputValue } from './DateRangeInput.svelte';
+  import FileUpload from './FileUpload.svelte';
   import TreeSelect, { type TreeSelectOption } from './TreeSelect.svelte';
   import Cascader, { type CascaderOption } from './Cascader.svelte';
   import Transfer, { type TransferItem } from './Transfer.svelte';
@@ -25,6 +33,7 @@
   import type { Snippet } from 'svelte';
   import { getRichTextEditor } from '../editor-config.svelte.js';
   import { cn } from '../utils.js';
+  import { numericInputValue } from '../numeric-input.js';
 
   const i18n = useTranslation();
 
@@ -43,7 +52,7 @@
 
   // Typed accessors
   const strVal = $derived((value as string) ?? '');
-  const numVal = $derived(value as number | null | undefined);
+  const numVal = $derived(numericInputValue(value));
   const boolVal = $derived((value as boolean) ?? false);
   const tagsVal = $derived((value as string[]) ?? []);
   const multiVal = $derived((value as (string | number)[]) ?? []);
@@ -206,18 +215,52 @@
     </div>
 
   {:else if field.type === 'number'}
-    <Input
+    <NumberInput
       id={field.key}
       name={field.key}
-      type="number"
-      value={numVal == null ? '' : String(numVal)}
-      oninput={(e) => {
-        const v = (e.target as HTMLInputElement).value;
-        onchange(v === '' ? null : Number(v));
-      }}
+      value={numVal}
+      min={field.min}
+      max={field.max}
+      step={field.step}
+      precision={field.precision}
+      onchange={onchange}
       required={field.required}
-      aria-invalid={invalid || undefined}
-      aria-describedby={errorId}
+      invalid={invalid}
+      describedby={errorId}
+      {disabled}
+    />
+
+  {:else if field.type === 'currency'}
+    <MoneyInput
+      id={field.key}
+      name={field.key}
+      value={numVal}
+      currency={field.currency ?? 'USD'}
+      min={field.min}
+      max={field.max}
+      step={field.step}
+      precision={field.precision ?? 2}
+      onchange={onchange}
+      required={field.required}
+      invalid={invalid}
+      describedby={errorId}
+      {disabled}
+    />
+
+  {:else if field.type === 'percent'}
+    <PercentInput
+      id={field.key}
+      name={field.key}
+      value={numVal}
+      scale={field.scale ?? '100'}
+      min={field.min}
+      max={field.max}
+      step={field.step}
+      precision={field.precision ?? 1}
+      onchange={onchange}
+      required={field.required}
+      invalid={invalid}
+      describedby={errorId}
       {disabled}
     />
 
@@ -269,7 +312,7 @@
   {:else if field.type === 'tree-select' || field.type === 'treeselect'}
     <TreeSelect
       options={(field.treeOptions ?? field.options ?? []) as TreeSelectOption[]}
-      value={value as string | number | (string | number)[] | undefined}
+      {...definedOptions({ "value": value as string | number | (string | number)[] | undefined })}
       multiple={field.multiple}
       disabled={disabled}
       placeholder={i18n.t('field.selectPlaceholder')}
@@ -296,14 +339,21 @@
     />
 
   {:else if field.type === 'relation' && field.resource}
-    <input type="hidden" name={field.key} value={value == null ? '' : String(value)} />
+    {#if field.multiple}
+      {#each multiVal as selectedValue, _i (selectedValue)}
+        <input type="hidden" name={field.key} value={String(selectedValue)} />
+      {/each}
+    {:else}
+      <input type="hidden" name={field.key} value={value == null ? '' : String(value)} />
+    {/if}
     <ComboboxField
       id={field.key}
       resource={field.resource}
-      value={value as string | number | null}
+      value={field.multiple ? multiVal : value as string | number | null}
       onchange={(v) => onchange(v)}
       optionLabel={field.optionLabel ?? 'title'}
       optionValue={field.optionValue ?? 'id'}
+      multiple={field.multiple}
       placeholder={i18n.t('field.selectPlaceholder')}
       aria-invalid={invalid || undefined}
       aria-describedby={errorId}
@@ -430,19 +480,45 @@
       />
     </div>
 
-  {:else if field.type === 'date'}
-    <Input
+  {:else if field.type === 'date' || field.type === 'time' || field.type === 'datetime'}
+    <DateTimeInput
       id={field.key}
       name={field.key}
-      type="date"
-      value={strVal}
-      oninput={(e) => onchange((e.target as HTMLInputElement).value)}
+      mode={field.type}
+      value={strVal || null}
+      onchange={(next) => onchange(next)}
       required={field.required}
-      aria-invalid={invalid || undefined}
-      aria-describedby={errorId}
+      invalid={invalid}
+      describedby={errorId}
       {disabled}
     />
 
+  {:else if field.type === 'daterange'}
+    <DateRangeInput
+      startId={`${field.key}-start`}
+      endId={`${field.key}-end`}
+      startName={`${field.key}.start`}
+      endName={`${field.key}.end`}
+      value={value as DateRangeInputValue | null}
+      onchange={(next) => onchange(next)}
+      required={field.required}
+      invalid={invalid}
+      describedby={errorId}
+      {disabled}
+    />
+
+  {:else if field.type === 'file'}
+    <FileUpload
+      id={field.key}
+      name={field.key}
+      multiple={field.multiple}
+      required={field.required && !value}
+      disabled={disabled}
+      accept={field.accept}
+      maxSize={field.maxSize}
+      onChange={(items) => onchange(field.multiple ? items.map(item => item.file) : items[0]?.file ?? null)}
+    />
+
   {:else if field.type === 'images'}
     {#each imagesVal as url, imageIndex (imageIndex)}
       <input type="hidden" name={`${field.key}[]`} value={url} />

package/dist/components/FileUpload.svelte

@@ -0,0 +1,250 @@
+<script lang="ts">
+  import { onDestroy } from 'svelte';
+  import { X, Upload, RotateCw, Ban } from '@lucide/svelte';
+  import { Button } from './ui/button/index.js';
+
+  export type UploadItemStatus = 'queued' | 'uploading' | 'success' | 'error' | 'cancelled';
+
+  export interface UploadItem {
+    id: string;
+    file: File;
+    status: UploadItemStatus;
+    progress: number;
+    url?: string;
+    error?: string;
+  }
+
+  export interface UploadSession {
+    signal: AbortSignal;
+    onProgress: (progress: number) => void;
+  }
+
+  interface Props {
+    id?: string;
+    name?: string;
+    accept?: string;
+    multiple?: boolean;
+    maxFiles?: number;
+    maxSize?: number;
+    disabled?: boolean;
+    required?: boolean;
+    upload?: (file: File, session: UploadSession) => Promise<{ url?: string } | undefined> | Promise<void>;
+    onChange?: (items: UploadItem[]) => void;
+    onReject?: (file: File, reason: string) => void;
+    class?: string;
+  }
+
+  let {
+    id,
+    name,
+    accept = '',
+    multiple = false,
+    maxFiles = multiple ? 10 : 1,
+    maxSize,
+    disabled = false,
+    required = false,
+    upload,
+    onChange,
+    onReject,
+    class: className = '',
+  }: Props = $props();
+
+  let input: HTMLInputElement | undefined = $state();
+  let items = $state<UploadItem[]>([]);
+  let sequence = 0;
+  const controllers = new Map<string, AbortController>();
+  let disposed = false;
+  onDestroy(() => {
+    disposed = true;
+    for (const controller of controllers.values()) controller.abort();
+    controllers.clear();
+  });
+
+  function emitChange(): void {
+    onChange?.(items.map(item => ({ ...item })));
+  }
+
+  function nextId(): string {
+    sequence += 1;
+    return `upload-${sequence}`;
+  }
+
+  function accepts(file: File): boolean {
+    if (!accept.trim()) return true;
+    return accept.split(',').map(token => token.trim().toLowerCase()).some(token =>
+      token === file.type.toLowerCase() ||
+      (token.endsWith('/*') && file.type.toLowerCase().startsWith(token.slice(0, -1))) ||
+      (token.startsWith('.') && file.name.toLowerCase().endsWith(token)),
+    );
+  }
+
+  function validate(file: File): string | undefined {
+    if (!accepts(file)) return 'File type is not accepted.';
+    if (maxSize !== undefined && (!Number.isSafeInteger(maxSize) || maxSize < 0 || file.size > maxSize)) {
+      return 'File is too large.';
+    }
+    return undefined;
+  }
+
+  function updateItem(id: string, update: Partial<UploadItem>, clear: readonly ('url' | 'error')[] = []): void {
+    if (disposed || !items.some(item => item.id === id)) return;
+    items = items.map(item => {
+      if (item.id !== id) return item;
+      const next = { ...item, ...update };
+      if (clear.includes('error')) delete next.error;
+      if (clear.includes('url')) delete next.url;
+      return next;
+    });
+    emitChange();
+  }
+
+  async function process(item: UploadItem): Promise<void> {
+    if (!upload || disabled || disposed || controllers.has(item.id) || !items.some(candidate => candidate.id === item.id)) return;
+    const controller = new AbortController();
+    controllers.set(item.id, controller);
+    // 取消、替换、重试或卸载后，旧请求不再拥有更新状态的权限。
+    const current = () => !disposed && !controller.signal.aborted && controllers.get(item.id) === controller;
+    updateItem(item.id, { status: 'uploading', progress: 0 }, ['error', 'url']);
+    try {
+      // onChange may synchronously unmount the component or retire this attempt.
+      if (!current()) return;
+      const result = await upload(item.file, {
+        signal: controller.signal,
+        onProgress: progress => {
+          if (current()) updateItem(item.id, {
+            progress: Number.isFinite(progress) ? Math.max(0, Math.min(100, Math.round(progress))) : 0,
+          });
+        },
+      });
+      if (current()) updateItem(item.id, { status: 'success', progress: 100,
+        ...(result?.url === undefined ? {} : { url: result.url }) });
+    } catch (error) {
+      if (current()) updateItem(item.id, { status: 'error',
+        error: error instanceof Error ? error.message : 'Upload failed.' });
+    } finally {
+      if (controllers.get(item.id) === controller) controllers.delete(item.id);
+    }
+  }
+
+  function addFiles(selected: File[]): void {
+    if (disabled || disposed) return;
+    const available = Math.max(0, maxFiles - items.length);
+    for (const file of selected.slice(0, multiple ? available : 1)) {
+      // Host notifications may synchronously disable or unmount this batch.
+      if (disabled || disposed) return;
+      const reason = validate(file);
+      if (reason) {
+        onReject?.(file, reason);
+        continue;
+      }
+      const item: UploadItem = { id: nextId(), file, status: 'queued', progress: 0 };
+      if (!multiple) {
+        for (const controller of controllers.values()) controller.abort();
+        controllers.clear();
+      }
+      items = multiple ? [...items, item] : [item];
+      emitChange();
+      void process(item);
+    }
+  }
+
+  function handleInput(event: Event): void {
+    const target = event.currentTarget;
+    if (!(target instanceof HTMLInputElement)) return;
+    addFiles(Array.from(target.files ?? []));
+  }
+
+  function remove(id: string): void {
+    if (disabled || disposed) return;
+    controllers.get(id)?.abort();
+    controllers.delete(id);
+    items = items.filter(item => item.id !== id);
+    emitChange();
+  }
+
+  function cancel(id: string): void {
+    const controller = controllers.get(id);
+    if (!controller) return;
+    controller.abort();
+    controllers.delete(id);
+    updateItem(id, { status: 'cancelled', error: 'Upload cancelled.' });
+  }
+
+  function retry(item: UploadItem): void {
+    if (item.status === 'error' || item.status === 'cancelled') void process(item);
+  }
+
+  function handleKeydown(event: KeyboardEvent): void {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      input?.click();
+    }
+  }
+</script>
+
+<div class={`svadmin-file-upload ${className}`}>
+  <input
+    bind:this={input}
+    type="file"
+    {id}
+    {name}
+    {accept}
+    {multiple}
+    disabled={disabled}
+    {required}
+    class="svadmin-file-upload-input"
+    onchange={handleInput}
+  />
+  <div
+    class="svadmin-file-upload-dropzone"
+    role="button"
+    tabindex={disabled ? -1 : 0}
+    aria-disabled={disabled}
+    onclick={() => input?.click()}
+    onkeydown={handleKeydown}
+    ondragover={(event) => event.preventDefault()}
+    ondrop={(event) => {
+      event.preventDefault();
+      addFiles(Array.from(event.dataTransfer?.files ?? []));
+    }}
+  >
+    <Upload aria-hidden="true" />
+    <span>Select or drop files</span>
+  </div>
+
+  {#if items.length}
+    <ul class="svadmin-file-upload-list" aria-label="Selected files">
+      {#each items as item (item.id)}
+        <li>
+          <span class="svadmin-file-upload-name">{item.file.name}</span>
+          <span class="svadmin-file-upload-status">
+            {#if item.status === 'uploading'}{item.progress}%{:else}{item.status}{/if}
+          </span>
+          {#if item.status === 'uploading'}
+            <Button type="button" variant="ghost" size="icon-sm" aria-label="Cancel upload" onclick={() => cancel(item.id)}>
+              <Ban aria-hidden="true" />
+            </Button>
+          {:else if item.status === 'error' || item.status === 'cancelled'}
+            <Button type="button" variant="ghost" size="icon-sm" aria-label="Retry upload" {disabled} onclick={() => retry(item)}>
+              <RotateCw aria-hidden="true" />
+            </Button>
+          {/if}
+          <Button type="button" variant="ghost" size="icon-sm" aria-label="Remove file" {disabled} onclick={() => remove(item.id)}>
+            <X aria-hidden="true" />
+          </Button>
+          {#if item.error}<span role="alert">{item.error}</span>{/if}
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</div>
+
+<style>
+  .svadmin-file-upload-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
+  .svadmin-file-upload-dropzone { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 88px; border: 1px dashed var(--border); border-radius: 6px; cursor: pointer; }
+  .svadmin-file-upload-dropzone[aria-disabled="true"] { cursor: not-allowed; opacity: 0.6; }
+  .svadmin-file-upload-list { display: grid; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
+  .svadmin-file-upload-list li { display: flex; align-items: center; gap: 8px; min-width: 0; }
+  .svadmin-file-upload-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .svadmin-file-upload-status { color: var(--muted-foreground); font-size: 0.875rem; }
+</style>

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

@@ -0,0 +1,32 @@
+export type UploadItemStatus = 'queued' | 'uploading' | 'success' | 'error' | 'cancelled';
+export interface UploadItem {
+    id: string;
+    file: File;
+    status: UploadItemStatus;
+    progress: number;
+    url?: string;
+    error?: string;
+}
+export interface UploadSession {
+    signal: AbortSignal;
+    onProgress: (progress: number) => void;
+}
+interface Props {
+    id?: string;
+    name?: string;
+    accept?: string;
+    multiple?: boolean;
+    maxFiles?: number;
+    maxSize?: number;
+    disabled?: boolean;
+    required?: boolean;
+    upload?: (file: File, session: UploadSession) => Promise<{
+        url?: string;
+    } | undefined> | Promise<void>;
+    onChange?: (items: UploadItem[]) => void;
+    onReject?: (file: File, reason: string) => void;
+    class?: string;
+}
+declare const FileUpload: import("svelte").Component<Props, {}, "">;
+type FileUpload = ReturnType<typeof FileUpload>;
+export default FileUpload;