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

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

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