From fe6e4f65dee3877139ccd903c2d044c061c9e0db Mon Sep 17 00:00:00 2001 From: tugcekucukoglu Date: Thu, 17 Oct 2024 13:21:06 +0300 Subject: [PATCH 1/8] 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 @@ Presets -
- Ripple - +
+
+
+ Ripple + +
+
+
+
+ RTL + +
+
@@ -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: { From 1e600dc660a1ce77759e27457f39d4942703d990 Mon Sep 17 00:00:00 2001 From: tugcekucukoglu Date: Mon, 21 Oct 2024 10:46:05 +0300 Subject: [PATCH 2/8] Sidebar rtl --- .../assets/styles/layout/_sidebar.scss | 22 +++++++++++-------- .../assets/styles/layout/_topbar.scss | 20 ++++++++--------- 2 files changed, 23 insertions(+), 19 deletions(-) diff --git a/apps/showcase/assets/styles/layout/_sidebar.scss b/apps/showcase/assets/styles/layout/_sidebar.scss index 242df1efa..0a9a32e07 100644 --- 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 index f2d0eabf2..c3c50a342 100644 --- 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,13 +84,13 @@ 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); } @@ -98,7 +98,7 @@ .config-item { background-color: var(--primary-color); - + i { color: var(--primary-contrast-color); } @@ -107,7 +107,7 @@ .config-panel { position: absolute; top: calc(100% + 2px); - right: 0; + inset-inline-end: 0; width: 18rem; padding: .75rem; background-color: var(--overlay-background); @@ -115,7 +115,7 @@ 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 @@ } } } -} \ No newline at end of file +} From 1df2d306a627e7d5b6a2780ad4fe3e4b32eef30d Mon Sep 17 00:00:00 2001 From: tugcekucukoglu Date: Mon, 21 Oct 2024 10:46:28 +0300 Subject: [PATCH 3/8] AutoComplete RTL --- .../autocomplete/style/AutoCompleteStyle.js | 27 +++++++++---------- 1 file changed, 13 insertions(+), 14 deletions(-) diff --git a/packages/primevue/src/autocomplete/style/AutoCompleteStyle.js b/packages/primevue/src/autocomplete/style/AutoCompleteStyle.js index 42450110f..fad49ec8c 100644 --- 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 { From 152270fc5038d2c50da7f65b84c96c6749331a61 Mon Sep 17 00:00:00 2001 From: tugcekucukoglu Date: Mon, 21 Oct 2024 10:46:38 +0300 Subject: [PATCH 4/8] FloatLabel RTL --- .../src/floatlabel/style/FloatLabelStyle.js | 28 ++++--------------- 1 file changed, 6 insertions(+), 22 deletions(-) diff --git a/packages/primevue/src/floatlabel/style/FloatLabelStyle.js b/packages/primevue/src/floatlabel/style/FloatLabelStyle.js index 0c718325c..5e190f892 100644 --- a/packages/primevue/src/floatlabel/style/FloatLabelStyle.js +++ b/packages/primevue/src/floatlabel/style/FloatLabelStyle.js @@ -15,7 +15,7 @@ const theme = ({ dt }) => ` transition-timing-function: ease; line-height: 1; font-weight: ${dt('floatlabel.font.weight')}; - left: ${dt('floatlabel.position.x')}; + inset-inline-start: ${dt('floatlabel.position.x')}; color: ${dt('floatlabel.color')}; transition-duration: ${dt('floatlabel.transition.duration')}; } @@ -26,7 +26,7 @@ const theme = ({ dt }) => ` } .p-floatlabel:has(.p-inputicon:first-child) label { - left: calc((${dt('form.field.padding.x')} * 2) + ${dt('icon.size')}); + inset-inline-start: calc((${dt('form.field.padding.x')} * 2) + ${dt('icon.size')}); } .p-floatlabel:has(.p-invalid) label { @@ -54,27 +54,11 @@ const theme = ({ dt }) => ` .p-floatlabel:has(input:focus) label, .p-floatlabel:has(input:-webkit-autofill) label, -.p-floatlabel:has(textarea:focus) label , -.p-floatlabel:has(.p-inputwrapper-focus) label { +.p-floatlabel:has(textarea:focus) label, +.p-floatlabel:has(.p-inputwrapper-focus) label { color: ${dt('floatlabel.focus.color')}; } -/*.p-floatlabel .p-placeholder, -.p-floatlabel input::placeholder, -.p-floatlabel .p-inputtext::placeholder { - opacity: 0; - transition-property: all; - transition-timing-function: ease; -} - -.p-floatlabel .p-focus .p-placeholder, -.p-floatlabel input:focus::placeholder, -.p-floatlabel .p-inputtext:focus::placeholder { - opacity: 1; - transition-property: all; - transition-timing-function: ease; -}*/ - .p-floatlabel-in .p-inputtext, .p-floatlabel-in .p-textarea, .p-floatlabel-in .p-select-label, @@ -82,8 +66,8 @@ const theme = ({ dt }) => ` .p-floatlabel-in .p-autocomplete-input-multiple, .p-floatlabel-in .p-cascadeselect-label, .p-floatlabel-in .p-treeselect-label { - padding-top: ${dt('floatlabel.in.input.padding.top')}; - padding-bottom: ${dt('floatlabel.in.input.padding.bottom')}; + padding-block-start: ${dt('floatlabel.in.input.padding.top')}; + padding-block-end: ${dt('floatlabel.in.input.padding.bottom')}; } .p-floatlabel-in:has(input:focus) label, From 3b72d1f18892f29bb205ceb43baca1930afd16f5 Mon Sep 17 00:00:00 2001 From: tugcekucukoglu Date: Mon, 21 Oct 2024 10:46:45 +0300 Subject: [PATCH 5/8] IftaLabel RTL --- .../src/iftalabel/style/IftaLabelStyle.js | 28 ++++--------------- 1 file changed, 6 insertions(+), 22 deletions(-) diff --git a/packages/primevue/src/iftalabel/style/IftaLabelStyle.js b/packages/primevue/src/iftalabel/style/IftaLabelStyle.js index 5a3bd4be4..2282ab6f4 100644 --- a/packages/primevue/src/iftalabel/style/IftaLabelStyle.js +++ b/packages/primevue/src/iftalabel/style/IftaLabelStyle.js @@ -15,7 +15,7 @@ const theme = ({ dt }) => ` line-height: 1; font-size: ${dt('iftalabel.font.size')}; font-weight: ${dt('iftalabel.font.weight')}; - left: ${dt('iftalabel.position.x')}; + inset-inline-start: ${dt('iftalabel.position.x')}; color: ${dt('iftalabel.color')}; transition-duration: ${dt('iftalabel.transition.duration')}; } @@ -27,18 +27,18 @@ const theme = ({ dt }) => ` .p-iftalabel .p-autocomplete-input-multiple, .p-iftalabel .p-cascadeselect-label, .p-iftalabel .p-treeselect-label { - padding-top: ${dt('iftalabel.input.padding.top')}; - padding-bottom: ${dt('iftalabel.input.padding.bottom')}; + padding-block-start: ${dt('iftalabel.input.padding.top')}; + padding-block-end: ${dt('iftalabel.input.padding.bottom')}; } .p-iftalabel:has(.p-invalid) label { color: ${dt('iftalabel.invalid.color')}; } -.p-iftalabel:has(input:focus) label , +.p-iftalabel:has(input:focus) label, .p-iftalabel:has(input:-webkit-autofill) label, -.p-iftalabel:has(textarea:focus) label , -.p-iftalabel:has(.p-inputwrapper-focus) label { +.p-iftalabel:has(textarea:focus) label, +.p-iftalabel:has(.p-inputwrapper-focus) label { color: ${dt('iftalabel.focus.color')}; } @@ -47,22 +47,6 @@ const theme = ({ dt }) => ` transform: translateY(25%); margin-top: 0; } - -/*.p-iftalabel .p-placeholder, -.p-iftalabel input::placeholder, -.p-iftalabel .p-inputtext::placeholder { - opacity: 0; - transition-property: all; - transition-timing-function: ease; -} - -.p-iftalabel .p-focus .p-placeholder, -.p-iftalabel input:focus::placeholder, -.p-iftalabel .p-inputtext:focus::placeholder { - opacity: 1; - transition-property: all; - transition-timing-function: ease; -}*/ `; const classes = { From ebe389b60df0e77fe9d46679be01450c70d690c2 Mon Sep 17 00:00:00 2001 From: tugcekucukoglu Date: Mon, 21 Oct 2024 13:38:27 +0300 Subject: [PATCH 6/8] CascadeSelect RTL --- .../cascadeselect/style/CascadeSelectStyle.js | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/primevue/src/cascadeselect/style/CascadeSelectStyle.js b/packages/primevue/src/cascadeselect/style/CascadeSelectStyle.js index 575a815e9..c44018a0f 100644 --- 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 { From 2f6bd6c9cf72a67f1ab89455cc724e4054f9fe51 Mon Sep 17 00:00:00 2001 From: tugcekucukoglu Date: Mon, 21 Oct 2024 13:38:32 +0300 Subject: [PATCH 7/8] Checkbox RTL --- packages/primevue/src/checkbox/style/CheckboxStyle.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/primevue/src/checkbox/style/CheckboxStyle.js b/packages/primevue/src/checkbox/style/CheckboxStyle.js index 6f4cdb148..9aa793762 100644 --- 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; From 9e908bae6a78f43695467d391aa2466e29d7f95a Mon Sep 17 00:00:00 2001 From: tugcekucukoglu Date: Mon, 21 Oct 2024 13:38:39 +0300 Subject: [PATCH 8/8] ColorPicker RTL --- .../src/colorpicker/style/ColorPickerStyle.js | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/primevue/src/colorpicker/style/ColorPickerStyle.js b/packages/primevue/src/colorpicker/style/ColorPickerStyle.js index b386564ca..dc72b76a4 100644 --- a/packages/primevue/src/colorpicker/style/ColorPickerStyle.js +++ b/packages/primevue/src/colorpicker/style/ColorPickerStyle.js @@ -54,8 +54,8 @@ const theme = ({ dt }) => ` .p-colorpicker-color-selector { width: 150px; height: 150px; - top: 8px; - left: 8px; + inset-block-start: 8px; + inset-inline-start: 8px; position: absolute; } @@ -67,8 +67,8 @@ const theme = ({ dt }) => ` .p-colorpicker-color-handle { position: absolute; - top: 0px; - left: 150px; + inset-block-start: 0px; + inset-inline-start: 150px; border-radius: 100%; width: 10px; height: 10px; @@ -83,8 +83,8 @@ const theme = ({ dt }) => ` .p-colorpicker-hue { width: 17px; height: 150px; - top: 8px; - left: 167px; + inset-block-start: 8px; + inset-inline-start: 167px; position: absolute; opacity: 0.85; background: linear-gradient(0deg, @@ -99,11 +99,11 @@ const theme = ({ dt }) => ` .p-colorpicker-hue-handle { position: absolute; - top: 150px; - left: 0px; + inset-block-start: 150px; + inset-inline-start: 0px; width: 21px; - margin-left: -2px; - margin-top: -5px; + margin-inline-start: -2px; + margin-block-start: -5px; height: 10px; border-width: 2px; border-style: solid;