Skip to content

Commit aa715ed

Browse files
LouisMazelLouisMazel
committed
refactor(docs): accessibilty - support of rtl direction
1 parent 8cc99bf commit aa715ed

File tree

14 files changed

+143
-63
lines changed

14 files changed

+143
-63
lines changed

‎apps/docs/components/ThemeEditorPage.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,7 @@ function formatColorName(colorName: string): string {
155155
<div class="vp-raw theme-configurator">
156156
<div class="maz-grid maz-min-h-[80vh] maz-grid-cols-1 maz-gap-4 lg:maz-grid-cols-12">
157157
<!-- Editor Panel -->
158-
<div class="maz-space-y-6 lg:maz-col-span-4 lg:maz-border-r lg:maz-pr-4">
158+
<div class="maz-space-y-6 lg:maz-col-span-4 lg:maz-border-e lg:maz-pr-4">
159159
<h2 class="maz-text-2xl maz-text-foreground">
160160
Editor
161161
</h2>

‎apps/docs/src/components/maz-bottom-sheet.md‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -35,11 +35,11 @@ This component uses the `<Teleport to="body">` with [MazBackdrop](./maz-backdrop
3535
</div>
3636
<div class="maz-flex maz-gap-2">
3737
<MazBtn color="primary" @click="openProductOptions">
38-
<MazIcon name="cog" class="maz-mr-2" />
38+
<MazIcon name="cog" class="maz-me-2" />
3939
Customize Options
4040
</MazBtn>
4141
<MazBtn color="secondary" @click="openUserSettings">
42-
<MazIcon name="user" class="maz-mr-2" />
42+
<MazIcon name="user" class="maz-me-2" />
4343
Profile Settings
4444
</MazBtn>
4545
</div>
@@ -105,7 +105,7 @@ This component uses the `<Teleport to="body">` with [MazBackdrop](./maz-backdrop
105105
</div>
106106
<div class="maz-flex maz-gap-3 maz-pt-4">
107107
<MazBtn color="primary" class="maz-flex-1" @click="addToCart">
108-
<MazIcon name="shopping-cart" class="maz-mr-2" />
108+
<MazIcon name="shopping-cart" class="maz-me-2" />
109109
Add to Cart (${{ (129.99 * quantity).toFixed(2) }})
110110
</MazBtn>
111111
<MazBtn color="secondary" @click="isProductOpen = false">
@@ -162,7 +162,7 @@ This component uses the `<Teleport to="body">` with [MazBackdrop](./maz-backdrop
162162
</div>
163163
<div class="maz-flex maz-gap-3 maz-pt-4">
164164
<MazBtn color="primary" class="maz-flex-1" @click="saveSettings">
165-
<MazIcon name="check" class="maz-mr-2" />
165+
<MazIcon name="check" class="maz-me-2" />
166166
Save Changes
167167
</MazBtn>
168168
<MazBtn color="secondary" @click="isUserOpen = false">
@@ -319,7 +319,7 @@ This component uses the `<Teleport to="body">` with [MazBackdrop](./maz-backdrop
319319
</div>
320320
<div class="maz-flex maz-gap-3 maz-pt-4">
321321
<MazBtn color="primary" class="maz-flex-1" @click="saveSettings">
322-
<MazIcon name="check" class="maz-mr-2" />
322+
<MazIcon name="check" class="maz-me-2" />
323323
Save Changes
324324
</MazBtn>
325325
<MazBtn color="secondary" @click="isUserOpen = false">

‎apps/docs/src/components/maz-card.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ description: MazCard is a standalone component to display some texts and images
5757
<MazBtn
5858
fab
5959
color="destructive"
60-
class="maz-mr-2"
60+
class="maz-me-2"
6161
>
6262
<MazIcon name="trash" class="maz-text-xl" />
6363
</MazBtn>
@@ -94,7 +94,7 @@ description: MazCard is a standalone component to display some texts and images
9494
size="md"
9595
fab
9696
color="destructive"
97-
class="maz-mr-2"
97+
class="maz-me-2"
9898
>
9999
<MazIcon name="trash" />
100100
</MazBtn>

‎apps/docs/src/components/maz-input-phone-number.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -485,7 +485,7 @@ Replace the default flag emojis with your own design.
485485
</span>
486486
</template>
487487
<template #country-list-flag="{ countryCode }">
488-
<MazBadge size="sm" class="maz-mr-2 maz-min-w-[2.5rem]">
488+
<MazBadge size="sm" class="maz-me-2 maz-min-w-[2.5rem]">
489489
{{ countryCode }}
490490
</MazBadge>
491491
</template>
@@ -504,7 +504,7 @@ Replace the default flag emojis with your own design.
504504
</div>
505505
</template>
506506
<template #country-list-flag="{ countryCode }">
507-
<div class="maz-w-6 maz-h-6 maz-bg-gradient-to-r maz-from-purple-500 maz-to-pink-500 maz-rounded maz-flex maz-items-center maz-justify-center maz-text-white maz-text-xs maz-font-bold maz-mr-2">
507+
<div class="maz-w-6 maz-h-6 maz-bg-gradient-to-r maz-from-purple-500 maz-to-pink-500 maz-rounded maz-flex maz-items-center maz-justify-center maz-text-white maz-text-xs maz-font-bold maz-me-2">
508508
{{ countryCode?.charAt(0) }}
509509
</div>
510510
</template>
@@ -524,7 +524,7 @@ Replace the default flag emojis with your own design.
524524
</span>
525525
</template>
526526
<template #country-list-flag="{ countryCode }">
527-
<MazBadge size="sm" class="maz-mr-2">
527+
<MazBadge size="sm" class="maz-me-2">
528528
{{ countryCode }}
529529
</MazBadge>
530530
</template>
@@ -556,7 +556,7 @@ Replace the default flag emojis with your own design.
556556
}
557557
558558
.custom-list-icon {
559-
@apply maz-mr-2;
559+
@apply maz-me-2;
560560
}
561561
</style>
562562
```

‎apps/docs/src/components/maz-popover.md‎

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -118,10 +118,10 @@ This provides the best user experience across all devices without requiring manu
118118
<p class="maz-text-sm maz-mb-2">
119119
This combines adaptive behavior with keep-open-on-hover for menus.
120120
</p>
121-
<button class="maz-block maz-w-full maz-px-3 maz-py-2 maz-text-left maz-text-sm hover:maz-bg-surface-600 dark:hover:maz-bg-surface-400 maz-rounded">
121+
<button class="maz-block maz-w-full maz-px-3 maz-py-2 maz-text-start maz-text-sm hover:maz-bg-surface-600 dark:hover:maz-bg-surface-400 maz-rounded">
122122
Menu Item 1
123123
</button>
124-
<button class="maz-block maz-w-full maz-px-3 maz-py-2 maz-text-left maz-text-sm hover:maz-bg-surface-600 dark:hover:maz-bg-surface-400 maz-rounded">
124+
<button class="maz-block maz-w-full maz-px-3 maz-py-2 maz-text-start maz-text-sm hover:maz-bg-surface-600 dark:hover:maz-bg-surface-400 maz-rounded">
125125
Menu Item 2
126126
</button>
127127
</div>
@@ -161,10 +161,10 @@ This provides the best user experience across all devices without requiring manu
161161
<p class="maz-text-sm maz-mb-2">
162162
Perfect for dropdown menus that work on all devices
163163
</p>
164-
<button class="maz-block maz-w-full maz-px-3 maz-py-2 maz-text-left maz-text-sm hover:maz-bg-surface-600 dark:hover:maz-bg-surface-400 maz-rounded">
164+
<button class="maz-block maz-w-full maz-px-3 maz-py-2 maz-text-start maz-text-sm hover:maz-bg-surface-600 dark:hover:maz-bg-surface-400 maz-rounded">
165165
Menu Item 1
166166
</button>
167-
<button class="maz-block maz-w-full maz-px-3 maz-py-2 maz-text-left maz-text-sm hover:maz-bg-surface-600 dark:hover:maz-bg-surface-400 maz-rounded">
167+
<button class="maz-block maz-w-full maz-px-3 maz-py-2 maz-text-start maz-text-sm hover:maz-bg-surface-600 dark:hover:maz-bg-surface-400 maz-rounded">
168168
Menu Item 2
169169
</button>
170170
</div>
@@ -852,16 +852,16 @@ const isOpen = ref(false)
852852
<MazPopover position="bottom-start">
853853
<template #trigger>
854854
<MazBtn>
855-
<MazIcon name="cog-6-tooth" class="maz-mr-2" />
855+
<MazIcon name="cog-6-tooth" class="maz-me-2" />
856856
Settings
857-
<MazIcon name="chevron-down" class="maz-ml-2" />
857+
<MazIcon name="chevron-down" class="maz-ms-2" />
858858
</MazBtn>
859859
</template>
860860
<div class="maz-py-1 maz-min-w-48">
861861
<button
862862
v-for="item in menuItems"
863863
:key="item.label"
864-
class="maz-w-full maz-px-4 maz-py-2 maz-text-left maz-text-sm hover:maz-bg-surface-600 dark:hover:maz-bg-surface-400 maz-flex maz-items-center maz-gap-2"
864+
class="maz-w-full maz-px-4 maz-py-2 maz-text-start maz-text-sm hover:maz-bg-surface-600 dark:hover:maz-bg-surface-400 maz-flex maz-items-center maz-gap-2"
865865
@click="handleMenuClick(item.action)"
866866
>
867867
<MazIcon :name="item.icon" class="maz-w-4 maz-h-4" />
@@ -874,14 +874,14 @@ const isOpen = ref(false)
874874
<MazBtn color="transparent" fab :icon="MazEllipsisVertical" />
875875
</template>
876876
<div class="maz-py-1 maz-min-w-32">
877-
<button class="maz-w-full maz-px-3 maz-py-2 maz-text-left maz-text-sm hover:maz-bg-surface-600 dark:hover:maz-bg-surface-400">
877+
<button class="maz-w-full maz-px-3 maz-py-2 maz-text-start maz-text-sm hover:maz-bg-surface-600 dark:hover:maz-bg-surface-400">
878878
Edit
879879
</button>
880-
<button class="maz-w-full maz-px-3 maz-py-2 maz-text-left maz-text-sm hover:maz-bg-surface-600 dark:hover:maz-bg-surface-400">
880+
<button class="maz-w-full maz-px-3 maz-py-2 maz-text-start maz-text-sm hover:maz-bg-surface-600 dark:hover:maz-bg-surface-400">
881881
Share
882882
</button>
883883
<hr class="maz-my-1 maz-border-divider">
884-
<button class="maz-w-full maz-px-3 maz-py-2 maz-text-left maz-text-sm hover:maz-bg-surface-600 dark:hover:maz-bg-surface-400 maz-text-destructive">
884+
<button class="maz-w-full maz-px-3 maz-py-2 maz-text-start maz-text-sm hover:maz-bg-surface-600 dark:hover:maz-bg-surface-400 maz-text-destructive">
885885
Delete
886886
</button>
887887
</div>
@@ -907,16 +907,16 @@ function handleMenuClick(action) {
907907
<MazPopover position="bottom-start">
908908
<template #trigger>
909909
<MazBtn>
910-
<MazIcon name="cog-6-tooth" class="maz-mr-2" />
910+
<MazIcon name="cog-6-tooth" class="maz-me-2" />
911911
Settings
912-
<MazIcon name="chevron-down" class="maz-ml-2" />
912+
<MazIcon name="chevron-down" class="maz-ms-2" />
913913
</MazBtn>
914914
</template>
915915
<div class="maz-py-1 maz-min-w-48">
916916
<button
917917
v-for="item in menuItems"
918918
:key="item.label"
919-
class="maz-w-full maz-px-4 maz-py-2 maz-text-left maz-text-sm hover:maz-bg-surface-600 dark:hover:maz-bg-surface-400 maz-flex maz-items-center maz-gap-2"
919+
class="maz-w-full maz-px-4 maz-py-2 maz-text-start maz-text-sm hover:maz-bg-surface-600 dark:hover:maz-bg-surface-400 maz-flex maz-items-center maz-gap-2"
920920
@click="handleMenuClick(item.action)"
921921
>
922922
<MazIcon :name="item.icon" class="maz-w-4 maz-h-4" />
@@ -932,14 +932,14 @@ function handleMenuClick(action) {
932932
</MazBtn>
933933
</template>
934934
<div class="maz-py-1 maz-min-w-32">
935-
<button class="maz-w-full maz-px-3 maz-py-2 maz-text-left maz-text-sm hover:maz-bg-surface-600 dark:hover:maz-bg-surface-400">
935+
<button class="maz-w-full maz-px-3 maz-py-2 maz-text-start maz-text-sm hover:maz-bg-surface-600 dark:hover:maz-bg-surface-400">
936936
Edit
937937
</button>
938-
<button class="maz-w-full maz-px-3 maz-py-2 maz-text-left maz-text-sm hover:maz-bg-surface-600 dark:hover:maz-bg-surface-400">
938+
<button class="maz-w-full maz-px-3 maz-py-2 maz-text-start maz-text-sm hover:maz-bg-surface-600 dark:hover:maz-bg-surface-400">
939939
Share
940940
</button>
941941
<hr class="maz-my-1 maz-border-divider">
942-
<button class="maz-w-full maz-px-3 maz-py-2 maz-text-left maz-text-sm hover:maz-bg-surface-600 dark:hover:maz-bg-surface-400 maz-text-destructive">
942+
<button class="maz-w-full maz-px-3 maz-py-2 maz-text-start maz-text-sm hover:maz-bg-surface-600 dark:hover:maz-bg-surface-400 maz-text-destructive">
943943
Delete
944944
</button>
945945
</div>
@@ -962,14 +962,14 @@ function handleMenuClick(action) {
962962
</MazBtn>
963963
</template>
964964
<div class="maz-py-1 maz-min-w-32">
965-
<button class="maz-w-full maz-px-3 maz-py-2 maz-text-left maz-text-sm hover:maz-bg-surface-600 dark:hover:maz-bg-surface-400">
965+
<button class="maz-w-full maz-px-3 maz-py-2 maz-text-start maz-text-sm hover:maz-bg-surface-600 dark:hover:maz-bg-surface-400">
966966
Edit
967967
</button>
968-
<button class="maz-w-full maz-px-3 maz-py-2 maz-text-left maz-text-sm hover:maz-bg-surface-600 dark:hover:maz-bg-surface-400">
968+
<button class="maz-w-full maz-px-3 maz-py-2 maz-text-start maz-text-sm hover:maz-bg-surface-600 dark:hover:maz-bg-surface-400">
969969
Share
970970
</button>
971971
<hr class="maz-my-1 maz-border-divider">
972-
<button class="maz-w-full maz-px-3 maz-py-2 maz-text-left maz-text-sm hover:maz-bg-surface-600 dark:hover:maz-bg-surface-400 maz-text-destructive">
972+
<button class="maz-w-full maz-px-3 maz-py-2 maz-text-start maz-text-sm hover:maz-bg-surface-600 dark:hover:maz-bg-surface-400 maz-text-destructive">
973973
Delete
974974
</button>
975975
</div>
@@ -986,14 +986,14 @@ function handleMenuClick(action) {
986986
</MazBtn>
987987
</template>
988988
<div class="maz-py-1 maz-min-w-32">
989-
<button class="maz-w-full maz-px-3 maz-py-2 maz-text-left maz-text-sm hover:maz-bg-surface-600 dark:hover:maz-bg-surface-400">
989+
<button class="maz-w-full maz-px-3 maz-py-2 maz-text-start maz-text-sm hover:maz-bg-surface-600 dark:hover:maz-bg-surface-400">
990990
Edit
991991
</button>
992-
<button class="maz-w-full maz-px-3 maz-py-2 maz-text-left maz-text-sm hover:maz-bg-surface-600 dark:hover:maz-bg-surface-400">
992+
<button class="maz-w-full maz-px-3 maz-py-2 maz-text-start maz-text-sm hover:maz-bg-surface-600 dark:hover:maz-bg-surface-400">
993993
Share
994994
</button>
995995
<hr class="maz-my-1 maz-border-divider">
996-
<button class="maz-w-full maz-px-3 maz-py-2 maz-text-left maz-text-sm hover:maz-bg-surface-600 dark:hover:maz-bg-surface-400 maz-text-destructive">
996+
<button class="maz-w-full maz-px-3 maz-py-2 maz-text-start maz-text-sm hover:maz-bg-surface-600 dark:hover:maz-bg-surface-400 maz-text-destructive">
997997
Delete
998998
</button>
999999
</div>
@@ -1011,7 +1011,7 @@ function handleMenuClick(action) {
10111011
<MazPopover position="bottom-start" :close-on-click-outside="false" :close-on-escape="false">
10121012
<template #trigger>
10131013
<MazBtn block>
1014-
<MazIcon name="plus" class="maz-mr-2" />
1014+
<MazIcon name="plus" class="maz-me-2" />
10151015
Add Item
10161016
</MazBtn>
10171017
</template>
@@ -1067,7 +1067,7 @@ function resetForm() {
10671067
<MazPopover position="bottom-start" :close-on-click-outside="false">
10681068
<template #trigger>
10691069
<MazBtn block>
1070-
<MazIcon name="plus" class="maz-mr-2" />
1070+
<MazIcon name="plus" class="maz-me-2" />
10711071
Add Item
10721072
</MazBtn>
10731073
</template>
@@ -1267,7 +1267,7 @@ function resetForm() {
12671267
</div>
12681268
<div v-for="(event, index) in events" :key="index" class="maz-mb-1">
12691269
<span class="maz-font-mono maz-text-primary">{{ event.type }}</span>
1270-
<span class="maz-text-muted maz-ml-2">{{ event.time }}</span>
1270+
<span class="maz-text-muted maz-ms-2">{{ event.time }}</span>
12711271
</div>
12721272
</div>
12731273
</div>

‎apps/docs/src/components/maz-textarea.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ You can use the `label` and `append` slots to customize the label and the append
5555
>
5656
<template #label>
5757
<MazIcon name="envelope" class="maz-text-xl" />
58-
<span class="maz-ml-2">
58+
<span class="maz-ms-2">
5959
The custom label
6060
</span>
6161
</template>
@@ -90,7 +90,7 @@ function sendMessage() {
9090
>
9191
<template #label>
9292
<MazIcon name="envelope" class="maz-text-xl" />
93-
<span class="maz-ml-2">
93+
<span class="maz-ms-2">
9494
The custom label
9595
</span>
9696
</template>

‎apps/docs/src/guide/themes.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -352,7 +352,7 @@ app.use(MazUi, {
352352
<MazBtn @click="applyCustomTheme" color="info">
353353
Apply Custom Theme
354354
</MazBtn>
355-
<MazBtn @click="resetTheme" color="secondary" class="maz-ml-2">
355+
<MazBtn @click="resetTheme" color="secondary" class="maz-ms-2">
356356
Reset
357357
</MazBtn>
358358

‎apps/docs/src/index.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ description: Build amazing interfaces with Maz-UI - standalone components & tool
6767
<template #left-icon>
6868
<MazGithub class="maz-text-3xl" />
6969
</template>
70-
<MazAnimatedCounter :delay="1250" :count="starCount" class="maz-text-xl maz-pl-2" />
70+
<MazAnimatedCounter :delay="1250" :count="starCount" class="maz-text-xl maz-ps-2" />
7171
<template #right-icon>
7272
<MazStar class="maz-text-2xl" />
7373
</template>

‎apps/docs/src/made-with-maz-ui.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ Propose your website by opening an [issue](https://github.com/LouisMazel/maz-ui/
2323
{{ description }}
2424
</h5>
2525
<template #footer>
26-
<MazBtn v-if="github" color="black" :href="github" target="_blank" left-icon="github" class="maz-mr-4">
26+
<MazBtn v-if="github" color="black" :href="github" target="_blank" left-icon="github" class="maz-me-4">
2727
Github
2828
</MazBtn>
2929
<MazBtn :href="link" target="_blank" left-icon="arrow-top-right-on-square">

‎apps/nuxt-app/src/pages/index.vue‎

Lines changed: 30 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<script lang="ts" setup>
22
import { sleep } from 'maz-ui'
3+
import { string } from 'valibot'
34
45
const toast = useToast()
56
const wait = useWait()
@@ -29,7 +30,25 @@ onMounted(async () => {
2930
wait.stop('APP_LOADING')
3031
})
3132
32-
const selected = ref('1')
33+
const { model } = useFormValidator({
34+
schema: {
35+
name: string(),
36+
select: string(),
37+
},
38+
options: {
39+
mode: 'progressive',
40+
},
41+
})
42+
43+
const select = useTemplateRef('select')
44+
const input = useTemplateRef('input')
45+
46+
useFormField('name', {
47+
ref: input,
48+
})
49+
useFormField('select', {
50+
ref: select,
51+
})
3352
</script>
3453

3554
<template>
@@ -41,9 +60,18 @@ const selected = ref('1')
4160
Coucou
4261
</MazBtn>
4362

63+
<MazInput
64+
ref="input"
65+
v-model="model.name"
66+
label="Name"
67+
/>
68+
4469
<MazSelect
45-
v-model="selected"
70+
ref="select"
71+
v-model="model.select"
4672
:options="['1', '2', '3']"
73+
placeholder="Select"
74+
color="secondary"
4775
search
4876
/>
4977

0 commit comments

Comments
 (0)