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

show remaining chars counter only when near limit

Browse source
This commit is contained in:
Justin Edmund 2025-12-03 20:52:14 -08:00
parent edbfd14843
commit ff4b63a542
1 changed files with 24 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -64,9 +64,12 @@
: null : null
) )
const showCounter = $derived(counter !== undefined || maxLength !== undefined)
const currentCount = $derived(String(value ?? '').length) const currentCount = $derived(String(value ?? '').length)
const hasWrapper = $derived(accessory || leftIcon || rightIcon || showCounter || validationIcon) const charsRemaining = $derived(maxLength !== undefined ? maxLength - currentCount : undefined)
const showCounter = $derived(
counter !== undefined || (charsRemaining !== undefined && charsRemaining <= 5)
)
const hasWrapper = $derived(accessory || leftIcon || rightIcon || maxLength !== undefined || validationIcon)
const fieldsetClasses = $derived( const fieldsetClasses = $derived(
['fieldset', hidden && 'hidden', fullWidth && 'full', className].filter(Boolean).join(' ') ['fieldset', hidden && 'hidden', fullWidth && 'full', className].filter(Boolean).join(' ')
@ -82,7 +85,8 @@
alignRight && 'alignRight', alignRight && 'alignRight',
fullHeight && 'fullHeight', fullHeight && 'fullHeight',
accessory && 'accessory', accessory && 'accessory',
hasWrapper && 'wrapper' hasWrapper && 'wrapper',
className
] ]
.filter(Boolean) .filter(Boolean)
.join(' ') .join(' ')
@ -142,8 +146,8 @@
{/if} {/if}
{#if showCounter} {#if showCounter}
<span class="counter"> <span class="counter" class:warning={charsRemaining !== undefined && charsRemaining <= 5}>
{currentCount}{maxLength ? `/${maxLength}` : ''} {charsRemaining !== undefined ? charsRemaining : currentCount}
</span> </span>
{/if} {/if}
</div> </div>
@ -205,8 +209,8 @@
{/if} {/if}
{#if showCounter} {#if showCounter}
<span class="counter"> <span class="counter" class:warning={charsRemaining !== undefined && charsRemaining <= 5}>
{currentCount}{maxLength ? `/${maxLength}` : ''} {charsRemaining !== undefined ? charsRemaining : currentCount}
</span> </span>
{/if} {/if}
</div> </div>
@ -313,14 +317,25 @@
.counter { .counter {
color: var(--text-tertiary); color: var(--text-tertiary);
display: block; display: flex;
align-items: center;
font-weight: $normal; font-weight: $normal;
line-height: calc($unit * 6);
font-size: $font-small; font-size: $font-small;
position: absolute; position: absolute;
right: $unit-2x; right: $unit-2x;
top: 0; top: 0;
bottom: 0;
pointer-events: none; pointer-events: none;
&.warning {
background: $error;
color: white;
padding: 0 $unit-half;
border-radius: $unit-half;
top: 50%;
bottom: auto;
transform: translateY(-50%);
}
} }
input { input {