[Feature]: Support RTL in shadcn components

radix-vue / shadcn-vue

Vue port of shadcn-ui

https://www.shadcn-vue.com/

MIT License

3.52k stars 203 forks source link

[Feature]: Support RTL in shadcn components #357

Open lord007tn opened 4 months ago

lord007tn commented 4 months ago

Describe the feature

It seems that components use left and right values from tailwindcss i would recommend using start and end so it supports RTL and LTR directions in projects

so instead of pr-1 , ml-2 ... we use pe-1, ms-2 And so on

also in components that have Chevron icons we should add rtl:rotate-180 class so we make sure when we change direction arrow rotate

Tasks:

[ ] use ( start-, end- / ps-, pe- / ms-, me-/ ... ) instead of (left-, right- / pl-, pr- / ml-, mr- / ... )
[ ] add rotation transformation to chevrons that point to direction
[ ] related bug https://github.com/radix-vue/radix-vue/issues/719

Additional information

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

sadeghbarati commented 4 months ago

@lord007tn Thanks for bringing it up

Are you gonna add a CLI feature
Or gonna change the source code classes from directional properties to logical properties?

sadeghbarati commented 4 months ago

The CSS Logical Properties support table seems fine

https://caniuse.com/css-logical-props

Vite browserlist config https://github.com/vitejs/vite/blob/37af8a7be417f1fb2cf9a0d5e9ad90b76ff211b4/packages/vite/src/node/constants.ts#L19

romanhrynevych commented 4 months ago

Think that logical properties is better, thanks for the PR)

lord007tn commented 4 months ago

@sadeghbarati i will make a pr soon to change direction properties to logical properties as it seems to support i18n with multi direction website

Saeid-Za commented 4 months ago

Another note, that space-x-* won't work on RTL direction. a good replacement is gap-x-* if the container already is flex/grid.

omar-labana commented 3 months ago

any updates on this?

sadeghbarati commented 2 months ago

Created a poll here please share it for others

https://github.com/radix-vue/shadcn-vue/discussions/470

Saeid-Za commented 1 week ago

Coming back to this issue after a few months, could we extend the tailwind prefix functionality, to transform the component on the fly, based on user preference, before deploying them to the user machine?