primevue-mirror/apps/showcase/doc/dock/AdvancedDoc.vue

929 lines
31 KiB
Vue
Raw Normal View History

2023-02-28 08:29:30 +00:00
<template>
<DocSectionText v-bind="$attrs">
2023-11-04 10:04:07 +00:00
<p>A sample desktop demo using various components.</p>
2023-02-28 08:29:30 +00:00
</DocSectionText>
<div class="card dock-demo">
<Toast position="top-center" group="tc" />
<Menubar :model="menubarItems">
<template #start>
<i class="pi pi-apple px-2"></i>
2023-02-28 08:29:30 +00:00
</template>
<template #end>
<i class="pi pi-video px-2" />
<i class="pi pi-wifi px-2" />
<i class="pi pi-volume-up px-2" />
<span class="px-2">Fri 13:07</span>
<i class="pi pi-search px-2" />
<i class="pi pi-bars px-2" />
2023-02-28 08:29:30 +00:00
</template>
</Menubar>
<div class="dock-window dock-advanced">
<Dock :model="items">
<template #item="{ item }">
2024-04-09 13:26:23 +00:00
<a v-tooltip.top="item.label" href="#" class="p-dock-item-link" @click="onDockItemClick($event, item)">
2023-02-28 08:29:30 +00:00
<img :alt="item.label" :src="item.icon" style="width: 100%" />
</a>
</template>
</Dock>
<Dialog v-model:visible="displayTerminal" header="Terminal" :breakpoints="{ '960px': '50vw' }" :style="{ width: '40vw' }" :maximizable="true">
<Terminal welcomeMessage="Welcome to PrimeVue(cmd: 'date', 'greet {0}', 'random' and 'clear')" prompt="primevue $" />
</Dialog>
<Dialog v-model:visible="displayFinder" header="Finder" :breakpoints="{ '960px': '50vw' }" :style="{ width: '40vw' }" :maximizable="true">
<Tree :value="nodes" />
</Dialog>
<Galleria v-model:visible="displayPhotos" :value="images" :responsiveOptions="responsiveOptions" :numVisible="2" containerStyle="width: 400px" :circular="true" :fullScreen="true" :showThumbnails="false" :showItemNavigators="true">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
</template>
</Galleria>
</div>
</div>
<DocSectionCode :code="code" :service="['PhotoService', 'NodeService']" />
</template>
<script>
import { NodeService } from '@/service/NodeService';
import { PhotoService } from '@/service/PhotoService';
import TerminalService from 'primevue/terminalservice';
export default {
data() {
return {
displayFinder: false,
displayTerminal: false,
displayPhotos: false,
images: null,
nodes: null,
items: [
{
label: 'Finder',
2023-03-20 07:52:29 +00:00
icon: 'https://primefaces.org/cdn/primevue/images/dock/finder.svg',
2023-02-28 08:29:30 +00:00
command: () => {
this.displayFinder = true;
}
},
{
label: 'Terminal',
2023-03-20 07:52:29 +00:00
icon: 'https://primefaces.org/cdn/primevue/images/dock/terminal.svg',
2023-02-28 08:29:30 +00:00
command: () => {
this.displayTerminal = true;
}
},
{
label: 'App Store',
2023-03-20 07:52:29 +00:00
icon: 'https://primefaces.org/cdn/primevue/images/dock/appstore.svg',
2023-02-28 08:29:30 +00:00
command: () => {
this.$toast.add({ severity: 'error', summary: 'An unexpected error occurred while signing in.', detail: 'UNTRUSTED_CERT_TITLE', group: 'tc', life: 3000 });
}
},
{
label: 'Safari',
2023-03-20 07:52:29 +00:00
icon: 'https://primefaces.org/cdn/primevue/images/dock/safari.svg',
2023-02-28 08:29:30 +00:00
command: () => {
this.$toast.add({ severity: 'warn', summary: 'Safari has stopped working', group: 'tc', life: 3000 });
}
},
{
label: 'Photos',
2023-03-20 07:52:29 +00:00
icon: 'https://primefaces.org/cdn/primevue/images/dock/photos.svg',
2023-02-28 08:29:30 +00:00
command: () => {
this.displayPhotos = true;
}
},
{
label: 'GitHub',
2023-03-20 07:52:29 +00:00
icon: 'https://primefaces.org/cdn/primevue/images/dock/github.svg'
2023-02-28 08:29:30 +00:00
},
{
label: 'Trash',
2023-03-20 07:52:29 +00:00
icon: 'https://primefaces.org/cdn/primevue/images/dock/trash.png',
2023-02-28 08:29:30 +00:00
command: () => {
this.$toast.add({ severity: 'info', summary: 'Empty Trash', life: 3000 });
}
}
],
menubarItems: [
{
label: 'Finder',
class: 'menubar-root'
},
{
label: 'File',
items: [
{
label: 'New',
icon: 'pi pi-fw pi-plus',
items: [
{
label: 'Bookmark',
icon: 'pi pi-fw pi-bookmark'
},
{
label: 'Video',
icon: 'pi pi-fw pi-video'
}
]
},
{
label: 'Delete',
icon: 'pi pi-fw pi-trash'
},
{
separator: true
},
{
label: 'Export',
icon: 'pi pi-fw pi-external-link'
}
]
},
{
label: 'Edit',
items: [
{
label: 'Left',
icon: 'pi pi-fw pi-align-left'
},
{
label: 'Right',
icon: 'pi pi-fw pi-align-right'
},
{
label: 'Center',
icon: 'pi pi-fw pi-align-center'
},
{
label: 'Justify',
icon: 'pi pi-fw pi-align-justify'
}
]
},
{
label: 'Users',
items: [
{
label: 'New',
icon: 'pi pi-fw pi-user-plus'
},
{
label: 'Delete',
icon: 'pi pi-fw pi-user-minus'
},
{
label: 'Search',
icon: 'pi pi-fw pi-users',
items: [
{
label: 'Filter',
icon: 'pi pi-fw pi-filter',
items: [
{
label: 'Print',
icon: 'pi pi-fw pi-print'
}
]
},
{
icon: 'pi pi-fw pi-bars',
label: 'List'
}
]
}
]
},
{
label: 'Events',
items: [
{
label: 'Edit',
icon: 'pi pi-fw pi-pencil',
items: [
{
label: 'Save',
icon: 'pi pi-fw pi-calendar-plus'
},
{
label: 'Delete',
icon: 'pi pi-fw pi-calendar-minus'
}
]
},
{
2023-10-30 10:43:15 +00:00
label: 'Archive',
2023-02-28 08:29:30 +00:00
icon: 'pi pi-fw pi-calendar-times',
items: [
{
label: 'Remove',
icon: 'pi pi-fw pi-calendar-minus'
}
]
}
]
},
{
label: 'Quit'
}
],
responsiveOptions: [
{
breakpoint: '1024px',
numVisible: 3
},
{
breakpoint: '768px',
numVisible: 2
},
{
breakpoint: '560px',
numVisible: 1
}
],
code: {
2023-09-22 12:54:14 +00:00
basic: `
<Dock :model="items">
2023-02-28 08:29:30 +00:00
<template #item="{ item }">
2024-04-09 13:26:23 +00:00
<a v-tooltip.top="item.label" href="#" class="p-dock-item-link" @click="onDockItemClick($event, item)">
2023-02-28 08:29:30 +00:00
<img :alt="item.label" :src="item.icon" style="width: 100%" />
</a>
</template>
2023-10-15 09:38:39 +00:00
</Dock>
`,
2023-09-22 12:54:14 +00:00
options: `
<template>
2023-02-28 08:29:30 +00:00
<div class="card dock-demo">
<Toast position="top-center" group="tc" />
<Menubar :model="menubarItems">
<template #start>
<i class="pi pi-apple px-2"></i>
2023-02-28 08:29:30 +00:00
</template>
<template #end>
<i class="pi pi-video px-2" />
<i class="pi pi-wifi px-2" />
<i class="pi pi-volume-up px-2" />
<span class="px-2">Fri 13:07</span>
<i class="pi pi-search px-2" />
<i class="pi pi-bars px-2" />
2023-02-28 08:29:30 +00:00
</template>
</Menubar>
2023-10-30 10:43:15 +00:00
2023-02-28 08:29:30 +00:00
<div class="dock-window dock-advanced">
<Dock :model="items">
<template #item="{ item }">
2024-04-09 13:26:23 +00:00
<a v-tooltip.top="item.label" href="#" class="p-dock-item-link" @click="onDockItemClick($event, item)">
2023-02-28 08:29:30 +00:00
<img :alt="item.label" :src="item.icon" style="width: 100%" />
</a>
</template>
</Dock>
2023-10-30 10:43:15 +00:00
2023-02-28 08:29:30 +00:00
<Dialog v-model:visible="displayTerminal" header="Terminal" :breakpoints="{ '960px': '50vw' }" :style="{ width: '40vw' }" :maximizable="true">
<Terminal welcomeMessage="Welcome to PrimeVue(cmd: 'date', 'greet {0}', 'random' and 'clear')" prompt="primevue $" />
</Dialog>
2023-10-30 10:43:15 +00:00
2023-02-28 08:29:30 +00:00
<Dialog v-model:visible="displayFinder" header="Finder" :breakpoints="{ '960px': '50vw' }" :style="{ width: '40vw' }" :maximizable="true">
<Tree :value="nodes" />
</Dialog>
2023-10-30 10:43:15 +00:00
2023-02-28 08:29:30 +00:00
<Galleria v-model:visible="displayPhotos" :value="images" :responsiveOptions="responsiveOptions" :numVisible="2" containerStyle="width: 400px" :circular="true" :fullScreen="true" :showThumbnails="false" :showItemNavigators="true">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
</template>
</Galleria>
</div>
</div>
</template>
<script>
import TerminalService from 'primevue/terminalservice';
import { NodeService } from '@/service/NodeService';
import { PhotoService } from '@/service/PhotoService';
export default {
data() {
return {
displayFinder: false,
displayTerminal: false,
displayPhotos: false,
images: null,
nodes: null,
items: [
{
label: 'Finder',
icon: 'https://primefaces.org/cdn/primevue/images/dock/finder.svg',
command: () => {
this.displayFinder = true;
}
},
{
label: 'Terminal',
icon: 'https://primefaces.org/cdn/primevue/images/dock/terminal.svg',
command: () => {
this.displayTerminal = true;
}
},
{
label: 'App Store',
icon: 'https://primefaces.org/cdn/primevue/images/dock/appstore.svg',
command: () => {
this.$toast.add({ severity: 'error', summary: 'An unexpected error occurred while signing in.', detail: 'UNTRUSTED_CERT_TITLE', group: 'tc', life: 3000 });
}
},
{
label: 'Safari',
icon: 'https://primefaces.org/cdn/primevue/images/dock/safari.svg',
command: () => {
this.$toast.add({ severity: 'warn', summary: 'Safari has stopped working', group: 'tc', life: 3000 });
}
},
{
label: 'Photos',
icon: 'https://primefaces.org/cdn/primevue/images/dock/photos.svg',
command: () => {
this.displayPhotos = true;
}
},
{
label: 'GitHub',
icon: 'https://primefaces.org/cdn/primevue/images/dock/github.svg'
},
{
label: 'Trash',
icon: 'https://primefaces.org/cdn/primevue/images/dock/trash.png',
command: () => {
this.$toast.add({ severity: 'info', summary: 'Empty Trash', life: 3000 });
}
}
],
menubarItems: [
{
label: 'Finder',
class: 'menubar-root'
},
{
label: 'File',
items: [
{
label: 'New',
icon: 'pi pi-fw pi-plus',
items: [
{
label: 'Bookmark',
icon: 'pi pi-fw pi-bookmark'
},
{
label: 'Video',
icon: 'pi pi-fw pi-video'
}
]
},
{
label: 'Delete',
icon: 'pi pi-fw pi-trash'
},
{
separator: true
},
{
label: 'Export',
icon: 'pi pi-fw pi-external-link'
}
]
},
{
label: 'Edit',
items: [
{
label: 'Left',
icon: 'pi pi-fw pi-align-left'
},
{
label: 'Right',
icon: 'pi pi-fw pi-align-right'
},
{
label: 'Center',
icon: 'pi pi-fw pi-align-center'
},
{
label: 'Justify',
icon: 'pi pi-fw pi-align-justify'
}
]
},
{
label: 'Users',
items: [
{
label: 'New',
icon: 'pi pi-fw pi-user-plus'
},
{
label: 'Delete',
icon: 'pi pi-fw pi-user-minus'
},
{
label: 'Search',
icon: 'pi pi-fw pi-users',
items: [
{
label: 'Filter',
icon: 'pi pi-fw pi-filter',
items: [
{
label: 'Print',
icon: 'pi pi-fw pi-print'
}
]
},
{
icon: 'pi pi-fw pi-bars',
label: 'List'
}
]
}
]
},
{
label: 'Events',
items: [
{
label: 'Edit',
icon: 'pi pi-fw pi-pencil',
items: [
{
label: 'Save',
icon: 'pi pi-fw pi-calendar-plus'
},
{
label: 'Delete',
icon: 'pi pi-fw pi-calendar-minus'
}
]
},
{
2023-10-30 10:43:15 +00:00
label: 'Archive',
2023-02-28 08:29:30 +00:00
icon: 'pi pi-fw pi-calendar-times',
items: [
{
label: 'Remove',
icon: 'pi pi-fw pi-calendar-minus'
}
]
}
]
},
{
label: 'Quit'
}
],
responsiveOptions: [
{
breakpoint: '1024px',
numVisible: 3
},
{
breakpoint: '768px',
numVisible: 2
},
{
breakpoint: '560px',
numVisible: 1
}
]
};
},
mounted() {
PhotoService.getImages().then((data) => (this.images = data));
NodeService.getTreeNodes().then((data) => (this.nodes = data));
TerminalService.on('command', this.commandHandler);
},
beforeUnmount() {
TerminalService.off('command', this.commandHandler);
},
methods: {
onDockItemClick(event, item) {
if (item.command) {
item.command();
}
event.preventDefault();
},
commandHandler(text) {
let response;
let argsIndex = text.indexOf(' ');
let command = argsIndex !== -1 ? text.substring(0, argsIndex) : text;
switch (command) {
case 'date':
response = 'Today is ' + new Date().toDateString();
break;
case 'greet':
response = 'Hola ' + text.substring(argsIndex + 1);
break;
case 'random':
response = Math.floor(Math.random() * 100);
break;
default:
response = 'Unknown command: ' + command;
}
TerminalService.emit('response', response);
}
}
};
<\/script>
<style scoped>
.dock-demo > .dock-window {
width: 100%;
height: 450px;
position: relative;
background-image: url("https://primefaces.org/cdn/primevue/images/dock/window.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.dock-demo .p-menubar {
padding: 0;
border-radius: 0;
}
2023-10-15 09:38:39 +00:00
</style>
`,
2023-09-22 12:54:14 +00:00
composition: `
<template>
2023-02-28 08:29:30 +00:00
<div>
<div class="card dock-demo">
<Toast position="top-center" group="tc" />
2023-10-30 10:43:15 +00:00
2023-10-10 16:59:27 +00:00
<Menubar :model="menubarItems">
<template #start>
<i class="pi pi-apple px-2"></i>
</template>
<template #end>
<i class="pi pi-video px-2" />
<i class="pi pi-wifi px-2" />
<i class="pi pi-volume-up px-2" />
<span class="px-2">Fri 13:07</span>
<i class="pi pi-search px-2" />
<i class="pi pi-bars px-2" />
</template>
</Menubar>
2023-02-28 08:29:30 +00:00
<div class="dock-window dock-advanced">
<Dock :model="items">
<template #item="{ item }">
2024-04-09 13:26:23 +00:00
<a v-tooltip.top="item.label" href="#" class="p-dock-item-link" @click="onDockItemClick($event, item)">
2023-02-28 08:29:30 +00:00
<img :alt="item.label" :src="item.icon" style="width: 100%" />
</a>
</template>
</Dock>
<Dialog v-model:visible="displayTerminal" header="Terminal" :breakpoints="{ '960px': '50vw' }" :style="{ width: '40vw' }" :maximizable="true">
<Terminal welcomeMessage="Welcome to PrimeVue(cmd: 'date', 'greet {0}', 'random' and 'clear')" prompt="primevue $" />
</Dialog>
<Dialog v-model:visible="displayFinder" header="Finder" :breakpoints="{ '960px': '50vw' }" :style="{ width: '40vw' }" :maximizable="true">
<Tree :value="nodes" />
</Dialog>
2023-10-10 16:59:27 +00:00
<Galleria v-model:visible="displayPhotos" :value="images" :responsiveOptions="responsiveOptions" :numVisible="2" containerStyle="width: 400px" :circular="true" :fullScreen="true" :showThumbnails="false" :showItemNavigators="true">
2023-02-28 08:29:30 +00:00
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
</template>
</Galleria>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { useToast } from 'primevue/usetoast';
import TerminalService from 'primevue/terminalservice';
import { NodeService } from '@/service/NodeService';
import { PhotoService } from '@/service/PhotoService';
onMounted(() => {
PhotoService.getImages().then(data => images.value = data);
NodeService.getTreeNodes().then(data => nodes.value = data);
TerminalService.on('command', commandHandler);
})
onBeforeUnmount(() => {
TerminalService.off('command', commandHandler);
})
const displayFinder = ref(false);
const displayTerminal = ref(false);
const displayPhotos = ref(false);
const images = ref();
const nodes = ref();
const toast = useToast();
const items = ref([
{
label: 'Finder',
icon: "https://primefaces.org/cdn/primevue//images/dock/finder.svg",
command: () => {
displayFinder.value = true;
}
},
{
label: 'Terminal',
icon: "https://primefaces.org/cdn/primevue//images/dock/terminal.svg",
command: () => {
displayTerminal.value = true;
}
},
{
label: 'App Store',
icon: "https://primefaces.org/cdn/primevue//images/dock/appstore.svg",
command: () => {
toast.add({ severity: 'error', summary: 'An unexpected error occurred while signing in.', detail: 'UNTRUSTED_CERT_TITLE', group: 'tc', life: 3000 });
}
},
{
label: 'Safari',
icon: "https://primefaces.org/cdn/primevue//images/dock/safari.svg",
command: () => {
toast.add({ severity: 'warn', summary: 'Safari has stopped working', group: 'tc', life: 3000 });
}
},
{
label: 'Photos',
icon: "https://primefaces.org/cdn/primevue//images/dock/photos.svg",
command: () => {
displayPhotos.value = true;
}
},
{
label: 'GitHub',
icon: "https://primefaces.org/cdn/primevue//images/dock/github.svg",
},
{
label: 'Trash',
icon: "https://primefaces.org/cdn/primevue//images/dock/trash.png",
command: () => {
toast.add({ severity: 'info', summary: 'Empty Trash', life: 3000 });
}
}
]);
const menubarItems = ref([
{
label: 'Finder',
class: 'menubar-root'
},
{
label: 'File',
items: [
{
label: 'New',
icon: 'pi pi-fw pi-plus',
items: [
{
label: 'Bookmark',
icon: 'pi pi-fw pi-bookmark'
},
{
label: 'Video',
icon: 'pi pi-fw pi-video'
},
]
},
{
label: 'Delete',
icon: 'pi pi-fw pi-trash'
},
{
separator: true
},
{
label: 'Export',
icon: 'pi pi-fw pi-external-link'
}
]
},
{
label: 'Edit',
items: [
{
label: 'Left',
icon: 'pi pi-fw pi-align-left'
},
{
label: 'Right',
icon: 'pi pi-fw pi-align-right'
},
{
label: 'Center',
icon: 'pi pi-fw pi-align-center'
},
{
label: 'Justify',
icon: 'pi pi-fw pi-align-justify'
},
]
},
{
label: 'Users',
items: [
{
label: 'New',
icon: 'pi pi-fw pi-user-plus',
},
{
label: 'Delete',
icon: 'pi pi-fw pi-user-minus',
},
{
label: 'Search',
icon: 'pi pi-fw pi-users',
items: [
{
label: 'Filter',
icon: 'pi pi-fw pi-filter',
items: [
{
label: 'Print',
icon: 'pi pi-fw pi-print'
}
]
},
{
icon: 'pi pi-fw pi-bars',
label: 'List'
}
]
}
]
},
{
label: 'Events',
items: [
{
label: 'Edit',
icon: 'pi pi-fw pi-pencil',
items: [
{
label: 'Save',
icon: 'pi pi-fw pi-calendar-plus'
},
{
label: 'Delete',
icon: 'pi pi-fw pi-calendar-minus'
}
]
},
{
2023-10-30 10:43:15 +00:00
label: 'Archive',
2023-02-28 08:29:30 +00:00
icon: 'pi pi-fw pi-calendar-times',
items: [
{
label: 'Remove',
icon: 'pi pi-fw pi-calendar-minus'
}
]
}
]
},
{
label: 'Quit'
}
]);
const responsiveOptions = ref([
{
breakpoint: '1024px',
numVisible: 3
},
{
breakpoint: '768px',
numVisible: 2
},
{
breakpoint: '560px',
numVisible: 1
}
]);
const onDockItemClick = (event, item) => {
if (item.command) {
item.command();
}
event.preventDefault();
};
const commandHandler = (text) => {
let response;
let argsIndex = text.indexOf(' ');
let command = argsIndex !== -1 ? text.substring(0, argsIndex) : text;
switch(command) {
case "date":
response = 'Today is ' + new Date().toDateString();
break;
case "greet":
response = 'Hola ' + text.substring(argsIndex + 1);
break;
case "random":
response = Math.floor(Math.random() * 100);
break;
default:
response = "Unknown command: " + command;
}
TerminalService.emit('response', response);
};
<\/script>
<style scoped>
.dock-demo > .dock-window {
width: 100%;
height: 450px;
position: relative;
background-image: url("https://primefaces.org/cdn/primevue/images/dock/window.jpg");
background-repeat: no-repeat;
background-size: cover;
2023-10-30 10:43:15 +00:00
2023-02-28 08:29:30 +00:00
}
.dock-demo .p-menubar {
padding: 0;
border-radius: 0;
}
2023-11-01 14:36:59 +00:00
</style>
`
2023-02-28 08:29:30 +00:00
}
};
},
mounted() {
PhotoService.getImages().then((data) => (this.images = data));
NodeService.getTreeNodes().then((data) => (this.nodes = data));
TerminalService.on('command', this.commandHandler);
},
beforeUnmount() {
TerminalService.off('command', this.commandHandler);
},
methods: {
onDockItemClick(event, item) {
if (item.command) {
item.command();
}
event.preventDefault();
},
commandHandler(text) {
let response;
let argsIndex = text.indexOf(' ');
let command = argsIndex !== -1 ? text.substring(0, argsIndex) : text;
switch (command) {
case 'date':
response = 'Today is ' + new Date().toDateString();
break;
case 'greet':
response = 'Hola ' + text.substring(argsIndex + 1);
break;
case 'random':
response = Math.floor(Math.random() * 100);
break;
default:
response = 'Unknown command: ' + command;
}
TerminalService.emit('response', response);
}
}
};
</script>
<style scoped>
.dock-demo > .dock-window {
width: 100%;
height: 450px;
position: relative;
background-image: url('https://primefaces.org/cdn/primevue/images/dock/window.jpg');
background-repeat: no-repeat;
background-size: cover;
}
.dock-demo .p-menubar {
padding: 0;
border-radius: 0;
}
</style>