Justin Edmund
05ddafcdea
- Add children prop to FormField to support wrapper mode - Update components using FormFieldWrapper to use FormField - Remove redundant FormFieldWrapper component - Maintain all existing functionality with unified API This reduces code duplication and simplifies the form component hierarchy. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
52 lines
1 KiB
Svelte
52 lines
1 KiB
Svelte
<script lang="ts">
|
|
import Select from './Select.svelte'
|
|
import FormField from './FormField.svelte'
|
|
import type { HTMLSelectAttributes } from 'svelte/elements'
|
|
|
|
interface Option {
|
|
value: string
|
|
label: string
|
|
}
|
|
|
|
interface Props extends Omit<HTMLSelectAttributes, 'size'> {
|
|
label: string
|
|
options: Option[]
|
|
value?: string
|
|
size?: 'small' | 'medium' | 'large'
|
|
variant?: 'default' | 'minimal'
|
|
fullWidth?: boolean
|
|
pill?: boolean
|
|
required?: boolean
|
|
helpText?: string
|
|
error?: string
|
|
}
|
|
|
|
let {
|
|
label,
|
|
options,
|
|
value = $bindable(),
|
|
size = 'medium',
|
|
variant = 'default',
|
|
fullWidth = true,
|
|
pill = true,
|
|
required = false,
|
|
helpText,
|
|
error,
|
|
...restProps
|
|
}: Props = $props()
|
|
</script>
|
|
|
|
<FormField {label} {required} {helpText} {error}>
|
|
{#snippet children()}
|
|
<Select bind:value {options} {size} {variant} {fullWidth} {pill} {...restProps} />
|
|
{/snippet}
|
|
</FormField>
|
|
|
|
<style lang="scss">
|
|
// Ensure proper spacing for select fields
|
|
:global(.form-field) {
|
|
:global(.select-wrapper) {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
</style>
|