Size ImplicitNumericInput more precisely on browsers that don't support field-sizing
This commit is contained in:
@@ -24,10 +24,9 @@ const size = $derived(Math.max(String(min).length, String(max).length))
|
|||||||
'mx-0.5 rounded-md bg-muted px-1 focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none',
|
'mx-0.5 rounded-md bg-muted px-1 focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none',
|
||||||
classNames,
|
classNames,
|
||||||
)}
|
)}
|
||||||
{size}
|
|
||||||
maxlength={size}
|
maxlength={size}
|
||||||
style:field-sizing="content"
|
|
||||||
value={showNumber(value)}
|
value={showNumber(value)}
|
||||||
|
style="--size: calc({size}ch + 0.5rem)"
|
||||||
onchange={e => {
|
onchange={e => {
|
||||||
let n = Number(e.currentTarget.value)
|
let n = Number(e.currentTarget.value)
|
||||||
|
|
||||||
@@ -44,3 +43,17 @@ const size = $derived(Math.max(String(min).length, String(max).length))
|
|||||||
}}
|
}}
|
||||||
{...restProps}
|
{...restProps}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
@supports (field-sizing: content) {
|
||||||
|
input {
|
||||||
|
field-sizing: content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@supports (not (field-sizing: content)) {
|
||||||
|
input {
|
||||||
|
width: var(--size);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user