@chenzy-design/svelte 0.1.0 → 0.2.0

package/src/form/FormLabel.svelte

@@ -1,46 +0,0 @@
-<!--
-  Form.Label — see specs/components/input/Form.spec.md
-  独立标签组件，与 Field 内标签样式一致，可用于自定义布局。
--->
-<script lang="ts">
-  interface Props {
-    /** 标签文本。 */
-    text?: string;
-    /** 是否必填（显示 * 星标）。 */
-    required?: boolean;
-    /** 是否显示「可选」标记（与 required 互斥，required 优先）。 */
-    optional?: boolean;
-    /** 标签后补充说明文字。 */
-    extra?: string;
-    /** 关联控件的 id（对应 <label for>）。 */
-    htmlFor?: string;
-  }
-
-  let { text, required = false, optional = false, extra, htmlFor }: Props = $props();
-</script>
-
-<label class="cd-form-field__label" for={htmlFor}>
-  {#if required}
-    <span aria-hidden="true" class="cd-form-field__required">*</span>
-  {/if}
-  {#if text !== undefined}
-    <span class="cd-form-field__label-text">{text}</span>
-  {/if}
-  {#if !required && optional}
-    <span class="cd-form-field__label-optional" aria-hidden="true">（可选）</span>
-  {/if}
-  {#if extra !== undefined}
-    <span class="cd-form-field__label-extra">{extra}</span>
-  {/if}
-</label>
-
-<style>
-  .cd-form-field__label-optional {
-    color: var(--cd-form-optional-color, var(--cd-color-text-3));
-    font-size: var(--cd-font-size-1, 0.75rem);
-  }
-  .cd-form-field__label-extra {
-    color: var(--cd-form-extra-color, var(--cd-color-text-3));
-    font-size: var(--cd-font-size-1, 0.75rem);
-  }
-</style>

package/src/form/FormRadio.svelte

@@ -1,83 +0,0 @@
-<!--
-  Form.Radio — convenience wrapper: <Form.Field> + <Radio> bound to a field.
-  Uses valuePropName='checked' since Radio is a boolean/selected control.
--->
-<script lang="ts">
-  import type { Rule, ValidateTrigger } from '@chenzy-design/core';
-  import type { ComponentProps, Snippet } from 'svelte';
-  import Field from './Field.svelte';
-  import Radio from '../radio/Radio.svelte';
-
-  type RadioProps = ComponentProps<typeof Radio>;
-
-  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[];
-    // Radio-specific props
-    /** Radio 自身的业务值（用于 RadioGroup；作为独立 Field 时通常不需要）。 */
-    value?: RadioProps['value'];
-    disabled?: boolean;
-    size?: RadioProps['size'];
-    type?: RadioProps['type'];
-    children?: Snippet;
-  }
-
-  let {
-    field,
-    label,
-    rules = [],
-    initValue,
-    required = false,
-    validateStatus,
-    extraText,
-    span,
-    transform,
-    dependencies,
-    trigger,
-    value: radioValue = '' as RadioProps['value'],
-    disabled,
-    size,
-    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 })}
-    <Radio
-      value={radioValue}
-      checked={typeof value === 'boolean' ? value : undefined}
-      disabled={disabled ?? fieldDisabled}
-      {size}
-      {type}
-      status={status === 'error' ? 'error' : 'default'}
-      onChange={(checked) => onChange(checked)}
-    >
-      {@render children?.()}
-    </Radio>
-  {/snippet}
-</Field>

package/src/form/FormRating.svelte

@@ -1,85 +0,0 @@
-<!--
-  Form.Rating — convenience wrapper: <Form.Field> + <Rating> 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 Rating from '../rating/Rating.svelte';
-
-  type RatingProps = ComponentProps<typeof Rating>;
-
-  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[];
-    // Rating-specific props
-    count?: RatingProps['count'];
-    allowHalf?: RatingProps['allowHalf'];
-    allowClear?: RatingProps['allowClear'];
-    disabled?: boolean;
-    readonly?: RatingProps['readonly'];
-    size?: RatingProps['size'];
-    tooltips?: RatingProps['tooltips'];
-  }
-
-  let {
-    field,
-    label,
-    rules = [],
-    initValue,
-    required = false,
-    validateStatus,
-    extraText,
-    span,
-    transform,
-    dependencies,
-    trigger,
-    count,
-    allowHalf,
-    allowClear,
-    disabled,
-    readonly,
-    size,
-    tooltips,
-  }: 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 })}
-    <Rating
-      value={typeof value === 'number' ? value : undefined}
-      {count}
-      {allowHalf}
-      {allowClear}
-      disabled={disabled ?? fieldDisabled}
-      {readonly}
-      {size}
-      {tooltips}
-      status={status === 'error' ? 'error' : 'default'}
-      onChange={(v) => onChange(v)}
-    />
-  {/snippet}
-</Field>

package/src/form/FormSection.svelte

@@ -1,45 +0,0 @@
-<!--
-  Form.Section — see specs/components/input/Form.spec.md
-  分组容器：<fieldset> 包裹，legend 显示分组标题。
--->
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    /** 分组标题：字符串或 Snippet。 */
-    text?: string | Snippet;
-    className?: string;
-    children?: Snippet;
-  }
-
-  let { text, className, children }: Props = $props();
-</script>
-
-<fieldset class={['cd-form__section', className].filter(Boolean).join(' ')}>
-  {#if text !== undefined}
-    <legend class="cd-form__section-legend">
-      {#if typeof text === 'string'}
-        {text}
-      {:else}
-        {@render text()}
-      {/if}
-    </legend>
-  {/if}
-  {@render children?.()}
-</fieldset>
-
-<style>
-  .cd-form__section {
-    display: contents;
-    border: none;
-    padding: 0;
-    margin: 0;
-  }
-  .cd-form__section-legend {
-    color: var(--cd-form-label-color, var(--cd-color-text-1));
-    font-weight: var(--cd-font-weight-medium, 500);
-    font-size: var(--cd-font-size-2, 0.875rem);
-    padding: 0;
-    margin-block-end: var(--cd-spacing-2);
-  }
-</style>

package/src/form/FormSelect.svelte

@@ -1,96 +0,0 @@
-<!--
-  Form.Select — convenience wrapper: <Form.Field> + <Select> 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 Select from '../select/Select.svelte';
-
-  type SelectProps = ComponentProps<typeof Select>;
-
-  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[];
-    // Select-specific props
-    options?: SelectProps['options'];
-    multiple?: SelectProps['multiple'];
-    filter?: SelectProps['filter'];
-    placeholder?: SelectProps['placeholder'];
-    disabled?: boolean;
-    clearable?: SelectProps['clearable'];
-    size?: SelectProps['size'];
-    maxTagCount?: SelectProps['maxTagCount'];
-    allowCreate?: SelectProps['allowCreate'];
-    virtualized?: SelectProps['virtualized'];
-  }
-
-  let {
-    field,
-    label,
-    rules = [],
-    initValue,
-    required = false,
-    validateStatus,
-    extraText,
-    span,
-    transform,
-    dependencies,
-    trigger,
-    options,
-    multiple,
-    filter,
-    placeholder,
-    disabled,
-    clearable,
-    size,
-    maxTagCount,
-    allowCreate,
-    virtualized,
-  }: 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, id })}
-    <Select
-      value={value as SelectProps['value']}
-      {options}
-      {multiple}
-      {filter}
-      {placeholder}
-      disabled={disabled ?? fieldDisabled}
-      {clearable}
-      {size}
-      {maxTagCount}
-      {allowCreate}
-      {virtualized}
-      status={status === 'error' ? 'error' : 'default'}
-      ariaLabelledby={label !== undefined ? undefined : id}
-      {...(describedBy !== undefined ? { ariaLabel: describedBy } : {})}
-      onChange={(v) => onChange(v)}
-    />
-  {/snippet}
-</Field>

package/src/form/FormSlider.svelte

@@ -1,95 +0,0 @@
-<!--
-  Form.Slider — convenience wrapper: <Form.Field> + <Slider> 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 Slider from '../slider/Slider.svelte';
-
-  type SliderProps = ComponentProps<typeof Slider>;
-
-  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[];
-    // Slider-specific props
-    min?: SliderProps['min'];
-    max?: SliderProps['max'];
-    step?: SliderProps['step'];
-    range?: SliderProps['range'];
-    marks?: SliderProps['marks'];
-    disabled?: boolean;
-    vertical?: SliderProps['vertical'];
-    size?: SliderProps['size'];
-    tooltipVisible?: SliderProps['tooltipVisible'];
-    tipFormatter?: SliderProps['tipFormatter'];
-  }
-
-  let {
-    field,
-    label,
-    rules = [],
-    initValue,
-    required = false,
-    validateStatus,
-    extraText,
-    span,
-    transform,
-    dependencies,
-    trigger,
-    min,
-    max,
-    step,
-    range,
-    marks,
-    disabled,
-    vertical,
-    size,
-    tooltipVisible,
-    tipFormatter,
-  }: 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 })}
-    <Slider
-      value={value as SliderProps['value']}
-      {min}
-      {max}
-      {step}
-      {range}
-      {marks}
-      disabled={disabled ?? fieldDisabled}
-      {vertical}
-      {size}
-      {tooltipVisible}
-      {tipFormatter}
-      status={status === 'error' ? 'error' : 'default'}
-      onChange={(v) => onChange(v)}
-      onBlur={() => onBlur()}
-    />
-  {/snippet}
-</Field>

package/src/form/FormSlot.svelte

@@ -1,51 +0,0 @@
-<!--
-  Form.Slot — see specs/components/input/Form.spec.md
-  布局占位容器：与普通 Field 相同的布局，但不接管 value/onChange，纯布局占位。
--->
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import { getFormContext, type FormLabelPosition, type FormLabelAlign } from './context.js';
-
-  interface Props {
-    /** 标签文本。 */
-    label?: string;
-    /** 标签位置覆盖（不传则继承 Form 配置）。 */
-    labelPosition?: FormLabelPosition;
-    /** 标签对齐覆盖（不传则继承 Form 配置）。 */
-    labelAlign?: FormLabelAlign;
-    /** 隐藏标签区域（仍保留布局对齐占位）。 */
-    noLabel?: boolean;
-    children?: Snippet;
-  }
-
-  let { label, labelPosition, labelAlign, noLabel = false, children }: Props = $props();
-
-  const ctx = getFormContext();
-
-  const resolvedLabelPosition = $derived(labelPosition ?? ctx?.getLabelPosition() ?? 'top');
-  const resolvedLabelAlign = $derived(labelAlign ?? ctx?.getLabelAlign() ?? 'left');
-
-  const cls = $derived(
-    [
-      'cd-form-field',
-      `cd-form-field--label-${resolvedLabelPosition}`,
-    ]
-      .filter(Boolean)
-      .join(' '),
-  );
-</script>
-
-<div class={cls}>
-  {#if !noLabel}
-    <div
-      class="cd-form-field__label cd-form-field__label--align-{resolvedLabelAlign}"
-    >
-      {#if label !== undefined}
-        <span class="cd-form-field__label-text">{label}</span>
-      {/if}
-    </div>
-  {/if}
-  <div class="cd-form-field__control">
-    {@render children?.()}
-  </div>
-</div>

package/src/form/FormSwitch.svelte

@@ -1,82 +0,0 @@
-<!--
-  Form.Switch — convenience wrapper: <Form.Field> + <Switch> bound to a field.
-  Uses valuePropName='checked' since Switch 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 Switch from '../switch/Switch.svelte';
-
-  type SwitchProps = ComponentProps<typeof Switch>;
-
-  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[];
-    // Switch-specific props
-    disabled?: boolean;
-    size?: SwitchProps['size'];
-    loading?: SwitchProps['loading'];
-    checkedChildren?: string | Snippet;
-    uncheckedChildren?: string | Snippet;
-  }
-
-  let {
-    field,
-    label,
-    rules = [],
-    initValue,
-    required = false,
-    validateStatus,
-    extraText,
-    span,
-    transform,
-    dependencies,
-    trigger,
-    disabled,
-    size,
-    loading,
-    checkedChildren,
-    uncheckedChildren,
-  }: 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, onBlur, status, disabled: fieldDisabled })}
-    <Switch
-      value={typeof value === 'boolean' ? value : undefined}
-      disabled={disabled ?? fieldDisabled}
-      {size}
-      {loading}
-      {checkedChildren}
-      {uncheckedChildren}
-      status={status === 'error' ? 'error' : 'default'}
-      onChange={(v) => onChange(v)}
-      onBlur={() => onBlur()}
-    />
-  {/snippet}
-</Field>

package/src/form/FormTagInput.svelte

@@ -1,79 +0,0 @@
-<!--
-  Form.TagInput — convenience wrapper: <Form.Field> + <TagInput> 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 TagInput from '../tag-input/TagInput.svelte';
-
-  type TagInputProps = ComponentProps<typeof TagInput>;
-
-  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[];
-    // TagInput-specific props
-    placeholder?: TagInputProps['placeholder'];
-    disabled?: boolean;
-    size?: TagInputProps['size'];
-    maxLength?: TagInputProps['maxLength'];
-    allowDuplicates?: TagInputProps['allowDuplicates'];
-  }
-
-  let {
-    field,
-    label,
-    rules = [],
-    initValue,
-    required = false,
-    validateStatus,
-    extraText,
-    span,
-    transform,
-    dependencies,
-    trigger,
-    placeholder,
-    disabled,
-    size,
-    maxLength,
-    allowDuplicates,
-  }: 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 })}
-    <TagInput
-      value={Array.isArray(value) ? (value as string[]) : undefined}
-      {placeholder}
-      disabled={disabled ?? fieldDisabled}
-      {size}
-      {maxLength}
-      {allowDuplicates}
-      status={status === 'error' ? 'error' : 'default'}
-      onChange={(tags) => onChange(tags)}
-    />
-  {/snippet}
-</Field>