48 lines
1.7 KiB
Text
48 lines
1.7 KiB
Text
---
|
|
/**
|
|
* DEFAULT CONTROL COMPONENT
|
|
*/
|
|
import type { Radio, Dropdown, TextArea } from '@astro-reactive/common';
|
|
import type { FormControl } from '../core/form-control';
|
|
import DropdownControl from './controls/Dropdown.astro';
|
|
import TextAreaControl from './controls/TextArea.astro';
|
|
import Input from './controls/Input.astro';
|
|
import RadioGroup from './controls/RadioGroup.astro';
|
|
import Errors from './Errors.astro';
|
|
import Label from './Label.astro';
|
|
|
|
export interface Props {
|
|
control: FormControl;
|
|
showValidationHints: boolean;
|
|
showErrors?: boolean; // feature flag for showing validation errors
|
|
readOnly?: boolean;
|
|
}
|
|
|
|
const { control, showValidationHints, showErrors = false, readOnly = false } = Astro.props;
|
|
|
|
const hasError: boolean = control.errors?.some((error) => error.category === 'error');
|
|
const hasWarn: boolean = control.errors?.some((error) => error.category === 'warn');
|
|
const hasInfo: boolean = control.errors?.some((error) => error.category === 'info');
|
|
---
|
|
|
|
<div
|
|
class="field"
|
|
data-validator-error={hasError ? hasError.toString() : null}
|
|
data-validator-warn={hasWarn ? hasWarn.toString() : null}
|
|
data-validator-info={hasInfo ? hasInfo.toString() : null}
|
|
>
|
|
<Label control={control} showValidationHints={showValidationHints}>
|
|
{
|
|
control.type === 'radio' ? (
|
|
<RadioGroup control={control as Radio} readOnly={readOnly} />
|
|
) : control.type === 'dropdown' ? (
|
|
<DropdownControl control={control as Dropdown} readOnly={readOnly} />
|
|
) : control.type === 'textarea' ? (
|
|
<TextAreaControl control={control as TextArea} readOnly={readOnly} />
|
|
) : (
|
|
<Input control={control} readOnly={readOnly} />
|
|
)
|
|
}
|
|
{showErrors && <Errors errors={control.errors} />}
|
|
</Label>
|
|
</div>
|