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="col-3">
<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>
<span>Blue</span>
</div>
<div class="col-3">
<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>
<span>Purple</span>
</div>
<div class="col-3">
<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>
<span>Blue</span>
</div>
<div class="col-3">
<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>
<span>Purple</span>
</div>
@ -57,25 +57,25 @@
<div class="grid free-themes">
<div class="col-3">
<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>
<span>Indigo</span>
</div>
<div class="col-3">
<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>
<span>Deep Purple</span>
</div>
<div class="col-3">
<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>
<span>Indigo</span>
</div>
<div class="col-3">
<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>
<span>Deep Purple</span>
</div>
@ -85,25 +85,25 @@
<div class="grid free-themes">
<div class="col-3">
<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>
<span>Indigo</span>
</div>
<div class="col-3">
<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>
<span>Deep Purple</span>
</div>
<div class="col-3">
<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>
<span>Indigo</span>
</div>
<div class="col-3">
<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>
<span>Deep Purple</span>
</div>
@ -113,7 +113,7 @@
<div class="grid free-themes">
<div class="col-3">
<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>
<span>Tailwind Light</span>
</div>
@ -123,7 +123,7 @@
<div class="grid free-themes">
<div class="col-3">
<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>
<span>Fluent Light</span>
</div>
@ -133,49 +133,49 @@
<div class="grid free-themes">
<div class="col-3">
<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>
<span>Lara Light Indigo</span>
</div>
<div class="col-3">
<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>
<span>Lara Light Blue</span>
</div>
<div class="col-3">
<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>
<span>Lara Light Purple</span>
</div>
<div class="col-3">
<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>
<span>Lara Light Teal</span>
</div>
<div class="col-3">
<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>
<span>Lara Dark Indigo</span>
</div>
<div class="col-3">
<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>
<span>Lara Dark Blue</span>
</div>
<div class="col-3">
<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>
<span>Lara Dark Purple</span>
</div>
<div class="col-3">
<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>
<span>Lara Dark Teal</span>
</div>
@ -185,73 +185,73 @@
<div class="grid free-themes">
<div class="col-3">
<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>
<span>Saga Blue</span>
</div>
<div class="col-3">
<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>
<span>Saga Green</span>
</div>
<div class="col-3">
<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>
<span>Saga Orange</span>
</div>
<div class="col-3">
<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>
<span>Saga Purple</span>
</div>
<div class="col-3">
<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>
<span>Vela Blue</span>
</div>
<div class="col-3">
<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>
<span>Vela Green</span>
</div>
<div class="col-3">
<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>
<span>Vela Orange</span>
</div>
<div class="col-3">
<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>
<span>Vela Purple</span>
</div>
<div class="col-3">
<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>
<span>Arya Blue</span>
</div>
<div class="col-3">
<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>
<span>Arya Green</span>
</div>
<div class="col-3">
<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>
<span>Arya Orange</span>
</div>
<div class="col-3">
<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>
<span>Arya Purple</span>
</div>
@ -262,37 +262,37 @@
<div class="grid free-themes">
<div class="col-3">
<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>
<span>Soho Light</span>
</div>
<div class="col-3">
<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>
<span>Soho Dark</span>
</div>
<div class="col-3">
<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>
<span>Viva Light</span>
</div>
<div class="col-3">
<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>
<span>Viva Dark</span>
</div>
<div class="col-3">
<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>
<span>Mira</span>
</div>
<div class="col-3">
<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>
<span>Nano</span>
</div>

2
layouts/AppMenu.vue
View File

@ -1,7 +1,7 @@
<template>
<div :class="['layout-sidebar', {'active': active}]">
<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>
<div class="layout-sidebar-filter p-fluid">
<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>
</a>
<!-- <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> -->
<ul ref="topbarMenu" class="topbar-menu">
<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 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-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-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-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-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 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-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-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-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-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 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-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-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-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-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 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><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><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-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-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-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-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-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-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-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 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-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-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-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-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-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-purple', true)"><img src="demo/images/themes/arya-purple.png" alt="Arya Purple" /><span>Arya Purple</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-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, '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-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, '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-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 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-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-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, 'nano')"><img src="demo/images/themes/nano.jpg" alt="Nano" /><span>Nano</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, '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, '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>
</ul>
</transition>
</li>

2
pages/autocomplete/AutoCompleteDoc.vue
View File

@ -133,7 +133,7 @@ export default {
<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;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;/template&gt;
&lt;/AutoComplete&gt;

18
pages/avatar/index.vue
View File

@ -67,9 +67,9 @@
<div class="col-12 md:col-4">
<div class="card">
<h5>Image</h5>
<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/onyamalimba.png" class="mr-2" 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/onyamalimba.png" class="mr-2" shape="circle" />
</div>
</div>
@ -77,11 +77,11 @@
<div class="card">
<h5>Avatar Group</h5>
<AvatarGroup class="mb-3">
<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/onyamalimba.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/amyelsner.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/ionibowcher.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" />
</AvatarGroup>
</div>
@ -90,7 +90,7 @@
<div class="col-12 md:col-4">
<div class="card">
<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>

2
pages/card/CardDoc.vue
View File

@ -18,7 +18,7 @@ import Card from 'primevue/card';
<pre v-code><code>
&lt;Card&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 #title&gt;
Advanced Card

2
pages/card/index.vue
View File

@ -21,7 +21,7 @@
<Card style="width: 25em">
<template #header>
<img alt="user header" src="/demo/images/usercard.png" />
<img alt="user header" src="//demo/images/usercard.png" />
</template>
<template #title> Advanced Card </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-content"&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 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-content">
<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>
<h4 class="mb-1">{{ slotProps.data.name }}</h4>
@ -45,7 +45,7 @@
<div class="product-item">
<div class="product-item-content">
<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>
<h4 class="mb-1">{{ slotProps.data.name }}</h4>
@ -72,7 +72,7 @@
<div class="product-item">
<div class="product-item-content">
<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>
<h4 class="mb-1">{{ slotProps.data.name }}</h4>

12
pages/chip/index.vue
View File

@ -28,18 +28,18 @@
<h5>Image</h5>
<div class="flex align-items-center">
<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="Onyama Limba" image="demo/images/avatar/onyamalimba.png" class="mr-2" />
<Chip label="Xuxue Feng" image="demo/images/avatar/xuxuefeng.png" removable />
<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="Onyama Limba" image="/demo/images/avatar/onyamalimba.png" class="mr-2" />
<Chip label="Xuxue Feng" image="/demo/images/avatar/xuxuefeng.png" removable />
</div>
<h5>Styling</h5>
<div class="flex align-items-center">
<Chip label="Action" 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="Xuxue Feng" image="demo/images/avatar/xuxuefeng.png" class="custom-chip" removable />
<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 />
</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">
<ColorPicker v-model="color3" :inline="true" />
<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>

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>
<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;
</code></pre>

2
pages/contextmenu/index.vue
View File

@ -13,7 +13,7 @@
<div class="content-section implementation">
<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" />
</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 header="Image">
<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>
</Column>
<Column field="price" header="Price" :sortable="true" style="min-width: 8rem">
@ -79,7 +79,7 @@
</div>
<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">
<label for="name">Name</label>
<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 header="Agent" sortable filterField="representative" sortField="representative.name" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
<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>
</template>
<template #filter="{ filterModel }">
@ -66,7 +66,7 @@
<MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
<template #option="slotProps">
<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>
</div>
</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="brand" header="Brand"&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;/Column&gt;
&lt;Column field="color" header="Color"&gt;&lt;/Column&gt;
@ -1133,7 +1133,7 @@ matchModes: [
&lt;template #expansion="slotProps"&gt;
&lt;div class="car-details"&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="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;
@ -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;template #option="optionProps"&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;/div&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;template #option="slotProps"&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;/div&gt;
&lt;/template&gt;

8
pages/datatable/DataTableFilterDemo.vue
View File

@ -64,7 +64,7 @@
</Column>
<Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
<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>
</template>
<template #filter="{ filterModel }">
@ -72,7 +72,7 @@
<MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
<template #option="slotProps">
<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>
</div>
</template>
@ -178,14 +178,14 @@
</Column>
<Column header="Agent" filterField="representative" :showFilterMenu="false" style="min-width: 14rem">
<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>
</template>
<template #filter="{ filterModel, filterCallback }">
<MultiSelect v-model="filterModel.value" @change="filterCallback()" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
<template #option="slotProps">
<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>
</div>
</template>

2
pages/datatable/DataTableRowExpandDemo.vue
View File

@ -21,7 +21,7 @@
<Column field="name" header="Name" sortable></Column>
<Column header="Image">
<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>
</Column>
<Column field="price" header="Price" sortable>

6
pages/datatable/DataTableRowGroupDemo.vue
View File

@ -29,7 +29,7 @@
</Column>
<Column field="date" header="Date" style="min-width: 200px"></Column>
<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>
</template>
<template #groupfooter="slotProps">
@ -73,7 +73,7 @@
</Column>
<Column field="date" header="Date"></Column>
<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>
</template>
<template #groupfooter="slotProps">
@ -93,7 +93,7 @@
</Column>
<Column field="representative.name" header="Representative">
<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>
</template>
</Column>

2
pages/datatable/DataTableScrollDemo.vue
View File

@ -116,7 +116,7 @@
</Column>
<Column field="date" header="Date" style="min-width: 200px"></Column>
<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>
</template>
<template #groupfooter="slotProps">

8
pages/datatable/DataTableStateDemo.vue
View File

@ -45,14 +45,14 @@
</Column>
<Column header="Representative" :sortable="true" sortField="representative.name" filterField="representative.name" filterMatchMode="in" style="width: 25%">
<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>
</template>
<template #filter>
<MultiSelect v-model="filters1['representative.name']" :options="representatives" optionLabel="name" optionValue="name" placeholder="All" class="p-column-filter">
<template #option="slotProps">
<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>
</div>
</template>
@ -111,14 +111,14 @@
</Column>
<Column header="Representative" :sortable="true" sortField="representative.name" filterField="representative.name" filterMatchMode="in" style="width: 25%">
<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>
</template>
<template #filter>
<MultiSelect v-model="filters2['representative.name']" :options="representatives" optionLabel="name" optionValue="name" placeholder="All" class="p-column-filter">
<template #option="slotProps">
<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>
</div>
</template>

2
pages/datatable/DataTableTemplatingDemo.vue
View File

@ -20,7 +20,7 @@
<Column field="name" header="Name"></Column>
<Column header="Image">
<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>
</Column>
<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="car-details"&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="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;
@ -63,7 +63,7 @@ export default {
&lt;template #grid="slotProps"&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;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;Button icon="pi pi-search"&gt;&lt;/Button&gt;
&lt;/Panel&gt;

4
pages/dataview/index.vue
View File

@ -25,7 +25,7 @@
<template #list="slotProps">
<div class="col-12">
<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-name">{{ slotProps.data.name }}</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>
</div>
<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-description">{{ slotProps.data.description }}</div>
<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>
<!-- <DeferredContent @load="onImageLoad">
<img src="demo/images/nature/nature4.jpg" alt="Nature"/>
<img src="/demo/images/nature/nature4.jpg" alt="Nature"/>
</DeferredContent> -->
<div style="height: 500px"></div>

74
pages/dock/DockDoc.vue
View File

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

22
pages/dock/index.vue
View File

@ -97,46 +97,46 @@ export default {
dockItems: [
{
label: 'Finder',
icon: 'demo/images/dock/finder.svg',
icon: '/demo/images/dock/finder.svg',
command: () => {
this.displayFinder = true;
}
},
{
label: 'Terminal',
icon: 'demo/images/dock/terminal.svg',
icon: '/demo/images/dock/terminal.svg',
command: () => {
this.displayTerminal = true;
}
},
{
label: 'App Store',
icon: 'demo/images/dock/appstore.svg',
icon: '/demo/images/dock/appstore.svg',
command: () => {
this.$toast.add({ severity: 'error', summary: 'An unexpected error occurred while signing in.', detail: 'UNTRUSTED_CERT_TITLE', group: 'tc', life: 3000 });
}
},
{
label: 'Safari',
icon: 'demo/images/dock/safari.svg',
icon: '/demo/images/dock/safari.svg',
command: () => {
this.$toast.add({ severity: 'warn', summary: 'Safari has stopped working', group: 'tc', life: 3000 });
}
},
{
label: 'Photos',
icon: 'demo/images/dock/photos.svg',
icon: '/demo/images/dock/photos.svg',
command: () => {
this.displayPhotos = true;
}
},
{
label: 'GitHub',
icon: 'demo/images/dock/github.svg'
icon: '/demo/images/dock/github.svg'
},
{
label: 'Trash',
icon: 'demo/images/dock/trash.png',
icon: '/demo/images/dock/trash.png',
command: () => {
this.$toast.add({ severity: 'info', summary: 'Empty Trash', life: 3000 });
}
@ -145,19 +145,19 @@ export default {
dockBasicItems: [
{
label: 'Finder',
icon: 'demo/images/dock/finder.svg'
icon: '/demo/images/dock/finder.svg'
},
{
label: 'App Store',
icon: 'demo/images/dock/appstore.svg'
icon: '/demo/images/dock/appstore.svg'
},
{
label: 'Photos',
icon: 'demo/images/dock/photos.svg'
icon: '/demo/images/dock/photos.svg'
},
{
label: 'Trash',
icon: 'demo/images/dock/trash.png'
icon: '/demo/images/dock/trash.png'
}
],
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;template #value="slotProps"&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;/div&gt;
&lt;span v-else&gt;
@ -113,7 +113,7 @@ export default {
&lt;/template&gt;
&lt;template #option="slotProps"&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;/div&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 header="Image">
<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>
</p-column>
<p-column field="category" header="Category"></p-column>
@ -610,7 +610,7 @@ export default {
<Column field="name" header="Name"></Column>
<Column header="Image">
<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>
</Column>
<Column field="category" header="Category"></Column>
@ -709,7 +709,7 @@ export default {
<Column field="name" header="Name"></Column>
<Column header="Image">
<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>
</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 header="Image">
<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>
</Column>
<Column field="category" header="Category"></Column>

60
pages/galleria/GalleriaDoc.vue
View File

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

4
pages/image/index.vue
View File

@ -11,10 +11,10 @@
<div class="content-section implementation">
<div class="card">
<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>
<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>

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;/template&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;/Inplace&gt;
</template>

2
pages/inplace/index.vue
View File

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

14
pages/landing/BlockSection.vue
View File

@ -13,7 +13,7 @@
<div class="prime-block flex align-self-stretch p-1">
<div class="block-sidebar w-1 p-3">
<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 class="sidebar-menu mt-5">
<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="block-header py-3 px-4 flex justify-content-between align-items-center">
<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 class="flex-auto sidebar-menu flex">
<div class="bar w-2rem mx-2"></div>
@ -148,7 +148,7 @@
<div class="prime-block flex align-self-stretch p-1">
<div class="block-sidebar p-3">
<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 class="sidebar-menu mt-5">
<div class="circle my-3"></div>
@ -214,7 +214,7 @@
<div class="prime-block flex align-self-stretch p-1">
<div class="block-sidebar w-1 p-3">
<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 class="sidebar-menu mt-5">
<div class="bar w-8 my-3"></div>
@ -278,7 +278,7 @@
<div class="prime-block flex align-self-stretch p-1">
<div class="block-sidebar p-3">
<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 class="sidebar-menu mt-5">
<div class="circle my-3"></div>
@ -341,7 +341,7 @@
<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="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 class="flex-auto sidebar-menu flex">
<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-item block-item-active animation-2 mx-3 w-8rem text-center flex flex-column align-items-center overflow-visible">
<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 class="bar w-2rem 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">
<ul class="list-none p-0 m-0">
<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>
<ProgressBar :value="pbValue1" :showValue="false" class="w-10rem ml-auto mr-3" style="height: .5rem" />
<span class="text-secondary font-medium">15%</span>
</li>
<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>
<ProgressBar :value="pbValue3" :showValue="false" class="w-10rem ml-auto mr-3" style="height: .5rem" />
<span class="text-secondary font-medium">85%</span>
</li>
<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>
<ProgressBar :value="pbValue3" :showValue="false" class="w-10rem ml-auto mr-3" style="height: .5rem" />
<span class="text-secondary font-medium">50%</span>
</li>
<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>
<ProgressBar :value="pbValue4" :showValue="false" class="w-10rem ml-auto mr-3" style="height: .5rem" />
<span class="text-secondary font-medium">75%</span>
</li>
<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>
<ProgressBar :value="pbValue5" :showValue="false" class="w-10rem ml-auto mr-3" style="height: .5rem" />
<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="box p-4 mb-5">
<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 class="flex align-items-center mb-4">
<div class="flex flex-column">
@ -105,7 +105,7 @@
<ul class="list-none p-0 m-0">
<li class="flex mb-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>
<div class="flex flex-column">
<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>
<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"
: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="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">
<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 class="p-fluid">
<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">
<div class="section-header">Features</div>
<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="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>
<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 class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3">
<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>
<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 class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3">
<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>
<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 class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3">
<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>
<p class="m-0 text-secondary font-medium">Compliant with the Web Content Accessibility Guidelines (WCAG 2.0).</p>
</div>
</div>
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3">
<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>
<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 class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3">
<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>
<p class="m-0 text-secondary font-medium">First class support for responsive design led by touch optimized elements.</p>
</div>
</div>
<div class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3">
<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>
<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 class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3">
<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>
<p class="m-0 text-secondary font-medium">Top-notch support for Typescript with types and tooling assistance.</p>
</div>

2
pages/landing/FooterSection.vue
View File

@ -69,7 +69,7 @@
<div class="flex justify-content-between py-6">
<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>
<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">

10
pages/landing/HeaderSection.vue
View File

@ -1,7 +1,7 @@
<template>
<section :ref="containerRef" :class="['landing-header pad-section', {'landing-header-active': menuActive}]">
<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>
<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">
<li class="mr-0 lg:mr-2">
<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>
</nuxt-link>
</li>
<li class="mr-0 lg:mr-2">
<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>
</a>
</li>
<li class="mr-0 lg:mr-2">
<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>
</a>
</li>
<li class="mr-0 lg:mr-2">
<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>
</a>
</li>

14
pages/landing/HeroSection.vue
View File

@ -5,7 +5,7 @@
<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="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">
<b>Templates</b>
<span>Spectacular Designs</span>
@ -14,7 +14,7 @@
</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="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">
<b>Theme Designer</b>
<span>Create Your Own</span>
@ -25,7 +25,7 @@
<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="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">
<b>Open Source</b>
<span>90+ UI Components</span>
@ -35,7 +35,7 @@
<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-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">
<b class="font-bold">NEXT-GEN VUE UI</b>
</div>
@ -44,7 +44,7 @@
</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="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">
<b>CSS Utilities</b>
<span>PrimeFlex CSS</span>
@ -55,7 +55,7 @@
<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="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">
<b>Prime Blocks</b>
<span>350+ UI Blocks</span>
@ -65,7 +65,7 @@
<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="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">
<b>Icon Library</b>
<span>200+ Icons</span>

4
pages/landing/TemplateSection.vue
View File

@ -122,10 +122,10 @@ export default {
const isDark = this.$appState.darkTheme;
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() {
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>
<a type="button" class="font-medium p-link linkbox mt-4" href="https://www.primefaces.org/designer-vue">more...</a>
</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">
<DataTable :value="customers" :paginator="true" :rows="5"
dataKey="id" :rowHover="true" v-model:selection="selectedCustomers" v-model:filters="filters" filterDisplay="menu" :loading="loading"
@ -44,7 +44,7 @@
</Column>
<Column header="Agent" sortable sortField="representative.name" style="min-width: 14rem">
<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>
</template>
</Column>

2
pages/landing/UsersSection.vue
View File

@ -71,7 +71,7 @@
export default {
methods: {
imgSrc(brand) {
return `demo/images/landing/whouses/${brand}-${this.colorScheme}.svg`
return `/demo/images/landing/whouses/${brand}-${this.colorScheme}.svg`
}
},
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;template #option="slotProps"&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;/div&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;template #value="slotProps"&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;/div&gt;
&lt;template v-if="!slotProps.value || slotProps.value.length === 0"&gt;
@ -122,7 +122,7 @@ export default {
&lt;/template&gt;
&lt;template #option="slotProps"&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;/div&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 #item="slotProps"&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;span class="p-caritem-vin"&gt;{{slotProps.item.vin}}&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 #item="slotProps"&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;span class="p-caritem-vin"&gt;{{slotProps.item.vin}}&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">
<div class="product-item">
<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 class="product-list-detail">
<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;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;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;
&lt;/template&gt;

2
pages/organizationchart/index.vue
View File

@ -25,7 +25,7 @@
<template #person="slotProps">
<div class="node-header ui-corner-top">{{ slotProps.node.data.label }}</div>
<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>
</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;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;
</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>
<pre v-code><code>
&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;
</code></pre>

2
pages/overlaypanel/index.vue
View File

@ -17,7 +17,7 @@
<Column field="name" header="Name" sortable style="width: 50%"></Column>
<Column header="Image" style="width: 20%">
<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>
</Column>
<Column field="price" header="Price" sortable style="width: 30%">

2
pages/paginator/index.vue
View File

@ -24,7 +24,7 @@
</Paginator>
<div class="image-gallery">
<img :src="'demo/images/nature/' + image + '.jpg'" />
<img :src="'/demo/images/nature/' + image + '.jpg'" />
</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;template #item="slotProps"&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;span class="p-caritem-vin"&gt;{{slotProps.item.vin}}&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 #item="slotProps"&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;span class="p-caritem-vin"&gt;{{slotProps.item.vin}}&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;template #item="slotProps"&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;span class="p-caritem-vin"&gt;{{slotProps.item.vin}}&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">
<div class="product-item">
<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 class="product-list-detail">
<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 header="Image">
<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>
</Column>
<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;template #option="slotProps"&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;
&lt;/template&gt;

2
pages/timeline/TimelineDoc.vue
View File

@ -110,7 +110,7 @@ export default {
&#123;&#123;slotProps.item.date&#125;&#125;
&lt;/template&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
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;

2
pages/timeline/index.vue
View File

@ -65,7 +65,7 @@
{{ slotProps.item.date }}
</template>
<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>
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!

12
pages/uikit/UIKit.vue
View File

@ -8,7 +8,7 @@
<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="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 class="w-full md:w-6">
<div class="text-primary font-bold mb-2">UP-TO-DATE</div>
@ -61,12 +61,12 @@
</ul>
</div>
<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 class="flex flex-column md:flex-row align-items-center gap-4 md:gap-8">
<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 class="w-full md:w-6">
<div class="text-primary font-bold mb-2">DARK MODE</div>
@ -94,7 +94,7 @@
style="border-radius: 50px"
>
<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
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"
>
<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>
</div>
@ -289,7 +289,7 @@ export default {
},
computed: {
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":[
{
"itemImageSrc": "demo/images/galleria/galleria1.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria1s.jpg",
"itemImageSrc": "/demo/images/galleria/galleria1.jpg",
"thumbnailImageSrc": "/demo/images/galleria/galleria1s.jpg",
"alt": "Description for Image 1",
"title": "Title 1"
},
{
"itemImageSrc": "demo/images/galleria/galleria2.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria2s.jpg",
"itemImageSrc": "/demo/images/galleria/galleria2.jpg",
"thumbnailImageSrc": "/demo/images/galleria/galleria2s.jpg",
"alt": "Description for Image 2",
"title": "Title 2"
},
{
"itemImageSrc": "demo/images/galleria/galleria3.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria3s.jpg",
"itemImageSrc": "/demo/images/galleria/galleria3.jpg",
"thumbnailImageSrc": "/demo/images/galleria/galleria3s.jpg",
"alt": "Description for Image 3",
"title": "Title 3"
},
{
"itemImageSrc": "demo/images/galleria/galleria4.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria4s.jpg",
"itemImageSrc": "/demo/images/galleria/galleria4.jpg",
"thumbnailImageSrc": "/demo/images/galleria/galleria4s.jpg",
"alt": "Description for Image 4",
"title": "Title 4"
},
{
"itemImageSrc": "demo/images/galleria/galleria5.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria5s.jpg",
"itemImageSrc": "/demo/images/galleria/galleria5.jpg",
"thumbnailImageSrc": "/demo/images/galleria/galleria5s.jpg",
"alt": "Description for Image 5",
"title": "Title 5"
},
{
"itemImageSrc": "demo/images/galleria/galleria6.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria6s.jpg",
"itemImageSrc": "/demo/images/galleria/galleria6.jpg",
"thumbnailImageSrc": "/demo/images/galleria/galleria6s.jpg",
"alt": "Description for Image 6",
"title": "Title 6"
},
{
"itemImageSrc": "demo/images/galleria/galleria7.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria7s.jpg",
"itemImageSrc": "/demo/images/galleria/galleria7.jpg",
"thumbnailImageSrc": "/demo/images/galleria/galleria7s.jpg",
"alt": "Description for Image 7",
"title": "Title 7"
},
{
"itemImageSrc": "demo/images/galleria/galleria8.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria8s.jpg",
"itemImageSrc": "/demo/images/galleria/galleria8.jpg",
"thumbnailImageSrc": "/demo/images/galleria/galleria8s.jpg",
"alt": "Description for Image 8",
"title": "Title 8"
},
{
"itemImageSrc": "demo/images/galleria/galleria9.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria9s.jpg",
"itemImageSrc": "/demo/images/galleria/galleria9.jpg",
"thumbnailImageSrc": "/demo/images/galleria/galleria9s.jpg",
"alt": "Description for Image 9",
"title": "Title 9"
},
{
"itemImageSrc": "demo/images/galleria/galleria10.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria10s.jpg",
"itemImageSrc": "/demo/images/galleria/galleria10.jpg",
"thumbnailImageSrc": "/demo/images/galleria/galleria10s.jpg",
"alt": "Description for Image 10",
"title": "Title 10"
},
{
"itemImageSrc": "demo/images/galleria/galleria11.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria11s.jpg",
"itemImageSrc": "/demo/images/galleria/galleria11.jpg",
"thumbnailImageSrc": "/demo/images/galleria/galleria11s.jpg",
"alt": "Description for Image 11",
"title": "Title 11"
},
{
"itemImageSrc": "demo/images/galleria/galleria12.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria12s.jpg",
"itemImageSrc": "/demo/images/galleria/galleria12.jpg",
"thumbnailImageSrc": "/demo/images/galleria/galleria12s.jpg",
"alt": "Description for Image 12",
"title": "Title 12"
},
{
"itemImageSrc": "demo/images/galleria/galleria13.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria13s.jpg",
"itemImageSrc": "/demo/images/galleria/galleria13.jpg",
"thumbnailImageSrc": "/demo/images/galleria/galleria13s.jpg",
"alt": "Description for Image 13",
"title": "Title 13"
},
{
"itemImageSrc": "demo/images/galleria/galleria14.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria14s.jpg",
"itemImageSrc": "/demo/images/galleria/galleria14.jpg",
"thumbnailImageSrc": "/demo/images/galleria/galleria14s.jpg",
"alt": "Description for Image 14",
"title": "Title 14"
},
{
"itemImageSrc": "demo/images/galleria/galleria15.jpg",
"thumbnailImageSrc": "demo/images/galleria/galleria15s.jpg",
"itemImageSrc": "/demo/images/galleria/galleria15.jpg",
"thumbnailImageSrc": "/demo/images/galleria/galleria15s.jpg",
"alt": "Description for Image 15",
"title": "Title 15"
}