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

Migrate to CDN

pull/3642/head
Cagatay Civici 2023-02-06 18:26:18 +03:00
parent ba309fdf90
commit 5f3c8f510a
25 changed files with 97 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
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="$config.public.contextPath + 'images/primevue-logo-' + `${$appState.darkTheme ? 'light' : 'dark'}` + '.svg'" alt="primevue logo" /> <img :src="'https://primefaces.org/cdn/primevue/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

82
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="$config.public.contextPath + 'images/themes/' + logoMap[$appState.theme]" /> <img :src="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'images/themes/bootstrap4-light-blue.svg'" alt="Blue Light" /><span>Blue Light</span></a> <a @click="changeTheme($event, 'bootstrap4-light-blue')"><img :src="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'images/themes/bootstrap4-light-purple.svg'" alt="Purple Light" /><span>Purple Light</span></a> <a @click="changeTheme($event, 'bootstrap4-light-purple')"><img :src="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'images/themes/bootstrap4-dark-blue.svg'" alt="Blue Dark" /><span>Blue Dark</span></a> <a @click="changeTheme($event, 'bootstrap4-dark-blue', true)"><img :src="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'images/themes/bootstrap4-dark-purple.svg'" alt="Purple Dark" /><span>Purple Dark</span></a> <a @click="changeTheme($event, 'bootstrap4-dark-purple', true)"><img :src="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'images/themes/md-light-indigo.svg'" alt="Indigo Light" /><span>Indigo Light</span></a> <a @click="changeTheme($event, 'md-light-indigo')"><img :src="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + '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="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'images/themes/md-dark-indigo.svg'" alt="Indigo Dark" /><span>Indigo Dark</span></a> <a @click="changeTheme($event, 'md-dark-indigo', true)"><img :src="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + '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="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'images/themes/md-light-indigo.svg'" alt="Indigo Light" /><span>Indigo Light</span></a> <a @click="changeTheme($event, 'mdc-light-indigo')"><img :src="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + '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="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'images/themes/md-dark-indigo.svg'" alt="Indigo Dark" /><span>Indigo Dark</span></a> <a @click="changeTheme($event, 'mdc-dark-indigo', true)"><img :src="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + '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="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'images/themes/tailwind-light.png'" alt="Tailwind Light" /><span>Tailwind Light</span></a> <a @click="changeTheme($event, 'tailwind-light')"><img :src="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'images/themes/fluent-light.png'" alt="Fluent Light" /><span>Fluent Light</span></a> <a @click="changeTheme($event, 'fluent-light')"><img :src="'https://primefaces.org/cdn/primevue/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</li> <li class="topbar-submenu-header flex align-items-center">PRIMEONE</li>
<li> <li>
<a @click="changeTheme($event, 'lara-light-indigo')"><img :src="$config.public.contextPath + 'images/themes/lara-light-indigo.png'" alt="Lara Light Indigo" /><span>Lara Light Indigo</span></a> <a @click="changeTheme($event, 'lara-light-indigo')"><img :src="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + '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="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + '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="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + '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="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + '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="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + '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="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + '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="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + '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="'https://primefaces.org/cdn/primevue/images/themes/lara-dark-teal.png'" alt="Lara Dark Teal" /><span>Lara Dark Teal</span></a>
</li> </li>
<li class="topbar-submenu-header">MISC</li> <li class="topbar-submenu-header">MISC</li>
<li> <li>
<a @click="changeTheme($event, 'soho-light')"><img :src="$config.public.contextPath + 'images/themes/soho-light.png'" alt="Soho Light" /><span>Soho Light</span></a> <a @click="changeTheme($event, 'soho-light')"><img :src="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'images/themes/soho-dark.png'" alt="Soho Dark" /><span>Soho Dark</span></a> <a @click="changeTheme($event, 'soho-dark', true)"><img :src="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'images/themes/viva-light.svg'" alt="Viva Light" /><span>Viva Light</span></a> <a @click="changeTheme($event, 'viva-light')"><img :src="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'images/themes/viva-dark.svg'" alt="Viva Dark" /><span>Viva Dark</span></a> <a @click="changeTheme($event, 'viva-dark', true)"><img :src="'https://primefaces.org/cdn/primevue/images/themes/viva-dark.svg'" alt="Viva Dark" /><span>Viva Dark</span></a>
</li> </li>
<li> <li>
<a @click="changeTheme($event, 'mira')"><img :src="$config.public.contextPath + 'images/themes/mira.jpg'" alt="Mira" /><span>Mira</span></a> <a @click="changeTheme($event, 'mira')"><img :src="'https://primefaces.org/cdn/primevue/images/themes/mira.jpg'" alt="Mira" /><span>Mira</span></a>
</li> </li>
<li> <li>
<a @click="changeTheme($event, 'nano')"><img :src="$config.public.contextPath + 'images/themes/nano.jpg'" alt="Nano" /><span>Nano</span></a> <a @click="changeTheme($event, 'nano')"><img :src="'https://primefaces.org/cdn/primevue/images/themes/nano.jpg'" alt="Nano" /><span>Nano</span></a>
</li> </li>
<li class="topbar-submenu-header">PRIMEONE - LEGACY</li> <li class="topbar-submenu-header">PRIMEONE - LEGACY</li>
<li> <li>
<a @click="changeTheme($event, 'saga-blue')"><img :src="$config.public.contextPath + 'images/themes/saga-blue.png'" alt="Saga Blue" /><span>Saga Blue</span></a> <a @click="changeTheme($event, 'saga-blue')"><img :src="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'images/themes/saga-green.png'" alt="Saga Green" /><span>Saga Green</span></a> <a @click="changeTheme($event, 'saga-green')"><img :src="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'images/themes/saga-orange.png'" alt="Saga Orange" /><span>Saga Orange</span></a> <a @click="changeTheme($event, 'saga-orange')"><img :src="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'images/themes/saga-purple.png'" alt="Saga Purple" /><span>Saga Purple</span></a> <a @click="changeTheme($event, 'saga-purple')"><img :src="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'images/themes/vela-blue.png'" alt="Vela Blue" /><span>Vela Blue</span></a> <a @click="changeTheme($event, 'vela-blue', true)"><img :src="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'images/themes/vela-green.png'" alt="Vela Green" /><span>Vela Green</span></a> <a @click="changeTheme($event, 'vela-green', true)"><img :src="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'images/themes/vela-orange.png'" alt="Vela Orange" /><span>Vela Orange</span></a> <a @click="changeTheme($event, 'vela-orange', true)"><img :src="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'images/themes/vela-purple.png'" alt="Vela Purple" /><span>Vela Purple</span></a> <a @click="changeTheme($event, 'vela-purple', true)"><img :src="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'images/themes/arya-blue.png'" alt="Arya Blue" /><span>Arya Blue</span></a> <a @click="changeTheme($event, 'arya-blue', true)"><img :src="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'images/themes/arya-green.png'" alt="Arya Green" /><span>Arya Green</span></a> <a @click="changeTheme($event, 'arya-green', true)"><img :src="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'images/themes/arya-orange.png'" alt="Arya Orange" /><span>Arya Orange</span></a> <a @click="changeTheme($event, 'arya-orange', true)"><img :src="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'images/themes/arya-purple.png'" alt="Arya Purple" /><span>Arya Purple</span></a> <a @click="changeTheme($event, 'arya-purple', true)"><img :src="'https://primefaces.org/cdn/primevue/images/themes/arya-purple.png'" alt="Arya Purple" /><span>Arya Purple</span></a>
</li> </li>
</ul> </ul>
</transition> </transition>

18
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="$config.public.contextPath + 'images/avatar/amyelsner.png'" class="mr-2" size="xlarge" shape="circle" /> <Avatar :image="'https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png'" class="mr-2" size="xlarge" shape="circle" />
<Avatar :image="$config.public.contextPath + 'images/avatar/asiyajavayant.png'" class="mr-2" size="large" shape="circle" /> <Avatar :image="'https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png'" class="mr-2" size="large" shape="circle" />
<Avatar :image="$config.public.contextPath + 'images/avatar/onyamalimba.png'" class="mr-2" shape="circle" /> <Avatar :image="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'images/avatar/amyelsner.png'" size="large" shape="circle" /> <Avatar :image="'https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png'" size="large" shape="circle" />
<Avatar :image="$config.public.contextPath + 'images/avatar/asiyajavayant.png'" size="large" shape="circle" /> <Avatar :image="'https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png'" size="large" shape="circle" />
<Avatar :image="$config.public.contextPath + 'images/avatar/onyamalimba.png'" size="large" shape="circle" /> <Avatar :image="'https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png'" size="large" shape="circle" />
<Avatar :image="$config.public.contextPath + 'images/avatar/ionibowcher.png'" size="large" shape="circle" /> <Avatar :image="'https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png'" size="large" shape="circle" />
<Avatar :image="$config.public.contextPath + 'images/avatar/xuxuefeng.png'" size="large" shape="circle" /> <Avatar :image="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'images/organization/walter.jpg'" size="xlarge" /> <Avatar v-badge.danger="4" :image="'https://primefaces.org/cdn/primevue/images/organization/walter.jpg'" size="xlarge" />
</div> </div>
</div> </div>
</div> </div>

4
pages/button/ButtonDoc.vue
View File

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

2
pages/card/CardDoc.vue
View File

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

6
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="$config.public.contextPath + 'images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" /> <img :src="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" /> <img :src="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" /> <img :src="'https://primefaces.org/cdn/primevue/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>

2
pages/cascadeselect/CascadeSelectDoc.vue
View File

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

12
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="$config.public.contextPath + 'images/avatar/amyelsner.png'" class="mr-2" /> <Chip label="Amy Elsner" :image="'https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png'" class="mr-2" />
<Chip label="Asiya Javayant" :image="$config.public.contextPath + 'images/avatar/asiyajavayant.png'" class="mr-2" /> <Chip label="Asiya Javayant" :image="'https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png'" class="mr-2" />
<Chip label="Onyama Limba" :image="$config.public.contextPath + 'images/avatar/onyamalimba.png'" class="mr-2" /> <Chip label="Onyama Limba" :image="'https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png'" class="mr-2" />
<Chip label="Xuxue Feng" :image="$config.public.contextPath + 'images/avatar/xuxuefeng.png'" removable /> <Chip label="Xuxue Feng" :image="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'images/avatar/onyamalimba.png'" class="mr-2 custom-chip" /> <Chip label="Onyama Limba" :image="'https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png'" class="mr-2 custom-chip" />
<Chip label="Xuxue Feng" :image="$config.public.contextPath + 'images/avatar/xuxuefeng.png'" class="custom-chip" removable /> <Chip label="Xuxue Feng" :image="'https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png'" class="custom-chip" removable />
</div> </div>
</div> </div>
</div> </div>

2
pages/contextmenu/ContextMenuDoc.vue
View File

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

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

8
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="$config.public.contextPath + 'images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" /> <img :alt="data.representative.name" :src="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" /> <img :alt="slotProps.option.name" :src="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" /> <img :alt="data.representative.name" :src="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" /> <img :alt="slotProps.option.name" :src="'https://primefaces.org/cdn/primevue/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>

2
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="$config.public.contextPath + 'images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" /> <img :src="'https://primefaces.org/cdn/primevue/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>

6
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="$config.public.contextPath + 'images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" /> <img :alt="slotProps.data.representative.name" :src="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" /> <img :alt="slotProps.data.representative.name" :src="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + slotProps.data.representative.name" :src="$config.public.contextPath + 'images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" /> <img :alt="$config.public.contextPath + slotProps.data.representative.name" :src="'https://primefaces.org/cdn/primevue/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>

2
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="$config.public.contextPath + 'images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" /> <img :alt="slotProps.data.representative.name" :src="'https://primefaces.org/cdn/primevue/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">

8
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="$config.public.contextPath + 'images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" /> <img :alt="slotProps.data.representative.name" :src="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" /> <img :alt="slotProps.option.name" :src="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" /> <img :alt="slotProps.data.representative.name" :src="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" /> <img :alt="slotProps.option.name" :src="'https://primefaces.org/cdn/primevue/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>

2
pages/datatable/Templating.vue
View File

@ -20,7 +20,7 @@
<Column field="name" header="Name"></Column> <Column field="name" header="Name"></Column>
<Column header="Image"> <Column header="Image">
<template #body="slotProps"> <template #body="slotProps">
<img :src="$config.public.contextPath + 'images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" /> <img :src="'https://primefaces.org/cdn/primevue/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">

4
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="$config.public.contextPath + 'images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" /> <img :alt="data.representative.name" :src="'https://primefaces.org/cdn/primevue/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="$config.public.contextPath + 'images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" /> <img :alt="slotProps.option.name" :src="'https://primefaces.org/cdn/primevue/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>

8
pages/dock/DockDoc.vue
View File

@ -28,19 +28,19 @@ import Dock from 'primevue/dock';
items: [ items: [
{ {
label: "Finder", label: "Finder",
icon: "https://primefaces.org/cdn/primevue/images/dock/finder.svg" icon: "/images/dock/finder.svg"
}, },
{ {
label: "App Store", label: "App Store",
icon: "https://primefaces.org/cdn/primevue/images/dock/appstore.svg" icon: "/images/dock/appstore.svg"
}, },
{ {
label: "Photos", label: "Photos",
icon: "https://primefaces.org/cdn/primevue/images/dock/photos.svg" icon: "/images/dock/photos.svg"
}, },
{ {
label: "Trash", label: "Trash",
icon: "https://primefaces.org/cdn/primevue/images/dock/trash.png" icon: "/images/dock/trash.png"
} }
] ]
} }

4
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="$config.public.contextPath + 'images/galleria/galleria1.jpg'" alt="Image" width="250" /> <Image :src="'https://primefaces.org/cdn/primevue/images/galleria/galleria1.jpg'" alt="Image" width="250" />
<h5>Preview</h5> <h5>Preview</h5>
<Image :src="$config.public.contextPath + 'images/galleria/galleria11.jpg'" alt="Image" width="250" preview /> <Image :src="'https://primefaces.org/cdn/primevue/images/galleria/galleria11.jpg'" alt="Image" width="250" preview />
</div> </div>
</div> </div>

2
pages/inplace/InplaceDoc.vue
View File

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

2
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="$config.public.contextPath + 'images/primevue-logo-' + `${$appState.darkTheme ? 'light' : 'dark'}` + '.svg'" alt="primevue logo" /> <img :src="'https://primefaces.org/cdn/primevue/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">

2
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="$config.public.contextPath + 'images/primevue-logo-' + `${$appState.darkTheme ? 'light' : 'dark'}` + '.svg'" alt="primevue logo" class="landing-header-logo" /> <img :src="'https://primefaces.org/cdn/primevue/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">

4
pages/overlaypanel/OverlayPanelDoc.vue
View File

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

6
pages/rating/RatingDoc.vue
View File

@ -39,13 +39,13 @@ import Rating from 'primevue/rating';
<pre v-code><code> <pre v-code><code>
&lt;Rating :modelValue="3"> &lt;Rating :modelValue="3">
&lt;template #cancelicon&gt; &lt;template #cancelicon&gt;
&lt;img src="https://primefaces.org/cdn/primevue/images/rating/cancel.png" height="24" width="24"&gt; &lt;img src="/images/rating/cancel.png" height="24" width="24"&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #onicon&gt; &lt;template #onicon&gt;
&lt;img src="https://primefaces.org/cdn/primevue/images/rating/custom-onicon.png" height="24" width="24"&gt; &lt;img src="/images/rating/custom-onicon.png" height="24" width="24"&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;template #officon&gt; &lt;template #officon&gt;
&lt;img src="https://primefaces.org/cdn/primevue/images/rating/custom-officon.png" height="24" width="24"&gt; &lt;img src="/images/rating/custom-officon.png" height="24" width="24"&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Rating&gt; &lt;/Rating&gt;

2
pages/splitbutton/SplitButtonDoc.vue
View File

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