search

idris-maps / svelte-parts

Svelte components
https://svelte-parts.surge.sh
49 stars 5 forks source link

Better type support, add disabled property #13

Closed stophecom closed 1 year ago

stophecom commented 1 year ago

For the DropFile component

I didn't add styles for the disabled state b/c with the current structure one needed to add another class to #fallback probably. I think in general, a better solution would be to not hide the input with display: none; but rather just make it invisible with opacity. Additionally, it could be moved inside (or before) the drop zone so it can be used to style the dropzone based on state. E.g.

input:disabled + #fallback {
   opacity: 0.5;
   ...
}

Same with focus. The original input should receive the focus and you could style the dropzone with :focus-within.

idris-maps commented 1 year ago

Thanks I will have a look at "disabled" css

About focus... focus on the drop-zone could be passed on to the input but I am not sure about the benefits

Why making the input invisible rather than display:none? Even when setting width/height/margins to 0, it will still be focusable when you navigate with the tab, no?