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

Layout updated for v.3.21.0

pull/3420/head
Bahadır Sofuoğlu 2022-12-08 22:24:21 +03:00
parent 502c23c05c
commit 892bfc2bd8
4 changed files with 181 additions and 177 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

179
layouts/AppConfigurator.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<div :class="containerClass"> <div :class="containerClass">
<div class="layout-config-content-wrapper"> <div class="layout-config-content-wrapper">
<a class="layout-config-button" @click="toggleConfigurator"> <a href="#" class="layout-config-button" @click="toggleConfigurator">
<i class="pi pi-cog"></i> <i class="pi pi-cog"></i>
</a> </a>
<a to="#" class="layout-config-close" @click="hideConfigurator"> <a href="#" class="layout-config-close" @click="hideConfigurator">
<i class="pi pi-times"></i> <i class="pi pi-times"></i>
</a> </a>
@ -13,7 +13,7 @@
<h4>Component Scale</h4> <h4>Component Scale</h4>
<div class="config-scale"> <div class="config-scale">
<Button icon="pi pi-minus" @click="decrementScale()" class="p-button-text" :disabled="scale === scales[0]" /> <Button icon="pi pi-minus" @click="decrementScale()" class="p-button-text" :disabled="scale === scales[0]" />
<i class="pi pi-circle-fill" v-for="s of scales" :class="{ 'scale-active': s === scale }" :key="s" /> <i v-for="s of scales" :key="s" class="pi pi-circle-fill" :class="{ 'scale-active': s === scale }" />
<Button icon="pi pi-plus" @click="incrementScale()" class="p-button-text" :disabled="scale === scales[scales.length - 1]" /> <Button icon="pi pi-plus" @click="incrementScale()" class="p-button-text" :disabled="scale === scales[scales.length - 1]" />
</div> </div>
@ -23,31 +23,31 @@
<InputSwitch :modelValue="rippleActive" @update:modelValue="onRippleChange" /> <InputSwitch :modelValue="rippleActive" @update:modelValue="onRippleChange" />
<h4>Free Themes</h4> <h4>Free Themes</h4>
<p>Built-in component themes created by the <nuxt-link to="https://www.primefaces.org/designer/primevue">PrimeVue Theme Designer</nuxt-link>.</p> <p>Built-in component themes created by the <a href="https://www.primefaces.org/designer/primevue">PrimeVue Theme Designer</a>.</p>
<h5>Bootstrap</h5> <h5>Bootstrap</h5>
<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,191 +185,191 @@
<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>
</div> </div>
<h4>Premium Themes</h4> <h4>Premium Themes</h4>
<p>Premium themes are only available exclusively for <nuxt-link to="https://www.primefaces.org/designer/primevue">PrimeVue Theme Designer</nuxt-link> subscribers and therefore not included in PrimeVue core.</p> <p>Premium themes are only available exclusively for <a href="https://www.primefaces.org/designer/primevue">PrimeVue Theme Designer</a> subscribers and therefore not included in PrimeVue core.</p>
<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>
</div> </div>
<h4>Admin Templates</h4> <h4>Admin Templates</h4>
<p>Beautifully crafted <nuxt-link to="https://cli.vuejs.org">Vue CLI</nuxt-link> application templates by the PrimeTek design team.</p> <p>Beautifully crafted <a href="https://cli.vuejs.org">Vue CLI</a> application templates by the PrimeTek design team.</p>
<div class="grid premium-themes"> <div class="grid premium-themes">
<div class="col-12 md:col-6"> <div class="col-12 md:col-6">
<nuxt-link to="https://www.primefaces.org/sakai-vue"> <a href="https://www.primefaces.org/sakai-vue">
<img alt="Ultima" src="@/assets/images/layouts/sakai-vue.jpg" /> <img alt="Ultima" src="./assets/images/layouts/sakai-vue.jpg" />
</nuxt-link> </a>
</div> </div>
<div class="col-12 md:col-6"> <div class="col-12 md:col-6">
<nuxt-link to="https://www.primefaces.org/layouts/atlantis-vue"> <a href="https://www.primefaces.org/layouts/atlantis-vue">
<img alt="Atlantis" src="@/assets/images/layouts/atlantis-vue.jpg" /> <img alt="Atlantis" src="./assets/images/layouts/atlantis-vue.jpg" />
</nuxt-link> </a>
</div> </div>
<div class="col-12 md:col-6"> <div class="col-12 md:col-6">
<nuxt-link to="https://www.primefaces.org/layouts/freya-vue"> <a href="https://www.primefaces.org/layouts/freya-vue">
<img alt="Freya" src="@/assets/images/layouts/freya-vue.png" /> <img alt="Freya" src="./assets/images/layouts/freya-vue.png" />
</nuxt-link> </a>
</div> </div>
<div class="col-12 md:col-6"> <div class="col-12 md:col-6">
<nuxt-link to="https://www.primefaces.org/layouts/ultima-vue"> <a href="https://www.primefaces.org/layouts/ultima-vue">
<img alt="Ultima" src="@/assets/images/layouts/ultima-vue.jpg" /> <img alt="Ultima" src="./assets/images/layouts/ultima-vue.jpg" />
</nuxt-link> </a>
</div> </div>
<div class="col-12 md:col-6"> <div class="col-12 md:col-6">
<nuxt-link to="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" />
</nuxt-link> </a>
</div> </div>
<div class="col-12 md:col-6"> <div class="col-12 md:col-6">
<nuxt-link to="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" />
</nuxt-link> </a>
</div> </div>
<div class="col-12 md:col-6"> <div class="col-12 md:col-6">
<nuxt-link to="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" />
</nuxt-link> </a>
</div> </div>
<div class="col-12 md:col-6"> <div class="col-12 md:col-6">
<nuxt-link to="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" />
</nuxt-link> </a>
</div> </div>
<div class="col-12 md:col-6"> <div class="col-12 md:col-6">
<nuxt-link to="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" />
</nuxt-link> </a>
</div> </div>
<div class="col-12 md:col-6"> <div class="col-12 md:col-6">
<nuxt-link to="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" />
</nuxt-link> </a>
</div> </div>
<div class="col-12 md:col-6"> <div class="col-12 md:col-6">
<nuxt-link to="https://www.primefaces.org/layouts/avalon-vue"> <a href="https://www.primefaces.org/layouts/avalon-vue">
<img alt="Avalon" src="@/assets/images/layouts/avalon-vue.jpg" /> <img alt="Avalon" src="./assets/images/layouts/avalon-vue.jpg" />
</nuxt-link> </a>
</div> </div>
<div class="col-12 md:col-6"> <div class="col-12 md:col-6">
<nuxt-link to="https://www.primefaces.org/layouts/apollo-vue"> <a href="https://www.primefaces.org/layouts/apollo-vue">
<img alt="Apollo" src="@/assets/images/layouts/apollo-vue.jpg" /> <img alt="Apollo" src="./assets/images/layouts/apollo-vue.jpg" />
</nuxt-link> </a>
</div> </div>
<div class="col-12 md:col-6"> <div class="col-12 md:col-6">
<nuxt-link to="https://www.primefaces.org/layouts/roma-vue"> <a href="https://www.primefaces.org/layouts/roma-vue">
<img alt="Roma" src="@/assets/images/layouts/roma-vue.jpg" /> <img alt="Roma" src="./assets/images/layouts/roma-vue.jpg" />
</nuxt-link> </a>
</div> </div>
<div class="col-12 md:col-6"> <div class="col-12 md:col-6">
<nuxt-link to="https://www.primefaces.org/layouts/prestige-vue"> <a href="https://www.primefaces.org/layouts/prestige-vue">
<img alt="Prestige" src="@/assets/images/layouts/prestige-vue.jpg" /> <img alt="Prestige" src="./assets/images/layouts/prestige-vue.jpg" />
</nuxt-link> </a>
</div> </div>
</div> </div>
</div> </div>
@ -379,7 +379,7 @@
</template> </template>
<script> <script>
import EventBus from './AppEventBus'; import EventBus from '@/layouts/AppEventBus';
export default { export default {
props: { props: {
@ -439,6 +439,7 @@ export default {
this.active = false; this.active = false;
} }
}; };
document.addEventListener('click', this.outsideClickListener); document.addEventListener('click', this.outsideClickListener);
} }
}, },

2
layouts/AppFooter.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="layout-footer"> <div class="layout-footer">
<div class="layout-footer-left"> <div class="layout-footer-left">
<span>PrimeVue 3.17.0-SNAPSHOT on Vue 3 by </span> <span>PrimeVue 3.21.0 on Vue 3 by </span>
<nuxt-link to="https://www.primetek.com.tr">PrimeTek</nuxt-link> <nuxt-link to="https://www.primetek.com.tr">PrimeTek</nuxt-link>
</div> </div>

26
layouts/AppMenu.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<div :class="['layout-sidebar', { active: active }]"> <div :class="['layout-sidebar', { active: active }]">
<nuxt-link to="/" class="logo"> <router-link to="/" class="logo">
<img :src="'/demo/images/primevue-logo-' + `${$appState.darkTheme ? 'light' : 'dark'}` + '.svg'" alt="primevue logo" /> <img :src="'demo/images/primevue-logo-' + `${$appState.darkTheme ? 'light' : 'dark'}` + '.svg'" alt="primevue logo" />
</nuxt-link> </router-link>
<div class="layout-sidebar-filter p-fluid"> <div class="layout-sidebar-filter p-fluid">
<AutoComplete <AutoComplete
v-model="selectedRoute" v-model="selectedRoute"
@ -24,34 +24,34 @@
{{ item.name }} {{ item.name }}
<Tag v-if="item.badge" :value="item.badge"></Tag> <Tag v-if="item.badge" :value="item.badge"></Tag>
</div> </div>
<div class="menu-items" v-if="item.children && item.children.length"> <div v-if="item.children && item.children.length" class="menu-items">
<template v-for="child of item.children" :key="child.name"> <template v-for="child of item.children" :key="child.name">
<a v-if="child.href" :href="child.href" target="_blank">{{ child.name }}</a> <a v-if="child.href" :href="child.href" target="_blank">{{ child.name }}</a>
<nuxt-link v-if="child.to" :to="child.to"> <router-link v-if="child.to" :to="child.to">
{{ child.name }} {{ child.name }}
<Tag v-if="child.badge" :value="child.badge"></Tag> <Tag v-if="child.badge" :value="child.badge"></Tag>
</nuxt-link> </router-link>
<template v-if="child.children"> <template v-if="child.children">
<nuxt-link :to="child.children[0].to" v-slot="{ isActive }" custom> <router-link v-slot="{ isActive }" :to="child.children[0].to" custom>
<div> <div>
<a tabindex="0" @click="toggleSubmenu($event, child.meta[0])"> <a tabindex="0" @click="toggleSubmenu($event, child.meta[0])">
{{ child.name }} {{ child.name }}
<Tag v-if="child.badge" :value="child.badge"></Tag> <Tag v-if="child.badge" :value="child.badge"></Tag>
</a> </a>
<transition name="p-toggleable-content"> <transition name="p-toggleable-content">
<div class="p-toggleable-content" v-show="isSubmenuActive(child.meta[0], isActive)"> <div v-show="isSubmenuActive(child.meta[0], isActive)" class="p-toggleable-content">
<ul> <ul>
<li v-for="(submenuitem, i) of child.children" :key="i"> <li v-for="(submenuitem, i) of child.children" :key="i">
<nuxt-link :to="submenuitem.to"> <router-link :to="submenuitem.to">
{{ submenuitem.name }} {{ submenuitem.name }}
<Tag v-if="submenuitem.badge" :value="submenuitem.badge"></Tag> <Tag v-if="submenuitem.badge" :value="submenuitem.badge"></Tag>
</nuxt-link> </router-link>
</li> </li>
</ul> </ul>
</div> </div>
</transition> </transition>
</div> </div>
</nuxt-link> </router-link>
</template> </template>
</template> </template>
</div> </div>
@ -85,6 +85,7 @@ export default {
mounted() { mounted() {
this.menu.forEach((route) => { this.menu.forEach((route) => {
let childRoute = { ...route }; let childRoute = { ...route };
childRoute.children = childRoute.children.filter((child) => { childRoute.children = childRoute.children.filter((child) => {
if (child.meta) { if (child.meta) {
this.routes.push(child); this.routes.push(child);
@ -107,8 +108,10 @@ export default {
return true; return true;
} else if (routerIsActive) { } else if (routerIsActive) {
this.activeSubmenus[name] = true; this.activeSubmenus[name] = true;
return true; return true;
} }
return false; return false;
}, },
searchRoute(event) { searchRoute(event) {
@ -117,6 +120,7 @@ export default {
for (let route of this.routes) { for (let route of this.routes) {
let filteredItems = FilterService.filter(route.children, ['to', 'href'], query, FilterMatchMode.CONTAINS); let filteredItems = FilterService.filter(route.children, ['to', 'href'], query, FilterMatchMode.CONTAINS);
if (filteredItems && filteredItems.length) { if (filteredItems && filteredItems.length) {
filteredRoutes.push({ name: route.name, children: filteredItems }); filteredRoutes.push({ name: route.name, children: filteredItems });
} }

151
layouts/AppTopBar.vue
View File

@ -3,9 +3,9 @@
<a class="menu-button" @click="$emit('menubutton-click')"> <a class="menu-button" @click="$emit('menubutton-click')">
<i class="pi pi-bars"></i> <i class="pi pi-bars"></i>
</a> </a>
<!-- <div class="app-theme" v-tooltip.bottom="$appState.theme"> <div v-tooltip.bottom="$appState.theme" class="app-theme">
<img :src="'/demo/images/themes/' + logoMap[$appState.theme]" /> <img :src="'demo/images/themes/' + logoMap[$appState.theme]" />
</div> --> </div>
<ul ref="topbarMenu" class="topbar-menu"> <ul ref="topbarMenu" class="topbar-menu">
<li class="topbar-submenu"> <li class="topbar-submenu">
<a tabindex="0" @click="toggleMenu($event, 0)"> <a tabindex="0" @click="toggleMenu($event, 0)">
@ -15,155 +15,155 @@
<ul v-show="activeMenuIndex === 0"> <ul v-show="activeMenuIndex === 0">
<li class="topbar-submenu-header">THEMING</li> <li class="topbar-submenu-header">THEMING</li>
<li> <li>
<nuxt-link to="/theming"><i class="pi pi-fw pi-file" /><span>Guide</span></nuxt-link> <router-link to="/theming"><i class="pi pi-fw pi-file" /><span>Guide</span></router-link>
</li> </li>
<li> <li>
<nuxt-link to="https://www.primefaces.org/designer/primevue"><i class="pi pi-fw pi-palette" /><span>Designer</span></nuxt-link> <a href="https://www.primefaces.org/designer/primevue"><i class="pi pi-fw pi-palette" /><span>Designer</span></a>
</li> </li>
<li> <li>
<nuxt-link to="https://www.primefaces.org/designer-vue"><i class="pi pi-fw pi-desktop" /><span>Visual Editor</span></nuxt-link> <a href="https://www.primefaces.org/designer-vue"><i class="pi pi-fw pi-desktop" /><span>Visual Editor</span></a>
</li> </li>
<li> <li>
<nuxt-link to="/icons"><i class="pi pi-fw pi-info-circle" /><span>Icons</span></nuxt-link> <router-link to="/icons"><i class="pi pi-fw pi-info-circle" /><span>Icons</span></router-link>
</li> </li>
<li> <li>
<nuxt-link to="https://www.figma.com/community/file/890589747170608208/PrimeOne-Design-Library"><i class="pi pi-fw pi-pencil" /><span>Figma UI Kit</span></nuxt-link> <a href="https://www.figma.com/community/file/890589747170608208/PrimeOne-Design-Library"><i class="pi pi-fw pi-pencil" /><span>Figma UI Kit</span></a>
</li> </li>
<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,67 +174,63 @@
<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>
<nuxt-link to="https://www.primefaces.org/sakai-vue"><img src="@/assets/images/layouts/themeswitcher-sakai.svg" alt="Sakai" /><span>Sakai</span></nuxt-link> <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>
<nuxt-link to="https://www.primefaces.org/layouts/atlantis-vue"><img src="@/assets/images/layouts/themeswitcher-atlantis.svg" alt="Atlantis" /><span>Atlantis</span></nuxt-link> <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>
<nuxt-link to="https://www.primefaces.org/layouts/freya-vue"><img src="@/assets/images/layouts/themeswitcher-freya.png" alt="Freya" /><span>Freya</span></nuxt-link> <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>
<nuxt-link to="https://www.primefaces.org/layouts/diamond-vue"><img src="@/assets/images/layouts/themeswitcher-diamond.png" alt="Diamond" /><span>Diamond</span></nuxt-link> <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>
<nuxt-link to="https://www.primefaces.org/layouts/verona-vue"><img src="@/assets/images/layouts/themeswitcher-verona.png" alt="Verona" /><span>Verona</span></nuxt-link> <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>
<nuxt-link to="https://www.primefaces.org/layouts/poseidon-vue"><img src="@/assets/images/layouts/themeswitcher-poseidon.svg" alt="Poseidon" /><span>Poseidon</span></nuxt-link> <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>
<nuxt-link to="https://www.primefaces.org/layouts/sapphire-vue" <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>
><img src="@/assets/images/layouts/themeswitcher-sapphire.png" alt="Sapphire" /><span>Sapphire</span><span class="theme-badge material">material</span></nuxt-link
>
</li> </li>
<li> <li>
<nuxt-link to="https://www.primefaces.org/layouts/serenity-vue" <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>
><img src="@/assets/images/layouts/themeswitcher-serenity.png" alt="Serenity" /><span>Serenity</span><span class="theme-badge material">material</span></nuxt-link
>
</li> </li>
<li> <li>
<nuxt-link to="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></nuxt-link> <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>
<nuxt-link to="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></nuxt-link> <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>
<nuxt-link to="https://www.primefaces.org/layouts/babylon-vue"><img src="@/assets/images/layouts/themeswitcher-babylon.png" alt="Babylon" /><span>Babylon</span></nuxt-link> <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>
<nuxt-link to="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></nuxt-link> <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>
<nuxt-link to="https://www.primefaces.org/layouts/roma-vue"><img src="@/assets/images/layouts/themeswitcher-roma.jpg" alt="Roma" /><span>Roma</span></nuxt-link> <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>
<nuxt-link to="https://www.primefaces.org/layouts/prestige-vue"><img src="@/assets/images/layouts/themeswitcher-prestige.png" alt="Prestige" /><span>Prestige</span></nuxt-link> <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>
</li> </li>
<li class="topbar-submenu topbar-resources-submenu"> <li class="topbar-submenu topbar-resources-submenu">
<nuxt-link to="https://www.primefaces.org/primeblocks-vue/#/" target="_blank"><span>Blocks</span></nuxt-link> <a href="https://www.primefaces.org/primeblocks-vue/#/" target="_blank"><span>Blocks</span></a>
</li> </li>
<li class="topbar-submenu"> <li class="topbar-submenu">
<a tabindex="0" @click="toggleMenu($event, 3)">v3.16.2</a> <a tabindex="0" @click="toggleMenu($event, 3)">v3.21.0</a>
<transition name="p-connected-overlay" @enter="onMenuEnter"> <transition name="p-connected-overlay" @enter="onMenuEnter">
<ul v-show="activeMenuIndex === 3" style="width: 100%"> <ul v-show="activeMenuIndex === 3" style="width: 100%">
<li> <li>
<nuxt-link to="/"><span class="m-0">v3.16.2</span></nuxt-link> <router-link to="/"><span class="m-0">v3.21.0</span></router-link>
</li> </li>
<li> <li>
<nuxt-link to="https://www.primefaces.org/primevue-v2"><span class="m-0">v2.10.0</span></nuxt-link> <a href="https://www.primefaces.org/primevue-v2"><span class="m-0">v2.10.1</span></a>
</li> </li>
</ul> </ul>
</transition> </transition>
@ -244,16 +240,12 @@
</template> </template>
<script> <script>
import EventBus from './AppEventBus'; import EventBus from '@/layouts/AppEventBus';
export default { export default {
emits: ['menubutton-click'],
outsideClickListener: null, outsideClickListener: null,
darkDemoStyle: null, darkDemoStyle: null,
watch: {
$route() {
this.activeMenuIndex = null;
}
},
data() { data() {
return { return {
activeMenuIndex: null, activeMenuIndex: null,
@ -310,6 +302,11 @@ export default {
} }
}; };
}, },
watch: {
$route() {
this.activeMenuIndex = null;
}
},
scrollListener: null, scrollListener: null,
container: null, container: null,
mounted() { mounted() {
@ -342,6 +339,7 @@ export default {
}; };
} }
} }
window.addEventListener('scroll', this.scrollListener); window.addEventListener('scroll', this.scrollListener);
}, },
unbindScrollListener() { unbindScrollListener() {
@ -358,6 +356,7 @@ export default {
this.unbindOutsideClickListener(); this.unbindOutsideClickListener();
} }
}; };
document.addEventListener('click', this.outsideClickListener); document.addEventListener('click', this.outsideClickListener);
} }
}, },