[Bug]: CalendarCellTrigger and DatePickerCellTrigger's data-[disabled] attribute is true for cells outside the view

[hartbit]

Environment

Developement/Production OS: macOS 14.5
Node version: 20.18.0
Package manager: [email protected]
Radix Vue version: 1.9.13
Vue version: 3.5.13
CSS framework: [email protected]
Client OS: macOS 14.5
Browser: Firefox 134.0.2

Link to minimal reproduction

https://github.com/unovue/radix-vue/blob/v2/packages/core/src/Calendar/CalendarCellTrigger.vue#L164

Steps to reproduce

Use the CalendarCellTrigger's data-[disabled] attribute to disable pointer events with the data-[disabled]:pointer-events-none Tailwind class.

Describe the bug

Note sure if this is actually a bug, but CalendarCellTrigger's data-[disabled] attribute is implemented as isDisabled || isOutsideView. This is problematic because it doesn't allow me to style cells differently for days outside the current month (isOutsideView), which are interactive (and change the view to that month), from cells which are disabled, and therefore not interactive (less than minValue, greater than maxValue, or for which isDateDisabled returns true).

Expected behavior

I would expected only disabled days to be affected, not days outside the current month.

Context & Screenshots (if applicable)

No response

[zernonia]

@epr3 the current calendar we allow user to click on outside-view's date, having data-disabled attached seems incorrect right?

@hartbit for the mean time you can easily style it as such (using tw as easy example) [&:not([data-outside-view])]:data-[disabled]:pointer-events-none
https://stackblitz.com/edit/6n376qrc?file=src%2FApp.vue

[hartbit]

@zernonia Thanks for the suggested workaround but that won't work: that pseudo-class will not disable pointer events for cells which are disabled outside views. I want to do this :

Pointer Events	Disabled	Enabled
Outside view	🚫	✅
Inside view	🚫	✅

[epr3]

@epr3 the current calendar we allow user to click on outside-view's date, having data-disabled attached seems incorrect right?

@hartbit for the mean time you can easily style it as such (using tw as easy example) [&:not([data-outside-view])]:data-[disabled]:pointer-events-none https://stackblitz.com/edit/6n376qrc?file=src%2FApp.vue

@zernonia Yes, we allow clicking on outside-view. I'll remove the data-disabled attribute on the days outside the view.