mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 21:27:06 +04:00
Paweł Kunaandcopilot-swe-agent[bot]
4f7beecd2b
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
29 lines
1.1 KiB
Plaintext
29 lines
1.1 KiB
Plaintext
---
|
|
import Icon from '../Icon.astro'
|
|
|
|
interface Props {
|
|
icon?: string
|
|
class?: string
|
|
prepend?: boolean
|
|
type?: string
|
|
value?: string
|
|
rounded?: boolean
|
|
ariaLabel?: string
|
|
readonly?: boolean
|
|
placeholder?: string
|
|
loader?: boolean
|
|
}
|
|
|
|
const { icon = 'search', class: className, prepend, type = 'text', value = '', rounded, ariaLabel, readonly, placeholder = 'Search…', loader } = 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 ? <div class="spinner-border spinner-border-sm text-secondary" role="status" /> : <Icon name={icon} />}</span>}
|
|
<input type={type as astroHTML.JSX.HTMLInputTypeAttribute} value={value} class:list={controlClass} placeholder={placeholder} aria-label={ariaLabel} readonly={readonly} />
|
|
{!prepend && <span class:list={addonClass}>{loader ? <div class="spinner-border spinner-border-sm text-secondary" role="status" /> : <Icon name={icon} />}</span>}
|
|
</div>
|