Question - RadioGroupOption slot props about svelte-headlessui HOT 5 CLOSED

Hey! Glad you're finding the library useful :) Sorry about the lack of docs, I'm actually working on them right now.

In your code, active and checked are erroring because in Svelte, the slot props (let:active and let:checked) are only defined in the child components. To get around this, the components in this library also accept a function for the class prop. That function will take the slot props as input and should output a class string.

In your case, I think you want something like

class={({active, checked}) => classNames(
  active && checked ? 'ring ring-offset-1' : '',
  !active && checked ? 'ring-2' : '',
  colour.selectedColour,
  '-m-0.5 relative p-0.5 rounded-full flex items-center justify-center cursor-pointer focus:outline-none'
)}

where classNames is a helper function that looks like

  function classNames(...classes) {
    return classes.filter(Boolean).join(" ");
  }

Or alternatively using template literals something like:

class={({active, checked}) => 
  `${active && checked ? 'ring ring-offset-1' : ''} ${!active && checked ? 'ring-2' : ''} ${colour.selectedColour} -m-0.5 relative p-0.5 rounded-full flex items-center justify-center cursor-pointer focus:outline-none`
}

I also noticed that a bit further down in your snippet, I think you meant to use a template literal on this line:
class="{colour.bgColour} h-8 w-8 border border-black border-opacity-10 rounded-full"

Otherwise I think your HTML will end up with "{colour.bgColour}" in it instead of the value.

Hope that helps!

from svelte-headlessui.

Thanks @rgossiaux that was very helpful. Really looking forward to the docs. Happy to help review them if you want. If I could understand them, then anyone could! 😂

from svelte-headlessui.

Thanks to the implementation guidance from @rgossiaux I was able to implement the Tailwind UI e-commerce product quickview @sbadisa was trying to create. See it in action here or review the implementation here. (Note I could not figure out how to get the disabled slot prop working and left a FIXME in the code. I also left transitions/animation for a future iteration.)

@rgossiaux Perhaps you could enable Discussions on this repo so we could move items like this to the Q&A section? @sbadisa if you can get disabled working for the size selector please let me know -- I tried to use a Svelte @const in the each block but that didn't do it.

Sure, I enabled discussions for the repo.

As for your code, I took a quick peek. You want to just use the normal disabled prop, the same as the Tailwind code: disabled={!size.inStock}.

I also noticed that you commented out the Transitions in their code. Those should work just fine as well if you just delete the as={Fragment} and rename the Transition.Root to Transition

from svelte-headlessui.

Thanks to the implementation guidance from @rgossiaux I was able to implement the Tailwind UI e-commerce product quickview @sbadisa was trying to create. See it in action here or review the implementation here. (Note I could not figure out how to get the disabled slot prop working and left a FIXME in the code. I also left transitions/animation for a future iteration.)

@rgossiaux Perhaps you could enable Discussions on this repo so we could move items like this to the Q&A section? @sbadisa if you can get disabled working for the size selector please let me know -- I tried to use a Svelte @const in the each block but that didn't do it.

from svelte-headlessui.

Thanks so much for creating the Discussion section, @rgossiaux.

As for your code, I took a quick peek. You want to just use the normal disabled prop, the same as the Tailwind code: disabled={!size.inStock}.

I did try that before attempting to use @const as a workaround. Unfortunately Svelte throws a compiler error due to an invalid use of let which I've detailed along with my issue in more detail in the Discussion section here: #48

Looking forward to getting past this issue as it's a blocker for creating a workable ecommerce storefront.

from svelte-headlessui.