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

Refactored Dropdown styles

pull/5677/head
Cagatay Civici 2024-04-07 12:39:33 +03:00
parent e8720345fe
commit 12e98446f6
2 changed files with 57 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
components/lib/dropdown/style/DropdownStyle.js
View File

@ -2,55 +2,54 @@ import BaseStyle from 'primevue/base/style';
const classes = { const classes = {
root: ({ instance, props, state }) => [ root: ({ instance, props, state }) => [
'p-dropdown p-component p-inputwrapper', 'p-select p-component p-inputwrapper',
{ {
'p-disabled': props.disabled, 'p-disabled': props.disabled,
'p-invalid': props.invalid, 'p-invalid': props.invalid,
'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled', 'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled',
'p-dropdown-clearable': props.showClear,
'p-focus': state.focused, 'p-focus': state.focused,
'p-inputwrapper-filled': instance.hasSelectedOption, 'p-inputwrapper-filled': instance.hasSelectedOption,
'p-inputwrapper-focus': state.focused || state.overlayVisible, 'p-inputwrapper-focus': state.focused || state.overlayVisible,
'p-overlay-open': state.overlayVisible 'p-select-open': state.overlayVisible
} }
], ],
input: ({ instance, props }) => [ input: ({ instance, props }) => [
'p-dropdown-label', 'p-select-label',
{ {
'p-placeholder': !props.editable && instance.label === props.placeholder, 'p-placeholder': !props.editable && instance.label === props.placeholder,
'p-dropdown-label-empty': !props.editable && !instance.$slots['value'] && (instance.label === 'p-emptylabel' || instance.label.length === 0) 'p-select-label-empty': !props.editable && !instance.$slots['value'] && (instance.label === 'p-emptylabel' || instance.label.length === 0)
} }
], ],
clearIcon: 'p-dropdown-clear-icon', clearIcon: 'p-select-clear-icon',
trigger: 'p-dropdown-trigger', trigger: 'p-select-dropdown',
loadingicon: 'p-dropdown-trigger-icon', loadingicon: 'p-select-loading-icon',
dropdownIcon: 'p-dropdown-trigger-icon', dropdownIcon: 'p-select-dropdown-icon',
panel: ({ instance }) => [ panel: ({ instance }) => [
'p-dropdown-panel p-component', 'p-select-overlay p-component',
{ {
'p-ripple-disabled': instance.$primevue.config.ripple === false 'p-ripple-disabled': instance.$primevue.config.ripple === false
} }
], ],
header: 'p-dropdown-header', header: 'p-select-header',
filterContainer: 'p-dropdown-filter-container', filterContainer: 'p-select-filter-container',
filterInput: 'p-dropdown-filter', filterInput: 'p-select-filter',
filterIcon: 'p-dropdown-filter-icon', filterIcon: 'p-select-filter-icon',
wrapper: 'p-dropdown-items-wrapper', wrapper: 'p-select-list-container',
list: 'p-dropdown-items', list: 'p-select-list',
itemGroup: 'p-dropdown-item-group', itemGroup: 'p-select-option-group',
itemGroupLabel: 'p-dropdown-item-group-label', itemGroupLabel: 'p-select-option-group-label',
item: ({ instance, props, state, option, focusedOption }) => [ item: ({ instance, props, state, option, focusedOption }) => [
'p-dropdown-item', 'p-select-option',
{ {
'p-highlight': instance.isSelected(option) && props.highlightOnSelect, 'p-select-option-selected': instance.isSelected(option) && props.highlightOnSelect,
'p-focus': state.focusedOptionIndex === focusedOption, 'p-focus': state.focusedOptionIndex === focusedOption,
'p-disabled': instance.isOptionDisabled(option) 'p-disabled': instance.isOptionDisabled(option)
} }
], ],
itemLabel: 'p-dropdown-item-label', itemLabel: 'p-select-option-label',
checkIcon: 'p-dropdown-check-icon', checkIcon: 'p-select-option-check-icon',
blankIcon: 'p-dropdown-blank-icon', blankIcon: 'p-select-option-blank-icon',
emptyMessage: 'p-dropdown-empty-message' emptyMessage: 'p-select-empty-message'
}; };
export default BaseStyle.extend({ export default BaseStyle.extend({

69
components/lib/themes/primeone/base/dropdown/index.js
View File

@ -1,6 +1,6 @@
export default { export default {
css: ({ dt }) => ` css: ({ dt }) => `
.p-dropdown { .p-select {
display: inline-flex; display: inline-flex;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
@ -13,33 +13,33 @@ export default {
box-shadow: ${dt('dropdown.box.shadow')}; box-shadow: ${dt('dropdown.box.shadow')};
} }
.p-dropdown:not(.p-disabled):hover { .p-select:not(.p-disabled):hover {
border-color: ${dt('dropdown.hover.border.color')}; border-color: ${dt('dropdown.hover.border.color')};
} }
.p-dropdown:not(.p-disabled).p-focus { .p-select:not(.p-disabled).p-focus {
border-color:${dt('dropdown.focus.border.color')}; border-color:${dt('dropdown.focus.border.color')};
outline: 0 none; outline: 0 none;
} }
.p-dropdown.p-variant-filled { .p-select.p-variant-filled {
background: ${dt('dropdown.filled.background')}; background: ${dt('dropdown.filled.background')};
} }
.p-dropdown.p-variant-filled.p-focus { .p-select.p-variant-filled.p-focus {
background: ${dt('dropdown.filled.focus.background')}; background: ${dt('dropdown.filled.focus.background')};
} }
.p-dropdown.p-invalid { .p-select.p-invalid {
border-color: ${dt('dropdown.invalid.border.color')}; border-color: ${dt('dropdown.invalid.border.color')};
} }
.p-dropdown.p-disabled { .p-select.p-disabled {
opacity: 1; opacity: 1;
background: ${dt('dropdown.disabled.background')}; background: ${dt('dropdown.disabled.background')};
} }
.p-dropdown-clear-icon { .p-select-clear-icon {
position: absolute; position: absolute;
top: 50%; top: 50%;
margin-top: -0.5rem; margin-top: -0.5rem;
@ -47,7 +47,7 @@ export default {
right: 2.5rem; right: 2.5rem;
} }
.p-dropdown-trigger { .p-select-dropdown {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -59,7 +59,7 @@ export default {
border-bottom-right-radius: ${dt('rounded.base')}; border-bottom-right-radius: ${dt('rounded.base')};
} }
.p-dropdown-label { .p-select-label {
display: block; display: block;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
@ -74,32 +74,32 @@ export default {
outline: 0 none; outline: 0 none;
} }
.p-dropdown-label.p-placeholder { .p-select-label.p-placeholder {
color: ${dt('dropdown.placeholder.color')}; color: ${dt('dropdown.placeholder.color')};
} }
.p-dropdown-clearable .p-dropdown-label { .p-select:has(.p-select-clear-icon) .p-select-label {
padding-right: 1.75rem; padding-right: 1.75rem;
} }
.p-dropdown.p-disabled .p-dropdown-label { .p-select.p-disabled .p-select-label {
color: ${dt('dropdown.disabled.color')}; color: ${dt('dropdown.disabled.color')};
} }
.p-dropdown-label-empty { .p-select-label-empty {
overflow: hidden; overflow: hidden;
opacity: 0; opacity: 0;
} }
input.p-dropdown-label { input.p-select-label {
cursor: default; cursor: default;
} }
.p-dropdown .p-dropdown-panel { .p-select .p-select-overlay {
min-width: 100%; min-width: 100%;
} }
.p-dropdown-panel { .p-select-overlay {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -110,22 +110,21 @@ input.p-dropdown-label {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
} }
.p-select-header {
.p-dropdown-panel .p-dropdown-header {
padding: 0.5rem 0.5rem 0 0.5rem; padding: 0.5rem 0.5rem 0 0.5rem;
} }
.p-dropdown-filter { .p-select-filter {
width: 100%; width: 100%;
padding-right: 1.75rem; padding-right: 1.75rem;
margin-right: -1.75rem; margin-right: -1.75rem;
} }
.p-dropdown-filter-container { .p-select-filter-container {
position: relative; position: relative;
} }
.p-dropdown-filter-icon { .p-select-filter-icon {
position: absolute; position: absolute;
top: 50%; top: 50%;
margin-top: -0.5rem; margin-top: -0.5rem;
@ -133,11 +132,11 @@ input.p-dropdown-label {
color: ${dt('dropdown.filter.icon.color')}; color: ${dt('dropdown.filter.icon.color')};
} }
.p-dropdown-items-wrapper { .p-select-list-container {
overflow: auto; overflow: auto;
} }
.p-dropdown-item-group { .p-select-option-group {
cursor: auto; cursor: auto;
margin: 0; margin: 0;
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
@ -146,14 +145,14 @@ input.p-dropdown-label {
font-weight: 600; font-weight: 600;
} }
.p-dropdown-items { .p-select-list {
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style-type: none; list-style-type: none;
padding: 0.25rem 0.25rem; padding: 0.25rem 0.25rem;
} }
.p-dropdown-item { .p-select-option {
cursor: pointer; cursor: pointer;
font-weight: normal; font-weight: normal;
white-space: nowrap; white-space: nowrap;
@ -170,46 +169,46 @@ input.p-dropdown-label {
border-radius: ${dt('rounded.sm')}; border-radius: ${dt('rounded.sm')};
} }
.p-dropdown-item:first-child { .p-select-option:first-child {
margin-top: 0; margin-top: 0;
} }
.p-dropdown-item:last-child { .p-select-option:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
.p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus { .p-select-option:not(.p-select-option-selected):not(.p-disabled).p-focus {
background: ${dt('dropdown.item.focus.background')}; background: ${dt('dropdown.item.focus.background')};
color: ${dt('dropdown.item.focus.color')}; color: ${dt('dropdown.item.focus.color')};
} }
.p-dropdown-item.p-highlight { .p-select-option.p-select-option-selected {
background: ${dt('dropdown.item.selected.background')}; background: ${dt('dropdown.item.selected.background')};
color: ${dt('dropdown.item.selected.color')}; color: ${dt('dropdown.item.selected.color')};
} }
.p-dropdown-item.p-highlight.p-focus { .p-select-option.p-select-option-selected.p-focus {
background: ${dt('dropdown.item.selected.focus.background')}; background: ${dt('dropdown.item.selected.focus.background')};
color: ${dt('dropdown.item.selected.focus.color')}; color: ${dt('dropdown.item.selected.focus.color')};
} }
.p-dropdown-check-icon { .p-select-option-check-icon {
position: relative; position: relative;
margin-left: -0.375rem; margin-left: -0.375rem;
margin-right: 0.375rem; margin-right: 0.375rem;
color: ${dt('dropdown.checkmark.color')}; color: ${dt('dropdown.checkmark.color')};
} }
.p-dropdown-empty-message { .p-select-empty-message {
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
background: transparent; background: transparent;
} }
.p-fluid .p-dropdown { .p-fluid .p-select {
display: flex; display: flex;
} }
.p-fluid .p-dropdown .p-dropdown-label { .p-fluid .p-select .p-select-label {
width: 1%; width: 1%;
} }
` `