svelte-toolkit/sui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

time input: implement compact mode

Browse Source
This commit is contained in:
Elijah Duffy
2025-07-21 19:50:41 -07:00
parent 123594f828
commit c2311260b1
1 changed files with 15 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/lib/TimeInput.svelte
View File

@@ -283,13 +283,16 @@
{#each ['hour', 'minute'] as componentKey[] as key} {#each ['hour', 'minute'] as componentKey[] as key}
{@const opts = components[key]} {@const opts = components[key]}
<StyledRawInput <StyledRawInput
class={[
'text-center text-xl focus:placeholder:text-transparent',
compact ? 'h-9 w-16!' : 'h-16 w-24!'
]}
bind:value={values[key]} bind:value={values[key]}
inputmode="numeric" inputmode="numeric"
pattern="[0-9]*" pattern="[0-9]*"
placeholder={opts.placeholder ?? '00'} placeholder={opts.placeholder ?? '00'}
max={opts.max} max={opts.max}
min={0} min={0}
class="time-input"
validate={{ pattern: opts.pattern }} validate={{ pattern: opts.pattern }}
use={(n) => liveValidator(n, keydownValidatorOpts)} use={(n) => liveValidator(n, keydownValidatorOpts)}
onkeydown={opts.onkeydown} onkeydown={opts.onkeydown}
@@ -299,21 +302,28 @@
/> />
{#if opts.divider} {#if opts.divider}
<span class="mx-2 text-3xl">{opts.divider}</span> <span class={[compact ? 'mx-1 text-2xl' : 'mx-2 text-3xl']}>{opts.divider}</span>
{/if} {/if}
{/each} {/each}
<!-- AM/PM Picker --> <!-- AM/PM Picker -->
<div class="ml-3 flex flex-col"> <div class={['flex', compact ? 'ml-1.5' : 'ml-3 flex-col']}>
{#each ['AM', 'PM'] as (typeof ampm)[] as shade, index} {#each ['AM', 'PM'] as (typeof ampm)[] as shade, index}
<button <button
class={[ class={[
'border-sui-accent dark:border-sui-accent/50 cursor-pointer border px-3 py-1 font-medium', compact ? 'px-2 py-0.5' : 'px-3 py-1',
'border-sui-accent dark:border-sui-accent/50 cursor-pointer border font-medium',
ampm === shade && [ ampm === shade && [
'bg-sui-accent text-sui-background dark:bg-sui-accent/30 dark:text-sui-background/90', 'bg-sui-accent text-sui-background dark:bg-sui-accent/30 dark:text-sui-background/90',
'ring-sui-text z-10 ring-1 dark:ring-blue-300' 'ring-sui-text z-10 ring-1 dark:ring-blue-300'
], ],
index === 0 ? 'rounded-t-sm' : 'rounded-b-sm' index === 0
? compact
? 'rounded-l-sm'
: 'rounded-t-sm'
: compact
? 'rounded-r-sm'
: 'rounded-b-sm'
]} ]}
onclick={() => { onclick={() => {
ampm = shade; ampm = shade;
@@ -337,21 +347,3 @@
</Label> </Label>
</div> </div>
</div> </div>
<style lang="postcss">
@reference "./styles/reference.css";
:global(.time-input) {
@apply h-16 w-24 text-center text-xl;
-moz-appearance: textfield;
&:focus::placeholder {
@apply text-transparent;
}
&::-webkit-inner-spin-button,
&::-webkit-outer-spin-button {
@apply m-0 appearance-none;
}
}
</style>