[Feature]: Access state exposed only via data-attributes

[thomasaull]

Describe the feature

I'm currently implementing Calendar and Date Picker components in a project and I'm not sure how to tackle this problem in the best way possible. To give you an example (please note that this exists in many more places):

• I have a component MyButton.vue which I want to use as the prev/next buttons for the calendar component
• MyButton has a prop for a disabled state
• The CalendarPrev of radix-vue has a state disabled, which is only exposed as a data-attribute [data-disabled]

My question now is, how to handle this case, where the state disabled is only exposed as a data-attribute but I want to forward it to my component as a prop?

Some ideas:

1. Use both the prop and the data-attribute for styling in the MyButton component (which I don’t really want to do, since the component should stay independent to the parent components implementing it. Also it could introduce additional styling bugs)
2. Create some sort of composable to reactively read the data attributes from an element
3. Recreate the behaviour of disabled with my own logic
4. radix-vue exposes the state in other ways aswell, for example as slots or by making contexts available

Any advice?

Additional information

• I intend to submit a PR for this feature.
• I have already implemented and/or tested this feature.

[zernonia]

Thanks for the ticket @thomasaull ! What do you think if we expose all values from the data-attribute as slot props?

  <Primitive 
    :data-disabled="disabled || undefined"
  >
    <slot :disabled="disabled || undefined">Prev page</slot>
  </Primitive>

[thomasaull]

@zernonia That‘s exactly how I implemented a workaround in my project, so this would be perfect :)