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

Fixed #1658 - Menu Model icon defect for Dock

pull/1664/head
Tuğçe Küçükoğlu 2021-10-12 12:19:52 +03:00
parent ac47a239a7
commit 21d3ee6fdf
6 changed files with 141 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
api-generator/components/dock.js
View File

@ -41,6 +41,10 @@ const DockSlots = [
{ {
name: "item", name: "item",
description: "Custom content for the item." description: "Custom content for the item."
},
{
name: "icon",
description: "Custom content for the item."
} }
]; ];

1
src/components/dock/Dock.d.ts vendored
View File

@ -13,6 +13,7 @@ declare class Dock {
$props: DockProps; $props: DockProps;
$slots: { $slots: {
'item': VNode[]; 'item': VNode[];
'icon': VNode[];
} }
} }

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

@ -1,6 +1,6 @@
<template> <template>
<div :class="containerClass" :style="style"> <div :class="containerClass" :style="style">
<DockSub :model="model" :template="$slots.item" :exact="exact" :tooltipOptions="tooltipOptions"></DockSub> <DockSub :model="model" :templates="$slots" :exact="exact" :tooltipOptions="tooltipOptions"></DockSub>
</div> </div>
</template> </template>

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

@ -2,25 +2,25 @@
<div class="p-dock-list-container"> <div class="p-dock-list-container">
<ul ref="list" class="p-dock-list" role="menu" @mouseleave="onListMouseLeave"> <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)"> <li v-for="(item, index) of model" :class="itemClass(index)" :key="index" role="none" @mouseenter="onItemMouseEnter(index)">
<template v-if="!template"> <template v-if="!templates['item']">
<router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{navigate, href, isActive, isExactActive}"> <router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{navigate, href, isActive, isExactActive}">
<a :href="href" role="menuitem" :class="linkClass(item, {isActive, isExactActive})" :target="item.target" <a :href="href" role="menuitem" :class="linkClass(item, {isActive, isExactActive})" :target="item.target"
v-tooltip:[tooltipOptions]="{value: item.label, disabled: !tooltipOptions}" @click="onItemClick($event, item, navigate)"> v-tooltip:[tooltipOptions]="{value: item.label, disabled: !tooltipOptions}" @click="onItemClick($event, item, navigate)">
<template v-if="typeof item.icon === 'string'"> <template v-if="!templates['icon']">
<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="templates['icon']" :item="item"></component>
</a> </a>
</router-link> </router-link>
<a v-else :href="item.url" role="menuitem" :class="linkClass(item)" :target="item.target" <a v-else :href="item.url" role="menuitem" :class="linkClass(item)" :target="item.target"
v-tooltip:[tooltipOptions]="{value: item.label, disabled: !tooltipOptions}" @click="onItemClick($event, item)" :tabindex="disabled(item) ? null : '0'"> v-tooltip:[tooltipOptions]="{value: item.label, disabled: !tooltipOptions}" @click="onItemClick($event, item)" :tabindex="disabled(item) ? null : '0'">
<template v-if="typeof item.icon === 'string'"> <template v-if="!templates['icon']">
<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="templates['icon']" :item="item"></component>
</a> </a>
</template> </template>
<component v-else :is="template" :item="item"></component> <component v-else :is="templates['item']" :item="item"></component>
</li> </li>
</ul> </ul>
</div> </div>
@ -36,8 +36,8 @@ export default {
type: Array, type: Array,
default: null default: null
}, },
template: { templates: {
type: Function, type: null,
default: null default: null
}, },
exact: { exact: {

40
src/views/dock/DockDemo.vue
View File

@ -13,10 +13,26 @@
<h5>Basic</h5> <h5>Basic</h5>
<div class="dock-window"> <div class="dock-window">
<Dock :model="dockBasicItems" position="bottom"/> <Dock :model="dockBasicItems" position="bottom">
<Dock :model="dockBasicItems" position="top"/> <template #icon="{ item }">
<Dock :model="dockBasicItems" position="left"/> <img :alt="item.label" :src="item.icon" style="width: 100%" />
<Dock :model="dockBasicItems" position="right"/> </template>
</Dock>
<Dock :model="dockBasicItems" position="top">
<template #icon="{ item }">
<img :alt="item.label" :src="item.icon" style="width: 100%" />
</template>
</Dock>
<Dock :model="dockBasicItems" position="left">
<template #icon="{ item }">
<img :alt="item.label" :src="item.icon" style="width: 100%" />
</template>
</Dock>
<Dock :model="dockBasicItems" position="right">
<template #icon="{ item }">
<img :alt="item.label" :src="item.icon" style="width: 100%" />
</template>
</Dock>
</div> </div>
<h5>Advanced</h5> <h5>Advanced</h5>
@ -129,20 +145,20 @@ export default {
], ],
dockBasicItems: [ dockBasicItems: [
{ {
label: 'Finder', label: "Finder",
icon: () => <img alt="Finder" src="demo/images/dock/finder.svg" style="width: 100%" /> icon: "demo/images/dock/finder.svg"
}, },
{ {
label: 'App Store', label: "App Store",
icon: () => <img alt="App Store" src="demo/images/dock/appstore.svg" style="width: 100%" /> icon: "demo/images/dock/appstore.svg"
}, },
{ {
label: 'Photos', label: "Photos",
icon: () => <img alt="Photos" src="demo/images/dock/photos.svg" style="width: 100%" /> icon: "demo/images/dock/photos.svg"
}, },
{ {
label: 'Trash', label: "Trash",
icon: () => <img alt="trash" src="demo/images/dock/trash.png" style="width: 100%" /> icon: "demo/images/dock/trash.png"
} }
], ],
menubarItems: [ menubarItems: [

143
src/views/dock/DockDoc.vue
View File

@ -20,20 +20,20 @@ import Dock from 'primevue/dock';
return { return {
items: [ items: [
{ {
label: 'Finder', label: "Finder",
icon: () => &lt;img alt="Finder" src="demo/images/dock/finder.svg" style="width: 100%" /&gt; icon: "demo/images/dock/finder.svg"
}, },
{ {
label: 'App Store', label: "App Store",
icon: () => &lt;img alt="App Store" src="demo/images/dock/appstore.svg" style="width: 100%" /&gt; icon: "demo/images/dock/appstore.svg"
}, },
{ {
label: 'Photos', label: "Photos",
icon: () => &lt;img alt="Photos" src="demo/images/dock/photos.svg" style="width: 100%" /&gt; icon: "demo/images/dock/photos.svg"
}, },
{ {
label: 'Trash', label: "Trash",
icon: () => &lt;img alt="trash" src="demo/images/dock/trash.png" style="width: 100%" /&gt; icon: "demo/images/dock/trash.png"
} }
] ]
} }
@ -140,6 +140,10 @@ import Dock from 'primevue/dock';
<td>item</td> <td>item</td>
<td>item: Custom content for item</td> <td>item: Custom content for item</td>
</tr> </tr>
<tr>
<td>icon</td>
<td>item: Custom content for icon</td>
</tr>
</tbody> </tbody>
</table> </table>
</div> </div>
@ -166,10 +170,26 @@ export default {
<h5>Basic</h5> <h5>Basic</h5>
<div class="dock-window"> <div class="dock-window">
<Dock :model="dockBasicItems" position="bottom"/> <Dock :model="dockBasicItems" position="bottom">
<Dock :model="dockBasicItems" position="top"/> <template #icon="{ item }">
<Dock :model="dockBasicItems" position="left"/> <img :alt="item.label" :src="item.icon" style="width: 100%" />
<Dock :model="dockBasicItems" position="right"/> </template>
</Dock>
<Dock :model="dockBasicItems" position="top">
<template #icon="{ item }">
<img :alt="item.label" :src="item.icon" style="width: 100%" />
</template>
</Dock>
<Dock :model="dockBasicItems" position="left">
<template #icon="{ item }">
<img :alt="item.label" :src="item.icon" style="width: 100%" />
</template>
</Dock>
<Dock :model="dockBasicItems" position="right">
<template #icon="{ item }">
<img :alt="item.label" :src="item.icon" style="width: 100%" />
</template>
</Dock>
</div> </div>
<h5>Advanced</h5> <h5>Advanced</h5>
@ -279,20 +299,20 @@ export default {
], ],
dockBasicItems: [ dockBasicItems: [
{ {
label: 'Finder', label: "Finder",
icon: () => <img alt="Finder" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 100%" /> icon: "demo/images/dock/finder.svg"
}, },
{ {
label: 'App Store', label: "App Store",
icon: () => <img alt="App Store" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 100%" /> icon: "demo/images/dock/appstore.svg"
}, },
{ {
label: 'Photos', label: "Photos",
icon: () => <img alt="Photos" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 100%" /> icon: "demo/images/dock/photos.svg"
}, },
{ {
label: 'Trash', label: "Trash",
icon: () => <img alt="trash" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 100%" /> icon: "demo/images/dock/trash.png"
} }
], ],
menubarItems: [ menubarItems: [
@ -496,6 +516,7 @@ export default {
background-image: url("https://www.primefaces.org/wp-content/uploads/2021/02/primevue-blog.jpg"); background-image: url("https://www.primefaces.org/wp-content/uploads/2021/02/primevue-blog.jpg");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
background-position: center;
z-index: 1; z-index: 1;
} }
@ -550,10 +571,26 @@ export default {
<h5>Basic</h5> <h5>Basic</h5>
<div class="dock-window"> <div class="dock-window">
<Dock :model="dockBasicItems" position="bottom"/> <Dock :model="dockBasicItems" position="bottom">
<Dock :model="dockBasicItems" position="top"/> <template #icon="{ item }">
<Dock :model="dockBasicItems" position="left"/> <img :alt="item.label" :src="item.icon" style="width: 100%" />
<Dock :model="dockBasicItems" position="right"/> </template>
</Dock>
<Dock :model="dockBasicItems" position="top">
<template #icon="{ item }">
<img :alt="item.label" :src="item.icon" style="width: 100%" />
</template>
</Dock>
<Dock :model="dockBasicItems" position="left">
<template #icon="{ item }">
<img :alt="item.label" :src="item.icon" style="width: 100%" />
</template>
</Dock>
<Dock :model="dockBasicItems" position="right">
<template #icon="{ item }">
<img :alt="item.label" :src="item.icon" style="width: 100%" />
</template>
</Dock>
</div> </div>
<h5>Advanced</h5> <h5>Advanced</h5>
@ -678,20 +715,20 @@ export default {
]); ]);
const dockBasicItems = ref([ const dockBasicItems = ref([
{ {
label: 'Finder', label: "Finder",
icon: () => <img alt="Finder" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 100%" /> icon: "demo/images/dock/finder.svg"
}, },
{ {
label: 'App Store', label: "App Store",
icon: () => <img alt="App Store" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 100%" /> icon: "demo/images/dock/appstore.svg"
}, },
{ {
label: 'Photos', label: "Photos",
icon: () => <img alt="Photos" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 100%" /> icon: "demo/images/dock/photos.svg"
}, },
{ {
label: 'Trash', label: "Trash",
icon: () => <img alt="trash" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 100%" /> icon: "demo/images/dock/trash.png"
} }
]); ]);
const menubarItems = ref([ const menubarItems = ref([
@ -915,6 +952,7 @@ export default {
background-image: url("https://www.primefaces.org/wp-content/uploads/2021/02/primevue-blog.jpg"); background-image: url("https://www.primefaces.org/wp-content/uploads/2021/02/primevue-blog.jpg");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
background-position: center;
z-index: 1; z-index: 1;
} }
@ -976,10 +1014,26 @@ export default {
<h5>Basic</h5> <h5>Basic</h5>
<div class="dock-window"> <div class="dock-window">
<p-dock :model="dockBasicItems" position="bottom"></p-dock> <p-dock :model="dockBasicItems" position="bottom">
<p-dock :model="dockBasicItems" position="top"></p-dock> <template #icon="{ item }">
<p-dock :model="dockBasicItems" position="left"></p-dock> <img :alt="item.label" :src="item.icon" style="width: 100%" />
<p-dock :model="dockBasicItems" position="right"></p-dock> </template>
</p-dock>
<p-dock :model="dockBasicItems" position="top">
<template #icon="{ item }">
<img :alt="item.label" :src="item.icon" style="width: 100%" />
</template>
</p-dock>
<p-dock :model="dockBasicItems" position="left">
<template #icon="{ item }">
<img :alt="item.label" :src="item.icon" style="width: 100%" />
</template>
</p-dock>
<p-dock :model="dockBasicItems" position="right">
<template #icon="{ item }">
<img :alt="item.label" :src="item.icon" style="width: 100%" />
</template>
</p-dock>
</div> </div>
<h5>Advanced</h5> <h5>Advanced</h5>
@ -1101,20 +1155,20 @@ export default {
]); ]);
const dockBasicItems = ref([ const dockBasicItems = ref([
{ {
label: 'Finder', label: "Finder",
icon: () => <img alt="Finder" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 100%" /> icon: "demo/images/dock/finder.svg"
}, },
{ {
label: 'App Store', label: "App Store",
icon: () => <img alt="App Store" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 100%" /> icon: "demo/images/dock/appstore.svg"
}, },
{ {
label: 'Photos', label: "Photos",
icon: () => <img alt="Photos" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 100%" /> icon: "demo/images/dock/photos.svg"
}, },
{ {
label: 'Trash', label: "Trash",
icon: () => <img alt="trash" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 100%" /> icon: "demo/images/dock/trash.png"
} }
]); ]);
const menubarItems = ref([ const menubarItems = ref([
@ -1360,6 +1414,7 @@ export default {
background-image: url("https://www.primefaces.org/wp-content/uploads/2021/02/primevue-blog.jpg"); background-image: url("https://www.primefaces.org/wp-content/uploads/2021/02/primevue-blog.jpg");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
background-position: center;
z-index: 1; z-index: 1;
} }