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

Removed code duplication and get baseURL from nuxt runtime

pull/3449/head
Cagatay Civici 2022-12-27 23:54:26 +03:00
parent 0c840beded
commit 06df25c7cc
34 changed files with 215 additions and 244 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
layouts/AppMenu.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div :class="['layout-sidebar', { active: active }]"> <div :class="['layout-sidebar', { active: active }]">
<router-link to="/" class="logo"> <router-link to="/" class="logo">
<img :src="baseUrl + 'demo/images/primevue-logo-' + `${$appState.darkTheme ? 'light' : 'dark'}` + '.svg'" alt="primevue logo" /> <img :src="$config.public.contextPath + 'demo/images/primevue-logo-' + `${$appState.darkTheme ? 'light' : 'dark'}` + '.svg'" alt="primevue logo" />
</router-link> </router-link>
<div class="layout-sidebar-filter p-fluid"> <div class="layout-sidebar-filter p-fluid">
<AutoComplete <AutoComplete
@ -79,8 +79,7 @@ export default {
menu: menudata.data, menu: menudata.data,
filteredRoutes: null, filteredRoutes: null,
selectedRoute: null, selectedRoute: null,
routes: [], routes: []
baseUrl: process.dev ? '/' : '/primevue-nuxt/'
}; };
}, },
mounted() { mounted() {

85
layouts/AppTopBar.vue
View File

@ -4,7 +4,7 @@
<i class="pi pi-bars"></i> <i class="pi pi-bars"></i>
</a> </a>
<div v-tooltip.bottom="$appState.theme" class="app-theme"> <div v-tooltip.bottom="$appState.theme" class="app-theme">
<img :src="baseUrl + 'demo/images/themes/' + logoMap[$appState.theme]" /> <img :src="$config.public.contextPath + '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">
@ -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="baseUrl + 'demo/images/themes/bootstrap4-light-blue.svg'" alt="Blue Light" /><span>Blue Light</span></a> <a @click="changeTheme($event, 'bootstrap4-light-blue')"><img :src="$config.public.contextPath + '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="baseUrl + 'demo/images/themes/bootstrap4-light-purple.svg'" alt="Purple Light" /><span>Purple Light</span></a> <a @click="changeTheme($event, 'bootstrap4-light-purple')"><img :src="$config.public.contextPath + '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="baseUrl + 'demo/images/themes/bootstrap4-dark-blue.svg'" alt="Blue Dark" /><span>Blue Dark</span></a> <a @click="changeTheme($event, 'bootstrap4-dark-blue', true)"><img :src="$config.public.contextPath + '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="baseUrl + 'demo/images/themes/bootstrap4-dark-purple.svg'" alt="Purple Dark" /><span>Purple Dark</span></a> <a @click="changeTheme($event, 'bootstrap4-dark-purple', true)"><img :src="$config.public.contextPath + '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="baseUrl + 'demo/images/themes/md-light-indigo.svg'" alt="Indigo Light" /><span>Indigo Light</span></a> <a @click="changeTheme($event, 'md-light-indigo')"><img :src="$config.public.contextPath + '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="baseUrl + 'demo/images/themes/md-light-deeppurple.svg'" alt="Deep Purple Light" /><span>Deep Purple Light</span></a> <a @click="changeTheme($event, 'md-light-deeppurple')"><img :src="$config.public.contextPath + '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="baseUrl + 'demo/images/themes/md-dark-indigo.svg'" alt="Indigo Dark" /><span>Indigo Dark</span></a> <a @click="changeTheme($event, 'md-dark-indigo', true)"><img :src="$config.public.contextPath + '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="baseUrl + 'demo/images/themes/md-dark-deeppurple.svg'" alt="Deep Purple Dark" /><span>Deep Purple Dark</span></a> <a @click="changeTheme($event, 'md-dark-deeppurple', true)"><img :src="$config.public.contextPath + '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="baseUrl + 'demo/images/themes/md-light-indigo.svg'" alt="Indigo Light" /><span>Indigo Light</span></a> <a @click="changeTheme($event, 'mdc-light-indigo')"><img :src="$config.public.contextPath + '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="baseUrl + 'demo/images/themes/md-light-deeppurple.svg'" alt="Deep Purple Light" /><span>Deep Purple Light</span></a> <a @click="changeTheme($event, 'mdc-light-deeppurple')"><img :src="$config.public.contextPath + '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="baseUrl + 'demo/images/themes/md-dark-indigo.svg'" alt="Indigo Dark" /><span>Indigo Dark</span></a> <a @click="changeTheme($event, 'mdc-dark-indigo', true)"><img :src="$config.public.contextPath + '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="baseUrl + 'demo/images/themes/md-dark-deeppurple.svg'" alt="Deep Purple Dark" /><span>Deep Purple Dark</span></a> <a @click="changeTheme($event, 'mdc-dark-deeppurple', true)"><img :src="$config.public.contextPath + '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="baseUrl + 'demo/images/themes/tailwind-light.png'" alt="Tailwind Light" /><span>Tailwind Light</span></a> <a @click="changeTheme($event, 'tailwind-light')"><img :src="$config.public.contextPath + '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="baseUrl + 'demo/images/themes/fluent-light.png'" alt="Fluent Light" /><span>Fluent Light</span></a> <a @click="changeTheme($event, 'fluent-light')"><img :src="$config.public.contextPath + '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="baseUrl + 'demo/images/themes/lara-light-indigo.png'" alt="Lara Light Indigo" /><span>Lara Light Indigo</span></a> <a @click="changeTheme($event, 'lara-light-indigo')"><img :src="$config.public.contextPath + '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="baseUrl + 'demo/images/themes/lara-light-blue.png'" alt="Lara Light Blue" /><span>Lara Light Blue</span></a> <a @click="changeTheme($event, 'lara-light-blue')"><img :src="$config.public.contextPath + '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="baseUrl + 'demo/images/themes/lara-light-purple.png'" alt="Lara Light Purple" /><span>Lara Light Purple</span></a> <a @click="changeTheme($event, 'lara-light-purple')"><img :src="$config.public.contextPath + '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="baseUrl + 'demo/images/themes/lara-light-teal.png'" alt="Lara Light Teal" /><span>Lara Light Teal</span></a> <a @click="changeTheme($event, 'lara-light-teal')"><img :src="$config.public.contextPath + '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="baseUrl + 'demo/images/themes/lara-dark-blue.png'" alt="Lara Dark Blue" /><span>Lara Dark Blue</span></a> <a @click="changeTheme($event, 'lara-dark-blue')"><img :src="$config.public.contextPath + '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="baseUrl + 'demo/images/themes/lara-dark-indigo.png'" alt="Lara Dark Indigo" /><span>Lara Dark Indigo</span></a> <a @click="changeTheme($event, 'lara-dark-indigo')"><img :src="$config.public.contextPath + '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="baseUrl + 'demo/images/themes/lara-dark-purple.png'" alt="Lara Dark Purple" /><span>Lara Dark Purple</span></a> <a @click="changeTheme($event, 'lara-dark-purple')"><img :src="$config.public.contextPath + '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="baseUrl + 'demo/images/themes/lara-dark-teal.png'" alt="Lara Dark Teal" /><span>Lara Dark Teal</span></a> <a @click="changeTheme($event, 'lara-dark-teal')"><img :src="$config.public.contextPath + '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="baseUrl + 'demo/images/themes/saga-blue.png'" alt="Saga Blue" /><span>Saga Blue</span></a> <a @click="changeTheme($event, 'saga-blue')"><img :src="$config.public.contextPath + '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="baseUrl + 'demo/images/themes/saga-green.png'" alt="Saga Green" /><span>Saga Green</span></a> <a @click="changeTheme($event, 'saga-green')"><img :src="$config.public.contextPath + '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="baseUrl + 'demo/images/themes/saga-orange.png'" alt="Saga Orange" /><span>Saga Orange</span></a> <a @click="changeTheme($event, 'saga-orange')"><img :src="$config.public.contextPath + '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="baseUrl + 'demo/images/themes/saga-purple.png'" alt="Saga Purple" /><span>Saga Purple</span></a> <a @click="changeTheme($event, 'saga-purple')"><img :src="$config.public.contextPath + '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="baseUrl + 'demo/images/themes/vela-blue.png'" alt="Vela Blue" /><span>Vela Blue</span></a> <a @click="changeTheme($event, 'vela-blue', true)"><img :src="$config.public.contextPath + '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="baseUrl + 'demo/images/themes/vela-green.png'" alt="Vela Green" /><span>Vela Green</span></a> <a @click="changeTheme($event, 'vela-green', true)"><img :src="$config.public.contextPath + '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="baseUrl + 'demo/images/themes/vela-orange.png'" alt="Vela Orange" /><span>Vela Orange</span></a> <a @click="changeTheme($event, 'vela-orange', true)"><img :src="$config.public.contextPath + '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="baseUrl + 'demo/images/themes/vela-purple.png'" alt="Vela Purple" /><span>Vela Purple</span></a> <a @click="changeTheme($event, 'vela-purple', true)"><img :src="$config.public.contextPath + '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="baseUrl + 'demo/images/themes/arya-blue.png'" alt="Arya Blue" /><span>Arya Blue</span></a> <a @click="changeTheme($event, 'arya-blue', true)"><img :src="$config.public.contextPath + '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="baseUrl + 'demo/images/themes/arya-green.png'" alt="Arya Green" /><span>Arya Green</span></a> <a @click="changeTheme($event, 'arya-green', true)"><img :src="$config.public.contextPath + '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="baseUrl + 'demo/images/themes/arya-orange.png'" alt="Arya Orange" /><span>Arya Orange</span></a> <a @click="changeTheme($event, 'arya-orange', true)"><img :src="$config.public.contextPath + '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="baseUrl + 'demo/images/themes/arya-purple.png'" alt="Arya Purple" /><span>Arya Purple</span></a> <a @click="changeTheme($event, 'arya-purple', true)"><img :src="$config.public.contextPath + '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="baseUrl + 'demo/images/themes/soho-light.png'" alt="Soho Light" /><span>Soho Light</span></a> <a @click="changeTheme($event, 'soho-light')"><img :src="$config.public.contextPath + '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="baseUrl + 'demo/images/themes/soho-dark.png'" alt="Soho Dark" /><span>Soho Dark</span></a> <a @click="changeTheme($event, 'soho-dark', true)"><img :src="$config.public.contextPath + '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="baseUrl + 'demo/images/themes/viva-light.svg'" alt="Viva Light" /><span>Viva Light</span></a> <a @click="changeTheme($event, 'viva-light')"><img :src="$config.public.contextPath + '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="baseUrl + 'demo/images/themes/viva-dark.svg'" alt="Viva Dark" /><span>Viva Dark</span></a> <a @click="changeTheme($event, 'viva-dark', true)"><img :src="$config.public.contextPath + '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="baseUrl + 'demo/images/themes/mira.jpg'" alt="Mira" /><span>Mira</span></a> <a @click="changeTheme($event, 'mira')"><img :src="$config.public.contextPath + 'demo/images/themes/mira.jpg'" alt="Mira" /><span>Mira</span></a>
</li> </li>
<li> <li>
<a @click="changeTheme($event, 'nano')"><img :src="baseUrl + 'demo/images/themes/nano.jpg'" alt="Nano" /><span>Nano</span></a> <a @click="changeTheme($event, 'nano')"><img :src="$config.public.contextPath + 'demo/images/themes/nano.jpg'" alt="Nano" /><span>Nano</span></a>
</li> </li>
</ul> </ul>
</transition> </transition>
@ -299,8 +299,7 @@ export default {
'lara-light-purple': 'lara-light-purple.png', 'lara-light-purple': 'lara-light-purple.png',
'lara-light-teal': 'lara-light-teal.png', 'lara-light-teal': 'lara-light-teal.png',
'lara-light-blue': 'lara-light-blue.png' 'lara-light-blue': 'lara-light-blue.png'
}, }
baseUrl: process.dev ? '/' : '/primevue-nuxt/'
}; };
}, },
watch: { watch: {

7
nuxt.config.js
View File

@ -1,7 +1,7 @@
import vueJsx from '@vitejs/plugin-vue-jsx'; import vueJsx from '@vitejs/plugin-vue-jsx';
import path from 'path'; import path from 'path';
const baseUrl = process.env.NODE_ENV === 'production' ? '/primevue-nuxt/' : '/'; const baseUrl = process.env.NODE_ENV === 'production' ? '/primevue/' : '/';
// https://v3.nuxtjs.org/api/configuration/nuxt.config // https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({ export default defineNuxtConfig({
@ -63,6 +63,11 @@ export default defineNuxtConfig({
] ]
} }
}, },
runtimeConfig: {
public: {
contextPath: baseUrl
}
},
css: ['@/assets/styles/primevue.css', '/node_modules/primeflex/primeflex.css', '/node_modules/primeicons/primeicons.css', '@/assets/styles/flags.css'], css: ['@/assets/styles/primevue.css', '/node_modules/primeflex/primeflex.css', '/node_modules/primeicons/primeicons.css', '@/assets/styles/flags.css'],
vite: { vite: {
plugins: [vueJsx()], plugins: [vueJsx()],

23
pages/avatar/index.vue
View File

@ -72,9 +72,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="baseUrl + 'demo/images/avatar/amyelsner.png'" class="mr-2" size="xlarge" shape="circle" /> <Avatar :image="$config.public.contextPath + 'demo/images/avatar/amyelsner.png'" class="mr-2" size="xlarge" shape="circle" />
<Avatar :image="baseUrl + 'demo/images/avatar/asiyajavayant.png'" class="mr-2" size="large" shape="circle" /> <Avatar :image="$config.public.contextPath + 'demo/images/avatar/asiyajavayant.png'" class="mr-2" size="large" shape="circle" />
<Avatar :image="baseUrl + 'demo/images/avatar/onyamalimba.png'" class="mr-2" shape="circle" /> <Avatar :image="$config.public.contextPath + 'demo/images/avatar/onyamalimba.png'" class="mr-2" shape="circle" />
</div> </div>
</div> </div>
@ -82,11 +82,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="baseUrl + 'demo/images/avatar/amyelsner.png'" size="large" shape="circle" /> <Avatar :image="$config.public.contextPath + 'demo/images/avatar/amyelsner.png'" size="large" shape="circle" />
<Avatar :image="baseUrl + 'demo/images/avatar/asiyajavayant.png'" size="large" shape="circle" /> <Avatar :image="$config.public.contextPath + 'demo/images/avatar/asiyajavayant.png'" size="large" shape="circle" />
<Avatar :image="baseUrl + 'demo/images/avatar/onyamalimba.png'" size="large" shape="circle" /> <Avatar :image="$config.public.contextPath + 'demo/images/avatar/onyamalimba.png'" size="large" shape="circle" />
<Avatar :image="baseUrl + 'demo/images/avatar/ionibowcher.png'" size="large" shape="circle" /> <Avatar :image="$config.public.contextPath + 'demo/images/avatar/ionibowcher.png'" size="large" shape="circle" />
<Avatar :image="baseUrl + 'demo/images/avatar/xuxuefeng.png'" size="large" shape="circle" /> <Avatar :image="$config.public.contextPath + '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>
@ -95,7 +95,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="baseUrl + 'demo/images/organization/walter.jpg'" size="xlarge" /> <Avatar v-badge.danger="4" :image="$config.public.contextPath + 'demo/images/organization/walter.jpg'" size="xlarge" />
</div> </div>
</div> </div>
</div> </div>
@ -109,11 +109,6 @@
import AvatarDoc from './AvatarDoc'; import AvatarDoc from './AvatarDoc';
export default { export default {
data() {
return {
baseUrl: process.dev ? '/' : '/primevue-nuxt/'
};
},
components: { components: {
AvatarDoc: AvatarDoc AvatarDoc: AvatarDoc
} }

9
pages/carousel/index.vue
View File

@ -23,7 +23,7 @@
<div class="product-item"> <div class="product-item">
<div class="product-item-content"> <div class="product-item-content">
<div class="mb-3"> <div class="mb-3">
<img :src="baseUrl + 'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" /> <img :src="$config.public.contextPath + 'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
</div> </div>
<div> <div>
<h4 class="mb-1">{{ slotProps.data.name }}</h4> <h4 class="mb-1">{{ slotProps.data.name }}</h4>
@ -50,7 +50,7 @@
<div class="product-item"> <div class="product-item">
<div class="product-item-content"> <div class="product-item-content">
<div class="mb-3"> <div class="mb-3">
<img :src="baseUrl + 'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" /> <img :src="$config.public.contextPath + 'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
</div> </div>
<div> <div>
<h4 class="mb-1">{{ slotProps.data.name }}</h4> <h4 class="mb-1">{{ slotProps.data.name }}</h4>
@ -77,7 +77,7 @@
<div class="product-item"> <div class="product-item">
<div class="product-item-content"> <div class="product-item-content">
<div class="mb-3"> <div class="mb-3">
<img :src="baseUrl + 'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" /> <img :src="$config.public.contextPath + 'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
</div> </div>
<div> <div>
<h4 class="mb-1">{{ slotProps.data.name }}</h4> <h4 class="mb-1">{{ slotProps.data.name }}</h4>
@ -124,8 +124,7 @@ export default {
numVisible: 1, numVisible: 1,
numScroll: 1 numScroll: 1
} }
], ]
baseUrl: process.dev ? '/' : '/primevue-nuxt/'
}; };
}, },
productService: null, productService: null,

17
pages/chip/index.vue
View File

@ -33,18 +33,18 @@
<h5>Image</h5> <h5>Image</h5>
<div class="flex align-items-center"> <div class="flex align-items-center">
<Chip label="Amy Elsner" :image="baseUrl + 'demo/images/avatar/amyelsner.png'" class="mr-2" /> <Chip label="Amy Elsner" :image="$config.public.contextPath + 'demo/images/avatar/amyelsner.png'" class="mr-2" />
<Chip label="Asiya Javayant" :image="baseUrl + 'demo/images/avatar/asiyajavayant.png'" class="mr-2" /> <Chip label="Asiya Javayant" :image="$config.public.contextPath + 'demo/images/avatar/asiyajavayant.png'" class="mr-2" />
<Chip label="Onyama Limba" :image="baseUrl + 'demo/images/avatar/onyamalimba.png'" class="mr-2" /> <Chip label="Onyama Limba" :image="$config.public.contextPath + 'demo/images/avatar/onyamalimba.png'" class="mr-2" />
<Chip label="Xuxue Feng" :image="baseUrl + 'demo/images/avatar/xuxuefeng.png'" removable /> <Chip label="Xuxue Feng" :image="$config.public.contextPath + '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="baseUrl + 'demo/images/avatar/onyamalimba.png'" class="mr-2 custom-chip" /> <Chip label="Onyama Limba" :image="$config.public.contextPath + 'demo/images/avatar/onyamalimba.png'" class="mr-2 custom-chip" />
<Chip label="Xuxue Feng" :image="baseUrl + 'demo/images/avatar/xuxuefeng.png'" class="custom-chip" removable /> <Chip label="Xuxue Feng" :image="$config.public.contextPath + 'demo/images/avatar/xuxuefeng.png'" class="custom-chip" removable />
</div> </div>
</div> </div>
</div> </div>
@ -57,11 +57,6 @@
import ChipDoc from './ChipDoc'; import ChipDoc from './ChipDoc';
export default { export default {
data() {
return {
baseUrl: process.dev ? '/' : '/primevue-nuxt/'
};
},
components: { components: {
ChipDoc: ChipDoc ChipDoc: ChipDoc
} }

5
pages/datatable/Crud.vue
View File

@ -50,7 +50,7 @@
<Column field="name" header="Name" :sortable="true" style="min-width: 16rem"></Column> <Column field="name" header="Name" :sortable="true" style="min-width: 16rem"></Column>
<Column header="Image"> <Column header="Image">
<template #body="slotProps"> <template #body="slotProps">
<img :src="baseUrl + 'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" /> <img :src="$config.public.contextPath + 'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" />
</template> </template>
</Column> </Column>
<Column field="price" header="Price" :sortable="true" style="min-width: 8rem"> <Column field="price" header="Price" :sortable="true" style="min-width: 8rem">
@ -1170,8 +1170,7 @@ export default {
</style> </style>
` `
} }
}, }
baseUrl: process.dev ? '/' : '/primevue-nuxt/'
}; };
}, },
productService: null, productService: null,

11
pages/datatable/Filter.vue
View File

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

5
pages/datatable/RowExpand.vue
View File

@ -21,7 +21,7 @@
<Column field="name" header="Name" sortable></Column> <Column field="name" header="Name" sortable></Column>
<Column header="Image"> <Column header="Image">
<template #body="slotProps"> <template #body="slotProps">
<img :src="baseUrl + 'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" /> <img :src="$config.public.contextPath + 'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" />
</template> </template>
</Column> </Column>
<Column field="price" header="Price" sortable> <Column field="price" header="Price" sortable>
@ -450,8 +450,7 @@ export default {
</style> </style>
` `
} }
}, }
baseUrl: process.dev ? '/' : '/primevue-nuxt/'
}; };
}, },
productService: null, productService: null,

9
pages/datatable/RowGroup.vue
View File

@ -29,7 +29,7 @@
</Column> </Column>
<Column field="date" header="Date" style="min-width: 200px"></Column> <Column field="date" header="Date" style="min-width: 200px"></Column>
<template #groupheader="slotProps"> <template #groupheader="slotProps">
<img :alt="slotProps.data.representative.name" :src="baseUrl + 'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" /> <img :alt="slotProps.data.representative.name" :src="$config.public.contextPath + 'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
<span class="image-text">{{ slotProps.data.representative.name }}</span> <span class="image-text">{{ slotProps.data.representative.name }}</span>
</template> </template>
<template #groupfooter="slotProps"> <template #groupfooter="slotProps">
@ -73,7 +73,7 @@
</Column> </Column>
<Column field="date" header="Date"></Column> <Column field="date" header="Date"></Column>
<template #groupheader="slotProps"> <template #groupheader="slotProps">
<img :alt="slotProps.data.representative.name" :src="baseUrl + 'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" /> <img :alt="slotProps.data.representative.name" :src="$config.public.contextPath + 'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
<span class="image-text">{{ slotProps.data.representative.name }}</span> <span class="image-text">{{ slotProps.data.representative.name }}</span>
</template> </template>
<template #groupfooter="slotProps"> <template #groupfooter="slotProps">
@ -93,7 +93,7 @@
</Column> </Column>
<Column field="representative.name" header="Representative"> <Column field="representative.name" header="Representative">
<template #body="slotProps"> <template #body="slotProps">
<img :alt="baseUrl + slotProps.data.representative.name" :src="baseUrl + 'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" /> <img :alt="$config.public.contextPath + slotProps.data.representative.name" :src="$config.public.contextPath + 'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
<span class="image-text">{{ slotProps.data.representative.name }}</span> <span class="image-text">{{ slotProps.data.representative.name }}</span>
</template> </template>
</Column> </Column>
@ -631,8 +631,7 @@ export default {
</style> </style>
` `
} }
}, }
baseUrl: process.dev ? '/' : '/primevue-nuxt/'
}; };
}, },
customerService: null, customerService: null,

5
pages/datatable/Scroll.vue
View File

@ -116,7 +116,7 @@
</Column> </Column>
<Column field="date" header="Date" style="min-width: 200px"></Column> <Column field="date" header="Date" style="min-width: 200px"></Column>
<template #groupheader="slotProps"> <template #groupheader="slotProps">
<img :alt="slotProps.data.representative.name" :src="baseUrl + 'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" /> <img :alt="slotProps.data.representative.name" :src="$config.public.contextPath + 'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
<span class="image-text">{{ slotProps.data.representative.name }}</span> <span class="image-text">{{ slotProps.data.representative.name }}</span>
</template> </template>
<template #groupfooter="slotProps"> <template #groupfooter="slotProps">
@ -825,8 +825,7 @@ export default {
</style> </style>
` `
} }
}, }
baseUrl: process.dev ? '/' : '/primevue-nuxt/'
}; };
}, },
customerService: null, customerService: null,

11
pages/datatable/State.vue
View File

@ -45,14 +45,14 @@
</Column> </Column>
<Column header="Representative" :sortable="true" sortField="representative.name" filterField="representative.name" filterMatchMode="in" style="width: 25%"> <Column header="Representative" :sortable="true" sortField="representative.name" filterField="representative.name" filterMatchMode="in" style="width: 25%">
<template #body="slotProps"> <template #body="slotProps">
<img :alt="slotProps.data.representative.name" :src="baseUrl + 'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" /> <img :alt="slotProps.data.representative.name" :src="$config.public.contextPath + 'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
<span class="image-text">{{ slotProps.data.representative.name }}</span> <span class="image-text">{{ slotProps.data.representative.name }}</span>
</template> </template>
<template #filter> <template #filter>
<MultiSelect v-model="filters1['representative.name']" :options="representatives" optionLabel="name" optionValue="name" placeholder="All" class="p-column-filter"> <MultiSelect v-model="filters1['representative.name']" :options="representatives" optionLabel="name" optionValue="name" placeholder="All" class="p-column-filter">
<template #option="slotProps"> <template #option="slotProps">
<div class="p-multiselect-representative-option"> <div class="p-multiselect-representative-option">
<img :alt="slotProps.option.name" :src="baseUrl + 'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" /> <img :alt="slotProps.option.name" :src="$config.public.contextPath + 'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
<span class="image-text">{{ slotProps.option.name }}</span> <span class="image-text">{{ slotProps.option.name }}</span>
</div> </div>
</template> </template>
@ -111,14 +111,14 @@
</Column> </Column>
<Column header="Representative" :sortable="true" sortField="representative.name" filterField="representative.name" filterMatchMode="in" style="width: 25%"> <Column header="Representative" :sortable="true" sortField="representative.name" filterField="representative.name" filterMatchMode="in" style="width: 25%">
<template #body="slotProps"> <template #body="slotProps">
<img :alt="slotProps.data.representative.name" :src="baseUrl + 'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" /> <img :alt="slotProps.data.representative.name" :src="$config.public.contextPath + 'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
<span class="image-text">{{ slotProps.data.representative.name }}</span> <span class="image-text">{{ slotProps.data.representative.name }}</span>
</template> </template>
<template #filter> <template #filter>
<MultiSelect v-model="filters2['representative.name']" :options="representatives" optionLabel="name" optionValue="name" placeholder="All" class="p-column-filter"> <MultiSelect v-model="filters2['representative.name']" :options="representatives" optionLabel="name" optionValue="name" placeholder="All" class="p-column-filter">
<template #option="slotProps"> <template #option="slotProps">
<div class="p-multiselect-representative-option"> <div class="p-multiselect-representative-option">
<img :alt="slotProps.option.name" :src="baseUrl + 'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" /> <img :alt="slotProps.option.name" :src="$config.public.contextPath + 'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
<span class="image-text">{{ slotProps.option.name }}</span> <span class="image-text">{{ slotProps.option.name }}</span>
</div> </div>
</template> </template>
@ -694,8 +694,7 @@ export default {
<\\/script> <\\/script>
` `
} }
}, }
baseUrl: process.dev ? '/' : '/primevue-nuxt/'
}; };
}, },
customerService: null, customerService: null,

5
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="baseUrl + 'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" /> <img :src="$config.public.contextPath + '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">
@ -295,8 +295,7 @@ export default {
</style> </style>
` `
} }
}, }
baseUrl: process.dev ? '/' : '/primevue-nuxt/'
}; };
}, },
productService: null, productService: null,

7
pages/datatable/index.vue
View File

@ -63,7 +63,7 @@
</Column> </Column>
<Column header="Agent" sortable filterField="representative" sortField="representative.name" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem"> <Column header="Agent" sortable filterField="representative" sortField="representative.name" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
<template #body="{ data }"> <template #body="{ data }">
<img :alt="data.representative.name" :src="baseUrl + 'demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" /> <img :alt="data.representative.name" :src="$config.public.contextPath + 'demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
<span class="image-text">{{ data.representative.name }}</span> <span class="image-text">{{ data.representative.name }}</span>
</template> </template>
<template #filter="{ filterModel }"> <template #filter="{ filterModel }">
@ -71,7 +71,7 @@
<MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter"> <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
<template #option="slotProps"> <template #option="slotProps">
<div class="p-multiselect-representative-option"> <div class="p-multiselect-representative-option">
<img :alt="slotProps.option.name" :src="baseUrl + 'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" /> <img :alt="slotProps.option.name" :src="$config.public.contextPath + 'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
<span class="image-text">{{ slotProps.option.name }}</span> <span class="image-text">{{ slotProps.option.name }}</span>
</div> </div>
</template> </template>
@ -168,8 +168,7 @@ export default {
{ name: 'Stephen Shaw', image: 'stephenshaw.png' }, { name: 'Stephen Shaw', image: 'stephenshaw.png' },
{ name: 'XuXue Feng', image: 'xuxuefeng.png' } { name: 'XuXue Feng', image: 'xuxuefeng.png' }
], ],
statuses: ['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal'], statuses: ['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal']
baseUrl: process.dev ? '/' : '/primevue-nuxt/'
}; };
}, },
created() { created() {

7
pages/galleria/Advanced.vue
View File

@ -24,11 +24,11 @@
:transitionInterval="3000" :transitionInterval="3000"
> >
<template #item="slotProps"> <template #item="slotProps">
<img :src="baseUrl + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? 'block' : '' }]" /> <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? 'block' : '' }]" />
</template> </template>
<template #thumbnail="slotProps"> <template #thumbnail="slotProps">
<div class="grid grid-nogutter justify-content-center"> <div class="grid grid-nogutter justify-content-center">
<img :src="baseUrl + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" /> <img :src="$config.public.contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
</div> </div>
</template> </template>
<template #footer> <template #footer>
@ -243,8 +243,7 @@ export default {
images: null, images: null,
activeIndex: 0, activeIndex: 0,
showThumbnails: false, showThumbnails: false,
fullScreen: false, fullScreen: false
baseUrl: process.dev ? '' : '/primevue-nuxt'
}; };
}, },
galleriaService: null, galleriaService: null,

7
pages/galleria/AutoPlay.vue
View File

@ -11,10 +11,10 @@
<div class="card"> <div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px" :circular="true" :autoPlay="true" :transitionInterval="2000"> <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px" :circular="true" :autoPlay="true" :transitionInterval="2000">
<template #item="slotProps"> <template #item="slotProps">
<img :src="baseUrl + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" /> <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template> </template>
<template #thumbnail="slotProps"> <template #thumbnail="slotProps">
<img :src="baseUrl + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" /> <img :src="$config.public.contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
</template> </template>
</Galleria> </Galleria>
</div> </div>
@ -95,8 +95,7 @@ export default {
breakpoint: '560px', breakpoint: '560px',
numVisible: 1 numVisible: 1
} }
], ]
baseUrl: process.dev ? '' : '/primevue-nuxt'
}; };
}, },
galleriaService: null, galleriaService: null,

7
pages/galleria/Caption.vue
View File

@ -11,11 +11,11 @@
<div class="card"> <div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"> <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
<template #item="{ item }"> <template #item="{ item }">
<img :src="baseUrl + item.itemImageSrc" :alt="item.alt" style="width: 100%; display: block" /> <img :src="$config.public.contextPath + item.itemImageSrc" :alt="item.alt" style="width: 100%; display: block" />
</template> </template>
<template #thumbnail="{ item }"> <template #thumbnail="{ item }">
<div class="grid grid-nogutter justify-content-center"> <div class="grid grid-nogutter justify-content-center">
<img :src="baseUrl + item.thumbnailImageSrc" :alt="item.alt" style="display: block" /> <img :src="$config.public.contextPath + item.thumbnailImageSrc" :alt="item.alt" style="display: block" />
</div> </div>
</template> </template>
<template #caption="{ item }"> <template #caption="{ item }">
@ -106,8 +106,7 @@ export default {
breakpoint: '560px', breakpoint: '560px',
numVisible: 1 numVisible: 1
} }
], ]
baseUrl: process.dev ? '' : '/primevue-nuxt'
}; };
}, },
galleriaService: null, galleriaService: null,

17
pages/galleria/FullScreen.vue
View File

@ -12,10 +12,10 @@
<h5>With Thumbnails</h5> <h5>With Thumbnails</h5>
<Galleria v-model:visible="displayBasic" :value="images" :responsiveOptions="responsiveOptions2" :numVisible="9" containerStyle="max-width: 50%" :circular="true" :fullScreen="true" :showItemNavigators="true"> <Galleria v-model:visible="displayBasic" :value="images" :responsiveOptions="responsiveOptions2" :numVisible="9" containerStyle="max-width: 50%" :circular="true" :fullScreen="true" :showItemNavigators="true">
<template #item="slotProps"> <template #item="slotProps">
<img :src="baseUrl + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" /> <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template> </template>
<template #thumbnail="slotProps"> <template #thumbnail="slotProps">
<img :src="baseUrl + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" /> <img :src="$config.public.contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
</template> </template>
</Galleria> </Galleria>
@ -26,10 +26,10 @@
<h5>Without Thumbnails</h5> <h5>Without Thumbnails</h5>
<Galleria v-model:visible="displayBasic2" :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" containerStyle="max-width: 850px" :circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false"> <Galleria v-model:visible="displayBasic2" :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" containerStyle="max-width: 850px" :circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false">
<template #item="slotProps"> <template #item="slotProps">
<img :src="baseUrl + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" /> <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template> </template>
<template #thumbnail="slotProps"> <template #thumbnail="slotProps">
<img :src="baseUrl + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" /> <img :src="$config.public.contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
</template> </template>
</Galleria> </Galleria>
@ -51,16 +51,16 @@
:showThumbnails="false" :showThumbnails="false"
> >
<template #item="slotProps"> <template #item="slotProps">
<img :src="baseUrl + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" /> <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template> </template>
<template #thumbnail="slotProps"> <template #thumbnail="slotProps">
<img :src="baseUrl + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" /> <img :src="$config.public.contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
</template> </template>
</Galleria> </Galleria>
<div v-if="images" class="grid" style="max-width: 400px"> <div v-if="images" class="grid" style="max-width: 400px">
<div v-for="(image, index) of images" :key="index" class="col-3"> <div v-for="(image, index) of images" :key="index" class="col-3">
<img :src="baseUrl + image.thumbnailImageSrc" :alt="image.alt" style="cursor: pointer" @click="imageClick(index)" /> <img :src="$config.public.contextPath + image.thumbnailImageSrc" :alt="image.alt" style="cursor: pointer" @click="imageClick(index)" />
</div> </div>
</div> </div>
</div> </div>
@ -224,8 +224,7 @@ export default {
], ],
displayBasic: false, displayBasic: false,
displayBasic2: false, displayBasic2: false,
displayCustom: false, displayCustom: false
baseUrl: process.dev ? '' : '/primevue-nuxt'
}; };
}, },
galleriaService: null, galleriaService: null,

17
pages/galleria/Indicator.vue
View File

@ -12,7 +12,7 @@
<h5>Indicators with Click Event</h5> <h5>Indicators with Click Event</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false" :showIndicators="true"> <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false" :showIndicators="true">
<template #item="slotProps"> <template #item="slotProps">
<img :src="baseUrl + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" /> <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template> </template>
</Galleria> </Galleria>
</div> </div>
@ -21,7 +21,7 @@
<h5>Indicators with Hover Event</h5> <h5>Indicators with Hover Event</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true"> <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true">
<template #item="slotProps"> <template #item="slotProps">
<img :src="baseUrl + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" /> <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template> </template>
</Galleria> </Galleria>
</div> </div>
@ -30,7 +30,7 @@
<h5>Inside Content</h5> <h5>Inside Content</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true"> <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true">
<template #item="slotProps"> <template #item="slotProps">
<img :src="baseUrl + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" /> <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template> </template>
</Galleria> </Galleria>
</div> </div>
@ -49,7 +49,7 @@
indicatorsPosition="top" indicatorsPosition="top"
> >
<template #item="slotProps"> <template #item="slotProps">
<img :src="baseUrl + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" /> <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template> </template>
</Galleria> </Galleria>
</div> </div>
@ -68,7 +68,7 @@
indicatorsPosition="left" indicatorsPosition="left"
> >
<template #item="slotProps"> <template #item="slotProps">
<img :src="baseUrl + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" /> <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template> </template>
</Galleria> </Galleria>
</div> </div>
@ -87,7 +87,7 @@
indicatorsPosition="right" indicatorsPosition="right"
> >
<template #item="slotProps"> <template #item="slotProps">
<img :src="baseUrl + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" /> <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template> </template>
</Galleria> </Galleria>
</div> </div>
@ -107,7 +107,7 @@
indicatorsPosition="left" indicatorsPosition="left"
> >
<template #item="slotProps"> <template #item="slotProps">
<img :src="baseUrl + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" /> <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template> </template>
<template #indicator="{ index }"> <template #indicator="{ index }">
<span class="indicator-text"> <span class="indicator-text">
@ -265,8 +265,7 @@ export default {
breakpoint: '560px', breakpoint: '560px',
numVisible: 1 numVisible: 1
} }
], ]
baseUrl: process.dev ? '' : '/primevue-nuxt'
}; };
}, },
galleriaService: null, galleriaService: null,

19
pages/galleria/Navigator.vue
View File

@ -12,10 +12,10 @@
<h5>Item Navigators and Thumbnails</h5> <h5>Item Navigators and Thumbnails</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px" :showItemNavigators="true"> <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px" :showItemNavigators="true">
<template #item="slotProps"> <template #item="slotProps">
<img :src="baseUrl + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" /> <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template> </template>
<template #thumbnail="slotProps"> <template #thumbnail="slotProps">
<img :src="baseUrl + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" /> <img :src="$config.public.contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
</template> </template>
</Galleria> </Galleria>
</div> </div>
@ -24,10 +24,10 @@
<h5>Item Navigators without Thumbnails</h5> <h5>Item Navigators without Thumbnails</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px" :showItemNavigators="true" :showThumbnails="false"> <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px" :showItemNavigators="true" :showThumbnails="false">
<template #item="slotProps"> <template #item="slotProps">
<img :src="baseUrl + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" /> <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template> </template>
<template #thumbnail="slotProps"> <template #thumbnail="slotProps">
<img :src="baseUrl + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" /> <img :src="$config.public.contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
</template> </template>
</Galleria> </Galleria>
</div> </div>
@ -36,10 +36,10 @@
<h5>Item Navigators on Hover</h5> <h5>Item Navigators on Hover</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px" :showItemNavigators="true" :showItemNavigatorsOnHover="true"> <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px" :showItemNavigators="true" :showItemNavigatorsOnHover="true">
<template #item="slotProps"> <template #item="slotProps">
<img :src="baseUrl + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" /> <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template> </template>
<template #thumbnail="slotProps"> <template #thumbnail="slotProps">
<img :src="baseUrl + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" /> <img :src="$config.public.contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
</template> </template>
</Galleria> </Galleria>
</div> </div>
@ -58,10 +58,10 @@
:showIndicators="true" :showIndicators="true"
> >
<template #item="slotProps"> <template #item="slotProps">
<img :src="baseUrl + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" /> <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template> </template>
<template #thumbnail="slotProps"> <template #thumbnail="slotProps">
<img :src="baseUrl + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" /> <img :src="$config.public.contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
</template> </template>
</Galleria> </Galleria>
</div> </div>
@ -176,8 +176,7 @@ export default {
breakpoint: '560px', breakpoint: '560px',
numVisible: 1 numVisible: 1
} }
], ]
baseUrl: process.dev ? '' : '/primevue-nuxt'
}; };
}, },
galleriaService: null, galleriaService: null,

7
pages/galleria/Programmatic.vue
View File

@ -16,10 +16,10 @@
<Galleria v-model:activeIndex="activeIndex" :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"> <Galleria v-model:activeIndex="activeIndex" :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
<template #item="slotProps"> <template #item="slotProps">
<img :src="baseUrl + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" /> <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
</template> </template>
<template #thumbnail="slotProps"> <template #thumbnail="slotProps">
<img :src="baseUrl + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /> <img :src="$config.public.contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
</template> </template>
</Galleria> </Galleria>
</div> </div>
@ -114,8 +114,7 @@ export default {
breakpoint: '560px', breakpoint: '560px',
numVisible: 1 numVisible: 1
} }
], ]
baseUrl: process.dev ? '' : '/primevue-nuxt'
}; };
}, },
galleriaService: null, galleriaService: null,

7
pages/galleria/Responsive.vue
View File

@ -11,10 +11,10 @@
<div class="card"> <div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" :circular="true" style="max-width: 800px"> <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" :circular="true" style="max-width: 800px">
<template #item="slotProps"> <template #item="slotProps">
<img :src="baseUrl + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" /> <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template> </template>
<template #thumbnail="slotProps"> <template #thumbnail="slotProps">
<img :src="baseUrl + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" /> <img :src="$config.public.contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
</template> </template>
</Galleria> </Galleria>
</div> </div>
@ -102,8 +102,7 @@ export default {
breakpoint: '560px', breakpoint: '560px',
numVisible: 1 numVisible: 1
} }
], ]
baseUrl: process.dev ? '' : '/primevue-nuxt'
}; };
}, },
galleriaService: null, galleriaService: null,

19
pages/galleria/Thumbnail.vue
View File

@ -12,10 +12,10 @@
<h5>Positioned at Bottom</h5> <h5>Positioned at Bottom</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"> <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
<template #item="slotProps"> <template #item="slotProps">
<img :src="baseUrl + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" /> <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template> </template>
<template #thumbnail="slotProps"> <template #thumbnail="slotProps">
<img :src="baseUrl + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" /> <img :src="$config.public.contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
</template> </template>
</Galleria> </Galleria>
</div> </div>
@ -24,11 +24,11 @@
<h5>Positioned at Left</h5> <h5>Positioned at Left</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="left" containerStyle="max-width: 640px"> <Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="left" containerStyle="max-width: 640px">
<template #item="slotProps"> <template #item="slotProps">
<img :src="baseUrl + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" /> <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template> </template>
<template #thumbnail="slotProps"> <template #thumbnail="slotProps">
<div class="grid grid-nogutter justify-content-center"> <div class="grid grid-nogutter justify-content-center">
<img :src="baseUrl + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" /> <img :src="$config.public.contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
</div> </div>
</template> </template>
</Galleria> </Galleria>
@ -38,11 +38,11 @@
<h5>Positioned at Right</h5> <h5>Positioned at Right</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="right" containerStyle="max-width: 640px"> <Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="right" containerStyle="max-width: 640px">
<template #item="slotProps"> <template #item="slotProps">
<img :src="baseUrl + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" /> <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template> </template>
<template #thumbnail="slotProps"> <template #thumbnail="slotProps">
<div class="grid grid-nogutter justify-content-center"> <div class="grid grid-nogutter justify-content-center">
<img :src="baseUrl + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" /> <img :src="$config.public.contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
</div> </div>
</template> </template>
</Galleria> </Galleria>
@ -52,10 +52,10 @@
<h5>Positioned at Top</h5> <h5>Positioned at Top</h5>
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" thumbnailsPosition="top" containerStyle="max-width: 640px"> <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" thumbnailsPosition="top" containerStyle="max-width: 640px">
<template #item="slotProps"> <template #item="slotProps">
<img :src="baseUrl + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" /> <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
</template> </template>
<template #thumbnail="slotProps"> <template #thumbnail="slotProps">
<img :src="baseUrl + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" /> <img :src="$config.public.contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
</template> </template>
</Galleria> </Galleria>
</div> </div>
@ -190,8 +190,7 @@ export default {
breakpoint: '560px', breakpoint: '560px',
numVisible: 1 numVisible: 1
} }
], ]
baseUrl: process.dev ? '' : '/primevue-nuxt'
}; };
}, },
galleriaService: null, galleriaService: null,

7
pages/galleria/index.vue
View File

@ -17,10 +17,10 @@
<div class="card"> <div class="card">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"> <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
<template #item="slotProps"> <template #item="slotProps">
<img :src="baseUrl + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" /> <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
</template> </template>
<template #thumbnail="slotProps"> <template #thumbnail="slotProps">
<img :src="baseUrl + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" /> <img :src="$config.public.contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
</template> </template>
</Galleria> </Galleria>
</div> </div>
@ -52,8 +52,7 @@ export default {
breakpoint: '560px', breakpoint: '560px',
numVisible: 1 numVisible: 1
} }
], ]
baseUrl: process.dev ? '' : '/primevue-nuxt'
}; };
}, },
galleriaService: null, galleriaService: null,

10
pages/image/index.vue
View File

@ -16,10 +16,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="baseUrl + 'demo/images/galleria/galleria1.jpg'" alt="Image" width="250" /> <Image :src="$config.public.contextPath + 'demo/images/galleria/galleria1.jpg'" alt="Image" width="250" />
<h5>Preview</h5> <h5>Preview</h5>
<Image :src="baseUrl + 'demo/images/galleria/galleria11.jpg'" alt="Image" width="250" preview /> <Image :src="$config.public.contextPath + 'demo/images/galleria/galleria11.jpg'" alt="Image" width="250" preview />
</div> </div>
</div> </div>
@ -31,12 +31,6 @@
import ImageDoc from './ImageDoc'; import ImageDoc from './ImageDoc';
export default { export default {
data() {
return {
baseUrl: process.dev ? '/' : '/primevue-nuxt/'
};
},
components: { components: {
ImageDoc: ImageDoc ImageDoc: ImageDoc
} }

10
pages/landing/FooterSection.vue
View File

@ -69,7 +69,7 @@
<div class="flex justify-content-between py-6"> <div class="flex justify-content-between py-6">
<span> <span>
<img :src="baseUrl + 'demo/images/primevue-logo-' + `${$appState.darkTheme ? 'light' : 'dark'}` + '.svg'" alt="primevue logo" /> <img :src="$config.public.contextPath + 'demo/images/primevue-logo-' + `${$appState.darkTheme ? 'light' : 'dark'}` + '.svg'" alt="primevue logo" />
</span> </span>
<div class="flex align-items-center"> <div class="flex align-items-center">
<a href="https://twitter.com/primevue" class="linkbox block w-3rem h-3rem flex align-items-center justify-content-center mr-3"> <a href="https://twitter.com/primevue" class="linkbox block w-3rem h-3rem flex align-items-center justify-content-center mr-3">
@ -87,11 +87,5 @@
</template> </template>
<script> <script>
export default { export default {}
data() {
return {
baseUrl: process.dev ? '/' : '/primevue-nuxt/'
};
}
};
</script> </script>

5
pages/landing/HeaderSection.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<section :ref="containerRef" :class="['landing-header pad-section', { 'landing-header-active': menuActive }]"> <section :ref="containerRef" :class="['landing-header pad-section', { 'landing-header-active': menuActive }]">
<span> <span>
<img :src="baseUrl + 'demo/images/primevue-logo-' + `${$appState.darkTheme ? 'light' : 'dark'}` + '.svg'" alt="primevue logo" class="landing-header-logo" /> <img :src="$config.public.contextPath + 'demo/images/primevue-logo-' + `${$appState.darkTheme ? 'light' : 'dark'}` + '.svg'" alt="primevue logo" class="landing-header-logo" />
</span> </span>
<div class="flex align-items-center"> <div class="flex align-items-center">
@ -54,8 +54,7 @@ export default {
emits: ['theme-toggle'], emits: ['theme-toggle'],
data() { data() {
return { return {
menuActive: false, menuActive: false
baseUrl: process.dev ? '/' : '/primevue-nuxt/'
}; };
}, },
scrollListener: null, scrollListener: null,

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

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

6
service/CountryService.js
View File

@ -1,8 +1,8 @@
const baseUrl = process.env.NODE_ENV === 'production' ? '/primevue-nuxt/' : '/';
export default class CountryService { export default class CountryService {
getCountries() { getCountries() {
return fetch(baseUrl + 'demo/data/countries.json') const runtimeConfig = useRuntimeConfig();
return fetch(runtimeConfig.public.contextPath + 'demo/data/countries.json')
.then((res) => res.json()) .then((res) => res.json())
.then((d) => d.data); .then((d) => d.data);
} }

15
service/CustomerService.js
View File

@ -1,26 +1,29 @@
const baseUrl = process.env.NODE_ENV === 'production' ? '/primevue-nuxt/' : '/';
export default class CustomerService { export default class CustomerService {
constructor() {
const runtimeConfig = useRuntimeConfig();
this.contextPath = runtimeConfig.public.contextPath;
}
getCustomersSmall() { getCustomersSmall() {
return fetch(baseUrl + 'demo/data/customers-small.json') return fetch(this.contextPath + 'demo/data/customers-small.json')
.then((res) => res.json()) .then((res) => res.json())
.then((d) => d.data); .then((d) => d.data);
} }
getCustomersMedium() { getCustomersMedium() {
return fetch(baseUrl + 'demo/data/customers-medium.json') return fetch(this.contextPath + 'demo/data/customers-medium.json')
.then((res) => res.json()) .then((res) => res.json())
.then((d) => d.data); .then((d) => d.data);
} }
getCustomersLarge() { getCustomersLarge() {
return fetch(baseUrl + 'demo/data/customers-large.json') return fetch(this.contextPath + 'demo/data/customers-large.json')
.then((res) => res.json()) .then((res) => res.json())
.then((d) => d.data); .then((d) => d.data);
} }
getCustomersXLarge() { getCustomersXLarge() {
return fetch(baseUrl + 'demo/data/customers-xlarge.json') return fetch(this.contextPath + 'demo/data/customers-xlarge.json')
.then((res) => res.json()) .then((res) => res.json())
.then((d) => d.data); .then((d) => d.data);
} }

6
service/EventService.js
View File

@ -1,8 +1,8 @@
const baseUrl = process.env.NODE_ENV === 'production' ? '/primevue-nuxt/' : '/';
export default class EventService { export default class EventService {
getEvents() { getEvents() {
return fetch(baseUrl + 'demo/data/events.json') const runtimeConfig = useRuntimeConfig();
return fetch(runtimeConfig.public.contextPath + 'demo/data/events.json')
.then((res) => res.json()) .then((res) => res.json())
.then((d) => d.data); .then((d) => d.data);
} }

11
service/NodeService.js
View File

@ -1,14 +1,17 @@
const baseUrl = process.env.NODE_ENV === 'production' ? '/primevue-nuxt/' : '/';
export default class NodeService { export default class NodeService {
constructor() {
const runtimeConfig = useRuntimeConfig();
this.contextPath = runtimeConfig.public.contextPath;
}
getTreeTableNodes() { getTreeTableNodes() {
return fetch(baseUrl + 'demo/data/treetablenodes.json') return fetch(this.contextPath + 'demo/data/treetablenodes.json')
.then((res) => res.json()) .then((res) => res.json())
.then((d) => d.root); .then((d) => d.root);
} }
getTreeNodes() { getTreeNodes() {
return fetch(baseUrl + 'demo/data/treenodes.json') return fetch(this.contextPath + 'demo/data/treenodes.json')
.then((res) => res.json()) .then((res) => res.json())
.then((d) => d.root); .then((d) => d.root);
} }

6
service/PhotoService.js
View File

@ -1,8 +1,8 @@
const baseUrl = process.env.NODE_ENV === 'production' ? '/primevue-nuxt/' : '/';
export default class PhotoService { export default class PhotoService {
getImages() { getImages() {
return fetch(baseUrl + 'demo/data/photos.json') const runtimeConfig = useRuntimeConfig();
return fetch(runtimeConfig.public.contextPath + 'demo/data/photos.json')
.then((res) => res.json()) .then((res) => res.json())
.then((d) => d.data); .then((d) => d.data);
} }

12
service/ProductService.js
View File

@ -1,20 +1,24 @@
const baseUrl = process.env.NODE_ENV === 'production' ? '/primevue-nuxt/' : '/';
export default class ProductService { export default class ProductService {
constructor() {
const runtimeConfig = useRuntimeConfig();
this.contextPath = runtimeConfig.public.contextPath;
}
getProductsSmall() { getProductsSmall() {
return fetch(baseUrl + 'demo/data/products-small.json') return fetch(this.contextPath + 'demo/data/products-small.json')
.then((res) => res.json()) .then((res) => res.json())
.then((d) => d.data); .then((d) => d.data);
} }
getProducts() { getProducts() {
return fetch(baseUrl + 'demo/data/products-small.json') return fetch(this.contextPath + 'demo/data/products-small.json')
.then((res) => res.json()) .then((res) => res.json())
.then((d) => d.data); .then((d) => d.data);
} }
getProductsWithOrdersSmall() { getProductsWithOrdersSmall() {
return fetch(baseUrl + 'demo/data/products-small.json') return fetch(this.contextPath + 'demo/data/products-small.json')
.then((res) => res.json()) .then((res) => res.json())
.then((d) => d.data); .then((d) => d.data);
} }