Open MariusDoe opened 5 months ago
Visit the deploys page to approve it
Name | Link |
---|---|
Latest commit | b21625e8858392c334793087eb0363f97ee1ce3d |
We plan to expose all component context for custom use cases. We want to finish a few tasks before we tackle this.
Thanks for the work, will definitely merge once ready.
Adds
Toast.useToastTime
, which can be used to access the elapsed and remaining time (or fraction of the duration) that a toast has been / will stay open for.The code is extracted from/inspired by
Toast.ProgressFill
and I adjustedToast.ProgressFill
to use the new API.Motivation
I use daisyUI to style kobalte components. daisyUI provides a progress component (component means set of css classes here), that i would like to use with kobalte's toast system.
The problem is that daisyUI uses a native
progress
element, while kobalte uses twodiv
s (Toast.ProgressTrack
andToast.ProgressFill
) and relies on a css variable to show the current value. Sadly, I don't think there is a direct way to use the css variable to populate thevalue
attribute of theprogress
element. I could try to use a hiddenToast.ProgressFill
, listen to changes of its--kb-toast-progress-fill-width
variable and apply the value to thevalue
property of theprogress
element, but that sounds like ugly code and poor performance.Since I see no other way to get the value I need from kobalte, I propose to add this API. If there is a way I didn't see, please let me know :)
Docs
The custom
progress
element in the new example forToast.useToastTime
is currently unstyled, which doesn't fit nicely into the rest of the docs. I'm unsure whether we should add some styles to make it fit better or leave it as-is to show that it really is a raw/nativeprogress
element.