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

Unstyled demo fixes

pull/4239/head
Tuğçe Küçükoğlu 2023-08-02 15:30:28 +03:00
parent 3d5222ee93
commit 9f1cb2e193
51 changed files with 20 additions and 1043 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
doc/badge/theming/UnstyledDoc.vue
View File

@ -12,13 +12,19 @@ export default {
code: { code: {
composition: ` composition: `
<template> <template>
<div class="card flex flex-wrap justify-content-center gap-2"> <div class="card flex flex-wrap justify-center gap-2">
<Badge value="2"></Badge> <Badge value="2"></Badge>
<Badge value="8" severity="success"></Badge> <Badge value="8" severity="success"></Badge>
<Badge value="4" severity="info"></Badge> <Badge value="4" severity="info"></Badge>
<Badge value="12" severity="warning"></Badge> <Badge value="12" severity="warning"></Badge>
<Badge value="3" severity="danger"></Badge> <Badge value="3" severity="danger"></Badge>
</div> </div>
<div class="card flex flex-wrap justify-center gap-4 mt-4">
<i v-badge="2" class="pi pi-bell relative text-gray-700 dark:text-white/80" style="font-size: 2rem" />
<i v-badge.danger="'5+'" class="pi pi-calendar relative text-gray-700 dark:text-white/80" style="font-size: 2rem" />
<i v-badge.danger class="pi pi-envelope relative text-gray-700 dark:text-white/80" style="font-size: 2rem" />
</div>
</template> </template>
<script setup> <script setup>

8
doc/breadcrumb/theming/UnstyledDoc.vue
View File

@ -1,8 +1,7 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Breadcrumb requires a collection of menuitems as its <i>model</i>.</p> <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
</DocSectionText> </DocSectionText>
<DocSectionCode :code="code" embedded /> <DocSectionCode :code="code" embedded />
</template> </template>
@ -10,11 +9,6 @@
export default { export default {
data() { data() {
return { return {
home: {
icon: 'pi pi-home',
to: '/'
},
items: [{ label: 'Computer' }, { label: 'Notebook' }, { label: 'Accessories' }, { label: 'Backpacks' }, { label: 'Item' }],
code: { code: {
composition: ` composition: `
<template> <template>

1
doc/calendar/theming/UnstyledDoc.vue
View File

@ -9,7 +9,6 @@
export default { export default {
data() { data() {
return { return {
date: null,
code: { code: {
composition: ` composition: `
<template> <template>

5
doc/carousel/theming/UnstyledDoc.vue
View File

@ -2,12 +2,10 @@
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p> <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
</DocSectionText> </DocSectionText>
<DocSectionCode :code="code" embedded />
<DocSectionCode :code="code" :service="['ProductService']" embedded /> <DocSectionCode :code="code" :service="['ProductService']" embedded />
</template> </template>
<script> <script>
import { ProductService } from '@/service/ProductService';
export default { export default {
data() { data() {
return { return {
@ -82,9 +80,6 @@ const getSeverity = (status) => {
<\/script>` <\/script>`
} }
}; };
},
mounted() {
ProductService.getProductsSmall().then((data) => (products.value = data.slice(0, 9)));
} }
}; };
</script> </script>

75
doc/cascadeselect/theming/UnstyledDoc.vue
View File

@ -9,81 +9,6 @@
export default { export default {
data() { data() {
return { return {
selectedCity: null,
countries: [
{
name: 'Australia',
code: 'AU',
states: [
{
name: 'New South Wales',
cities: [
{ cname: 'Sydney', code: 'A-SY' },
{ cname: 'Newcastle', code: 'A-NE' },
{ cname: 'Wollongong', code: 'A-WO' }
]
},
{
name: 'Queensland',
cities: [
{ cname: 'Brisbane', code: 'A-BR' },
{ cname: 'Townsville', code: 'A-TO' }
]
}
]
},
{
name: 'Canada',
code: 'CA',
states: [
{
name: 'Quebec',
cities: [
{ cname: 'Montreal', code: 'C-MO' },
{ cname: 'Quebec City', code: 'C-QU' }
]
},
{
name: 'Ontario',
cities: [
{ cname: 'Ottawa', code: 'C-OT' },
{ cname: 'Toronto', code: 'C-TO' }
]
}
]
},
{
name: 'United States',
code: 'US',
states: [
{
name: 'California',
cities: [
{ cname: 'Los Angeles', code: 'US-LA' },
{ cname: 'San Diego', code: 'US-SD' },
{ cname: 'San Francisco', code: 'US-SF' }
]
},
{
name: 'Florida',
cities: [
{ cname: 'Jacksonville', code: 'US-JA' },
{ cname: 'Miami', code: 'US-MI' },
{ cname: 'Tampa', code: 'US-TA' },
{ cname: 'Orlando', code: 'US-OR' }
]
},
{
name: 'Texas',
cities: [
{ cname: 'Austin', code: 'US-AU' },
{ cname: 'Dallas', code: 'US-DA' },
{ cname: 'Houston', code: 'US-HO' }
]
}
]
}
],
code: { code: {
composition: ` composition: `
<template> <template>

1
doc/checkbox/theming/UnstyledDoc.vue
View File

@ -9,7 +9,6 @@
export default { export default {
data() { data() {
return { return {
checked: false,
code: { code: {
composition: ` composition: `
<template> <template>

1
doc/chips/theming/UnstyledDoc.vue
View File

@ -9,7 +9,6 @@
export default { export default {
data() { data() {
return { return {
value: null,
code: { code: {
composition: ` composition: `
<template> <template>

1
doc/colorpicker/theming/UnstyledDoc.vue
View File

@ -9,7 +9,6 @@
export default { export default {
data() { data() {
return { return {
color: null,
code: { code: {
composition: ` composition: `
<template> <template>

11
doc/contextmenu/theming/UnstyledDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>ContextMenu requires a collection of menuitems as its <i>model</i> and the <i>show</i> method needs to be called explicity using the <i>contextmenu</i> event of the target to display the menu.</p> <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
</DocSectionText> </DocSectionText>
<DocSectionCode :code="code" embedded /> <DocSectionCode :code="code" embedded />
</template> </template>
@ -9,10 +9,6 @@
export default { export default {
data() { data() {
return { return {
items: [
{ label: 'View', icon: 'pi pi-fw pi-search' },
{ label: 'Delete', icon: 'pi pi-fw pi-trash' }
],
code: { code: {
composition: ` composition: `
<template> <template>
@ -38,11 +34,6 @@ const onImageRightClick = (event) => {
<\/script>` <\/script>`
} }
}; };
},
methods: {
onImageRightClick(event) {
this.$refs.menu.show(event);
}
} }
}; };
</script> </script>

81
doc/datatable/theming/UnstyledDoc.vue
View File

@ -6,28 +6,9 @@
</template> </template>
<script> <script>
import { CustomerService } from '@/service/CustomerService';
import { FilterMatchMode, FilterOperator } from 'primevue/api';
export default { export default {
data() { data() {
return { return {
customers: null,
filters: null,
representatives: [
{ name: 'Amy Elsner', image: 'amyelsner.png' },
{ name: 'Anna Fali', image: 'annafali.png' },
{ name: 'Asiya Javayant', image: 'asiyajavayant.png' },
{ name: 'Bernardo Dominic', image: 'bernardodominic.png' },
{ name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
{ name: 'Ioni Bowcher', image: 'ionibowcher.png' },
{ name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
{ name: 'Onyama Limba', image: 'onyamalimba.png' },
{ name: 'Stephen Shaw', image: 'stephenshaw.png' },
{ name: 'XuXue Feng', image: 'xuxuefeng.png' }
],
statuses: ['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal'],
loading: true,
code: { code: {
composition: ` composition: `
<template> <template>
@ -231,68 +212,6 @@ const getSeverity = (status) => {
<\/script>` <\/script>`
} }
}; };
},
created() {
this.initFilters();
},
mounted() {
CustomerService.getCustomersMedium().then((data) => {
this.customers = this.getCustomers(data);
this.loading = false;
});
},
methods: {
formatDate(value) {
return value.toLocaleDateString('en-US', {
day: '2-digit',
month: '2-digit',
year: 'numeric'
});
},
formatCurrency(value) {
return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
},
clearFilter() {
this.initFilters();
},
initFilters() {
this.filters = {
global: { value: null, matchMode: FilterMatchMode.CONTAINS },
name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
'country.name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
representative: { value: null, matchMode: FilterMatchMode.IN },
date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
balance: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
activity: { value: [0, 100], matchMode: FilterMatchMode.BETWEEN },
verified: { value: null, matchMode: FilterMatchMode.EQUALS }
};
},
getCustomers(data) {
return [...(data || [])].map((d) => {
d.date = new Date(d.date);
return d;
});
},
getSeverity(status) {
switch (status) {
case 'unqualified':
return 'danger';
case 'qualified':
return 'success';
case 'new':
return 'info';
case 'negotiation':
return 'warning';
case 'renewal':
return null;
}
}
} }
}; };
</script> </script>

24
doc/dataview/theming/UnstyledDoc.vue
View File

@ -6,13 +6,9 @@
</template> </template>
<script> <script>
import { ProductService } from '@/service/ProductService';
export default { export default {
data() { data() {
return { return {
products: null,
layout: 'grid',
code: { code: {
composition: ` composition: `
<template> <template>
@ -123,26 +119,6 @@ const getSeverity = (product) => {
` `
} }
}; };
},
mounted() {
ProductService.getProducts().then((data) => (this.products = data.slice(0, 12)));
},
methods: {
getSeverity(product) {
switch (product.inventoryStatus) {
case 'INSTOCK':
return 'success';
case 'LOWSTOCK':
return 'warning';
case 'OUTOFSTOCK':
return 'danger';
default:
return null;
}
}
} }
}; };
</script> </script>

1
doc/dialog/theming/UnstyledDoc.vue
View File

@ -9,7 +9,6 @@
export default { export default {
data() { data() {
return { return {
visible: false,
code: { code: {
composition: ` composition: `
<template> <template>

56
doc/dock/theming/UnstyledDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Menu requires a collection of menuitems as its <i>model</i>. Default location is <i>bottom</i> and other sides are also available when defined with the <i>position</i> property.</p> <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
</DocSectionText> </DocSectionText>
<DocSectionCode :code="code" embedded /> <DocSectionCode :code="code" embedded />
</template> </template>
@ -9,43 +9,6 @@
export default { export default {
data() { data() {
return { return {
items: [
{
label: 'Finder',
icon: 'https://primefaces.org/cdn/primevue/images/dock/finder.svg'
},
{
label: 'App Store',
icon: 'https://primefaces.org/cdn/primevue/images/dock/appstore.svg'
},
{
label: 'Photos',
icon: 'https://primefaces.org/cdn/primevue/images/dock/photos.svg'
},
{
label: 'Trash',
icon: 'https://primefaces.org/cdn/primevue/images/dock/trash.png'
}
],
position: 'bottom',
positions: [
{
label: 'Bottom',
value: 'bottom'
},
{
label: 'Top',
value: 'top'
},
{
label: 'Left',
value: 'left'
},
{
label: 'Right',
value: 'right'
}
],
code: { code: {
composition: ` composition: `
<template> <template>
@ -108,22 +71,7 @@ const positions = ref([
]); ]);
<\/script> <\/script>
`
<style scoped>
.dock-demo > .dock-window {
width: 100%;
height: 450px;
position: relative;
background-image: url("https://primefaces.org/cdn/primevue/images/dock/window.jpg");
background-repeat: no-repeat;
background-size: cover;
z-index: 1;
}
.dock-demo > .p-dock {
z-index: 1000;
}
</style>`
} }
}; };
} }

8
doc/dropdown/theming/UnstyledDoc.vue
View File

@ -9,14 +9,6 @@
export default { export default {
data() { data() {
return { return {
selectedCity: null,
cities: [
{ name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' },
{ name: 'London', code: 'LDN' },
{ name: 'Istanbul', code: 'IST' },
{ name: 'Paris', code: 'PRS' }
],
code: { code: {
composition: ` composition: `
<template> <template>

17
doc/galleria/theming/UnstyledDoc.vue
View File

@ -2,12 +2,10 @@
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p> <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
</DocSectionText> </DocSectionText>
<DocSectionCode :code="code" embedded />
<DocSectionCode :code="code" :service="['PhotoService']" embedded /> <DocSectionCode :code="code" :service="['PhotoService']" embedded />
</template> </template>
<script> <script>
import { PhotoService } from '@/service/PhotoService';
export default { export default {
data() { data() {
return { return {
@ -49,22 +47,9 @@ const responsiveOptions = ref([
numVisible: 1 numVisible: 1
} }
]); ]);
<\/script>`, <\/script>`
data: `
/* PhotoService */
{
itemImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1.jpg',
thumbnailImageSrc: 'https://primefaces.org/cdn/primevue/images/galleria/galleria1s.jpg',
alt: 'Description for Image 1',
title: 'Title 1'
},
...
`
} }
}; };
},
mounted() {
PhotoService.getImages().then((data) => (images.value = data));
} }
}; };
</script> </script>

2
doc/image/theming/UnstyledDoc.vue
View File

@ -12,7 +12,7 @@ export default {
code: { code: {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-center">
<Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" preview /> <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" preview />
</div> </div>
</template>` </template>`

2
doc/inlinemessage/theming/UnstyledDoc.vue
View File

@ -12,7 +12,7 @@ export default {
code: { code: {
composition: ` composition: `
<template> <template>
<div class="card flex flex-wrap align-center justify-center gap-3"> <div class="card flex flex-wrap items-center justify-center gap-3">
<InlineMessage severity="success">Success Content</InlineMessage> <InlineMessage severity="success">Success Content</InlineMessage>
<InlineMessage severity="info">Info Content</InlineMessage> <InlineMessage severity="info">Info Content</InlineMessage>
<InlineMessage severity="warn">Warning Content</InlineMessage> <InlineMessage severity="warn">Warning Content</InlineMessage>

4
doc/inputnumber/theming/UnstyledDoc.vue
View File

@ -9,10 +9,6 @@
export default { export default {
data() { data() {
return { return {
value1: 42723,
value2: 58151,
value3: 2351.35,
value4: 50,
code: { code: {
composition: ` composition: `
<template> <template>

1
doc/inputswitch/theming/UnstyledDoc.vue
View File

@ -9,7 +9,6 @@
export default { export default {
data() { data() {
return { return {
checked: false,
code: { code: {
composition: ` composition: `
<template> <template>

1
doc/inputtext/theming/UnstyledDoc.vue
View File

@ -9,7 +9,6 @@
export default { export default {
data() { data() {
return { return {
value: null,
code: { code: {
composition: ` composition: `
<template> <template>

1
doc/knob/theming/UnstyledDoc.vue
View File

@ -9,7 +9,6 @@
export default { export default {
data() { data() {
return { return {
value: 0,
code: { code: {
composition: ` composition: `
<template> <template>

8
doc/listbox/theming/UnstyledDoc.vue
View File

@ -9,14 +9,6 @@
export default { export default {
data() { data() {
return { return {
selectedCity: null,
cities: [
{ name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' },
{ name: 'London', code: 'LDN' },
{ name: 'Istanbul', code: 'IST' },
{ name: 'Paris', code: 'PRS' }
],
code: { code: {
composition: ` composition: `
<template> <template>

116
doc/megamenu/theming/UnstyledDoc.vue
View File

@ -9,122 +9,6 @@
export default { export default {
data() { data() {
return { return {
items: [
{
label: 'Videos',
icon: 'pi pi-fw pi-video',
items: [
[
{
label: 'Video 1',
items: [{ label: 'Video 1.1' }, { label: 'Video 1.2' }]
},
{
label: 'Video 2',
items: [{ label: 'Video 2.1' }, { label: 'Video 2.2' }]
}
],
[
{
label: 'Video 3',
items: [{ label: 'Video 3.1' }, { label: 'Video 3.2' }]
},
{
label: 'Video 4',
items: [{ label: 'Video 4.1' }, { label: 'Video 4.2' }]
}
]
]
},
{
label: 'Users',
icon: 'pi pi-fw pi-users',
items: [
[
{
label: 'User 1',
items: [{ label: 'User 1.1' }, { label: 'User 1.2' }]
},
{
label: 'User 2',
items: [{ label: 'User 2.1' }, { label: 'User 2.2' }]
}
],
[
{
label: 'User 3',
items: [{ label: 'User 3.1' }, { label: 'User 3.2' }]
},
{
label: 'User 4',
items: [{ label: 'User 4.1' }, { label: 'User 4.2' }]
}
],
[
{
label: 'User 5',
items: [{ label: 'User 5.1' }, { label: 'User 5.2' }]
},
{
label: 'User 6',
items: [{ label: 'User 6.1' }, { label: 'User 6.2' }]
}
]
]
},
{
label: 'Events',
icon: 'pi pi-fw pi-calendar',
items: [
[
{
label: 'Event 1',
items: [{ label: 'Event 1.1' }, { label: 'Event 1.2' }]
},
{
label: 'Event 2',
items: [{ label: 'Event 2.1' }, { label: 'Event 2.2' }]
}
],
[
{
label: 'Event 3',
items: [{ label: 'Event 3.1' }, { label: 'Event 3.2' }]
},
{
label: 'Event 4',
items: [{ label: 'Event 4.1' }, { label: 'Event 4.2' }]
}
]
]
},
{
label: 'Settings',
icon: 'pi pi-fw pi-cog',
items: [
[
{
label: 'Setting 1',
items: [{ label: 'Setting 1.1' }, { label: 'Setting 1.2' }]
},
{
label: 'Setting 2',
items: [{ label: 'Setting 2.1' }, { label: 'Setting 2.2' }]
},
{
label: 'Setting 3',
items: [{ label: 'Setting 3.1' }, { label: 'Setting 3.2' }]
}
],
[
{
label: 'Technology 4',
items: [{ label: 'Setting 4.1' }, { label: 'Setting 4.2' }]
}
]
]
}
],
code: { code: {
composition: ` composition: `
<template> <template>

4
doc/menu/theming/UnstyledDoc.vue
View File

@ -9,10 +9,6 @@
export default { export default {
data() { data() {
return { return {
items: [
{ label: 'New', icon: 'pi pi-fw pi-plus' },
{ label: 'Delete', icon: 'pi pi-fw pi-trash' }
],
code: { code: {
composition: ` composition: `
<template> <template>

123
doc/menubar/theming/UnstyledDoc.vue
View File

@ -9,129 +9,6 @@
export default { export default {
data() { data() {
return { return {
items: [
{
label: 'File',
icon: 'pi pi-fw pi-file',
items: [
{
label: 'New',
icon: 'pi pi-fw pi-plus',
items: [
{
label: 'Bookmark',
icon: 'pi pi-fw pi-bookmark'
},
{
label: 'Video',
icon: 'pi pi-fw pi-video'
}
]
},
{
label: 'Delete',
icon: 'pi pi-fw pi-trash'
},
{
separator: true
},
{
label: 'Export',
icon: 'pi pi-fw pi-external-link'
}
]
},
{
label: 'Edit',
icon: 'pi pi-fw pi-pencil',
items: [
{
label: 'Left',
icon: 'pi pi-fw pi-align-left'
},
{
label: 'Right',
icon: 'pi pi-fw pi-align-right'
},
{
label: 'Center',
icon: 'pi pi-fw pi-align-center'
},
{
label: 'Justify',
icon: 'pi pi-fw pi-align-justify'
}
]
},
{
label: 'Users',
icon: 'pi pi-fw pi-user',
items: [
{
label: 'New',
icon: 'pi pi-fw pi-user-plus'
},
{
label: 'Delete',
icon: 'pi pi-fw pi-user-minus'
},
{
label: 'Search',
icon: 'pi pi-fw pi-users',
items: [
{
label: 'Filter',
icon: 'pi pi-fw pi-filter',
items: [
{
label: 'Print',
icon: 'pi pi-fw pi-print'
}
]
},
{
icon: 'pi pi-fw pi-bars',
label: 'List'
}
]
}
]
},
{
label: 'Events',
icon: 'pi pi-fw pi-calendar',
items: [
{
label: 'Edit',
icon: 'pi pi-fw pi-pencil',
items: [
{
label: 'Save',
icon: 'pi pi-fw pi-calendar-plus'
},
{
label: 'Delete',
icon: 'pi pi-fw pi-calendar-minus'
}
]
},
{
label: 'Archieve',
icon: 'pi pi-fw pi-calendar-times',
items: [
{
label: 'Remove',
icon: 'pi pi-fw pi-calendar-minus'
}
]
}
]
},
{
label: 'Quit',
icon: 'pi pi-fw pi-power-off'
}
],
code: { code: {
composition: ` composition: `
<template> <template>

8
doc/multiselect/theming/UnstyledDoc.vue
View File

@ -9,14 +9,6 @@
export default { export default {
data() { data() {
return { return {
selectedCities: null,
cities: [
{ name: 'New York', code: 'NY' },
{ name: 'Rome', code: 'RM' },
{ name: 'London', code: 'LDN' },
{ name: 'Istanbul', code: 'IST' },
{ name: 'Paris', code: 'PRS' }
],
code: { code: {
composition: ` composition: `
<template> <template>

22
doc/orderlist/theming/UnstyledDoc.vue
View File

@ -6,11 +6,9 @@
</template> </template>
<script> <script>
import { ProductService } from '@/service/ProductService';
export default { export default {
data() { data() {
return { return {
products: null,
code: { code: {
composition: ` composition: `
<template> <template>
@ -43,27 +41,9 @@ const products = ref(null);
onMounted(() => { onMounted(() => {
ProductService.getProductsSmall().then((data) => (products.value = data)); ProductService.getProductsSmall().then((data) => (products.value = data));
}); });
<\/script>`, <\/script>`
data: `
/* ProductService */
{
id: '1000',
code: 'f230fh0g3',
name: 'Bamboo Watch',
description: 'Product Description',
image: 'bamboo-watch.jpg',
price: 65,
category: 'Accessories',
quantity: 24,
inventoryStatus: 'INSTOCK',
rating: 5
},
...`
} }
}; };
},
mounted() {
ProductService.getProductsSmall().then((data) => (this.products = data));
} }
}; };
</script> </script>

48
doc/organizationchart/theming/UnstyledDoc.vue
View File

@ -9,54 +9,6 @@
export default { export default {
data() { data() {
return { return {
data: {
key: '0',
type: 'country',
label: 'Argentina',
data: 'ar',
children: [
{
key: '0_0',
type: 'country',
label: 'Argentina',
data: 'ar',
children: [
{
key: '0_0_0',
type: 'country',
label: 'Argentina',
data: 'ar'
},
{
key: '0_0_1',
type: 'country',
label: 'Croatia',
data: 'hr'
}
]
},
{
key: '0_1',
type: 'country',
label: 'France',
data: 'fr',
children: [
{
key: '0_1_0',
type: 'country',
label: 'France',
data: 'fr'
},
{
key: '0_1_1',
type: 'country',
label: 'Morocco',
data: 'ma'
}
]
}
]
},
code: { code: {
composition: ` composition: `
<template> <template>

116
doc/panelmenu/theming/UnstyledDoc.vue
View File

@ -9,122 +9,6 @@
export default { export default {
data() { data() {
return { return {
items: [
{
label: 'File',
icon: 'pi pi-fw pi-file',
items: [
{
label: 'New',
icon: 'pi pi-fw pi-plus',
items: [
{
label: 'Bookmark',
icon: 'pi pi-fw pi-bookmark'
},
{
label: 'Video',
icon: 'pi pi-fw pi-video'
}
]
},
{
label: 'Delete',
icon: 'pi pi-fw pi-trash'
},
{
label: 'Export',
icon: 'pi pi-fw pi-external-link'
}
]
},
{
label: 'Edit',
icon: 'pi pi-fw pi-pencil',
items: [
{
label: 'Left',
icon: 'pi pi-fw pi-align-left'
},
{
label: 'Right',
icon: 'pi pi-fw pi-align-right'
},
{
label: 'Center',
icon: 'pi pi-fw pi-align-center'
},
{
label: 'Justify',
icon: 'pi pi-fw pi-align-justify'
}
]
},
{
label: 'Users',
icon: 'pi pi-fw pi-user',
items: [
{
label: 'New',
icon: 'pi pi-fw pi-user-plus'
},
{
label: 'Delete',
icon: 'pi pi-fw pi-user-minus'
},
{
label: 'Search',
icon: 'pi pi-fw pi-users',
items: [
{
label: 'Filter',
icon: 'pi pi-fw pi-filter',
items: [
{
label: 'Print',
icon: 'pi pi-fw pi-print'
}
]
},
{
icon: 'pi pi-fw pi-bars',
label: 'List'
}
]
}
]
},
{
label: 'Events',
icon: 'pi pi-fw pi-calendar',
items: [
{
label: 'Edit',
icon: 'pi pi-fw pi-pencil',
items: [
{
label: 'Save',
icon: 'pi pi-fw pi-calendar-plus'
},
{
label: 'Delete',
icon: 'pi pi-fw pi-calendar-minus'
}
]
},
{
label: 'Archieve',
icon: 'pi pi-fw pi-calendar-times',
items: [
{
label: 'Remove',
icon: 'pi pi-fw pi-calendar-minus'
}
]
}
]
}
],
code: { code: {
composition: ` composition: `
<template> <template>

1
doc/password/theming/UnstyledDoc.vue
View File

@ -9,7 +9,6 @@
export default { export default {
data() { data() {
return { return {
value: null,
code: { code: {
composition: ` composition: `
<template> <template>

6
doc/picklist/theming/UnstyledDoc.vue
View File

@ -6,12 +6,9 @@
</template> </template>
<script> <script>
import { ProductService } from '@/service/ProductService';
export default { export default {
data() { data() {
return { return {
products: null,
code: { code: {
composition: ` composition: `
<template> <template>
@ -64,9 +61,6 @@ onMounted(() => {
` `
} }
}; };
},
mounted() {
ProductService.getProductsSmall().then((data) => (this.products = [data, []]));
} }
}; };
</script> </script>

1
doc/radiobutton/theming/UnstyledDoc.vue
View File

@ -9,7 +9,6 @@
export default { export default {
data() { data() {
return { return {
ingredient: '',
code: { code: {
composition: ` composition: `
<template> <template>

1
doc/rating/theming/UnstyledDoc.vue
View File

@ -9,7 +9,6 @@
export default { export default {
data() { data() {
return { return {
value: null,
code: { code: {
composition: ` composition: `
<template> <template>

23
doc/scrolltop/theming/UnstyledDoc.vue
View File

@ -9,7 +9,6 @@
export default { export default {
data() { data() {
return { return {
ingredient: '',
code: { code: {
composition: ` composition: `
<template> <template>
@ -26,27 +25,7 @@ export default {
</ScrollPanel> </ScrollPanel>
</div> </div>
</template> </template>
`
<script setup>
<\/script>
<style scoped>
::v-deep(.custom-scrolltop) {
width: 2rem;
height: 2rem;
border-radius: 4px;
background-color: var(--primary-color);
}
::v-deep(.custom-scrolltop:hover) {
background-color: var(--primary-color);
}
::v-deep(.custom-scrolltop .p-scrolltop-icon) {
font-size: 1rem;
color: var(--primary-color-text);
}
</style>`
} }
}; };
} }

2
doc/selectbutton/theming/UnstyledDoc.vue
View File

@ -9,8 +9,6 @@
export default { export default {
data() { data() {
return { return {
value: 'Off',
options: ['Off', 'On'],
code: { code: {
composition: ` composition: `
<template> <template>

1
doc/slider/theming/UnstyledDoc.vue
View File

@ -9,7 +9,6 @@
export default { export default {
data() { data() {
return { return {
value: null,
code: { code: {
composition: ` composition: `
<template> <template>

37
doc/speeddial/theming/UnstyledDoc.vue
View File

@ -9,43 +9,6 @@
export default { export default {
data() { data() {
return { return {
items: [
{
label: 'Add',
icon: 'pi pi-pencil',
command: () => {
this.$toast.add({ severity: 'info', summary: 'Add', detail: 'Data Added' });
}
},
{
label: 'Update',
icon: 'pi pi-refresh',
command: () => {
this.$toast.add({ severity: 'success', summary: 'Update', detail: 'Data Updated' });
}
},
{
label: 'Delete',
icon: 'pi pi-trash',
command: () => {
this.$toast.add({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' });
}
},
{
label: 'Upload',
icon: 'pi pi-upload',
command: () => {
this.$router.push('/fileupload');
}
},
{
label: 'Vue Website',
icon: 'pi pi-external-link',
command: () => {
window.location.href = 'https://vuejs.org/';
}
}
],
code: { code: {
composition: ` composition: `
<template> <template>

29
doc/splitbutton/theming/UnstyledDoc.vue
View File

@ -9,30 +9,6 @@
export default { export default {
data() { data() {
return { return {
items: [
{
label: 'Update',
icon: 'pi pi-refresh',
command: () => {
this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
}
},
{
label: 'Delete',
icon: 'pi pi-times',
command: () => {
this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
}
},
{
label: 'Vue Website',
icon: 'pi pi-external-link',
command: () => {
window.location.href = 'https://vuejs.org/';
}
},
{ label: 'Upload', icon: 'pi pi-upload', to: '/fileupload' }
],
code: { code: {
composition: ` composition: `
<template> <template>
@ -83,11 +59,6 @@ const save = () => {
<\/script>` <\/script>`
} }
}; };
},
methods: {
save() {
this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 });
}
} }
}; };
</script> </script>

4
doc/splitter/theming/UnstyledDoc.vue
View File

@ -14,8 +14,8 @@ export default {
<template> <template>
<div class="card"> <div class="card">
<Splitter style="height: 300px" class="mb-5"> <Splitter style="height: 300px" class="mb-5">
<SplitterPanel class="flex align-items-center justify-content-center"> Panel 1 </SplitterPanel> <SplitterPanel class="flex items-center justify-center"> Panel 1 </SplitterPanel>
<SplitterPanel class="flex align-items-center justify-content-center"> Panel 2 </SplitterPanel> <SplitterPanel class="flex items-center justify-center"> Panel 2 </SplitterPanel>
</Splitter> </Splitter>
</div> </div>
</template> </template>

18
doc/steps/theming/UnstyledDoc.vue
View File

@ -9,24 +9,6 @@
export default { export default {
data() { data() {
return { return {
items: [
{
label: 'Personal',
to: '/steps'
},
{
label: 'Seat',
to: '/steps/seat'
},
{
label: 'Payment',
to: '/steps/payment'
},
{
label: 'Confirmation',
to: '/steps/confirmation'
}
],
code: { code: {
composition: ` composition: `
<template> <template>

7
doc/tabmenu/theming/UnstyledDoc.vue
View File

@ -9,13 +9,6 @@
export default { export default {
data() { data() {
return { return {
items: [
{ label: 'Home', icon: 'pi pi-fw pi-home', to: '/tabmenu' },
{ label: 'Calendar', icon: 'pi pi-fw pi-calendar', to: '/tabmenu/calendar' },
{ label: 'Edit', icon: 'pi pi-fw pi-pencil', to: '/tabmenu/edit' },
{ label: 'Documentation', icon: 'pi pi-fw pi-file', to: '/tabmenu/documentation' },
{ label: 'Settings', icon: 'pi pi-fw pi-cog', to: '/tabmenu/settings' }
],
code: { code: {
composition: ` composition: `
<template> <template>

2
doc/tabview/theming/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="doc-main"> <div class="doc-main">
<div class="doc-intro"> <div class="doc-intro">
<h1>Tabview Theming</h1> <h1>TabView Theming</h1>
</div> </div>
<DocSections :docs="docs" /> <DocSections :docs="docs" />
</div> </div>

24
doc/terminal/theming/UnstyledDoc.vue
View File

@ -54,29 +54,7 @@ const commandHandler = (text) => {
TerminalService.emit('response', response); TerminalService.emit('response', response);
} }
<\/script> <\/script>`
<style scoped>
p {
margin-top: 0;
}
::v-deep(.dark-demo-terminal) {
background-color: #212121;
color: #ffffff;
}
::v-deep(.dark-demo-terminal .p-terminal-command) {
color: #80cbc4;
}
::v-deep(.dark-demo-terminal .p-terminal-prompt) {
color: #ffd54f;
}
::v-deep(.dark-demo-terminal .p-terminal-response) {
color: #9fa8da;
}
</style>`
} }
}; };
} }

1
doc/textarea/theming/UnstyledDoc.vue
View File

@ -9,7 +9,6 @@
export default { export default {
data() { data() {
return { return {
value: '',
code: { code: {
composition: ` composition: `
<template> <template>

126
doc/tieredmenu/theming/UnstyledDoc.vue
View File

@ -9,132 +9,6 @@
export default { export default {
data() { data() {
return { return {
items: [
{
label: 'File',
icon: 'pi pi-fw pi-file',
items: [
{
label: 'New',
icon: 'pi pi-fw pi-plus',
items: [
{
label: 'Bookmark',
icon: 'pi pi-fw pi-bookmark'
},
{
label: 'Video',
icon: 'pi pi-fw pi-video'
}
]
},
{
label: 'Delete',
icon: 'pi pi-fw pi-trash'
},
{
separator: true
},
{
label: 'Export',
icon: 'pi pi-fw pi-external-link'
}
]
},
{
label: 'Edit',
icon: 'pi pi-fw pi-pencil',
items: [
{
label: 'Left',
icon: 'pi pi-fw pi-align-left'
},
{
label: 'Right',
icon: 'pi pi-fw pi-align-right'
},
{
label: 'Center',
icon: 'pi pi-fw pi-align-center'
},
{
label: 'Justify',
icon: 'pi pi-fw pi-align-justify'
}
]
},
{
label: 'Users',
icon: 'pi pi-fw pi-user',
items: [
{
label: 'New',
icon: 'pi pi-fw pi-user-plus'
},
{
label: 'Delete',
icon: 'pi pi-fw pi-user-minus'
},
{
label: 'Search',
icon: 'pi pi-fw pi-users',
items: [
{
label: 'Filter',
icon: 'pi pi-fw pi-filter',
items: [
{
label: 'Print',
icon: 'pi pi-fw pi-print'
}
]
},
{
icon: 'pi pi-fw pi-bars',
label: 'List'
}
]
}
]
},
{
label: 'Events',
icon: 'pi pi-fw pi-calendar',
items: [
{
label: 'Edit',
icon: 'pi pi-fw pi-pencil',
items: [
{
label: 'Save',
icon: 'pi pi-fw pi-calendar-plus'
},
{
label: 'Delete',
icon: 'pi pi-fw pi-calendar-minus'
}
]
},
{
label: 'Archieve',
icon: 'pi pi-fw pi-calendar-times',
items: [
{
label: 'Remove',
icon: 'pi pi-fw pi-calendar-minus'
}
]
}
]
},
{
separator: true
},
{
label: 'Quit',
icon: 'pi pi-fw pi-power-off'
}
],
code: { code: {
composition: ` composition: `
<template> <template>

6
doc/timeline/theming/UnstyledDoc.vue
View File

@ -9,12 +9,6 @@
export default { export default {
data() { data() {
return { return {
events: [
{ status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0' },
{ status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
{ status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
{ status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
],
code: { code: {
composition: ` composition: `
<template> <template>

1
doc/togglebutton/theming/UnstyledDoc.vue
View File

@ -9,7 +9,6 @@
export default { export default {
data() { data() {
return { return {
checked: false,
code: { code: {
composition: ` composition: `
<template> <template>

5
doc/tree/theming/UnstyledDoc.vue
View File

@ -6,11 +6,9 @@
</template> </template>
<script> <script>
import { NodeService } from '@/service/NodeService';
export default { export default {
data() { data() {
return { return {
nodes: null,
code: { code: {
composition: ` composition: `
<template> <template>
@ -58,9 +56,6 @@ onMounted(() => {
...` ...`
} }
}; };
},
mounted() {
NodeService.getTreeNodes().then((data) => (this.nodes = data));
} }
}; };
</script> </script>

7
doc/treeselect/theming/UnstyledDoc.vue
View File

@ -6,13 +6,9 @@
</template> </template>
<script> <script>
import { NodeService } from '/service/NodeService';
export default { export default {
data() { data() {
return { return {
nodes: null,
selectedValue: null,
code: { code: {
composition: ` composition: `
<template> <template>
@ -61,9 +57,6 @@ onMounted(() => {
...` ...`
} }
}; };
},
mounted() {
NodeService.getTreeNodes().then((data) => (this.nodes = data));
} }
}; };
</script> </script>

6
doc/treetable/theming/UnstyledDoc.vue
View File

@ -6,12 +6,9 @@
</template> </template>
<script> <script>
import { NodeService } from '@/service/NodeService';
export default { export default {
data() { data() {
return { return {
nodes: null,
code: { code: {
composition: ` composition: `
<template> <template>
@ -64,9 +61,6 @@ const nodes = ref();
` `
} }
}; };
},
mounted() {
NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
} }
}; };
</script> </script>

1
doc/tristatecheckbox/theming/UnstyledDoc.vue
View File

@ -9,7 +9,6 @@
export default { export default {
data() { data() {
return { return {
value: null,
code: { code: {
composition: ` composition: `
<template> <template>