@svadmin/ui 0.72.0 → 0.74.0

package/dist/components/DevframePanel.svelte

@@ -0,0 +1,123 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { connectPanelChannel, type PanelChannel } from 'devframe/in-page-channel';
+  import {
+    SVADMIN_DEVFRAME_CHANNEL,
+    type DevtoolsQuerySelector,
+    type SvadminDevframeProtocol,
+    type SvadminDevtoolsSnapshot,
+  } from '../devtools-bridge.js';
+
+  let channel = $state<PanelChannel<SvadminDevframeProtocol> | null>(null);
+  let snapshot = $state<SvadminDevtoolsSnapshot | null>(null);
+  let status = $state('connecting');
+  let busy = $state(false);
+  let selectedProvider = $state('');
+  let selectedResource = $state('');
+  let selectedOperation = $state('');
+
+  const selector = $derived<DevtoolsQuerySelector>({
+    ...(selectedProvider ? { provider: selectedProvider } : {}),
+    ...(selectedResource ? { resource: selectedResource } : {}),
+    ...(selectedOperation ? { operation: selectedOperation } : {}),
+  });
+
+  async function run(action: (selector?: DevtoolsQuerySelector) => Promise<void> | void): Promise<void> {
+    if (!channel || !snapshot) return;
+    busy = true;
+    try {
+      await action(Object.keys(selector).length > 0 ? selector : undefined);
+      snapshot = await channel.call('getSnapshot');
+    } finally {
+      busy = false;
+    }
+  }
+
+  onMount(() => {
+    const nextChannel = connectPanelChannel<SvadminDevframeProtocol>({
+      name: SVADMIN_DEVFRAME_CHANNEL,
+      functions: {},
+    });
+    channel = nextChannel;
+    status = nextChannel.status;
+    const onStatus = () => {
+      status = nextChannel.status;
+      if (nextChannel.status === 'connected') {
+        void nextChannel.call('getSnapshot').then((next) => { snapshot = next; });
+      }
+    };
+    nextChannel.events.on('status:updated', onStatus);
+    onStatus();
+    return () => nextChannel.close();
+  });
+
+  function unique(values: string[]): string[] {
+    return [...new Set(values)].sort();
+  }
+</script>
+
+<section aria-label="svadmin Devframe panel">
+  <header>
+    <strong>svadmin DevTools</strong>
+    <span>{status}</span>
+  </header>
+
+  {#if snapshot}
+    <dl>
+      <div><dt>Route</dt><dd>{snapshot.route}</dd></div>
+      <div><dt>Resources</dt><dd>{snapshot.resourceCount}</dd></div>
+      <div><dt>Queries</dt><dd>{snapshot.cache.queries.total}</dd></div>
+      <div><dt>Mutations</dt><dd>{snapshot.cache.mutations.total}</dd></div>
+    </dl>
+    <div>
+      <label>
+        Provider
+        <select bind:value={selectedProvider}>
+          <option value="">All</option>
+          {#each unique(snapshot.queries.map((query) => query.provider)) as provider (provider)}
+            <option value={provider}>{provider}</option>
+          {/each}
+        </select>
+      </label>
+      <label>
+        Resource
+        <select bind:value={selectedResource}>
+          <option value="">All</option>
+          {#each unique(snapshot.queries.map((query) => query.resource)) as resource (resource)}
+            <option value={resource}>{resource}</option>
+          {/each}
+        </select>
+      </label>
+      <label>
+        Operation
+        <select bind:value={selectedOperation}>
+          <option value="">All</option>
+          {#each unique(snapshot.queries.map((query) => query.operation)) as operation (operation)}
+            <option value={operation}>{operation}</option>
+          {/each}
+        </select>
+      </label>
+    </div>
+    {#if snapshot.queries.length > 0}
+      <ul>
+        {#each snapshot.queries as query (`${query.provider}:${query.resource}:${query.operation}`)}
+          <li>
+            <strong>{query.provider} / {query.resource}</strong>
+            <span>{query.operation} · {query.status} · {query.duration}</span>
+          </li>
+        {/each}
+      </ul>
+    {/if}
+    <div>
+      <button type="button" disabled={busy} onclick={() => run((selector) => channel?.call('cacheInvalidate', selector))}>Invalidate</button>
+      <button type="button" disabled={busy} onclick={() => run((selector) => channel?.call('cacheRefetch', selector))}>Refetch</button>
+      <button type="button" disabled={busy} onclick={() => run((selector) => channel?.call('cacheCancel', selector))}>Cancel</button>
+      <button type="button" disabled={busy} onclick={() => run((selector) => channel?.call('cacheReset', selector))}>Reset</button>
+      <button type="button" disabled={busy} onclick={() => run((selector) => channel?.call('cacheRemove', selector))}>Remove</button>
+      <button type="button" disabled={busy} onclick={() => run(() => channel?.call('cacheClear'))}>Clear cache</button>
+      <button type="button" disabled={busy} onclick={() => run(() => channel?.call('clearMutations'))}>Clear mutations</button>
+    </div>
+  {:else}
+    <p>Waiting for an svadmin page.</p>
+  {/if}
+</section>

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

@@ -0,0 +1,3 @@
+declare const DevframePanel: import("svelte").Component<Record<string, never>, {}, "">;
+type DevframePanel = ReturnType<typeof DevframePanel>;
+export default DevframePanel;

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/ErrorSummary.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import { useTranslation } from '@svadmin/core/i18n';
+
+  const i18n = useTranslation();
+
+  export interface FormErrorEntry {
+    fieldKey: string;
+    label: string;
+    message: string;
+  }
+
+  let {
+    errors = [],
+    title = i18n.t('common.formErrors'),
+    id,
+    onfocusfield,
+  } = $props<{
+    errors?: FormErrorEntry[];
+    title?: string;
+    id?: string;
+    onfocusfield?: (fieldKey: string) => void;
+  }>();
+
+  const headingId = $derived(id ? `${id}-title` : undefined);
+</script>
+
+{#if errors.length > 0}
+  <div
+    class="svadmin-u-ee1a5af3aa10"
+    role="region"
+    aria-labelledby={headingId}
+  >
+    <h2 id={headingId} class="svadmin-u-2689f3958069">{title}</h2>
+    <ul>
+      {#each errors as error (error.fieldKey)}
+        <li>
+          {#if onfocusfield}
+            <button
+              type="button"
+              class="svadmin-u-d4108abe6359"
+              onclick={() => onfocusfield?.(error.fieldKey)}
+            >
+              {error.label}: {error.message}
+            </button>
+          {:else}
+            <span>{error.label}: {error.message}</span>
+          {/if}
+        </li>
+      {/each}
+    </ul>
+  </div>
+{/if}

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

@@ -0,0 +1,14 @@
+export interface FormErrorEntry {
+    fieldKey: string;
+    label: string;
+    message: string;
+}
+type $$ComponentProps = {
+    errors?: FormErrorEntry[];
+    title?: string;
+    id?: string;
+    onfocusfield?: (fieldKey: string) => void;
+};
+declare const ErrorSummary: import("svelte").Component<$$ComponentProps, {}, "">;
+type ErrorSummary = ReturnType<typeof ErrorSummary>;
+export default ErrorSummary;

package/dist/components/FieldRenderer.svelte

@@ -18,6 +18,15 @@
   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 ColorPicker from './ColorPicker.svelte';
+  import Rate from './Rate.svelte';
+  import TagsInput from './TagsInput.svelte';
   import TreeSelect, { type TreeSelectOption } from './TreeSelect.svelte';
   import Cascader, { type CascaderOption } from './Cascader.svelte';
   import Transfer, { type TransferItem } from './Transfer.svelte';
@@ -50,6 +59,11 @@
   const boolVal = $derived((value as boolean) ?? false);
   const tagsVal = $derived((value as string[]) ?? []);
   const multiVal = $derived((value as (string | number)[]) ?? []);
+  type FieldOption = NonNullable<FieldDefinition['options']>[number];
+  const selectToken = $derived.by(() => {
+    const index = field.options?.findIndex((option: FieldOption) => option.value === value) ?? -1;
+    return index < 0 ? '' : `option:${index}`;
+  });
   const imagesVal = $derived((value as string[]) ?? []);
   let jsonEditText = $state('');
   let jsonEditing = false;
@@ -59,24 +73,20 @@
     jsonEditText = typeof value === 'string' ? String(value) : JSON.stringify(value, null, 2);
   });
 
-  function handleTagKeydown(e: KeyboardEvent) {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      const input = e.target as HTMLInputElement;
-      const tag = input.value.trim();
-      if (tag) {
-        onchange([...tagsVal, tag]);
-        input.value = '';
-      }
+  function changeSelect(event: Event) {
+    if (disabled || !(event.currentTarget instanceof HTMLSelectElement)) return;
+    const token = event.currentTarget.value;
+    if (token === '') {
+      onchange(null);
+      return;
     }
+    const option = field.options?.find((_option: FieldOption, index: number) => token === `option:${index}`);
+    if (option && !option.disabled) onchange(option.value);
   }
 
-  function removeTag(index: number) {
-    onchange(tagsVal.filter((_: string, i: number) => i !== index));
-  }
-
-  // Multiselect toggle
+  // 禁用值保留回显，但不能从复选框或标签删除入口修改。
   function toggleMulti(optValue: string | number) {
+    if (disabled || field.options?.find((option: FieldOption) => option.value === optValue)?.disabled) return;
     if (multiVal.includes(optValue)) {
       onchange(multiVal.filter((v: string | number) => v !== optValue));
     } else {
@@ -180,48 +190,65 @@
     />
 
   {:else if field.type === 'color'}
-    <div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-1004c0c3954c">
-      <input
-        id={field.key}
-        name={field.key}
-        type="color"
-        value={strVal || '#000000'}
-        oninput={(e) => onchange((e.target as HTMLInputElement).value)}
-        class="svadmin-u-426b8b75185b svadmin-u-7e74e5fe798a svadmin-u-34516836730d svadmin-u-421ac2be5045 svadmin-u-ca6bcd4b6f3f svadmin-u-e5795dad4d22 svadmin-u-e6f9e383a762 svadmin-u-eb6a3cef9686"
-        disabled={disabled}
-        aria-invalid={invalid || undefined}
-        aria-describedby={errorId}
-      />
-      <Input
-        type="text"
-        value={strVal}
-        oninput={(e) => onchange((e.target as HTMLInputElement).value)}
-        placeholder="#000000"
-        class="svadmin-u-1d274d2422d8 svadmin-u-0e65706bcccd svadmin-u-fc7473ca09eb"
-        {disabled}
-      />
-      {#if strVal}
-        <span
-          class="svadmin-u-ed8a5df7b2fb svadmin-u-2bbcfc3b5179 svadmin-u-ac204c108886 svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-438b2237b8d6"
-          style="background-color: {strVal}"
-        ></span>
-      {/if}
-    </div>
+    <ColorPicker
+      id={field.key}
+      name={field.key}
+      value={strVal}
+      onchange={onchange}
+      required={field.required}
+      invalid={invalid}
+      describedby={errorId}
+      ariaLabel={field.label}
+      {disabled}
+    />
 
   {: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 +327,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}
@@ -315,14 +349,14 @@
     />
 
   {:else if field.type === 'select'}
+    <input type="hidden" name={field.key} value={value == null ? '' : String(value)} {disabled} />
     {#if (field.options?.length ?? 0) > 8}
       <select
         id={field.key}
-        name={field.key}
         data-slot="select"
         class="svadmin-u-60fbb7713999 svadmin-u-426b8b75185b svadmin-u-6da6a3c3f741 svadmin-u-3960ffc248d9 svadmin-u-8ef2268efbbc svadmin-u-421ac2be5045 svadmin-u-ca6bcd4b6f3f svadmin-u-e5795dad4d22 svadmin-u-e6f9e383a762 svadmin-u-0e17f2bd9074 svadmin-u-03b4dd7f172b svadmin-u-fc7473ca09eb svadmin-u-582e6ef4b245 svadmin-u-9c24ab70af61 svadmin-u-55d048ebfb1c svadmin-u-608dd26cd5ba svadmin-u-80b9d0ae125f svadmin-u-6b22a22a9752 svadmin-u-5f533b3a7de7 svadmin-u-b29d8adbad2e"
-        value={strVal}
-        onchange={(e) => onchange((e.target as HTMLSelectElement).value)}
+        value={selectToken}
+        onchange={changeSelect}
         required={field.required}
         aria-invalid={invalid || undefined}
         aria-describedby={errorId}
@@ -330,30 +364,29 @@
       >
         <option value="">{i18n.t('field.selectPlaceholder')}</option>
         {#each field.options ?? [] as opt, _i (_i)}
-          <option value={opt.value}>{opt.label}</option>
+          <option value={`option:${_i}`} disabled={opt.disabled}>{opt.label}</option>
         {/each}
       </select>
     {:else}
       <Select
         id={field.key}
-        name={field.key}
-        value={strVal}
-        onchange={(e) => onchange((e.target as HTMLSelectElement).value)}
+        value={selectToken}
+        onchange={changeSelect}
         required={field.required}
         aria-invalid={invalid || undefined}
         aria-describedby={errorId}
         {disabled}
-        placeholder={i18n.t('field.selectPlaceholder')}
       >
+        <option value="">{i18n.t('field.selectPlaceholder')}</option>
         {#each field.options ?? [] as opt, _i (_i)}
-          <option value={opt.value}>{opt.label}</option>
+          <option value={`option:${_i}`} disabled={opt.disabled}>{opt.label}</option>
         {/each}
       </Select>
     {/if}
 
   {:else if field.type === 'multiselect'}
     {#each multiVal as selectedValue, selectedIndex (`${selectedValue}-${selectedIndex}`)}
-      <input type="hidden" name={`${field.key}[]`} value={String(selectedValue)} />
+      <input type="hidden" name={`${field.key}[]`} value={String(selectedValue)} {disabled} />
     {/each}
     <div 
       class="svadmin-u-6f7e013d6499 svadmin-u-5f22e64f2282 svadmin-u-ca6bcd4b6f3f svadmin-u-e5795dad4d22 svadmin-u-eb6e8b881acd svadmin-u-558f64349245 svadmin-u-92bf82f493b1"
@@ -365,12 +398,12 @@
       {#each field.options ?? [] as opt, _i (_i)}
         <label class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-77a2a20e90d4 svadmin-u-fc7473ca09eb svadmin-u-34516836730d svadmin-u-39f703dbe296 svadmin-u-07389a777c1f svadmin-u-d8e0e382c67b svadmin-u-465609a240a8 svadmin-u-ceb69a6b0e5f">
           <Checkbox
-            id={`${field.key}-${opt.value}`}
+            id={`${field.key}-option-${_i}`}
             checked={multiVal.includes(opt.value)}
             onCheckedChange={() => toggleMulti(opt.value)}
             aria-invalid={invalid || undefined}
             aria-describedby={errorId}
-            disabled={disabled}
+            disabled={disabled || opt.disabled}
           />
           {opt.label}
         </label>
@@ -385,7 +418,7 @@
           {@const label = field.options?.find((o: { label: string; value: string | number }) => o.value === v)?.label ?? String(v)}
           <Badge variant="secondary" class="svadmin-u-44ee8ba0a421">
             {label}
-            <button type="button" onclick={() => toggleMulti(v)} class="svadmin-u-b45ce4b65d53 svadmin-u-36d4469299aa svadmin-u-51e95020d6f2 svadmin-u-8db899b4e072 svadmin-u-ceb69a6b0e5f" aria-label={i18n.t('common.clear')}>×</button>
+            <button type="button" disabled={disabled || field.options?.find((option: FieldOption) => option.value === v)?.disabled} onclick={() => toggleMulti(v)} class="svadmin-u-b45ce4b65d53 svadmin-u-36d4469299aa svadmin-u-51e95020d6f2 svadmin-u-8db899b4e072 svadmin-u-ceb69a6b0e5f" aria-label={i18n.t('common.clear')}>×</button>
           </Badge>
         {/each}
       </div>
@@ -406,47 +439,87 @@
     </div>
 
   {:else if field.type === 'tags'}
-    {#each tagsVal as tag, tagIndex (`${tag}-${tagIndex}`)}
-      <input type="hidden" name={`${field.key}[]`} value={tag} />
-    {/each}
-    <div class="svadmin-u-6f7e013d6499">
-      <div class="svadmin-u-60fbb7713999 svadmin-u-1eb5c6df38c1 svadmin-u-58284b4ea568">
-        {#each tagsVal as tag, i (i)}
-          <Badge variant="secondary" class="svadmin-u-44ee8ba0a421">
-            {tag}
-            <button
-              type="button"
-              onclick={() => removeTag(i)}
-              class="svadmin-u-b45ce4b65d53 svadmin-u-36d4469299aa svadmin-u-51e95020d6f2 svadmin-u-8db899b4e072 svadmin-u-ceb69a6b0e5f"
-              aria-label={i18n.t('common.clear')}
-            >×</button>
-          </Badge>
-        {/each}
-      </div>
-      <Input
-        id={field.key}
-        type="text"
-        placeholder={i18n.t('field.tagsPlaceholder')}
-        onkeydown={handleTagKeydown}
-        aria-invalid={invalid || undefined}
-        aria-describedby={errorId}
-        {disabled}
-      />
-    </div>
+    <TagsInput
+      name={`${field.key}[]`}
+      value={tagsVal}
+      onchange={onchange}
+      placeholder={i18n.t('field.tagsPlaceholder')}
+      required={field.required}
+      invalid={invalid}
+      describedby={errorId}
+      ariaLabel={field.label}
+      {disabled}
+    />
 
-  {: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}
+      min={field.dateInput?.min}
+      max={field.dateInput?.max}
+      step={field.dateInput?.step}
+      disabledDate={field.dateInput?.disabledDate}
+      valueMode={field.dateInput?.valueMode}
+      timeZone={field.dateInput?.timeZone}
+      disambiguation={field.dateInput?.disambiguation}
+      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`}
+      mode={field.dateInput?.rangeMode ?? 'date'}
+      valueMode={field.dateInput?.valueMode}
+      timeZone={field.dateInput?.timeZone}
+      disambiguation={field.dateInput?.disambiguation}
+      min={field.dateInput?.min}
+      max={field.dateInput?.max}
+      step={field.dateInput?.step}
+      disabledDate={field.dateInput?.disabledDate}
+      presets={field.dateInput?.presets}
+      endId={`${field.key}-end`}
+      startAriaLabel={`${field.label} ${i18n.t('common.startDate')}`}
+      endAriaLabel={`${field.label} ${i18n.t('common.endDate')}`}
+      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 === 'rate' || field.type === 'rating'}
+    <Rate
+      name={field.key}
+      value={numVal ?? 0}
+      onchange={onchange}
+      required={field.required}
+      invalid={invalid}
+      describedby={errorId}
+      ariaLabel={field.label}
+      {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} />