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

Fixed #1398 - Make Dock component mobile friendly

pull/1533/head
mertsincan 2021-08-27 12:35:57 +03:00
parent 648e6cf4a2
commit 94a4218556
2 changed files with 28 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/dock/Dock.vue
View File

@ -68,6 +68,11 @@ export default {
pointer-events: none;
}
.p-dock-list-container {
display: flex;
pointer-events: auto;
}
.p-dock-list {
margin: 0;
padding: 0;
@ -75,7 +80,6 @@ export default {
display: flex;
align-items: center;
justify-content: center;
pointer-events: auto;
}
.p-dock-item {
@ -160,4 +164,4 @@ export default {
.p-dock-left .p-dock-list {
flex-direction: column;
}
</style>
</style>

42
src/components/dock/DockSub.vue
View File

@ -1,27 +1,29 @@
<template>
<ul ref="list" class="p-dock-list" role="menu" @mouseleave="onListMouseLeave">
<li v-for="(item, index) of model" :class="itemClass(index)" :key="index" role="none" @mouseenter="onItemMouseEnter(index)">
<template v-if="!template">
<router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{href}">
<a :href="href" role="menuitem" :class="['p-dock-action', { 'p-disabled': disabled(item) }]" :target="item.target"
:data-pr-tooltip="item.label" @click="onItemClick(e, item)">
<div class="p-dock-list-container">
<ul ref="list" class="p-dock-list" role="menu" @mouseleave="onListMouseLeave">
<li v-for="(item, index) of model" :class="itemClass(index)" :key="index" role="none" @mouseenter="onItemMouseEnter(index)">
<template v-if="!template">
<router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{href}">
<a :href="href" role="menuitem" :class="['p-dock-action', { 'p-disabled': disabled(item) }]" :target="item.target"
:data-pr-tooltip="item.label" @click="onItemClick(e, item)">
<template v-if="typeof item.icon === 'string'">
<span :class="['p-dock-action-icon', item.icon]" v-ripple></span>
</template>
<component v-else :is="item.icon"></component>
</a>
</router-link>
<a v-else :href="item.url || '#'" role="menuitem" :class="['p-dock-action', { 'p-disabled': disabled(item) }]" :target="item.target"
:data-pr-tooltip="item.label" @click="onItemClick($event, item)">
<template v-if="typeof item.icon === 'string'">
<span :class="['p-dock-action-icon', item.icon]" v-ripple></span>
</template>
<component v-else :is="item.icon"></component>
</a>
</router-link>
<a v-else :href="item.url || '#'" role="menuitem" :class="['p-dock-action', { 'p-disabled': disabled(item) }]" :target="item.target"
:data-pr-tooltip="item.label" @click="onItemClick($event, item)">
<template v-if="typeof item.icon === 'string'">
<span :class="['p-dock-action-icon', item.icon]" v-ripple></span>
</template>
<component v-else :is="item.icon"></component>
</a>
</template>
<component v-else :is="template" :item="item"></component>
</li>
</ul>
</template>
<component v-else :is="template" :item="item"></component>
</li>
</ul>
</div>
</template>
<script>
@ -31,7 +33,7 @@ export default {
model: {
type: Array,
default: null
},
},
template: {
type: Function,
default: null
@ -70,4 +72,4 @@ export default {
}
}
}
</script>
</script>