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",
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;
$slots: {
'item': VNode[];
'icon': VNode[];
}
}

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

@ -1,6 +1,6 @@
<template>
<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>
</template>

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

@ -2,25 +2,25 @@
<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">
<template v-if="!templates['item']">
<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"
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>
</template>
<component v-else :is="item.icon"></component>
<component v-else :is="templates['icon']" :item="item"></component>
</a>
</router-link>
<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'">
<template v-if="typeof item.icon === 'string'">
<template v-if="!templates['icon']">
<span :class="['p-dock-action-icon', item.icon]" v-ripple></span>
</template>
<component v-else :is="item.icon"></component>
<component v-else :is="templates['icon']" :item="item"></component>
</a>
</template>
<component v-else :is="template" :item="item"></component>
<component v-else :is="templates['item']" :item="item"></component>
</li>
</ul>
</div>
@ -36,8 +36,8 @@ export default {
type: Array,
default: null
},
template: {
type: Function,
templates: {
type: null,
default: null
},
exact: {

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

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

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

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