Export injection hooks

[hrubysi]

The biggest painpoint of headless components is not being able to access it's internal state. There is always some case, when this is limiting.

This could be solved by exporting state injection hooks, giving us full control, which I find appropriate in library such as radix.

export {
  default as PopoverRoot,
  injectPopoverRootContext, // <-- this would be added (in every component)
  type PopoverRootProps,
  type PopoverRootEmits,
} from './PopoverRoot.vue'

Then, inside my PopoverContent component, I can easily use this hook to access open state.

Thanks to this, I can turn following line:
'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',

Into this, which I find as a big improvement.

{
 'animate-in fade-in-0 zoom-in-95': open,
 'animate-out fade-out-0 zoom-out-95': !open,
},

This is only one simple example, but I can imagine many more.

What are your thoughts about this @zernonia?

[zernonia]

Thanks for the idea @hrubysi . This is not a bad suggestion where we allow injection state to be accessible by devs. We can implement this in v2! 😁

[hrubysimon]

Great, thank you :) Maybe it would be also useful to pass dataset attributes to slots as well, because otherwise their logic would have to be reimplemented in some cases.

In my opinion this is better approach than dataset attributes, more native to Vue. Very useful for styling with tailwind, but also for rendering logic.

CalendarCellTrigger

:data-disabled="isDisabled || isOutsideView ? '' : undefined"
:data-unavailable="isUnavailable ? '' : undefined"
:data-today="isDateToday ? '' : undefined"
:data-outside-view="isOutsideView ? '' : undefined"
...

<slot v-bind="{isDisabled, isOutsideView, isUnavailable, isDateToday... }">