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;
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;

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

@ -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 @@
}
}
}
}
}

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

@ -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: {

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

@ -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 {

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

@ -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 {

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

@ -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;

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

@ -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;

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

@ -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,

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

@ -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 = {