[Bug]: Incompatibility between VueUse useTextDirection and the dir prop of ConfigProvider

[dwightjack]

Environment

Developement/Production OS: macOS 14.4.1
Node version: 20.11.1
Package manager: [email protected]
Radix Vue version: 1.7.2
Vue version: 3.4.23
Client OS: macOS 14.4.1
Browser: Chrome 124.0.6367.62

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-jbusm6?file=src%2FApp.vue

Steps to reproduce

1. In Stackblitz, open a new terminal and run npx vue-tsc.
2. The command should return the following error: Type 'UseTextDirectionValue' is not assignable to type 'Direction | undefined'.

Describe the bug

In VueUse useTextDirection has a type of:

export type UseTextDirectionValue = 'ltr' | 'rtl' | 'auto'

While, in our case, the dir prop of ConfigProvider has the following type:

type Direction = 'ltr' | 'rtl'

How to fix

By updating the type on our side including the auto value, the error disappears, but I am not sure of which kind of changes are required to accommodate the auto value. I can submit a PR if you think we should fix this, but I might need some guidance on the best way to approach the problem (could it be just to discard auto in the provider? Implement some new behavior on the components depending on directionality?)

Expected behavior

We should not have that TypeScript type error.

Context & Screenshots (if applicable)

No response

[zernonia]

Thanks for the issue @dwightjack ! auto value would allow the userAgent to determine which direction it should be, however for radix-vue we need to know explicitly ltr or rtl (default ltr) due to interaction with some of the components.

In this case I think we need to update the docs, to have clearer example of using useTextDirection composable. Maybe another computed property as such

const textDirection = useTextDirection()
const dir = computed(() => textDirection.value === 'rtl' ? 'rtl' : 'ltr'
// doing so to make sure the `dir` is only returning the types that radix-vue supports