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

CDN images added & move images from assets to public

pull/3642/head
Tuğçe Küçükoğlu 2023-02-06 17:59:12 +03:00
parent f54f71d83c
commit ba309fdf90
396 changed files with 424 additions and 460 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/images/topbar-newyear-bg.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 11 KiB

44
assets/images/topbar-newyear-logo.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 385 KiB

BIN
assets/images/topbar-primesale-2021.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.7 KiB

2
assets/styles/flags.css
View File

File diff suppressed because one or more lines are too long

2
components/carousel/Carousel.spec.js
View File

@ -66,7 +66,7 @@ describe('Carousel.vue', () => {
<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="'images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
</div>
</div>
</div>

2
components/dataview/DataView.spec.js
View File

@ -64,7 +64,7 @@ describe('DataView.vue', () => {
<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="'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>
</div>

2
components/deferredcontent/DeferredContent.spec.js
View File

@ -5,7 +5,7 @@ describe('DeferredContent', () => {
it('should exist', async () => {
const wrapper = mount(DeferredContent, {
slots: {
default: '<img src="/demo/images/nature/nature4.jpg" alt="Nature"/>'
default: '<img src="https://primefaces.org/cdn/primevue/images/nature/nature4.jpg" alt="Nature"/>'
}
});

12
components/galleria/Galleria.spec.js
View File

@ -16,20 +16,20 @@ describe('Gallleria.vue', () => {
props: {
value: [
{
itemImageSrc: 'demo/images/galleria/galleria1.jpg',
thumbnailImageSrc: 'demo/images/galleria/galleria1s.jpg',
itemImageSrc: 'images/galleria/galleria1.jpg',
thumbnailImageSrc: '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: 'images/galleria/galleria2.jpg',
thumbnailImageSrc: '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: 'images/galleria/galleria3.jpg',
thumbnailImageSrc: 'images/galleria/galleria3s.jpg',
alt: 'Description for Image 3',
title: 'Title 3'
}

6
components/image/Image.spec.js
View File

@ -12,12 +12,12 @@ describe('Image.vue', () => {
}
},
props: {
src: 'demo/images/galleria/galleria1.jpg'
src: 'images/galleria/galleria1.jpg'
}
});
expect(wrapper.find('.p-image.p-component').exists()).toBe(true);
expect(wrapper.find('.p-image.p-component img').attributes().src).toBe('demo/images/galleria/galleria1.jpg');
expect(wrapper.find('.p-image.p-component img').attributes().src).toBe('images/galleria/galleria1.jpg');
});
it('should preview', async () => {
@ -29,7 +29,7 @@ describe('Image.vue', () => {
}
},
props: {
src: 'demo/images/galleria/galleria1.jpg',
src: 'images/galleria/galleria1.jpg',
preview: true
}
});

2
components/inplace/Inplace.spec.js
View File

@ -33,7 +33,7 @@ describe('Inplace.vue', () => {
<span class="pi pi-search" style="vertical-align: middle"></span>
<span style="margin-left:.5rem; vertical-align: middle">View Picture</span>
`,
content: `<img src="/demo/images/nature/nature1.jpg" />`
content: `<img src="https://primefaces.org/cdn/primevue/images/nature/nature1.jpg" />`
}
});

2
components/orderlist/OrderList.spec.js
View File

@ -92,7 +92,7 @@ describe('OrderList.vue', () => {
<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="'images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
</div>
<div class="product-list-detail">
<h6 class="mb-2">{{slotProps.item.name}}</h6>

2
components/organizationchart/OrganizationChart.spec.js
View File

@ -110,7 +110,7 @@ describe('OrganizationChart.vue', () => {
<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="'images/organization/' + slotProps.node.data.avatar" width="32">
<div>{{slotProps.node.data.name}}</div>
</div>
</template>

108
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="https://primefaces.org/cdn/primevue/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="https://primefaces.org/cdn/primevue/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="https://primefaces.org/cdn/primevue/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="https://primefaces.org/cdn/primevue/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="https://primefaces.org/cdn/primevue/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="https://primefaces.org/cdn/primevue/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="https://primefaces.org/cdn/primevue/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="https://primefaces.org/cdn/primevue/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="https://primefaces.org/cdn/primevue/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="https://primefaces.org/cdn/primevue/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="https://primefaces.org/cdn/primevue/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="https://primefaces.org/cdn/primevue/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="https://primefaces.org/cdn/primevue/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="https://primefaces.org/cdn/primevue/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="https://primefaces.org/cdn/primevue/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="https://primefaces.org/cdn/primevue/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="https://primefaces.org/cdn/primevue/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="https://primefaces.org/cdn/primevue/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="https://primefaces.org/cdn/primevue/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="https://primefaces.org/cdn/primevue/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="https://primefaces.org/cdn/primevue/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="https://primefaces.org/cdn/primevue/images/themes/lara-dark-teal.png" alt="Lara Dark Teal" />
</button>
<span>Lara Dark Teal</span>
</div>
@ -185,37 +185,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="https://primefaces.org/cdn/primevue/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="https://primefaces.org/cdn/primevue/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="https://primefaces.org/cdn/primevue/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="https://primefaces.org/cdn/primevue/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="https://primefaces.org/cdn/primevue/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="https://primefaces.org/cdn/primevue/images/themes/nano.jpg" alt="Mira" />
</button>
<span>Nano</span>
</div>
@ -225,73 +225,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="https://primefaces.org/cdn/primevue/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="https://primefaces.org/cdn/primevue/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="https://primefaces.org/cdn/primevue/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="https://primefaces.org/cdn/primevue/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="https://primefaces.org/cdn/primevue/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="https://primefaces.org/cdn/primevue/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="https://primefaces.org/cdn/primevue/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="https://primefaces.org/cdn/primevue/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="https://primefaces.org/cdn/primevue/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="https://primefaces.org/cdn/primevue/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="https://primefaces.org/cdn/primevue/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="https://primefaces.org/cdn/primevue/images/themes/arya-purple.png" alt="Arya Purple" />
</button>
<span>Arya Purple</span>
</div>
@ -302,72 +302,72 @@
<div class="grid premium-themes">
<div class="col-12 md:col-6">
<a href="https://www.primefaces.org/sakai-vue">
<img alt="Ultima" src="@/assets/images/layouts/sakai-vue.jpg" />
<img alt="Ultima" src="https://primefaces.org/cdn/primevue/images/layouts/sakai-vue.jpg" />
</a>
</div>
<div class="col-12 md:col-6">
<a href="https://www.primefaces.org/layouts/apollo-vue">
<img alt="Apollo" src="@/assets/images/layouts/apollo-vue.jpg" />
<img alt="Apollo" src="https://primefaces.org/cdn/primevue/images/layouts/apollo-vue.jpg" />
</a>
</div>
<div class="col-12 md:col-6">
<a href="https://www.primefaces.org/layouts/atlantis-vue">
<img alt="Atlantis" src="@/assets/images/layouts/atlantis-vue.jpg" />
<img alt="Atlantis" src="https://primefaces.org/cdn/primevue/images/layouts/atlantis-vue.jpg" />
</a>
</div>
<div class="col-12 md:col-6">
<a href="https://www.primefaces.org/layouts/freya-vue">
<img alt="Freya" src="@/assets/images/layouts/freya-vue.png" />
<img alt="Freya" src="https://primefaces.org/cdn/primevue/images/layouts/freya-vue.png" />
</a>
</div>
<div class="col-12 md:col-6">
<a href="https://www.primefaces.org/layouts/ultima-vue">
<img alt="Ultima" src="@/assets/images/layouts/ultima-vue.jpg" />
<img alt="Ultima" src="https://primefaces.org/cdn/primevue/images/layouts/ultima-vue.jpg" />
</a>
</div>
<div class="col-12 md:col-6">
<a href="https://www.primefaces.org/layouts/diamond-vue">
<img alt="Diamond" src="@/assets/images/layouts/diamond-vue.jpg" />
<img alt="Diamond" src="https://primefaces.org/cdn/primevue/images/layouts/diamond-vue.jpg" />
</a>
</div>
<div class="col-12 md:col-6">
<a href="https://www.primefaces.org/layouts/verona-vue">
<img alt="Verona" src="@/assets/images/layouts/verona-vue.jpg" />
<img alt="Verona" src="https://primefaces.org/cdn/primevue/images/layouts/verona-vue.jpg" />
</a>
</div>
<div class="col-12 md:col-6">
<a href="https://www.primefaces.org/layouts/poseidon-vue">
<img alt="Poseidon" src="@/assets/images/layouts/poseidon-vue.jpg" />
<img alt="Poseidon" src="https://primefaces.org/cdn/primevue/images/layouts/poseidon-vue.jpg" />
</a>
</div>
<div class="col-12 md:col-6">
<a href="https://www.primefaces.org/layouts/sapphire-vue">
<img alt="Sapphire" src="@/assets/images/layouts/sapphire-vue.jpg" />
<img alt="Sapphire" src="https://primefaces.org/cdn/primevue/images/layouts/sapphire-vue.jpg" />
</a>
</div>
<div class="col-12 md:col-6">
<a href="https://www.primefaces.org/layouts/serenity-vue">
<img alt="Serenity" src="@/assets/images/layouts/serenity-vue.jpg" />
<img alt="Serenity" src="https://primefaces.org/cdn/primevue/images/layouts/serenity-vue.jpg" />
</a>
</div>
<div class="col-12 md:col-6">
<a href="https://www.primefaces.org/layouts/babylon-vue">
<img alt="Babylon" src="@/assets/images/layouts/babylon-vue.jpg" />
<img alt="Babylon" src="https://primefaces.org/cdn/primevue/images/layouts/babylon-vue.jpg" />
</a>
</div>
<div class="col-12 md:col-6">
<a href="https://www.primefaces.org/layouts/avalon-vue">
<img alt="Avalon" src="@/assets/images/layouts/avalon-vue.jpg" />
<img alt="Avalon" src="https://primefaces.org/cdn/primevue/images/layouts/avalon-vue.jpg" />
</a>
</div>
<div class="col-12 md:col-6">
<a href="https://www.primefaces.org/layouts/roma-vue">
<img alt="Roma" src="@/assets/images/layouts/roma-vue.jpg" />
<img alt="Roma" src="https://primefaces.org/cdn/primevue/images/layouts/roma-vue.jpg" />
</a>
</div>
<div class="col-12 md:col-6">
<a href="https://www.primefaces.org/layouts/prestige-vue">
<img alt="Prestige" src="@/assets/images/layouts/prestige-vue.jpg" />
<img alt="Prestige" src="https://primefaces.org/cdn/primevue/images/layouts/prestige-vue.jpg" />
</a>
</div>
</div>

2
layouts/AppMenu.vue
View File

@ -1,7 +1,7 @@
<template>
<div :class="['layout-sidebar', { active: active }]">
<router-link to="/" class="logo">
<img :src="$config.public.contextPath + 'demo/images/primevue-logo-' + `${$appState.darkTheme ? 'light' : 'dark'}` + '.svg'" alt="primevue logo" />
<img :src="$config.public.contextPath + 'images/primevue-logo-' + `${$appState.darkTheme ? 'light' : 'dark'}` + '.svg'" alt="primevue logo" />
</router-link>
<div class="layout-sidebar-filter p-fluid">
<AutoComplete

118
layouts/AppTopBar.vue
View File

@ -4,7 +4,7 @@
<i class="pi pi-bars"></i>
</a>
<div v-tooltip.bottom="$appState.theme" class="app-theme">
<img :src="$config.public.contextPath + 'demo/images/themes/' + logoMap[$appState.theme]" />
<img :src="$config.public.contextPath + 'images/themes/' + logoMap[$appState.theme]" />
</div>
<ul ref="topbarMenu" class="topbar-menu">
<li class="topbar-submenu">
@ -32,138 +32,138 @@
<li class="topbar-submenu-header">BOOTSTRAP</li>
<li>
<a @click="changeTheme($event, 'bootstrap4-light-blue')"><img :src="$config.public.contextPath + 'demo/images/themes/bootstrap4-light-blue.svg'" alt="Blue Light" /><span>Blue Light</span></a>
<a @click="changeTheme($event, 'bootstrap4-light-blue')"><img :src="$config.public.contextPath + '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="$config.public.contextPath + 'demo/images/themes/bootstrap4-light-purple.svg'" alt="Purple Light" /><span>Purple Light</span></a>
<a @click="changeTheme($event, 'bootstrap4-light-purple')"><img :src="$config.public.contextPath + '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="$config.public.contextPath + 'demo/images/themes/bootstrap4-dark-blue.svg'" alt="Blue Dark" /><span>Blue Dark</span></a>
<a @click="changeTheme($event, 'bootstrap4-dark-blue', true)"><img :src="$config.public.contextPath + '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="$config.public.contextPath + 'demo/images/themes/bootstrap4-dark-purple.svg'" alt="Purple Dark" /><span>Purple Dark</span></a>
<a @click="changeTheme($event, 'bootstrap4-dark-purple', true)"><img :src="$config.public.contextPath + '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="$config.public.contextPath + 'demo/images/themes/md-light-indigo.svg'" alt="Indigo Light" /><span>Indigo Light</span></a>
<a @click="changeTheme($event, 'md-light-indigo')"><img :src="$config.public.contextPath + '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="$config.public.contextPath + 'demo/images/themes/md-light-deeppurple.svg'" alt="Deep Purple Light" /><span>Deep Purple Light</span></a>
<a @click="changeTheme($event, 'md-light-deeppurple')"><img :src="$config.public.contextPath + '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="$config.public.contextPath + 'demo/images/themes/md-dark-indigo.svg'" alt="Indigo Dark" /><span>Indigo Dark</span></a>
<a @click="changeTheme($event, 'md-dark-indigo', true)"><img :src="$config.public.contextPath + '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="$config.public.contextPath + 'demo/images/themes/md-dark-deeppurple.svg'" alt="Deep Purple Dark" /><span>Deep Purple Dark</span></a>
<a @click="changeTheme($event, 'md-dark-deeppurple', true)"><img :src="$config.public.contextPath + '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="$config.public.contextPath + 'demo/images/themes/md-light-indigo.svg'" alt="Indigo Light" /><span>Indigo Light</span></a>
<a @click="changeTheme($event, 'mdc-light-indigo')"><img :src="$config.public.contextPath + '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="$config.public.contextPath + 'demo/images/themes/md-light-deeppurple.svg'" alt="Deep Purple Light" /><span>Deep Purple Light</span></a>
<a @click="changeTheme($event, 'mdc-light-deeppurple')"><img :src="$config.public.contextPath + '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="$config.public.contextPath + 'demo/images/themes/md-dark-indigo.svg'" alt="Indigo Dark" /><span>Indigo Dark</span></a>
<a @click="changeTheme($event, 'mdc-dark-indigo', true)"><img :src="$config.public.contextPath + '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="$config.public.contextPath + 'demo/images/themes/md-dark-deeppurple.svg'" alt="Deep Purple Dark" /><span>Deep Purple Dark</span></a>
<a @click="changeTheme($event, 'mdc-dark-deeppurple', true)"><img :src="$config.public.contextPath + '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="$config.public.contextPath + 'demo/images/themes/tailwind-light.png'" alt="Tailwind Light" /><span>Tailwind Light</span></a>
<a @click="changeTheme($event, 'tailwind-light')"><img :src="$config.public.contextPath + '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="$config.public.contextPath + 'demo/images/themes/fluent-light.png'" alt="Fluent Light" /><span>Fluent Light</span></a>
<a @click="changeTheme($event, 'fluent-light')"><img :src="$config.public.contextPath + 'images/themes/fluent-light.png'" alt="Fluent Light" /><span>Fluent Light</span></a>
</li>
<li class="topbar-submenu-header flex align-items-center">PRIMEONE</li>
<li>
<a @click="changeTheme($event, 'lara-light-indigo')"><img :src="$config.public.contextPath + 'demo/images/themes/lara-light-indigo.png'" alt="Lara Light Indigo" /><span>Lara Light Indigo</span></a>
<a @click="changeTheme($event, 'lara-light-indigo')"><img :src="$config.public.contextPath + '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="$config.public.contextPath + 'demo/images/themes/lara-light-blue.png'" alt="Lara Light Blue" /><span>Lara Light Blue</span></a>
<a @click="changeTheme($event, 'lara-light-blue')"><img :src="$config.public.contextPath + '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="$config.public.contextPath + 'demo/images/themes/lara-light-purple.png'" alt="Lara Light Purple" /><span>Lara Light Purple</span></a>
<a @click="changeTheme($event, 'lara-light-purple')"><img :src="$config.public.contextPath + '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="$config.public.contextPath + 'demo/images/themes/lara-light-teal.png'" alt="Lara Light Teal" /><span>Lara Light Teal</span></a>
<a @click="changeTheme($event, 'lara-light-teal')"><img :src="$config.public.contextPath + '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="$config.public.contextPath + 'demo/images/themes/lara-dark-blue.png'" alt="Lara Dark Blue" /><span>Lara Dark Blue</span></a>
<a @click="changeTheme($event, 'lara-dark-blue')"><img :src="$config.public.contextPath + '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="$config.public.contextPath + 'demo/images/themes/lara-dark-indigo.png'" alt="Lara Dark Indigo" /><span>Lara Dark Indigo</span></a>
<a @click="changeTheme($event, 'lara-dark-indigo')"><img :src="$config.public.contextPath + '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="$config.public.contextPath + 'demo/images/themes/lara-dark-purple.png'" alt="Lara Dark Purple" /><span>Lara Dark Purple</span></a>
<a @click="changeTheme($event, 'lara-dark-purple')"><img :src="$config.public.contextPath + '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="$config.public.contextPath + 'demo/images/themes/lara-dark-teal.png'" alt="Lara Dark Teal" /><span>Lara Dark Teal</span></a>
<a @click="changeTheme($event, 'lara-dark-teal')"><img :src="$config.public.contextPath + 'images/themes/lara-dark-teal.png'" alt="Lara Dark Teal" /><span>Lara Dark Teal</span></a>
</li>
<li class="topbar-submenu-header">MISC</li>
<li>
<a @click="changeTheme($event, 'soho-light')"><img :src="$config.public.contextPath + 'demo/images/themes/soho-light.png'" alt="Soho Light" /><span>Soho Light</span></a>
<a @click="changeTheme($event, 'soho-light')"><img :src="$config.public.contextPath + 'images/themes/soho-light.png'" alt="Soho Light" /><span>Soho Light</span></a>
</li>
<li>
<a @click="changeTheme($event, 'soho-dark', true)"><img :src="$config.public.contextPath + 'demo/images/themes/soho-dark.png'" alt="Soho Dark" /><span>Soho Dark</span></a>
<a @click="changeTheme($event, 'soho-dark', true)"><img :src="$config.public.contextPath + 'images/themes/soho-dark.png'" alt="Soho Dark" /><span>Soho Dark</span></a>
</li>
<li>
<a @click="changeTheme($event, 'viva-light')"><img :src="$config.public.contextPath + 'demo/images/themes/viva-light.svg'" alt="Viva Light" /><span>Viva Light</span></a>
<a @click="changeTheme($event, 'viva-light')"><img :src="$config.public.contextPath + 'images/themes/viva-light.svg'" alt="Viva Light" /><span>Viva Light</span></a>
</li>
<li>
<a @click="changeTheme($event, 'viva-dark', true)"><img :src="$config.public.contextPath + 'demo/images/themes/viva-dark.svg'" alt="Viva Dark" /><span>Viva Dark</span></a>
<a @click="changeTheme($event, 'viva-dark', true)"><img :src="$config.public.contextPath + 'images/themes/viva-dark.svg'" alt="Viva Dark" /><span>Viva Dark</span></a>
</li>
<li>
<a @click="changeTheme($event, 'mira')"><img :src="$config.public.contextPath + 'demo/images/themes/mira.jpg'" alt="Mira" /><span>Mira</span></a>
<a @click="changeTheme($event, 'mira')"><img :src="$config.public.contextPath + 'images/themes/mira.jpg'" alt="Mira" /><span>Mira</span></a>
</li>
<li>
<a @click="changeTheme($event, 'nano')"><img :src="$config.public.contextPath + 'demo/images/themes/nano.jpg'" alt="Nano" /><span>Nano</span></a>
<a @click="changeTheme($event, 'nano')"><img :src="$config.public.contextPath + 'images/themes/nano.jpg'" alt="Nano" /><span>Nano</span></a>
</li>
<li class="topbar-submenu-header">PRIMEONE - LEGACY</li>
<li>
<a @click="changeTheme($event, 'saga-blue')"><img :src="$config.public.contextPath + 'demo/images/themes/saga-blue.png'" alt="Saga Blue" /><span>Saga Blue</span></a>
<a @click="changeTheme($event, 'saga-blue')"><img :src="$config.public.contextPath + 'images/themes/saga-blue.png'" alt="Saga Blue" /><span>Saga Blue</span></a>
</li>
<li>
<a @click="changeTheme($event, 'saga-green')"><img :src="$config.public.contextPath + 'demo/images/themes/saga-green.png'" alt="Saga Green" /><span>Saga Green</span></a>
<a @click="changeTheme($event, 'saga-green')"><img :src="$config.public.contextPath + 'images/themes/saga-green.png'" alt="Saga Green" /><span>Saga Green</span></a>
</li>
<li>
<a @click="changeTheme($event, 'saga-orange')"><img :src="$config.public.contextPath + 'demo/images/themes/saga-orange.png'" alt="Saga Orange" /><span>Saga Orange</span></a>
<a @click="changeTheme($event, 'saga-orange')"><img :src="$config.public.contextPath + 'images/themes/saga-orange.png'" alt="Saga Orange" /><span>Saga Orange</span></a>
</li>
<li>
<a @click="changeTheme($event, 'saga-purple')"><img :src="$config.public.contextPath + 'demo/images/themes/saga-purple.png'" alt="Saga Purple" /><span>Saga Purple</span></a>
<a @click="changeTheme($event, 'saga-purple')"><img :src="$config.public.contextPath + 'images/themes/saga-purple.png'" alt="Saga Purple" /><span>Saga Purple</span></a>
</li>
<li>
<a @click="changeTheme($event, 'vela-blue', true)"><img :src="$config.public.contextPath + 'demo/images/themes/vela-blue.png'" alt="Vela Blue" /><span>Vela Blue</span></a>
<a @click="changeTheme($event, 'vela-blue', true)"><img :src="$config.public.contextPath + 'images/themes/vela-blue.png'" alt="Vela Blue" /><span>Vela Blue</span></a>
</li>
<li>
<a @click="changeTheme($event, 'vela-green', true)"><img :src="$config.public.contextPath + 'demo/images/themes/vela-green.png'" alt="Vela Green" /><span>Vela Green</span></a>
<a @click="changeTheme($event, 'vela-green', true)"><img :src="$config.public.contextPath + 'images/themes/vela-green.png'" alt="Vela Green" /><span>Vela Green</span></a>
</li>
<li>
<a @click="changeTheme($event, 'vela-orange', true)"><img :src="$config.public.contextPath + 'demo/images/themes/vela-orange.png'" alt="Vela Orange" /><span>Vela Orange</span></a>
<a @click="changeTheme($event, 'vela-orange', true)"><img :src="$config.public.contextPath + 'images/themes/vela-orange.png'" alt="Vela Orange" /><span>Vela Orange</span></a>
</li>
<li>
<a @click="changeTheme($event, 'vela-purple', true)"><img :src="$config.public.contextPath + 'demo/images/themes/vela-purple.png'" alt="Vela Purple" /><span>Vela Purple</span></a>
<a @click="changeTheme($event, 'vela-purple', true)"><img :src="$config.public.contextPath + 'images/themes/vela-purple.png'" alt="Vela Purple" /><span>Vela Purple</span></a>
</li>
<li>
<a @click="changeTheme($event, 'arya-blue', true)"><img :src="$config.public.contextPath + 'demo/images/themes/arya-blue.png'" alt="Arya Blue" /><span>Arya Blue</span></a>
<a @click="changeTheme($event, 'arya-blue', true)"><img :src="$config.public.contextPath + 'images/themes/arya-blue.png'" alt="Arya Blue" /><span>Arya Blue</span></a>
</li>
<li>
<a @click="changeTheme($event, 'arya-green', true)"><img :src="$config.public.contextPath + 'demo/images/themes/arya-green.png'" alt="Arya Green" /><span>Arya Green</span></a>
<a @click="changeTheme($event, 'arya-green', true)"><img :src="$config.public.contextPath + 'images/themes/arya-green.png'" alt="Arya Green" /><span>Arya Green</span></a>
</li>
<li>
<a @click="changeTheme($event, 'arya-orange', true)"><img :src="$config.public.contextPath + 'demo/images/themes/arya-orange.png'" alt="Arya Orange" /><span>Arya Orange</span></a>
<a @click="changeTheme($event, 'arya-orange', true)"><img :src="$config.public.contextPath + 'images/themes/arya-orange.png'" alt="Arya Orange" /><span>Arya Orange</span></a>
</li>
<li>
<a @click="changeTheme($event, 'arya-purple', true)"><img :src="$config.public.contextPath + 'demo/images/themes/arya-purple.png'" alt="Arya Purple" /><span>Arya Purple</span></a>
<a @click="changeTheme($event, 'arya-purple', true)"><img :src="$config.public.contextPath + 'images/themes/arya-purple.png'" alt="Arya Purple" /><span>Arya Purple</span></a>
</li>
</ul>
</transition>
@ -174,47 +174,55 @@
<ul v-show="activeMenuIndex === 1">
<li class="topbar-submenu-header">FREE ADMIN TEMPLATE</li>
<li>
<a href="https://www.primefaces.org/sakai-vue"><img src="@/assets/images/layouts/themeswitcher-sakai.svg" alt="Sakai" /><span>Sakai</span></a>
<a href="https://www.primefaces.org/sakai-vue"><img src="https://primefaces.org/cdn/primevue/images/layouts/themeswitcher-sakai.svg" alt="Sakai" /><span>Sakai</span></a>
</li>
<li class="topbar-submenu-header">PREMIUM ADMIN TEMPLATES</li>
<li>
<a href="https://www.primefaces.org/layouts/apollo-vue"><img src="@/assets/images/layouts/themeswitcher-apollo.svg" alt="Apollo" /><span>Apollo</span></a>
<a href="https://www.primefaces.org/layouts/apollo-vue"><img src="https://primefaces.org/cdn/primevue/images/layouts/themeswitcher-apollo.svg" alt="Apollo" /><span>Apollo</span></a>
</li>
<li>
<a href="https://www.primefaces.org/layouts/atlantis-vue"><img src="@/assets/images/layouts/themeswitcher-atlantis.svg" alt="Atlantis" /><span>Atlantis</span></a>
<a href="https://www.primefaces.org/layouts/atlantis-vue"><img src="https://primefaces.org/cdn/primevue/images/layouts/themeswitcher-atlantis.svg" alt="Atlantis" /><span>Atlantis</span></a>
</li>
<li>
<a href="https://www.primefaces.org/layouts/freya-vue"><img src="@/assets/images/layouts/themeswitcher-freya.png" alt="Freya" /><span>Freya</span></a>
<a href="https://www.primefaces.org/layouts/freya-vue"><img src="https://primefaces.org/cdn/primevue/images/layouts/themeswitcher-freya.png" alt="Freya" /><span>Freya</span></a>
</li>
<li>
<a href="https://www.primefaces.org/layouts/diamond-vue"><img src="@/assets/images/layouts/themeswitcher-diamond.png" alt="Diamond" /><span>Diamond</span></a>
<a href="https://www.primefaces.org/layouts/diamond-vue"><img src="https://primefaces.org/cdn/primevue/images/layouts/themeswitcher-diamond.png" alt="Diamond" /><span>Diamond</span></a>
</li>
<li>
<a href="https://www.primefaces.org/layouts/verona-vue"><img src="@/assets/images/layouts/themeswitcher-verona.png" alt="Verona" /><span>Verona</span></a>
<a href="https://www.primefaces.org/layouts/verona-vue"><img src="https://primefaces.org/cdn/primevue/images/layouts/themeswitcher-verona.png" alt="Verona" /><span>Verona</span></a>
</li>
<li>
<a href="https://www.primefaces.org/layouts/poseidon-vue"><img src="@/assets/images/layouts/themeswitcher-poseidon.svg" alt="Poseidon" /><span>Poseidon</span></a>
<a href="https://www.primefaces.org/layouts/poseidon-vue"><img src="https://primefaces.org/cdn/primevue/images/layouts/themeswitcher-poseidon.svg" alt="Poseidon" /><span>Poseidon</span></a>
</li>
<li>
<a href="https://www.primefaces.org/layouts/sapphire-vue"><img src="@/assets/images/layouts/themeswitcher-sapphire.png" alt="Sapphire" /><span>Sapphire</span><span class="theme-badge material">material</span></a>
<a href="https://www.primefaces.org/layouts/sapphire-vue"
><img src="https://primefaces.org/cdn/primevue/images/layouts/themeswitcher-sapphire.png" alt="Sapphire" /><span>Sapphire</span><span class="theme-badge material">material</span></a
>
</li>
<li>
<a href="https://www.primefaces.org/layouts/serenity-vue"><img src="@/assets/images/layouts/themeswitcher-serenity.png" alt="Serenity" /><span>Serenity</span><span class="theme-badge material">material</span></a>
<a href="https://www.primefaces.org/layouts/serenity-vue"
><img src="https://primefaces.org/cdn/primevue/images/layouts/themeswitcher-serenity.png" alt="Serenity" /><span>Serenity</span><span class="theme-badge material">material</span></a
>
</li>
<li>
<a href="https://www.primefaces.org/layouts/ultima-vue"><img src="@/assets/images/layouts/themeswitcher-ultima.png" alt="Ultima" /><span>Ultima</span><span class="theme-badge material">material</span></a>
<a href="https://www.primefaces.org/layouts/ultima-vue"
><img src="https://primefaces.org/cdn/primevue/images/layouts/themeswitcher-ultima.png" alt="Ultima" /><span>Ultima</span><span class="theme-badge material">material</span></a
>
</li>
<li>
<a href="https://www.primefaces.org/layouts/avalon-vue"><img src="@/assets/images/layouts/themeswitcher-avalon.png" alt="Avalon" /><span>Avalon</span><span class="theme-badge bootstrap">bootstrap</span></a>
<a href="https://www.primefaces.org/layouts/avalon-vue"
><img src="https://primefaces.org/cdn/primevue/images/layouts/themeswitcher-avalon.png" alt="Avalon" /><span>Avalon</span><span class="theme-badge bootstrap">bootstrap</span></a
>
</li>
<li>
<a href="https://www.primefaces.org/layouts/babylon-vue"><img src="@/assets/images/layouts/themeswitcher-babylon.png" alt="Babylon" /><span>Babylon</span></a>
<a href="https://www.primefaces.org/layouts/babylon-vue"><img src="https://primefaces.org/cdn/primevue/images/layouts/themeswitcher-babylon.png" alt="Babylon" /><span>Babylon</span></a>
</li>
<li>
<a href="https://www.primefaces.org/layouts/roma-vue"><img src="@/assets/images/layouts/themeswitcher-roma.jpg" alt="Roma" /><span>Roma</span></a>
<a href="https://www.primefaces.org/layouts/roma-vue"><img src="https://primefaces.org/cdn/primevue/images/layouts/themeswitcher-roma.jpg" alt="Roma" /><span>Roma</span></a>
</li>
<li>
<a href="https://www.primefaces.org/layouts/prestige-vue"><img src="@/assets/images/layouts/themeswitcher-prestige.png" alt="Prestige" /><span>Prestige</span></a>
<a href="https://www.primefaces.org/layouts/prestige-vue"><img src="https://primefaces.org/cdn/primevue/images/layouts/themeswitcher-prestige.png" alt="Prestige" /><span>Prestige</span></a>
</li>
</ul>
</transition>

2
pages/autocomplete/AutoCompleteDoc.vue
View File

@ -133,7 +133,7 @@ export default {
<pre v-code><code>
&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="'images/car/' + slotProps.item + '.png'" /&gt;
&lt;div&gt;&#123;&#123;slotProps.item&#125;&#125;&lt;/div&gt;
&lt;/template&gt;
&lt;/AutoComplete&gt;

4
pages/autocomplete/index.vue
View File

@ -22,7 +22,7 @@
<AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="searchCity($event)" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items">
<template #optiongroup="slotProps">
<div class="flex align-items-center country-item">
<img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.item.code.toLowerCase()" width="18" />
<img src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="'flag flag-' + slotProps.item.code.toLowerCase()" width="18" />
<div>{{ slotProps.item.label }}</div>
</div>
</template>
@ -32,7 +32,7 @@
<AutoComplete v-model="selectedCountry2" loadingIcon="pi pi-spinner" :suggestions="filteredCountries" @complete="searchCountry($event)" :dropdown="true" optionLabel="name" forceSelection>
<template #item="slotProps">
<div class="country-item">
<img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.item.code.toLowerCase()" />
<img src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="'flag flag-' + slotProps.item.code.toLowerCase()" />
<div>{{ slotProps.item.name }}</div>
</div>
</template>

18
pages/avatar/index.vue
View File

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

4
pages/button/ButtonDoc.vue
View File

@ -136,11 +136,11 @@ import Button from 'primevue/button';
<p>Custom content such as icons, images and text can be placed inside the button via the default slot. Note that when slot is used, label, icon and badge properties are not included.</p>
<pre v-code><code>
&lt;Button type="button" class="px-3"&gt;
&lt;img alt="logo" src="@/assets/images/logo.svg" style="width: 1.5rem"/&gt;
&lt;img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" style="width: 1.5rem"/&gt;
&lt;/Button&gt;
&lt;Button type="button" class="p-button-outlined p-button-success"&gt;
&lt;img alt="logo" src="@/assets/images/logo.svg" style="width: 1.5rem" /&gt;
&lt;img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" style="width: 1.5rem" /&gt;
&lt;span class="ml-2 font-bold"&gt;PrimeVue&lt;/span&gt;
&lt;/Button&gt;

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="https://primefaces.org/cdn/primevue/images/usercard.png"&gt;
&lt;/template&gt;
&lt;template #title&gt;
Advanced Card

2
pages/card/index.vue
View File

@ -26,7 +26,7 @@
<Card style="width: 25em">
<template #header>
<img alt="user header" src="/demo/images/usercard.png" />
<img alt="user header" src="https://primefaces.org/cdn/primevue/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="'images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand" /&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;div class="car-title"&gt;&#123;&#123;slotProps.data.brand&#125;&#125;&lt;/div&gt;

6
pages/carousel/index.vue
View File

@ -23,7 +23,7 @@
<div class="product-item">
<div class="product-item-content">
<div class="mb-3">
<img :src="$config.public.contextPath + 'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
<img :src="$config.public.contextPath + 'images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
</div>
<div>
<h4 class="mb-1">{{ slotProps.data.name }}</h4>
@ -50,7 +50,7 @@
<div class="product-item">
<div class="product-item-content">
<div class="mb-3">
<img :src="$config.public.contextPath + 'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
<img :src="$config.public.contextPath + 'images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
</div>
<div>
<h4 class="mb-1">{{ slotProps.data.name }}</h4>
@ -77,7 +77,7 @@
<div class="product-item">
<div class="product-item-content">
<div class="mb-3">
<img :src="$config.public.contextPath + 'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
<img :src="$config.public.contextPath + 'images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
</div>
<div>
<h4 class="mb-1">{{ slotProps.data.name }}</h4>

2
pages/cascadeselect/CascadeSelectDoc.vue
View File

@ -118,7 +118,7 @@ data() &#123;
:optionGroupChildren="['states', 'cities']" style="minWidth: 14rem"&gt;
&lt;template #option="slotProps"&gt;
&lt;div class="country-item"&gt;
&lt;img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" v-if="slotProps.option.states" /&gt;
&lt;img src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" v-if="slotProps.option.states" /&gt;
&lt;i class="pi pi-compass mr-2" v-if="slotProps.option.cities"&gt;&lt;/i&gt;
&lt;i class="pi pi-map-marker mr-2" v-if="slotProps.option.cname"&gt;&lt;/i&gt;
&lt;span&gt;&#123;&#123;slotProps.option.cname || slotProps.option.name&#125;&#125;&lt;/span&gt;

2
pages/cascadeselect/index.vue
View File

@ -22,7 +22,7 @@
<CascadeSelect v-model="selectedCity2" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City">
<template #option="slotProps">
<div class="country-item">
<img v-if="slotProps.option.states" src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" />
<img v-if="slotProps.option.states" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" />
<i v-if="slotProps.option.cities" class="pi pi-compass mr-2"></i>
<i v-if="slotProps.option.cname" class="pi pi-map-marker mr-2"></i>
<span>{{ slotProps.option.cname || slotProps.option.name }}</span>

12
pages/chip/index.vue
View File

@ -33,18 +33,18 @@
<h5>Image</h5>
<div class="flex align-items-center">
<Chip label="Amy Elsner" :image="$config.public.contextPath + 'demo/images/avatar/amyelsner.png'" class="mr-2" />
<Chip label="Asiya Javayant" :image="$config.public.contextPath + 'demo/images/avatar/asiyajavayant.png'" class="mr-2" />
<Chip label="Onyama Limba" :image="$config.public.contextPath + 'demo/images/avatar/onyamalimba.png'" class="mr-2" />
<Chip label="Xuxue Feng" :image="$config.public.contextPath + 'demo/images/avatar/xuxuefeng.png'" removable />
<Chip label="Amy Elsner" :image="$config.public.contextPath + 'images/avatar/amyelsner.png'" class="mr-2" />
<Chip label="Asiya Javayant" :image="$config.public.contextPath + 'images/avatar/asiyajavayant.png'" class="mr-2" />
<Chip label="Onyama Limba" :image="$config.public.contextPath + 'images/avatar/onyamalimba.png'" class="mr-2" />
<Chip label="Xuxue Feng" :image="$config.public.contextPath + '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="$config.public.contextPath + 'demo/images/avatar/onyamalimba.png'" class="mr-2 custom-chip" />
<Chip label="Xuxue Feng" :image="$config.public.contextPath + 'demo/images/avatar/xuxuefeng.png'" class="custom-chip" removable />
<Chip label="Onyama Limba" :image="$config.public.contextPath + 'images/avatar/onyamalimba.png'" class="mr-2 custom-chip" />
<Chip label="Xuxue Feng" :image="$config.public.contextPath + 'images/avatar/xuxuefeng.png'" class="custom-chip" removable />
</div>
</div>
</div>

2
pages/colorpicker/index.vue
View File

@ -27,7 +27,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="https://primefaces.org/cdn/primevue/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="https://primefaces.org/cdn/primevue/images/nature/nature3.jpg" @contextmenu="onImageRightClick"&gt;
&lt;ContextMenu ref="menu" :model="items" /&gt;
</code></pre>

2
pages/contextmenu/index.vue
View File

@ -18,7 +18,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="https://primefaces.org/cdn/primevue/images/nature/nature3.jpg" @contextmenu="onImageRightClick" aria-haspopup="true" />
<ContextMenu ref="menu" :model="items" />
</div>
</div>

4
pages/datatable/Crud.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="$config.public.contextPath + 'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" />
<img :src="$config.public.contextPath + '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 v-if="product.image" :src="'/demo/images/product/' + product.image" :alt="product.image" class="product-image" />
<img v-if="product.image" :src="'https://primefaces.org/cdn/primevue/images/product/' + product.image" :alt="product.image" class="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 }" />

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="'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="'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="'images/car/' + optionProps.option.brand + '.png'" /&gt;
&lt;span&gt;&#123;&#123;optionProps.option.brand&#125;&#125;&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="'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;

12
pages/datatable/Filter.vue
View File

@ -46,7 +46,7 @@
</Column>
<Column header="Country" filterField="country.name" style="min-width: 12rem">
<template #body="{ data }">
<img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" />
<img src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" />
<span class="image-text">{{ data.country.name }}</span>
</template>
<template #filter="{ filterModel }">
@ -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="$config.public.contextPath + 'demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
<img :alt="data.representative.name" :src="$config.public.contextPath + '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="$config.public.contextPath + 'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
<img :alt="slotProps.option.name" :src="$config.public.contextPath + 'images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
<span class="image-text">{{ slotProps.option.name }}</span>
</div>
</template>
@ -169,7 +169,7 @@
</Column>
<Column header="Country" filterField="country.name" style="min-width: 12rem">
<template #body="{ data }">
<img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" />
<img src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" />
<span class="image-text">{{ data.country.name }}</span>
</template>
<template #filter="{ filterModel, filterCallback }">
@ -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="$config.public.contextPath + 'demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
<img :alt="data.representative.name" :src="$config.public.contextPath + '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="$config.public.contextPath + 'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
<img :alt="slotProps.option.name" :src="$config.public.contextPath + 'images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
<span class="image-text">{{ slotProps.option.name }}</span>
</div>
</template>

2
pages/datatable/RowExpand.vue
View File

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

12
pages/datatable/RowGroup.vue
View File

@ -17,7 +17,7 @@
<Column field="name" header="Name" style="min-width: 200px"></Column>
<Column field="country" header="Country" style="min-width: 200px">
<template #body="slotProps">
<img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
<img src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
<span class="image-text">{{ slotProps.data.country.name }}</span>
</template>
</Column>
@ -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="$config.public.contextPath + 'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
<img :alt="slotProps.data.representative.name" :src="$config.public.contextPath + '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">
@ -61,7 +61,7 @@
<Column field="name" header="Name"></Column>
<Column field="country" header="Country">
<template #body="slotProps">
<img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
<img src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
<span class="image-text">{{ slotProps.data.country.name }}</span>
</template>
</Column>
@ -73,7 +73,7 @@
</Column>
<Column field="date" header="Date"></Column>
<template #groupheader="slotProps">
<img :alt="slotProps.data.representative.name" :src="$config.public.contextPath + 'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
<img :alt="slotProps.data.representative.name" :src="$config.public.contextPath + '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,14 +93,14 @@
</Column>
<Column field="representative.name" header="Representative">
<template #body="slotProps">
<img :alt="$config.public.contextPath + slotProps.data.representative.name" :src="$config.public.contextPath + 'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
<img :alt="$config.public.contextPath + slotProps.data.representative.name" :src="$config.public.contextPath + 'images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
<span class="image-text">{{ slotProps.data.representative.name }}</span>
</template>
</Column>
<Column field="name" header="Name"></Column>
<Column field="country" header="Country">
<template #body="slotProps">
<img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
<img src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
<span class="image-text">{{ slotProps.data.country.name }}</span>
</template>
</Column>

4
pages/datatable/Scroll.vue
View File

@ -104,7 +104,7 @@
<Column field="name" header="Name" style="min-width: 200px"></Column>
<Column field="country" header="Country" style="min-width: 200px">
<template #body="slotProps">
<img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
<img src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
<span class="image-text">{{ slotProps.data.country.name }}</span>
</template>
</Column>
@ -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="$config.public.contextPath + 'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
<img :alt="slotProps.data.representative.name" :src="$config.public.contextPath + '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">

12
pages/datatable/State.vue
View File

@ -36,7 +36,7 @@
</Column>
<Column header="Country" :sortable="true" sortField="country.name" filterField="country.name" filterMatchMode="contains" style="width: 25%">
<template #body="slotProps">
<img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
<img src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
<span class="image-text">{{ slotProps.data.country.name }}</span>
</template>
<template #filter>
@ -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="$config.public.contextPath + 'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
<img :alt="slotProps.data.representative.name" :src="$config.public.contextPath + '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="$config.public.contextPath + 'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
<img :alt="slotProps.option.name" :src="$config.public.contextPath + 'images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
<span class="image-text">{{ slotProps.option.name }}</span>
</div>
</template>
@ -102,7 +102,7 @@
</Column>
<Column header="Country" :sortable="true" sortField="country.name" filterField="country.name" filterMatchMode="contains" style="width: 25%">
<template #body="slotProps">
<img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
<img src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
<span class="image-text">{{ slotProps.data.country.name }}</span>
</template>
<template #filter>
@ -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="$config.public.contextPath + 'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
<img :alt="slotProps.data.representative.name" :src="$config.public.contextPath + '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="$config.public.contextPath + 'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
<img :alt="slotProps.option.name" :src="$config.public.contextPath + 'images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
<span class="image-text">{{ slotProps.option.name }}</span>
</div>
</template>

2
pages/datatable/Templating.vue
View File

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

6
pages/datatable/index.vue
View File

@ -54,7 +54,7 @@
</Column>
<Column field="country.name" header="Country" sortable filterMatchMode="contains" style="min-width: 14rem">
<template #body="{ data }">
<img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" />
<img src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" />
<span class="image-text">{{ data.country.name }}</span>
</template>
<template #filter="{ filterModel }">
@ -63,7 +63,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="$config.public.contextPath + 'demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
<img :alt="data.representative.name" :src="$config.public.contextPath + 'images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
<span class="image-text">{{ data.representative.name }}</span>
</template>
<template #filter="{ filterModel }">
@ -71,7 +71,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="$config.public.contextPath + 'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
<img :alt="slotProps.option.name" :src="$config.public.contextPath + 'images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
<span class="image-text">{{ slotProps.option.name }}</span>
</div>
</template>

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="'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="'images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt;
&lt;div class="car-detail"&gt;&#123;&#123;slotProps.data.year&#125;&#125; - &#123;&#123;slotProps.data.color&#125;&#125;&lt;/div&gt;
&lt;Button icon="pi pi-search"&gt;&lt;/Button&gt;
&lt;/Panel&gt;

4
pages/dataview/index.vue
View File

@ -30,7 +30,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="'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>
@ -57,7 +57,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="'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

@ -18,7 +18,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="https://primefaces.org/cdn/primevue/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: "https://primefaces.org/cdn/primevue/images/dock/finder.svg"
},
{
label: "App Store",
icon: "/demo/images/dock/appstore.svg"
icon: "https://primefaces.org/cdn/primevue/images/dock/appstore.svg"
},
{
label: "Photos",
icon: "/demo/images/dock/photos.svg"
icon: "https://primefaces.org/cdn/primevue/images/dock/photos.svg"
},
{
label: "Trash",
icon: "/demo/images/dock/trash.png"
icon: "https://primefaces.org/cdn/primevue/images/dock/trash.png"
}
]
}
@ -388,46 +388,46 @@ export default {
dockItems: [
{
label: 'Finder',
icon: "/demo/images/dock/finder.svg",
icon: "https://primefaces.org/cdn/primevue/images/dock/finder.svg",
command: () => {
this.displayFinder = true;
}
},
{
label: 'Terminal',
icon: "/demo/images/dock/terminal.svg",
icon: "https://primefaces.org/cdn/primevue/images/dock/terminal.svg",
command: () => {
this.displayTerminal = true;
}
},
{
label: 'App Store',
icon: "/demo/images/dock/appstore.svg",
icon: "https://primefaces.org/cdn/primevue/images/dock/appstore.svg",
command: () => {
this.$toast.add({ severity: 'error', summary: 'An unexpected error occurred while signing in.', detail: 'UNTRUSTED_CERT_TITLE', group: 'tc', life: 3000 });
}
},
{
label: 'Safari',
icon: "/demo/images/dock/safari.svg",
icon: "https://primefaces.org/cdn/primevue/images/dock/safari.svg",
command: () => {
this.$toast.add({ severity: 'warn', summary: 'Safari has stopped working', group: 'tc', life: 3000 });
}
},
{
label: 'Photos',
icon: "/demo/images/dock/photos.svg",
icon: "https://primefaces.org/cdn/primevue/images/dock/photos.svg",
command: () => {
this.displayPhotos = true;
}
},
{
label: 'GitHub',
icon: "/demo/images/dock/github.svg",
icon: "https://primefaces.org/cdn/primevue/images/dock/github.svg",
},
{
label: 'Trash',
icon: "/demo/images/dock/trash.png",
icon: "https://primefaces.org/cdn/primevue/images/dock/trash.png",
command: () => {
this.$toast.add({ severity: 'info', summary: 'Empty Trash', life: 3000 });
}
@ -436,19 +436,19 @@ export default {
dockBasicItems: [
{
label: "Finder",
icon: "/demo/images/dock/finder.svg"
icon: "https://primefaces.org/cdn/primevue/images/dock/finder.svg"
},
{
label: "App Store",
icon: "/demo/images/dock/appstore.svg"
icon: "https://primefaces.org/cdn/primevue/images/dock/appstore.svg"
},
{
label: "Photos",
icon: "/demo/images/dock/photos.svg"
icon: "https://primefaces.org/cdn/primevue/images/dock/photos.svg"
},
{
label: "Trash",
icon: "/demo/images/dock/trash.png"
icon: "https://primefaces.org/cdn/primevue/images/dock/trash.png"
}
],
menubarItems: [
@ -804,46 +804,46 @@ export default {
const dockItems = ref([
{
label: 'Finder',
icon: "/demo/images/dock/finder.svg",
icon: "https://primefaces.org/cdn/primevue/images/dock/finder.svg",
command: () => {
displayFinder.value = true;
}
},
{
label: 'Terminal',
icon: "/demo/images/dock/terminal.svg",
icon: "https://primefaces.org/cdn/primevue/images/dock/terminal.svg",
command: () => {
displayTerminal.value = true;
}
},
{
label: 'App Store',
icon: "/demo/images/dock/appstore.svg",
icon: "https://primefaces.org/cdn/primevue/images/dock/appstore.svg",
command: () => {
toast.add({ severity: 'error', summary: 'An unexpected error occurred while signing in.', detail: 'UNTRUSTED_CERT_TITLE', group: 'tc', life: 3000 });
}
},
{
label: 'Safari',
icon: "/demo/images/dock/safari.svg",
icon: "https://primefaces.org/cdn/primevue/images/dock/safari.svg",
command: () => {
toast.add({ severity: 'warn', summary: 'Safari has stopped working', group: 'tc', life: 3000 });
}
},
{
label: 'Photos',
icon: "/demo/images/dock/photos.svg",
icon: "https://primefaces.org/cdn/primevue/images/dock/photos.svg",
command: () => {
displayPhotos.value = true;
}
},
{
label: 'GitHub',
icon: "/demo/images/dock/github.svg",
icon: "https://primefaces.org/cdn/primevue/images/dock/github.svg",
},
{
label: 'Trash',
icon: "/demo/images/dock/trash.png",
icon: "https://primefaces.org/cdn/primevue/images/dock/trash.png",
command: () => {
toast.add({ severity: 'info', summary: 'Empty Trash', life: 3000 });
}
@ -852,19 +852,19 @@ export default {
const dockBasicItems = ref([
{
label: "Finder",
icon: "/demo/images/dock/finder.svg"
icon: "https://primefaces.org/cdn/primevue/images/dock/finder.svg"
},
{
label: "App Store",
icon: "/demo/images/dock/appstore.svg"
icon: "https://primefaces.org/cdn/primevue/images/dock/appstore.svg"
},
{
label: "Photos",
icon: "/demo/images/dock/photos.svg"
icon: "https://primefaces.org/cdn/primevue/images/dock/photos.svg"
},
{
label: "Trash",
icon: "/demo/images/dock/trash.png"
icon: "https://primefaces.org/cdn/primevue/images/dock/trash.png"
}
]);
const menubarItems = ref([
@ -1243,46 +1243,46 @@ export default {
const dockItems = ref([
{
label: 'Finder',
icon: "/demo/images/dock/finder.svg",
icon: "https://primefaces.org/cdn/primevue/images/dock/finder.svg",
command: () => {
displayFinder.value = true;
}
},
{
label: 'Terminal',
icon: "/demo/images/dock/terminal.svg",
icon: "https://primefaces.org/cdn/primevue/images/dock/terminal.svg",
command: () => {
displayTerminal.value = true;
}
},
{
label: 'App Store',
icon: "/demo/images/dock/appstore.svg",
icon: "https://primefaces.org/cdn/primevue/images/dock/appstore.svg",
command: () => {
toast.add({ severity: 'error', summary: 'An unexpected error occurred while signing in.', detail: 'UNTRUSTED_CERT_TITLE', group: 'tc', life: 3000 });
}
},
{
label: 'Safari',
icon: "/demo/images/dock/safari.svg",
icon: "https://primefaces.org/cdn/primevue/images/dock/safari.svg",
command: () => {
toast.add({ severity: 'warn', summary: 'Safari has stopped working', group: 'tc', life: 3000 });
}
},
{
label: 'Photos',
icon: "/demo/images/dock/photos.svg",
icon: "https://primefaces.org/cdn/primevue/images/dock/photos.svg",
command: () => {
displayPhotos.value = true;
}
},
{
label: 'GitHub',
icon: "/demo/images/dock/github.svg",
icon: "https://primefaces.org/cdn/primevue/images/dock/github.svg",
},
{
label: 'Trash',
icon: "/demo/images/dock/trash.png",
icon: "https://primefaces.org/cdn/primevue/images/dock/trash.png",
command: () => {
toast.add({ severity: 'info', summary: 'Empty Trash', life: 3000 });
}
@ -1291,19 +1291,19 @@ export default {
const dockBasicItems = ref([
{
label: "Finder",
icon: "/demo/images/dock/finder.svg"
icon: "https://primefaces.org/cdn/primevue/images/dock/finder.svg"
},
{
label: "App Store",
icon: "/demo/images/dock/appstore.svg"
icon: "https://primefaces.org/cdn/primevue/images/dock/appstore.svg"
},
{
label: "Photos",
icon: "/demo/images/dock/photos.svg"
icon: "https://primefaces.org/cdn/primevue/images/dock/photos.svg"
},
{
label: "Trash",
icon: "/demo/images/dock/trash.png"
icon: "https://primefaces.org/cdn/primevue/images/dock/trash.png"
}
]);
const menubarItems = ref([

24
pages/dock/index.vue
View File

@ -102,46 +102,46 @@ export default {
dockItems: [
{
label: 'Finder',
icon: 'demo/images/dock/finder.svg',
icon: 'images/dock/finder.svg',
command: () => {
this.displayFinder = true;
}
},
{
label: 'Terminal',
icon: 'demo/images/dock/terminal.svg',
icon: 'images/dock/terminal.svg',
command: () => {
this.displayTerminal = true;
}
},
{
label: 'App Store',
icon: 'demo/images/dock/appstore.svg',
icon: '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: '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: 'images/dock/photos.svg',
command: () => {
this.displayPhotos = true;
}
},
{
label: 'GitHub',
icon: 'demo/images/dock/github.svg'
icon: 'images/dock/github.svg'
},
{
label: 'Trash',
icon: 'demo/images/dock/trash.png',
icon: 'images/dock/trash.png',
command: () => {
this.$toast.add({ severity: 'info', summary: 'Empty Trash', life: 3000 });
}
@ -150,19 +150,19 @@ export default {
dockBasicItems: [
{
label: 'Finder',
icon: 'demo/images/dock/finder.svg'
icon: 'images/dock/finder.svg'
},
{
label: 'App Store',
icon: 'demo/images/dock/appstore.svg'
icon: 'images/dock/appstore.svg'
},
{
label: 'Photos',
icon: 'demo/images/dock/photos.svg'
icon: 'images/dock/photos.svg'
},
{
label: 'Trash',
icon: 'demo/images/dock/trash.png'
icon: 'images/dock/trash.png'
}
],
menubarItems: [
@ -362,7 +362,7 @@ export default {
width: 100%;
height: 450px;
position: relative;
background-image: url('@/assets/images/dock/window.jpg');
background-image: url('https://primefaces.org/cdn/primevue/images/dock/window.jpg');
background-repeat: no-repeat;
background-size: cover;
z-index: 1;

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="'images/car/' + slotProps.value.brand + '.png'" /&gt;
&lt;span&gt;&#123;&#123;slotProps.value.brand&#125;&#125;&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="'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;

6
pages/dropdown/index.vue
View File

@ -25,7 +25,7 @@
<Dropdown v-model="selectedGroupedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items">
<template #optiongroup="slotProps">
<div class="flex align-items-center country-item">
<img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" width="18" />
<img src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" width="18" />
<div>{{ slotProps.option.label }}</div>
</div>
</template>
@ -35,7 +35,7 @@
<Dropdown v-model="selectedCountry" :options="countries" optionLabel="name" :filter="true" placeholder="Select a Country" :showClear="true">
<template #value="slotProps">
<div v-if="slotProps.value" class="country-item country-item-value">
<img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.value.code.toLowerCase()" />
<img src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="'flag flag-' + slotProps.value.code.toLowerCase()" />
<div>{{ slotProps.value.name }}</div>
</div>
<span v-else>
@ -44,7 +44,7 @@
</template>
<template #option="slotProps">
<div class="country-item">
<img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" />
<img src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" />
<div>{{ slotProps.option.name }}</div>
</div>
</template>

6
pages/dynamicdialog/DynamicDialogDoc.vue
View File

@ -518,7 +518,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="'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>
@ -616,7 +616,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="'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>
@ -715,7 +715,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="'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="'images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="shadow-2 w-4rem" />
</template>
</Column>
<Column field="category" header="Category"></Column>

2
pages/filterservice/index.vue
View File

@ -31,7 +31,7 @@
</Column>
<Column header="Country" filterField="country.name" :filterMatchModeOptions="matchModeOptions">
<template #body="{ data }">
<img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" />
<img src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" />
<span class="image-text">{{ data.country.name }}</span>
</template>
<template #filter="{ filterModel, filterCallback }">

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": "images/galleria/galleria1.jpg",
"thumbnailImageSrc": "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": "images/galleria/galleria2.jpg",
"thumbnailImageSrc": "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": "images/galleria/galleria3.jpg",
"thumbnailImageSrc": "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": "images/galleria/galleria4.jpg",
"thumbnailImageSrc": "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": "images/galleria/galleria5.jpg",
"thumbnailImageSrc": "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": "images/galleria/galleria6.jpg",
"thumbnailImageSrc": "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": "images/galleria/galleria7.jpg",
"thumbnailImageSrc": "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": "images/galleria/galleria8.jpg",
"thumbnailImageSrc": "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": "images/galleria/galleria9.jpg",
"thumbnailImageSrc": "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": "images/galleria/galleria10.jpg",
"thumbnailImageSrc": "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": "images/galleria/galleria11.jpg",
"thumbnailImageSrc": "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": "images/galleria/galleria12.jpg",
"thumbnailImageSrc": "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": "images/galleria/galleria13.jpg",
"thumbnailImageSrc": "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": "images/galleria/galleria14.jpg",
"thumbnailImageSrc": "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": "images/galleria/galleria15.jpg",
"thumbnailImageSrc": "images/galleria/galleria15s.jpg",
"alt": "Description for Image 15",
"title": "Title 15"
}

4
pages/image/index.vue
View File

@ -16,10 +16,10 @@
<div class="content-section implementation">
<div class="card">
<h5>Basic</h5>
<Image :src="$config.public.contextPath + 'demo/images/galleria/galleria1.jpg'" alt="Image" width="250" />
<Image :src="$config.public.contextPath + 'images/galleria/galleria1.jpg'" alt="Image" width="250" />
<h5>Preview</h5>
<Image :src="$config.public.contextPath + 'demo/images/galleria/galleria11.jpg'" alt="Image" width="250" preview />
<Image :src="$config.public.contextPath + '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="https://primefaces.org/cdn/primevue/images/nature/nature1.jpg" /&gt;
&lt;/template&gt;
&lt;/Inplace&gt;

2
pages/inplace/index.vue
View File

@ -32,7 +32,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="https://primefaces.org/cdn/primevue/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="https://primefaces.org/cdn/primevue/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="https://primefaces.org/cdn/primevue/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="https://primefaces.org/cdn/primevue/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="https://primefaces.org/cdn/primevue/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="https://primefaces.org/cdn/primevue/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="https://primefaces.org/cdn/primevue/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="https://primefaces.org/cdn/primevue/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="https://primefaces.org/cdn/primevue/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: 0.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="https://primefaces.org/cdn/primevue/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: 0.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="https://primefaces.org/cdn/primevue/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: 0.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="https://primefaces.org/cdn/primevue/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: 0.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="https://primefaces.org/cdn/primevue/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: 0.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="https://primefaces.org/cdn/primevue/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="https://primefaces.org/cdn/primevue/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

@ -2,11 +2,11 @@
<section class="landing-designer py-8">
<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' }">
<div class="designer-main mt-7 justify-content-center pad-section" :style="{ backgroundImage: `url('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="'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('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="https://primefaces.org/cdn/primevue/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="https://primefaces.org/cdn/primevue/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="https://primefaces.org/cdn/primevue/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="https://primefaces.org/cdn/primevue/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="https://primefaces.org/cdn/primevue/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="https://primefaces.org/cdn/primevue/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="https://primefaces.org/cdn/primevue/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="https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'demo/images/primevue-logo-' + `${$appState.darkTheme ? 'light' : 'dark'}` + '.svg'" alt="primevue logo" />
<img :src="$config.public.contextPath + '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="$config.public.contextPath + 'demo/images/primevue-logo-' + `${$appState.darkTheme ? 'light' : 'dark'}` + '.svg'" alt="primevue logo" class="landing-header-logo" />
<img :src="$config.public.contextPath + '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">
<router-link to="/setup">
<img src="/demo/images/landing/core-icon.svg" alt="primevue core" />
<img src="https://primefaces.org/cdn/primevue/images/landing/core-icon.svg" alt="primevue core" />
<span>Components</span>
</router-link>
</li>
<li class="mr-0 lg:mr-2">
<a href="https://blocks.primevue.org">
<img src="/demo/images/landing/blocks-icon.svg" alt="primevue templates" />
<img src="https://primefaces.org/cdn/primevue/images/landing/blocks-icon.svg" alt="primevue templates" />
<span>Blocks</span>
</a>
</li>
<li class="mr-0 lg:mr-2">
<a href="https://designer.primevue.org">
<img src="/demo/images/landing/designer-icon.svg" alt="primevue templates" />
<img src="https://primefaces.org/cdn/primevue/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="https://primefaces.org/cdn/primevue/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="https://primefaces.org/cdn/primevue/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://designer.primevue.org')">
<div class="flex flex-column align-items-center">
<img src="/demo/images/landing/designer-icon.svg" alt="primevue templates" />
<img src="https://primefaces.org/cdn/primevue/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="https://primefaces.org/cdn/primevue/images/landing/core-icon.svg" alt="primevue core" />
<div class="name">
<b>Open Source</b>
<span>90+ UI Components</span>
@ -35,7 +35,7 @@
<router-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="https://primefaces.org/cdn/primevue/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 @@
</router-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="https://primefaces.org/cdn/primevue/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://blocks.primevue.org')">
<div class="flex flex-column align-items-center">
<img src="/demo/images/landing/blocks-icon.svg" alt="primevue templates" />
<img src="https://primefaces.org/cdn/primevue/images/landing/blocks-icon.svg" alt="primevue templates" />
<div class="name">
<b>Prime Blocks</b>
<span>400+ UI Blocks</span>
@ -65,7 +65,7 @@
<router-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="https://primefaces.org/cdn/primevue/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

@ -113,10 +113,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('images/landing/templates/${template}-${isDark ? 'dark' : 'light'}.${url}')`;
},
templateImg() {
return `demo/images/landing/templates/templates-text-${this.$appState.darkTheme ? 'dark' : 'light'}.png`;
return `images/landing/templates/templates-text-${this.$appState.darkTheme ? 'dark' : 'light'}.png`;
}
}
};

6
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://designer.primevue.org">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('images/landing/wave-${$appState.darkTheme ? 'dark-alt' : 'light-alt'}.svg')`, backgroundSize: 'cover' }">
<div class="box overflow-hidden z-1 p-5 table-container">
<DataTable
v-model:selection="selectedCustomers"
@ -44,13 +44,13 @@
</Column>
<Column field="country.name" header="Country" sortable style="min-width: 14rem">
<template #body="{ data }">
<img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" />
<img src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" />
<span class="image-text">{{ data.country.name }}</span>
</template>
</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="'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 `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="'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;

4
pages/listbox/index.vue
View File

@ -22,7 +22,7 @@
<Listbox v-model="selectedGroupedCity" :options="groupedCities" optionLabel="label" style="width: 15rem" optionGroupLabel="label" optionGroupChildren="items" listStyle="max-height:250px">
<template #optiongroup="slotProps">
<div class="flex align-items-center country-item">
<img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" width="18" />
<img src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" width="18" />
<div>{{ slotProps.option.label }}</div>
</div>
</template>
@ -32,7 +32,7 @@
<Listbox v-model="selectedCountries" :options="countries" :multiple="true" :filter="true" optionLabel="name" listStyle="max-height:250px" style="width: 15rem" filterPlaceholder="Search">
<template #option="slotProps">
<div class="country-item">
<img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" />
<img src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" />
<div>{{ slotProps.option.name }}</div>
</div>
</template>

2
pages/menubar/index.vue
View File

@ -17,7 +17,7 @@
<div class="card">
<Menubar :model="items">
<template #start>
<img alt="logo" src="@/assets/images/logo.svg" height="40" class="mr-2" />
<img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" height="40" class="mr-2" />
</template>
<template #end>
<InputText placeholder="Search" type="text" />

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="'images/car/' + option.brand + '.png'" /&gt;
&lt;span&gt;&#123;&#123;option.brand&#125;&#125;&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="'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;

6
pages/multiselect/index.vue
View File

@ -25,7 +25,7 @@
<MultiSelect v-model="selectedGroupedCities" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select Cities">
<template #optiongroup="slotProps">
<div class="flex align-items-center country-item">
<img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" width="18" />
<img src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" width="18" />
<div>{{ slotProps.option.label }}</div>
</div>
</template>
@ -35,14 +35,14 @@
<MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" placeholder="Select Countries" :filter="true" class="multiselect-custom">
<template #value="slotProps">
<div v-for="option of slotProps.value" :key="option.code" class="country-item country-item-value">
<img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + option.code.toLowerCase()" />
<img src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="'flag flag-' + option.code.toLowerCase()" />
<div>{{ option.name }}</div>
</div>
<template v-if="!slotProps.value || slotProps.value.length === 0"> Select Countries </template>
</template>
<template #option="slotProps">
<div class="country-item">
<img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" />
<img src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" />
<div>{{ slotProps.option.name }}</div>
</div>
</template>

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="'images/car/' + slotProps.item.brand + '.png'"&gt;
&lt;div&gt;
&lt;span class="p-caritem-vin"&gt;&#123;&#123;slotProps.item.vin&#125;&#125;&lt;/span&gt;
&lt;span&gt;&#123;&#123;slotProps.item.year&#125;&#125; - &#123;&#123;slotProps.item.color&#125;&#125;&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="'images/car/' + slotProps.item.brand + '.png'"&gt;
&lt;div&gt;
&lt;span class="p-caritem-vin"&gt;&#123;&#123;slotProps.item.vin&#125;&#125;&lt;/span&gt;
&lt;span&gt;&#123;&#123;slotProps.item.year&#125;&#125; - &#123;&#123;slotProps.item.color&#125;&#125;&lt;/span&gt;

2
pages/orderlist/index.vue
View File

@ -20,7 +20,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="'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="'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

@ -30,7 +30,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="'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="https://primefaces.org/cdn/primevue/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="https://primefaces.org/cdn/primevue/images/nature/nature1.jpg" alt="Nature Image"&gt;
&lt;/OverlayPanel&gt;
</code></pre>

2
pages/overlaypanel/index.vue
View File

@ -22,7 +22,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="'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

@ -41,7 +41,7 @@
</Paginator>
<div class="image-gallery">
<img :src="'demo/images/nature/' + image + '.jpg'" />
<img :src="'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="'images/car/' + slotProps.item.brand + '.png'"&gt;
&lt;div&gt;
&lt;span class="p-caritem-vin"&gt;&#123;&#123;slotProps.item.vin&#125;&#125;&lt;/span&gt;
&lt;span&gt;&#123;&#123;slotProps.item.year&#125;&#125; - &#123;&#123;slotProps.item.color&#125;&#125;&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="'images/car/' + slotProps.item.brand + '.png'"&gt;
&lt;div&gt;
&lt;span class="p-caritem-vin"&gt;&#123;&#123;slotProps.item.vin&#125;&#125;&lt;/span&gt;
&lt;span&gt;&#123;&#123;slotProps.item.year&#125;&#125; - &#123;&#123;slotProps.item.color&#125;&#125;&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="'images/car/' + slotProps.item.brand + '.png'"&gt;
&lt;div&gt;
&lt;span class="p-caritem-vin"&gt;&#123;&#123;slotProps.item.vin&#125;&#125;&lt;/span&gt;
&lt;span&gt;&#123;&#123;slotProps.item.year&#125;&#125; - &#123;&#123;slotProps.item.color&#125;&#125;&lt;/span&gt;

2
pages/picklist/index.vue
View File

@ -21,7 +21,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="'images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
</div>
<div class="product-list-detail">
<h6 class="mb-2">{{ slotProps.item.name }}</h6>

24
pages/rating/RatingDoc.vue
View File

@ -39,13 +39,13 @@ import Rating from 'primevue/rating';
<pre v-code><code>
&lt;Rating :modelValue="3">
&lt;template #cancelicon&gt;
&lt;img src="/demo/images/rating/cancel.png" height="24" width="24"&gt;
&lt;img src="https://primefaces.org/cdn/primevue/images/rating/cancel.png" height="24" width="24"&gt;
&lt;/template&gt;
&lt;template #onicon&gt;
&lt;img src="/demo/images/rating/custom-onicon.png" height="24" width="24"&gt;
&lt;img src="https://primefaces.org/cdn/primevue/images/rating/custom-onicon.png" height="24" width="24"&gt;
&lt;/template&gt;
&lt;template #officon&gt;
&lt;img src="/demo/images/rating/custom-officon.png" height="24" width="24"&gt;
&lt;img src="https://primefaces.org/cdn/primevue/images/rating/custom-officon.png" height="24" width="24"&gt;
&lt;/template&gt;
&lt;/Rating&gt;
@ -287,13 +287,13 @@ export default {
<h5>Templating</h5>
<Rating v-model="val4">
<template #cancelicon>
<img src="/demo/images/rating/cancel.png" @error="(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'" height="24" width="24"/>
<img src="https://primefaces.org/cdn/primevue/images/rating/cancel.png" @error="(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'" height="24" width="24"/>
</template>
<template #onicon>
<img src="/demo/images/rating/custom-onicon.png" @error="(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'" height="24" width="24" />
<img src="https://primefaces.org/cdn/primevue/images/rating/custom-onicon.png" @error="(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'" height="24" width="24" />
</template>
<template #officon>
<img src="/demo/images/rating/custom-officon.png" @error="(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'" height="24" width="24" />
<img src="https://primefaces.org/cdn/primevue/images/rating/custom-officon.png" @error="(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'" height="24" width="24" />
</template>
</Rating>
</div>
@ -337,13 +337,13 @@ export default {
<h5>Templating</h5>
<Rating v-model="val4">
<template #cancelicon>
<img src="/demo/images/rating/cancel.png" @error="(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'" height="24" width="24"/>
<img src="https://primefaces.org/cdn/primevue/images/rating/cancel.png" @error="(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'" height="24" width="24"/>
</template>
<template #onicon>
<img src="/demo/images/rating/custom-onicon.png" @error="(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'" height="24" width="24" />
<img src="https://primefaces.org/cdn/primevue/images/rating/custom-onicon.png" @error="(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'" height="24" width="24" />
</template>
<template #officon>
<img src="/demo/images/rating/custom-officon.png" @error="(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'" height="24" width="24" />
<img src="https://primefaces.org/cdn/primevue/images/rating/custom-officon.png" @error="(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'" height="24" width="24" />
</template>
</Rating>
</div>
@ -388,13 +388,13 @@ export default {
<h5>Templating</h5>
<p-rating v-model="val4">
<template #cancelicon>
<img src="/demo/images/rating/cancel.png" @error="(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'" height="24" width="24"/>
<img src="https://primefaces.org/cdn/primevue/images/rating/cancel.png" @error="(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'" height="24" width="24"/>
</template>
<template #onicon>
<img src="/demo/images/rating/custom-onicon.png" @error="(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'" height="24" width="24" />
<img src="https://primefaces.org/cdn/primevue/images/rating/custom-onicon.png" @error="(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'" height="24" width="24" />
</template>
<template #officon>
<img src="/demo/images/rating/custom-officon.png" @error="(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'" height="24" width="24" />
<img src="https://primefaces.org/cdn/primevue/images/rating/custom-officon.png" @error="(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'" height="24" width="24" />
</template>
</p-rating>
</div>

6
pages/rating/index.vue
View File

@ -33,13 +33,13 @@
<h5>Templating</h5>
<Rating v-model="val4">
<template #cancelicon>
<img src="/demo/images/rating/cancel.png" height="24" width="24" />
<img src="https://primefaces.org/cdn/primevue/images/rating/cancel.png" height="24" width="24" />
</template>
<template #onicon>
<img src="/demo/images/rating/custom-onicon.png" height="24" width="24" />
<img src="https://primefaces.org/cdn/primevue/images/rating/custom-onicon.png" height="24" width="24" />
</template>
<template #officon>
<img src="/demo/images/rating/custom-officon.png" height="24" width="24" />
<img src="https://primefaces.org/cdn/primevue/images/rating/custom-officon.png" height="24" width="24" />
</template>
</Rating>
</div>

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="'images/car/' + slotProps.option.brand + '.png'" /&gt;
&lt;div&gt;&#123;&#123;slotProps.option.brand&#125;&#125;&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;

10
pages/setup/index.vue
View File

@ -338,31 +338,31 @@ app.use(PrimeVue, {
<tr>
<th>
<div class="flex align-items-center">
<img src="@/assets/images/browsers/edge.svg" alt="edge" style="width: 1.5rem" class="mr-2" />
<img src="https://primefaces.org/cdn/primevue/images/browsers/edge.svg" alt="edge" style="width: 1.5rem" class="mr-2" />
Edge
</div>
</th>
<th>
<div class="flex align-items-center">
<img src="@/assets/images/browsers/firefox.svg" alt="firefox" style="width: 1.5rem" class="mr-2" />
<img src="https://primefaces.org/cdn/primevue/images/browsers/firefox.svg" alt="firefox" style="width: 1.5rem" class="mr-2" />
Firefox
</div>
</th>
<th>
<div class="flex align-items-center">
<img src="@/assets/images/browsers/chrome.svg" alt="chrome" style="width: 1.5rem" class="mr-2" />
<img src="https://primefaces.org/cdn/primevue/images/browsers/chrome.svg" alt="chrome" style="width: 1.5rem" class="mr-2" />
Chrome
</div>
</th>
<th>
<div class="flex align-items-center">
<img src="@/assets/images/browsers/safari.svg" alt="safari" style="width: 1.5rem" class="mr-2" />
<img src="https://primefaces.org/cdn/primevue/images/browsers/safari.svg" alt="safari" style="width: 1.5rem" class="mr-2" />
Safari
</div>
</th>
<th>
<div class="flex align-items-center">
<img src="@/assets/images/browsers/opera.svg" alt="opera" style="width: 1.5rem" class="mr-2" />
<img src="https://primefaces.org/cdn/primevue/images/browsers/opera.svg" alt="opera" style="width: 1.5rem" class="mr-2" />
Opera
</div>
</th>

2
pages/splitbutton/SplitButtonDoc.vue
View File

@ -96,7 +96,7 @@ export default {
<pre v-code><code>
&lt;SplitButton :model="items" class="bg-primary border-round"&gt;
&lt;Button @click="save"&gt;
&lt;img alt="logo" src="@/assets/images/logo.svg" style="width: 1rem" /&gt;
&lt;img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" style="width: 1rem" /&gt;
&lt;span class="ml-2 flex align-items-center font-bold"&gt;PrimeVue&lt;/span&gt;
&lt;/Button&gt;
&lt;/SplitButton&gt;

2
pages/splitbutton/index.vue
View File

@ -83,7 +83,7 @@
<h5>Templating</h5>
<SplitButton :model="items" class="bg-primary border-round">
<Button @click="save">
<img alt="logo" src="@/assets/images/logo.svg" style="width: 1rem" />
<img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" style="width: 1rem" />
<span class="ml-2 flex align-items-center font-bold">PrimeVue</span>
</Button>
</SplitButton>

4
pages/support/index.vue
View File

@ -1,7 +1,7 @@
<template>
<div>
<div class="content-section">
<img alt="PRO Support" src="/demo/images/support/support-header.png" class="w-full block mb-5" style="border-radius: 20px" />
<img alt="PRO Support" src="https://primefaces.org/cdn/primevue/images/support/support-header.png" class="w-full block mb-5" style="border-radius: 20px" />
<div class="flex flex-column xl:flex-row mb-5 gap-5">
<div class="card xl:w-3 m-0 relative overflow-hidden">
@ -13,7 +13,7 @@
although they are monitored and maintained by our staff. If you need to secure our response within 1 business day, you may consider PRO support instead.
</p>
</div>
<div class="card m-0 xl:w-9 text-white bg-cover" style="background-image: url('demo/images/support/card-pro.jpg')">
<div class="card m-0 xl:w-9 text-white bg-cover" style="background-image: url('images/support/card-pro.jpg')">
<div class="text-xl font-semibold mb-3">PRO Support</div>
<p class="m-0 line-height-3">
With PRO support, it's easy to support, tune and add features to PrimeVue as if it were an in- house library. PRO is a term based commercial support service. With the exclusive services of PRO account, it is no longer needed

4
pages/theming/index.vue
View File

@ -10,7 +10,7 @@
<p>Choose from a variety of themes or develop your own theme easily.</p>
<h5>Architecture</h5>
<img alt="Architecture" src="@/assets/images/architecture.jpg" class="architecture-image" />
<img alt="Architecture" src="https://primefaces.org/cdn/primevue/images/architecture.jpg" class="architecture-image" />
<p>
PrimeVue is a design agnostic library so unlike other UI libraries it does not enforce a certain styling such as material or bootstrap. In order to achieve this, styling has been separated into core and theme. Core resides inside
PrimeVue to implement the structure of the components such as positioning whereas theme brings the colors, paddings and margins.
@ -44,7 +44,7 @@
</div>
<a href="http://www.primefaces.org/designer/primevue" class="designer-image">
<img alt="PrimeVue Designer" src="@/assets/images/primevue-designer.jpg" style="width: 100%" />
<img alt="PrimeVue Designer" src="https://primefaces.org/cdn/primevue/images/primevue-designer.jpg" style="width: 100%" />
</a>
<h5>Scaling</h5>

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="'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

@ -70,7 +70,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="'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!

10
pages/uikit/index.vue
View File

@ -13,7 +13,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="https://primefaces.org/cdn/primevue/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>
@ -66,12 +66,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="https://primefaces.org/cdn/primevue/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="https://primefaces.org/cdn/primevue/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>
@ -99,7 +99,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="https://primefaces.org/cdn/primevue/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"
@ -107,7 +107,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="https://primefaces.org/cdn/primevue/images/uikit/logo-figma-dark.svg" class="w-4rem" />
</a>
</div>

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": "https://primefaces.org/cdn/primevue/images/galleria/galleria1.jpg",
"thumbnailImageSrc": "https://primefaces.org/cdn/primevue/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": "https://primefaces.org/cdn/primevue/images/galleria/galleria2.jpg",
"thumbnailImageSrc": "https://primefaces.org/cdn/primevue/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": "https://primefaces.org/cdn/primevue/images/galleria/galleria3.jpg",
"thumbnailImageSrc": "https://primefaces.org/cdn/primevue/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": "https://primefaces.org/cdn/primevue/images/galleria/galleria4.jpg",
"thumbnailImageSrc": "https://primefaces.org/cdn/primevue/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": "https://primefaces.org/cdn/primevue/images/galleria/galleria5.jpg",
"thumbnailImageSrc": "https://primefaces.org/cdn/primevue/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": "https://primefaces.org/cdn/primevue/images/galleria/galleria6.jpg",
"thumbnailImageSrc": "https://primefaces.org/cdn/primevue/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": "https://primefaces.org/cdn/primevue/images/galleria/galleria7.jpg",
"thumbnailImageSrc": "https://primefaces.org/cdn/primevue/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": "https://primefaces.org/cdn/primevue/images/galleria/galleria8.jpg",
"thumbnailImageSrc": "https://primefaces.org/cdn/primevue/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": "https://primefaces.org/cdn/primevue/images/galleria/galleria9.jpg",
"thumbnailImageSrc": "https://primefaces.org/cdn/primevue/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": "https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg",
"thumbnailImageSrc": "https://primefaces.org/cdn/primevue/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": "https://primefaces.org/cdn/primevue/images/galleria/galleria11.jpg",
"thumbnailImageSrc": "https://primefaces.org/cdn/primevue/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": "https://primefaces.org/cdn/primevue/images/galleria/galleria12.jpg",
"thumbnailImageSrc": "https://primefaces.org/cdn/primevue/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": "https://primefaces.org/cdn/primevue/images/galleria/galleria13.jpg",
"thumbnailImageSrc": "https://primefaces.org/cdn/primevue/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": "https://primefaces.org/cdn/primevue/images/galleria/galleria14.jpg",
"thumbnailImageSrc": "https://primefaces.org/cdn/primevue/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": "https://primefaces.org/cdn/primevue/images/galleria/galleria15.jpg",
"thumbnailImageSrc": "https://primefaces.org/cdn/primevue/images/galleria/galleria15s.jpg",
"alt": "Description for Image 15",
"title": "Title 15"
}

BIN
public/demo/images/support/card-pro.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 224 KiB

BIN
public/demo/images/support/support-header.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 269 KiB

0
assets/images/architecture.jpg → public/images/architecture.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 117 KiB

After

Width:  |  Height:  |  Size: 117 KiB

0
public/demo/images/avatar/amyelsner.png → public/images/avatar/amyelsner.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.1 KiB

After

Width:  |  Height:  |  Size: 5.1 KiB

0
public/demo/images/avatar/annafali.png → public/images/avatar/annafali.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.5 KiB

After

Width:  |  Height:  |  Size: 5.5 KiB

0
public/demo/images/avatar/asiyajavayant.png → public/images/avatar/asiyajavayant.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.5 KiB

After

Width:  |  Height:  |  Size: 5.5 KiB

0
public/demo/images/avatar/bernardodominic.png → public/images/avatar/bernardodominic.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.7 KiB

After

Width:  |  Height:  |  Size: 5.7 KiB

0
public/demo/images/avatar/elwinsharvill.png → public/images/avatar/elwinsharvill.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.5 KiB

After

Width:  |  Height:  |  Size: 5.5 KiB

0
public/demo/images/avatar/ionibowcher.png → public/images/avatar/ionibowcher.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.6 KiB

After

Width:  |  Height:  |  Size: 5.6 KiB

0
public/demo/images/avatar/ivanmagalhaes.png → public/images/avatar/ivanmagalhaes.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.9 KiB

After

Width:  |  Height:  |  Size: 5.9 KiB

0
public/demo/images/avatar/onyamalimba.png → public/images/avatar/onyamalimba.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.3 KiB

After

Width:  |  Height:  |  Size: 5.3 KiB

0
public/demo/images/avatar/stephenshaw.png → public/images/avatar/stephenshaw.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.1 KiB

After

Width:  |  Height:  |  Size: 5.1 KiB

Some files were not shown because too many files have changed in this diff Show More