vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Merge pull request #6634 from primefaces/v.4.2.0 

RTL initial
pull/6637/head
Tuğçe Küçükoğlu 2024-10-24 11:32:55 +03:00 committed by GitHub
parent a4bc174f4a 9e908bae6a
commit d69406b520
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 95 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
apps/showcase/assets/styles/layout/_sidebar.scss
View File

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

2
apps/showcase/assets/styles/layout/_topbar.scss
View File

@ -107,7 +107,7 @@
.config-panel { .config-panel {
position: absolute; position: absolute;
top: calc(100% + 2px); top: calc(100% + 2px);
right: 0; inset-inline-end: 0;
width: 18rem; width: 18rem;
padding: .75rem; padding: .75rem;
background-color: var(--overlay-background); background-color: var(--overlay-background);

28
apps/showcase/layouts/AppConfigurator.vue
View File

@ -33,9 +33,19 @@
<span class="config-panel-label">Presets</span> <span class="config-panel-label">Presets</span>
<SelectButton v-model="$appState.preset" @update:modelValue="onPresetChange" :options="presetOptions" optionLabel="label" optionValue="value" :allowEmpty="false" /> <SelectButton v-model="$appState.preset" @update:modelValue="onPresetChange" :options="presetOptions" optionLabel="label" optionValue="value" :allowEmpty="false" />
</div> </div>
<div class="config-panel-settings"> <div class="flex">
<span class="config-panel-label">Ripple</span> <div class="flex-1">
<ToggleSwitch :modelValue="rippleActive" @update:modelValue="onRippleChange" /> <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> </div>
</div> </div>
@ -98,7 +108,8 @@ export default {
name: 'ocean', 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' } 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: { methods: {
@ -303,6 +314,15 @@ export default {
} }
$t().preset(preset).preset(this.getPresetExt()).surfacePalette(surfacePalette).use({ useDefaultOptions: true }); $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: { computed: {

27
packages/primevue/src/autocomplete/style/AutoCompleteStyle.js
View File

@ -10,11 +10,11 @@ const theme = ({ dt }) => `
position: absolute; position: absolute;
top: 50%; top: 50%;
margin-top: -0.5rem; 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 { .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 { .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,
.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input-multiple { .p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input-multiple {
border-top-right-radius: 0; border-start-end-radius: 0;
border-bottom-right-radius: 0; border-end-end-radius: 0;
} }
.p-autocomplete-dropdown { .p-autocomplete-dropdown {
cursor: pointer; cursor: pointer;
display: inline-flex; display: inline-flex;
cursor: pointer;
user-select: none; user-select: none;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
width: ${dt('autocomplete.dropdown.width')}; width: ${dt('autocomplete.dropdown.width')};
border-top-right-radius: ${dt('autocomplete.dropdown.border.radius')}; border-start-end-radius: ${dt('autocomplete.dropdown.border.radius')};
border-bottom-right-radius: ${dt('autocomplete.dropdown.border.radius')}; border-end-end-radius: ${dt('autocomplete.dropdown.border.radius')};
background: ${dt('autocomplete.dropdown.background')}; background: ${dt('autocomplete.dropdown.background')};
border: 1px solid ${dt('autocomplete.dropdown.border.color')}; border: 1px solid ${dt('autocomplete.dropdown.border.color')};
border-left: 0 none; border-inline-start: 0 none;
color: ${dt('autocomplete.dropdown.color')}; 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( 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' 'autocomplete.transition.duration'
@ -190,14 +189,14 @@ const theme = ({ dt }) => `
} }
.p-autocomplete-chip.p-chip { .p-autocomplete-chip.p-chip {
padding-top: calc(${dt('autocomplete.padding.y')} / 2); padding-block-start: calc(${dt('autocomplete.padding.y')} / 2);
padding-bottom: calc(${dt('autocomplete.padding.y')} / 2); padding-block-end: calc(${dt('autocomplete.padding.y')} / 2);
border-radius: ${dt('autocomplete.chip.border.radius')}; border-radius: ${dt('autocomplete.chip.border.radius')};
} }
.p-autocomplete-input-multiple:has(.p-autocomplete-chip) { .p-autocomplete-input-multiple:has(.p-autocomplete-chip) {
padding-left: calc(${dt('autocomplete.padding.y')} / 2); padding-inline-start: calc(${dt('autocomplete.padding.y')} / 2);
padding-right: calc(${dt('autocomplete.padding.y')} / 2); padding-inline-end: calc(${dt('autocomplete.padding.y')} / 2);
} }
.p-autocomplete-chip-item.p-focus .p-autocomplete-chip { .p-autocomplete-chip-item.p-focus .p-autocomplete-chip {
@ -208,8 +207,8 @@ const theme = ({ dt }) => `
.p-autocomplete-input-chip { .p-autocomplete-input-chip {
flex: 1 1 auto; flex: 1 1 auto;
display: inline-flex; display: inline-flex;
padding-top: calc(${dt('autocomplete.padding.y')} / 2); padding-block-start: calc(${dt('autocomplete.padding.y')} / 2);
padding-bottom: calc(${dt('autocomplete.padding.y')} / 2); padding-block-end: calc(${dt('autocomplete.padding.y')} / 2);
} }
.p-autocomplete-input-chip input { .p-autocomplete-input-chip input {

22
packages/primevue/src/cascadeselect/style/CascadeSelectStyle.js
View File

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

4
packages/primevue/src/checkbox/style/CheckboxStyle.js
View File

@ -14,8 +14,8 @@ const theme = ({ dt }) => `
cursor: pointer; cursor: pointer;
appearance: none; appearance: none;
position: absolute; position: absolute;
top: 0; inset-block-start: 0;
left: 0; inset-inline-start: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 0; padding: 0;

20
packages/primevue/src/colorpicker/style/ColorPickerStyle.js
View File

@ -54,8 +54,8 @@ const theme = ({ dt }) => `
.p-colorpicker-color-selector { .p-colorpicker-color-selector {
width: 150px; width: 150px;
height: 150px; height: 150px;
top: 8px; inset-block-start: 8px;
left: 8px; inset-inline-start: 8px;
position: absolute; position: absolute;
} }
@ -67,8 +67,8 @@ const theme = ({ dt }) => `
.p-colorpicker-color-handle { .p-colorpicker-color-handle {
position: absolute; position: absolute;
top: 0px; inset-block-start: 0px;
left: 150px; inset-inline-start: 150px;
border-radius: 100%; border-radius: 100%;
width: 10px; width: 10px;
height: 10px; height: 10px;
@ -83,8 +83,8 @@ const theme = ({ dt }) => `
.p-colorpicker-hue { .p-colorpicker-hue {
width: 17px; width: 17px;
height: 150px; height: 150px;
top: 8px; inset-block-start: 8px;
left: 167px; inset-inline-start: 167px;
position: absolute; position: absolute;
opacity: 0.85; opacity: 0.85;
background: linear-gradient(0deg, background: linear-gradient(0deg,
@ -99,11 +99,11 @@ const theme = ({ dt }) => `
.p-colorpicker-hue-handle { .p-colorpicker-hue-handle {
position: absolute; position: absolute;
top: 150px; inset-block-start: 150px;
left: 0px; inset-inline-start: 0px;
width: 21px; width: 21px;
margin-left: -2px; margin-inline-start: -2px;
margin-top: -5px; margin-block-start: -5px;
height: 10px; height: 10px;
border-width: 2px; border-width: 2px;
border-style: solid; border-style: solid;

28
packages/primevue/src/floatlabel/style/FloatLabelStyle.js
View File

@ -15,7 +15,7 @@ const theme = ({ dt }) => `
transition-timing-function: ease; transition-timing-function: ease;
line-height: 1; line-height: 1;
font-weight: ${dt('floatlabel.font.weight')}; font-weight: ${dt('floatlabel.font.weight')};
left: ${dt('floatlabel.position.x')}; inset-inline-start: ${dt('floatlabel.position.x')};
color: ${dt('floatlabel.color')}; color: ${dt('floatlabel.color')};
transition-duration: ${dt('floatlabel.transition.duration')}; transition-duration: ${dt('floatlabel.transition.duration')};
} }
@ -26,7 +26,7 @@ const theme = ({ dt }) => `
} }
.p-floatlabel:has(.p-inputicon:first-child) label { .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 { .p-floatlabel:has(.p-invalid) label {
@ -54,27 +54,11 @@ const theme = ({ dt }) => `
.p-floatlabel:has(input:focus) label, .p-floatlabel:has(input:focus) label,
.p-floatlabel:has(input:-webkit-autofill) label, .p-floatlabel:has(input:-webkit-autofill) label,
.p-floatlabel:has(textarea:focus) label , .p-floatlabel:has(textarea:focus) label,
.p-floatlabel:has(.p-inputwrapper-focus) label { .p-floatlabel:has(.p-inputwrapper-focus) label {
color: ${dt('floatlabel.focus.color')}; 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-inputtext,
.p-floatlabel-in .p-textarea, .p-floatlabel-in .p-textarea,
.p-floatlabel-in .p-select-label, .p-floatlabel-in .p-select-label,
@ -82,8 +66,8 @@ const theme = ({ dt }) => `
.p-floatlabel-in .p-autocomplete-input-multiple, .p-floatlabel-in .p-autocomplete-input-multiple,
.p-floatlabel-in .p-cascadeselect-label, .p-floatlabel-in .p-cascadeselect-label,
.p-floatlabel-in .p-treeselect-label { .p-floatlabel-in .p-treeselect-label {
padding-top: ${dt('floatlabel.in.input.padding.top')}; padding-block-start: ${dt('floatlabel.in.input.padding.top')};
padding-bottom: ${dt('floatlabel.in.input.padding.bottom')}; padding-block-end: ${dt('floatlabel.in.input.padding.bottom')};
} }
.p-floatlabel-in:has(input:focus) label, .p-floatlabel-in:has(input:focus) label,

28
packages/primevue/src/iftalabel/style/IftaLabelStyle.js
View File

@ -15,7 +15,7 @@ const theme = ({ dt }) => `
line-height: 1; line-height: 1;
font-size: ${dt('iftalabel.font.size')}; font-size: ${dt('iftalabel.font.size')};
font-weight: ${dt('iftalabel.font.weight')}; font-weight: ${dt('iftalabel.font.weight')};
left: ${dt('iftalabel.position.x')}; inset-inline-start: ${dt('iftalabel.position.x')};
color: ${dt('iftalabel.color')}; color: ${dt('iftalabel.color')};
transition-duration: ${dt('iftalabel.transition.duration')}; transition-duration: ${dt('iftalabel.transition.duration')};
} }
@ -27,18 +27,18 @@ const theme = ({ dt }) => `
.p-iftalabel .p-autocomplete-input-multiple, .p-iftalabel .p-autocomplete-input-multiple,
.p-iftalabel .p-cascadeselect-label, .p-iftalabel .p-cascadeselect-label,
.p-iftalabel .p-treeselect-label { .p-iftalabel .p-treeselect-label {
padding-top: ${dt('iftalabel.input.padding.top')}; padding-block-start: ${dt('iftalabel.input.padding.top')};
padding-bottom: ${dt('iftalabel.input.padding.bottom')}; padding-block-end: ${dt('iftalabel.input.padding.bottom')};
} }
.p-iftalabel:has(.p-invalid) label { .p-iftalabel:has(.p-invalid) label {
color: ${dt('iftalabel.invalid.color')}; 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(input:-webkit-autofill) label,
.p-iftalabel:has(textarea:focus) label , .p-iftalabel:has(textarea:focus) label,
.p-iftalabel:has(.p-inputwrapper-focus) label { .p-iftalabel:has(.p-inputwrapper-focus) label {
color: ${dt('iftalabel.focus.color')}; color: ${dt('iftalabel.focus.color')};
} }
@ -47,22 +47,6 @@ const theme = ({ dt }) => `
transform: translateY(25%); transform: translateY(25%);
margin-top: 0; 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 = { const classes = {