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

Merge branch 'master' into resolves-fix

pull/3430/head
Michał Kleszczyński 2023-01-03 21:16:28 +01:00
parent 2c53c1536f e4c3bbab76
commit 2351fec1c1
205 changed files with 28722 additions and 26755 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.eslintrc.js
View File

@ -4,17 +4,20 @@ module.exports = {
node: true, node: true,
jest: true jest: true
}, },
extends: ['plugin:vue/vue3-essential', 'eslint:recommended', 'prettier'], extends: ['plugin:nuxt/recommended', 'plugin:vue/vue3-essential', 'prettier'],
parserOptions: { parserOptions: {
parser: '@babel/eslint-parser', parser: '@babel/eslint-parser',
requireConfigFile: false requireConfigFile: false
}, },
plugins: ['prettier'], plugins: ['prettier'],
ignorePatterns: ['**/public/**', '/layouts/AppDocumentation.vue'],
rules: { rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-fallthrough': 'off', 'no-fallthrough': 'off',
'vue/this-in-template': ['error', 'never'], 'vue/this-in-template': ['error', 'never'],
'vue/multi-word-component-names': 'off',
'vue/no-reserved-component-names': 'off',
'vue/component-tags-order': [ 'vue/component-tags-order': [
'error', 'error',
{ {

155
components/accordion/Accordion.spec.js
View File

@ -1,7 +1,8 @@
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import { expect, it } from 'vitest';
import AccordionTab from '../accordiontab/AccordionTab.vue'; import AccordionTab from '../accordiontab/AccordionTab.vue';
import Accordion from './Accordion.vue'; import Accordion from './Accordion.vue';
vi.mock('primevue/utils');
describe('Accordion.vue', () => { describe('Accordion.vue', () => {
let wrapper; let wrapper;
@ -14,25 +15,29 @@ describe('Accordion.vue', () => {
}, },
slots: { slots: {
default: ` default: `
<AccordionTab header="Header I"> <AccordionTab header="Header I">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</AccordionTab> </AccordionTab>
<AccordionTab header="Header II"> <AccordionTab header="Header II">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p> voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
</AccordionTab> </AccordionTab>
<AccordionTab header="Header III"> <AccordionTab header="Header III">
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p> Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
</AccordionTab>` </AccordionTab>`
} }
}); });
}); });
afterEach(() => {
vi.clearAllMocks();
});
it('should Accordion and AccordionTab component exist', () => { it('should Accordion and AccordionTab component exist', () => {
expect(wrapper.find('.p-accordion.p-component').exists()).toBe(true); expect(wrapper.find('.p-accordion.p-component').exists()).toBe(true);
expect(wrapper.find('.p-accordion-tab').exists()).toBe(true); expect(wrapper.find('.p-accordion-tab').exists()).toBe(true);
@ -47,4 +52,122 @@ describe('Accordion.vue', () => {
expect(allTabs[0].classes()).not.toContain('p-accordion-tab-active'); expect(allTabs[0].classes()).not.toContain('p-accordion-tab-active');
expect(allTabs[1].classes()).toContain('p-accordion-tab-active'); expect(allTabs[1].classes()).toContain('p-accordion-tab-active');
}); });
it('should work tab click', async () => {
const firstHeader = wrapper.find('a.p-accordion-header-link');
await firstHeader.trigger('click');
expect(wrapper.emitted()['update:activeIndex'][0]).toEqual([0]);
expect(wrapper.emitted()['tab-click'][0][0].index).toEqual(0);
});
it('When invalid key triggered OnTabKey should break', async () => {
const keydownOptions = ['onTabHomeKey', 'onTabEnterKey', 'onTabEndKey', 'onTabArrowDownKey', 'onTabArrowUpKey'];
const firstHeader = wrapper.find('a.p-accordion-header-link');
await firstHeader.trigger('keydown', { code: 'ArrowRight' });
for (const keydownOption of keydownOptions) {
expect(vi.spyOn(wrapper.vm, keydownOption)).not.toHaveBeenCalled();
}
});
it('When keydown enter is triggered on component header changeActiveIndex should be triggered', async () => {
const firstHeader = wrapper.find('a.p-accordion-header-link');
const changeActiveIndexSpy = vi.spyOn(wrapper.vm, 'changeActiveIndex');
await firstHeader.trigger('keydown', { code: 'Enter' });
expect(changeActiveIndexSpy).toHaveBeenCalled();
});
it('When keydown end is triggered on component header changeFocusedTab should be triggered', async () => {
const firstHeader = wrapper.find('a.p-accordion-header-link');
const changeFocusedTabSpy = vi.spyOn(wrapper.vm, 'changeFocusedTab');
const findLastHeaderActionSpy = vi.spyOn(wrapper.vm, 'findLastHeaderAction');
await firstHeader.trigger('keydown', { code: 'End' });
expect(changeFocusedTabSpy).toHaveBeenCalled();
expect(findLastHeaderActionSpy).toHaveBeenCalled();
});
it('When keydown home is triggered on component header changeFocusedTab should be triggered', async () => {
const firstHeader = wrapper.find('a.p-accordion-header-link');
const changeFocusedTabSpy = vi.spyOn(wrapper.vm, 'changeFocusedTab');
const findFirstHeaderActionSpy = vi.spyOn(wrapper.vm, 'findFirstHeaderAction');
await firstHeader.trigger('keydown', { code: 'Home' });
expect(changeFocusedTabSpy).toHaveBeenCalled();
expect(findFirstHeaderActionSpy).toHaveBeenCalled();
});
it('When keydown ArrowUp is triggered and findPrevHeaderAction is true changeFocusedTab should be triggered', async () => {
const findPrevHeaderActionSpy = vi.spyOn(wrapper.vm, 'findPrevHeaderAction').mockImplementation(() => true);
const onTabEndKeySpy = vi.spyOn(wrapper.vm, 'onTabEndKey');
const changeFocusedTabSpy = vi.spyOn(wrapper.vm, 'changeFocusedTab').mockImplementation(() => true);
const firstHeader = wrapper.find('a.p-accordion-header-link');
await firstHeader.trigger('keydown', { code: 'ArrowUp' });
expect(findPrevHeaderActionSpy).toHaveBeenCalled();
expect(changeFocusedTabSpy).toHaveBeenCalled();
expect(onTabEndKeySpy).toHaveBeenCalledTimes(0);
});
it('When keydown ArrowUp is triggered and findPrevHeaderAction is false onTabEndKey should be triggered', async () => {
const findPrevHeaderActionSpy = vi.spyOn(wrapper.vm, 'findPrevHeaderAction').mockImplementation(() => false);
const onTabEndKeySpy = vi.spyOn(wrapper.vm, 'onTabEndKey');
const firstHeader = wrapper.find('a.p-accordion-header-link');
await firstHeader.trigger('keydown', { code: 'ArrowUp' });
expect(findPrevHeaderActionSpy).toHaveBeenCalled();
expect(onTabEndKeySpy).toHaveBeenCalled();
});
it('When keydown ArrowDown is triggered and nextHeaderAction is true changeFocusedTab should be triggered', async () => {
const findNextHeaderActionSpy = vi.spyOn(wrapper.vm, 'findNextHeaderAction').mockImplementation(() => true);
const onTabHomeKeySpy = vi.spyOn(wrapper.vm, 'onTabHomeKey');
const changeFocusedTabSpy = vi.spyOn(wrapper.vm, 'changeFocusedTab').mockImplementation(() => true);
const firstHeader = wrapper.find('a.p-accordion-header-link');
await firstHeader.trigger('keydown', { code: 'ArrowDown' });
expect(findNextHeaderActionSpy).toHaveBeenCalled();
expect(changeFocusedTabSpy).toHaveBeenCalled();
expect(onTabHomeKeySpy).toHaveBeenCalledTimes(0);
});
it('When keydown ArrowDown is triggered and nextHeaderAction is false onTabHomeKey should be triggered', async () => {
const findNextHeaderActionSpy = vi.spyOn(wrapper.vm, 'findNextHeaderAction').mockImplementation(() => false);
const onTabHomeKeySpy = vi.spyOn(wrapper.vm, 'onTabHomeKey');
const firstHeader = wrapper.find('a.p-accordion-header-link');
await firstHeader.trigger('keydown', { code: 'ArrowDown' });
expect(findNextHeaderActionSpy).toHaveBeenCalled();
expect(onTabHomeKeySpy).toHaveBeenCalled();
});
it('When changeFocusedTab triggered and selectOnFocus is true changeActiveIndex should be triggered with valid parameters', async () => {
await wrapper.setProps({ selectOnFocus: true });
const changeActiveIndexSpy = vi.spyOn(wrapper.vm, 'changeActiveIndex');
const event = {};
const element = {
parentElement: {
parentElement: {
dataset: {
index: 0
}
}
}
};
await wrapper.vm.changeFocusedTab(event, element);
expect(changeActiveIndexSpy).toHaveBeenCalledWith({}, wrapper.vm.tabs[0], 0);
});
}); });

31
components/avatar/Avatar.spec.js
View File

@ -1,20 +1,35 @@
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import { beforeEach } from 'vitest';
import Avatar from './Avatar.vue'; import Avatar from './Avatar.vue';
let wrapper = null;
beforeEach(() => {
wrapper = mount(Avatar, {
props: {
label: 'T',
size: 'large',
shape: 'circle',
image: 'test'
}
});
});
describe('Avatar.vue', () => { describe('Avatar.vue', () => {
it('should exist', () => { it('should exist', () => {
const wrapper = mount(Avatar, {
props: {
label: 'T',
size: 'large',
shape: 'circle'
}
});
expect(wrapper.find('.p-avatar.p-component').exists()).toBe(true); expect(wrapper.find('.p-avatar.p-component').exists()).toBe(true);
expect(wrapper.find('.p-avatar-lg').exists()).toBe(true); expect(wrapper.find('.p-avatar-lg').exists()).toBe(true);
expect(wrapper.find('.p-avatar-circle').exists()).toBe(true); expect(wrapper.find('.p-avatar-circle').exists()).toBe(true);
expect(wrapper.find('.p-avatar-text').exists()).toBe(true); expect(wrapper.find('.p-avatar-text').exists()).toBe(true);
expect(wrapper.find('.p-avatar-text').text()).toBe('T'); expect(wrapper.find('.p-avatar-text').text()).toBe('T');
}); });
it('should exist', async () => {
await wrapper.setProps({ image: 'imageTest' });
const image = wrapper.find('.p-avatar-image');
await wrapper.vm.onError();
expect(image.exists()).toBe(true);
expect(wrapper.emitted().error.length).toBe(1);
});
}); });

24
components/badge/Badge.spec.js
View File

@ -1,33 +1,35 @@
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import Button from 'primevue/button'; import { expect } from 'vitest';
import Badge from './Badge.vue'; import Badge from './Badge.vue';
let wrapper = null;
describe('Badge.vue', () => { describe('Badge.vue', () => {
it('should exist', () => { beforeEach(() => {
const wrapper = mount(Badge, { wrapper = mount(Badge, {
props: { props: {
value: '29', value: '29',
severity: 'warning', severity: 'warning',
size: 'large' size: 'large'
} }
}); });
});
it('should exist', () => {
expect(wrapper.find('.p-badge.p-component').exists()).toBe(true); expect(wrapper.find('.p-badge.p-component').exists()).toBe(true);
expect(wrapper.find('.p-badge-warning').exists()).toBe(true); expect(wrapper.find('.p-badge-warning').exists()).toBe(true);
expect(wrapper.find('.p-badge-lg').exists()).toBe(true); expect(wrapper.find('.p-badge-lg').exists()).toBe(true);
expect(wrapper.find('.p-badge-no-gutter').exists()).toBe(false); expect(wrapper.find('.p-badge-no-gutter').exists()).toBe(false);
expect(wrapper.vm.containerClass).not.toBe('p-overlay-badge');
}); });
it('badge classes should exist', () => { it('badge classes should exist', () => {
const wrapper = mount({ wrapper = mount(Badge, {
template: '<Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />', slots: {
components: { default: 'Main Content'
Button
} }
}); });
expect(wrapper.find('.p-badge.p-component').exists()).toBe(true); expect(wrapper.vm.containerClass).toBe('p-overlay-badge');
expect(wrapper.find('.p-badge-danger').exists()).toBe(true);
expect(wrapper.find('.p-badge-no-gutter').exists()).toBe(true);
}); });
}); });

85
components/blockui/BlockUI.spec.js
View File

@ -1,6 +1,5 @@
import { config, mount } from '@vue/test-utils'; import { config, mount } from '@vue/test-utils';
import Button from 'primevue/button'; import { beforeEach, expect } from 'vitest';
import Panel from '../panel/Panel.vue';
import BlockUI from './BlockUI.vue'; import BlockUI from './BlockUI.vue';
config.global.mocks = { config.global.mocks = {
@ -12,52 +11,62 @@ config.global.mocks = {
} }
} }
}; };
vi.mock('primevue/utils');
let wrapper = null;
describe('BlockUI.vue', () => { describe('BlockUI.vue', () => {
it('should blocked and unblocked the panel', async () => { beforeEach(() => {
const wrapper = mount({ wrapper = mount(BlockUI);
template: ` });
<Button type="button" label="Block" @click="blockPanel()"></Button>
<Button type="button" label="Unblock" @click="unblockPanel()"></Button>
<BlockUI :blocked="blockedPanel"> afterEach(() => {
<Panel header="Godfather I" style="margin-top: 20px"> vi.clearAllMocks();
<p>The story begins as Don Vito Corleone, the head of a New York Mafia family.</p> });
</Panel>
</BlockUI> it('When blocked props is true, block method should be triggered on mounted hook', async () => {
`, const blockUiSpy = vi.spyOn(BlockUI.methods, 'block');
components: {
BlockUI, wrapper = mount(BlockUI, {
Panel, props: {
Button blocked: true
},
data() {
return {
blockedPanel: false
};
},
methods: {
blockPanel() {
this.blockedPanel = true;
},
unblockPanel() {
this.blockedPanel = false;
}
} }
}); });
expect(wrapper.find('.p-blockui-container').exists()).toBe(true); expect(blockUiSpy).toHaveBeenCalled();
});
const buttons = wrapper.findAll('.p-button'); it('When blocked props value is changed, block or unblock method should be triggered', async () => {
const blockSpy = vi.spyOn(wrapper.vm, 'block');
const unblockSpy = vi.spyOn(wrapper.vm, 'unblock');
await buttons[0].trigger('click'); await wrapper.setProps({ blocked: true });
expect(wrapper.find('.p-blockui').exists()).toBe(true); expect(blockSpy).toHaveBeenCalled();
expect(wrapper.find('.p-blockui').classes()).toContain('p-component-overlay-enter');
expect(wrapper.find('.p-blockui').attributes().style).toEqual('z-index: 1101;');
await buttons[1].trigger('click'); await wrapper.setProps({ blocked: false });
expect(wrapper.find('.p-blockui').classes()).toContain('p-component-overlay-leave'); expect(unblockSpy).toHaveBeenCalled();
});
it('When block method triggered, mask should be added on DOM', async () => {
await wrapper.setProps({ fullScreen: true });
await wrapper.vm.block();
expect(document.querySelector('.p-blockui')).not.toBe(null);
});
it('When removeMask method triggered, isBlocked should be false and emitted', async () => {
wrapper = mount(BlockUI, {
props: {
blocked: true
},
slots: {
default: 'test'
}
});
await wrapper.vm.removeMask();
expect(wrapper.vm.isBlocked).toBe(false);
expect(wrapper.emitted().unblock.length).toBe(1);
}); });
}); });

2
components/calendar/Calendar.vue
View File

@ -2503,7 +2503,7 @@ export default {
if (cell) { if (cell) {
cell.tabIndex = '0'; cell.tabIndex = '0';
if (!this.preventFocus && (!this.navigationState || !this.navigationState.button) && !this.timePickerChange) { if (!this.inline && (!this.navigationState || !this.navigationState.button) && !this.timePickerChange) {
cell.focus(); cell.focus();
} }

2
components/confirmationservice/ConfirmationService.d.ts vendored
View File

@ -1,4 +1,4 @@
import Vue, { Plugin } from 'vue'; import { Plugin } from 'vue';
import { ConfirmationOptions } from '../confirmationoptions'; import { ConfirmationOptions } from '../confirmationoptions';
declare const plugin: Plugin; declare const plugin: Plugin;

1
components/rating/Rating.d.ts vendored
View File

@ -1,3 +1,4 @@
import { VNode } from 'vue';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers'; import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
export interface RatingChangeEvent { export interface RatingChangeEvent {

29
components/rating/Rating.spec.js
View File

@ -1,4 +1,5 @@
import { config, mount } from '@vue/test-utils'; import { config, mount } from '@vue/test-utils';
import { expect } from 'vitest';
import Rating from './Rating.vue'; import Rating from './Rating.vue';
config.global.mocks = { config.global.mocks = {
@ -43,4 +44,32 @@ describe('Rating.vue', () => {
expect(wrapper.find('.p-rating-cancel').exists()).toBe(false); expect(wrapper.find('.p-rating-cancel').exists()).toBe(false);
}); });
it('When star is clicked, onOptionClick method should triggered', async () => {
await wrapper.find('.p-rating-item').trigger('click');
expect(wrapper.find('.p-focus').exists()).toBe(true);
});
it('When input focused, focusedOptionIndex value should changed', async () => {
await wrapper.vm.onFocus(true, 5);
expect(wrapper.vm.focusedOptionIndex).toEqual(5);
expect(wrapper.emitted().focus[0]).toEqual([true]);
});
it('When input changed, onOptionSelect method should triggered', async () => {
const onOptionSelectSpy = vi.spyOn(wrapper.vm, 'onOptionSelect');
await wrapper.vm.onChange();
expect(onOptionSelectSpy).toHaveBeenCalled();
});
it('When input changed, onOptionSelect method should triggered', async () => {
await wrapper.setProps({ onIcon: 'test-icon' });
await wrapper.setProps({ modelValue: 5 });
expect(wrapper.find('.test-icon').exists()).toBe(true);
});
}); });

58
components/sidebar/Sidebar.spec.js
View File

@ -1,5 +1,6 @@
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import PrimeVue from 'primevue/config'; import PrimeVue from 'primevue/config';
import { describe, expect, it } from 'vitest';
import Sidebar from './Sidebar.vue'; import Sidebar from './Sidebar.vue';
describe('Sidebar.vue', () => { describe('Sidebar.vue', () => {
@ -18,7 +19,8 @@ describe('Sidebar.vue', () => {
bazeZIndex: 1000 bazeZIndex: 1000
}, },
slots: { slots: {
default: `<h3>Left Sidebar</h3>` default: `<h3>Left Sidebar</h3>`,
header: `<span class="header">Header Template</span>`
} }
}); });
}); });
@ -58,4 +60,58 @@ describe('Sidebar.vue', () => {
expect(icon.classes()).toContain('pi-discord'); expect(icon.classes()).toContain('pi-discord');
}); });
it('should header slot rendered', () => {
expect(wrapper.find('.p-sidebar-header').exists()).toBe(true);
expect(wrapper.find('.p-sidebar-header-content').exists()).toBe(true);
expect(wrapper.find('span.header').exists()).toBe(true);
expect(wrapper.find('span.header').text()).toBe('Header Template');
});
it('should default slot rendered', () => {
expect(wrapper.find('h3').exists()).toBe(true);
expect(wrapper.find('h3').text()).toBe('Left Sidebar');
});
it('should keydown work', async () => {
const event = { code: 'Escape' };
await wrapper.vm.onKeydown(event);
expect(wrapper.emitted()['update:visible'][0]).toEqual([false]);
});
});
describe('when visible is false', () => {
let wrapper;
beforeEach(() => {
wrapper = mount(Sidebar, {
global: {
plugins: [PrimeVue],
stubs: {
teleport: true,
transition: false
}
},
props: {
visible: true,
bazeZIndex: 1000
}
});
});
it('should show and hide emit work', async () => {
expect(wrapper.emitted()['show'][0]).toEqual([]);
await wrapper.setProps({ visible: false });
expect(wrapper.emitted()['hide'][0]).toEqual([]);
});
it('should be destroyed', () => {
wrapper.unmount();
expect(wrapper.componentVM.container).toBe(null);
expect(wrapper.componentVM.mask).toBe(null);
});
}); });

2
components/splitter/Splitter.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div :class="containerClass"> <div :class="containerClass">
<template v-for="(panel, i) of panels" :key="i" class="p-splitter-panel"> <template v-for="(panel, i) of panels" :key="i">
<component :is="panel" tabindex="-1"></component> <component :is="panel" tabindex="-1"></component>
<div <div
v-if="i !== panels.length - 1" v-if="i !== panels.length - 1"

12
layouts/AppDocumentation.vue
View File

@ -1,7 +1,7 @@
<script lang="jsx"> <script lang="jsx">
import EventBus from './AppEventBus';
import LiveEditor from '@/pages/liveeditor/LiveEditor'; import LiveEditor from '@/pages/liveeditor/LiveEditor';
import { services, data } from '@/pages/liveeditor/LiveEditorData'; import { data, services } from '@/pages/liveeditor/LiveEditorData';
import EventBus from './AppEventBus';
export default { export default {
name: 'appdoc', name: 'appdoc',
@ -14,13 +14,17 @@ export default {
extPages: null, extPages: null,
extFiles: null, extFiles: null,
component: null, component: null,
github: null github: {
type: String,
default: 'index'
}
}, },
viewGithubListener: null, viewGithubListener: null,
mounted() { mounted() {
this.viewGithubListener = () => { this.viewGithubListener = () => {
window.open('https://github.com/primefaces/primevue/blob/master/src/views/' + this.github, '_blank'); window.open('https://github.com/primefaces/primevue/blob/master/pages/' + this.name.toLowerCase().replaceAll('demo', '/') + this.github + '.vue', '_blank');
}; };
EventBus.on('view-github', this.viewGithubListener); EventBus.on('view-github', this.viewGithubListener);
}, },
beforeUnmount() { beforeUnmount() {

7
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: '/'
}; };
}, },
mounted() { mounted() {
@ -97,8 +96,6 @@ export default {
this.routes.push(childRoute); this.routes.push(childRoute);
}); });
this.baseUrl = process.dev ? '/' : '/primevue-nuxt/';
}, },
methods: { methods: {
toggleSubmenu(event, name) { toggleSubmenu(event, name) {

86
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: '/'
}; };
}, },
watch: { watch: {
@ -312,7 +311,6 @@ export default {
container: null, container: null,
mounted() { mounted() {
this.bindScrollListener(); this.bindScrollListener();
this.baseUrl = process.dev ? '/' : '/primevue-nuxt/';
}, },
beforeUnmount() { beforeUnmount() {
if (this.scrollListener) { if (this.scrollListener) {

9
middleware/route.global.js Normal file
View File

@ -0,0 +1,9 @@
export default defineNuxtRouteMiddleware((to, from) => {
useNuxtApp().hook('page:finish', () => {
if (to.path !== from.path && history.state.scroll) {
setTimeout(() => window.scrollTo(history.state.scroll), 0);
} else {
setTimeout(() => window.scrollTo(0, 0), 0);
}
});
});

11
nuxt.config.js
View File

@ -1,12 +1,12 @@
import vueJsx from '@vitejs/plugin-vue-jsx'; import vueJsx from '@vitejs/plugin-vue-jsx';
const path = require('path');
const baseUrl = process.env.NODE_ENV === 'production' ? '/primevue-nuxt/' : '/'; import path from 'path';
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({
typescript: false, typescript: false,
components: true, components: true,
target: 'static',
app: { app: {
baseURL: baseUrl, baseURL: baseUrl,
head: { head: {
@ -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()],

53677
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

18
package.json
View File

@ -20,19 +20,28 @@
"format": "prettier --write \"**/*.{js,vue,d.ts}\"", "format": "prettier --write \"**/*.{js,vue,d.ts}\"",
"format:check": "prettier --check \"**/*.{js,vue,d.ts}\"", "format:check": "prettier --check \"**/*.{js,vue,d.ts}\"",
"test:unit": "vitest", "test:unit": "vitest",
"test:build": "NODE_ENV=production rollup -c" "test:coverage": "vitest --coverage",
"lint": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
"lint:fix": "eslint --fix --ext \".js,.vue\" --ignore-path .gitignore ."
}, },
"devDependencies": { "devDependencies": {
"@babel/eslint-parser": "^7.18.9",
"@fullcalendar/core": "^5.11.0", "@fullcalendar/core": "^5.11.0",
"@fullcalendar/daygrid": "^5.11.0", "@fullcalendar/daygrid": "^5.11.0",
"@fullcalendar/interaction": "^5.11.0", "@fullcalendar/interaction": "^5.11.0",
"@fullcalendar/timegrid": "^5.11.0", "@fullcalendar/timegrid": "^5.11.0",
"@fullcalendar/vue3": "^5.11.0", "@fullcalendar/vue3": "^5.11.0",
"@vitejs/plugin-vue-jsx": "^2.0.1", "@vitejs/plugin-vue-jsx": "^2.0.1",
"@vitest/coverage-istanbul": "^0.26.2",
"@vue/test-utils": "^2.0.0", "@vue/test-utils": "^2.0.0",
"@vuelidate/core": "^2.0.0-alpha.14", "@vuelidate/core": "^2.0.0-alpha.14",
"@vuelidate/validators": "^2.0.0-alpha.12", "@vuelidate/validators": "^2.0.0-alpha.12",
"chart.js": "3.3.2", "chart.js": "3.3.2",
"eslint": "^8.30.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-nuxt": "^4.0.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-vue": "^9.4.0",
"gulp": "^4.0.2", "gulp": "^4.0.2",
"gulp-concat": "^2.6.0", "gulp-concat": "^2.6.0",
"gulp-flatten": "^0.4.0", "gulp-flatten": "^0.4.0",
@ -41,6 +50,7 @@
"gulp-uglifycss": "^1.0.6", "gulp-uglifycss": "^1.0.6",
"jsdom": "^19.0.0", "jsdom": "^19.0.0",
"nuxt": "^3.0.0", "nuxt": "^3.0.0",
"prettier": "2.7.1",
"primeflex": "^3.3.0", "primeflex": "^3.3.0",
"primeicons": "^6.0.1", "primeicons": "^6.0.1",
"quill": "^1.3.7", "quill": "^1.3.7",
@ -49,10 +59,6 @@
"rollup-plugin-vue": "^6.0.0-beta.9", "rollup-plugin-vue": "^6.0.0-beta.9",
"sass": "^1.45.0", "sass": "^1.45.0",
"sass-loader": "^8.0.2", "sass-loader": "^8.0.2",
"vitest": "^0.23.2", "vitest": "^0.23.2"
"prettier": "2.7.1",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-vue": "^9.4.0",
"@babel/eslint-parser": "^7.18.9"
} }
} }

2
pages/accordion/AccordionDoc.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<AppDoc name="AccordionDemo" :sources="sources" github="accordion/AccordionDemo.vue"> <AppDoc name="AccordionDemo" :sources="sources">
<h5>Import via Module</h5> <h5>Import via Module</h5>
<pre v-code.script><code> <pre v-code.script><code>
import Accordion from 'primevue/accordion'; import Accordion from 'primevue/accordion';

2
pages/autocomplete/AutoCompleteDoc.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<AppDoc name="AutoCompleteDemo" :sources="sources" :service="['CountryService']" :data="['countries']" github="autocomplete/AutoCompleteDemo.vue"> <AppDoc name="AutoCompleteDemo" :sources="sources" :service="['CountryService']" :data="['countries']">
<h5>Import via Module</h5> <h5>Import via Module</h5>
<pre v-code.script><code> <pre v-code.script><code>
import AutoComplete from 'primevue/autocomplete'; import AutoComplete from 'primevue/autocomplete';

4
pages/autocomplete/index.vue
View File

@ -22,7 +22,7 @@
<AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="searchCity($event)" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items"> <AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="searchCity($event)" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items">
<template #optiongroup="slotProps"> <template #optiongroup="slotProps">
<div class="flex align-items-center country-item"> <div class="flex align-items-center country-item">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.item.code.toLowerCase()" width="18" /> <img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.item.code.toLowerCase()" width="18" />
<div>{{ slotProps.item.label }}</div> <div>{{ slotProps.item.label }}</div>
</div> </div>
</template> </template>
@ -32,7 +32,7 @@
<AutoComplete v-model="selectedCountry2" loadingIcon="pi pi-spinner" :suggestions="filteredCountries" @complete="searchCountry($event)" :dropdown="true" optionLabel="name" forceSelection> <AutoComplete v-model="selectedCountry2" loadingIcon="pi pi-spinner" :suggestions="filteredCountries" @complete="searchCountry($event)" :dropdown="true" optionLabel="name" forceSelection>
<template #item="slotProps"> <template #item="slotProps">
<div class="country-item"> <div class="country-item">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.item.code.toLowerCase()" /> <img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.item.code.toLowerCase()" />
<div>{{ slotProps.item.name }}</div> <div>{{ slotProps.item.name }}</div>
</div> </div>
</template> </template>

2
pages/avatar/AvatarDoc.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<AppDoc name="AvatarDemo" :sources="sources" github="avatar/AvatarDemo.vue"> <AppDoc name="AvatarDemo" :sources="sources">
<h5>Import via Module</h5> <h5>Import via Module</h5>
<pre v-code.script><code> <pre v-code.script><code>
import Avatar from 'primevue/avatar'; import Avatar from 'primevue/avatar';

26
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,14 +109,6 @@
import AvatarDoc from './AvatarDoc'; import AvatarDoc from './AvatarDoc';
export default { export default {
data() {
return {
baseUrl: '/'
};
},
mounted() {
this.baseUrl = process.dev ? '/' : '/primevue-nuxt/';
},
components: { components: {
AvatarDoc: AvatarDoc AvatarDoc: AvatarDoc
} }

2
pages/badge/BadgeDoc.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<AppDoc name="BadgeDemo" :sources="sources" github="badge/BadgeDemo.vue"> <AppDoc name="BadgeDemo" :sources="sources">
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>Badge can either be used as a standalone component or as a directive.</p> <p>Badge can either be used as a standalone component or as a directive.</p>

2
pages/blockui/BlockUIDoc.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<AppDoc name="BlockUIDemo" :sources="sources" github="blockui/BlockUIDemo.vue"> <AppDoc name="BlockUIDemo" :sources="sources">
<h5>Import via Module</h5> <h5>Import via Module</h5>
<pre v-code.script><code> <pre v-code.script><code>
import BlockUI from 'primevue/blockui'; import BlockUI from 'primevue/blockui';

2
pages/breadcrumb/BreadcrumbDoc.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<AppDoc name="BreadcrumbDemo" :sources="sources" github="breadcrumb/BreadcrumbDemo.vue"> <AppDoc name="BreadcrumbDemo" :sources="sources">
<h5>Import via Module</h5> <h5>Import via Module</h5>
<pre v-code.script><code> <pre v-code.script><code>
import Breadcrumb from 'primevue/breadcrumb'; import Breadcrumb from 'primevue/breadcrumb';

6
pages/button/ButtonDoc.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<AppDoc name="ButtonDemo" :sources="sources" github="button/ButtonDemo.vue"> <AppDoc name="ButtonDemo" :sources="sources">
<h5>Import via Module</h5> <h5>Import via Module</h5>
<pre v-code.script><code> <pre v-code.script><code>
import Button from 'primevue/button'; import Button from 'primevue/button';
@ -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="../../assets/images/logo.svg" style="width: 1.5rem"/&gt; &lt;img alt="logo" src="@/assets/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="../../assets/images/logo.svg" style="width: 1.5rem" /&gt; &lt;img alt="logo" src="@/assets/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/calendar/CalendarDoc.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<AppDoc name="CalendarDemo" :sources="sources" github="calendar/CalendarDemo.vue"> <AppDoc name="CalendarDemo" :sources="sources">
<h5>Import via Module</h5> <h5>Import via Module</h5>
<pre v-code.script><code> <pre v-code.script><code>
import Calendar from 'primevue/calendar'; import Calendar from 'primevue/calendar';

2
pages/card/CardDoc.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<AppDoc name="CardDemo" :sources="sources" github="card/CardDemo.vue"> <AppDoc name="CardDemo" :sources="sources">
<h5>Import via Module</h5> <h5>Import via Module</h5>
<pre v-code.script><code> <pre v-code.script><code>
import Card from 'primevue/card'; import Card from 'primevue/card';

2
pages/carousel/CarouselDoc.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<AppDoc name="CarouselDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="carousel/CarouselDemo.vue"> <AppDoc name="CarouselDemo" :sources="sources" :service="['ProductService']" :data="['products-small']">
<h5>Import via Module</h5> <h5>Import via Module</h5>
<pre v-code.script><code> <pre v-code.script><code>
import Carousel from 'primevue/carousel'; import Carousel from 'primevue/carousel';

11
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: '/'
}; };
}, },
productService: null, productService: null,
@ -134,8 +133,6 @@ export default {
}, },
mounted() { mounted() {
this.productService.getProductsSmall().then((data) => (this.products = data.slice(0, 9))); this.productService.getProductsSmall().then((data) => (this.products = data.slice(0, 9)));
this.baseUrl = process.dev ? '/' : '/primevue-nuxt/';
}, },
components: { components: {
CarouselDoc: CarouselDoc CarouselDoc: CarouselDoc

4
pages/cascadeselect/CascadeSelectDoc.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<AppDoc name="CascadeSelectDemo" :sources="sources" github="cascadeselect/CascadeSelectDemo.vue"> <AppDoc name="CascadeSelectDemo" :sources="sources">
<h5>Import via Module</h5> <h5>Import via Module</h5>
<pre v-code.script><code> <pre v-code.script><code>
import CascadeSelect from 'primevue/cascadeselect'; import CascadeSelect from 'primevue/cascadeselect';
@ -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="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" v-if="slotProps.option.states" /&gt; &lt;img src="@/assets/images/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;

2
pages/cascadeselect/index.vue
View File

@ -22,7 +22,7 @@
<CascadeSelect v-model="selectedCity2" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City"> <CascadeSelect v-model="selectedCity2" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City">
<template #option="slotProps"> <template #option="slotProps">
<div class="country-item"> <div class="country-item">
<img v-if="slotProps.option.states" src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" /> <img v-if="slotProps.option.states" src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" />
<i v-if="slotProps.option.cities" class="pi pi-compass mr-2"></i> <i v-if="slotProps.option.cities" class="pi pi-compass mr-2"></i>
<i v-if="slotProps.option.cname" class="pi pi-map-marker mr-2"></i> <i v-if="slotProps.option.cname" class="pi pi-map-marker mr-2"></i>
<span>{{ slotProps.option.cname || slotProps.option.name }}</span> <span>{{ slotProps.option.cname || slotProps.option.name }}</span>

2
pages/chart/BarChartDoc.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/BarChartDemo.vue" /> <AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="Bar" />
</template> </template>
<script> <script>

2
pages/chart/ComboChartDoc.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/ComboChartDemo.vue" /> <AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="Combo" />
</template> </template>
<script> <script>

2
pages/chart/DoughnutChartDoc.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/DoughnutChartDemo.vue" /> <AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="Doughnut" />
</template> </template>
<script> <script>

2
pages/chart/LineChartDoc.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/LineChartDemo.vue" /> <AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="Line" />
</template> </template>
<script> <script>

2
pages/chart/PieChartDoc.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/PieChartDemo.vue" /> <AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="Pie" />
</template> </template>
<script> <script>

2
pages/chart/PolarAreaChartDoc.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/PolarAreaChartDemo.vue" /> <AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="PolarArea" />
</template> </template>
<script> <script>

2
pages/chart/RadarChartDoc.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="chart/RadarChartDemo.vue" /> <AppDoc name="ChartDemo" :sources="sources" :dependencies="{ 'chart.js': '3.3.2' }" component="Chart" github="Radar" />
</template> </template>
<script> <script>

2
pages/checkbox/CheckboxDoc.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<AppDoc name="CheckboxDemo" :sources="sources" github="checkbox/CheckboxDemo.vue"> <AppDoc name="CheckboxDemo" :sources="sources">
<h5>Import via Module</h5> <h5>Import via Module</h5>
<pre v-code.script><code> <pre v-code.script><code>
import Checkbox from 'primevue/checkbox'; import Checkbox from 'primevue/checkbox';

2
pages/chip/ChipDoc.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<AppDoc name="ChipDemo" :sources="sources" github="chip/ChipDemo.vue"> <AppDoc name="ChipDemo" :sources="sources">
<h5>Import via Module</h5> <h5>Import via Module</h5>
<pre v-code.script><code> <pre v-code.script><code>
import Chip from 'primevue/chip'; import Chip from 'primevue/chip';

20
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,14 +57,6 @@
import ChipDoc from './ChipDoc'; import ChipDoc from './ChipDoc';
export default { export default {
data() {
return {
baseUrl: '/'
};
},
mounted() {
this.baseUrl = process.dev ? '/' : '/primevue-nuxt/';
},
components: { components: {
ChipDoc: ChipDoc ChipDoc: ChipDoc
} }

2
pages/chips/ChipsDoc.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<AppDoc name="ChipsDemo" :sources="sources" github="chips/ChipsDemo.vue"> <AppDoc name="ChipsDemo" :sources="sources">
<h5>Import via Module</h5> <h5>Import via Module</h5>
<pre v-code.script><code> <pre v-code.script><code>
import Chips from 'primevue/chips'; import Chips from 'primevue/chips';

8
pages/colorpicker/ColorPickerDoc.vue
View File

File diff suppressed because one or more lines are too long

2
pages/confirmdialog/ConfirmDialogDoc.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<AppDoc name="ConfirmDialogDemo" :sources="sources" github="confirmdialog/ConfirmDialogDemo.vue"> <AppDoc name="ConfirmDialogDemo" :sources="sources">
<h5>ConfirmationService</h5> <h5>ConfirmationService</h5>
<p>ConfirmDialog is controlled via the <i>ConfirmationService</i> that needs to be installed globally before the application instance is created.</p> <p>ConfirmDialog is controlled via the <i>ConfirmationService</i> that needs to be installed globally before the application instance is created.</p>
<pre v-code.script><code> <pre v-code.script><code>

2
pages/confirmpopup/ConfirmPopupDoc.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<AppDoc name="ConfirmPopupDemo" :sources="sources" github="confirmpopup/ConfirmPopupDemo.vue"> <AppDoc name="ConfirmPopupDemo" :sources="sources">
<h5>ConfirmationService</h5> <h5>ConfirmationService</h5>
<p>ConfirmPopup is controlled via the <i>ConfirmationService</i> that needs to be installed globally before the application instance is created.</p> <p>ConfirmPopup is controlled via the <i>ConfirmationService</i> that needs to be installed globally before the application instance is created.</p>
<pre v-code.script><code> <pre v-code.script><code>

2
pages/contextmenu/ContextMenuDoc.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<AppDoc name="ContextMenuDemo" :sources="sources" github="contextmenu/ContextMenuDemo.vue"> <AppDoc name="ContextMenuDemo" :sources="sources">
<h5>Import via Module</h5> <h5>Import via Module</h5>
<pre v-code.script><code> <pre v-code.script><code>
import ContextMenu from 'primevue/contextmenu'; import ContextMenu from 'primevue/contextmenu';

2
pages/datatable/ColGroup.vue
View File

@ -55,7 +55,7 @@
</div> </div>
</div> </div>
<AppDoc name="DataTableColGroupDemo" :sources="sources" github="datatable/DataTableColGroupDemo.vue" /> <AppDoc name="DataTableDemo" :sources="sources" github="ColGroup" />
</div> </div>
</template> </template>

2
pages/datatable/ColResize.vue
View File

@ -33,7 +33,7 @@
</div> </div>
</div> </div>
<AppDoc name="DataTableColResizeDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableColResizeDemo.vue" /> <AppDoc name="DataTableDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="ColResize" />
</div> </div>
</template> </template>

2
pages/datatable/ColToggle.vue
View File

@ -22,7 +22,7 @@
</div> </div>
</div> </div>
<AppDoc name="DataTableColToggleDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableColToggleDemo.vue" /> <AppDoc name="DataTableDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="ColToggle" />
</div> </div>
</template> </template>

2
pages/datatable/ContextMenu.vue
View File

@ -25,7 +25,7 @@
<ContextMenu ref="cm" :model="menuModel" /> <ContextMenu ref="cm" :model="menuModel" />
</div> </div>
<AppDoc name="DataTableContextMenuDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableContextMenuDemo.vue" /> <AppDoc name="DataTableDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="ContextMenu" />
</div> </div>
</template> </template>

8
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">
@ -171,7 +171,7 @@
</Dialog> </Dialog>
</div> </div>
<AppDoc name="DataTableCrudDemo" :sources="sources" :service="['ProductService']" :data="['products']" github="datatable/DataTableCrudDemo.vue" /> <AppDoc name="DataTableDemo" :sources="sources" :service="['ProductService']" :data="['products']" github="Crud" />
</div> </div>
</template> </template>
@ -1170,8 +1170,7 @@ export default {
</style> </style>
` `
} }
}, }
baseUrl: '/'
}; };
}, },
productService: null, productService: null,
@ -1181,7 +1180,6 @@ export default {
}, },
mounted() { mounted() {
this.productService.getProducts().then((data) => (this.products = data)); this.productService.getProducts().then((data) => (this.products = data));
this.baseUrl = process.dev ? '/' : '/primevue-nuxt/';
}, },
methods: { methods: {
formatCurrency(value) { formatCurrency(value) {

2
pages/datatable/DataTableBasicDoc.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<AppDoc name="DataTableBasicDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableBasicDemo.vue" /> <AppDoc name="DataTableDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="Basic" />
</template> </template>
<script> <script>

2
pages/datatable/DataTableDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="content-section documentation"> <div class="content-section documentation">
<AppDoc name="DataTableDemo" :sources="sources" :service="['CustomerService']" :data="['customers-small']" github="datatable/DataTableDemo.vue"> <AppDoc name="DataTableDemo" :sources="sources" :service="['CustomerService']" :data="['customers-small']">
<h5>Import via Module</h5> <h5>Import via Module</h5>
<pre v-code.script><code> <pre v-code.script><code>
import DataTable from 'primevue/datatable'; import DataTable from 'primevue/datatable';

2
pages/datatable/DynamicColumns.vue
View File

@ -16,7 +16,7 @@
</div> </div>
</div> </div>
<AppDoc name="DataTableDynamicColumnsDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableDynamicColumnsDemo.vue" /> <AppDoc name="DataTableDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="DynamicColumns" />
</div> </div>
</template> </template>

2
pages/datatable/Edit.vue
View File

@ -70,7 +70,7 @@
</div> </div>
</div> </div>
<AppDoc name="DataTableEditDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableEditDemo.vue" /> <AppDoc name="DataTableDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="Edit" />
</div> </div>
</template> </template>

2
pages/datatable/Export.vue
View File

@ -24,7 +24,7 @@
</div> </div>
</div> </div>
<AppDoc name="DataTableExportDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableExportDemo.vue" /> <AppDoc name="DataTableDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="Export" />
</div> </div>
</template> </template>

19
pages/datatable/Filter.vue
View File

@ -46,7 +46,7 @@
</Column> </Column>
<Column header="Country" filterField="country.name" style="min-width: 12rem"> <Column header="Country" filterField="country.name" style="min-width: 12rem">
<template #body="{ data }"> <template #body="{ data }">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" /> <img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" />
<span class="image-text">{{ data.country.name }}</span> <span class="image-text">{{ data.country.name }}</span>
</template> </template>
<template #filter="{ filterModel }"> <template #filter="{ filterModel }">
@ -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>
@ -169,7 +169,7 @@
</Column> </Column>
<Column header="Country" filterField="country.name" style="min-width: 12rem"> <Column header="Country" filterField="country.name" style="min-width: 12rem">
<template #body="{ data }"> <template #body="{ data }">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" /> <img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" />
<span class="image-text">{{ data.country.name }}</span> <span class="image-text">{{ data.country.name }}</span>
</template> </template>
<template #filter="{ filterModel, filterCallback }"> <template #filter="{ filterModel, filterCallback }">
@ -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>
@ -220,7 +220,7 @@
</div> </div>
</div> </div>
<AppDoc name="DataTableFilterDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="datatable/DataTableFilterDemo.vue" /> <AppDoc name="DataTableDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="Filter" />
</div> </div>
</template> </template>
@ -1315,8 +1315,7 @@ export default {
</style> </style>
` `
} }
}, }
baseUrl: '/'
}; };
}, },
created() { created() {
@ -1335,8 +1334,6 @@ export default {
this.loading2 = false; this.loading2 = false;
this.customers2.forEach((customer) => (customer.date = new Date(customer.date))); this.customers2.forEach((customer) => (customer.date = new Date(customer.date)));
}); });
this.baseUrl = process.dev ? '/' : '/primevue-nuxt/';
}, },
methods: { methods: {
formatDate(value) { formatDate(value) {

2
pages/datatable/FlexScroll.vue
View File

@ -17,7 +17,7 @@
</div> </div>
</div> </div>
<AppDoc name="DataTableFlexScrollDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="datatable/DataTableFlexScrollDemo.vue" /> <AppDoc name="DataTableDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="FlexScroll" />
</div> </div>
</template> </template>

2
pages/datatable/GridLines.vue
View File

@ -21,7 +21,7 @@
</div> </div>
</div> </div>
<AppDoc name="DataTableGridLinesDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableGridLinesDemo.vue" /> <AppDoc name="DataTableDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="GridLines" />
</div> </div>
</template> </template>

2
pages/datatable/Lazy.vue
View File

@ -62,7 +62,7 @@
</div> </div>
</div> </div>
<AppDoc name="DataTableLazyDemo" :sources="sources" :service="['CustomerService']" github="datatable/DataTableLazyDemo.vue" /> <AppDoc name="DataTableDemo" :sources="sources" :service="['CustomerService']" github="Lazy" />
</div> </div>
</template> </template>

2
pages/datatable/Paginator.vue
View File

@ -63,7 +63,7 @@
</div> </div>
</div> </div>
<AppDoc name="DataTablePaginatorDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="datatable/DataTablePaginatorDemo.vue" /> <AppDoc name="DataTableDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="Paginator" />
</div> </div>
</template> </template>

2
pages/datatable/Reorder.vue
View File

@ -17,7 +17,7 @@
</div> </div>
</div> </div>
<AppDoc name="DataTableReorderDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableReorderDemo.vue" /> <AppDoc name="DataTableDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="Reorder" />
</div> </div>
</template> </template>

2
pages/datatable/Responsive.vue
View File

@ -50,7 +50,7 @@
</div> </div>
</div> </div>
<AppDoc name="DataTableResponsiveDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableResponsiveDemo.vue" /> <AppDoc name="DataTableDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="Responsive" />
</div> </div>
</template> </template>

8
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>
@ -69,7 +69,7 @@
</div> </div>
</div> </div>
<AppDoc name="DataTableRowExpandDemo" :sources="sources" :service="['ProductService']" :data="['products-orders-small']" github="datatable/DataTableRowExpandDemo.vue" /> <AppDoc name="DataTableDemo" :sources="sources" :service="['ProductService']" :data="['products-orders-small']" github="RowExpand" />
</div> </div>
</template> </template>
@ -450,8 +450,7 @@ export default {
</style> </style>
` `
} }
}, }
baseUrl: '/'
}; };
}, },
productService: null, productService: null,
@ -460,7 +459,6 @@ export default {
}, },
mounted() { mounted() {
this.productService.getProductsWithOrdersSmall().then((data) => (this.products = data)); this.productService.getProductsWithOrdersSmall().then((data) => (this.products = data));
this.baseUrl = process.dev ? '/' : '/primevue-nuxt/';
}, },
methods: { methods: {
onRowExpand(event) { onRowExpand(event) {

18
pages/datatable/RowGroup.vue
View File

@ -17,7 +17,7 @@
<Column field="name" header="Name" style="min-width: 200px"></Column> <Column field="name" header="Name" style="min-width: 200px"></Column>
<Column field="country" header="Country" style="min-width: 200px"> <Column field="country" header="Country" style="min-width: 200px">
<template #body="slotProps"> <template #body="slotProps">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" /> <img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
<span class="image-text">{{ slotProps.data.country.name }}</span> <span class="image-text">{{ slotProps.data.country.name }}</span>
</template> </template>
</Column> </Column>
@ -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">
@ -61,7 +61,7 @@
<Column field="name" header="Name"></Column> <Column field="name" header="Name"></Column>
<Column field="country" header="Country"> <Column field="country" header="Country">
<template #body="slotProps"> <template #body="slotProps">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" /> <img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
<span class="image-text">{{ slotProps.data.country.name }}</span> <span class="image-text">{{ slotProps.data.country.name }}</span>
</template> </template>
</Column> </Column>
@ -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,14 +93,14 @@
</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>
<Column field="name" header="Name"></Column> <Column field="name" header="Name"></Column>
<Column field="country" header="Country"> <Column field="country" header="Country">
<template #body="slotProps"> <template #body="slotProps">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" /> <img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
<span class="image-text">{{ slotProps.data.country.name }}</span> <span class="image-text">{{ slotProps.data.country.name }}</span>
</template> </template>
</Column> </Column>
@ -115,7 +115,7 @@
</div> </div>
</div> </div>
<AppDoc name="DataTableRowGroupDemo" :sources="sources" :service="['CustomerService']" :data="['customers-medium']" github="datatable/DataTableRowGroupDemo.vue" /> <AppDoc name="DataTableDemo" :sources="sources" :service="['CustomerService']" :data="['customers-medium']" github="RowGroup" />
</div> </div>
</template> </template>
@ -631,8 +631,7 @@ export default {
</style> </style>
` `
} }
}, }
baseUrl: '/'
}; };
}, },
customerService: null, customerService: null,
@ -641,7 +640,6 @@ export default {
}, },
mounted() { mounted() {
this.customerService.getCustomersMedium().then((data) => (this.customers = data)); this.customerService.getCustomersMedium().then((data) => (this.customers = data));
this.baseUrl = process.dev ? '/' : '/primevue-nuxt/';
}, },
methods: { methods: {
onRowGroupExpand(event) { onRowGroupExpand(event) {

11
pages/datatable/Scroll.vue
View File

@ -104,7 +104,7 @@
<Column field="name" header="Name" style="min-width: 200px"></Column> <Column field="name" header="Name" style="min-width: 200px"></Column>
<Column field="country" header="Country" style="min-width: 200px"> <Column field="country" header="Country" style="min-width: 200px">
<template #body="slotProps"> <template #body="slotProps">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" /> <img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
<span class="image-text">{{ slotProps.data.country.name }}</span> <span class="image-text">{{ slotProps.data.country.name }}</span>
</template> </template>
</Column> </Column>
@ -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">
@ -126,7 +126,7 @@
</div> </div>
</div> </div>
<AppDoc name="DataTableScrollDemo" :sources="sources" :service="['CustomerService']" :data="['customers-medium', 'customers-large']" github="datatable/DataTableScrollDemo.vue" /> <AppDoc name="DataTableDemo" :sources="sources" :service="['CustomerService']" :data="['customers-medium', 'customers-large']" github="Scroll" />
</div> </div>
</template> </template>
@ -825,8 +825,7 @@ export default {
</style> </style>
` `
} }
}, }
baseUrl: '/'
}; };
}, },
customerService: null, customerService: null,
@ -862,8 +861,6 @@ export default {
} }
} }
]; ];
this.baseUrl = process.dev ? '/' : '/primevue-nuxt/';
}, },
methods: { methods: {
openDialog() { openDialog() {

2
pages/datatable/Selection.vue
View File

@ -79,7 +79,7 @@
</div> </div>
</div> </div>
<AppDoc name="DataTableSelectionDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableSelectionDemo.vue" /> <AppDoc name="DataTableDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="Selection" />
</div> </div>
</template> </template>

2
pages/datatable/Size.vue
View File

@ -40,7 +40,7 @@
</div> </div>
</div> </div>
<AppDoc name="DataTableSizeDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableSizeDemo.vue" /> <AppDoc name="DataTableDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="Size" />
</div> </div>
</template> </template>

2
pages/datatable/Sort.vue
View File

@ -71,7 +71,7 @@
</div> </div>
</div> </div>
<AppDoc name="DataTableSortDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableSortDemo.vue" /> <AppDoc name="DataTableDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="Sort" />
</div> </div>
</template> </template>

18
pages/datatable/State.vue
View File

@ -36,7 +36,7 @@
</Column> </Column>
<Column header="Country" :sortable="true" sortField="country.name" filterField="country.name" filterMatchMode="contains" style="width: 25%"> <Column header="Country" :sortable="true" sortField="country.name" filterField="country.name" filterMatchMode="contains" style="width: 25%">
<template #body="slotProps"> <template #body="slotProps">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" /> <img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
<span class="image-text">{{ slotProps.data.country.name }}</span> <span class="image-text">{{ slotProps.data.country.name }}</span>
</template> </template>
<template #filter> <template #filter>
@ -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>
@ -102,7 +102,7 @@
</Column> </Column>
<Column header="Country" :sortable="true" sortField="country.name" filterField="country.name" filterMatchMode="contains" style="width: 25%"> <Column header="Country" :sortable="true" sortField="country.name" filterField="country.name" filterMatchMode="contains" style="width: 25%">
<template #body="slotProps"> <template #body="slotProps">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" /> <img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
<span class="image-text">{{ slotProps.data.country.name }}</span> <span class="image-text">{{ slotProps.data.country.name }}</span>
</template> </template>
<template #filter> <template #filter>
@ -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>
@ -142,7 +142,7 @@
</div> </div>
</div> </div>
<AppDoc name="DataTableStateDemo" :sources="sources" :service="['CustomerService']" :data="['customers-medium']" github="datatable/DataTableStateDemo.vue" /> <AppDoc name="DataTableDemo" :sources="sources" :service="['CustomerService']" :data="['customers-medium']" github="State" />
</div> </div>
</template> </template>
@ -694,8 +694,7 @@ export default {
<\\/script> <\\/script>
` `
} }
}, }
baseUrl: '/'
}; };
}, },
customerService: null, customerService: null,
@ -706,7 +705,6 @@ export default {
}, },
mounted() { mounted() {
this.customerService.getCustomersMedium().then((data) => (this.customers = data)); this.customerService.getCustomersMedium().then((data) => (this.customers = data));
this.baseUrl = process.dev ? '/' : '/primevue-nuxt/';
}, },
methods: { methods: {
initFilters1() { initFilters1() {

2
pages/datatable/Striped.vue
View File

@ -19,7 +19,7 @@
</div> </div>
</div> </div>
<AppDoc name="DataTableStripedDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableStripedDemo.vue" /> <AppDoc name="DataTableDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="Striped" />
</div> </div>
</template> </template>

2
pages/datatable/Style.vue
View File

@ -25,7 +25,7 @@
</div> </div>
</div> </div>
<AppDoc name="DataTableStyleDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableStyleDemo.vue" /> <AppDoc name="DataTableDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="Style" />
</div> </div>
</template> </template>

8
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">
@ -43,7 +43,7 @@
</div> </div>
</div> </div>
<AppDoc name="DataTableTemplatingDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="datatable/DataTableTemplatingDemo.vue" /> <AppDoc name="DataTableDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="Templating" />
</div> </div>
</template> </template>
@ -295,8 +295,7 @@ export default {
</style> </style>
` `
} }
}, }
baseUrl: '/'
}; };
}, },
productService: null, productService: null,
@ -305,7 +304,6 @@ export default {
}, },
mounted() { mounted() {
this.productService.getProductsSmall().then((data) => (this.products = data)); this.productService.getProductsSmall().then((data) => (this.products = data));
this.baseUrl = process.dev ? '/' : '/primevue-nuxt/';
}, },
methods: { methods: {
formatCurrency(value) { formatCurrency(value) {

9
pages/datatable/VirtualScroll.vue
View File

@ -61,7 +61,7 @@
</div> </div>
</div> </div>
<AppDoc name="DataTableVirtualScrollDemo" :sources="sources" :service="['CarService']" github="datatable/DataTableVirtualScrollDemo.vue" /> <AppDoc name="DataTableDemo" :sources="sources" :service="['CarService']" github="VirtualScroll" />
</div> </div>
</template> </template>
@ -80,7 +80,7 @@ export default {
content: ` content: `
<template> <template>
<div> <div>
<div class="card"> <div class="card">
<h5>Preloaded Data (100000 Rows)</h5> <h5>Preloaded Data (100000 Rows)</h5>
<DataTable :value="cars" scrollable scrollHeight="400px" :virtualScrollerOptions="{ itemSize: 46 }"> <DataTable :value="cars" scrollable scrollHeight="400px" :virtualScrollerOptions="{ itemSize: 46 }">
<Column field="id" header="Id" style="min-width: '200px'"></Column> <Column field="id" header="Id" style="min-width: '200px'"></Column>
@ -185,7 +185,7 @@ export default {
content: ` content: `
<template> <template>
<div> <div>
<div class="card"> <div class="card">
<h5>Preloaded Data (100000 Rows)</h5> <h5>Preloaded Data (100000 Rows)</h5>
<DataTable :value="cars" scrollable scrollHeight="400px" :virtualScrollerOptions="{ itemSize: 46 }"> <DataTable :value="cars" scrollable scrollHeight="400px" :virtualScrollerOptions="{ itemSize: 46 }">
<Column field="id" header="Id" style="min-width: '200px'"></Column> <Column field="id" header="Id" style="min-width: '200px'"></Column>
@ -240,8 +240,7 @@ export default {
<script> <script>
import { ref, onMounted } from 'vue'; import { ref, onMounted } from 'vue';
import { FilterMatchMode } from 'primevue/api'; import CarService from './service/CarService';
import CustomerService from './service/CustomerService';
export default { export default {
setup() { setup() {

11
pages/datatable/index.vue
View File

@ -54,7 +54,7 @@
</Column> </Column>
<Column field="country.name" header="Country" sortable filterMatchMode="contains" style="min-width: 14rem"> <Column field="country.name" header="Country" sortable filterMatchMode="contains" style="min-width: 14rem">
<template #body="{ data }"> <template #body="{ data }">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" /> <img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" />
<span class="image-text">{{ data.country.name }}</span> <span class="image-text">{{ data.country.name }}</span>
</template> </template>
<template #filter="{ filterModel }"> <template #filter="{ filterModel }">
@ -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: '/'
}; };
}, },
created() { created() {
@ -181,8 +180,6 @@ export default {
this.customers.forEach((customer) => (customer.date = new Date(customer.date))); this.customers.forEach((customer) => (customer.date = new Date(customer.date)));
this.loading = false; this.loading = false;
}); });
this.baseUrl = process.dev ? '/' : '/primevue-nuxt/';
}, },
methods: { methods: {
formatDate(value) { formatDate(value) {

2
pages/dataview/DataViewDoc.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<AppDoc name="DataViewDemo" :sources="sources" :service="['ProductService']" :data="['products']" github="dataview/DataViewDemo.vue"> <AppDoc name="DataViewDemo" :sources="sources" :service="['ProductService']" :data="['products']">
<h5>Import via Module</h5> <h5>Import via Module</h5>
<pre v-code.script><code> <pre v-code.script><code>

2
pages/deferredcontent/DeferredContentDoc.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<AppDoc name="DeferredContentDemo" :sources="sources" :service="['ProductService']" :data="['products-small']" github="deferredcontent/DeferredContentDemo.vue"> <AppDoc name="DeferredContentDemo" :sources="sources" :service="['ProductService']" :data="['products-small']">
<h5>Import via Module</h5> <h5>Import via Module</h5>
<pre v-code.script><code> <pre v-code.script><code>
import DeferredContent from 'primevue/deferredcontent'; import DeferredContent from 'primevue/deferredcontent';

2
pages/dialog/DialogDoc.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<AppDoc name="DialogDemo" :sources="sources" github="dialog/DialogDemo.vue"> <AppDoc name="DialogDemo" :sources="sources">
<h5>Import via Module</h5> <h5>Import via Module</h5>
<pre v-code.script><code> <pre v-code.script><code>
import Dialog from 'primevue/dialog'; import Dialog from 'primevue/dialog';

2
pages/divider/DividerDoc.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<AppDoc name="DividerDemo" :sources="sources" github="divider/DividerDemo.vue"> <AppDoc name="DividerDemo" :sources="sources">
<h5>Import via Module</h5> <h5>Import via Module</h5>
<pre v-code.script><code> <pre v-code.script><code>
import Divider from 'primevue/divider'; import Divider from 'primevue/divider';

5
pages/dock/DockDoc.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<AppDoc name="DockDemo" :sources="sources" github="dock/DockDemo.vue" :service="['NodeService', 'PhotoService']" :data="['treenodes', 'photos']"> <AppDoc name="DockDemo" :sources="sources" :service="['NodeService', 'PhotoService']" :data="['treenodes', 'photos']">
<h5>Import via Module</h5> <h5>Import via Module</h5>
<pre v-code.script><code> <pre v-code.script><code>
import Dock from 'primevue/dock'; import Dock from 'primevue/dock';
@ -21,7 +21,7 @@ import Dock from 'primevue/dock';
</code></pre> </code></pre>
<pre v-code.script><code><template> <pre v-code.script><code>
export default { export default {
data() { data() {
return { return {
@ -47,7 +47,6 @@ import Dock from 'primevue/dock';
} }
} }
</template>
</code></pre> </code></pre>
<h5>MenuModel API</h5> <h5>MenuModel API</h5>

2
pages/dock/index.vue
View File

@ -362,7 +362,7 @@ export default {
width: 100%; width: 100%;
height: 450px; height: 450px;
position: relative; position: relative;
background-image: url('../../assets/images/dock/window.jpg'); background-image: url('@/assets/images/dock/window.jpg');
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
z-index: 1; z-index: 1;

2
pages/dropdown/DropdownDoc.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<AppDoc name="DropdownDemo" :sources="sources" github="dropdown/DropdownDemo.vue"> <AppDoc name="DropdownDemo" :sources="sources">
<h5>Import via Module</h5> <h5>Import via Module</h5>
<pre v-code.script><code> <pre v-code.script><code>
import Dropdown from 'primevue/dropdown'; import Dropdown from 'primevue/dropdown';

6
pages/dropdown/index.vue
View File

@ -25,7 +25,7 @@
<Dropdown v-model="selectedGroupedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items"> <Dropdown v-model="selectedGroupedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items">
<template #optiongroup="slotProps"> <template #optiongroup="slotProps">
<div class="flex align-items-center country-item"> <div class="flex align-items-center country-item">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" width="18" /> <img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" width="18" />
<div>{{ slotProps.option.label }}</div> <div>{{ slotProps.option.label }}</div>
</div> </div>
</template> </template>
@ -35,7 +35,7 @@
<Dropdown v-model="selectedCountry" :options="countries" optionLabel="name" :filter="true" placeholder="Select a Country" :showClear="true"> <Dropdown v-model="selectedCountry" :options="countries" optionLabel="name" :filter="true" placeholder="Select a Country" :showClear="true">
<template #value="slotProps"> <template #value="slotProps">
<div v-if="slotProps.value" class="country-item country-item-value"> <div v-if="slotProps.value" class="country-item country-item-value">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.value.code.toLowerCase()" /> <img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.value.code.toLowerCase()" />
<div>{{ slotProps.value.name }}</div> <div>{{ slotProps.value.name }}</div>
</div> </div>
<span v-else> <span v-else>
@ -44,7 +44,7 @@
</template> </template>
<template #option="slotProps"> <template #option="slotProps">
<div class="country-item"> <div class="country-item">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" /> <img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" />
<div>{{ slotProps.option.name }}</div> <div>{{ slotProps.option.name }}</div>
</div> </div>
</template> </template>

2
pages/dynamicdialog/DynamicDialogDoc.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<AppDoc name="DynamicDialogDemo" :sources="sources" :extFiles="extFiles" :service="['ProductService']" :data="['products-small']" github="dynamicdialog/DynamicDialogDemo.vue"> <AppDoc name="DynamicDialogDemo" :sources="sources" :extFiles="extFiles" :service="['ProductService']" :data="['products-small']">
<h5>DialogService</h5> <h5>DialogService</h5>
<p>Dynamic dialogs require the <i>DialogService</i> to be configured globally.</p> <p>Dynamic dialogs require the <i>DialogService</i> to be configured globally.</p>

2
pages/editor/EditorDoc.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<AppDoc name="EditorDemo" :sources="sources" :dependencies="{ quill: '^1.3.7' }" component="Editor" github="editor/EditorDemo.vue"> <AppDoc name="EditorDemo" :sources="sources" :dependencies="{ quill: '^1.3.7' }" component="Editor">
<h5>Import via Module</h5> <h5>Import via Module</h5>
<pre v-code.script><code> <pre v-code.script><code>
import Editor from 'primevue/editor'; import Editor from 'primevue/editor';

2
pages/fieldset/FieldsetDoc.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<AppDoc name="FieldsetDemo" :sources="sources" github="fieldset/FieldsetDemo.vue"> <AppDoc name="FieldsetDemo" :sources="sources">
<h5>Import via Module</h5> <h5>Import via Module</h5>
<pre v-code.script><code> <pre v-code.script><code>
import Fieldset from 'primevue/fieldset'; import Fieldset from 'primevue/fieldset';

2
pages/fileupload/FileUploadDoc.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<AppDoc name="FileUploadDemo" :sources="sources" github="fileupload/FileUploadDemo.vue"> <AppDoc name="FileUploadDemo" :sources="sources">
<h5>Import via Module</h5> <h5>Import via Module</h5>
<pre v-code.script><code> <pre v-code.script><code>
import FileUpload from 'primevue/fileupload'; import FileUpload from 'primevue/fileupload';

2
pages/filterservice/FilterServiceDoc.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<AppDoc name="FilterServiceDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="filterservice/FilterServiceDemo.vue"> <AppDoc name="FilterServiceDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']">
<h5>Import via Module</h5> <h5>Import via Module</h5>
<pre v-code.script><code> <pre v-code.script><code>
import &#123;FilterService&#125; from 'primevue/api'; import &#123;FilterService&#125; from 'primevue/api';

2
pages/filterservice/index.vue
View File

@ -31,7 +31,7 @@
</Column> </Column>
<Column header="Country" filterField="country.name" :filterMatchModeOptions="matchModeOptions"> <Column header="Country" filterField="country.name" :filterMatchModeOptions="matchModeOptions">
<template #body="{ data }"> <template #body="{ data }">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" /> <img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" />
<span class="image-text">{{ data.country.name }}</span> <span class="image-text">{{ data.country.name }}</span>
</template> </template>
<template #filter="{ filterModel, filterCallback }"> <template #filter="{ filterModel, filterCallback }">

2
pages/floatlabel/index.vue
View File

@ -112,7 +112,7 @@
</div> </div>
</div> </div>
<AppDoc name="FloatLabelDemo" :sources="sources" :service="['CountryService', 'NodeService']" :data="['countries', 'treenodes']" github="floatlabel/FloatLabelDemo.vue" /> <AppDoc name="FloatLabelDemo" :sources="sources" :service="['CountryService', 'NodeService']" :data="['countries', 'treenodes']" />
</div> </div>
</template> </template>

2
pages/focustrap/FocusTrapDoc.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<AppDoc name="FocusTrapDemo" :sources="sources" github="focustrap/FocusTrapDemo.vue"> <AppDoc name="FocusTrapDemo" :sources="sources">
<h5>Import via Module</h5> <h5>Import via Module</h5>
<pre v-code.script><code> <pre v-code.script><code>
import FocusTrap from 'primevue/focustrap'; import FocusTrap from 'primevue/focustrap';

1
pages/fullcalendar/FullCalendarDoc.vue
View File

@ -4,7 +4,6 @@
:sources="sources" :sources="sources"
:service="['EventService']" :service="['EventService']"
:data="['events']" :data="['events']"
github="fullcalendar/FullCalendarDemo.vue"
:dependencies="{ '@fullcalendar/core': '^5.7.2', '@fullcalendar/vue3': '^5.7.2', '@fullcalendar/daygrid': '^5.7.2', '@fullcalendar/interaction': '^5.7.2', '@fullcalendar/timegrid': '^5.7.2' }" :dependencies="{ '@fullcalendar/core': '^5.7.2', '@fullcalendar/vue3': '^5.7.2', '@fullcalendar/daygrid': '^5.7.2', '@fullcalendar/interaction': '^5.7.2', '@fullcalendar/timegrid': '^5.7.2' }"
component="FullCalendar" component="FullCalendar"
> >

8
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: ''
}; };
}, },
galleriaService: null, galleriaService: null,
@ -254,7 +253,6 @@ export default {
mounted() { mounted() {
this.galleriaService.getImages().then((data) => (this.images = data)); this.galleriaService.getImages().then((data) => (this.images = data));
this.bindDocumentListeners(); this.bindDocumentListeners();
this.baseUrl = process.dev ? '' : '/primevue-nuxt';
}, },
methods: { methods: {
onThumbnailButtonClick() { onThumbnailButtonClick() {

8
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: ''
}; };
}, },
galleriaService: null, galleriaService: null,
@ -105,7 +104,6 @@ export default {
}, },
mounted() { mounted() {
this.galleriaService.getImages().then((data) => (this.images = data)); this.galleriaService.getImages().then((data) => (this.images = data));
this.baseUrl = process.dev ? '' : '/primevue-nuxt';
} }
}; };
</script> </script>

8
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: ''
}; };
}, },
galleriaService: null, galleriaService: null,
@ -116,7 +115,6 @@ export default {
}, },
mounted() { mounted() {
this.galleriaService.getImages().then((data) => (this.images = data)); this.galleriaService.getImages().then((data) => (this.images = data));
this.baseUrl = process.dev ? '' : '/primevue-nuxt';
} }
}; };
</script> </script>

18
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: ''
}; };
}, },
galleriaService: null, galleriaService: null,
@ -234,7 +233,6 @@ export default {
}, },
mounted() { mounted() {
this.galleriaService.getImages().then((data) => (this.images = data)); this.galleriaService.getImages().then((data) => (this.images = data));
this.baseUrl = process.dev ? '' : '/primevue-nuxt';
}, },
methods: { methods: {
imageClick(index) { imageClick(index) {

19
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: ''
}; };
}, },
galleriaService: null, galleriaService: null,
@ -278,8 +277,6 @@ export default {
this.images = data; this.images = data;
this.images2 = data.slice(0, 5); this.images2 = data.slice(0, 5);
}); });
this.baseUrl = process.dev ? '' : '/primevue-nuxt';
} }
}; };
</script> </script>

20
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: ''
}; };
}, },
galleriaService: null, galleriaService: null,
@ -186,7 +185,6 @@ export default {
}, },
mounted() { mounted() {
this.galleriaService.getImages().then((data) => (this.images = data)); this.galleriaService.getImages().then((data) => (this.images = data));
this.baseUrl = process.dev ? '' : '/primevue-nuxt';
} }
}; };
</script> </script>

Some files were not shown because too many files have changed in this diff Show More