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

Path fixes for showcase build

pull/3420/head
Bahadır Sofuoğlu 2022-12-09 10:52:51 +03:00
parent 03224ff273
commit c3dea62940
28 changed files with 241 additions and 223 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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 class="pi pi-search" style="vertical-align: middle"></span>
<span style="margin-left:.5rem; vertical-align: middle">View Picture</span> <span style="margin-left:.5rem; vertical-align: middle">View Picture</span>
`, `,
content: `<img src="demo/images/nature/nature1.jpg" />` content: `<img src="/demo/images/nature/nature1.jpg" />`
} }
}); });

104
layouts/AppConfigurator.vue
View File

@ -29,25 +29,25 @@
<div class="grid free-themes"> <div class="grid free-themes">
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'bootstrap4-light-blue')"> <button class="p-link" type="button" @click="changeTheme($event, 'bootstrap4-light-blue')">
<img src="demo/images/themes/bootstrap4-light-blue.svg" alt="Bootstrap Light Blue" /> <img src="/demo/images/themes/bootstrap4-light-blue.svg" alt="Bootstrap Light Blue" />
</button> </button>
<span>Blue</span> <span>Blue</span>
</div> </div>
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'bootstrap4-light-purple')"> <button class="p-link" type="button" @click="changeTheme($event, 'bootstrap4-light-purple')">
<img src="demo/images/themes/bootstrap4-light-purple.svg" alt="Bootstrap Light Blue" /> <img src="/demo/images/themes/bootstrap4-light-purple.svg" alt="Bootstrap Light Blue" />
</button> </button>
<span>Purple</span> <span>Purple</span>
</div> </div>
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'bootstrap4-dark-blue', true)"> <button class="p-link" type="button" @click="changeTheme($event, 'bootstrap4-dark-blue', true)">
<img src="demo/images/themes/bootstrap4-dark-blue.svg" alt="Bootstrap Dark Blue" /> <img src="/demo/images/themes/bootstrap4-dark-blue.svg" alt="Bootstrap Dark Blue" />
</button> </button>
<span>Blue</span> <span>Blue</span>
</div> </div>
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'bootstrap4-dark-purple', true)"> <button class="p-link" type="button" @click="changeTheme($event, 'bootstrap4-dark-purple', true)">
<img src="demo/images/themes/bootstrap4-dark-purple.svg" alt="Bootstrap Dark Blue" /> <img src="/demo/images/themes/bootstrap4-dark-purple.svg" alt="Bootstrap Dark Blue" />
</button> </button>
<span>Purple</span> <span>Purple</span>
</div> </div>
@ -57,25 +57,25 @@
<div class="grid free-themes"> <div class="grid free-themes">
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'md-light-indigo')"> <button class="p-link" type="button" @click="changeTheme($event, 'md-light-indigo')">
<img src="demo/images/themes/md-light-indigo.svg" alt="Material Light Indigo" /> <img src="/demo/images/themes/md-light-indigo.svg" alt="Material Light Indigo" />
</button> </button>
<span>Indigo</span> <span>Indigo</span>
</div> </div>
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'md-light-deeppurple')"> <button class="p-link" type="button" @click="changeTheme($event, 'md-light-deeppurple')">
<img src="demo/images/themes/md-light-deeppurple.svg" alt="Material Light Deep Purple" /> <img src="/demo/images/themes/md-light-deeppurple.svg" alt="Material Light Deep Purple" />
</button> </button>
<span>Deep Purple</span> <span>Deep Purple</span>
</div> </div>
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'md-dark-indigo', true)"> <button class="p-link" type="button" @click="changeTheme($event, 'md-dark-indigo', true)">
<img src="demo/images/themes/md-dark-indigo.svg" alt="Material Dark Indigo" /> <img src="/demo/images/themes/md-dark-indigo.svg" alt="Material Dark Indigo" />
</button> </button>
<span>Indigo</span> <span>Indigo</span>
</div> </div>
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'md-dark-deeppurple', true)"> <button class="p-link" type="button" @click="changeTheme($event, 'md-dark-deeppurple', true)">
<img src="demo/images/themes/md-dark-deeppurple.svg" alt="Material Dark Deep Purple" /> <img src="/demo/images/themes/md-dark-deeppurple.svg" alt="Material Dark Deep Purple" />
</button> </button>
<span>Deep Purple</span> <span>Deep Purple</span>
</div> </div>
@ -85,25 +85,25 @@
<div class="grid free-themes"> <div class="grid free-themes">
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'mdc-light-indigo')"> <button class="p-link" type="button" @click="changeTheme($event, 'mdc-light-indigo')">
<img src="demo/images/themes/md-light-indigo.svg" alt="Material Compact Light Indigo" /> <img src="/demo/images/themes/md-light-indigo.svg" alt="Material Compact Light Indigo" />
</button> </button>
<span>Indigo</span> <span>Indigo</span>
</div> </div>
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'mdc-light-deeppurple')"> <button class="p-link" type="button" @click="changeTheme($event, 'mdc-light-deeppurple')">
<img src="demo/images/themes/md-light-deeppurple.svg" alt="Material Compact Deep Purple" /> <img src="/demo/images/themes/md-light-deeppurple.svg" alt="Material Compact Deep Purple" />
</button> </button>
<span>Deep Purple</span> <span>Deep Purple</span>
</div> </div>
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'mdc-dark-indigo', true)"> <button class="p-link" type="button" @click="changeTheme($event, 'mdc-dark-indigo', true)">
<img src="demo/images/themes/md-dark-indigo.svg" alt="Material Compact Dark Indigo" /> <img src="/demo/images/themes/md-dark-indigo.svg" alt="Material Compact Dark Indigo" />
</button> </button>
<span>Indigo</span> <span>Indigo</span>
</div> </div>
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'mdc-dark-deeppurple', true)"> <button class="p-link" type="button" @click="changeTheme($event, 'mdc-dark-deeppurple', true)">
<img src="demo/images/themes/md-dark-deeppurple.svg" alt="Material Compact Dark Deep Purple" /> <img src="/demo/images/themes/md-dark-deeppurple.svg" alt="Material Compact Dark Deep Purple" />
</button> </button>
<span>Deep Purple</span> <span>Deep Purple</span>
</div> </div>
@ -113,7 +113,7 @@
<div class="grid free-themes"> <div class="grid free-themes">
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'tailwind-light')"> <button class="p-link" type="button" @click="changeTheme($event, 'tailwind-light')">
<img src="demo/images/themes/tailwind-light.png" alt="Tailwind Light" /> <img src="/demo/images/themes/tailwind-light.png" alt="Tailwind Light" />
</button> </button>
<span>Tailwind Light</span> <span>Tailwind Light</span>
</div> </div>
@ -123,7 +123,7 @@
<div class="grid free-themes"> <div class="grid free-themes">
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'fluent-light')"> <button class="p-link" type="button" @click="changeTheme($event, 'fluent-light')">
<img src="demo/images/themes/fluent-light.png" alt="Fluent Light" /> <img src="/demo/images/themes/fluent-light.png" alt="Fluent Light" />
</button> </button>
<span>Fluent Light</span> <span>Fluent Light</span>
</div> </div>
@ -133,49 +133,49 @@
<div class="grid free-themes"> <div class="grid free-themes">
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'lara-light-indigo')"> <button class="p-link" type="button" @click="changeTheme($event, 'lara-light-indigo')">
<img src="demo/images/themes/lara-light-indigo.png" alt="Lara Light Indigo" /> <img src="/demo/images/themes/lara-light-indigo.png" alt="Lara Light Indigo" />
</button> </button>
<span>Lara Light Indigo</span> <span>Lara Light Indigo</span>
</div> </div>
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'lara-light-blue')"> <button class="p-link" type="button" @click="changeTheme($event, 'lara-light-blue')">
<img src="demo/images/themes/lara-light-blue.png" alt="Lara Light Blue" /> <img src="/demo/images/themes/lara-light-blue.png" alt="Lara Light Blue" />
</button> </button>
<span>Lara Light Blue</span> <span>Lara Light Blue</span>
</div> </div>
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'lara-light-purple')"> <button class="p-link" type="button" @click="changeTheme($event, 'lara-light-purple')">
<img src="demo/images/themes/lara-light-purple.png" alt="Lara Light Purple" /> <img src="/demo/images/themes/lara-light-purple.png" alt="Lara Light Purple" />
</button> </button>
<span>Lara Light Purple</span> <span>Lara Light Purple</span>
</div> </div>
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'lara-light-teal')"> <button class="p-link" type="button" @click="changeTheme($event, 'lara-light-teal')">
<img src="demo/images/themes/lara-light-teal.png" alt="Lara Light Teal" /> <img src="/demo/images/themes/lara-light-teal.png" alt="Lara Light Teal" />
</button> </button>
<span>Lara Light Teal</span> <span>Lara Light Teal</span>
</div> </div>
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'lara-dark-indigo', true)"> <button class="p-link" type="button" @click="changeTheme($event, 'lara-dark-indigo', true)">
<img src="demo/images/themes/lara-dark-indigo.png" alt="Lara Dark Indigo" /> <img src="/demo/images/themes/lara-dark-indigo.png" alt="Lara Dark Indigo" />
</button> </button>
<span>Lara Dark Indigo</span> <span>Lara Dark Indigo</span>
</div> </div>
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'lara-dark-blue', true)"> <button class="p-link" type="button" @click="changeTheme($event, 'lara-dark-blue', true)">
<img src="demo/images/themes/lara-dark-blue.png" alt="Lara Dark Blue" /> <img src="/demo/images/themes/lara-dark-blue.png" alt="Lara Dark Blue" />
</button> </button>
<span>Lara Dark Blue</span> <span>Lara Dark Blue</span>
</div> </div>
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'lara-dark-purple', true)"> <button class="p-link" type="button" @click="changeTheme($event, 'lara-dark-purple', true)">
<img src="demo/images/themes/lara-dark-purple.png" alt="Lara Dark Purple" /> <img src="/demo/images/themes/lara-dark-purple.png" alt="Lara Dark Purple" />
</button> </button>
<span>Lara Dark Purple</span> <span>Lara Dark Purple</span>
</div> </div>
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'lara-dark-teal', true)"> <button class="p-link" type="button" @click="changeTheme($event, 'lara-dark-teal', true)">
<img src="demo/images/themes/lara-dark-teal.png" alt="Lara Dark Teal" /> <img src="/demo/images/themes/lara-dark-teal.png" alt="Lara Dark Teal" />
</button> </button>
<span>Lara Dark Teal</span> <span>Lara Dark Teal</span>
</div> </div>
@ -185,73 +185,73 @@
<div class="grid free-themes"> <div class="grid free-themes">
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'saga-blue')"> <button class="p-link" type="button" @click="changeTheme($event, 'saga-blue')">
<img src="demo/images/themes/saga-blue.png" alt="Saga Blue" /> <img src="/demo/images/themes/saga-blue.png" alt="Saga Blue" />
</button> </button>
<span>Saga Blue</span> <span>Saga Blue</span>
</div> </div>
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'saga-green')"> <button class="p-link" type="button" @click="changeTheme($event, 'saga-green')">
<img src="demo/images/themes/saga-green.png" alt="Saga Green" /> <img src="/demo/images/themes/saga-green.png" alt="Saga Green" />
</button> </button>
<span>Saga Green</span> <span>Saga Green</span>
</div> </div>
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'saga-orange')"> <button class="p-link" type="button" @click="changeTheme($event, 'saga-orange')">
<img src="demo/images/themes/saga-orange.png" alt="Saga Orange" /> <img src="/demo/images/themes/saga-orange.png" alt="Saga Orange" />
</button> </button>
<span>Saga Orange</span> <span>Saga Orange</span>
</div> </div>
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'saga-purple')"> <button class="p-link" type="button" @click="changeTheme($event, 'saga-purple')">
<img src="demo/images/themes/saga-purple.png" alt="Saga Purple" /> <img src="/demo/images/themes/saga-purple.png" alt="Saga Purple" />
</button> </button>
<span>Saga Purple</span> <span>Saga Purple</span>
</div> </div>
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'vela-blue', true)"> <button class="p-link" type="button" @click="changeTheme($event, 'vela-blue', true)">
<img src="demo/images/themes/vela-blue.png" alt="Vela Blue" /> <img src="/demo/images/themes/vela-blue.png" alt="Vela Blue" />
</button> </button>
<span>Vela Blue</span> <span>Vela Blue</span>
</div> </div>
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'vela-green', true)"> <button class="p-link" type="button" @click="changeTheme($event, 'vela-green', true)">
<img src="demo/images/themes/vela-green.png" alt="Vela Green" /> <img src="/demo/images/themes/vela-green.png" alt="Vela Green" />
</button> </button>
<span>Vela Green</span> <span>Vela Green</span>
</div> </div>
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'vela-orange', true)"> <button class="p-link" type="button" @click="changeTheme($event, 'vela-orange', true)">
<img src="demo/images/themes/vela-orange.png" alt="Vela Orange" /> <img src="/demo/images/themes/vela-orange.png" alt="Vela Orange" />
</button> </button>
<span>Vela Orange</span> <span>Vela Orange</span>
</div> </div>
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'vela-purple', true)"> <button class="p-link" type="button" @click="changeTheme($event, 'vela-purple', true)">
<img src="demo/images/themes/vela-purple.png" alt="Vela Purple" /> <img src="/demo/images/themes/vela-purple.png" alt="Vela Purple" />
</button> </button>
<span>Vela Purple</span> <span>Vela Purple</span>
</div> </div>
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'arya-blue', true)"> <button class="p-link" type="button" @click="changeTheme($event, 'arya-blue', true)">
<img src="demo/images/themes/arya-blue.png" alt="Arya Blue" /> <img src="/demo/images/themes/arya-blue.png" alt="Arya Blue" />
</button> </button>
<span>Arya Blue</span> <span>Arya Blue</span>
</div> </div>
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'arya-green', true)"> <button class="p-link" type="button" @click="changeTheme($event, 'arya-green', true)">
<img src="demo/images/themes/arya-green.png" alt="Arya Green" /> <img src="/demo/images/themes/arya-green.png" alt="Arya Green" />
</button> </button>
<span>Arya Green</span> <span>Arya Green</span>
</div> </div>
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'arya-orange', true)"> <button class="p-link" type="button" @click="changeTheme($event, 'arya-orange', true)">
<img src="demo/images/themes/arya-orange.png" alt="Arya Orange" /> <img src="/demo/images/themes/arya-orange.png" alt="Arya Orange" />
</button> </button>
<span>Arya Orange</span> <span>Arya Orange</span>
</div> </div>
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'arya-purple', true)"> <button class="p-link" type="button" @click="changeTheme($event, 'arya-purple', true)">
<img src="demo/images/themes/arya-purple.png" alt="Arya Purple" /> <img src="/demo/images/themes/arya-purple.png" alt="Arya Purple" />
</button> </button>
<span>Arya Purple</span> <span>Arya Purple</span>
</div> </div>
@ -262,37 +262,37 @@
<div class="grid free-themes"> <div class="grid free-themes">
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'soho-light')"> <button class="p-link" type="button" @click="changeTheme($event, 'soho-light')">
<img src="demo/images/themes/soho-light.png" alt="Soho Light" /> <img src="/demo/images/themes/soho-light.png" alt="Soho Light" />
</button> </button>
<span>Soho Light</span> <span>Soho Light</span>
</div> </div>
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'soho-dark', true)"> <button class="p-link" type="button" @click="changeTheme($event, 'soho-dark', true)">
<img src="demo/images/themes/soho-dark.png" alt="Soho Dark" /> <img src="/demo/images/themes/soho-dark.png" alt="Soho Dark" />
</button> </button>
<span>Soho Dark</span> <span>Soho Dark</span>
</div> </div>
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'viva-light')"> <button class="p-link" type="button" @click="changeTheme($event, 'viva-light')">
<img src="demo/images/themes/viva-light.svg" alt="Viva Light" /> <img src="/demo/images/themes/viva-light.svg" alt="Viva Light" />
</button> </button>
<span>Viva Light</span> <span>Viva Light</span>
</div> </div>
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'viva-dark', true)"> <button class="p-link" type="button" @click="changeTheme($event, 'viva-dark', true)">
<img src="demo/images/themes/viva-dark.svg" alt="Viva Dark" /> <img src="/demo/images/themes/viva-dark.svg" alt="Viva Dark" />
</button> </button>
<span>Viva Dark</span> <span>Viva Dark</span>
</div> </div>
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'mira')"> <button class="p-link" type="button" @click="changeTheme($event, 'mira')">
<img src="demo/images/themes/mira.jpg" alt="Mira" /> <img src="/demo/images/themes/mira.jpg" alt="Mira" />
</button> </button>
<span>Mira</span> <span>Mira</span>
</div> </div>
<div class="col-3"> <div class="col-3">
<button class="p-link" type="button" @click="changeTheme($event, 'nano')"> <button class="p-link" type="button" @click="changeTheme($event, 'nano')">
<img src="demo/images/themes/nano.jpg" alt="Mira" /> <img src="/demo/images/themes/nano.jpg" alt="Mira" />
</button> </button>
<span>Nano</span> <span>Nano</span>
</div> </div>
@ -323,32 +323,32 @@
</div> </div>
<div class="col-12 md:col-6"> <div class="col-12 md:col-6">
<a href="https://www.primefaces.org/layouts/diamond-vue"> <a href="https://www.primefaces.org/layouts/diamond-vue">
<img alt="Diamond" src="../assets/images/layouts/diamond-vue.jpg" /> <img alt="Diamond" src="@/assets/images/layouts/diamond-vue.jpg" />
</a> </a>
</div> </div>
<div class="col-12 md:col-6"> <div class="col-12 md:col-6">
<a href="https://www.primefaces.org/layouts/verona-vue"> <a href="https://www.primefaces.org/layouts/verona-vue">
<img alt="Verona" src="../assets/images/layouts/verona-vue.jpg" /> <img alt="Verona" src="@/assets/images/layouts/verona-vue.jpg" />
</a> </a>
</div> </div>
<div class="col-12 md:col-6"> <div class="col-12 md:col-6">
<a href="https://www.primefaces.org/layouts/poseidon-vue"> <a href="https://www.primefaces.org/layouts/poseidon-vue">
<img alt="Poseidon" src="../assets/images/layouts/poseidon-vue.jpg" /> <img alt="Poseidon" src="@/assets/images/layouts/poseidon-vue.jpg" />
</a> </a>
</div> </div>
<div class="col-12 md:col-6"> <div class="col-12 md:col-6">
<a href="https://www.primefaces.org/layouts/sapphire-vue"> <a href="https://www.primefaces.org/layouts/sapphire-vue">
<img alt="Sapphire" src="../assets/images/layouts/sapphire-vue.jpg" /> <img alt="Sapphire" src="@/assets/images/layouts/sapphire-vue.jpg" />
</a> </a>
</div> </div>
<div class="col-12 md:col-6"> <div class="col-12 md:col-6">
<a href="https://www.primefaces.org/layouts/serenity-vue"> <a href="https://www.primefaces.org/layouts/serenity-vue">
<img alt="Serenity" src="../assets/images/layouts/serenity-vue.jpg" /> <img alt="Serenity" src="@/assets/images/layouts/serenity-vue.jpg" />
</a> </a>
</div> </div>
<div class="col-12 md:col-6"> <div class="col-12 md:col-6">
<a href="https://www.primefaces.org/layouts/babylon-vue"> <a href="https://www.primefaces.org/layouts/babylon-vue">
<img alt="Babylon" src="../assets/images/layouts/babylon-vue.jpg" /> <img alt="Babylon" src="@/assets/images/layouts/babylon-vue.jpg" />
</a> </a>
</div> </div>
<div class="col-12 md:col-6"> <div class="col-12 md:col-6">
@ -358,17 +358,29 @@
</div> </div>
<div class="col-12 md:col-6"> <div class="col-12 md:col-6">
<a href="https://www.primefaces.org/layouts/apollo-vue"> <a href="https://www.primefaces.org/layouts/apollo-vue">
<<<<<<< Updated upstream
<img alt="Apollo" src="../assets/images/layouts/apollo-vue.jpg" /> <img alt="Apollo" src="../assets/images/layouts/apollo-vue.jpg" />
=======
<img alt="Apollo" src="@/assets/images/layouts/apollo-vue.jpg" />
>>>>>>> Stashed changes
</a> </a>
</div> </div>
<div class="col-12 md:col-6"> <div class="col-12 md:col-6">
<a href="https://www.primefaces.org/layouts/roma-vue"> <a href="https://www.primefaces.org/layouts/roma-vue">
<<<<<<< Updated upstream
<img alt="Roma" src="../assets/images/layouts/roma-vue.jpg" /> <img alt="Roma" src="../assets/images/layouts/roma-vue.jpg" />
=======
<img alt="Roma" src="@/assets/images/layouts/roma-vue.jpg" />
>>>>>>> Stashed changes
</a> </a>
</div> </div>
<div class="col-12 md:col-6"> <div class="col-12 md:col-6">
<a href="https://www.primefaces.org/layouts/prestige-vue"> <a href="https://www.primefaces.org/layouts/prestige-vue">
<<<<<<< Updated upstream
<img alt="Prestige" src="../assets/images/layouts/prestige-vue.jpg" /> <img alt="Prestige" src="../assets/images/layouts/prestige-vue.jpg" />
=======
<img alt="Prestige" src="@/assets/images/layouts/prestige-vue.jpg" />
>>>>>>> Stashed changes
</a> </a>
</div> </div>
</div> </div>

108
layouts/AppTopBar.vue
View File

@ -32,138 +32,138 @@
<li class="topbar-submenu-header">BOOTSTRAP</li> <li class="topbar-submenu-header">BOOTSTRAP</li>
<li> <li>
<a @click="changeTheme($event, 'bootstrap4-light-blue')"><img src="demo/images/themes/bootstrap4-light-blue.svg" alt="Blue Light" /><span>Blue Light</span></a> <a @click="changeTheme($event, 'bootstrap4-light-blue')"><img src="/demo/images/themes/bootstrap4-light-blue.svg" alt="Blue Light" /><span>Blue Light</span></a>
</li> </li>
<li> <li>
<a @click="changeTheme($event, 'bootstrap4-light-purple')"><img src="demo/images/themes/bootstrap4-light-purple.svg" alt="Purple Light" /><span>Purple Light</span></a> <a @click="changeTheme($event, 'bootstrap4-light-purple')"><img src="/demo/images/themes/bootstrap4-light-purple.svg" alt="Purple Light" /><span>Purple Light</span></a>
</li> </li>
<li> <li>
<a @click="changeTheme($event, 'bootstrap4-dark-blue', true)"><img src="demo/images/themes/bootstrap4-dark-blue.svg" alt="Blue Dark" /><span>Blue Dark</span></a> <a @click="changeTheme($event, 'bootstrap4-dark-blue', true)"><img src="/demo/images/themes/bootstrap4-dark-blue.svg" alt="Blue Dark" /><span>Blue Dark</span></a>
</li> </li>
<li> <li>
<a @click="changeTheme($event, 'bootstrap4-dark-purple', true)"><img src="demo/images/themes/bootstrap4-dark-purple.svg" alt="Purple Dark" /><span>Purple Dark</span></a> <a @click="changeTheme($event, 'bootstrap4-dark-purple', true)"><img src="/demo/images/themes/bootstrap4-dark-purple.svg" alt="Purple Dark" /><span>Purple Dark</span></a>
</li> </li>
<li class="topbar-submenu-header">MATERIAL DESIGN</li> <li class="topbar-submenu-header">MATERIAL DESIGN</li>
<li> <li>
<a @click="changeTheme($event, 'md-light-indigo')"><img src="demo/images/themes/md-light-indigo.svg" alt="Indigo Light" /><span>Indigo Light</span></a> <a @click="changeTheme($event, 'md-light-indigo')"><img src="/demo/images/themes/md-light-indigo.svg" alt="Indigo Light" /><span>Indigo Light</span></a>
</li> </li>
<li> <li>
<a @click="changeTheme($event, 'md-light-deeppurple')"><img src="demo/images/themes/md-light-deeppurple.svg" alt="Deep Purple Light" /><span>Deep Purple Light</span></a> <a @click="changeTheme($event, 'md-light-deeppurple')"><img src="/demo/images/themes/md-light-deeppurple.svg" alt="Deep Purple Light" /><span>Deep Purple Light</span></a>
</li> </li>
<li> <li>
<a @click="changeTheme($event, 'md-dark-indigo', true)"><img src="demo/images/themes/md-dark-indigo.svg" alt="Indigo Dark" /><span>Indigo Dark</span></a> <a @click="changeTheme($event, 'md-dark-indigo', true)"><img src="/demo/images/themes/md-dark-indigo.svg" alt="Indigo Dark" /><span>Indigo Dark</span></a>
</li> </li>
<li> <li>
<a @click="changeTheme($event, 'md-dark-deeppurple', true)"><img src="demo/images/themes/md-dark-deeppurple.svg" alt="Deep Purple Dark" /><span>Deep Purple Dark</span></a> <a @click="changeTheme($event, 'md-dark-deeppurple', true)"><img src="/demo/images/themes/md-dark-deeppurple.svg" alt="Deep Purple Dark" /><span>Deep Purple Dark</span></a>
</li> </li>
<li class="topbar-submenu-header">MATERIAL DESIGN COMPACT</li> <li class="topbar-submenu-header">MATERIAL DESIGN COMPACT</li>
<li> <li>
<a @click="changeTheme($event, 'mdc-light-indigo')"><img src="demo/images/themes/md-light-indigo.svg" alt="Indigo Light" /><span>Indigo Light</span></a> <a @click="changeTheme($event, 'mdc-light-indigo')"><img src="/demo/images/themes/md-light-indigo.svg" alt="Indigo Light" /><span>Indigo Light</span></a>
</li> </li>
<li> <li>
<a @click="changeTheme($event, 'mdc-light-deeppurple')"><img src="demo/images/themes/md-light-deeppurple.svg" alt="Deep Purple Light" /><span>Deep Purple Light</span></a> <a @click="changeTheme($event, 'mdc-light-deeppurple')"><img src="/demo/images/themes/md-light-deeppurple.svg" alt="Deep Purple Light" /><span>Deep Purple Light</span></a>
</li> </li>
<li> <li>
<a @click="changeTheme($event, 'mdc-dark-indigo', true)"><img src="demo/images/themes/md-dark-indigo.svg" alt="Indigo Dark" /><span>Indigo Dark</span></a> <a @click="changeTheme($event, 'mdc-dark-indigo', true)"><img src="/demo/images/themes/md-dark-indigo.svg" alt="Indigo Dark" /><span>Indigo Dark</span></a>
</li> </li>
<li> <li>
<a @click="changeTheme($event, 'mdc-dark-deeppurple', true)"><img src="demo/images/themes/md-dark-deeppurple.svg" alt="Deep Purple Dark" /><span>Deep Purple Dark</span></a> <a @click="changeTheme($event, 'mdc-dark-deeppurple', true)"><img src="/demo/images/themes/md-dark-deeppurple.svg" alt="Deep Purple Dark" /><span>Deep Purple Dark</span></a>
</li> </li>
<li class="topbar-submenu-header">TAILWIND</li> <li class="topbar-submenu-header">TAILWIND</li>
<li> <li>
<a @click="changeTheme($event, 'tailwind-light')"><img src="demo/images/themes/tailwind-light.png" alt="Tailwind Light" /><span>Tailwind Light</span></a> <a @click="changeTheme($event, 'tailwind-light')"><img src="/demo/images/themes/tailwind-light.png" alt="Tailwind Light" /><span>Tailwind Light</span></a>
</li> </li>
<li class="topbar-submenu-header">FLUENT UI</li> <li class="topbar-submenu-header">FLUENT UI</li>
<li> <li>
<a @click="changeTheme($event, 'fluent-light')"><img src="demo/images/themes/fluent-light.png" alt="Fluent Light" /><span>Fluent Light</span></a> <a @click="changeTheme($event, 'fluent-light')"><img src="/demo/images/themes/fluent-light.png" alt="Fluent Light" /><span>Fluent Light</span></a>
</li> </li>
<li class="topbar-submenu-header flex align-items-center">PRIMEONE 2022 <Tag class="ml-3" value="NEW" rounded severity="success"></Tag></li> <li class="topbar-submenu-header flex align-items-center">PRIMEONE 2022 <Tag class="ml-3" value="NEW" rounded severity="success"></Tag></li>
<li> <li>
<a @click="changeTheme($event, 'lara-light-indigo')"><img src="demo/images/themes/lara-light-indigo.png" alt="Lara Light Indigo" /><span>Lara Light Indigo</span></a> <a @click="changeTheme($event, 'lara-light-indigo')"><img src="/demo/images/themes/lara-light-indigo.png" alt="Lara Light Indigo" /><span>Lara Light Indigo</span></a>
</li> </li>
<li> <li>
<a @click="changeTheme($event, 'lara-light-blue')"><img src="demo/images/themes/lara-light-blue.png" alt="Lara Light Blue" /><span>Lara Light Blue</span></a> <a @click="changeTheme($event, 'lara-light-blue')"><img src="/demo/images/themes/lara-light-blue.png" alt="Lara Light Blue" /><span>Lara Light Blue</span></a>
</li> </li>
<li> <li>
<a @click="changeTheme($event, 'lara-light-purple')"><img src="demo/images/themes/lara-light-purple.png" alt="Lara Light Purple" /><span>Lara Light Purple</span></a> <a @click="changeTheme($event, 'lara-light-purple')"><img src="/demo/images/themes/lara-light-purple.png" alt="Lara Light Purple" /><span>Lara Light Purple</span></a>
</li> </li>
<li> <li>
<a @click="changeTheme($event, 'lara-light-teal')"><img src="demo/images/themes/lara-light-teal.png" alt="Lara Light Teal" /><span>Lara Light Teal</span></a> <a @click="changeTheme($event, 'lara-light-teal')"><img src="/demo/images/themes/lara-light-teal.png" alt="Lara Light Teal" /><span>Lara Light Teal</span></a>
</li> </li>
<li> <li>
<a @click="changeTheme($event, 'lara-dark-blue')"><img src="demo/images/themes/lara-dark-blue.png" alt="Lara Dark Blue" /><span>Lara Dark Blue</span></a> <a @click="changeTheme($event, 'lara-dark-blue')"><img src="/demo/images/themes/lara-dark-blue.png" alt="Lara Dark Blue" /><span>Lara Dark Blue</span></a>
</li> </li>
<li> <li>
<a @click="changeTheme($event, 'lara-dark-indigo')"><img src="demo/images/themes/lara-dark-indigo.png" alt="Lara Dark Indigo" /><span>Lara Dark Indigo</span></a> <a @click="changeTheme($event, 'lara-dark-indigo')"><img src="/demo/images/themes/lara-dark-indigo.png" alt="Lara Dark Indigo" /><span>Lara Dark Indigo</span></a>
</li> </li>
<li> <li>
<a @click="changeTheme($event, 'lara-dark-purple')"><img src="demo/images/themes/lara-dark-purple.png" alt="Lara Dark Purple" /><span>Lara Dark Purple</span></a> <a @click="changeTheme($event, 'lara-dark-purple')"><img src="/demo/images/themes/lara-dark-purple.png" alt="Lara Dark Purple" /><span>Lara Dark Purple</span></a>
</li> </li>
<li> <li>
<a @click="changeTheme($event, 'lara-dark-teal')"><img src="demo/images/themes/lara-dark-teal.png" alt="Lara Dark Teal" /><span>Lara Dark Teal</span></a> <a @click="changeTheme($event, 'lara-dark-teal')"><img src="/demo/images/themes/lara-dark-teal.png" alt="Lara Dark Teal" /><span>Lara Dark Teal</span></a>
</li> </li>
<li class="topbar-submenu-header">PRIMEONE 2021</li> <li class="topbar-submenu-header">PRIMEONE 2021</li>
<li> <li>
<a @click="changeTheme($event, 'saga-blue')"><img src="demo/images/themes/saga-blue.png" alt="Saga Blue" /><span>Saga Blue</span></a> <a @click="changeTheme($event, 'saga-blue')"><img src="/demo/images/themes/saga-blue.png" alt="Saga Blue" /><span>Saga Blue</span></a>
</li> </li>
<li> <li>
<a @click="changeTheme($event, 'saga-green')"><img src="demo/images/themes/saga-green.png" alt="Saga Green" /><span>Saga Green</span></a> <a @click="changeTheme($event, 'saga-green')"><img src="/demo/images/themes/saga-green.png" alt="Saga Green" /><span>Saga Green</span></a>
</li> </li>
<li> <li>
<a @click="changeTheme($event, 'saga-orange')"><img src="demo/images/themes/saga-orange.png" alt="Saga Orange" /><span>Saga Orange</span></a> <a @click="changeTheme($event, 'saga-orange')"><img src="/demo/images/themes/saga-orange.png" alt="Saga Orange" /><span>Saga Orange</span></a>
</li> </li>
<li> <li>
<a @click="changeTheme($event, 'saga-purple')"><img src="demo/images/themes/saga-purple.png" alt="Saga Purple" /><span>Saga Purple</span></a> <a @click="changeTheme($event, 'saga-purple')"><img src="/demo/images/themes/saga-purple.png" alt="Saga Purple" /><span>Saga Purple</span></a>
</li> </li>
<li> <li>
<a @click="changeTheme($event, 'vela-blue', true)"><img src="demo/images/themes/vela-blue.png" alt="Vela Blue" /><span>Vela Blue</span></a> <a @click="changeTheme($event, 'vela-blue', true)"><img src="/demo/images/themes/vela-blue.png" alt="Vela Blue" /><span>Vela Blue</span></a>
</li> </li>
<li> <li>
<a @click="changeTheme($event, 'vela-green', true)"><img src="demo/images/themes/vela-green.png" alt="Vela Green" /><span>Vela Green</span></a> <a @click="changeTheme($event, 'vela-green', true)"><img src="/demo/images/themes/vela-green.png" alt="Vela Green" /><span>Vela Green</span></a>
</li> </li>
<li> <li>
<a @click="changeTheme($event, 'vela-orange', true)"><img src="demo/images/themes/vela-orange.png" alt="Vela Orange" /><span>Vela Orange</span></a> <a @click="changeTheme($event, 'vela-orange', true)"><img src="/demo/images/themes/vela-orange.png" alt="Vela Orange" /><span>Vela Orange</span></a>
</li> </li>
<li> <li>
<a @click="changeTheme($event, 'vela-purple', true)"><img src="demo/images/themes/vela-purple.png" alt="Vela Purple" /><span>Vela Purple</span></a> <a @click="changeTheme($event, 'vela-purple', true)"><img src="/demo/images/themes/vela-purple.png" alt="Vela Purple" /><span>Vela Purple</span></a>
</li> </li>
<li> <li>
<a @click="changeTheme($event, 'arya-blue', true)"><img src="demo/images/themes/arya-blue.png" alt="Arya Blue" /><span>Arya Blue</span></a> <a @click="changeTheme($event, 'arya-blue', true)"><img src="/demo/images/themes/arya-blue.png" alt="Arya Blue" /><span>Arya Blue</span></a>
</li> </li>
<li> <li>
<a @click="changeTheme($event, 'arya-green', true)"><img src="demo/images/themes/arya-green.png" alt="Arya Green" /><span>Arya Green</span></a> <a @click="changeTheme($event, 'arya-green', true)"><img src="/demo/images/themes/arya-green.png" alt="Arya Green" /><span>Arya Green</span></a>
</li> </li>
<li> <li>
<a @click="changeTheme($event, 'arya-orange', true)"><img src="demo/images/themes/arya-orange.png" alt="Arya Orange" /><span>Arya Orange</span></a> <a @click="changeTheme($event, 'arya-orange', true)"><img src="/demo/images/themes/arya-orange.png" alt="Arya Orange" /><span>Arya Orange</span></a>
</li> </li>
<li> <li>
<a @click="changeTheme($event, 'arya-purple', true)"><img src="demo/images/themes/arya-purple.png" alt="Arya Purple" /><span>Arya Purple</span></a> <a @click="changeTheme($event, 'arya-purple', true)"><img src="/demo/images/themes/arya-purple.png" alt="Arya Purple" /><span>Arya Purple</span></a>
</li> </li>
<li class="topbar-submenu-header">PREMIUM</li> <li class="topbar-submenu-header">PREMIUM</li>
<li> <li>
<a @click="changeTheme($event, 'soho-light')"><img src="demo/images/themes/soho-light.png" alt="Soho Light" /><span>Soho Light</span></a> <a @click="changeTheme($event, 'soho-light')"><img src="/demo/images/themes/soho-light.png" alt="Soho Light" /><span>Soho Light</span></a>
</li> </li>
<li> <li>
<a @click="changeTheme($event, 'soho-dark', true)"><img src="demo/images/themes/soho-dark.png" alt="Soho Dark" /><span>Soho Dark</span></a> <a @click="changeTheme($event, 'soho-dark', true)"><img src="/demo/images/themes/soho-dark.png" alt="Soho Dark" /><span>Soho Dark</span></a>
</li> </li>
<li> <li>
<a @click="changeTheme($event, 'viva-light')"><img src="demo/images/themes/viva-light.svg" alt="Viva Light" /><span>Viva Light</span></a> <a @click="changeTheme($event, 'viva-light')"><img src="/demo/images/themes/viva-light.svg" alt="Viva Light" /><span>Viva Light</span></a>
</li> </li>
<li> <li>
<a @click="changeTheme($event, 'viva-dark', true)"><img src="demo/images/themes/viva-dark.svg" alt="Viva Dark" /><span>Viva Dark</span></a> <a @click="changeTheme($event, 'viva-dark', true)"><img src="/demo/images/themes/viva-dark.svg" alt="Viva Dark" /><span>Viva Dark</span></a>
</li> </li>
<li> <li>
<a @click="changeTheme($event, 'mira')"><img src="demo/images/themes/mira.jpg" alt="Mira" /><span>Mira</span></a> <a @click="changeTheme($event, 'mira')"><img src="/demo/images/themes/mira.jpg" alt="Mira" /><span>Mira</span></a>
</li> </li>
<li> <li>
<a @click="changeTheme($event, 'nano')"><img src="demo/images/themes/nano.jpg" alt="Nano" /><span>Nano</span></a> <a @click="changeTheme($event, 'nano')"><img src="/demo/images/themes/nano.jpg" alt="Nano" /><span>Nano</span></a>
</li> </li>
</ul> </ul>
</transition> </transition>
@ -174,47 +174,47 @@
<ul v-show="activeMenuIndex === 1"> <ul v-show="activeMenuIndex === 1">
<li class="topbar-submenu-header">FREE ADMIN TEMPLATE</li> <li class="topbar-submenu-header">FREE ADMIN TEMPLATE</li>
<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="@/assets/images/layouts/themeswitcher-sakai.svg" alt="Sakai" /><span>Sakai</span></a>
</li> </li>
<li class="topbar-submenu-header">PREMIUM ADMIN TEMPLATES</li> <li class="topbar-submenu-header">PREMIUM ADMIN TEMPLATES</li>
<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="@/assets/images/layouts/themeswitcher-atlantis.svg" alt="Atlantis" /><span>Atlantis</span></a>
</li> </li>
<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="@/assets/images/layouts/themeswitcher-freya.png" alt="Freya" /><span>Freya</span></a>
</li> </li>
<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="@/assets/images/layouts/themeswitcher-diamond.png" alt="Diamond" /><span>Diamond</span></a>
</li> </li>
<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="@/assets/images/layouts/themeswitcher-verona.png" alt="Verona" /><span>Verona</span></a>
</li> </li>
<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="@/assets/images/layouts/themeswitcher-poseidon.svg" alt="Poseidon" /><span>Poseidon</span></a>
</li> </li>
<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="@/assets/images/layouts/themeswitcher-sapphire.png" alt="Sapphire" /><span>Sapphire</span><span class="theme-badge material">material</span></a>
</li> </li>
<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="@/assets/images/layouts/themeswitcher-serenity.png" alt="Serenity" /><span>Serenity</span><span class="theme-badge material">material</span></a>
</li> </li>
<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="@/assets/images/layouts/themeswitcher-ultima.png" alt="Ultima" /><span>Ultima</span><span class="theme-badge material">material</span></a>
</li> </li>
<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="@/assets/images/layouts/themeswitcher-avalon.png" alt="Avalon" /><span>Avalon</span><span class="theme-badge bootstrap">bootstrap</span></a>
</li> </li>
<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="@/assets/images/layouts/themeswitcher-babylon.png" alt="Babylon" /><span>Babylon</span></a>
</li> </li>
<li> <li>
<a href="https://www.primefaces.org/layouts/apollo-vue"><img src="./assets/images/layouts/themeswitcher-apollo.png" alt="Apollo" /><span>Apollo</span><span class="theme-badge darkmode">dark mode</span></a> <a href="https://www.primefaces.org/layouts/apollo-vue"><img src="@/assets/images/layouts/themeswitcher-apollo.png" alt="Apollo" /><span>Apollo</span><span class="theme-badge darkmode">dark mode</span></a>
</li> </li>
<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="@/assets/images/layouts/themeswitcher-roma.jpg" alt="Roma" /><span>Roma</span></a>
</li> </li>
<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="@/assets/images/layouts/themeswitcher-prestige.png" alt="Prestige" /><span>Prestige</span></a>
</li> </li>
</ul> </ul>
</transition> </transition>

18
pages/avatar/index.vue
View File

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

2
pages/card/CardDoc.vue
View File

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

2
pages/card/index.vue
View File

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

12
pages/chip/index.vue
View File

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

2
pages/colorpicker/index.vue
View File

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

2
pages/contextmenu/ContextMenuDoc.vue
View File

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

2
pages/contextmenu/index.vue
View File

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

2
pages/datatable/Templating.vue
View File

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

2
pages/deferredcontent/index.vue
View File

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

74
pages/dock/DockDoc.vue
View File

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

10
pages/galleria/Advanced.vue
View File

@ -250,11 +250,17 @@ export default {
created() { created() {
this.galleriaService = new PhotoService(); this.galleriaService = new PhotoService();
}, },
mounted() { async mounted() {
this.galleriaService.getImages().then((data) => (this.images = data)); console.log(this.galleriaService);
await this.test();
console.log(this.images);
this.bindDocumentListeners(); this.bindDocumentListeners();
}, },
methods: { methods: {
async test() {
const data = await this.galleriaService.getImages();
this.images = data;
},
onThumbnailButtonClick() { onThumbnailButtonClick() {
this.showThumbnails = !this.showThumbnails; this.showThumbnails = !this.showThumbnails;
}, },

4
pages/image/index.vue
View File

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

2
pages/inplace/InplaceDoc.vue
View File

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

2
pages/inplace/index.vue
View File

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

14
pages/landing/BlockSection.vue
View File

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

14
pages/landing/ComponentSection.vue
View File

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

16
pages/landing/FeaturesSection.vue
View File

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

8
pages/landing/HeaderSection.vue
View File

@ -9,25 +9,25 @@
<ol class="list-none m-0 p-0 flex flex-column lg:flex-row flex-wrap lg:flex-nowrap lg:align-items-center font-semibold"> <ol class="list-none m-0 p-0 flex flex-column lg:flex-row flex-wrap lg:flex-nowrap lg:align-items-center font-semibold">
<li class="mr-0 lg:mr-2"> <li class="mr-0 lg:mr-2">
<router-link to="/setup"> <router-link to="/setup">
<img src="demo/images/landing/core-icon.svg" alt="primevue core" /> <img src="/demo/images/landing/core-icon.svg" alt="primevue core" />
<span>Components</span> <span>Components</span>
</router-link> </router-link>
</li> </li>
<li class="mr-0 lg:mr-2"> <li class="mr-0 lg:mr-2">
<a href="https://www.primefaces.org/primeblocks-vue"> <a href="https://www.primefaces.org/primeblocks-vue">
<img src="demo/images/landing/blocks-icon.svg" alt="primevue templates" /> <img src="/demo/images/landing/blocks-icon.svg" alt="primevue templates" />
<span>Blocks</span> <span>Blocks</span>
</a> </a>
</li> </li>
<li class="mr-0 lg:mr-2"> <li class="mr-0 lg:mr-2">
<a href="https://www.primefaces.org/designer-vue"> <a href="https://www.primefaces.org/designer-vue">
<img src="demo/images/landing/designer-icon.svg" alt="primevue templates" /> <img src="/demo/images/landing/designer-icon.svg" alt="primevue templates" />
<span>Designer</span> <span>Designer</span>
</a> </a>
</li> </li>
<li class="mr-0 lg:mr-2"> <li class="mr-0 lg:mr-2">
<a href="https://www.primefaces.org/store/templates.xhtml"> <a href="https://www.primefaces.org/store/templates.xhtml">
<img src="demo/images/landing/templates-icon.svg" alt="primevue templates" /> <img src="/demo/images/landing/templates-icon.svg" alt="primevue templates" />
<span>Templates</span> <span>Templates</span>
</a> </a>
</li> </li>

14
pages/landing/HeroSection.vue
View File

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

4
pages/overlaypanel/OverlayPanelDoc.vue
View File

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

24
pages/rating/RatingDoc.vue
View File

@ -39,13 +39,13 @@ import Rating from 'primevue/rating';
<pre v-code><code><template v-pre> <pre v-code><code><template v-pre>
&lt;Rating :modelValue="3"> &lt;Rating :modelValue="3">
&lt;template #cancelicon&gt; &lt;template #cancelicon&gt;
&lt;img src="demo/images/rating/cancel.png" height="24" width="24"&gt; &lt;img src="/demo/images/rating/cancel.png" height="24" width="24"&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #onicon&gt; &lt;template #onicon&gt;
&lt;img src="demo/images/rating/custom-onicon.png" height="24" width="24"&gt; &lt;img src="/demo/images/rating/custom-onicon.png" height="24" width="24"&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #officon&gt; &lt;template #officon&gt;
&lt;img src="demo/images/rating/custom-officon.png" height="24" width="24"&gt; &lt;img src="/demo/images/rating/custom-officon.png" height="24" width="24"&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Rating&gt; &lt;/Rating&gt;
@ -288,13 +288,13 @@ export default {
<h5>Templating</h5> <h5>Templating</h5>
<Rating v-model="val4"> <Rating v-model="val4">
<template #cancelicon> <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="/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"/>
</template> </template>
<template #onicon> <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="/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" />
</template> </template>
<template #officon> <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="/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" />
</template> </template>
</Rating> </Rating>
</div> </div>
@ -338,13 +338,13 @@ export default {
<h5>Templating</h5> <h5>Templating</h5>
<Rating v-model="val4"> <Rating v-model="val4">
<template #cancelicon> <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="/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"/>
</template> </template>
<template #onicon> <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="/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" />
</template> </template>
<template #officon> <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="/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" />
</template> </template>
</Rating> </Rating>
</div> </div>
@ -389,13 +389,13 @@ export default {
<h5>Templating</h5> <h5>Templating</h5>
<p-rating v-model="val4"> <p-rating v-model="val4">
<template #cancelicon> <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="/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"/>
</template> </template>
<template #onicon> <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="/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" />
</template> </template>
<template #officon> <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="/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" />
</template> </template>
</p-rating> </p-rating>
</div> </div>

6
pages/rating/index.vue
View File

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

2
pages/support/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<div class="content-section"> <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="/demo/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="flex flex-column xl:flex-row mb-5 gap-5">
<div class="card xl:w-3 m-0 relative overflow-hidden"> <div class="card xl:w-3 m-0 relative overflow-hidden">

10
pages/uikit/index.vue
View File

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