Skip to content

Commit 4b2c664

Browse files
committed
docs(useRtl): add RtlAdapter interface and createRtl standalone factory
1 parent a548265 commit 4b2c664

1 file changed

Lines changed: 42 additions & 0 deletions

File tree

apps/docs/src/pages/composables/plugins/use-rtl.md

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,48 @@ app.use(createRtlPlugin({ target: '#app' }))
8989
app.use(createRtlPlugin({ target: null }))
9090
```
9191

92+
### Custom Adapters
93+
94+
Implement `RtlAdapter` to control how RTL direction is applied to the DOM:
95+
96+
```ts
97+
import type { RtlAdapter } from '@vuetify/v0'
98+
99+
class CustomRtlAdapter implements RtlAdapter {
100+
setup (app, context, target) {
101+
// context.isRtl — reactive ref, write to it to change direction
102+
// context.toggle — flips isRtl
103+
watchEffect(() => {
104+
const el = typeof target === 'string' ? document.querySelector(target) : target
105+
if (el) el.setAttribute('dir', context.isRtl.value ? 'rtl' : 'ltr')
106+
})
107+
}
108+
}
109+
110+
app.use(createRtlPlugin({ adapter: new CustomRtlAdapter() }))
111+
```
112+
113+
```ts
114+
interface RtlAdapter {
115+
setup: (app: App, context: { isRtl: Ref<boolean>; toggle: () => void }, target?: string | HTMLElement | null) => void
116+
}
117+
```
118+
119+
## Standalone Usage
120+
121+
Use `createRtl` to create a raw RTL context without the plugin system — useful for testing or embedding in other composables:
122+
123+
```ts
124+
import { createRtl } from '@vuetify/v0'
125+
126+
const rtl = createRtl({ default: true }) // starts in RTL
127+
rtl.isRtl.value // true
128+
rtl.toggle()
129+
rtl.isRtl.value // false
130+
```
131+
132+
`createRtl` accepts `default?: boolean` (initial direction) and returns `{ isRtl: ShallowRef<boolean>, toggle: () => void }`. No `app` is required.
133+
92134
## Styling
93135

94136
The `dir` attribute set by the adapter enables three approaches to direction-aware styling with utility classes:

0 commit comments

Comments
 (0)