granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add clearable prop to Input component

Browse source
This commit is contained in:
Justin Edmund 2025-12-21 02:56:36 -08:00
parent 3340e3661f
commit b60eca43be
1 changed files with 46 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
src/lib/components/ui/Input.svelte
View file

@ -10,6 +10,8 @@
label?: string
leftIcon?: string
rightIcon?: string
clearable?: boolean
onClear?: () => void
counter?: number
maxLength?: number
hidden?: boolean
@ -31,6 +33,8 @@
label,
leftIcon,
rightIcon,
clearable = false,
onClear,
counter,
maxLength,
hidden = false,
@ -69,7 +73,12 @@
const showCounter = $derived(
counter !== undefined || (charsRemaining !== undefined && charsRemaining <= 5)
)
const hasWrapper = $derived(accessory || leftIcon || rightIcon || maxLength !== undefined || validationIcon)
const hasWrapper = $derived(accessory || leftIcon || rightIcon || clearable || maxLength !== undefined || validationIcon)
function handleClear() {
value = ''
onClear?.()
}
const fieldsetClasses = $derived(
['fieldset', hidden && 'hidden', fullWidth && 'full', className].filter(Boolean).join(' ')
@ -92,11 +101,6 @@
.join(' ')
)
// Debug: log what's in restProps
$effect(() => {
console.log('[Input] restProps keys:', Object.keys(restProps))
console.log('[Input] hasWrapper:', hasWrapper, 'validationIcon:', validationIcon)
})
</script>
<fieldset class={fieldsetClasses}>
@ -144,6 +148,12 @@
</span>
{/if}
{#if clearable && value}
<button type="button" class="clearButton" onclick={handleClear}>
<Icon name="close" size={14} />
</button>
{/if}
{#if showCounter}
<span class="counter" class:warning={charsRemaining !== undefined && charsRemaining <= 5}>
{charsRemaining !== undefined ? charsRemaining : currentCount}
@ -345,6 +355,32 @@
}
}
.clearButton {
position: absolute;
right: $unit-2x;
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
padding: 0;
border: none;
background: transparent;
color: var(--text-secondary);
cursor: pointer;
border-radius: $unit-half;
@include smooth-transition($duration-quick, background-color, color);
&:hover {
background: var(--surface-tertiary);
color: var(--text-primary);
}
:global(svg) {
fill: currentColor;
}
}
&:has(.iconLeft) input {
padding-left: $unit-5x;
}
@ -357,6 +393,10 @@
padding-right: $unit-5x;
}
&:has(.clearButton) input {
padding-right: $unit-5x;
}
&:has(.counter) input {
padding-right: $unit-8x;
}