5b539c809c
* Added ValidationHooks and attribute to FormControl * Event listener uses data attribute to set type * Changed default event listener to blur * Add validation data attribute to other components * Adjusted querySelector to remove condition * Added nullish operator to prevent error * Added optional chaining to validator
45 lines
1.1 KiB
Text
45 lines
1.1 KiB
Text
---
|
|
/**
|
|
* TEXT AREA COMPONENT
|
|
*/
|
|
import type { TextArea } from '@astro-reactive/common';
|
|
|
|
export interface Props {
|
|
control: TextArea;
|
|
readOnly?: boolean;
|
|
}
|
|
|
|
const { control, readOnly = false } = Astro.props;
|
|
|
|
const { validators = [] } = control;
|
|
|
|
// @ts-ignore
|
|
const validatorAttributes: Record<string, string> = validators.reduce((prev, val) => {
|
|
const validator = typeof val === 'string' ? val : val.validator;
|
|
const split: string[] = validator.split(':');
|
|
const label: string = `data-${split[0]}` || 'invalid';
|
|
const value: string | null = split.length > 1 ? split[1] ?? null : 'true';
|
|
const category = typeof val === 'string' ? 'error' : val.category || 'error';
|
|
const categoryLabel: string = `data-${split[0]}-category`;
|
|
|
|
return {
|
|
...prev,
|
|
[label]: value,
|
|
[categoryLabel]: category,
|
|
};
|
|
}, {});
|
|
---
|
|
|
|
<textarea
|
|
name={control.name}
|
|
id={control.id}
|
|
placeholder={control?.placeholder}
|
|
rows={control?.rows ?? 3}
|
|
cols={control?.cols ?? 21}
|
|
data-label={control?.label}
|
|
readonly={readOnly || null}
|
|
data-validation-on={control.triggerValidationOn ? control.triggerValidationOn : null}
|
|
{...validatorAttributes}
|
|
>
|
|
{control.value}
|
|
</textarea>
|