2023-02-28 08:29:30 +00:00
|
|
|
<template>
|
|
|
|
|
<DocSectionText v-bind="$attrs">
|
|
|
|
|
<p>A sample macOS implementation using various components.</p>
|
|
|
|
|
</DocSectionText>
|
|
|
|
|
<div class="card dock-demo">
|
|
|
|
|
<Toast position="top-center" group="tc" />
|
|
|
|
|
<Menubar :model="menubarItems">
|
|
|
|
|
<template #start>
|
|
|
|
|
<i class="pi pi-apple px-3"></i>
|
|
|
|
|
</template>
|
|
|
|
|
<template #end>
|
|
|
|
|
<i class="pi pi-video px-3" />
|
|
|
|
|
<i class="pi pi-wifi px-3" />
|
|
|
|
|
<i class="pi pi-volume-up px-3" />
|
|
|
|
|
<span class="px-3">Fri 13:07</span>
|
|
|
|
|
<i class="pi pi-search px-3" />
|
|
|
|
|
<i class="pi pi-bars px-3" />
|
|
|
|
|
</template>
|
|
|
|
|
</Menubar>
|
|
|
|
|
|
|
|
|
|
<div class="dock-window dock-advanced">
|
|
|
|
|
<Dock :model="items">
|
|
|
|
|
<template #item="{ item }">
|
|
|
|
|
<a v-tooltip.top="item.label" href="#" class="p-dock-link" @click="onDockItemClick($event, item)">
|
|
|
|
|
<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'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: 'Archieve',
|
|
|
|
|
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-08-16 13:58:31 +00:00
|
|
|
basic: `<Dock :model="items">
|
2023-02-28 08:29:30 +00:00
|
|
|
<template #item="{ item }">
|
|
|
|
|
<a v-tooltip.top="item.label" href="#" class="p-dock-link" @click="onDockItemClick($event, item)">
|
|
|
|
|
<img :alt="item.label" :src="item.icon" style="width: 100%" />
|
|
|
|
|
</a>
|
|
|
|
|
</template>
|
|
|
|
|
</Dock>`,
|
2023-08-16 13:58:31 +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-3"></i>
|
|
|
|
|
</template>
|
|
|
|
|
<template #end>
|
|
|
|
|
<i class="pi pi-video px-3" />
|
|
|
|
|
<i class="pi pi-wifi px-3" />
|
|
|
|
|
<i class="pi pi-volume-up px-3" />
|
|
|
|
|
<span class="px-3">Fri 13:07</span>
|
|
|
|
|
<i class="pi pi-search px-3" />
|
|
|
|
|
<i class="pi pi-bars px-3" />
|
|
|
|
|
</template>
|
|
|
|
|
</Menubar>
|
|
|
|
|
|
|
|
|
|
<div class="dock-window dock-advanced">
|
|
|
|
|
<Dock :model="items">
|
|
|
|
|
<template #item="{ item }">
|
|
|
|
|
<a v-tooltip.top="item.label" href="#" class="p-dock-link" @click="onDockItemClick($event, item)">
|
|
|
|
|
<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>
|
|
|
|
|
</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'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: 'Archieve',
|
|
|
|
|
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;
|
|
|
|
|
z-index: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dock-demo > .p-dock {
|
|
|
|
|
z-index: 1000;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dock-demo .p-menubar {
|
|
|
|
|
padding: 0;
|
|
|
|
|
border-radius: 0;
|
|
|
|
|
}
|
|
|
|
|
</style>`,
|
2023-08-16 13:58:31 +00:00
|
|
|
composition: `<template>
|
2023-02-28 08:29:30 +00:00
|
|
|
<div>
|
|
|
|
|
<div class="card dock-demo">
|
|
|
|
|
<Toast position="top-center" group="tc" />
|
|
|
|
|
|
|
|
|
|
<div class="dock-window dock-advanced">
|
|
|
|
|
<Dock :model="items">
|
|
|
|
|
<template #item="{ item }">
|
|
|
|
|
<a href="#" class="p-dock-link" v-tooltip.top="item.label" @click="onDockItemClick($event, item)">
|
|
|
|
|
<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>
|
|
|
|
|
</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'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: 'Archieve',
|
|
|
|
|
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;
|
|
|
|
|
z-index: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dock-demo > .p-dock {
|
|
|
|
|
z-index: 1000;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dock-demo .p-menubar {
|
|
|
|
|
padding: 0;
|
|
|
|
|
border-radius: 0;
|
|
|
|
|
}
|
|
|
|
|
</style>`
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
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;
|
|
|
|
|
z-index: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dock-demo > .p-dock {
|
|
|
|
|
z-index: 1000;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.dock-demo .p-menubar {
|
|
|
|
|
padding: 0;
|
|
|
|
|
border-radius: 0;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
