@chenzy-design/svelte 0.1.0 → 0.2.0

package/src/form/Form.svelte

@@ -1,243 +0,0 @@
-<!--
-  Form — see specs/components/input/Form.spec.md
-  Container that bridges the headless `createForm` (callback-subscribe) into Svelte
-  runes and shares it via context. Token-driven, a11y-correct.
--->
-<script lang="ts">
-  import { untrack, type Snippet } from 'svelte';
-  import {
-    createForm,
-    type FormValues,
-    type FieldErrors,
-    type MessageDescriptor,
-    type ValidateTrigger,
-  } from '@chenzy-design/core';
-  import { interpolate } from '@chenzy-design/locale';
-  import {
-    setFormContext,
-    type FormLayout,
-    type FormLabelPosition,
-    type FormSize,
-    type FormLabelAlign,
-    type GridCol,
-  } from './context.js';
-  import { useLocale } from '../locale-provider/index.js';
-  import { getGlobalValidateMessages } from '../config-provider/index.js';
-
-  interface Props {
-    /** controlled whole-form values (reported back via onChange, never written to the prop) */
-    value?: FormValues;
-    initValues?: FormValues;
-    layout?: FormLayout;
-    /** 'top' | 'left' | 'inset'（inset：label 浮入控件，聚焦/有值时上浮变小） */
-    labelPosition?: FormLabelPosition;
-    labelWidth?: number | string;
-    /** Label 文本对齐（spec §4 L60，默认 'left'）。 */
-    labelAlign?: FormLabelAlign;
-    size?: FormSize;
-    disabled?: boolean;
-    requiredMark?: boolean;
-    colon?: boolean;
-    /** on failed submit, scroll to and focus the first errored field */
-    scrollToError?: boolean;
-    /** 全局默认校验时机（spec §4 L65，默认 ['blur','change']），字段可覆盖。 */
-    validateTrigger?: ValidateTrigger | ValidateTrigger[];
-    /** 错误/警告文案是否带状态图标（spec §4 L66，默认 true）。 */
-    showValidateIcon?: boolean;
-    /** 字段命中首条错误即停止该字段后续 rule（spec §4 L68，默认 false）。 */
-    stopValidateWithError?: boolean;
-    /** 是否拦截原生 submit 默认行为（spec §4 L69，默认 true）。 */
-    preventDefault?: boolean;
-    /** 收集值时是否保留空值字段键（spec §4 L70，默认 false）。 */
-    allowEmpty?: boolean;
-    /** scrollToError 别名（优先级低于 scrollToError）。 */
-    autoScrollToError?: boolean;
-    /** 额外说明文本位置（默认 'bottom'，经 context 传给 FormField）。 */
-    extraTextPosition?: 'middle' | 'bottom';
-    onSubmit?: (r: { valid: boolean; values: FormValues; errors: FieldErrors }) => void;
-    /** 任意字段值变化时触发（不同于 onChange 的纯值快照，此回调额外携带变更字段信息）。 */
-    onValueChange?: (values: FormValues, changedValues: Record<string, unknown>) => void;
-    /** 表单校验失败时独立回调（onSubmit 只在 valid 时调用时可用此做失败分支）。 */
-    onSubmitFail?: (errors: FieldErrors, values: FormValues) => void;
-    onChange?: (values: FormValues) => void;
-    /** 控件布局列配置（Grid 布局时）。 */
-    wrapperCol?: GridCol;
-    /** 标签布局列配置（Grid 布局时）。 */
-    labelCol?: GridCol;
-    children?: Snippet;
-    footer?: Snippet<[{ submitting: boolean }]>;
-  }
-
-  let {
-    value,
-    initValues = {},
-    layout = 'vertical',
-    labelPosition = 'top',
-    labelWidth,
-    labelAlign = 'left',
-    size = 'default',
-    disabled = false,
-    requiredMark = true,
-    colon = false,
-    scrollToError = false,
-    autoScrollToError = false,
-    extraTextPosition = 'bottom',
-    validateTrigger = ['blur', 'change'],
-    showValidateIcon = true,
-    stopValidateWithError = false,
-    preventDefault = true,
-    allowEmpty = false,
-    onSubmit,
-    onValueChange,
-    onSubmitFail,
-    onChange,
-    wrapperCol,
-    labelCol,
-    children,
-    footer,
-  }: Props = $props();
-
-  const loc = useLocale();
-  // 全局校验文案覆盖（来自 ConfigProvider getValidateMessages）；须在 init 期读 context。
-  const globalValidateMessages = getGlobalValidateMessages();
-
-  // 校验消息优先级：
-  // 1) rule.message（descriptor.text）显式覆盖；
-  // 2) ConfigProvider getValidateMessages() 提供的对应 `Form.*` 键模板（带插值）；
-  // 3) locale 内置 Form.* 模板。
-  // 未配置全局覆盖时行为完全不变（向后兼容）。
-  function resolveMessage(d: MessageDescriptor): string {
-    if (d.text !== undefined) return d.text;
-    const override = globalValidateMessages?.()[d.key];
-    if (override !== undefined) return d.params ? interpolate(override, d.params) : override;
-    return loc().t(d.key, d.params);
-  }
-
-  // initial values are a one-time snapshot by design; untrack makes the
-  // non-reactive seed read explicit (later prop changes flow via the controlled
-  // `value` effect / onChange, not by re-seeding the form).
-  const seedValues: FormValues = untrack(() => value ?? initValues);
-  // validateTrigger / stopValidateWithError / allowEmpty are construction-time
-  // config of the headless form (read once, like initialValues). untrack keeps
-  // the read non-reactive — the form instance is created exactly once.
-  const form = createForm({
-    initialValues: seedValues,
-    resolveMessage,
-    validateTrigger: untrack(() => validateTrigger),
-    stopValidateWithError: untrack(() => stopValidateWithError),
-    allowEmpty: untrack(() => allowEmpty),
-  });
-
-  // Bridge: callback-subscribe → runes. core returns a STABLE state object whose
-  // sub-objects are replaced immutably; we take a fresh shallow snapshot on every
-  // emit so the new reference triggers Svelte reactivity. The $effect ONLY writes
-  // formState — it never reads state that children write on mount, so no loop.
-  let formState = $state({ ...form.getState() });
-  let lastValues = form.getState().values;
-  // Subscribe synchronously at component init (NOT inside an $effect): child
-  // Field registration effects run after the parent's setup but emit on the core
-  // bus; subscribing here guarantees we capture those early emits (e.g. a
-  // field-level `initValue` seeding the value). The subscriber only WRITES
-  // `formState` from the stable core state — it never reads child-written render
-  // state, so there is no effect loop. Cleanup unsubscribes on destroy.
-  const unsub = form.subscribe((s) => {
-    formState = { ...s };
-    if (s.values !== lastValues) {
-      const prev = lastValues;
-      lastValues = s.values;
-      onChange?.(s.values);
-      if (onValueChange) {
-        // Compute changedValues: fields whose reference differs from previous snapshot.
-        const changed: Record<string, unknown> = {};
-        for (const k of Object.keys(s.values)) {
-          if (s.values[k] !== prev[k]) changed[k] = s.values[k];
-        }
-        onValueChange(s.values, changed);
-      }
-    }
-  });
-  $effect(() => unsub);
-
-  // Controlled `value`: push into the form only when the prop reference changes.
-  // We never write back to the prop (onChange is the only outward channel), so
-  // this cannot form a value -> onChange -> value loop.
-  $effect(() => {
-    if (value !== undefined) form.setFieldsValue(value);
-  });
-
-  setFormContext({
-    form,
-    getFormState: () => formState,
-    getLabelPosition: () => labelPosition,
-    getLabelWidth: () => labelWidth,
-    getLabelAlign: () => labelAlign,
-    getSize: () => size,
-    getDisabled: () => disabled,
-    getRequiredMark: () => requiredMark,
-    getColon: () => colon,
-    getShowValidateIcon: () => showValidateIcon,
-    getExtraTextPosition: () => extraTextPosition,
-    getWrapperCol: () => wrapperCol,
-    getLabelCol: () => labelCol,
-  });
-
-  // autoScrollToError 是 scrollToError 别名（scrollToError 优先）
-  const effScrollToError = $derived(scrollToError || autoScrollToError || false);
-
-  // ref to the <form> element — used imperatively (red line #3: DOM ops live in
-  // the event handler, never in render) to locate the first errored field.
-  let formEl: HTMLFormElement | undefined;
-
-  function focusFirstError(errors: FieldErrors): void {
-    if (!formEl) return;
-    // walk fields in DOM order so we land on the *first* errored one on screen.
-    const nodes = formEl.querySelectorAll<HTMLElement>('[data-field]');
-    for (const node of nodes) {
-      const name = node.dataset.field;
-      if (name === undefined) continue;
-      const err = errors[name];
-      if (err === undefined || err === '') continue;
-      node.scrollIntoView({ behavior: 'smooth', block: 'center' });
-      const control = node.querySelector<HTMLElement>(
-        'input, textarea, select, [tabindex]:not([tabindex="-1"])',
-      );
-      control?.focus({ preventScroll: true });
-      return;
-    }
-  }
-
-  async function handleSubmit(e: SubmitEvent) {
-    // spec §4 L69 / §6 L140: preventDefault is now prop-controlled (default true
-    // = previous hardcoded behavior, backward compatible).
-    if (preventDefault) e.preventDefault();
-    const r = await form.submit();
-    if (!r.valid && effScrollToError) focusFirstError(r.errors);
-    if (!r.valid) onSubmitFail?.(r.errors, r.values);
-    onSubmit?.(r);
-  }
-
-  const cls = $derived(
-    `cd-form cd-form--${layout} cd-form--label-${labelPosition} cd-form--${size}`,
-  );
-</script>
-
-<form bind:this={formEl} class={cls} onsubmit={handleSubmit}>
-  {@render children?.()}
-  {#if footer}
-    <div class="cd-form__footer">
-      {@render footer({ submitting: formState.submitting })}
-    </div>
-  {/if}
-</form>
-
-<style>
-  .cd-form {
-    display: flex;
-    flex-direction: column;
-    gap: var(--cd-form-item-gap, var(--cd-spacing-4));
-  }
-  .cd-form__footer {
-    display: flex;
-    gap: var(--cd-spacing-3);
-  }
-</style>

package/src/form/FormA11yFixture.svelte

@@ -1,31 +0,0 @@
-<!--
-  Form a11y 测试夹具：在 Form 内组合 Form.Input（Field+Input）与一个 Form.Field
-  自定义控件，覆盖 label 关联（for/id）、aria-required、aria-describedby、
-  validateStatus 强制 error → aria-invalid。仅供 Form.a11y.test.ts 使用，不导出。
-  通过 renderWithLocale 渲染（harness 会注入空 children 插槽，Form 接受 children 故无碍）。
--->
-<script lang="ts">
-  import { Form } from './index.js';
-  import TextArea from '../textarea/TextArea.svelte';
-</script>
-
-<Form initValues={{ name: 'Ada', bio: '' }}>
-  <!-- Form.Input：Field + Input，label 经 for/id 关联，required → aria-required -->
-  <Form.Input field="name" label="Name" required placeholder="Your name" />
-
-  <!-- Form.Field 自定义控件：validateStatus 强制 error → 控件 aria-invalid，
-       extraText → aria-describedby 关联 -->
-  <Form.Field field="bio" label="Bio" validateStatus="error" extraText="Some hint">
-    {#snippet children({ value, onChange, onBlur, status, id, describedBy, required })}
-      <TextArea
-        value={value === undefined ? '' : String(value)}
-        {id}
-        status={status === 'error' ? 'error' : 'default'}
-        ariaLabel="Bio"
-        {...(describedBy !== undefined ? { ariaDescribedby: describedBy } : {})}
-        onChange={(v) => onChange(v)}
-        onBlur={() => onBlur()}
-      />
-    {/snippet}
-  </Form.Field>
-</Form>

package/src/form/FormCascader.svelte

@@ -1,82 +0,0 @@
-<!--
-  Form.Cascader — convenience wrapper: <Form.Field> + <Cascader> bound to a field.
--->
-<script lang="ts">
-  import type { Rule, ValidateTrigger } from '@chenzy-design/core';
-  import type { ComponentProps } from 'svelte';
-  import Field from './Field.svelte';
-  import Cascader from '../cascader/Cascader.svelte';
-
-  type CascaderProps = ComponentProps<typeof Cascader>;
-
-  interface Props {
-    field: string;
-    label?: string;
-    rules?: Rule[];
-    initValue?: unknown;
-    required?: boolean;
-    validateStatus?: 'default' | 'warning' | 'error';
-    extraText?: string;
-    span?: number;
-    transform?: (value: unknown, values: Record<string, unknown>) => unknown;
-    dependencies?: string[];
-    trigger?: ValidateTrigger | ValidateTrigger[];
-    // Cascader-specific props
-    treeData?: CascaderProps['treeData'];
-    multiple?: CascaderProps['multiple'];
-    placeholder?: CascaderProps['placeholder'];
-    disabled?: boolean;
-    size?: CascaderProps['size'];
-    displayProp?: CascaderProps['displayProp'];
-  }
-
-  let {
-    field,
-    label,
-    rules = [],
-    initValue,
-    required = false,
-    validateStatus,
-    extraText,
-    span,
-    transform,
-    dependencies,
-    trigger,
-    treeData,
-    multiple,
-    placeholder,
-    disabled,
-    size,
-    displayProp,
-  }: Props = $props();
-
-  const fieldProps = $derived<ComponentProps<typeof Field>>({
-    field,
-    rules,
-    required,
-    ...(label !== undefined ? { label } : {}),
-    ...(initValue !== undefined ? { initValue } : {}),
-    ...(validateStatus !== undefined ? { validateStatus } : {}),
-    ...(extraText !== undefined ? { extraText } : {}),
-    ...(span !== undefined ? { span } : {}),
-    ...(transform !== undefined ? { transform } : {}),
-    ...(dependencies !== undefined ? { dependencies } : {}),
-    ...(trigger !== undefined ? { trigger } : {}),
-  });
-</script>
-
-<Field {...fieldProps}>
-  {#snippet children({ value, onChange, status, disabled: fieldDisabled })}
-    <Cascader
-      value={value as CascaderProps['value']}
-      {treeData}
-      {multiple}
-      {placeholder}
-      disabled={disabled ?? fieldDisabled}
-      {size}
-      {displayProp}
-      status={status === 'error' ? 'error' : 'default'}
-      onChange={(v) => onChange(v)}
-    />
-  {/snippet}
-</Field>

package/src/form/FormCheckbox.svelte

@@ -1,83 +0,0 @@
-<!--
-  Form.Checkbox — convenience wrapper: <Form.Field> + <Checkbox> bound to a field.
-  Uses valuePropName='checked' since Checkbox is a boolean control.
--->
-<script lang="ts">
-  import type { Rule, ValidateTrigger } from '@chenzy-design/core';
-  import type { ComponentProps, Snippet } from 'svelte';
-  import Field from './Field.svelte';
-  import Checkbox from '../checkbox/Checkbox.svelte';
-
-  type CheckboxProps = ComponentProps<typeof Checkbox>;
-
-  interface Props {
-    field: string;
-    label?: string;
-    rules?: Rule[];
-    initValue?: unknown;
-    required?: boolean;
-    validateStatus?: 'default' | 'warning' | 'error';
-    extraText?: string;
-    span?: number;
-    transform?: (value: unknown, values: Record<string, unknown>) => unknown;
-    dependencies?: string[];
-    trigger?: ValidateTrigger | ValidateTrigger[];
-    // Checkbox-specific props
-    disabled?: boolean;
-    size?: CheckboxProps['size'];
-    indeterminate?: CheckboxProps['indeterminate'];
-    type?: CheckboxProps['type'];
-    children?: Snippet;
-  }
-
-  let {
-    field,
-    label,
-    rules = [],
-    initValue,
-    required = false,
-    validateStatus,
-    extraText,
-    span,
-    transform,
-    dependencies,
-    trigger,
-    disabled,
-    size,
-    indeterminate,
-    type,
-    children,
-  }: Props = $props();
-
-  const fieldProps = $derived<ComponentProps<typeof Field>>({
-    field,
-    rules,
-    required,
-    valuePropName: 'checked',
-    ...(label !== undefined ? { label } : {}),
-    ...(initValue !== undefined ? { initValue } : {}),
-    ...(validateStatus !== undefined ? { validateStatus } : {}),
-    ...(extraText !== undefined ? { extraText } : {}),
-    ...(span !== undefined ? { span } : {}),
-    ...(transform !== undefined ? { transform } : {}),
-    ...(dependencies !== undefined ? { dependencies } : {}),
-    ...(trigger !== undefined ? { trigger } : {}),
-  });
-</script>
-
-<Field {...fieldProps}>
-  {#snippet children({ value, onChange, status, disabled: fieldDisabled, id, required: fieldRequired })}
-    <Checkbox
-      checked={typeof value === 'boolean' ? value : undefined}
-      disabled={disabled ?? fieldDisabled}
-      {size}
-      {indeterminate}
-      {type}
-      {id}
-      status={status === 'error' ? 'error' : 'default'}
-      onChange={(checked) => onChange(checked)}
-    >
-      {@render children?.()}
-    </Checkbox>
-  {/snippet}
-</Field>

package/src/form/FormDatePicker.svelte

@@ -1,80 +0,0 @@
-<!--
-  Form.DatePicker — convenience wrapper: <Form.Field> + <DatePicker> bound to a field.
--->
-<script lang="ts">
-  import type { Rule, ValidateTrigger } from '@chenzy-design/core';
-  import type { ComponentProps } from 'svelte';
-  import Field from './Field.svelte';
-  import DatePicker from '../date-picker/DatePicker.svelte';
-
-  type DatePickerProps = ComponentProps<typeof DatePicker>;
-
-  interface Props {
-    field: string;
-    label?: string;
-    rules?: Rule[];
-    initValue?: unknown;
-    required?: boolean;
-    validateStatus?: 'default' | 'warning' | 'error';
-    extraText?: string;
-    span?: number;
-    transform?: (value: unknown, values: Record<string, unknown>) => unknown;
-    dependencies?: string[];
-    trigger?: ValidateTrigger | ValidateTrigger[];
-    // DatePicker-specific props
-    placeholder?: DatePickerProps['placeholder'];
-    disabled?: boolean;
-    size?: DatePickerProps['size'];
-    format?: DatePickerProps['format'];
-    disabledDate?: DatePickerProps['disabledDate'];
-  }
-
-  let {
-    field,
-    label,
-    rules = [],
-    initValue,
-    required = false,
-    validateStatus,
-    extraText,
-    span,
-    transform,
-    dependencies,
-    trigger,
-    placeholder,
-    disabled,
-    size,
-    format,
-    disabledDate,
-  }: Props = $props();
-
-  const fieldProps = $derived<ComponentProps<typeof Field>>({
-    field,
-    rules,
-    required,
-    ...(label !== undefined ? { label } : {}),
-    ...(initValue !== undefined ? { initValue } : {}),
-    ...(validateStatus !== undefined ? { validateStatus } : {}),
-    ...(extraText !== undefined ? { extraText } : {}),
-    ...(span !== undefined ? { span } : {}),
-    ...(transform !== undefined ? { transform } : {}),
-    ...(dependencies !== undefined ? { dependencies } : {}),
-    ...(trigger !== undefined ? { trigger } : {}),
-  });
-</script>
-
-<Field {...fieldProps}>
-  {#snippet children({ value, onChange, onBlur, status, disabled: fieldDisabled, id })}
-    <DatePicker
-      value={value instanceof Date || value === null || value === undefined ? (value as DatePickerProps['value']) : undefined}
-      {placeholder}
-      disabled={disabled ?? fieldDisabled}
-      {size}
-      {format}
-      {disabledDate}
-      status={status === 'error' ? 'error' : 'default'}
-      onChange={(v) => onChange(v)}
-      onBlur={() => onBlur()}
-    />
-  {/snippet}
-</Field>

package/src/form/FormErrorMessage.svelte

@@ -1,44 +0,0 @@
-<!--
-  Form.ErrorMessage — see specs/components/input/Form.spec.md
-  独立错误文字展示：带错误图标的错误文字，可独立放置于任意位置。
--->
-<script lang="ts">
-  interface Props {
-    /** 错误文本（字符串或字符串数组）。 */
-    error?: string | string[];
-    className?: string;
-    /** 是否显示错误图标（默认 true）。 */
-    showIcon?: boolean;
-  }
-
-  let { error, className, showIcon = true }: Props = $props();
-
-  const messages = $derived(
-    error === undefined
-      ? []
-      : Array.isArray(error)
-        ? error
-        : [error],
-  );
-</script>
-
-{#each messages as msg (msg)}
-  <div class={['cd-form-field__error', className].filter(Boolean).join(' ')} role="alert">
-    {#if showIcon}
-      <svg
-        class="cd-form-field__status-icon"
-        viewBox="0 0 16 16"
-        width="14"
-        height="14"
-        aria-hidden="true"
-        focusable="false"
-      >
-        <path
-          fill="currentColor"
-          d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1Zm-.75 3.5h1.5v5h-1.5v-5ZM8 12.25a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"
-        />
-      </svg>
-    {/if}
-    <span>{msg}</span>
-  </div>
-{/each}

package/src/form/FormInput.svelte

@@ -1,95 +0,0 @@
-<!--
-  FormInput — see specs/components/input/Form.spec.md
-  Convenience wrapper: <Form.Field> + <Input> bound to a field.
--->
-<script lang="ts">
-  import type { Rule, ValidateTrigger } from '@chenzy-design/core';
-  import type { ComponentProps } from 'svelte';
-  import Field from './Field.svelte';
-  import Input from '../input/Input.svelte';
-
-  interface Props {
-    field: string;
-    label?: string;
-    rules?: Rule[];
-    /** field-level initial value (spec §4.2 L79). */
-    initValue?: unknown;
-    required?: boolean;
-    /** externally forced validate status — controlled display (spec §4.2 L81). */
-    validateStatus?: 'default' | 'warning' | 'error';
-    extraText?: string;
-    /** column span inside a grid parent / Form.Section (spec §4.2 L86). */
-    span?: number;
-    /** pure value transform at collect/submit time (spec §4.2 L88). */
-    transform?: (value: unknown, values: Record<string, unknown>) => unknown;
-    placeholder?: string;
-    type?: 'text' | 'password';
-    clearable?: boolean;
-    maxLength?: number;
-    dependencies?: string[];
-    /** field-level override of the form's validateTrigger (spec §4 L84). */
-    trigger?: ValidateTrigger | ValidateTrigger[];
-  }
-
-  let {
-    field,
-    label,
-    rules = [],
-    initValue,
-    required = false,
-    validateStatus,
-    extraText,
-    span,
-    transform,
-    placeholder,
-    type = 'text',
-    clearable = false,
-    maxLength,
-    dependencies,
-    trigger,
-  }: Props = $props();
-
-  // Build props with conditional keys so we never pass an explicit `undefined`
-  // to an optional prop (exactOptionalPropertyTypes).
-  const fieldProps = $derived<ComponentProps<typeof Field>>({
-    field,
-    rules,
-    required,
-    ...(label !== undefined ? { label } : {}),
-    ...(initValue !== undefined ? { initValue } : {}),
-    ...(validateStatus !== undefined ? { validateStatus } : {}),
-    ...(extraText !== undefined ? { extraText } : {}),
-    ...(span !== undefined ? { span } : {}),
-    ...(transform !== undefined ? { transform } : {}),
-    ...(dependencies !== undefined ? { dependencies } : {}),
-    ...(trigger !== undefined ? { trigger } : {}),
-  });
-</script>
-
-<Field {...fieldProps}>
-  {#snippet children({ value, onChange, onBlur, status, disabled, id, describedBy, required })}
-    <!--
-      `id` is wired to the native <input> so Field's visible <label for={id}>
-      precisely targets the control (WAI-ARIA preferred association): clicking the
-      label focuses the input and screen readers pair them by name. `ariaLabel`
-      remains as a redundant accessible name (and the only one when no `label`).
-      `describedBy` links the error/warning/extra text to the control.
-      blur-time validation is still deferred until Input gains an `onBlur` hook.
-    -->
-    <Input
-      value={value === undefined ? '' : String(value)}
-      status={status === 'error' ? 'error' : 'default'}
-      {disabled}
-      {id}
-      {type}
-      {clearable}
-      {...(placeholder !== undefined ? { placeholder } : {})}
-      {...(maxLength !== undefined ? { maxLength } : {})}
-      {...(label !== undefined ? { ariaLabel: label } : {})}
-      {...(describedBy !== undefined ? { ariaDescribedby: describedBy } : {})}
-      {...(required ? { ariaRequired: true } : {})}
-      onChange={(v) => onChange(v)}
-      onBlur={() => onBlur()}
-    />
-  {/snippet}
-</Field>