Refactored Rating

pull/5677/head
Cagatay Civici 2024-04-07 13:55:28 +03:00
parent 21d8aae910
commit 69325de4e8
2 changed files with 8 additions and 8 deletions

View File

@ -16,14 +16,14 @@ const classes = {
], ],
cancelIcon: 'p-rating-icon p-rating-cancel', cancelIcon: 'p-rating-icon p-rating-cancel',
item: ({ instance, props, value }) => [ item: ({ instance, props, value }) => [
'p-rating-item', 'p-rating-option',
{ {
'p-rating-item-active': value <= props.modelValue, 'p-rating-option-active': value <= props.modelValue,
'p-focus-visible': value === instance.focusedOptionIndex && instance.isFocusVisibleItem 'p-focus-visible': value === instance.focusedOptionIndex && instance.isFocusVisibleItem
} }
], ],
onIcon: 'p-rating-icon', onIcon: 'p-rating-icon p-rating-on-icon',
offIcon: 'p-rating-icon' offIcon: 'p-rating-icon p-rating-off-icon'
}; };
export default BaseStyle.extend({ export default BaseStyle.extend({

View File

@ -7,7 +7,7 @@ export default {
gap: 0.25rem; gap: 0.25rem;
} }
.p-rating-item { .p-rating-option {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
@ -16,7 +16,7 @@ export default {
cursor: pointer; cursor: pointer;
} }
.p-rating-item.p-focus-visible { .p-rating-option.p-focus-visible {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')}; outline-offset: ${dt('focus.ring.offset')};
} }
@ -29,11 +29,11 @@ export default {
height: 1rem; height: 1rem;
} }
.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon { .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-option:hover .p-rating-icon {
color: ${dt('rating.icon.hover.color')}; color: ${dt('rating.icon.hover.color')};
} }
.p-rating-item-active .p-rating-icon { .p-rating-option-active .p-rating-icon {
color: ${dt('rating.icon.active.color')}; color: ${dt('rating.icon.active.color')};
} }
` `