Refactor #5437 - For Dock

This commit is contained in:
tugcekucukoglu 2024-03-18 15:17:22 +03:00
parent d5c372e928
commit 6ef3c4697a
3 changed files with 3 additions and 55 deletions

View file

@ -19,7 +19,7 @@
<template v-for="(processedItem, index) of model" :key="index"> <template v-for="(processedItem, index) of model" :key="index">
<li <li
:id="getItemId(index)" :id="getItemId(index)"
:class="cx('menuitem', { processedItem, index, id: getItemId(index) })" :class="cx('menuitem', { processedItem, id: getItemId(index) })"
role="menuitem" role="menuitem"
:aria-label="processedItem.label" :aria-label="processedItem.label"
:aria-disabled="disabled(processedItem)" :aria-disabled="disabled(processedItem)"

View file

@ -10,16 +10,11 @@ const classes = {
], ],
container: 'p-dock-list-container', container: 'p-dock-list-container',
menu: 'p-dock-list', menu: 'p-dock-list',
menuitem: ({ instance, processedItem, index, id }) => [ menuitem: ({ instance, processedItem, id }) => [
'p-dock-item', 'p-dock-item',
{ {
'p-focus': instance.isItemActive(id), 'p-focus': instance.isItemActive(id),
'p-disabled': instance.disabled(processedItem), 'p-disabled': instance.disabled(processedItem)
'p-dock-item-second-prev': instance.currentIndex - 2 === index,
'p-dock-item-prev': instance.currentIndex - 1 === index,
'p-dock-item-current': instance.currentIndex === index,
'p-dock-item-next': instance.currentIndex + 1 === index,
'p-dock-item-second-next': instance.currentIndex + 2 === index
} }
], ],
content: 'p-menuitem-content', content: 'p-menuitem-content',

View file

@ -52,21 +52,6 @@ p-dock-item.p-focus {
height: 3rem; height: 3rem;
} }
.p-dock-item-second-prev,
.p-dock-item-second-next {
transform: scale(1.2);
}
.p-dock-item-prev,
.p-dock-item-next {
transform: scale(1.4);
}
.p-dock-item-current {
transform: scale(1.6);
z-index: 1;
}
.p-dock-top { .p-dock-top {
left: 0; left: 0;
top: 0; top: 0;
@ -115,38 +100,6 @@ p-dock-item.p-focus {
flex-direction: column; flex-direction: column;
} }
.p-dock-top .p-dock-item-second-prev,
.p-dock-top .p-dock-item-second-next,
.p-dock-bottom .p-dock-item-second-prev,
.p-dock-bottom .p-dock-item-second-next {
margin: 0 0.9rem;
}
.p-dock-top .p-dock-item-prev,
.p-dock-top .p-dock-item-next,
.p-dock-bottom .p-dock-item-prev,
.p-dock-bottom .p-dock-item-next {
margin: 0 1.3rem;
}
.p-dock-top .p-dock-item-current,
.p-dock-bottom .p-dock-item-current {
margin: 0 1.5rem;
}
.p-dock-left .p-dock-item-second-prev,
.p-dock-left .p-dock-item-second-next,
.p-dock-right .p-dock-item-second-prev,
.p-dock-right .p-dock-item-second-next {
margin: 0.9rem 0;
}
.p-dock-left .p-dock-item-prev,
.p-dock-left .p-dock-item-next,
.p-dock-right .p-dock-item-prev,
.p-dock-right .p-dock-item-next {
margin: 1.3rem 0;
}
.p-dock-left .p-dock-item-current,
.p-dock-right .p-dock-item-current {
margin: 1.5rem 0;
}
.p-dock-mobile.p-dock-top .p-dock-list-container, .p-dock-mobile.p-dock-top .p-dock-list-container,
.p-dock-mobile.p-dock-bottom .p-dock-list-container { .p-dock-mobile.p-dock-bottom .p-dock-list-container {
overflow-x: auto; overflow-x: auto;