mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 21:27:06 +04:00
31 lines
1.2 KiB
Plaintext
31 lines
1.2 KiB
Plaintext
---
|
|
import Icon from '../Icon.astro'
|
|
|
|
interface Props {
|
|
icon?: string
|
|
class?: string
|
|
prepend?: boolean
|
|
type?: string
|
|
name?: string
|
|
value?: string
|
|
rounded?: boolean
|
|
ariaLabel?: string
|
|
readonly?: boolean
|
|
placeholder?: string
|
|
loader?: boolean
|
|
autocomplete?: string
|
|
}
|
|
|
|
const { icon = 'search', class: className, prepend, type = 'text', name, value = '', rounded, ariaLabel, readonly, placeholder = 'Search…', loader, autocomplete } = Astro.props
|
|
|
|
const wrapperClass = ['input-icon', className]
|
|
const addonClass = ['input-icon-addon']
|
|
const controlClass = ['form-control', rounded && 'form-control-rounded']
|
|
---
|
|
|
|
<div class:list={wrapperClass}>
|
|
{prepend && <span class:list={addonClass}>{loader ? <span class="spinner-border spinner-border-sm text-secondary" role="status" /> : <Icon name={icon} />}</span>}
|
|
<input type={type as astroHTML.JSX.HTMLInputTypeAttribute} name={name} value={value} class:list={controlClass} placeholder={placeholder} aria-label={ariaLabel} readonly={readonly} autocomplete={autocomplete} />
|
|
{!prepend && <span class:list={addonClass}>{loader ? <span class="spinner-border spinner-border-sm text-secondary" role="status" /> : <Icon name={icon} />}</span>}
|
|
</div>
|