@svadmin/ui 0.72.0 → 0.73.0

package/dist/components/BoundRecordDetailDrawer.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import type { ResourceRendering } from '../rendering/index.js';
   import { definedOptions } from '@svadmin/core/options';
 
   import { useCan, useNavigation, type FieldDefinition } from '@svadmin/core';
@@ -12,11 +13,13 @@
 
   let {
     resourceName,
+    rendering,
     open = $bindable(false),
     recordId,
     onClose,
   }: {
     resourceName: string;
+    rendering?: ResourceRendering | undefined;
     open?: boolean;
     recordId: string | number;
     onClose?: () => void;
@@ -24,7 +27,7 @@
 
   const i18n = useTranslation();
   const navigation = useNavigation();
-  const detail = useRecordDetail(() => ({ resourceName, id: recordId }));
+  const detail = useRecordDetail(() => ({ resourceName, id: recordId, rendering }));
   const resource = $derived(detail.resource);
   const showFields = $derived(detail.fields);
   const fieldGroups = $derived.by(() => {
@@ -68,12 +71,13 @@
 
 {#snippet fieldsList(fields: FieldDefinition[])}
   {#if query.isSuccess}
+    {@const record = detail.rendering ? detail.rendering.record(query.data.data) : query.data.data}
     <dl class="svadmin-u-fa6acbf81d74 svadmin-u-d2c3932343f5">
       {#each fields as field (field.key)}
         <div class="svadmin-u-f3c543ad5fe9 svadmin-u-58284b4ea568 svadmin-u-cb11fec3bb46 svadmin-u-d9bdd3d643a2 svadmin-u-022e8076dfea">
           <dt class="svadmin-u-359090c2d529 svadmin-u-2689f3958069 svadmin-u-bfa603190748 svadmin-u-e2327d142859">{field.label}</dt>
           <dd class="svadmin-u-7e0b7cdf1a94 svadmin-u-170cee3ff4e4 svadmin-u-fc7473ca09eb svadmin-u-d4108abe6359">
-            <FieldDisplay type={field.type} value={query.data.data[field.key]} options={field.options} resourceName={field.resource} />
+            <FieldDisplay type={field.type} value={record[field.key]} options={field.options} resourceName={field.resource} />
           </dd>
         </div>
       {/each}
@@ -83,6 +87,8 @@
 
 <DetailDrawer
   bind:open
+  data-svadmin-rendering-resource={detail.rendering?.resource.name}
+  data-svadmin-rendering-kind={detail.rendering ? 'detail-drawer' : undefined}
   title="{resource.label} {i18n.t('common.detail')}"
   description={`#${recordId}`}
   closeLabel={i18n.t('common.close')}

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

@@ -1,5 +1,7 @@
+import type { ResourceRendering } from '../rendering/index.js';
 type $$ComponentProps = {
     resourceName: string;
+    rendering?: ResourceRendering | undefined;
     open?: boolean;
     recordId: string | number;
     onClose?: () => void;

package/dist/components/ComboboxField.svelte

@@ -23,12 +23,13 @@
 
   interface Props extends Omit<HTMLButtonAttributes, 'value' | 'onchange' | 'children' | 'onclick' | 'type'> {
     resource: string;
-    value?: string | number | null;
-    onchange?: (value: string | number | null) => void;
+    value?: string | number | null | (string | number)[];
+    onchange?: (value: string | number | null | (string | number)[]) => void;
     optionLabel?: string;
     optionValue?: string;
     placeholder?: string;
     searchable?: boolean;
+    multiple?: boolean;
     onSearch?: (value: string) => Filter[];
     id?: string;
     class?: string;
@@ -42,6 +43,7 @@
     optionValue = 'id',
     placeholder = 'Select...',
     searchable = true,
+    multiple = false,
     onSearch,
     disabled = false,
     ...restProps
@@ -67,7 +69,10 @@
       };
     },
     get projectionKey() { return `combobox:${optionLabel}:${optionValue}`; },
-    get defaultValue() { return value === null ? [] : [value]; },
+    get defaultValue() {
+      if (Array.isArray(value)) return value;
+      return value === null || value === undefined ? [] : [value];
+    },
     get onSearch() { return onSearch ?? (searchable ? defaultSearch : undefined); },
   }));
 
@@ -81,11 +86,23 @@
     open = false;
   });
 
-  const selectedLabel = $derived(
-    select.options.find(o => o.value === value)?.label ?? ''
+  const selectedValues = $derived(
+    Array.isArray(value) ? value : value === null || value === undefined ? [] : [value],
   );
+  const selectedLabels = $derived(selectedValues.flatMap(selectedValue => {
+    const option = select.options.find(candidate => candidate.value === selectedValue);
+    return option ? [option.label] : [];
+  }));
+  const selectedLabel = $derived(selectedLabels.join(', '));
 
   function handleSelect(optValue: string | number) {
+    if (multiple) {
+      const next = selectedValues.includes(optValue)
+        ? selectedValues.filter(selectedValue => selectedValue !== optValue)
+        : [...selectedValues, optValue];
+      onchange?.(next);
+      return;
+    }
     onchange?.(optValue === value ? null : optValue);
     open = false;
     searchInputValue = '';
@@ -94,7 +111,7 @@
 
   function handleClear(e: Event) {
     e.stopPropagation();
-    onchange?.(null);
+    onchange?.(multiple ? [] : null);
     open = false;
     searchInputValue = '';
     select.onSearchChange('');
@@ -119,6 +136,7 @@
     {disabled}
     aria-haspopup="listbox"
     aria-expanded={open}
+    aria-multiselectable={multiple || undefined}
     aria-busy={select.isFetching}
     aria-invalid={select.isError}
   >
@@ -129,7 +147,7 @@
     {/if}
     <ChevronsUpDown class="svadmin-u-fb56d9cff341 svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3 svadmin-u-012fbd121f37 svadmin-u-0b8c506a0596" />
   </Button>
-  {#if value !== null}
+  {#if selectedValues.length}
     <Button type="button" variant="ghost" size="icon-sm" {disabled}
       title={i18n.t('common.clear')} aria-label={i18n.t('common.clear')} onclick={handleClear}>
       <X class="svadmin-u-6a60c09e6aaa svadmin-u-9cea05671a29" />
@@ -160,7 +178,11 @@
             />
           </div>
         {/if}
-        <Command.List class="svadmin-u-558f64349245 svadmin-u-92bf82f493b1 svadmin-u-eb6a3cef9686">
+        <Command.List
+          role="listbox"
+          aria-multiselectable={multiple || undefined}
+          class="svadmin-u-558f64349245 svadmin-u-92bf82f493b1 svadmin-u-eb6a3cef9686"
+        >
           {#if select.isLoading}
             {#each Array(3) as _, _i (_i)}
               <div class="svadmin-u-d5eab218aa34 svadmin-u-ec0091ee009b"><Skeleton class="svadmin-u-cd0d9c512cdc svadmin-u-6da6a3c3f741" /></div>
@@ -177,7 +199,7 @@
                 onSelect={() => handleSelect(opt.value)}
                 class="svadmin-u-d89972fe17d6 svadmin-u-60fbb7713999 svadmin-u-50ca6ba56aa3 svadmin-u-7f6912283f11 svadmin-u-3960ffc248d9 svadmin-u-36d4469299aa svadmin-u-d5eab218aa34 svadmin-u-ec0091ee009b svadmin-u-fc7473ca09eb svadmin-u-df37b1fd9495 svadmin-u-99afb1cc3b47 svadmin-u-529780e25268"
               >
-                <Check class="svadmin-u-d2347e8497a9 svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c {value === opt.value ? 'svadmin-u-3972e98dc84f' : 'svadmin-u-7065497e1ca0'}" />
+                <Check class="svadmin-u-d2347e8497a9 svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c {selectedValues.includes(opt.value) ? 'svadmin-u-3972e98dc84f' : 'svadmin-u-7065497e1ca0'}" />
                 {opt.label}
               </Command.Item>
             {/each}

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

@@ -2,12 +2,13 @@ import type { Filter } from '@svadmin/core';
 import type { HTMLButtonAttributes } from 'svelte/elements';
 interface Props extends Omit<HTMLButtonAttributes, 'value' | 'onchange' | 'children' | 'onclick' | 'type'> {
     resource: string;
-    value?: string | number | null;
-    onchange?: (value: string | number | null) => void;
+    value?: string | number | null | (string | number)[];
+    onchange?: (value: string | number | null | (string | number)[]) => void;
     optionLabel?: string;
     optionValue?: string;
     placeholder?: string;
     searchable?: boolean;
+    multiple?: boolean;
     onSearch?: (value: string) => Filter[];
     id?: string;
     class?: string;

package/dist/components/CreatePage.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import type { ResourceRendering } from '../rendering/index.js';
   import { definedOptions } from '@svadmin/core/options';
 
   import { getResource, captureAdminContext } from '@svadmin/core';
@@ -12,6 +13,7 @@
 
   interface Props {
     resourceName: string;
+    rendering?: ResourceRendering | undefined;
     title?: string;
     density?: 'compact' | 'comfortable';
     columns?: 1 | 2 | 3 | 4;
@@ -22,6 +24,7 @@
 
   let {
     resourceName,
+    rendering,
     title,
     density = 'comfortable',
     columns = 1,
@@ -51,6 +54,7 @@
   </PageHeader>
 
   <AutoForm
+    {rendering}
     {resourceName}
     mode="create"
     {density}

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

@@ -1,6 +1,8 @@
+import type { ResourceRendering } from '../rendering/index.js';
 import type { Snippet } from 'svelte';
 interface Props {
     resourceName: string;
+    rendering?: ResourceRendering | undefined;
     title?: string;
     density?: 'compact' | 'comfortable';
     columns?: 1 | 2 | 3 | 4;

package/dist/components/DateRangeInput.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+  import DateTimeInput, { type DateTimeInputMode } from './DateTimeInput.svelte';
+  import { cn } from '../utils.js';
+  import { definedOptions } from '@svadmin/core/options';
+
+  export interface DateRangeInputValue {
+    start: string | null;
+    end: string | null;
+  }
+
+  interface Props {
+    value?: DateRangeInputValue | null;
+    mode?: DateTimeInputMode;
+    min?: string;
+    max?: string;
+    step?: number;
+    startId?: string;
+    endId?: string;
+    startName?: string;
+    endName?: string;
+    disabled?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    describedby?: string;
+    class?: string;
+    onchange?: (value: DateRangeInputValue) => void;
+  }
+
+  let {
+    value = $bindable({ start: null, end: null }),
+    mode = 'date',
+    min,
+    max,
+    step,
+    startId,
+    endId,
+    startName,
+    endName,
+    disabled = false,
+    required = false,
+    invalid = false,
+    describedby,
+    class: className = '',
+    onchange,
+  }: Props = $props();
+
+  function update(part: 'start' | 'end', next: string | null): void {
+    // null 范围首次编辑也必须返回两个明确的端点。
+    const result: DateRangeInputValue = { start: value?.start ?? null, end: value?.end ?? null, [part]: next };
+    value = result;
+    onchange?.(result);
+  }
+</script>
+
+<div class={cn('svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-421ac2be5045', className)} data-date-range-input>
+  <DateTimeInput
+    value={value?.start ?? null}
+    {mode}
+    {...definedOptions({ min, max, step, id: startId, name: startName, describedby })}
+    {disabled}
+    {required}
+    {invalid}
+    onchange={(next) => update('start', next)}
+  />
+  <span aria-hidden="true">至</span>
+  <DateTimeInput
+    value={value?.end ?? null}
+    {mode}
+    {...definedOptions({ min, max, step, id: endId, name: endName, describedby })}
+    {disabled}
+    {required}
+    {invalid}
+    onchange={(next) => update('end', next)}
+  />
+</div>

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

@@ -0,0 +1,25 @@
+import { type DateTimeInputMode } from './DateTimeInput.svelte';
+export interface DateRangeInputValue {
+    start: string | null;
+    end: string | null;
+}
+interface Props {
+    value?: DateRangeInputValue | null;
+    mode?: DateTimeInputMode;
+    min?: string;
+    max?: string;
+    step?: number;
+    startId?: string;
+    endId?: string;
+    startName?: string;
+    endName?: string;
+    disabled?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    describedby?: string;
+    class?: string;
+    onchange?: (value: DateRangeInputValue) => void;
+}
+declare const DateRangeInput: import("svelte").Component<Props, {}, "value">;
+type DateRangeInput = ReturnType<typeof DateRangeInput>;
+export default DateRangeInput;

package/dist/components/DateTimeInput.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import { Input } from './ui/input/index.js';
+  import { cn } from '../utils.js';
+
+  export type DateTimeInputMode = 'date' | 'time' | 'datetime';
+
+  interface Props {
+    value?: string | null;
+    mode?: DateTimeInputMode;
+    min?: string;
+    max?: string;
+    step?: number;
+    id?: string;
+    name?: string;
+    disabled?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    describedby?: string;
+    class?: string;
+    onchange?: (value: string | null) => void;
+  }
+
+  let {
+    value = $bindable(null),
+    mode = 'date',
+    min,
+    max,
+    step,
+    id,
+    name,
+    disabled = false,
+    required = false,
+    invalid = false,
+    describedby,
+    class: className = '',
+    onchange,
+  }: Props = $props();
+
+  const inputType = $derived(mode === 'datetime' ? 'datetime-local' : mode);
+
+  function handleInput(event: Event): void {
+    const input = event.currentTarget;
+    if (!(input instanceof HTMLInputElement)) return;
+    const next = input.value === '' ? null : input.value;
+    value = next;
+    onchange?.(next);
+  }
+</script>
+
+<div class={cn('svadmin-u-6da6a3c3f741', className)} data-date-time-input={mode}>
+  <Input
+    {id}
+    {name}
+    type={inputType}
+    value={value ?? ''}
+    {min}
+    {max}
+    {step}
+    {disabled}
+    {required}
+    aria-invalid={invalid || undefined}
+    aria-describedby={describedby}
+    oninput={handleInput}
+  />
+</div>

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

@@ -0,0 +1,19 @@
+export type DateTimeInputMode = 'date' | 'time' | 'datetime';
+interface Props {
+    value?: string | null;
+    mode?: DateTimeInputMode;
+    min?: string;
+    max?: string;
+    step?: number;
+    id?: string;
+    name?: string;
+    disabled?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    describedby?: string;
+    class?: string;
+    onchange?: (value: string | null) => void;
+}
+declare const DateTimeInput: import("svelte").Component<Props, {}, "value">;
+type DateTimeInput = ReturnType<typeof DateTimeInput>;
+export default DateTimeInput;

package/dist/components/DevTools.svelte

@@ -241,8 +241,8 @@
   {#if visible}
     <div
       class="svadmin-u-7bc555991dba svadmin-u-189f036c335c svadmin-u-5a438c30beec svadmin-u-f50571addf44 svadmin-u-11863ecc32e7 svadmin-u-c69e21ff5804 svadmin-u-1301e5c1ce71 svadmin-u-ca6bcd4b6f3f svadmin-u-d5e98261a758 svadmin-u-cd0ad9a56558 svadmin-u-14e46609fd68 svadmin-u-1d5904e7e755 svadmin-u-2cd02d11d1af"
-      class:w-auto={collapsed}
-      class:min-w-[200px]={collapsed}
+      class:svadmin-devtools--collapsed-width={collapsed}
+      class:svadmin-devtools--collapsed-min-width={collapsed}
       transition:fly={{ y: 400, duration: 300 }}
     >
       <div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-8ef2268efbbc svadmin-u-0e17f2bd9074 svadmin-u-03b4dd7f172b svadmin-u-2ef11f1cb219 svadmin-u-65fdbade2025">

package/dist/components/EditPage.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import type { ResourceRendering } from '../rendering/index.js';
   import { definedOptions } from '@svadmin/core/options';
 
   import { getResource, useNavigation } from '@svadmin/core';
@@ -16,6 +17,7 @@
 
   interface Props {
     resourceName: string;
+    rendering?: ResourceRendering | undefined;
     id: string | number;
     title?: string;
     density?: 'compact' | 'comfortable';
@@ -28,6 +30,7 @@
 
   let {
     resourceName,
+    rendering,
     id,
     title,
     density = 'comfortable',
@@ -65,6 +68,7 @@
   </PageHeader>
 
   <AutoForm
+    {rendering}
     {resourceName}
     mode="edit"
     {id}

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

@@ -1,6 +1,8 @@
+import type { ResourceRendering } from '../rendering/index.js';
 import type { Snippet } from 'svelte';
 interface Props {
     resourceName: string;
+    rendering?: ResourceRendering | undefined;
     id: string | number;
     title?: string;
     density?: 'compact' | 'comfortable';

package/dist/components/FieldRenderer.svelte

@@ -18,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';
@@ -209,19 +215,52 @@
     </div>
 
   {:else if field.type === 'number'}
-    <Input
+    <NumberInput
       id={field.key}
       name={field.key}
-      type="number"
       value={numVal}
-      oninput={(e) => {
-        const input = e.currentTarget;
-        if (!(input instanceof HTMLInputElement)) return;
-        onchange(input.value === '' ? null : numericInputValue(input.valueAsNumber));
-      }}
+      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}
     />
 
@@ -300,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}
@@ -434,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} />