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>
<div :class="['layout-sidebar', { active: active }]">
<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>
<div class="layout-sidebar-filter p-fluid">
<AutoComplete

82
layouts/AppTopBar.vue
View File

@ -4,7 +4,7 @@
<i class="pi pi-bars"></i>
</a>
<div v-tooltip.bottom="$appState.theme" class="app-theme">
<img :src="$config.public.contextPath + 'images/themes/' + logoMap[$appState.theme]" />
<img :src="'https://primefaces.org/cdn/primevue/images/themes/' + logoMap[$appState.theme]" />
</div>
<ul ref="topbarMenu" class="topbar-menu">
<li class="topbar-submenu">
@ -32,138 +32,138 @@
<li class="topbar-submenu-header">BOOTSTRAP</li>
<li>
<a @click="changeTheme($event, 'bootstrap4-light-blue')"><img :src="$config.public.contextPath + '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>
<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>
<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>
<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 class="topbar-submenu-header">MATERIAL DESIGN</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>
<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>
<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>
<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 class="topbar-submenu-header">MATERIAL DESIGN COMPACT</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>
<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>
<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>
<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 class="topbar-submenu-header">TAILWIND</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 class="topbar-submenu-header">FLUENT UI</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 class="topbar-submenu-header flex align-items-center">PRIMEONE</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>
<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>
<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>
<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>
<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>
<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>
<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>
<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 class="topbar-submenu-header">MISC</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>
<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>
<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>
<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>
<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>
<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 class="topbar-submenu-header">PRIMEONE - LEGACY</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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
</ul>
</transition>

18
pages/avatar/index.vue
View File

@ -72,9 +72,9 @@
<div class="col-12 md:col-4">
<div class="card">
<h5>Image</h5>
<Avatar :image="$config.public.contextPath + 'images/avatar/amyelsner.png'" class="mr-2" size="xlarge" shape="circle" />
<Avatar :image="$config.public.contextPath + 'images/avatar/asiyajavayant.png'" class="mr-2" size="large" shape="circle" />
<Avatar :image="$config.public.contextPath + 'images/avatar/onyamalimba.png'" class="mr-2" shape="circle" />
<Avatar :image="'https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png'" class="mr-2" size="xlarge" shape="circle" />
<Avatar :image="'https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png'" class="mr-2" size="large" shape="circle" />
<Avatar :image="'https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png'" class="mr-2" shape="circle" />
</div>
</div>
@ -82,11 +82,11 @@
<div class="card">
<h5>Avatar Group</h5>
<AvatarGroup class="mb-3">
<Avatar :image="$config.public.contextPath + 'images/avatar/amyelsner.png'" size="large" shape="circle" />
<Avatar :image="$config.public.contextPath + 'images/avatar/asiyajavayant.png'" size="large" shape="circle" />
<Avatar :image="$config.public.contextPath + 'images/avatar/onyamalimba.png'" size="large" shape="circle" />
<Avatar :image="$config.public.contextPath + 'images/avatar/ionibowcher.png'" size="large" shape="circle" />
<Avatar :image="$config.public.contextPath + 'images/avatar/xuxuefeng.png'" size="large" shape="circle" />
<Avatar :image="'https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png'" size="large" shape="circle" />
<Avatar :image="'https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png'" size="large" shape="circle" />
<Avatar :image="'https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png'" size="large" shape="circle" />
<Avatar :image="'https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.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" />
</AvatarGroup>
</div>
@ -95,7 +95,7 @@
<div class="col-12 md:col-4">
<div class="card">
<h5>Image - Badge</h5>
<Avatar v-badge.danger="4" :image="$config.public.contextPath + '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>

4
pages/button/ButtonDoc.vue
View File

@ -136,11 +136,11 @@ import Button from 'primevue/button';
<p>Custom content such as icons, images and text can be placed inside the button via the default slot. Note that when slot is used, label, icon and badge properties are not included.</p>
<pre v-code><code>
&lt;Button type="button" class="px-3"&gt;
&lt;img alt="logo" src="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 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;/Button&gt;

2
pages/card/CardDoc.vue
View File

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

6
pages/carousel/index.vue
View File

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

2
pages/cascadeselect/CascadeSelectDoc.vue
View File

@ -118,7 +118,7 @@ data() &#123;
:optionGroupChildren="['states', 'cities']" style="minWidth: 14rem"&gt;
&lt;template #option="slotProps"&gt;
&lt;div class="country-item"&gt;
&lt;img src="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-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;

12
pages/chip/index.vue
View File

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

2
pages/contextmenu/ContextMenuDoc.vue
View File

@ -170,7 +170,7 @@ export default {
<p>ContextMenu is attached to a custom element manually using the reference and calling the <i>show(event)</i> method.</p>
<pre v-code><code>
&lt;img alt="logo" src="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;
</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 header="Image">
<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>
</Column>
<Column field="price" header="Price" :sortable="true" style="min-width: 8rem">

8
pages/datatable/Filter.vue
View File

@ -64,7 +64,7 @@
</Column>
<Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
<template #body="{ data }">
<img :alt="data.representative.name" :src="$config.public.contextPath + '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>
</template>
<template #filter="{ filterModel }">
@ -72,7 +72,7 @@
<MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
<template #option="slotProps">
<div class="p-multiselect-representative-option">
<img :alt="slotProps.option.name" :src="$config.public.contextPath + '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>
</div>
</template>
@ -178,14 +178,14 @@
</Column>
<Column header="Agent" filterField="representative" :showFilterMenu="false" style="min-width: 14rem">
<template #body="{ data }">
<img :alt="data.representative.name" :src="$config.public.contextPath + '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>
</template>
<template #filter="{ filterModel, filterCallback }">
<MultiSelect v-model="filterModel.value" @change="filterCallback()" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
<template #option="slotProps">
<div class="p-multiselect-representative-option">
<img :alt="slotProps.option.name" :src="$config.public.contextPath + '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>
</div>
</template>

2
pages/datatable/RowExpand.vue
View File

@ -21,7 +21,7 @@
<Column field="name" header="Name" sortable></Column>
<Column header="Image">
<template #body="slotProps">
<img :src="$config.public.contextPath + '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>
</Column>
<Column field="price" header="Price" sortable>

6
pages/datatable/RowGroup.vue
View File

@ -29,7 +29,7 @@
</Column>
<Column field="date" header="Date" style="min-width: 200px"></Column>
<template #groupheader="slotProps">
<img :alt="slotProps.data.representative.name" :src="$config.public.contextPath + '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>
</template>
<template #groupfooter="slotProps">
@ -73,7 +73,7 @@
</Column>
<Column field="date" header="Date"></Column>
<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>
</template>
<template #groupfooter="slotProps">
@ -93,7 +93,7 @@
</Column>
<Column field="representative.name" header="Representative">
<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>
</template>
</Column>

2
pages/datatable/Scroll.vue
View File

@ -116,7 +116,7 @@
</Column>
<Column field="date" header="Date" style="min-width: 200px"></Column>
<template #groupheader="slotProps">
<img :alt="slotProps.data.representative.name" :src="$config.public.contextPath + '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>
</template>
<template #groupfooter="slotProps">

8
pages/datatable/State.vue
View File

@ -45,14 +45,14 @@
</Column>
<Column header="Representative" :sortable="true" sortField="representative.name" filterField="representative.name" filterMatchMode="in" style="width: 25%">
<template #body="slotProps">
<img :alt="slotProps.data.representative.name" :src="$config.public.contextPath + '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>
</template>
<template #filter>
<MultiSelect v-model="filters1['representative.name']" :options="representatives" optionLabel="name" optionValue="name" placeholder="All" class="p-column-filter">
<template #option="slotProps">
<div class="p-multiselect-representative-option">
<img :alt="slotProps.option.name" :src="$config.public.contextPath + '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>
</div>
</template>
@ -111,14 +111,14 @@
</Column>
<Column header="Representative" :sortable="true" sortField="representative.name" filterField="representative.name" filterMatchMode="in" style="width: 25%">
<template #body="slotProps">
<img :alt="slotProps.data.representative.name" :src="$config.public.contextPath + '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>
</template>
<template #filter>
<MultiSelect v-model="filters2['representative.name']" :options="representatives" optionLabel="name" optionValue="name" placeholder="All" class="p-column-filter">
<template #option="slotProps">
<div class="p-multiselect-representative-option">
<img :alt="slotProps.option.name" :src="$config.public.contextPath + '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>
</div>
</template>

2
pages/datatable/Templating.vue
View File

@ -20,7 +20,7 @@
<Column field="name" header="Name"></Column>
<Column header="Image">
<template #body="slotProps">
<img :src="$config.public.contextPath + '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>
</Column>
<Column field="price" header="Price">

4
pages/datatable/index.vue
View File

@ -63,7 +63,7 @@
</Column>
<Column header="Agent" sortable filterField="representative" sortField="representative.name" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
<template #body="{ data }">
<img :alt="data.representative.name" :src="$config.public.contextPath + '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>
</template>
<template #filter="{ filterModel }">
@ -71,7 +71,7 @@
<MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
<template #option="slotProps">
<div class="p-multiselect-representative-option">
<img :alt="slotProps.option.name" :src="$config.public.contextPath + '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>
</div>
</template>

8
pages/dock/DockDoc.vue
View File

@ -28,19 +28,19 @@ import Dock from 'primevue/dock';
items: [
{
label: "Finder",
icon: "https://primefaces.org/cdn/primevue/images/dock/finder.svg"
icon: "/images/dock/finder.svg"
},
{
label: "App Store",
icon: "https://primefaces.org/cdn/primevue/images/dock/appstore.svg"
icon: "/images/dock/appstore.svg"
},
{
label: "Photos",
icon: "https://primefaces.org/cdn/primevue/images/dock/photos.svg"
icon: "/images/dock/photos.svg"
},
{
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="card">
<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>
<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>

2
pages/inplace/InplaceDoc.vue
View File

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

2
pages/landing/FooterSection.vue
View File

@ -69,7 +69,7 @@
<div class="flex justify-content-between py-6">
<span>
<img :src="$config.public.contextPath + '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>
<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">

2
pages/landing/HeaderSection.vue
View File

@ -1,7 +1,7 @@
<template>
<section :ref="containerRef" :class="['landing-header pad-section', { 'landing-header-active': menuActive }]">
<span>
<img :src="$config.public.contextPath + '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>
<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;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;
</code></pre>
@ -35,7 +35,7 @@ toggle(event) {
<p>Clicking outside the overlay hides the panel, setting <i>dismissable</i> to false disables this behavior. Additionally enabling <i>showCloseIcon</i> property displays a close icon at the top right corner to close the panel.</p>
<pre v-code><code>
&lt;OverlayPanel ref="op" :showCloseIcon="true" :dismissable="true"&gt;
&lt;img src="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;
</code></pre>

6
pages/rating/RatingDoc.vue
View File

@ -39,13 +39,13 @@ import Rating from 'primevue/rating';
<pre v-code><code>
&lt;Rating :modelValue="3">
&lt;template #cancelicon&gt;
&lt;img src="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 #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 #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;/Rating&gt;

2
pages/splitbutton/SplitButtonDoc.vue
View File

@ -96,7 +96,7 @@ export default {
<pre v-code><code>
&lt;SplitButton :model="items" class="bg-primary border-round"&gt;
&lt;Button @click="save"&gt;
&lt;img alt="logo" src="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;/Button&gt;
&lt;/SplitButton&gt;