From fe6e4f65dee3877139ccd903c2d044c061c9e0db Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Thu, 17 Oct 2024 13:21:06 +0300
Subject: [PATCH] RTL added config

---
 apps/showcase/layouts/AppConfigurator.vue | 28 +++++++++++++++++++----
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/apps/showcase/layouts/AppConfigurator.vue b/apps/showcase/layouts/AppConfigurator.vue
index c48c43b2f..c76314849 100755
--- a/apps/showcase/layouts/AppConfigurator.vue
+++ b/apps/showcase/layouts/AppConfigurator.vue
@@ -33,9 +33,19 @@
                 <span class="config-panel-label">Presets</span>
                 <SelectButton v-model="$appState.preset" @update:modelValue="onPresetChange" :options="presetOptions" optionLabel="label" optionValue="value" :allowEmpty="false" />
             </div>
-            <div class="config-panel-settings">
-                <span class="config-panel-label">Ripple</span>
-                <ToggleSwitch :modelValue="rippleActive" @update:modelValue="onRippleChange" />
+            <div class="flex">
+                <div class="flex-1">
+                    <div class="config-panel-settings">
+                        <span class="config-panel-label">Ripple</span>
+                        <ToggleSwitch :modelValue="rippleActive" @update:modelValue="onRippleChange" />
+                    </div>
+                </div>
+                <div class="flex-1">
+                    <div class="config-panel-settings">
+                        <span class="config-panel-label">RTL</span>
+                        <ToggleSwitch v-model="isRTL" @update:modelValue="onRTLChange" />
+                    </div>
+                </div>
             </div>
         </div>
     </div>
@@ -98,7 +108,8 @@ export default {
                     name: 'ocean',
                     palette: { 0: '#ffffff', 50: '#fbfcfc', 100: '#F7F9F8', 200: '#EFF3F2', 300: '#DADEDD', 400: '#B1B7B6', 500: '#828787', 600: '#5F7274', 700: '#415B61', 800: '#29444E', 900: '#183240', 950: '#0c1920' }
                 }
-            ]
+            ],
+            isRTL: false
         };
     },
     methods: {
@@ -303,6 +314,15 @@ export default {
             }
 
             $t().preset(preset).preset(this.getPresetExt()).surfacePalette(surfacePalette).use({ useDefaultOptions: true });
+        },
+        onRTLChange(value) {
+            const htmlElement = document.documentElement;
+
+            if (value) {
+                htmlElement.setAttribute('dir', 'rtl');
+            } else {
+                htmlElement.removeAttribute('dir');
+            }
         }
     },
     computed: {