astro-reactive-form/packages/form/components/controls/TextArea.astro
2022-11-01 00:21:39 +01:00

40 lines
884 B
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;
const validatorAttributes: Record<string, string> = validators?.reduce((prev, validator) => {
const split: string[] = validator.split(':');
const label: string = `data-${split[0]}` || 'invalid';
const value: string | null = split.length > 1 ? split[1] ?? null : 'true';
return {
...prev,
[label]: value,
};
}, {});
---
<textarea
name={control.name}
id={control.name}
placeholder={control?.placeholder}
rows={control?.rows ?? 3}
cols={control?.cols ?? 21}
data-label={control?.label}
data-label-position={control?.labelPosition}
readonly={readOnly || null}
{...validatorAttributes}
>
{ control.value }
</textarea>