
* Added Short Unique ID npm library * Added unique ID to form-control * Added unique ID to form-group * Unique ID added to <form> * Added unique IDs to control components * Added IDs to label and fieldset * Update Form.astro with requested changes Co-authored-by: Ayo Ayco <ayo@ayco.io> * Adjustments for requested changes. Co-authored-by: Ayo Ayco <ayo@ayco.io>
39 lines
828 B
Text
39 lines
828 B
Text
---
|
|
import type { FormControl } from '../core';
|
|
|
|
export interface Props {
|
|
control: FormControl;
|
|
showValidationHints: boolean;
|
|
showErrors?: boolean; // feature flag for showing validation errors
|
|
}
|
|
|
|
const { control, showValidationHints } = Astro.props;
|
|
|
|
const { validators = [] } = control;
|
|
|
|
const isRequired: boolean = showValidationHints && validators.includes('validator-required');
|
|
---
|
|
|
|
{
|
|
control.label && control.type !== "checkbox" && (
|
|
<label for={control.id} data-validation-required={isRequired ? "true" : null}>
|
|
{control.label}
|
|
</label>
|
|
)
|
|
}
|
|
|
|
<slot />
|
|
|
|
{
|
|
control.label && control.type === "checkbox" && (
|
|
<label for={control.id} data-validation-required={isRequired ? "true" : null}>
|
|
{control.label}
|
|
</label>
|
|
)
|
|
}
|
|
|
|
<style>
|
|
label[data-validation-required="true"]::before {
|
|
content: "*";
|
|
}
|
|
</style>
|