Merge pull request #6634 from primefaces/v.4.2.0

RTL initial
primefaces · Oct 24, 2024 · d69406b · d69406b
2 parents a4bc174 + 9e908ba
commit d69406b
Show file tree

Hide file tree

Showing 9 changed files with 95 additions and 104 deletions.
diff --git a/apps/showcase/assets/styles/layout/_sidebar.scss b/apps/showcase/assets/styles/layout/_sidebar.scss
@@ -9,7 +9,7 @@
     flex-direction: column;
     padding: 0 0 0 0;
     flex: 0 0 250px;
-    margin-right: 4rem;
+    margin-inline-end: 4rem;
     overflow: auto;
 
     .logo {
@@ -18,7 +18,8 @@
     }
 
     nav {
-        padding: 0 1rem 0 0;
+        padding: 0;
+        padding-inline-end: 1rem;
         margin: 0;
         flex-grow: 1;
     }
@@ -56,7 +57,7 @@
                     width: 2rem;
                     height: 2rem;
                     border-radius: 6px;
-                    margin-right: .5rem;
+                    margin-inline-end: .5rem;
                     border: 1px solid var(--border-color);
                     display: inline-flex;
                     align-items: center;
@@ -73,7 +74,7 @@
 
                 .menu-toggle-icon {
                     color: var(--text-secondary-color);
-                    margin-left: auto;
+                    margin-inline-start: auto;
                 }
 
                 &:hover {
@@ -105,18 +106,20 @@
                 overflow: hidden;
 
                 ol {
-                    margin: 0 0 0 1rem;
+                    margin: 0;
+                    margin-inline-start: 1rem;
                     padding: .25rem 0;
                     list-style: none;
 
                     li {
                         a {
-                            border-left: 1px solid var(--border-color);
+                            border-inline-start: 1px solid var(--border-color);
                             transition: all .2s;
                             font-weight: 450;
                             display: flex;
                             align-items: center;
-                            padding: .5rem .5rem .5rem 1rem;
+                            padding: .5rem;
+                            padding-inline-start: 1rem;
                             color: var(--text-secondary-color);
                             transition: outline-color 0.2s, border-color .2s;
                             outline-color: transparent;
@@ -153,7 +156,7 @@
 
         .p-tag {
             position: absolute;
-            right: 0;
+            inset-inline-end: 0;
             top: 50%;
             transform: translateY(-50%);
 
@@ -165,7 +168,8 @@
 
         .menu-child-category {
             display: flex;
-            padding: .5rem .5rem .5rem 0;
+            padding: .5rem;
+            padding-inline-start: 0;
             font-size: .875rem;
             font-weight: 600;
             letter-spacing: 1px;

diff --git a/apps/showcase/assets/styles/layout/_topbar.scss b/apps/showcase/assets/styles/layout/_topbar.scss
@@ -52,7 +52,7 @@
             width: 25px;
         }
     }
-    
+
     .menu-button {
         display: none;
     }
@@ -84,21 +84,21 @@
             outline-color: transparent;
             background-color: var(--card-background);
             cursor: pointer;
-    
+
             @include focus-visible();
-    
+
             &:hover {
                 border-color: var(--primary-color);
             }
-    
+
             i, span {
                 color: var(--text-color);
             }
         }
 
         .config-item {
             background-color: var(--primary-color);
-            
+
             i {
                 color: var(--primary-contrast-color);
             }
@@ -107,15 +107,15 @@
         .config-panel {
             position: absolute;
             top: calc(100% + 2px);
-            right: 0;
+            inset-inline-end: 0;
             width: 18rem;
             padding: .75rem;
             background-color: var(--overlay-background);
             border-radius: 6px;
             border: 1px solid var(--border-color);
             transform-origin: top;
             box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-            
+
             .config-panel-content {
                 display: flex;
                 flex-direction: column;
@@ -135,7 +135,7 @@
                     display: flex;
                     gap: .5rem;
                     flex-wrap: wrap;
-    
+
                     button {
                         border: none;
                         width: 1.25rem;
@@ -147,7 +147,7 @@
                         outline-width: 2px;
                         outline-style: solid;
                         outline-offset: 1px;
-    
+
                         &.active-color {
                             outline-color: var(--primary-color);
                         }
@@ -218,4 +218,4 @@
             }
         }
     }
-}
+}
diff --git 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: {

diff --git a/packages/primevue/src/autocomplete/style/AutoCompleteStyle.js b/packages/primevue/src/autocomplete/style/AutoCompleteStyle.js
@@ -10,11 +10,11 @@ const theme = ({ dt }) => `
     position: absolute;
     top: 50%;
     margin-top: -0.5rem;
-    right: ${dt('autocomplete.padding.x')};
+    inset-inline-end: ${dt('autocomplete.padding.x')};
 }
 
 .p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-loader {
-    right: calc(${dt('autocomplete.dropdown.width')} + ${dt('autocomplete.padding.x')});
+    inset-inline-end: calc(${dt('autocomplete.dropdown.width')} + ${dt('autocomplete.padding.x')});
 }
 
 .p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input {
@@ -24,25 +24,24 @@ const theme = ({ dt }) => `
 
 .p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input,
 .p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input-multiple {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
 }
 
 .p-autocomplete-dropdown {
     cursor: pointer;
     display: inline-flex;
-    cursor: pointer;
     user-select: none;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     position: relative;
     width: ${dt('autocomplete.dropdown.width')};
-    border-top-right-radius: ${dt('autocomplete.dropdown.border.radius')};
-    border-bottom-right-radius: ${dt('autocomplete.dropdown.border.radius')};
+    border-start-end-radius: ${dt('autocomplete.dropdown.border.radius')};
+    border-end-end-radius: ${dt('autocomplete.dropdown.border.radius')};
     background: ${dt('autocomplete.dropdown.background')};
     border: 1px solid ${dt('autocomplete.dropdown.border.color')};
-    border-left: 0 none;
+    border-inline-start: 0 none;
     color: ${dt('autocomplete.dropdown.color')};
     transition: background ${dt('autocomplete.transition.duration')}, color ${dt('autocomplete.transition.duration')}, border-color ${dt('autocomplete.transition.duration')}, outline-color ${dt('autocomplete.transition.duration')}, box-shadow ${dt(
     'autocomplete.transition.duration'
@@ -190,14 +189,14 @@ const theme = ({ dt }) => `
 }
 
 .p-autocomplete-chip.p-chip {
-    padding-top: calc(${dt('autocomplete.padding.y')} / 2);
-    padding-bottom: calc(${dt('autocomplete.padding.y')} / 2);
+    padding-block-start: calc(${dt('autocomplete.padding.y')} / 2);
+    padding-block-end: calc(${dt('autocomplete.padding.y')} / 2);
     border-radius: ${dt('autocomplete.chip.border.radius')};
 }
 
 .p-autocomplete-input-multiple:has(.p-autocomplete-chip) {
-    padding-left: calc(${dt('autocomplete.padding.y')} / 2);
-    padding-right: calc(${dt('autocomplete.padding.y')} / 2);
+    padding-inline-start: calc(${dt('autocomplete.padding.y')} / 2);
+    padding-inline-end: calc(${dt('autocomplete.padding.y')} / 2);
 }
 
 .p-autocomplete-chip-item.p-focus .p-autocomplete-chip {
@@ -208,8 +207,8 @@ const theme = ({ dt }) => `
 .p-autocomplete-input-chip {
     flex: 1 1 auto;
     display: inline-flex;
-    padding-top: calc(${dt('autocomplete.padding.y')} / 2);
-    padding-bottom: calc(${dt('autocomplete.padding.y')} / 2);
+    padding-block-start: calc(${dt('autocomplete.padding.y')} / 2);
+    padding-block-end: calc(${dt('autocomplete.padding.y')} / 2);
 }
 
 .p-autocomplete-input-chip input {

diff --git a/packages/primevue/src/cascadeselect/style/CascadeSelectStyle.js b/packages/primevue/src/cascadeselect/style/CascadeSelectStyle.js
@@ -56,8 +56,8 @@ const theme = ({ dt }) => `
     background: transparent;
     color: ${dt('cascadeselect.dropdown.color')};
     width: ${dt('cascadeselect.dropdown.width')};
-    border-top-right-radius: ${dt('border.radius.md')};
-    border-bottom-right-radius: ${dt('border.radius.md')};
+    border-start-end-radius: ${dt('border.radius.md')};
+    border-end-end-radius: ${dt('border.radius.md')};
 }
 
 .p-cascadeselect-label {
@@ -78,10 +78,6 @@ const theme = ({ dt }) => `
     color: ${dt('cascadeselect.placeholder.color')};
 }
 
-.p-cascadeselect-clearable .p-cascadeselect-label {
-    padding-right: 1.75rem;
-}
-
 .p-cascadeselect.p-disabled .p-cascadeselect-label {
     color: ${dt('cascadeselect.disabled.color')};
 }
@@ -126,7 +122,7 @@ const theme = ({ dt }) => `
     padding: ${dt('cascadeselect.list.padding')};
     display: flex;
     flex-direction: column;
-    gap: ${dt('cascadeselect.list.gap')}
+    gap: ${dt('cascadeselect.list.gap')};
 }
 
 .p-cascadeselect-option {
@@ -168,8 +164,8 @@ const theme = ({ dt }) => `
 }
 
 .p-cascadeselect-option-active > .p-cascadeselect-option-list {
-    left: 100%;
-    top: 0;
+    inset-inline-start: 100%;
+    inset-block-start: 0;
 }
 
 .p-cascadeselect-option-content {
@@ -192,12 +188,16 @@ const theme = ({ dt }) => `
     color: ${dt('cascadeselect.option.icon.color')};
 }
 
+.p-cascadeselect-group-icon:dir(rtl) {
+    transform: rotate(180deg);
+}
+
 .p-cascadeselect-mobile-active .p-cascadeselect-option-list {
     position: static;
     box-shadow: none;
     border: 0 none;
-    padding-left: ${dt('tieredmenu.submenu.mobile.indent')};
-    padding-right: 0;
+    padding-inline-start: ${dt('tieredmenu.submenu.mobile.indent')};
+    padding-inline-end: 0;
 }
 
 .p-cascadeselect-mobile-active .p-cascadeselect-group-icon {

diff --git a/packages/primevue/src/checkbox/style/CheckboxStyle.js b/packages/primevue/src/checkbox/style/CheckboxStyle.js
@@ -14,8 +14,8 @@ const theme = ({ dt }) => `
     cursor: pointer;
     appearance: none;
     position: absolute;
-    top: 0;
-    left: 0;
+    inset-block-start: 0;
+    inset-inline-start: 0;
     width: 100%;
     height: 100%;
     padding: 0;