Refactor #5437 - For Dock

pull/5507/head
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">
<li
:id="getItemId(index)"
:class="cx('menuitem', { processedItem, index, id: getItemId(index) })"
:class="cx('menuitem', { processedItem, id: getItemId(index) })"
role="menuitem"
:aria-label="processedItem.label"
:aria-disabled="disabled(processedItem)"

View File

@ -10,16 +10,11 @@ const classes = {
],
container: 'p-dock-list-container',
menu: 'p-dock-list',
menuitem: ({ instance, processedItem, index, id }) => [
menuitem: ({ instance, processedItem, id }) => [
'p-dock-item',
{
'p-focus': instance.isItemActive(id),
'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
'p-disabled': instance.disabled(processedItem)
}
],
content: 'p-menuitem-content',

View File

@ -52,21 +52,6 @@ p-dock-item.p-focus {
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 {
left: 0;
top: 0;
@ -115,38 +100,6 @@ p-dock-item.p-focus {
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-bottom .p-dock-list-container {
overflow-x: auto;