Files
kycnotme/web/src/components/InputTextArea.astro
2025-05-23 21:50:03 +00:00

38 lines
1.1 KiB
Plaintext

---
import { omit } from 'lodash-es'
import { cn } from '../lib/cn'
import { baseInputClassNames } from '../lib/formInputs'
import InputWrapper from './InputWrapper.astro'
import type { ComponentProps, HTMLAttributes } from 'astro/types'
type Props = Omit<ComponentProps<typeof InputWrapper>, 'children' | 'inputId' | 'required'> & {
inputProps?: Omit<HTMLAttributes<'textarea'>, 'name'>
value?: string | null | undefined
}
const { inputProps, value, ...wrapperProps } = Astro.props
const inputId = inputProps?.id ?? Astro.locals.makeId(`input-${wrapperProps.name}`)
const hasError = !!wrapperProps.error && wrapperProps.error.length > 0
---
<InputWrapper inputId={inputId} required={inputProps?.required} {...wrapperProps}>
<textarea
transition:persist
{...omit(inputProps, ['class', 'id', 'name'])}
id={inputId}
class={cn(
baseInputClassNames.input,
baseInputClassNames.textarea,
inputProps?.class,
hasError && baseInputClassNames.error,
!!inputProps?.disabled && baseInputClassNames.disabled
)}
name={wrapperProps.name}
set:text={value}
/>
</InputWrapper>