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

Public image path changes

pull/3420/head
Bahadir Sofuoglu 2022-09-10 17:36:01 +03:00
parent d0887e3005
commit c0c95e226d
61 changed files with 321 additions and 321 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
layouts/AppConfigurator.vue
View File

@ -29,25 +29,25 @@
<div class="grid free-themes"> <div class="grid free-themes">
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'bootstrap4-light-blue')"> <button class="p-link" type="button" @click="changeTheme($event, 'bootstrap4-light-blue')">
<img src="demo/images/themes/bootstrap4-light-blue.svg" alt="Bootstrap Light Blue" /> <img src="/demo/images/themes/bootstrap4-light-blue.svg" alt="Bootstrap Light Blue" />
</button> </button>
<span>Blue</span> <span>Blue</span>
</div> </div>
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'bootstrap4-light-purple')"> <button class="p-link" type="button" @click="changeTheme($event, 'bootstrap4-light-purple')">
<img src="demo/images/themes/bootstrap4-light-purple.svg" alt="Bootstrap Light Blue" /> <img src="/demo/images/themes/bootstrap4-light-purple.svg" alt="Bootstrap Light Blue" />
</button> </button>
<span>Purple</span> <span>Purple</span>
</div> </div>
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'bootstrap4-dark-blue', true)"> <button class="p-link" type="button" @click="changeTheme($event, 'bootstrap4-dark-blue', true)">
<img src="demo/images/themes/bootstrap4-dark-blue.svg" alt="Bootstrap Dark Blue" /> <img src="/demo/images/themes/bootstrap4-dark-blue.svg" alt="Bootstrap Dark Blue" />
</button> </button>
<span>Blue</span> <span>Blue</span>
</div> </div>
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'bootstrap4-dark-purple', true)"> <button class="p-link" type="button" @click="changeTheme($event, 'bootstrap4-dark-purple', true)">
<img src="demo/images/themes/bootstrap4-dark-purple.svg" alt="Bootstrap Dark Blue" /> <img src="/demo/images/themes/bootstrap4-dark-purple.svg" alt="Bootstrap Dark Blue" />
</button> </button>
<span>Purple</span> <span>Purple</span>
</div> </div>
@ -57,25 +57,25 @@
<div class="grid free-themes"> <div class="grid free-themes">
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'md-light-indigo')"> <button class="p-link" type="button" @click="changeTheme($event, 'md-light-indigo')">
<img src="demo/images/themes/md-light-indigo.svg" alt="Material Light Indigo" /> <img src="/demo/images/themes/md-light-indigo.svg" alt="Material Light Indigo" />
</button> </button>
<span>Indigo</span> <span>Indigo</span>
</div> </div>
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'md-light-deeppurple')"> <button class="p-link" type="button" @click="changeTheme($event, 'md-light-deeppurple')">
<img src="demo/images/themes/md-light-deeppurple.svg" alt="Material Light Deep Purple" /> <img src="/demo/images/themes/md-light-deeppurple.svg" alt="Material Light Deep Purple" />
</button> </button>
<span>Deep Purple</span> <span>Deep Purple</span>
</div> </div>
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'md-dark-indigo', true)"> <button class="p-link" type="button" @click="changeTheme($event, 'md-dark-indigo', true)">
<img src="demo/images/themes/md-dark-indigo.svg" alt="Material Dark Indigo" /> <img src="/demo/images/themes/md-dark-indigo.svg" alt="Material Dark Indigo" />
</button> </button>
<span>Indigo</span> <span>Indigo</span>
</div> </div>
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'md-dark-deeppurple', true)"> <button class="p-link" type="button" @click="changeTheme($event, 'md-dark-deeppurple', true)">
<img src="demo/images/themes/md-dark-deeppurple.svg" alt="Material Dark Deep Purple" /> <img src="/demo/images/themes/md-dark-deeppurple.svg" alt="Material Dark Deep Purple" />
</button> </button>
<span>Deep Purple</span> <span>Deep Purple</span>
</div> </div>
@ -85,25 +85,25 @@
<div class="grid free-themes"> <div class="grid free-themes">
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'mdc-light-indigo')"> <button class="p-link" type="button" @click="changeTheme($event, 'mdc-light-indigo')">
<img src="demo/images/themes/md-light-indigo.svg" alt="Material Compact Light Indigo"/> <img src="/demo/images/themes/md-light-indigo.svg" alt="Material Compact Light Indigo"/>
</button> </button>
<span>Indigo</span> <span>Indigo</span>
</div> </div>
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'mdc-light-deeppurple')"> <button class="p-link" type="button" @click="changeTheme($event, 'mdc-light-deeppurple')">
<img src="demo/images/themes/md-light-deeppurple.svg" alt="Material Compact Deep Purple" /> <img src="/demo/images/themes/md-light-deeppurple.svg" alt="Material Compact Deep Purple" />
</button> </button>
<span>Deep Purple</span> <span>Deep Purple</span>
</div> </div>
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'mdc-dark-indigo', true)"> <button class="p-link" type="button" @click="changeTheme($event, 'mdc-dark-indigo', true)">
<img src="demo/images/themes/md-dark-indigo.svg" alt="Material Compact Dark Indigo" /> <img src="/demo/images/themes/md-dark-indigo.svg" alt="Material Compact Dark Indigo" />
</button> </button>
<span>Indigo</span> <span>Indigo</span>
</div> </div>
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'mdc-dark-deeppurple', true)"> <button class="p-link" type="button" @click="changeTheme($event, 'mdc-dark-deeppurple', true)">
<img src="demo/images/themes/md-dark-deeppurple.svg" alt="Material Compact Dark Deep Purple" /> <img src="/demo/images/themes/md-dark-deeppurple.svg" alt="Material Compact Dark Deep Purple" />
</button> </button>
<span>Deep Purple</span> <span>Deep Purple</span>
</div> </div>
@ -113,7 +113,7 @@
<div class="grid free-themes"> <div class="grid free-themes">
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'tailwind-light')"> <button class="p-link" type="button" @click="changeTheme($event, 'tailwind-light')">
<img src="demo/images/themes/tailwind-light.png" alt="Tailwind Light"/> <img src="/demo/images/themes/tailwind-light.png" alt="Tailwind Light"/>
</button> </button>
<span>Tailwind Light</span> <span>Tailwind Light</span>
</div> </div>
@ -123,7 +123,7 @@
<div class="grid free-themes"> <div class="grid free-themes">
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'fluent-light')"> <button class="p-link" type="button" @click="changeTheme($event, 'fluent-light')">
<img src="demo/images/themes/fluent-light.png" alt="Fluent Light"/> <img src="/demo/images/themes/fluent-light.png" alt="Fluent Light"/>
</button> </button>
<span>Fluent Light</span> <span>Fluent Light</span>
</div> </div>
@ -133,49 +133,49 @@
<div class="grid free-themes"> <div class="grid free-themes">
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'lara-light-indigo')"> <button class="p-link" type="button" @click="changeTheme($event, 'lara-light-indigo')">
<img src="demo/images/themes/lara-light-indigo.png" alt="Lara Light Indigo" /> <img src="/demo/images/themes/lara-light-indigo.png" alt="Lara Light Indigo" />
</button> </button>
<span>Lara Light Indigo</span> <span>Lara Light Indigo</span>
</div> </div>
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'lara-light-blue')"> <button class="p-link" type="button" @click="changeTheme($event, 'lara-light-blue')">
<img src="demo/images/themes/lara-light-blue.png" alt="Lara Light Blue" /> <img src="/demo/images/themes/lara-light-blue.png" alt="Lara Light Blue" />
</button> </button>
<span>Lara Light Blue</span> <span>Lara Light Blue</span>
</div> </div>
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'lara-light-purple')"> <button class="p-link" type="button" @click="changeTheme($event, 'lara-light-purple')">
<img src="demo/images/themes/lara-light-purple.png" alt="Lara Light Purple" /> <img src="/demo/images/themes/lara-light-purple.png" alt="Lara Light Purple" />
</button> </button>
<span>Lara Light Purple</span> <span>Lara Light Purple</span>
</div> </div>
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'lara-light-teal')"> <button class="p-link" type="button" @click="changeTheme($event, 'lara-light-teal')">
<img src="demo/images/themes/lara-light-teal.png" alt="Lara Light Teal" /> <img src="/demo/images/themes/lara-light-teal.png" alt="Lara Light Teal" />
</button> </button>
<span>Lara Light Teal</span> <span>Lara Light Teal</span>
</div> </div>
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'lara-dark-indigo', true)"> <button class="p-link" type="button" @click="changeTheme($event, 'lara-dark-indigo', true)">
<img src="demo/images/themes/lara-dark-indigo.png" alt="Lara Dark Indigo" /> <img src="/demo/images/themes/lara-dark-indigo.png" alt="Lara Dark Indigo" />
</button> </button>
<span>Lara Dark Indigo</span> <span>Lara Dark Indigo</span>
</div> </div>
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'lara-dark-blue', true)"> <button class="p-link" type="button" @click="changeTheme($event, 'lara-dark-blue', true)">
<img src="demo/images/themes/lara-dark-blue.png" alt="Lara Dark Blue" /> <img src="/demo/images/themes/lara-dark-blue.png" alt="Lara Dark Blue" />
</button> </button>
<span>Lara Dark Blue</span> <span>Lara Dark Blue</span>
</div> </div>
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'lara-dark-purple', true)"> <button class="p-link" type="button" @click="changeTheme($event, 'lara-dark-purple', true)">
<img src="demo/images/themes/lara-dark-purple.png" alt="Lara Dark Purple" /> <img src="/demo/images/themes/lara-dark-purple.png" alt="Lara Dark Purple" />
</button> </button>
<span>Lara Dark Purple</span> <span>Lara Dark Purple</span>
</div> </div>
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'lara-dark-teal', true)"> <button class="p-link" type="button" @click="changeTheme($event, 'lara-dark-teal', true)">
<img src="demo/images/themes/lara-dark-teal.png" alt="Lara Dark Teal" /> <img src="/demo/images/themes/lara-dark-teal.png" alt="Lara Dark Teal" />
</button> </button>
<span>Lara Dark Teal</span> <span>Lara Dark Teal</span>
</div> </div>
@ -185,73 +185,73 @@
<div class="grid free-themes"> <div class="grid free-themes">
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'saga-blue')"> <button class="p-link" type="button" @click="changeTheme($event, 'saga-blue')">
<img src="demo/images/themes/saga-blue.png" alt="Saga Blue" /> <img src="/demo/images/themes/saga-blue.png" alt="Saga Blue" />
</button> </button>
<span>Saga Blue</span> <span>Saga Blue</span>
</div> </div>
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'saga-green')"> <button class="p-link" type="button" @click="changeTheme($event, 'saga-green')">
<img src="demo/images/themes/saga-green.png" alt="Saga Green" /> <img src="/demo/images/themes/saga-green.png" alt="Saga Green" />
</button> </button>
<span>Saga Green</span> <span>Saga Green</span>
</div> </div>
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'saga-orange')"> <button class="p-link" type="button" @click="changeTheme($event, 'saga-orange')">
<img src="demo/images/themes/saga-orange.png" alt="Saga Orange" /> <img src="/demo/images/themes/saga-orange.png" alt="Saga Orange" />
</button> </button>
<span>Saga Orange</span> <span>Saga Orange</span>
</div> </div>
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'saga-purple')"> <button class="p-link" type="button" @click="changeTheme($event, 'saga-purple')">
<img src="demo/images/themes/saga-purple.png" alt="Saga Purple" /> <img src="/demo/images/themes/saga-purple.png" alt="Saga Purple" />
</button> </button>
<span>Saga Purple</span> <span>Saga Purple</span>
</div> </div>
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'vela-blue', true)"> <button class="p-link" type="button" @click="changeTheme($event, 'vela-blue', true)">
<img src="demo/images/themes/vela-blue.png" alt="Vela Blue" /> <img src="/demo/images/themes/vela-blue.png" alt="Vela Blue" />
</button> </button>
<span>Vela Blue</span> <span>Vela Blue</span>
</div> </div>
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'vela-green', true)"> <button class="p-link" type="button" @click="changeTheme($event, 'vela-green', true)">
<img src="demo/images/themes/vela-green.png" alt="Vela Green" /> <img src="/demo/images/themes/vela-green.png" alt="Vela Green" />
</button> </button>
<span>Vela Green</span> <span>Vela Green</span>
</div> </div>
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'vela-orange', true)"> <button class="p-link" type="button" @click="changeTheme($event, 'vela-orange', true)">
<img src="demo/images/themes/vela-orange.png" alt="Vela Orange" /> <img src="/demo/images/themes/vela-orange.png" alt="Vela Orange" />
</button> </button>
<span>Vela Orange</span> <span>Vela Orange</span>
</div> </div>
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'vela-purple', true)"> <button class="p-link" type="button" @click="changeTheme($event, 'vela-purple', true)">
<img src="demo/images/themes/vela-purple.png" alt="Vela Purple" /> <img src="/demo/images/themes/vela-purple.png" alt="Vela Purple" />
</button> </button>
<span>Vela Purple</span> <span>Vela Purple</span>
</div> </div>
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'arya-blue', true)"> <button class="p-link" type="button" @click="changeTheme($event, 'arya-blue', true)">
<img src="demo/images/themes/arya-blue.png" alt="Arya Blue" /> <img src="/demo/images/themes/arya-blue.png" alt="Arya Blue" />
</button> </button>
<span>Arya Blue</span> <span>Arya Blue</span>
</div> </div>
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'arya-green', true)"> <button class="p-link" type="button" @click="changeTheme($event, 'arya-green', true)">
<img src="demo/images/themes/arya-green.png" alt="Arya Green" /> <img src="/demo/images/themes/arya-green.png" alt="Arya Green" />
</button> </button>
<span>Arya Green</span> <span>Arya Green</span>
</div> </div>
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'arya-orange', true)"> <button class="p-link" type="button" @click="changeTheme($event, 'arya-orange', true)">
<img src="demo/images/themes/arya-orange.png" alt="Arya Orange" /> <img src="/demo/images/themes/arya-orange.png" alt="Arya Orange" />
</button> </button>
<span>Arya Orange</span> <span>Arya Orange</span>
</div> </div>
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'arya-purple', true)"> <button class="p-link" type="button" @click="changeTheme($event, 'arya-purple', true)">
<img src="demo/images/themes/arya-purple.png" alt="Arya Purple" /> <img src="/demo/images/themes/arya-purple.png" alt="Arya Purple" />
</button> </button>
<span>Arya Purple</span> <span>Arya Purple</span>
</div> </div>
@ -262,37 +262,37 @@
<div class="grid free-themes"> <div class="grid free-themes">
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'soho-light')"> <button class="p-link" type="button" @click="changeTheme($event, 'soho-light')">
<img src="demo/images/themes/soho-light.png" alt="Soho Light" /> <img src="/demo/images/themes/soho-light.png" alt="Soho Light" />
</button> </button>
<span>Soho Light</span> <span>Soho Light</span>
</div> </div>
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'soho-dark', true)"> <button class="p-link" type="button" @click="changeTheme($event, 'soho-dark', true)">
<img src="demo/images/themes/soho-dark.png" alt="Soho Dark" /> <img src="/demo/images/themes/soho-dark.png" alt="Soho Dark" />
</button> </button>
<span>Soho Dark</span> <span>Soho Dark</span>
</div> </div>
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'viva-light')"> <button class="p-link" type="button" @click="changeTheme($event, 'viva-light')">
<img src="demo/images/themes/viva-light.svg" alt="Viva Light" /> <img src="/demo/images/themes/viva-light.svg" alt="Viva Light" />
</button> </button>
<span>Viva Light</span> <span>Viva Light</span>
</div> </div>
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'viva-dark', true)"> <button class="p-link" type="button" @click="changeTheme($event, 'viva-dark', true)">
<img src="demo/images/themes/viva-dark.svg" alt="Viva Dark" /> <img src="/demo/images/themes/viva-dark.svg" alt="Viva Dark" />
</button> </button>
<span>Viva Dark</span> <span>Viva Dark</span>
</div> </div>
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'mira')"> <button class="p-link" type="button" @click="changeTheme($event, 'mira')">
<img src="demo/images/themes/mira.jpg" alt="Mira" /> <img src="/demo/images/themes/mira.jpg" alt="Mira" />
</button> </button>
<span>Mira</span> <span>Mira</span>
</div> </div>
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'nano')"> <button class="p-link" type="button" @click="changeTheme($event, 'nano')">
<img src="demo/images/themes/nano.jpg" alt="Mira" /> <img src="/demo/images/themes/nano.jpg" alt="Mira" />
</button> </button>
<span>Nano</span> <span>Nano</span>
</div> </div>

2
layouts/AppMenu.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div :class="['layout-sidebar', {'active': active}]"> <div :class="['layout-sidebar', {'active': active}]">
<nuxt-link to="/" class="logo"> <nuxt-link to="/" class="logo">
<img :src="'demo/images/primevue-logo-' + `${$appState.darkTheme ? 'light' : 'dark'}` + '.svg'" alt="primevue logo"/> <img :src="'/demo/images/primevue-logo-' + `${$appState.darkTheme ? 'light' : 'dark'}` + '.svg'" alt="primevue logo"/>
</nuxt-link> </nuxt-link>
<div class="layout-sidebar-filter p-fluid"> <div class="layout-sidebar-filter p-fluid">
<AutoComplete v-model="selectedRoute" :suggestions="filteredRoutes" @complete="searchRoute($event)" @item-select="onItemSelect($event)" scrollHeight="300px" placeholder="Search" <AutoComplete v-model="selectedRoute" :suggestions="filteredRoutes" @complete="searchRoute($event)" @item-select="onItemSelect($event)" scrollHeight="300px" placeholder="Search"

82
layouts/AppTopBar.vue
View File

@ -4,7 +4,7 @@
<i class="pi pi-bars"></i> <i class="pi pi-bars"></i>
</a> </a>
<!-- <div class="app-theme" v-tooltip.bottom="$appState.theme"> <!-- <div class="app-theme" v-tooltip.bottom="$appState.theme">
<img :src="'demo/images/themes/' + logoMap[$appState.theme]" /> <img :src="'/demo/images/themes/' + logoMap[$appState.theme]" />
</div> --> </div> -->
<ul ref="topbarMenu" class="topbar-menu"> <ul ref="topbarMenu" class="topbar-menu">
<li class="topbar-submenu"> <li class="topbar-submenu">
@ -21,60 +21,60 @@
<li><a href="https://www.figma.com/community/file/890589747170608208/PrimeOne-Design-Library"><i class="pi pi-fw pi-pencil"/><span>Figma UI Kit</span></a></li> <li><a href="https://www.figma.com/community/file/890589747170608208/PrimeOne-Design-Library"><i class="pi pi-fw pi-pencil"/><span>Figma UI Kit</span></a></li>
<li class="topbar-submenu-header">BOOTSTRAP</li> <li class="topbar-submenu-header">BOOTSTRAP</li>
<li><a @click="changeTheme($event, 'bootstrap4-light-blue')"><img src="demo/images/themes/bootstrap4-light-blue.svg" alt="Blue Light" /><span>Blue Light</span></a></li> <li><a @click="changeTheme($event, 'bootstrap4-light-blue')"><img src="/demo/images/themes/bootstrap4-light-blue.svg" alt="Blue Light" /><span>Blue Light</span></a></li>
<li><a @click="changeTheme($event, 'bootstrap4-light-purple')"><img src="demo/images/themes/bootstrap4-light-purple.svg" alt="Purple Light" /><span>Purple Light</span></a></li> <li><a @click="changeTheme($event, 'bootstrap4-light-purple')"><img src="/demo/images/themes/bootstrap4-light-purple.svg" alt="Purple Light" /><span>Purple Light</span></a></li>
<li><a @click="changeTheme($event, 'bootstrap4-dark-blue', true)"><img src="demo/images/themes/bootstrap4-dark-blue.svg" alt="Blue Dark" /><span>Blue Dark</span></a></li> <li><a @click="changeTheme($event, 'bootstrap4-dark-blue', true)"><img src="/demo/images/themes/bootstrap4-dark-blue.svg" alt="Blue Dark" /><span>Blue Dark</span></a></li>
<li><a @click="changeTheme($event, 'bootstrap4-dark-purple', true)"><img src="demo/images/themes/bootstrap4-dark-purple.svg" alt="Purple Dark" /><span>Purple Dark</span></a></li> <li><a @click="changeTheme($event, 'bootstrap4-dark-purple', true)"><img src="/demo/images/themes/bootstrap4-dark-purple.svg" alt="Purple Dark" /><span>Purple Dark</span></a></li>
<li class="topbar-submenu-header">MATERIAL DESIGN</li> <li class="topbar-submenu-header">MATERIAL DESIGN</li>
<li><a @click="changeTheme($event, 'md-light-indigo')"><img src="demo/images/themes/md-light-indigo.svg" alt="Indigo Light" /><span>Indigo Light</span></a></li> <li><a @click="changeTheme($event, 'md-light-indigo')"><img src="/demo/images/themes/md-light-indigo.svg" alt="Indigo Light" /><span>Indigo Light</span></a></li>
<li><a @click="changeTheme($event, 'md-light-deeppurple')"><img src="demo/images/themes/md-light-deeppurple.svg" alt="Deep Purple Light" /><span>Deep Purple Light</span></a></li> <li><a @click="changeTheme($event, 'md-light-deeppurple')"><img src="/demo/images/themes/md-light-deeppurple.svg" alt="Deep Purple Light" /><span>Deep Purple Light</span></a></li>
<li><a @click="changeTheme($event, 'md-dark-indigo', true)"><img src="demo/images/themes/md-dark-indigo.svg" alt="Indigo Dark" /><span>Indigo Dark</span></a></li> <li><a @click="changeTheme($event, 'md-dark-indigo', true)"><img src="/demo/images/themes/md-dark-indigo.svg" alt="Indigo Dark" /><span>Indigo Dark</span></a></li>
<li><a @click="changeTheme($event, 'md-dark-deeppurple', true)"><img src="demo/images/themes/md-dark-deeppurple.svg" alt="Deep Purple Dark" /><span>Deep Purple Dark</span></a></li> <li><a @click="changeTheme($event, 'md-dark-deeppurple', true)"><img src="/demo/images/themes/md-dark-deeppurple.svg" alt="Deep Purple Dark" /><span>Deep Purple Dark</span></a></li>
<li class="topbar-submenu-header">MATERIAL DESIGN COMPACT</li> <li class="topbar-submenu-header">MATERIAL DESIGN COMPACT</li>
<li><a @click="changeTheme($event, 'mdc-light-indigo')"><img src="demo/images/themes/md-light-indigo.svg" alt="Indigo Light" /><span>Indigo Light</span></a></li> <li><a @click="changeTheme($event, 'mdc-light-indigo')"><img src="/demo/images/themes/md-light-indigo.svg" alt="Indigo Light" /><span>Indigo Light</span></a></li>
<li><a @click="changeTheme($event, 'mdc-light-deeppurple')"><img src="demo/images/themes/md-light-deeppurple.svg" alt="Deep Purple Light" /><span>Deep Purple Light</span></a></li> <li><a @click="changeTheme($event, 'mdc-light-deeppurple')"><img src="/demo/images/themes/md-light-deeppurple.svg" alt="Deep Purple Light" /><span>Deep Purple Light</span></a></li>
<li><a @click="changeTheme($event, 'mdc-dark-indigo', true)"><img src="demo/images/themes/md-dark-indigo.svg" alt="Indigo Dark" /><span>Indigo Dark</span></a></li> <li><a @click="changeTheme($event, 'mdc-dark-indigo', true)"><img src="/demo/images/themes/md-dark-indigo.svg" alt="Indigo Dark" /><span>Indigo Dark</span></a></li>
<li><a @click="changeTheme($event, 'mdc-dark-deeppurple', true)"><img src="demo/images/themes/md-dark-deeppurple.svg" alt="Deep Purple Dark" /><span>Deep Purple Dark</span></a></li> <li><a @click="changeTheme($event, 'mdc-dark-deeppurple', true)"><img src="/demo/images/themes/md-dark-deeppurple.svg" alt="Deep Purple Dark" /><span>Deep Purple Dark</span></a></li>
<li class="topbar-submenu-header">TAILWIND</li> <li class="topbar-submenu-header">TAILWIND</li>
<li><a @click="changeTheme($event, 'tailwind-light')"><img src="demo/images/themes/tailwind-light.png" alt="Tailwind Light" /><span>Tailwind Light</span></a></li> <li><a @click="changeTheme($event, 'tailwind-light')"><img src="/demo/images/themes/tailwind-light.png" alt="Tailwind Light" /><span>Tailwind Light</span></a></li>
<li class="topbar-submenu-header">FLUENT UI</li> <li class="topbar-submenu-header">FLUENT UI</li>
<li><a @click="changeTheme($event, 'fluent-light')"><img src="demo/images/themes/fluent-light.png" alt="Fluent Light" /><span>Fluent Light</span></a></li> <li><a @click="changeTheme($event, 'fluent-light')"><img src="/demo/images/themes/fluent-light.png" alt="Fluent Light" /><span>Fluent Light</span></a></li>
<li class="topbar-submenu-header flex align-items-center">PRIMEONE 2022 <Tag class="ml-3" value="NEW" rounded severity="success"></Tag></li> <li class="topbar-submenu-header flex align-items-center">PRIMEONE 2022 <Tag class="ml-3" value="NEW" rounded severity="success"></Tag></li>
<li><a @click="changeTheme($event, 'lara-light-indigo')"><img src="demo/images/themes/lara-light-indigo.png" alt="Lara Light Indigo" /><span>Lara Light Indigo</span></a></li> <li><a @click="changeTheme($event, 'lara-light-indigo')"><img src="/demo/images/themes/lara-light-indigo.png" alt="Lara Light Indigo" /><span>Lara Light Indigo</span></a></li>
<li><a @click="changeTheme($event, 'lara-light-blue')"><img src="demo/images/themes/lara-light-blue.png" alt="Lara Light Blue" /><span>Lara Light Blue</span></a></li> <li><a @click="changeTheme($event, 'lara-light-blue')"><img src="/demo/images/themes/lara-light-blue.png" alt="Lara Light Blue" /><span>Lara Light Blue</span></a></li>
<li><a @click="changeTheme($event, 'lara-light-purple')"><img src="demo/images/themes/lara-light-purple.png" alt="Lara Light Purple" /><span>Lara Light Purple</span></a></li> <li><a @click="changeTheme($event, 'lara-light-purple')"><img src="/demo/images/themes/lara-light-purple.png" alt="Lara Light Purple" /><span>Lara Light Purple</span></a></li>
<li><a @click="changeTheme($event, 'lara-light-teal')"><img src="demo/images/themes/lara-light-teal.png" alt="Lara Light Teal" /><span>Lara Light Teal</span></a></li> <li><a @click="changeTheme($event, 'lara-light-teal')"><img src="/demo/images/themes/lara-light-teal.png" alt="Lara Light Teal" /><span>Lara Light Teal</span></a></li>
<li><a @click="changeTheme($event, 'lara-dark-blue')"><img src="demo/images/themes/lara-dark-blue.png" alt="Lara Dark Blue" /><span>Lara Dark Blue</span></a></li> <li><a @click="changeTheme($event, 'lara-dark-blue')"><img src="/demo/images/themes/lara-dark-blue.png" alt="Lara Dark Blue" /><span>Lara Dark Blue</span></a></li>
<li><a @click="changeTheme($event, 'lara-dark-indigo')"><img src="demo/images/themes/lara-dark-indigo.png" alt="Lara Dark Indigo" /><span>Lara Dark Indigo</span></a></li> <li><a @click="changeTheme($event, 'lara-dark-indigo')"><img src="/demo/images/themes/lara-dark-indigo.png" alt="Lara Dark Indigo" /><span>Lara Dark Indigo</span></a></li>
<li><a @click="changeTheme($event, 'lara-dark-purple')"><img src="demo/images/themes/lara-dark-purple.png" alt="Lara Dark Purple" /><span>Lara Dark Purple</span></a></li> <li><a @click="changeTheme($event, 'lara-dark-purple')"><img src="/demo/images/themes/lara-dark-purple.png" alt="Lara Dark Purple" /><span>Lara Dark Purple</span></a></li>
<li><a @click="changeTheme($event, 'lara-dark-teal')"><img src="demo/images/themes/lara-dark-teal.png" alt="Lara Dark Teal" /><span>Lara Dark Teal</span></a></li> <li><a @click="changeTheme($event, 'lara-dark-teal')"><img src="/demo/images/themes/lara-dark-teal.png" alt="Lara Dark Teal" /><span>Lara Dark Teal</span></a></li>
<li class="topbar-submenu-header">PRIMEONE 2021</li> <li class="topbar-submenu-header">PRIMEONE 2021</li>
<li><a @click="changeTheme($event, 'saga-blue')"><img src="demo/images/themes/saga-blue.png" alt="Saga Blue" /><span>Saga Blue</span></a></li> <li><a @click="changeTheme($event, 'saga-blue')"><img src="/demo/images/themes/saga-blue.png" alt="Saga Blue" /><span>Saga Blue</span></a></li>
<li><a @click="changeTheme($event, 'saga-green')"><img src="demo/images/themes/saga-green.png" alt="Saga Green" /><span>Saga Green</span></a></li> <li><a @click="changeTheme($event, 'saga-green')"><img src="/demo/images/themes/saga-green.png" alt="Saga Green" /><span>Saga Green</span></a></li>
<li><a @click="changeTheme($event, 'saga-orange')"><img src="demo/images/themes/saga-orange.png" alt="Saga Orange" /><span>Saga Orange</span></a></li> <li><a @click="changeTheme($event, 'saga-orange')"><img src="/demo/images/themes/saga-orange.png" alt="Saga Orange" /><span>Saga Orange</span></a></li>
<li><a @click="changeTheme($event, 'saga-purple')"><img src="demo/images/themes/saga-purple.png" alt="Saga Purple" /><span>Saga Purple</span></a></li> <li><a @click="changeTheme($event, 'saga-purple')"><img src="/demo/images/themes/saga-purple.png" alt="Saga Purple" /><span>Saga Purple</span></a></li>
<li><a @click="changeTheme($event, 'vela-blue', true)"><img src="demo/images/themes/vela-blue.png" alt="Vela Blue" /><span>Vela Blue</span></a></li> <li><a @click="changeTheme($event, 'vela-blue', true)"><img src="/demo/images/themes/vela-blue.png" alt="Vela Blue" /><span>Vela Blue</span></a></li>
<li><a @click="changeTheme($event, 'vela-green', true)"><img src="demo/images/themes/vela-green.png" alt="Vela Green" /><span>Vela Green</span></a></li> <li><a @click="changeTheme($event, 'vela-green', true)"><img src="/demo/images/themes/vela-green.png" alt="Vela Green" /><span>Vela Green</span></a></li>
<li><a @click="changeTheme($event, 'vela-orange', true)"><img src="demo/images/themes/vela-orange.png" alt="Vela Orange" /><span>Vela Orange</span></a></li> <li><a @click="changeTheme($event, 'vela-orange', true)"><img src="/demo/images/themes/vela-orange.png" alt="Vela Orange" /><span>Vela Orange</span></a></li>
<li><a @click="changeTheme($event, 'vela-purple', true)"><img src="demo/images/themes/vela-purple.png" alt="Vela Purple" /><span>Vela Purple</span></a></li> <li><a @click="changeTheme($event, 'vela-purple', true)"><img src="/demo/images/themes/vela-purple.png" alt="Vela Purple" /><span>Vela Purple</span></a></li>
<li><a @click="changeTheme($event, 'arya-blue', true)"><img src="demo/images/themes/arya-blue.png" alt="Arya Blue" /><span>Arya Blue</span></a></li> <li><a @click="changeTheme($event, 'arya-blue', true)"><img src="/demo/images/themes/arya-blue.png" alt="Arya Blue" /><span>Arya Blue</span></a></li>
<li><a @click="changeTheme($event, 'arya-green', true)"><img src="demo/images/themes/arya-green.png" alt="Arya Green" /><span>Arya Green</span></a></li> <li><a @click="changeTheme($event, 'arya-green', true)"><img src="/demo/images/themes/arya-green.png" alt="Arya Green" /><span>Arya Green</span></a></li>
<li><a @click="changeTheme($event, 'arya-orange', true)"><img src="demo/images/themes/arya-orange.png" alt="Arya Orange" /><span>Arya Orange</span></a></li> <li><a @click="changeTheme($event, 'arya-orange', true)"><img src="/demo/images/themes/arya-orange.png" alt="Arya Orange" /><span>Arya Orange</span></a></li>
<li><a @click="changeTheme($event, 'arya-purple', true)"><img src="demo/images/themes/arya-purple.png" alt="Arya Purple" /><span>Arya Purple</span></a></li> <li><a @click="changeTheme($event, 'arya-purple', true)"><img src="/demo/images/themes/arya-purple.png" alt="Arya Purple" /><span>Arya Purple</span></a></li>
<li class="topbar-submenu-header">PREMIUM</li> <li class="topbar-submenu-header">PREMIUM</li>
<li><a @click="changeTheme($event, 'soho-light')"><img src="demo/images/themes/soho-light.png" alt="Soho Light" /><span>Soho Light</span></a></li> <li><a @click="changeTheme($event, 'soho-light')"><img src="/demo/images/themes/soho-light.png" alt="Soho Light" /><span>Soho Light</span></a></li>
<li><a @click="changeTheme($event, 'soho-dark', true)"><img src="demo/images/themes/soho-dark.png" alt="Soho Dark" /><span>Soho Dark</span></a></li> <li><a @click="changeTheme($event, 'soho-dark', true)"><img src="/demo/images/themes/soho-dark.png" alt="Soho Dark" /><span>Soho Dark</span></a></li>
<li><a @click="changeTheme($event, 'viva-light')"><img src="demo/images/themes/viva-light.svg" alt="Viva Light" /><span>Viva Light</span></a></li> <li><a @click="changeTheme($event, 'viva-light')"><img src="/demo/images/themes/viva-light.svg" alt="Viva Light" /><span>Viva Light</span></a></li>
<li><a @click="changeTheme($event, 'viva-dark', true)"><img src="demo/images/themes/viva-dark.svg" alt="Viva Dark" /><span>Viva Dark</span></a></li> <li><a @click="changeTheme($event, 'viva-dark', true)"><img src="/demo/images/themes/viva-dark.svg" alt="Viva Dark" /><span>Viva Dark</span></a></li>
<li><a @click="changeTheme($event, 'mira')"><img src="demo/images/themes/mira.jpg" alt="Mira" /><span>Mira</span></a></li> <li><a @click="changeTheme($event, 'mira')"><img src="/demo/images/themes/mira.jpg" alt="Mira" /><span>Mira</span></a></li>
<li><a @click="changeTheme($event, 'nano')"><img src="demo/images/themes/nano.jpg" alt="Nano" /><span>Nano</span></a></li> <li><a @click="changeTheme($event, 'nano')"><img src="/demo/images/themes/nano.jpg" alt="Nano" /><span>Nano</span></a></li>
</ul> </ul>
</transition> </transition>
</li> </li>

2
pages/autocomplete/AutoCompleteDoc.vue
View File

@ -133,7 +133,7 @@ export default {
<pre v-code><code><template v-pre> <pre v-code><code><template v-pre>
&lt;AutoComplete v-model="brand" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Hint: type 'v' or 'f'" :dropdown="true"&gt; &lt;AutoComplete v-model="brand" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Hint: type 'v' or 'f'" :dropdown="true"&gt;
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;img :alt="slotProps.item" :src="'demo/images/car/' + slotProps.item + '.png'" /&gt; &lt;img :alt="slotProps.item" :src="'/demo/images/car/' + slotProps.item + '.png'" /&gt;
&lt;div&gt;{{slotProps.item}}&lt;/div&gt; &lt;div&gt;{{slotProps.item}}&lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/AutoComplete&gt; &lt;/AutoComplete&gt;

18
pages/avatar/index.vue
View File

@ -67,9 +67,9 @@
<div class="col-12 md:col-4"> <div class="col-12 md:col-4">
<div class="card"> <div class="card">
<h5>Image</h5> <h5>Image</h5>
<Avatar image="demo/images/avatar/amyelsner.png" class="mr-2" size="xlarge" shape="circle" /> <Avatar image="/demo/images/avatar/amyelsner.png" class="mr-2" size="xlarge" shape="circle" />
<Avatar image="demo/images/avatar/asiyajavayant.png" class="mr-2" size="large" shape="circle" /> <Avatar image="/demo/images/avatar/asiyajavayant.png" class="mr-2" size="large" shape="circle" />
<Avatar image="demo/images/avatar/onyamalimba.png" class="mr-2" shape="circle" /> <Avatar image="/demo/images/avatar/onyamalimba.png" class="mr-2" shape="circle" />
</div> </div>
</div> </div>
@ -77,11 +77,11 @@
<div class="card"> <div class="card">
<h5>Avatar Group</h5> <h5>Avatar Group</h5>
<AvatarGroup class="mb-3"> <AvatarGroup class="mb-3">
<Avatar image="demo/images/avatar/amyelsner.png" size="large" shape="circle" /> <Avatar image="/demo/images/avatar/amyelsner.png" size="large" shape="circle" />
<Avatar image="demo/images/avatar/asiyajavayant.png" size="large" shape="circle" /> <Avatar image="/demo/images/avatar/asiyajavayant.png" size="large" shape="circle" />
<Avatar image="demo/images/avatar/onyamalimba.png" size="large" shape="circle" /> <Avatar image="/demo/images/avatar/onyamalimba.png" size="large" shape="circle" />
<Avatar image="demo/images/avatar/ionibowcher.png" size="large" shape="circle" /> <Avatar image="/demo/images/avatar/ionibowcher.png" size="large" shape="circle" />
<Avatar image="demo/images/avatar/xuxuefeng.png" size="large" shape="circle" /> <Avatar image="/demo/images/avatar/xuxuefeng.png" size="large" shape="circle" />
<Avatar label="+2" shape="circle" size="large" style="background-color: #9c27b0; color: #ffffff" /> <Avatar label="+2" shape="circle" size="large" style="background-color: #9c27b0; color: #ffffff" />
</AvatarGroup> </AvatarGroup>
</div> </div>
@ -90,7 +90,7 @@
<div class="col-12 md:col-4"> <div class="col-12 md:col-4">
<div class="card"> <div class="card">
<h5>Image - Badge</h5> <h5>Image - Badge</h5>
<Avatar image="demo/images/organization/walter.jpg" size="xlarge" v-badge.danger="4" /> <Avatar image="/demo/images/organization/walter.jpg" size="xlarge" v-badge.danger="4" />
</div> </div>
</div> </div>
</div> </div>

2
pages/card/CardDoc.vue
View File

@ -18,7 +18,7 @@ import Card from 'primevue/card';
<pre v-code><code> <pre v-code><code>
&lt;Card&gt; &lt;Card&gt;
&lt;template #header&gt; &lt;template #header&gt;
&lt;img alt="user header" src="demo/images/usercard.png"&gt; &lt;img alt="user header" src="/demo/images/usercard.png"&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #title&gt; &lt;template #title&gt;
Advanced Card Advanced Card

2
pages/card/index.vue
View File

@ -21,7 +21,7 @@
<Card style="width: 25em"> <Card style="width: 25em">
<template #header> <template #header>
<img alt="user header" src="/demo/images/usercard.png" /> <img alt="user header" src="//demo/images/usercard.png" />
</template> </template>
<template #title> Advanced Card </template> <template #title> Advanced Card </template>
<template #subtitle> Card subtitle </template> <template #subtitle> Card subtitle </template>

2
pages/carousel/CarouselDoc.vue
View File

@ -44,7 +44,7 @@ import Carousel from 'primevue/carousel';
&lt;div class="car-item"&gt; &lt;div class="car-item"&gt;
&lt;div class="car-content"&gt; &lt;div class="car-content"&gt;
&lt;div&gt; &lt;div&gt;
&lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand" /&gt; &lt;img :src="'/demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand" /&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div&gt; &lt;div&gt;
&lt;div class="car-title"&gt;{{slotProps.data.brand}}&lt;/div&gt; &lt;div class="car-title"&gt;{{slotProps.data.brand}}&lt;/div&gt;

6
pages/carousel/index.vue
View File

@ -18,7 +18,7 @@
<div class="product-item"> <div class="product-item">
<div class="product-item-content"> <div class="product-item-content">
<div class="mb-3"> <div class="mb-3">
<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" /> <img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
</div> </div>
<div> <div>
<h4 class="mb-1">{{ slotProps.data.name }}</h4> <h4 class="mb-1">{{ slotProps.data.name }}</h4>
@ -45,7 +45,7 @@
<div class="product-item"> <div class="product-item">
<div class="product-item-content"> <div class="product-item-content">
<div class="mb-3"> <div class="mb-3">
<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" /> <img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
</div> </div>
<div> <div>
<h4 class="mb-1">{{ slotProps.data.name }}</h4> <h4 class="mb-1">{{ slotProps.data.name }}</h4>
@ -72,7 +72,7 @@
<div class="product-item"> <div class="product-item">
<div class="product-item-content"> <div class="product-item-content">
<div class="mb-3"> <div class="mb-3">
<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" /> <img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
</div> </div>
<div> <div>
<h4 class="mb-1">{{ slotProps.data.name }}</h4> <h4 class="mb-1">{{ slotProps.data.name }}</h4>

12
pages/chip/index.vue
View File

@ -28,18 +28,18 @@
<h5>Image</h5> <h5>Image</h5>
<div class="flex align-items-center"> <div class="flex align-items-center">
<Chip label="Amy Elsner" image="demo/images/avatar/amyelsner.png" class="mr-2" /> <Chip label="Amy Elsner" image="/demo/images/avatar/amyelsner.png" class="mr-2" />
<Chip label="Asiya Javayant" image="demo/images/avatar/asiyajavayant.png" class="mr-2" /> <Chip label="Asiya Javayant" image="/demo/images/avatar/asiyajavayant.png" class="mr-2" />
<Chip label="Onyama Limba" image="demo/images/avatar/onyamalimba.png" class="mr-2" /> <Chip label="Onyama Limba" image="/demo/images/avatar/onyamalimba.png" class="mr-2" />
<Chip label="Xuxue Feng" image="demo/images/avatar/xuxuefeng.png" removable /> <Chip label="Xuxue Feng" image="/demo/images/avatar/xuxuefeng.png" removable />
</div> </div>
<h5>Styling</h5> <h5>Styling</h5>
<div class="flex align-items-center"> <div class="flex align-items-center">
<Chip label="Action" class="mr-2 custom-chip" /> <Chip label="Action" class="mr-2 custom-chip" />
<Chip label="Apple" icon="pi pi-apple" class="mr-2 custom-chip" /> <Chip label="Apple" icon="pi pi-apple" class="mr-2 custom-chip" />
<Chip label="Onyama Limba" image="demo/images/avatar/onyamalimba.png" class="mr-2 custom-chip" /> <Chip label="Onyama Limba" image="/demo/images/avatar/onyamalimba.png" class="mr-2 custom-chip" />
<Chip label="Xuxue Feng" image="demo/images/avatar/xuxuefeng.png" class="custom-chip" removable /> <Chip label="Xuxue Feng" image="/demo/images/avatar/xuxuefeng.png" class="custom-chip" removable />
</div> </div>
</div> </div>
</div> </div>

2
pages/colorpicker/index.vue
View File

@ -22,7 +22,7 @@
<div class="flex flex-column align-items-center md:flex-row md:align-items-start"> <div class="flex flex-column align-items-center md:flex-row md:align-items-start">
<ColorPicker v-model="color3" :inline="true" /> <ColorPicker v-model="color3" :inline="true" />
<div :style="wallStyle" class="mt-5 md:mt-0 md:ml-5 inline-flex"> <div :style="wallStyle" class="mt-5 md:mt-0 md:ml-5 inline-flex">
<img alt="room" src="demo/images/interior.png" class="w-full md:auto" /> <img alt="room" src="/demo/images/interior.png" class="w-full md:auto" />
</div> </div>
</div> </div>
</div> </div>

2
pages/contextmenu/ContextMenuDoc.vue
View File

@ -170,7 +170,7 @@ export default {
<p>ContextMenu is attached to a custom element manually using the reference and calling the <i>show(event)</i> method.</p> <p>ContextMenu is attached to a custom element manually using the reference and calling the <i>show(event)</i> method.</p>
<pre v-code><code> <pre v-code><code>
&lt;img alt="logo" src="demo/images/nature/nature3.jpg" @contextmenu="onImageRightClick"&gt; &lt;img alt="logo" src="/demo/images/nature/nature3.jpg" @contextmenu="onImageRightClick"&gt;
&lt;ContextMenu ref="menu" :model="items" /&gt; &lt;ContextMenu ref="menu" :model="items" /&gt;
</code></pre> </code></pre>

2
pages/contextmenu/index.vue
View File

@ -13,7 +13,7 @@
<div class="content-section implementation"> <div class="content-section implementation">
<div class="card"> <div class="card">
<img alt="logo" src="demo/images/nature/nature3.jpg" @contextmenu="onImageRightClick" aria-haspopup="true" /> <img alt="logo" src="/demo/images/nature/nature3.jpg" @contextmenu="onImageRightClick" aria-haspopup="true" />
<ContextMenu ref="menu" :model="items" /> <ContextMenu ref="menu" :model="items" />
</div> </div>
</div> </div>

4
pages/datatable/DataTableCrudDemo.vue
View File

@ -50,7 +50,7 @@
<Column field="name" header="Name" :sortable="true" style="min-width: 16rem"></Column> <Column field="name" header="Name" :sortable="true" style="min-width: 16rem"></Column>
<Column header="Image"> <Column header="Image">
<template #body="slotProps"> <template #body="slotProps">
<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" /> <img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" />
</template> </template>
</Column> </Column>
<Column field="price" header="Price" :sortable="true" style="min-width: 8rem"> <Column field="price" header="Price" :sortable="true" style="min-width: 8rem">
@ -79,7 +79,7 @@
</div> </div>
<Dialog v-model:visible="productDialog" :style="{ width: '450px' }" header="Product Details" :modal="true" class="p-fluid"> <Dialog v-model:visible="productDialog" :style="{ width: '450px' }" header="Product Details" :modal="true" class="p-fluid">
<img :src="'demo/images/product/' + product.image" :alt="product.image" class="product-image" v-if="product.image" /> <img :src="'/demo/images/product/' + product.image" :alt="product.image" class="product-image" v-if="product.image" />
<div class="field"> <div class="field">
<label for="name">Name</label> <label for="name">Name</label>
<InputText id="name" v-model.trim="product.name" required="true" autofocus :class="{ 'p-invalid': submitted && !product.name }" /> <InputText id="name" v-model.trim="product.name" required="true" autofocus :class="{ 'p-invalid': submitted && !product.name }" />

4
pages/datatable/DataTableDemo.vue
View File

@ -58,7 +58,7 @@
</Column> </Column>
<Column header="Agent" sortable filterField="representative" sortField="representative.name" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem"> <Column header="Agent" sortable filterField="representative" sortField="representative.name" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
<template #body="{ data }"> <template #body="{ data }">
<img :alt="data.representative.name" :src="'demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" /> <img :alt="data.representative.name" :src="'/demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
<span class="image-text">{{ data.representative.name }}</span> <span class="image-text">{{ data.representative.name }}</span>
</template> </template>
<template #filter="{ filterModel }"> <template #filter="{ filterModel }">
@ -66,7 +66,7 @@
<MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter"> <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
<template #option="slotProps"> <template #option="slotProps">
<div class="p-multiselect-representative-option"> <div class="p-multiselect-representative-option">
<img :alt="slotProps.option.name" :src="'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" /> <img :alt="slotProps.option.name" :src="'/demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
<span class="image-text">{{ slotProps.option.name }}</span> <span class="image-text">{{ slotProps.option.name }}</span>
</div> </div>
</template> </template>

8
pages/datatable/DataTableDoc.vue
View File

@ -526,7 +526,7 @@ export default {
&lt;Column field="year" header="Year"&gt;&lt;/Column&gt; &lt;Column field="year" header="Year"&gt;&lt;/Column&gt;
&lt;Column field="brand" header="Brand"&gt; &lt;Column field="brand" header="Brand"&gt;
&lt;template #body="slotProps"&gt; &lt;template #body="slotProps"&gt;
&lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand" width="48px"/&gt; &lt;img :src="'/demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand" width="48px"/&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Column&gt; &lt;/Column&gt;
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt; &lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
@ -1133,7 +1133,7 @@ matchModes: [
&lt;template #expansion="slotProps"&gt; &lt;template #expansion="slotProps"&gt;
&lt;div class="car-details"&gt; &lt;div class="car-details"&gt;
&lt;div&gt; &lt;div&gt;
&lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt; &lt;img :src="'/demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt;
&lt;div class="grid"&gt; &lt;div class="grid"&gt;
&lt;div class="col-12"&gt;Vin: &lt;b&gt;&#123;&#123;slotProps.data.vin&#125;&#125;&lt;/b&gt;&lt;/div&gt; &lt;div class="col-12"&gt;Vin: &lt;b&gt;&#123;&#123;slotProps.data.vin&#125;&#125;&lt;/b&gt;&lt;/div&gt;
&lt;div class="col-12"&gt;Year: &lt;b&gt;&#123;&#123;slotProps.data.year&#125;&#125;&lt;/b&gt;&lt;/div&gt; &lt;div class="col-12"&gt;Year: &lt;b&gt;&#123;&#123;slotProps.data.year&#125;&#125;&lt;/b&gt;&lt;/div&gt;
@ -1212,7 +1212,7 @@ export default {
&lt;Dropdown v-model="slotProps.data['brand']" :options="brands" optionLabel="brand" optionValue="value" placeholder="Select a Brand"&gt; &lt;Dropdown v-model="slotProps.data['brand']" :options="brands" optionLabel="brand" optionValue="value" placeholder="Select a Brand"&gt;
&lt;template #option="optionProps"&gt; &lt;template #option="optionProps"&gt;
&lt;div class="p-dropdown-car-option"&gt; &lt;div class="p-dropdown-car-option"&gt;
&lt;img :alt="optionProps.option.brand" :src="'demo/images/car/' + optionProps.option.brand + '.png'" /&gt; &lt;img :alt="optionProps.option.brand" :src="'/demo/images/car/' + optionProps.option.brand + '.png'" /&gt;
&lt;span&gt;{{optionProps.option.brand}}&lt;/span&gt; &lt;span&gt;{{optionProps.option.brand}}&lt;/span&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
@ -1610,7 +1610,7 @@ export default {
&lt;Dropdown v-model="filters['brand']" :options="brands" optionLabel="brand" optionValue="value" placeholder="Select a Brand" class="p-column-filter" :showClear="true"&gt; &lt;Dropdown v-model="filters['brand']" :options="brands" optionLabel="brand" optionValue="value" placeholder="Select a Brand" class="p-column-filter" :showClear="true"&gt;
&lt;template #option="slotProps"&gt; &lt;template #option="slotProps"&gt;
&lt;div class="p-dropdown-car-option"&gt; &lt;div class="p-dropdown-car-option"&gt;
&lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" /&gt; &lt;img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" /&gt;
&lt;span&gt;&#123;&#123;slotProps.option.brand&#125;&#125;&lt;/span&gt; &lt;span&gt;&#123;&#123;slotProps.option.brand&#125;&#125;&lt;/span&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;

8
pages/datatable/DataTableFilterDemo.vue
View File

@ -64,7 +64,7 @@
</Column> </Column>
<Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem"> <Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
<template #body="{ data }"> <template #body="{ data }">
<img :alt="data.representative.name" :src="'demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" /> <img :alt="data.representative.name" :src="'/demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
<span class="image-text">{{ data.representative.name }}</span> <span class="image-text">{{ data.representative.name }}</span>
</template> </template>
<template #filter="{ filterModel }"> <template #filter="{ filterModel }">
@ -72,7 +72,7 @@
<MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter"> <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
<template #option="slotProps"> <template #option="slotProps">
<div class="p-multiselect-representative-option"> <div class="p-multiselect-representative-option">
<img :alt="slotProps.option.name" :src="'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" /> <img :alt="slotProps.option.name" :src="'/demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
<span class="image-text">{{ slotProps.option.name }}</span> <span class="image-text">{{ slotProps.option.name }}</span>
</div> </div>
</template> </template>
@ -178,14 +178,14 @@
</Column> </Column>
<Column header="Agent" filterField="representative" :showFilterMenu="false" style="min-width: 14rem"> <Column header="Agent" filterField="representative" :showFilterMenu="false" style="min-width: 14rem">
<template #body="{ data }"> <template #body="{ data }">
<img :alt="data.representative.name" :src="'demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" /> <img :alt="data.representative.name" :src="'/demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
<span class="image-text">{{ data.representative.name }}</span> <span class="image-text">{{ data.representative.name }}</span>
</template> </template>
<template #filter="{ filterModel, filterCallback }"> <template #filter="{ filterModel, filterCallback }">
<MultiSelect v-model="filterModel.value" @change="filterCallback()" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter"> <MultiSelect v-model="filterModel.value" @change="filterCallback()" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
<template #option="slotProps"> <template #option="slotProps">
<div class="p-multiselect-representative-option"> <div class="p-multiselect-representative-option">
<img :alt="slotProps.option.name" :src="'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" /> <img :alt="slotProps.option.name" :src="'/demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
<span class="image-text">{{ slotProps.option.name }}</span> <span class="image-text">{{ slotProps.option.name }}</span>
</div> </div>
</template> </template>

2
pages/datatable/DataTableRowExpandDemo.vue
View File

@ -21,7 +21,7 @@
<Column field="name" header="Name" sortable></Column> <Column field="name" header="Name" sortable></Column>
<Column header="Image"> <Column header="Image">
<template #body="slotProps"> <template #body="slotProps">
<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" /> <img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" />
</template> </template>
</Column> </Column>
<Column field="price" header="Price" sortable> <Column field="price" header="Price" sortable>

6
pages/datatable/DataTableRowGroupDemo.vue
View File

@ -29,7 +29,7 @@
</Column> </Column>
<Column field="date" header="Date" style="min-width: 200px"></Column> <Column field="date" header="Date" style="min-width: 200px"></Column>
<template #groupheader="slotProps"> <template #groupheader="slotProps">
<img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" /> <img :alt="slotProps.data.representative.name" :src="'/demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
<span class="image-text">{{ slotProps.data.representative.name }}</span> <span class="image-text">{{ slotProps.data.representative.name }}</span>
</template> </template>
<template #groupfooter="slotProps"> <template #groupfooter="slotProps">
@ -73,7 +73,7 @@
</Column> </Column>
<Column field="date" header="Date"></Column> <Column field="date" header="Date"></Column>
<template #groupheader="slotProps"> <template #groupheader="slotProps">
<img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" /> <img :alt="slotProps.data.representative.name" :src="'/demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
<span class="image-text">{{ slotProps.data.representative.name }}</span> <span class="image-text">{{ slotProps.data.representative.name }}</span>
</template> </template>
<template #groupfooter="slotProps"> <template #groupfooter="slotProps">
@ -93,7 +93,7 @@
</Column> </Column>
<Column field="representative.name" header="Representative"> <Column field="representative.name" header="Representative">
<template #body="slotProps"> <template #body="slotProps">
<img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" /> <img :alt="slotProps.data.representative.name" :src="'/demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
<span class="image-text">{{ slotProps.data.representative.name }}</span> <span class="image-text">{{ slotProps.data.representative.name }}</span>
</template> </template>
</Column> </Column>

2
pages/datatable/DataTableScrollDemo.vue
View File

@ -116,7 +116,7 @@
</Column> </Column>
<Column field="date" header="Date" style="min-width: 200px"></Column> <Column field="date" header="Date" style="min-width: 200px"></Column>
<template #groupheader="slotProps"> <template #groupheader="slotProps">
<img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" /> <img :alt="slotProps.data.representative.name" :src="'/demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
<span class="image-text">{{ slotProps.data.representative.name }}</span> <span class="image-text">{{ slotProps.data.representative.name }}</span>
</template> </template>
<template #groupfooter="slotProps"> <template #groupfooter="slotProps">

8
pages/datatable/DataTableStateDemo.vue
View File

@ -45,14 +45,14 @@
</Column> </Column>
<Column header="Representative" :sortable="true" sortField="representative.name" filterField="representative.name" filterMatchMode="in" style="width: 25%"> <Column header="Representative" :sortable="true" sortField="representative.name" filterField="representative.name" filterMatchMode="in" style="width: 25%">
<template #body="slotProps"> <template #body="slotProps">
<img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" /> <img :alt="slotProps.data.representative.name" :src="'/demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
<span class="image-text">{{ slotProps.data.representative.name }}</span> <span class="image-text">{{ slotProps.data.representative.name }}</span>
</template> </template>
<template #filter> <template #filter>
<MultiSelect v-model="filters1['representative.name']" :options="representatives" optionLabel="name" optionValue="name" placeholder="All" class="p-column-filter"> <MultiSelect v-model="filters1['representative.name']" :options="representatives" optionLabel="name" optionValue="name" placeholder="All" class="p-column-filter">
<template #option="slotProps"> <template #option="slotProps">
<div class="p-multiselect-representative-option"> <div class="p-multiselect-representative-option">
<img :alt="slotProps.option.name" :src="'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" /> <img :alt="slotProps.option.name" :src="'/demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
<span class="image-text">{{ slotProps.option.name }}</span> <span class="image-text">{{ slotProps.option.name }}</span>
</div> </div>
</template> </template>
@ -111,14 +111,14 @@
</Column> </Column>
<Column header="Representative" :sortable="true" sortField="representative.name" filterField="representative.name" filterMatchMode="in" style="width: 25%"> <Column header="Representative" :sortable="true" sortField="representative.name" filterField="representative.name" filterMatchMode="in" style="width: 25%">
<template #body="slotProps"> <template #body="slotProps">
<img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" /> <img :alt="slotProps.data.representative.name" :src="'/demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
<span class="image-text">{{ slotProps.data.representative.name }}</span> <span class="image-text">{{ slotProps.data.representative.name }}</span>
</template> </template>
<template #filter> <template #filter>
<MultiSelect v-model="filters2['representative.name']" :options="representatives" optionLabel="name" optionValue="name" placeholder="All" class="p-column-filter"> <MultiSelect v-model="filters2['representative.name']" :options="representatives" optionLabel="name" optionValue="name" placeholder="All" class="p-column-filter">
<template #option="slotProps"> <template #option="slotProps">
<div class="p-multiselect-representative-option"> <div class="p-multiselect-representative-option">
<img :alt="slotProps.option.name" :src="'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" /> <img :alt="slotProps.option.name" :src="'/demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
<span class="image-text">{{ slotProps.option.name }}</span> <span class="image-text">{{ slotProps.option.name }}</span>
</div> </div>
</template> </template>

2
pages/datatable/DataTableTemplatingDemo.vue
View File

@ -20,7 +20,7 @@
<Column field="name" header="Name"></Column> <Column field="name" header="Name"></Column>
<Column header="Image"> <Column header="Image">
<template #body="slotProps"> <template #body="slotProps">
<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" /> <img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" />
</template> </template>
</Column> </Column>
<Column field="price" header="Price"> <Column field="price" header="Price">

4
pages/dataview/DataViewDoc.vue
View File

@ -48,7 +48,7 @@ export default {
&lt;div class="col-12"&gt; &lt;div class="col-12"&gt;
&lt;div class="car-details"&gt; &lt;div class="car-details"&gt;
&lt;div&gt; &lt;div&gt;
&lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt; &lt;img :src="'/demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt;
&lt;div class="grid"&gt; &lt;div class="grid"&gt;
&lt;div class="col-12"&gt;Vin: &lt;b&gt;&#123;&#123;slotProps.data.vin&#125;&#125;&lt;/b&gt;&lt;/div&gt; &lt;div class="col-12"&gt;Vin: &lt;b&gt;&#123;&#123;slotProps.data.vin&#125;&#125;&lt;/b&gt;&lt;/div&gt;
&lt;div class="col-12"&gt;Year: &lt;b&gt;&#123;&#123;slotProps.data.year&#125;&#125;&lt;/b&gt;&lt;/div&gt; &lt;div class="col-12"&gt;Year: &lt;b&gt;&#123;&#123;slotProps.data.year&#125;&#125;&lt;/b&gt;&lt;/div&gt;
@ -63,7 +63,7 @@ export default {
&lt;template #grid="slotProps"&gt; &lt;template #grid="slotProps"&gt;
&lt;div style="padding: .5em" class="col-12 md:col-3"&gt; &lt;div style="padding: .5em" class="col-12 md:col-3"&gt;
&lt;Panel :header="slotProps.data.vin" style="text-align: center"&gt; &lt;Panel :header="slotProps.data.vin" style="text-align: center"&gt;
&lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt; &lt;img :src="'/demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt;
&lt;div class="car-detail"&gt;{{slotProps.data.year}} - {{slotProps.data.color}}&lt;/div&gt; &lt;div class="car-detail"&gt;{{slotProps.data.year}} - {{slotProps.data.color}}&lt;/div&gt;
&lt;Button icon="pi pi-search"&gt;&lt;/Button&gt; &lt;Button icon="pi pi-search"&gt;&lt;/Button&gt;
&lt;/Panel&gt; &lt;/Panel&gt;

4
pages/dataview/index.vue
View File

@ -25,7 +25,7 @@
<template #list="slotProps"> <template #list="slotProps">
<div class="col-12"> <div class="col-12">
<div class="product-list-item"> <div class="product-list-item">
<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" /> <img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" />
<div class="product-list-detail"> <div class="product-list-detail">
<div class="product-name">{{ slotProps.data.name }}</div> <div class="product-name">{{ slotProps.data.name }}</div>
<div class="product-description">{{ slotProps.data.description }}</div> <div class="product-description">{{ slotProps.data.description }}</div>
@ -52,7 +52,7 @@
<span :class="'product-badge status-' + slotProps.data.inventoryStatus.toLowerCase()">{{ slotProps.data.inventoryStatus }}</span> <span :class="'product-badge status-' + slotProps.data.inventoryStatus.toLowerCase()">{{ slotProps.data.inventoryStatus }}</span>
</div> </div>
<div class="product-grid-item-content"> <div class="product-grid-item-content">
<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" /> <img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" />
<div class="product-name">{{ slotProps.data.name }}</div> <div class="product-name">{{ slotProps.data.name }}</div>
<div class="product-description">{{ slotProps.data.description }}</div> <div class="product-description">{{ slotProps.data.description }}</div>
<Rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false"></Rating> <Rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false"></Rating>

2
pages/deferredcontent/index.vue
View File

@ -13,7 +13,7 @@
<div style="height: 800px">Scroll down to lazy load an image and the DataTable which initiates a query that is not executed on initial page load to speed up load performance.</div> <div style="height: 800px">Scroll down to lazy load an image and the DataTable which initiates a query that is not executed on initial page load to speed up load performance.</div>
<!-- <DeferredContent @load="onImageLoad"> <!-- <DeferredContent @load="onImageLoad">
<img src="demo/images/nature/nature4.jpg" alt="Nature"/> <img src="/demo/images/nature/nature4.jpg" alt="Nature"/>
</DeferredContent> --> </DeferredContent> -->
<div style="height: 500px"></div> <div style="height: 500px"></div>

74
pages/dock/DockDoc.vue
View File

@ -28,19 +28,19 @@ import Dock from 'primevue/dock';
items: [ items: [
{ {
label: "Finder", label: "Finder",
icon: "demo/images/dock/finder.svg" icon: "/demo/images/dock/finder.svg"
}, },
{ {
label: "App Store", label: "App Store",
icon: "demo/images/dock/appstore.svg" icon: "/demo/images/dock/appstore.svg"
}, },
{ {
label: "Photos", label: "Photos",
icon: "demo/images/dock/photos.svg" icon: "/demo/images/dock/photos.svg"
}, },
{ {
label: "Trash", label: "Trash",
icon: "demo/images/dock/trash.png" icon: "/demo/images/dock/trash.png"
} }
] ]
} }
@ -258,46 +258,46 @@ export default {
dockItems: [ dockItems: [
{ {
label: 'Finder', label: 'Finder',
icon: "demo/images/dock/finder.svg", icon: "/demo/images/dock/finder.svg",
command: () => { command: () => {
this.displayFinder = true; this.displayFinder = true;
} }
}, },
{ {
label: 'Terminal', label: 'Terminal',
icon: "demo/images/dock/terminal.svg", icon: "/demo/images/dock/terminal.svg",
command: () => { command: () => {
this.displayTerminal = true; this.displayTerminal = true;
} }
}, },
{ {
label: 'App Store', label: 'App Store',
icon: "demo/images/dock/appstore.svg", icon: "/demo/images/dock/appstore.svg",
command: () => { command: () => {
this.$toast.add({ severity: 'error', summary: 'An unexpected error occurred while signing in.', detail: 'UNTRUSTED_CERT_TITLE', group: 'tc', life: 3000 }); this.$toast.add({ severity: 'error', summary: 'An unexpected error occurred while signing in.', detail: 'UNTRUSTED_CERT_TITLE', group: 'tc', life: 3000 });
} }
}, },
{ {
label: 'Safari', label: 'Safari',
icon: "demo/images/dock/safari.svg", icon: "/demo/images/dock/safari.svg",
command: () => { command: () => {
this.$toast.add({ severity: 'warn', summary: 'Safari has stopped working', group: 'tc', life: 3000 }); this.$toast.add({ severity: 'warn', summary: 'Safari has stopped working', group: 'tc', life: 3000 });
} }
}, },
{ {
label: 'Photos', label: 'Photos',
icon: "demo/images/dock/photos.svg", icon: "/demo/images/dock/photos.svg",
command: () => { command: () => {
this.displayPhotos = true; this.displayPhotos = true;
} }
}, },
{ {
label: 'GitHub', label: 'GitHub',
icon: "demo/images/dock/github.svg", icon: "/demo/images/dock/github.svg",
}, },
{ {
label: 'Trash', label: 'Trash',
icon: "demo/images/dock/trash.png", icon: "/demo/images/dock/trash.png",
command: () => { command: () => {
this.$toast.add({ severity: 'info', summary: 'Empty Trash', life: 3000 }); this.$toast.add({ severity: 'info', summary: 'Empty Trash', life: 3000 });
} }
@ -306,19 +306,19 @@ export default {
dockBasicItems: [ dockBasicItems: [
{ {
label: "Finder", label: "Finder",
icon: "demo/images/dock/finder.svg" icon: "/demo/images/dock/finder.svg"
}, },
{ {
label: "App Store", label: "App Store",
icon: "demo/images/dock/appstore.svg" icon: "/demo/images/dock/appstore.svg"
}, },
{ {
label: "Photos", label: "Photos",
icon: "demo/images/dock/photos.svg" icon: "/demo/images/dock/photos.svg"
}, },
{ {
label: "Trash", label: "Trash",
icon: "demo/images/dock/trash.png" icon: "/demo/images/dock/trash.png"
} }
], ],
menubarItems: [ menubarItems: [
@ -674,46 +674,46 @@ export default {
const dockItems = ref([ const dockItems = ref([
{ {
label: 'Finder', label: 'Finder',
icon: "demo/images/dock/finder.svg", icon: "/demo/images/dock/finder.svg",
command: () => { command: () => {
displayFinder.value = true; displayFinder.value = true;
} }
}, },
{ {
label: 'Terminal', label: 'Terminal',
icon: "demo/images/dock/terminal.svg", icon: "/demo/images/dock/terminal.svg",
command: () => { command: () => {
displayTerminal.value = true; displayTerminal.value = true;
} }
}, },
{ {
label: 'App Store', label: 'App Store',
icon: "demo/images/dock/appstore.svg", icon: "/demo/images/dock/appstore.svg",
command: () => { command: () => {
toast.add({ severity: 'error', summary: 'An unexpected error occurred while signing in.', detail: 'UNTRUSTED_CERT_TITLE', group: 'tc', life: 3000 }); toast.add({ severity: 'error', summary: 'An unexpected error occurred while signing in.', detail: 'UNTRUSTED_CERT_TITLE', group: 'tc', life: 3000 });
} }
}, },
{ {
label: 'Safari', label: 'Safari',
icon: "demo/images/dock/safari.svg", icon: "/demo/images/dock/safari.svg",
command: () => { command: () => {
toast.add({ severity: 'warn', summary: 'Safari has stopped working', group: 'tc', life: 3000 }); toast.add({ severity: 'warn', summary: 'Safari has stopped working', group: 'tc', life: 3000 });
} }
}, },
{ {
label: 'Photos', label: 'Photos',
icon: "demo/images/dock/photos.svg", icon: "/demo/images/dock/photos.svg",
command: () => { command: () => {
displayPhotos.value = true; displayPhotos.value = true;
} }
}, },
{ {
label: 'GitHub', label: 'GitHub',
icon: "demo/images/dock/github.svg", icon: "/demo/images/dock/github.svg",
}, },
{ {
label: 'Trash', label: 'Trash',
icon: "demo/images/dock/trash.png", icon: "/demo/images/dock/trash.png",
command: () => { command: () => {
toast.add({ severity: 'info', summary: 'Empty Trash', life: 3000 }); toast.add({ severity: 'info', summary: 'Empty Trash', life: 3000 });
} }
@ -722,19 +722,19 @@ export default {
const dockBasicItems = ref([ const dockBasicItems = ref([
{ {
label: "Finder", label: "Finder",
icon: "demo/images/dock/finder.svg" icon: "/demo/images/dock/finder.svg"
}, },
{ {
label: "App Store", label: "App Store",
icon: "demo/images/dock/appstore.svg" icon: "/demo/images/dock/appstore.svg"
}, },
{ {
label: "Photos", label: "Photos",
icon: "demo/images/dock/photos.svg" icon: "/demo/images/dock/photos.svg"
}, },
{ {
label: "Trash", label: "Trash",
icon: "demo/images/dock/trash.png" icon: "/demo/images/dock/trash.png"
} }
]); ]);
const menubarItems = ref([ const menubarItems = ref([
@ -1113,46 +1113,46 @@ export default {
const dockItems = ref([ const dockItems = ref([
{ {
label: 'Finder', label: 'Finder',
icon: "demo/images/dock/finder.svg", icon: "/demo/images/dock/finder.svg",
command: () => { command: () => {
displayFinder.value = true; displayFinder.value = true;
} }
}, },
{ {
label: 'Terminal', label: 'Terminal',
icon: "demo/images/dock/terminal.svg", icon: "/demo/images/dock/terminal.svg",
command: () => { command: () => {
displayTerminal.value = true; displayTerminal.value = true;
} }
}, },
{ {
label: 'App Store', label: 'App Store',
icon: "demo/images/dock/appstore.svg", icon: "/demo/images/dock/appstore.svg",
command: () => { command: () => {
toast.add({ severity: 'error', summary: 'An unexpected error occurred while signing in.', detail: 'UNTRUSTED_CERT_TITLE', group: 'tc', life: 3000 }); toast.add({ severity: 'error', summary: 'An unexpected error occurred while signing in.', detail: 'UNTRUSTED_CERT_TITLE', group: 'tc', life: 3000 });
} }
}, },
{ {
label: 'Safari', label: 'Safari',
icon: "demo/images/dock/safari.svg", icon: "/demo/images/dock/safari.svg",
command: () => { command: () => {
toast.add({ severity: 'warn', summary: 'Safari has stopped working', group: 'tc', life: 3000 }); toast.add({ severity: 'warn', summary: 'Safari has stopped working', group: 'tc', life: 3000 });
} }
}, },
{ {
label: 'Photos', label: 'Photos',
icon: "demo/images/dock/photos.svg", icon: "/demo/images/dock/photos.svg",
command: () => { command: () => {
displayPhotos.value = true; displayPhotos.value = true;
} }
}, },
{ {
label: 'GitHub', label: 'GitHub',
icon: "demo/images/dock/github.svg", icon: "/demo/images/dock/github.svg",
}, },
{ {
label: 'Trash', label: 'Trash',
icon: "demo/images/dock/trash.png", icon: "/demo/images/dock/trash.png",
command: () => { command: () => {
toast.add({ severity: 'info', summary: 'Empty Trash', life: 3000 }); toast.add({ severity: 'info', summary: 'Empty Trash', life: 3000 });
} }
@ -1161,19 +1161,19 @@ export default {
const dockBasicItems = ref([ const dockBasicItems = ref([
{ {
label: "Finder", label: "Finder",
icon: "demo/images/dock/finder.svg" icon: "/demo/images/dock/finder.svg"
}, },
{ {
label: "App Store", label: "App Store",
icon: "demo/images/dock/appstore.svg" icon: "/demo/images/dock/appstore.svg"
}, },
{ {
label: "Photos", label: "Photos",
icon: "demo/images/dock/photos.svg" icon: "/demo/images/dock/photos.svg"
}, },
{ {
label: "Trash", label: "Trash",
icon: "demo/images/dock/trash.png" icon: "/demo/images/dock/trash.png"
} }
]); ]);
const menubarItems = ref([ const menubarItems = ref([

22
pages/dock/index.vue
View File

@ -97,46 +97,46 @@ export default {
dockItems: [ dockItems: [
{ {
label: 'Finder', label: 'Finder',
icon: 'demo/images/dock/finder.svg', icon: '/demo/images/dock/finder.svg',
command: () => { command: () => {
this.displayFinder = true; this.displayFinder = true;
} }
}, },
{ {
label: 'Terminal', label: 'Terminal',
icon: 'demo/images/dock/terminal.svg', icon: '/demo/images/dock/terminal.svg',
command: () => { command: () => {
this.displayTerminal = true; this.displayTerminal = true;
} }
}, },
{ {
label: 'App Store', label: 'App Store',
icon: 'demo/images/dock/appstore.svg', icon: '/demo/images/dock/appstore.svg',
command: () => { command: () => {
this.$toast.add({ severity: 'error', summary: 'An unexpected error occurred while signing in.', detail: 'UNTRUSTED_CERT_TITLE', group: 'tc', life: 3000 }); this.$toast.add({ severity: 'error', summary: 'An unexpected error occurred while signing in.', detail: 'UNTRUSTED_CERT_TITLE', group: 'tc', life: 3000 });
} }
}, },
{ {
label: 'Safari', label: 'Safari',
icon: 'demo/images/dock/safari.svg', icon: '/demo/images/dock/safari.svg',
command: () => { command: () => {
this.$toast.add({ severity: 'warn', summary: 'Safari has stopped working', group: 'tc', life: 3000 }); this.$toast.add({ severity: 'warn', summary: 'Safari has stopped working', group: 'tc', life: 3000 });
} }
}, },
{ {
label: 'Photos', label: 'Photos',
icon: 'demo/images/dock/photos.svg', icon: '/demo/images/dock/photos.svg',
command: () => { command: () => {
this.displayPhotos = true; this.displayPhotos = true;
} }
}, },
{ {
label: 'GitHub', label: 'GitHub',
icon: 'demo/images/dock/github.svg' icon: '/demo/images/dock/github.svg'
}, },
{ {
label: 'Trash', label: 'Trash',
icon: 'demo/images/dock/trash.png', icon: '/demo/images/dock/trash.png',
command: () => { command: () => {
this.$toast.add({ severity: 'info', summary: 'Empty Trash', life: 3000 }); this.$toast.add({ severity: 'info', summary: 'Empty Trash', life: 3000 });
} }
@ -145,19 +145,19 @@ export default {
dockBasicItems: [ dockBasicItems: [
{ {
label: 'Finder', label: 'Finder',
icon: 'demo/images/dock/finder.svg' icon: '/demo/images/dock/finder.svg'
}, },
{ {
label: 'App Store', label: 'App Store',
icon: 'demo/images/dock/appstore.svg' icon: '/demo/images/dock/appstore.svg'
}, },
{ {
label: 'Photos', label: 'Photos',
icon: 'demo/images/dock/photos.svg' icon: '/demo/images/dock/photos.svg'
}, },
{ {
label: 'Trash', label: 'Trash',
icon: 'demo/images/dock/trash.png' icon: '/demo/images/dock/trash.png'
} }
], ],
menubarItems: [ menubarItems: [

4
pages/dropdown/DropdownDoc.vue
View File

@ -104,7 +104,7 @@ export default {
&lt;Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" :filter="true" placeholder="Select a Car" :showClear="true"&gt; &lt;Dropdown v-model="selectedCar" :options="cars" optionLabel="brand" :filter="true" placeholder="Select a Car" :showClear="true"&gt;
&lt;template #value="slotProps"&gt; &lt;template #value="slotProps"&gt;
&lt;div class="p-dropdown-car-value" v-if="slotProps.value"&gt; &lt;div class="p-dropdown-car-value" v-if="slotProps.value"&gt;
&lt;img :alt="slotProps.value.brand" :src="'demo/images/car/' + slotProps.value.brand + '.png'" /&gt; &lt;img :alt="slotProps.value.brand" :src="'/demo/images/car/' + slotProps.value.brand + '.png'" /&gt;
&lt;span&gt;{{slotProps.value.brand}}&lt;/span&gt; &lt;span&gt;{{slotProps.value.brand}}&lt;/span&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;span v-else&gt; &lt;span v-else&gt;
@ -113,7 +113,7 @@ export default {
&lt;/template&gt; &lt;/template&gt;
&lt;template #option="slotProps"&gt; &lt;template #option="slotProps"&gt;
&lt;div class="p-dropdown-car-option"&gt; &lt;div class="p-dropdown-car-option"&gt;
&lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" /&gt; &lt;img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" /&gt;
&lt;span&gt;{{slotProps.option.brand}}&lt;/span&gt; &lt;span&gt;{{slotProps.option.brand}}&lt;/span&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;

6
pages/dynamicdialog/DynamicDialogDoc.vue
View File

@ -512,7 +512,7 @@ export default {
<p-column field="name" header="Name"></p-column> <p-column field="name" header="Name"></p-column>
<p-column header="Image"> <p-column header="Image">
<template #body="slotProps"> <template #body="slotProps">
<img :src="'demo/images/product/' + slotProps.data.image" @error="(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'" :alt="slotProps.data.name" class="shadow-2 w-4rem" /> <img :src="'/demo/images/product/' + slotProps.data.image" @error="(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'" :alt="slotProps.data.name" class="shadow-2 w-4rem" />
</template> </template>
</p-column> </p-column>
<p-column field="category" header="Category"></p-column> <p-column field="category" header="Category"></p-column>
@ -610,7 +610,7 @@ export default {
<Column field="name" header="Name"></Column> <Column field="name" header="Name"></Column>
<Column header="Image"> <Column header="Image">
<template #body="slotProps"> <template #body="slotProps">
<img :src="'demo/images/product/' + slotProps.data.image" @error="(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'" :alt="slotProps.data.name" class="shadow-2 w-4rem" /> <img :src="'/demo/images/product/' + slotProps.data.image" @error="(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'" :alt="slotProps.data.name" class="shadow-2 w-4rem" />
</template> </template>
</Column> </Column>
<Column field="category" header="Category"></Column> <Column field="category" header="Category"></Column>
@ -709,7 +709,7 @@ export default {
<Column field="name" header="Name"></Column> <Column field="name" header="Name"></Column>
<Column header="Image"> <Column header="Image">
<template #body="slotProps"> <template #body="slotProps">
<img :src="'demo/images/product/' + slotProps.data.image" @error="(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'" :alt="slotProps.data.name" class="shadow-2 w-4rem" /> <img :src="'/demo/images/product/' + slotProps.data.image" @error="(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'" :alt="slotProps.data.name" class="shadow-2 w-4rem" />
</template> </template>
</Column> </Column>
<Column field="category" header="Category"></Column> <Column field="category" header="Category"></Column>

2
pages/dynamicdialog/ProductListDemo.vue
View File

@ -8,7 +8,7 @@
<Column field="name" header="Name"></Column> <Column field="name" header="Name"></Column>
<Column header="Image"> <Column header="Image">
<template #body="slotProps"> <template #body="slotProps">
<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="shadow-2 w-4rem" /> <img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="shadow-2 w-4rem" />
</template> </template>
</Column> </Column>
<Column field="category" header="Category"></Column> <Column field="category" header="Category"></Column>

60
pages/galleria/GalleriaDoc.vue
View File

@ -32,92 +32,92 @@ import Galleria from 'primevue/galleria';
{ {
"data":[ "data":[
{ {
"itemImageSrc": "demo/images/galleria/galleria1.jpg", "itemImageSrc": "/demo/images/galleria/galleria1.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria1s.jpg", "thumbnailImageSrc": "/demo/images/galleria/galleria1s.jpg",
"alt": "Description for Image 1", "alt": "Description for Image 1",
"title": "Title 1" "title": "Title 1"
}, },
{ {
"itemImageSrc": "demo/images/galleria/galleria2.jpg", "itemImageSrc": "/demo/images/galleria/galleria2.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria2s.jpg", "thumbnailImageSrc": "/demo/images/galleria/galleria2s.jpg",
"alt": "Description for Image 2", "alt": "Description for Image 2",
"title": "Title 2" "title": "Title 2"
}, },
{ {
"itemImageSrc": "demo/images/galleria/galleria3.jpg", "itemImageSrc": "/demo/images/galleria/galleria3.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria3s.jpg", "thumbnailImageSrc": "/demo/images/galleria/galleria3s.jpg",
"alt": "Description for Image 3", "alt": "Description for Image 3",
"title": "Title 3" "title": "Title 3"
}, },
{ {
"itemImageSrc": "demo/images/galleria/galleria4.jpg", "itemImageSrc": "/demo/images/galleria/galleria4.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria4s.jpg", "thumbnailImageSrc": "/demo/images/galleria/galleria4s.jpg",
"alt": "Description for Image 4", "alt": "Description for Image 4",
"title": "Title 4" "title": "Title 4"
}, },
{ {
"itemImageSrc": "demo/images/galleria/galleria5.jpg", "itemImageSrc": "/demo/images/galleria/galleria5.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria5s.jpg", "thumbnailImageSrc": "/demo/images/galleria/galleria5s.jpg",
"alt": "Description for Image 5", "alt": "Description for Image 5",
"title": "Title 5" "title": "Title 5"
}, },
{ {
"itemImageSrc": "demo/images/galleria/galleria6.jpg", "itemImageSrc": "/demo/images/galleria/galleria6.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria6s.jpg", "thumbnailImageSrc": "/demo/images/galleria/galleria6s.jpg",
"alt": "Description for Image 6", "alt": "Description for Image 6",
"title": "Title 6" "title": "Title 6"
}, },
{ {
"itemImageSrc": "demo/images/galleria/galleria7.jpg", "itemImageSrc": "/demo/images/galleria/galleria7.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria7s.jpg", "thumbnailImageSrc": "/demo/images/galleria/galleria7s.jpg",
"alt": "Description for Image 7", "alt": "Description for Image 7",
"title": "Title 7" "title": "Title 7"
}, },
{ {
"itemImageSrc": "demo/images/galleria/galleria8.jpg", "itemImageSrc": "/demo/images/galleria/galleria8.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria8s.jpg", "thumbnailImageSrc": "/demo/images/galleria/galleria8s.jpg",
"alt": "Description for Image 8", "alt": "Description for Image 8",
"title": "Title 8" "title": "Title 8"
}, },
{ {
"itemImageSrc": "demo/images/galleria/galleria9.jpg", "itemImageSrc": "/demo/images/galleria/galleria9.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria9s.jpg", "thumbnailImageSrc": "/demo/images/galleria/galleria9s.jpg",
"alt": "Description for Image 9", "alt": "Description for Image 9",
"title": "Title 9" "title": "Title 9"
}, },
{ {
"itemImageSrc": "demo/images/galleria/galleria10.jpg", "itemImageSrc": "/demo/images/galleria/galleria10.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria10s.jpg", "thumbnailImageSrc": "/demo/images/galleria/galleria10s.jpg",
"alt": "Description for Image 10", "alt": "Description for Image 10",
"title": "Title 10" "title": "Title 10"
}, },
{ {
"itemImageSrc": "demo/images/galleria/galleria11.jpg", "itemImageSrc": "/demo/images/galleria/galleria11.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria11s.jpg", "thumbnailImageSrc": "/demo/images/galleria/galleria11s.jpg",
"alt": "Description for Image 11", "alt": "Description for Image 11",
"title": "Title 11" "title": "Title 11"
}, },
{ {
"itemImageSrc": "demo/images/galleria/galleria12.jpg", "itemImageSrc": "/demo/images/galleria/galleria12.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria12s.jpg", "thumbnailImageSrc": "/demo/images/galleria/galleria12s.jpg",
"alt": "Description for Image 12", "alt": "Description for Image 12",
"title": "Title 12" "title": "Title 12"
}, },
{ {
"itemImageSrc": "demo/images/galleria/galleria13.jpg", "itemImageSrc": "/demo/images/galleria/galleria13.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria13s.jpg", "thumbnailImageSrc": "/demo/images/galleria/galleria13s.jpg",
"alt": "Description for Image 13", "alt": "Description for Image 13",
"title": "Title 13" "title": "Title 13"
}, },
{ {
"itemImageSrc": "demo/images/galleria/galleria14.jpg", "itemImageSrc": "/demo/images/galleria/galleria14.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria14s.jpg", "thumbnailImageSrc": "/demo/images/galleria/galleria14s.jpg",
"alt": "Description for Image 14", "alt": "Description for Image 14",
"title": "Title 14" "title": "Title 14"
}, },
{ {
"itemImageSrc": "demo/images/galleria/galleria15.jpg", "itemImageSrc": "/demo/images/galleria/galleria15.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria15s.jpg", "thumbnailImageSrc": "/demo/images/galleria/galleria15s.jpg",
"alt": "Description for Image 15", "alt": "Description for Image 15",
"title": "Title 15" "title": "Title 15"
} }

4
pages/image/index.vue
View File

@ -11,10 +11,10 @@
<div class="content-section implementation"> <div class="content-section implementation">
<div class="card"> <div class="card">
<h5>Basic</h5> <h5>Basic</h5>
<Image src="demo/images/galleria/galleria1.jpg" alt="Image" width="250" /> <Image src="/demo/images/galleria/galleria1.jpg" alt="Image" width="250" />
<h5>Preview</h5> <h5>Preview</h5>
<Image src="demo/images/galleria/galleria11.jpg" alt="Image" width="250" preview /> <Image src="/demo/images/galleria/galleria11.jpg" alt="Image" width="250" preview />
</div> </div>
</div> </div>

2
pages/inplace/InplaceDoc.vue
View File

@ -23,7 +23,7 @@ import Inplace from 'primevue/inplace';
&lt;span style="margin-left:.5rem; vertical-align: middle"&gt;View Picture&lt;/span&gt; &lt;span style="margin-left:.5rem; vertical-align: middle"&gt;View Picture&lt;/span&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #content&gt; &lt;template #content&gt;
&lt;img src="demo/images/nature/nature1.jpg" /&gt; &lt;img src="/demo/images/nature/nature1.jpg" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Inplace&gt; &lt;/Inplace&gt;
</template> </template>

2
pages/inplace/index.vue
View File

@ -27,7 +27,7 @@
<span style="margin-left: 0.5rem; vertical-align: middle">View Picture</span> <span style="margin-left: 0.5rem; vertical-align: middle">View Picture</span>
</template> </template>
<template #content> <template #content>
<img src="demo/images/nature/nature1.jpg" /> <img src="/demo/images/nature/nature1.jpg" />
</template> </template>
</Inplace> </Inplace>

14
pages/landing/BlockSection.vue
View File

@ -13,7 +13,7 @@
<div class="prime-block flex align-self-stretch p-1"> <div class="prime-block flex align-self-stretch p-1">
<div class="block-sidebar w-1 p-3"> <div class="block-sidebar w-1 p-3">
<div class="logo"> <div class="logo">
<img src="demo/images/landing/blocks/logo-1.svg" alt="block logo" /> <img src="/demo/images/landing/blocks/logo-1.svg" alt="block logo" />
</div> </div>
<div class="sidebar-menu mt-5"> <div class="sidebar-menu mt-5">
<div class="bar w-8 my-3"></div> <div class="bar w-8 my-3"></div>
@ -106,7 +106,7 @@
<div class="prime-block p-1 flex align-self-stretch flex-column"> <div class="prime-block p-1 flex align-self-stretch flex-column">
<div class="block-header py-3 px-4 flex justify-content-between align-items-center"> <div class="block-header py-3 px-4 flex justify-content-between align-items-center">
<div class="logo pr-5"> <div class="logo pr-5">
<img src="demo/images/landing/blocks/logo-1.svg" alt="block logo" /> <img src="/demo/images/landing/blocks/logo-1.svg" alt="block logo" />
</div> </div>
<div class="flex-auto sidebar-menu flex"> <div class="flex-auto sidebar-menu flex">
<div class="bar w-2rem mx-2"></div> <div class="bar w-2rem mx-2"></div>
@ -148,7 +148,7 @@
<div class="prime-block flex align-self-stretch p-1"> <div class="prime-block flex align-self-stretch p-1">
<div class="block-sidebar p-3"> <div class="block-sidebar p-3">
<div class="logo"> <div class="logo">
<img src="demo/images/landing/blocks/logo-2.svg" alt="block logo" /> <img src="/demo/images/landing/blocks/logo-2.svg" alt="block logo" />
</div> </div>
<div class="sidebar-menu mt-5"> <div class="sidebar-menu mt-5">
<div class="circle my-3"></div> <div class="circle my-3"></div>
@ -214,7 +214,7 @@
<div class="prime-block flex align-self-stretch p-1"> <div class="prime-block flex align-self-stretch p-1">
<div class="block-sidebar w-1 p-3"> <div class="block-sidebar w-1 p-3">
<div class="logo"> <div class="logo">
<img src="demo/images/landing/blocks/logo-1.svg" alt="block logo" /> <img src="/demo/images/landing/blocks/logo-1.svg" alt="block logo" />
</div> </div>
<div class="sidebar-menu mt-5"> <div class="sidebar-menu mt-5">
<div class="bar w-8 my-3"></div> <div class="bar w-8 my-3"></div>
@ -278,7 +278,7 @@
<div class="prime-block flex align-self-stretch p-1"> <div class="prime-block flex align-self-stretch p-1">
<div class="block-sidebar p-3"> <div class="block-sidebar p-3">
<div class="logo"> <div class="logo">
<img src="demo/images/landing/blocks/logo-2.svg" alt="block logo" /> <img src="/demo/images/landing/blocks/logo-2.svg" alt="block logo" />
</div> </div>
<div class="sidebar-menu mt-5"> <div class="sidebar-menu mt-5">
<div class="circle my-3"></div> <div class="circle my-3"></div>
@ -341,7 +341,7 @@
<div class="prime-block p-1 flex align-self-stretch flex-column"> <div class="prime-block p-1 flex align-self-stretch flex-column">
<div class="block-header py-3 px-4 flex justify-content-between align-items-center"> <div class="block-header py-3 px-4 flex justify-content-between align-items-center">
<div class="logo pr-5"> <div class="logo pr-5">
<img src="demo/images/landing/blocks/logo-1.svg" alt="block logo" /> <img src="/demo/images/landing/blocks/logo-1.svg" alt="block logo" />
</div> </div>
<div class="flex-auto sidebar-menu flex"> <div class="flex-auto sidebar-menu flex">
<div class="bar w-2rem mx-2"></div> <div class="bar w-2rem mx-2"></div>
@ -356,7 +356,7 @@
<div class="block-main h-full flex justify-content-center align-items-center flex-column"> <div class="block-main h-full flex justify-content-center align-items-center flex-column">
<div class="block-item block-item-active animation-2 mx-3 w-8rem text-center flex flex-column align-items-center overflow-visible"> <div class="block-item block-item-active animation-2 mx-3 w-8rem text-center flex flex-column align-items-center overflow-visible">
<div class="-mt-4"> <div class="-mt-4">
<img src="demo/images/landing/blocks/question.svg" alt="question mark" /> <img src="/demo/images/landing/blocks/question.svg" alt="question mark" />
</div> </div>
<div class="bar w-2rem mt-2"></div> <div class="bar w-2rem mt-2"></div>
<div class="bar w-6rem mt-2"></div> <div class="bar w-6rem mt-2"></div>

14
pages/landing/ComponentSection.vue
View File

@ -35,31 +35,31 @@
<div class="box p-4"> <div class="box p-4">
<ul class="list-none p-0 m-0"> <ul class="list-none p-0 m-0">
<li class="flex align-items-center mb-3"> <li class="flex align-items-center mb-3">
<img src="demo/images/landing/avatar-1.svg" alt="avatar 1" class="w-2rem h-2rem mr-3" /> <img src="/demo/images/landing/avatar-1.svg" alt="avatar 1" class="w-2rem h-2rem mr-3" />
<span class="font-medium">Darrel Steward</span> <span class="font-medium">Darrel Steward</span>
<ProgressBar :value="pbValue1" :showValue="false" class="w-10rem ml-auto mr-3" style="height: .5rem" /> <ProgressBar :value="pbValue1" :showValue="false" class="w-10rem ml-auto mr-3" style="height: .5rem" />
<span class="text-secondary font-medium">15%</span> <span class="text-secondary font-medium">15%</span>
</li> </li>
<li class="flex align-items-center mb-3"> <li class="flex align-items-center mb-3">
<img src="demo/images/landing/avatar-2.svg" alt="avatar 2" class="w-2rem h-2rem mr-3" /> <img src="/demo/images/landing/avatar-2.svg" alt="avatar 2" class="w-2rem h-2rem mr-3" />
<span class="font-medium">Albert Flores</span> <span class="font-medium">Albert Flores</span>
<ProgressBar :value="pbValue3" :showValue="false" class="w-10rem ml-auto mr-3" style="height: .5rem" /> <ProgressBar :value="pbValue3" :showValue="false" class="w-10rem ml-auto mr-3" style="height: .5rem" />
<span class="text-secondary font-medium">85%</span> <span class="text-secondary font-medium">85%</span>
</li> </li>
<li class="flex align-items-center mb-3"> <li class="flex align-items-center mb-3">
<img src="demo/images/landing/avatar-3.svg" alt="avatar 3" class="w-2rem h-2rem mr-3" /> <img src="/demo/images/landing/avatar-3.svg" alt="avatar 3" class="w-2rem h-2rem mr-3" />
<span class="font-medium">Kathryn Murphy</span> <span class="font-medium">Kathryn Murphy</span>
<ProgressBar :value="pbValue3" :showValue="false" class="w-10rem ml-auto mr-3" style="height: .5rem" /> <ProgressBar :value="pbValue3" :showValue="false" class="w-10rem ml-auto mr-3" style="height: .5rem" />
<span class="text-secondary font-medium">50%</span> <span class="text-secondary font-medium">50%</span>
</li> </li>
<li class="flex align-items-center mb-3"> <li class="flex align-items-center mb-3">
<img src="demo/images/landing/avatar-4.svg" alt="avatar 4" class="w-2rem h-2rem mr-3" /> <img src="/demo/images/landing/avatar-4.svg" alt="avatar 4" class="w-2rem h-2rem mr-3" />
<span class="font-medium">Cody Fisher</span> <span class="font-medium">Cody Fisher</span>
<ProgressBar :value="pbValue4" :showValue="false" class="w-10rem ml-auto mr-3" style="height: .5rem" /> <ProgressBar :value="pbValue4" :showValue="false" class="w-10rem ml-auto mr-3" style="height: .5rem" />
<span class="text-secondary font-medium">75%</span> <span class="text-secondary font-medium">75%</span>
</li> </li>
<li class="flex align-items-center mb-3"> <li class="flex align-items-center mb-3">
<img src="demo/images/landing/avatar-5.svg" alt="avatar 5" class="w-2rem h-2rem mr-3" /> <img src="/demo/images/landing/avatar-5.svg" alt="avatar 5" class="w-2rem h-2rem mr-3" />
<span class="font-medium">Brandon Atkinson</span> <span class="font-medium">Brandon Atkinson</span>
<ProgressBar :value="pbValue5" :showValue="false" class="w-10rem ml-auto mr-3" style="height: .5rem" /> <ProgressBar :value="pbValue5" :showValue="false" class="w-10rem ml-auto mr-3" style="height: .5rem" />
<span class="text-secondary font-medium">60%</span> <span class="text-secondary font-medium">60%</span>
@ -70,7 +70,7 @@
<div class="flex flex-column justify-content-start px-3 z-1"> <div class="flex flex-column justify-content-start px-3 z-1">
<div class="box p-4 mb-5"> <div class="box p-4 mb-5">
<div class="surface-card mb-4 w-20rem text-center p-5" style="border-radius:'10px'"> <div class="surface-card mb-4 w-20rem text-center p-5" style="border-radius:'10px'">
<img src="demo/images/landing/watch.png" alt="Watch"/> <img src="/demo/images/landing/watch.png" alt="Watch"/>
</div> </div>
<div class="flex align-items-center mb-4"> <div class="flex align-items-center mb-4">
<div class="flex flex-column"> <div class="flex flex-column">
@ -105,7 +105,7 @@
<ul class="list-none p-0 m-0"> <ul class="list-none p-0 m-0">
<li class="flex mb-3"> <li class="flex mb-3">
<span class="mr-3"> <span class="mr-3">
<img src="demo/images/landing/avatar.png" alt="Avatar" class="w-3rem h-3rem" /> <img src="/demo/images/landing/avatar.png" alt="Avatar" class="w-3rem h-3rem" />
</span> </span>
<div class="flex flex-column"> <div class="flex flex-column">
<span class="font-bold mb-2">Amanda Williams</span> <span class="font-bold mb-2">Amanda Williams</span>

4
pages/landing/DesignerSection.vue
View File

@ -3,11 +3,11 @@
<div class="section-header">Theme Designer</div> <div class="section-header">Theme Designer</div>
<p class="section-detail">Designer is the ultimate tool to create your own PrimeVue experience powered by a SASS based theme engine with 500+ variables and a Visual Designer.</p> <p class="section-detail">Designer is the ultimate tool to create your own PrimeVue experience powered by a SASS based theme engine with 500+ variables and a Visual Designer.</p>
<div class="designer-main mt-7 justify-content-center pad-section" <div class="designer-main mt-7 justify-content-center pad-section"
:style="{backgroundImage:`url('demo/images/landing/wave-${$appState.darkTheme ? 'dark' : 'light'}.svg')`, backgroundSize:'cover'}"> :style="{backgroundImage:`url('/demo/images/landing/wave-${$appState.darkTheme ? 'dark' : 'light'}.svg')`, backgroundSize:'cover'}">
<div class="box p-4 flex flex-column md:flex-row z-1 designer-editor"> <div class="box p-4 flex flex-column md:flex-row z-1 designer-editor">
<div class="mr-0 md:mr-4 p-4 designer-controls box border-bottom-1 border-left-none border-right-none border-top-none md:border-bottom-none md:border-right-1" style="border-radius: '10px'"> <div class="mr-0 md:mr-4 p-4 designer-controls box border-bottom-1 border-left-none border-right-none border-top-none md:border-bottom-none md:border-right-1" style="border-radius: '10px'">
<div class="text-center mb-4"> <div class="text-center mb-4">
<img :src="'demo/images/landing/' + `${$appState.darkTheme ? 'designer-light.svg' : 'designer-dark.svg'}`" /> <img :src="'/demo/images/landing/' + `${$appState.darkTheme ? 'designer-light.svg' : 'designer-dark.svg'}`" />
</div> </div>
<div class="p-fluid"> <div class="p-fluid">
<span class="font-semibold block mb-3">Primary</span> <span class="font-semibold block mb-3">Primary</span>

18
pages/landing/FeaturesSection.vue
View File

@ -2,59 +2,59 @@
<section class="landing-features py-8"> <section class="landing-features py-8">
<div class="section-header">Features</div> <div class="section-header">Features</div>
<p class="section-detail">PrimeVue is the most complete solution for your UI requirements.</p> <p class="section-detail">PrimeVue is the most complete solution for your UI requirements.</p>
<div class="grid mt-7 pad-section" :style="{backgroundImage:`url('demo/images/landing/wave-${$appState.darkTheme ? 'dark-alt' : 'light-alt'}.svg')`, backgroundSize:'cover'}"> <div class="grid mt-7 pad-section" :style="{backgroundImage:`url('/demo/images/landing/wave-${$appState.darkTheme ? 'dark-alt' : 'light-alt'}.svg')`, backgroundSize:'cover'}">
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3"> <div class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3">
<div class="box p-4 w-full"> <div class="box p-4 w-full">
<img src="demo/images/landing/features/icon-components.svg" alt="components icon" class="block mb-3"/> <img src="/demo/images/landing/features/icon-components.svg" alt="components icon" class="block mb-3"/>
<div class="font-semibold mb-3 text-lg">90+ UI Components</div> <div class="font-semibold mb-3 text-lg">90+ UI Components</div>
<p class="m-0 text-secondary font-medium">The ultimate set of UI Components to assist you with 90+ impressive Vue Components.</p> <p class="m-0 text-secondary font-medium">The ultimate set of UI Components to assist you with 90+ impressive Vue Components.</p>
</div> </div>
</div> </div>
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3"> <div class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3">
<div class="box p-4 w-full"> <div class="box p-4 w-full">
<img src="demo/images/landing/features/icon-community.svg" alt="components icon" class="block mb-3"/> <img src="/demo/images/landing/features/icon-community.svg" alt="components icon" class="block mb-3"/>
<div class="font-semibold mb-3 text-lg">Community</div> <div class="font-semibold mb-3 text-lg">Community</div>
<p class="m-0 text-secondary font-medium">Connect with the other open source community members, collaborate and have a voice in the project roadmap.</p> <p class="m-0 text-secondary font-medium">Connect with the other open source community members, collaborate and have a voice in the project roadmap.</p>
</div> </div>
</div> </div>
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3"> <div class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3">
<div class="box p-4 w-full"> <div class="box p-4 w-full">
<img src="demo/images/landing/features/icon-productivity.svg" alt="components icon" class="block mb-3"/> <img src="/demo/images/landing/features/icon-productivity.svg" alt="components icon" class="block mb-3"/>
<div class="font-semibold mb-3 text-lg">Productivity</div> <div class="font-semibold mb-3 text-lg">Productivity</div>
<p class="m-0 text-secondary font-medium">Boost your productivity by achieving more in less time and accomplish amazing results.</p> <p class="m-0 text-secondary font-medium">Boost your productivity by achieving more in less time and accomplish amazing results.</p>
</div> </div>
</div> </div>
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3"> <div class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3">
<div class="box p-4 w-full"> <div class="box p-4 w-full">
<img src="demo/images/landing/features/icon-accessibility.svg" alt="components icon" class="block mb-3"/> <img src="/demo/images/landing/features/icon-accessibility.svg" alt="components icon" class="block mb-3"/>
<div class="font-semibold mb-3 text-lg">Accessibility</div> <div class="font-semibold mb-3 text-lg">Accessibility</div>
<p class="m-0 text-secondary font-medium">Compliant with the Web Content Accessibility Guidelines (WCAG 2.0).</p> <p class="m-0 text-secondary font-medium">Compliant with the Web Content Accessibility Guidelines (WCAG 2.0).</p>
</div> </div>
</div> </div>
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3"> <div class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3">
<div class="box p-4 w-full"> <div class="box p-4 w-full">
<img src="demo/images/landing/features/icon-support.svg" alt="components icon" class="block mb-3"/> <img src="/demo/images/landing/features/icon-support.svg" alt="components icon" class="block mb-3"/>
<div class="font-semibold mb-3 text-lg">Enterprise Support</div> <div class="font-semibold mb-3 text-lg">Enterprise Support</div>
<p class="m-0 text-secondary font-medium">Exceptional support service featuring response within 1 business day and option to request enhancements and new features for the library.</p> <p class="m-0 text-secondary font-medium">Exceptional support service featuring response within 1 business day and option to request enhancements and new features for the library.</p>
</div> </div>
</div> </div>
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3"> <div class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3">
<div class="box p-4 w-full"> <div class="box p-4 w-full">
<img src="demo/images/landing/features/icon-mobile.svg" alt="components icon" class="block mb-3"/> <img src="/demo/images/landing/features/icon-mobile.svg" alt="components icon" class="block mb-3"/>
<div class="font-semibold mb-3 text-lg">Mobile</div> <div class="font-semibold mb-3 text-lg">Mobile</div>
<p class="m-0 text-secondary font-medium">First class support for responsive design led by touch optimized elements.</p> <p class="m-0 text-secondary font-medium">First class support for responsive design led by touch optimized elements.</p>
</div> </div>
</div> </div>
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3"> <div class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3">
<div class="box p-4 w-full"> <div class="box p-4 w-full">
<img src="demo/images/landing/features/icon-theme.svg" alt="components icon" class="block mb-3"/> <img src="/demo/images/landing/features/icon-theme.svg" alt="components icon" class="block mb-3"/>
<div class="font-semibold mb-3 text-lg">Themes</div> <div class="font-semibold mb-3 text-lg">Themes</div>
<p class="m-0 text-secondary font-medium">Built on a design-agnostic api, choose from a vast amount of themes such as material, bootstrap, custom or develop your own.</p> <p class="m-0 text-secondary font-medium">Built on a design-agnostic api, choose from a vast amount of themes such as material, bootstrap, custom or develop your own.</p>
</div> </div>
</div> </div>
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3"> <div class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3">
<div class="box p-4 w-full"> <div class="box p-4 w-full">
<img src="demo/images/landing/features/icon-ts.svg" alt="components icon" class="block mb-3"/> <img src="/demo/images/landing/features/icon-ts.svg" alt="components icon" class="block mb-3"/>
<div class="font-semibold mb-3 text-lg">Typescript</div> <div class="font-semibold mb-3 text-lg">Typescript</div>
<p class="m-0 text-secondary font-medium">Top-notch support for Typescript with types and tooling assistance.</p> <p class="m-0 text-secondary font-medium">Top-notch support for Typescript with types and tooling assistance.</p>
</div> </div>

2
pages/landing/FooterSection.vue
View File

@ -69,7 +69,7 @@
<div class="flex justify-content-between py-6"> <div class="flex justify-content-between py-6">
<span> <span>
<img :src="'demo/images/primevue-logo-' + `${$appState.darkTheme ? 'light' : 'dark'}` + '.svg'" alt="primevue logo" /> <img :src="'/demo/images/primevue-logo-' + `${$appState.darkTheme ? 'light' : 'dark'}` + '.svg'" alt="primevue logo" />
</span> </span>
<div class="flex align-items-center"> <div class="flex align-items-center">
<a href="https://twitter.com/primevue" class="linkbox block w-3rem h-3rem flex align-items-center justify-content-center mr-3"> <a href="https://twitter.com/primevue" class="linkbox block w-3rem h-3rem flex align-items-center justify-content-center mr-3">

10
pages/landing/HeaderSection.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<section :ref="containerRef" :class="['landing-header pad-section', {'landing-header-active': menuActive}]"> <section :ref="containerRef" :class="['landing-header pad-section', {'landing-header-active': menuActive}]">
<span> <span>
<img :src="'demo/images/primevue-logo-' + `${$appState.darkTheme ? 'light' : 'dark'}` + '.svg'" alt="primevue logo" class="landing-header-logo"/> <img :src="'/demo/images/primevue-logo-' + `${$appState.darkTheme ? 'light' : 'dark'}` + '.svg'" alt="primevue logo" class="landing-header-logo"/>
</span> </span>
<div class="flex align-items-center"> <div class="flex align-items-center">
@ -9,25 +9,25 @@
<ol class="list-none m-0 p-0 flex flex-column lg:flex-row flex-wrap lg:flex-nowrap lg:align-items-center font-semibold"> <ol class="list-none m-0 p-0 flex flex-column lg:flex-row flex-wrap lg:flex-nowrap lg:align-items-center font-semibold">
<li class="mr-0 lg:mr-2"> <li class="mr-0 lg:mr-2">
<nuxt-link to="/setup"> <nuxt-link to="/setup">
<img src="demo/images/landing/core-icon.svg" alt="primevue core" /> <img src="/demo/images/landing/core-icon.svg" alt="primevue core" />
<span>Components</span> <span>Components</span>
</nuxt-link> </nuxt-link>
</li> </li>
<li class="mr-0 lg:mr-2"> <li class="mr-0 lg:mr-2">
<a href="https://www.primefaces.org/primeblocks-vue"> <a href="https://www.primefaces.org/primeblocks-vue">
<img src="demo/images/landing/blocks-icon.svg" alt="primevue templates" /> <img src="/demo/images/landing/blocks-icon.svg" alt="primevue templates" />
<span>Blocks</span> <span>Blocks</span>
</a> </a>
</li> </li>
<li class="mr-0 lg:mr-2"> <li class="mr-0 lg:mr-2">
<a href="https://www.primefaces.org/designer-vue"> <a href="https://www.primefaces.org/designer-vue">
<img src="demo/images/landing/designer-icon.svg" alt="primevue templates" /> <img src="/demo/images/landing/designer-icon.svg" alt="primevue templates" />
<span>Designer</span> <span>Designer</span>
</a> </a>
</li> </li>
<li class="mr-0 lg:mr-2"> <li class="mr-0 lg:mr-2">
<a href="https://www.primefaces.org/store/templates.xhtml"> <a href="https://www.primefaces.org/store/templates.xhtml">
<img src="demo/images/landing/templates-icon.svg" alt="primevue templates" /> <img src="/demo/images/landing/templates-icon.svg" alt="primevue templates" />
<span>Templates</span> <span>Templates</span>
</a> </a>
</li> </li>

14
pages/landing/HeroSection.vue
View File

@ -5,7 +5,7 @@
<div class="p-2 flex flex-row md:flex-column"> <div class="p-2 flex flex-row md:flex-column">
<div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation flex align-items-center justify-content-center" @click="navigateTo('https://www.primefaces.org/store')"> <div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation flex align-items-center justify-content-center" @click="navigateTo('https://www.primefaces.org/store')">
<div class="flex flex-column align-items-center"> <div class="flex flex-column align-items-center">
<img src="demo/images/landing/templates-icon.svg" alt="primevue templates" /> <img src="/demo/images/landing/templates-icon.svg" alt="primevue templates" />
<div class="name"> <div class="name">
<b>Templates</b> <b>Templates</b>
<span>Spectacular Designs</span> <span>Spectacular Designs</span>
@ -14,7 +14,7 @@
</div> </div>
<div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation ml-4 md:ml-0 md:mt-4 flex align-items-center justify-content-center" @click="navigateTo('https://www.primefaces.org/designer-vue')"> <div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation ml-4 md:ml-0 md:mt-4 flex align-items-center justify-content-center" @click="navigateTo('https://www.primefaces.org/designer-vue')">
<div class="flex flex-column align-items-center"> <div class="flex flex-column align-items-center">
<img src="demo/images/landing/designer-icon.svg" alt="primevue templates" /> <img src="/demo/images/landing/designer-icon.svg" alt="primevue templates" />
<div class="name"> <div class="name">
<b>Theme Designer</b> <b>Theme Designer</b>
<span>Create Your Own</span> <span>Create Your Own</span>
@ -25,7 +25,7 @@
<div class="p-2 flex flex-row md:flex-column"> <div class="p-2 flex flex-row md:flex-column">
<div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation flex align-items-center justify-content-center" @click="navigateTo('https://github.com/primefaces/primevue')"> <div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation flex align-items-center justify-content-center" @click="navigateTo('https://github.com/primefaces/primevue')">
<div class="flex flex-column align-items-center"> <div class="flex flex-column align-items-center">
<img src="demo/images/landing/core-icon.svg" alt="primevue core" /> <img src="/demo/images/landing/core-icon.svg" alt="primevue core" />
<div class="name"> <div class="name">
<b>Open Source</b> <b>Open Source</b>
<span>90+ UI Components</span> <span>90+ UI Components</span>
@ -35,7 +35,7 @@
<nuxt-link to="/setup"> <nuxt-link to="/setup">
<div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation logo hidden md:flex my-4 align-items-center justify-content-center"> <div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation logo hidden md:flex my-4 align-items-center justify-content-center">
<div class="hero-box-inner text-center"> <div class="hero-box-inner text-center">
<img src="demo/images/landing/overview-icon.svg" alt="primevue main" /> <img src="/demo/images/landing/overview-icon.svg" alt="primevue main" />
<div class="name"> <div class="name">
<b class="font-bold">NEXT-GEN VUE UI</b> <b class="font-bold">NEXT-GEN VUE UI</b>
</div> </div>
@ -44,7 +44,7 @@
</nuxt-link> </nuxt-link>
<div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation flex ml-4 md:ml-0 align-items-center justify-content-center" @click="navigateTo('https://www.primefaces.org/primeflex')"> <div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation flex ml-4 md:ml-0 align-items-center justify-content-center" @click="navigateTo('https://www.primefaces.org/primeflex')">
<div class="flex flex-column align-items-center"> <div class="flex flex-column align-items-center">
<img src="demo/images/landing/css-icon.svg" alt="primevue icons" /> <img src="/demo/images/landing/css-icon.svg" alt="primevue icons" />
<div class="name"> <div class="name">
<b>CSS Utilities</b> <b>CSS Utilities</b>
<span>PrimeFlex CSS</span> <span>PrimeFlex CSS</span>
@ -55,7 +55,7 @@
<div class="p-2 flex flex-row md:flex-column"> <div class="p-2 flex flex-row md:flex-column">
<div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation flex align-items-center justify-content-center" @click="navigateTo('https://www.primefaces.org/primeblocks-vue')"> <div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation flex align-items-center justify-content-center" @click="navigateTo('https://www.primefaces.org/primeblocks-vue')">
<div class="flex flex-column align-items-center"> <div class="flex flex-column align-items-center">
<img src="demo/images/landing/blocks-icon.svg" alt="primevue templates" /> <img src="/demo/images/landing/blocks-icon.svg" alt="primevue templates" />
<div class="name"> <div class="name">
<b>Prime Blocks</b> <b>Prime Blocks</b>
<span>350+ UI Blocks</span> <span>350+ UI Blocks</span>
@ -65,7 +65,7 @@
<nuxt-link to="/icons"> <nuxt-link to="/icons">
<div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation flex ml-4 md:ml-0 md:mt-4 align-items-center justify-content-center"> <div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation flex ml-4 md:ml-0 md:mt-4 align-items-center justify-content-center">
<div class="flex flex-column align-items-center"> <div class="flex flex-column align-items-center">
<img src="demo/images/landing/icons-icon.svg" alt="primevue templates" /> <img src="/demo/images/landing/icons-icon.svg" alt="primevue templates" />
<div class="name"> <div class="name">
<b>Icon Library</b> <b>Icon Library</b>
<span>200+ Icons</span> <span>200+ Icons</span>

4
pages/landing/TemplateSection.vue
View File

@ -122,10 +122,10 @@ export default {
const isDark = this.$appState.darkTheme; const isDark = this.$appState.darkTheme;
const url = template === 'templates-text' ? 'png' : 'jpeg'; const url = template === 'templates-text' ? 'png' : 'jpeg';
return `url('demo/images/landing/templates/${template}-${isDark ? 'dark' : 'light'}.${url}')` return `url('/demo/images/landing/templates/${template}-${isDark ? 'dark' : 'light'}.${url}')`
}, },
templateImg() { templateImg() {
return `demo/images/landing/templates/templates-text-${this.$appState.darkTheme ? 'dark' : 'light'}.png` return `/demo/images/landing/templates/templates-text-${this.$appState.darkTheme ? 'dark' : 'light'}.png`
} }
} }
} }

4
pages/landing/ThemeSection.vue
View File

@ -8,7 +8,7 @@
<button type="button" :class="['font-medium linkbox mr-3 mt-4', {'active': theme && theme.startsWith('bootstrap4')}]" @click="changeTheme('bootstrap4', 'blue')">Bootstrap</button> <button type="button" :class="['font-medium linkbox mr-3 mt-4', {'active': theme && theme.startsWith('bootstrap4')}]" @click="changeTheme('bootstrap4', 'blue')">Bootstrap</button>
<a type="button" class="font-medium p-link linkbox mt-4" href="https://www.primefaces.org/designer-vue">more...</a> <a type="button" class="font-medium p-link linkbox mt-4" href="https://www.primefaces.org/designer-vue">more...</a>
</div> </div>
<div class="themes-main flex mt-7 justify-content-center pad-section" :style="{backgroundImage:`url('demo/images/landing/wave-${$appState.darkTheme ? 'dark-alt' : 'light-alt'}.svg')`, backgroundSize:'cover'}"> <div class="themes-main flex mt-7 justify-content-center pad-section" :style="{backgroundImage:`url('/demo/images/landing/wave-${$appState.darkTheme ? 'dark-alt' : 'light-alt'}.svg')`, backgroundSize:'cover'}">
<div class="box overflow-hidden z-1 p-5 table-container"> <div class="box overflow-hidden z-1 p-5 table-container">
<DataTable :value="customers" :paginator="true" :rows="5" <DataTable :value="customers" :paginator="true" :rows="5"
dataKey="id" :rowHover="true" v-model:selection="selectedCustomers" v-model:filters="filters" filterDisplay="menu" :loading="loading" dataKey="id" :rowHover="true" v-model:selection="selectedCustomers" v-model:filters="filters" filterDisplay="menu" :loading="loading"
@ -44,7 +44,7 @@
</Column> </Column>
<Column header="Agent" sortable sortField="representative.name" style="min-width: 14rem"> <Column header="Agent" sortable sortField="representative.name" style="min-width: 14rem">
<template #body="{data}"> <template #body="{data}">
<img :alt="data.representative.name" :src="'demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" /> <img :alt="data.representative.name" :src="'/demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
<span class="image-text">{{data.representative.name}}</span> <span class="image-text">{{data.representative.name}}</span>
</template> </template>
</Column> </Column>

2
pages/landing/UsersSection.vue
View File

@ -71,7 +71,7 @@
export default { export default {
methods: { methods: {
imgSrc(brand) { imgSrc(brand) {
return `demo/images/landing/whouses/${brand}-${this.colorScheme}.svg` return `/demo/images/landing/whouses/${brand}-${this.colorScheme}.svg`
} }
}, },
computed: { computed: {

2
pages/listbox/ListboxDoc.vue
View File

@ -111,7 +111,7 @@ export default {
&lt;Listbox v-model="selectedCars" :options="cars" :multiple="true" :filter="true" optionLabel="brand" listStyle="max-height:250px" style="width:15em"&gt; &lt;Listbox v-model="selectedCars" :options="cars" :multiple="true" :filter="true" optionLabel="brand" listStyle="max-height:250px" style="width:15em"&gt;
&lt;template #option="slotProps"&gt; &lt;template #option="slotProps"&gt;
&lt;div&gt; &lt;div&gt;
&lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" /&gt; &lt;img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" /&gt;
&lt;span&gt;{{slotProps.option.brand}}&lt;/span&gt; &lt;span&gt;{{slotProps.option.brand}}&lt;/span&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;

4
pages/multiselect/MultiSelectDoc.vue
View File

@ -113,7 +113,7 @@ export default {
&lt;MultiSelect v-model="selectedCars2" :options="cars" optionLabel="brand" placeholder="Select a Car"&gt; &lt;MultiSelect v-model="selectedCars2" :options="cars" optionLabel="brand" placeholder="Select a Car"&gt;
&lt;template #value="slotProps"&gt; &lt;template #value="slotProps"&gt;
&lt;div class="p-multiselect-car-token" v-for="option of slotProps.value" :key="option.brand"&gt; &lt;div class="p-multiselect-car-token" v-for="option of slotProps.value" :key="option.brand"&gt;
&lt;img :alt="option.brand" :src="'demo/images/car/' + option.brand + '.png'" /&gt; &lt;img :alt="option.brand" :src="'/demo/images/car/' + option.brand + '.png'" /&gt;
&lt;span&gt;{{option.brand}}&lt;/span&gt; &lt;span&gt;{{option.brand}}&lt;/span&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;template v-if="!slotProps.value || slotProps.value.length === 0"&gt; &lt;template v-if="!slotProps.value || slotProps.value.length === 0"&gt;
@ -122,7 +122,7 @@ export default {
&lt;/template&gt; &lt;/template&gt;
&lt;template #option="slotProps"&gt; &lt;template #option="slotProps"&gt;
&lt;div class="p-multiselect-car-option"&gt; &lt;div class="p-multiselect-car-option"&gt;
&lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" /&gt; &lt;img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" /&gt;
&lt;span&gt;{{slotProps.option.brand}}&lt;/span&gt; &lt;span&gt;{{slotProps.option.brand}}&lt;/span&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;

4
pages/orderlist/OrderListDoc.vue
View File

@ -23,7 +23,7 @@ import OrderList from 'primevue/orderlist';
&lt;/template&gt; &lt;/template&gt;
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;div class="p-caritem"&gt; &lt;div class="p-caritem"&gt;
&lt;img :src="'demo/images/car/' + slotProps.item.brand + '.png'"&gt; &lt;img :src="'/demo/images/car/' + slotProps.item.brand + '.png'"&gt;
&lt;div&gt; &lt;div&gt;
&lt;span class="p-caritem-vin"&gt;{{slotProps.item.vin}}&lt;/span&gt; &lt;span class="p-caritem-vin"&gt;{{slotProps.item.vin}}&lt;/span&gt;
&lt;span&gt;{{slotProps.item.year}} - {{slotProps.item.color}}&lt;/span&gt; &lt;span&gt;{{slotProps.item.year}} - {{slotProps.item.color}}&lt;/span&gt;
@ -49,7 +49,7 @@ import OrderList from 'primevue/orderlist';
&lt;/template&gt; &lt;/template&gt;
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;div class="p-caritem"&gt; &lt;div class="p-caritem"&gt;
&lt;img :src="'demo/images/car/' + slotProps.item.brand + '.png'"&gt; &lt;img :src="'/demo/images/car/' + slotProps.item.brand + '.png'"&gt;
&lt;div&gt; &lt;div&gt;
&lt;span class="p-caritem-vin"&gt;{{slotProps.item.vin}}&lt;/span&gt; &lt;span class="p-caritem-vin"&gt;{{slotProps.item.vin}}&lt;/span&gt;
&lt;span&gt;{{slotProps.item.year}} - {{slotProps.item.color}}&lt;/span&gt; &lt;span&gt;{{slotProps.item.year}} - {{slotProps.item.color}}&lt;/span&gt;

2
pages/orderlist/index.vue
View File

@ -15,7 +15,7 @@
<template #item="slotProps"> <template #item="slotProps">
<div class="product-item"> <div class="product-item">
<div class="image-container"> <div class="image-container">
<img :src="'demo/images/product/' + slotProps.item.image" :alt="slotProps.item.name" /> <img :src="'/demo/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
</div> </div>
<div class="product-list-detail"> <div class="product-list-detail">
<h6 class="mb-2">{{ slotProps.item.name }}</h6> <h6 class="mb-2">{{ slotProps.item.name }}</h6>

2
pages/organizationchart/OrganizationChartDoc.vue
View File

@ -256,7 +256,7 @@ export default {
&lt;template #person="slotProps"&gt; &lt;template #person="slotProps"&gt;
&lt;div class="node-header ui-corner-top"&gt;&#123;&#123;slotProps.node.data.label&#125;&#125;&lt;/div&gt; &lt;div class="node-header ui-corner-top"&gt;&#123;&#123;slotProps.node.data.label&#125;&#125;&lt;/div&gt;
&lt;div class="node-content"&gt; &lt;div class="node-content"&gt;
&lt;img :src="'demo/images/organization/' + slotProps.node.data.avatar" width="32"&gt; &lt;img :src="'/demo/images/organization/' + slotProps.node.data.avatar" width="32"&gt;
&lt;div&gt;&#123;&#123;slotProps.node.data.name&#125;&#125;&lt;/div&gt; &lt;div&gt;&#123;&#123;slotProps.node.data.name&#125;&#125;&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;

2
pages/organizationchart/index.vue
View File

@ -25,7 +25,7 @@
<template #person="slotProps"> <template #person="slotProps">
<div class="node-header ui-corner-top">{{ slotProps.node.data.label }}</div> <div class="node-header ui-corner-top">{{ slotProps.node.data.label }}</div>
<div class="node-content"> <div class="node-content">
<img :src="'demo/images/organization/' + slotProps.node.data.avatar" width="32" /> <img :src="'/demo/images/organization/' + slotProps.node.data.avatar" width="32" />
<div>{{ slotProps.node.data.name }}</div> <div>{{ slotProps.node.data.name }}</div>
</div> </div>
</template> </template>

4
pages/overlaypanel/OverlayPanelDoc.vue
View File

@ -19,7 +19,7 @@ import OverlayPanel from 'primevue/overlaypanel';
&lt;Button type="button" label="Toggle" @click="toggle" /&gt; &lt;Button type="button" label="Toggle" @click="toggle" /&gt;
&lt;OverlayPanel ref="op"&gt; &lt;OverlayPanel ref="op"&gt;
&lt;img src="demo/images/nature/nature1.jpg" alt="Nature Image"&gt; &lt;img src="/demo/images/nature/nature1.jpg" alt="Nature Image"&gt;
&lt;/OverlayPanel&gt; &lt;/OverlayPanel&gt;
</code></pre> </code></pre>
@ -35,7 +35,7 @@ toggle(event) {
<p>Clicking outside the overlay hides the panel, setting <i>dismissable</i> to false disables this behavior. Additionally enabling <i>showCloseIcon</i> property displays a close icon at the top right corner to close the panel.</p> <p>Clicking outside the overlay hides the panel, setting <i>dismissable</i> to false disables this behavior. Additionally enabling <i>showCloseIcon</i> property displays a close icon at the top right corner to close the panel.</p>
<pre v-code><code> <pre v-code><code>
&lt;OverlayPanel ref="op" :showCloseIcon="true" :dismissable="true"&gt; &lt;OverlayPanel ref="op" :showCloseIcon="true" :dismissable="true"&gt;
&lt;img src="demo/images/nature/nature1.jpg" alt="Nature Image"&gt; &lt;img src="/demo/images/nature/nature1.jpg" alt="Nature Image"&gt;
&lt;/OverlayPanel&gt; &lt;/OverlayPanel&gt;
</code></pre> </code></pre>

2
pages/overlaypanel/index.vue
View File

@ -17,7 +17,7 @@
<Column field="name" header="Name" sortable style="width: 50%"></Column> <Column field="name" header="Name" sortable style="width: 50%"></Column>
<Column header="Image" style="width: 20%"> <Column header="Image" style="width: 20%">
<template #body="slotProps"> <template #body="slotProps">
<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" /> <img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" />
</template> </template>
</Column> </Column>
<Column field="price" header="Price" sortable style="width: 30%"> <Column field="price" header="Price" sortable style="width: 30%">

2
pages/paginator/index.vue
View File

@ -24,7 +24,7 @@
</Paginator> </Paginator>
<div class="image-gallery"> <div class="image-gallery">
<img :src="'demo/images/nature/' + image + '.jpg'" /> <img :src="'/demo/images/nature/' + image + '.jpg'" />
</div> </div>
</div> </div>
</div> </div>

6
pages/picklist/PickListDoc.vue
View File

@ -19,7 +19,7 @@ import PickList from 'primevue/picklist';
&lt;PickList v-model="cars" dataKey="vin"&gt; &lt;PickList v-model="cars" dataKey="vin"&gt;
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;div class="p-caritem"&gt; &lt;div class="p-caritem"&gt;
&lt;img :src="'demo/images/car/' + slotProps.item.brand + '.png'"&gt; &lt;img :src="'/demo/images/car/' + slotProps.item.brand + '.png'"&gt;
&lt;div&gt; &lt;div&gt;
&lt;span class="p-caritem-vin"&gt;{{slotProps.item.vin}}&lt;/span&gt; &lt;span class="p-caritem-vin"&gt;{{slotProps.item.vin}}&lt;/span&gt;
&lt;span&gt;{{slotProps.item.year}} - {{slotProps.item.color}}&lt;/span&gt; &lt;span&gt;{{slotProps.item.year}} - {{slotProps.item.color}}&lt;/span&gt;
@ -45,7 +45,7 @@ import PickList from 'primevue/picklist';
&lt;/template&gt; &lt;/template&gt;
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;div class="p-caritem"&gt; &lt;div class="p-caritem"&gt;
&lt;img :src="'demo/images/car/' + slotProps.item.brand + '.png'"&gt; &lt;img :src="'/demo/images/car/' + slotProps.item.brand + '.png'"&gt;
&lt;div&gt; &lt;div&gt;
&lt;span class="p-caritem-vin"&gt;{{slotProps.item.vin}}&lt;/span&gt; &lt;span class="p-caritem-vin"&gt;{{slotProps.item.vin}}&lt;/span&gt;
&lt;span&gt;{{slotProps.item.year}} - {{slotProps.item.color}}&lt;/span&gt; &lt;span&gt;{{slotProps.item.year}} - {{slotProps.item.color}}&lt;/span&gt;
@ -66,7 +66,7 @@ import PickList from 'primevue/picklist';
&lt;PickList v-model="cars" dataKey="vin" v-model:selection="selection"&gt; &lt;PickList v-model="cars" dataKey="vin" v-model:selection="selection"&gt;
&lt;template #item="slotProps"&gt; &lt;template #item="slotProps"&gt;
&lt;div class="p-caritem"&gt; &lt;div class="p-caritem"&gt;
&lt;img :src="'demo/images/car/' + slotProps.item.brand + '.png'"&gt; &lt;img :src="'/demo/images/car/' + slotProps.item.brand + '.png'"&gt;
&lt;div&gt; &lt;div&gt;
&lt;span class="p-caritem-vin"&gt;{{slotProps.item.vin}}&lt;/span&gt; &lt;span class="p-caritem-vin"&gt;{{slotProps.item.vin}}&lt;/span&gt;
&lt;span&gt;{{slotProps.item.year}} - {{slotProps.item.color}}&lt;/span&gt; &lt;span&gt;{{slotProps.item.year}} - {{slotProps.item.color}}&lt;/span&gt;

2
pages/picklist/index.vue
View File

@ -16,7 +16,7 @@
<template #item="slotProps"> <template #item="slotProps">
<div class="product-item"> <div class="product-item">
<div class="image-container"> <div class="image-container">
<img :src="'demo/images/product/' + slotProps.item.image" :alt="slotProps.item.name" /> <img :src="'/demo/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
</div> </div>
<div class="product-list-detail"> <div class="product-list-detail">
<h6 class="mb-2">{{ slotProps.item.name }}</h6> <h6 class="mb-2">{{ slotProps.item.name }}</h6>

2
pages/responsive/index.vue
View File

@ -394,7 +394,7 @@
<Column field="name" header="Name" sortable></Column> <Column field="name" header="Name" sortable></Column>
<Column header="Image"> <Column header="Image">
<template #body="slotProps"> <template #body="slotProps">
<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" /> <img :src="'/demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" />
</template> </template>
</Column> </Column>
<Column field="price" header="Price" sortable> <Column field="price" header="Price" sortable>

2
pages/selectbutton/SelectButtonDoc.vue
View File

@ -49,7 +49,7 @@ export default {
&lt;SelectButton v-model="selectedCar" :options="cars" optionLabel="brand"&gt; &lt;SelectButton v-model="selectedCar" :options="cars" optionLabel="brand"&gt;
&lt;template #option="slotProps"&gt; &lt;template #option="slotProps"&gt;
&lt;div class="car-option"&gt; &lt;div class="car-option"&gt;
&lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" /&gt; &lt;img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" /&gt;
&lt;div&gt;{{slotProps.option.brand}}&lt;/div&gt; &lt;div&gt;{{slotProps.option.brand}}&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;

2
pages/timeline/TimelineDoc.vue
View File

@ -110,7 +110,7 @@ export default {
&#123;&#123;slotProps.item.date&#125;&#125; &#123;&#123;slotProps.item.date&#125;&#125;
&lt;/template&gt; &lt;/template&gt;
&lt;template #content&gt; &lt;template #content&gt;
&lt;img v-if="slotProps.item.image" :src="'demo/images/product/' + slotProps.item.image" :alt="slotProps.item.name" width="200" class="shadow-2" /&gt; &lt;img v-if="slotProps.item.image" :src="'/demo/images/product/' + slotProps.item.image" :alt="slotProps.item.name" width="200" class="shadow-2" /&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!&lt;/p&gt; quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!&lt;/p&gt;
&lt;Button label="Read more" class="p-button-text"&gt;&lt;/Button&gt; &lt;Button label="Read more" class="p-button-text"&gt;&lt;/Button&gt;

2
pages/timeline/index.vue
View File

@ -65,7 +65,7 @@
{{ slotProps.item.date }} {{ slotProps.item.date }}
</template> </template>
<template #content> <template #content>
<img v-if="slotProps.item.image" :src="'demo/images/product/' + slotProps.item.image" :alt="slotProps.item.name" width="200" class="shadow-2" /> <img v-if="slotProps.item.image" :src="'/demo/images/product/' + slotProps.item.image" :alt="slotProps.item.name" width="200" class="shadow-2" />
<p> <p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse,
cupiditate neque quas! cupiditate neque quas!

12
pages/uikit/UIKit.vue
View File

@ -8,7 +8,7 @@
<div class="card mb-5" style="border-radius: 50px"> <div class="card mb-5" style="border-radius: 50px">
<div class="flex flex-column md:flex-row align-items-center gap-4 md:gap-8 mb-8"> <div class="flex flex-column md:flex-row align-items-center gap-4 md:gap-8 mb-8">
<div class="w-full md:w-6"> <div class="w-full md:w-6">
<img alt="PrimeVue Designer" src="images/uikit/uikit-figma.png" class="w-full" /> <img alt="PrimeVue Designer" src="/images/uikit/uikit-figma.png" class="w-full" />
</div> </div>
<div class="w-full md:w-6"> <div class="w-full md:w-6">
<div class="text-primary font-bold mb-2">UP-TO-DATE</div> <div class="text-primary font-bold mb-2">UP-TO-DATE</div>
@ -61,12 +61,12 @@
</ul> </ul>
</div> </div>
<div class="w-full md:w-6"> <div class="w-full md:w-6">
<img alt="PrimeVue Designer" src="images/uikit/uikit-system.png" class="w-full" /> <img alt="PrimeVue Designer" src="/images/uikit/uikit-system.png" class="w-full" />
</div> </div>
</div> </div>
<div class="flex flex-column md:flex-row align-items-center gap-4 md:gap-8"> <div class="flex flex-column md:flex-row align-items-center gap-4 md:gap-8">
<div class="w-full md:w-6"> <div class="w-full md:w-6">
<img alt="PrimeVue Designer" src="images/uikit/uikit-themes.png" class="w-full" /> <img alt="PrimeVue Designer" src="/images/uikit/uikit-themes.png" class="w-full" />
</div> </div>
<div class="w-full md:w-6"> <div class="w-full md:w-6">
<div class="text-primary font-bold mb-2">DARK MODE</div> <div class="text-primary font-bold mb-2">DARK MODE</div>
@ -94,7 +94,7 @@
style="border-radius: 50px" style="border-radius: 50px"
> >
<span class="text-gray-900 text-4xl font-bold mb-5">Preview Light</span> <span class="text-gray-900 text-4xl font-bold mb-5">Preview Light</span>
<img alt="PrimeVue Designer" src="images/uikit/logo-figma-light.svg" class="w-4rem" /> <img alt="PrimeVue Designer" src="/images/uikit/logo-figma-light.svg" class="w-4rem" />
</a> </a>
<a <a
href="https://www.figma.com/file/LJBqVfMpK8xY6KR2KIc8RK/Preview-%7C-Dark-%7C-PrimeOne-2022-%7C-1.0.0?node-id=806%3A36648" href="https://www.figma.com/file/LJBqVfMpK8xY6KR2KIc8RK/Preview-%7C-Dark-%7C-PrimeOne-2022-%7C-1.0.0?node-id=806%3A36648"
@ -102,7 +102,7 @@
style="border-radius: 50px" style="border-radius: 50px"
> >
<span class="text-white text-4xl font-bold mb-5">Preview Dark</span> <span class="text-white text-4xl font-bold mb-5">Preview Dark</span>
<img alt="PrimeVue Designer" src="images/uikit/logo-figma-dark.svg" class="w-4rem" /> <img alt="PrimeVue Designer" src="/images/uikit/logo-figma-dark.svg" class="w-4rem" />
</a> </a>
</div> </div>
@ -289,7 +289,7 @@ export default {
}, },
computed: { computed: {
coverImage() { coverImage() {
return this.$appState.darkTheme ? 'images/uikit/primeone-cover-dark.jpeg' : 'images/uikit/primeone-cover-light.jpeg'; return this.$appState.darkTheme ? '/images/uikit/primeone-cover-dark.jpeg' : '/images/uikit/primeone-cover-light.jpeg';
} }
} }
}; };

60
public/demo/data/photos.json
View File

@ -1,92 +1,92 @@
{ {
"data":[ "data":[
{ {
"itemImageSrc": "demo/images/galleria/galleria1.jpg", "itemImageSrc": "/demo/images/galleria/galleria1.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria1s.jpg", "thumbnailImageSrc": "/demo/images/galleria/galleria1s.jpg",
"alt": "Description for Image 1", "alt": "Description for Image 1",
"title": "Title 1" "title": "Title 1"
}, },
{ {
"itemImageSrc": "demo/images/galleria/galleria2.jpg", "itemImageSrc": "/demo/images/galleria/galleria2.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria2s.jpg", "thumbnailImageSrc": "/demo/images/galleria/galleria2s.jpg",
"alt": "Description for Image 2", "alt": "Description for Image 2",
"title": "Title 2" "title": "Title 2"
}, },
{ {
"itemImageSrc": "demo/images/galleria/galleria3.jpg", "itemImageSrc": "/demo/images/galleria/galleria3.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria3s.jpg", "thumbnailImageSrc": "/demo/images/galleria/galleria3s.jpg",
"alt": "Description for Image 3", "alt": "Description for Image 3",
"title": "Title 3" "title": "Title 3"
}, },
{ {
"itemImageSrc": "demo/images/galleria/galleria4.jpg", "itemImageSrc": "/demo/images/galleria/galleria4.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria4s.jpg", "thumbnailImageSrc": "/demo/images/galleria/galleria4s.jpg",
"alt": "Description for Image 4", "alt": "Description for Image 4",
"title": "Title 4" "title": "Title 4"
}, },
{ {
"itemImageSrc": "demo/images/galleria/galleria5.jpg", "itemImageSrc": "/demo/images/galleria/galleria5.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria5s.jpg", "thumbnailImageSrc": "/demo/images/galleria/galleria5s.jpg",
"alt": "Description for Image 5", "alt": "Description for Image 5",
"title": "Title 5" "title": "Title 5"
}, },
{ {
"itemImageSrc": "demo/images/galleria/galleria6.jpg", "itemImageSrc": "/demo/images/galleria/galleria6.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria6s.jpg", "thumbnailImageSrc": "/demo/images/galleria/galleria6s.jpg",
"alt": "Description for Image 6", "alt": "Description for Image 6",
"title": "Title 6" "title": "Title 6"
}, },
{ {
"itemImageSrc": "demo/images/galleria/galleria7.jpg", "itemImageSrc": "/demo/images/galleria/galleria7.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria7s.jpg", "thumbnailImageSrc": "/demo/images/galleria/galleria7s.jpg",
"alt": "Description for Image 7", "alt": "Description for Image 7",
"title": "Title 7" "title": "Title 7"
}, },
{ {
"itemImageSrc": "demo/images/galleria/galleria8.jpg", "itemImageSrc": "/demo/images/galleria/galleria8.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria8s.jpg", "thumbnailImageSrc": "/demo/images/galleria/galleria8s.jpg",
"alt": "Description for Image 8", "alt": "Description for Image 8",
"title": "Title 8" "title": "Title 8"
}, },
{ {
"itemImageSrc": "demo/images/galleria/galleria9.jpg", "itemImageSrc": "/demo/images/galleria/galleria9.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria9s.jpg", "thumbnailImageSrc": "/demo/images/galleria/galleria9s.jpg",
"alt": "Description for Image 9", "alt": "Description for Image 9",
"title": "Title 9" "title": "Title 9"
}, },
{ {
"itemImageSrc": "demo/images/galleria/galleria10.jpg", "itemImageSrc": "/demo/images/galleria/galleria10.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria10s.jpg", "thumbnailImageSrc": "/demo/images/galleria/galleria10s.jpg",
"alt": "Description for Image 10", "alt": "Description for Image 10",
"title": "Title 10" "title": "Title 10"
}, },
{ {
"itemImageSrc": "demo/images/galleria/galleria11.jpg", "itemImageSrc": "/demo/images/galleria/galleria11.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria11s.jpg", "thumbnailImageSrc": "/demo/images/galleria/galleria11s.jpg",
"alt": "Description for Image 11", "alt": "Description for Image 11",
"title": "Title 11" "title": "Title 11"
}, },
{ {
"itemImageSrc": "demo/images/galleria/galleria12.jpg", "itemImageSrc": "/demo/images/galleria/galleria12.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria12s.jpg", "thumbnailImageSrc": "/demo/images/galleria/galleria12s.jpg",
"alt": "Description for Image 12", "alt": "Description for Image 12",
"title": "Title 12" "title": "Title 12"
}, },
{ {
"itemImageSrc": "demo/images/galleria/galleria13.jpg", "itemImageSrc": "/demo/images/galleria/galleria13.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria13s.jpg", "thumbnailImageSrc": "/demo/images/galleria/galleria13s.jpg",
"alt": "Description for Image 13", "alt": "Description for Image 13",
"title": "Title 13" "title": "Title 13"
}, },
{ {
"itemImageSrc": "demo/images/galleria/galleria14.jpg", "itemImageSrc": "/demo/images/galleria/galleria14.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria14s.jpg", "thumbnailImageSrc": "/demo/images/galleria/galleria14s.jpg",
"alt": "Description for Image 14", "alt": "Description for Image 14",
"title": "Title 14" "title": "Title 14"
}, },
{ {
"itemImageSrc": "demo/images/galleria/galleria15.jpg", "itemImageSrc": "/demo/images/galleria/galleria15.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria15s.jpg", "thumbnailImageSrc": "/demo/images/galleria/galleria15s.jpg",
"alt": "Description for Image 15", "alt": "Description for Image 15",
"title": "Title 15" "title": "Title 15"
} }