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

add demos for Tailwind theme (Panels, Media, Misc)

pull/4203/head
ATAKAN TEPE 2023-07-28 08:56:58 +03:00
parent b459bdcce4
commit 4b8a3f2b19
77 changed files with 1714 additions and 177 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
doc/accordion/StyleDoc.vue → doc/accordion/theming/StyledDoc.vue
View File

45
doc/accordion/theming/UnstyledDoc.vue Normal file
View File

@ -0,0 +1,45 @@
<template>
<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>
</DocSectionText>
<DocSectionCode :code="code" embedded />
</template>
<script>
export default {
data() {
return {
code: {
composition: `
<template>
<div class="card">
<Accordion :activeIndex="0">
<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 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>
</AccordionTab>
<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 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>
</AccordionTab>
<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 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>
</AccordionTab>
</Accordion>
</div>
</template>
<script setup>
<\/script>`
}
};
}
};
</script>

33
doc/accordion/theming/index.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>Accordion Theming</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import StyledDoc from './StyledDoc.vue';
import UnstyledDoc from './UnstyledDoc.vue';
export default {
data() {
return {
docs: [
{
id: 'styled',
label: 'Styled',
component: StyledDoc
},
{
id: 'unstyled',
label: 'Unstyled',
component: UnstyledDoc
}
]
};
}
};
</script>

19
doc/avatar/StylingAvatarGroupDoc.vue
View File

@ -1,19 +0,0 @@
<template>
<DocSectionText id="stylingofavatargroup" label="Styling of AvatarGroup" v-bind="$attrs"> </DocSectionText>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-avatar-group</td>
<td>Container element.</td>
</tr>
</tbody>
</table>
</div>
</template>

17
doc/avatar/StylingAvatarDoc.vue → doc/avatar/theming/StyledDoc.vue
View File

@ -42,4 +42,21 @@
</tbody>
</table>
</div>
<DocSectionText id="stylingofavatargroup" label="Styling of AvatarGroup" v-bind="$attrs"> </DocSectionText>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-avatar-group</td>
<td>Container element.</td>
</tr>
</tbody>
</table>
</div>
</template>

56
doc/avatar/theming/UnstyledDoc.vue Normal file
View File

@ -0,0 +1,56 @@
<template>
<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>
</DocSectionText>
<DocSectionCode :code="code" embedded />
</template>
<script>
export default {
data() {
return {
code: {
composition: `
<template>
<div class="card">
<div class="flex flex-wrap gap-5">
<div>
<h5>Image</h5>
<div class="flex">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" size="xlarge" shape="circle" />
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" class="mr-2" size="large" shape="circle" />
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
</div>
</div>
<div>
<h5>Badge</h5>
<Avatar v-badge.danger="4" class="p-overlay-badge" image="https://primefaces.org/cdn/primevue/images/organization/walter.jpg" size="xlarge" />
</div>
<div>
<h5>Gravatar</h5>
<Avatar image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp" class="flex align-items-center justify-content-center mr-2" size="xlarge" />
</div>
</div>
</div>
<div class="card flex justify-content-center">
<AvatarGroup>
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" size="large" shape="circle" />
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" size="large" shape="circle" />
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" size="large" shape="circle" />
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" size="large" shape="circle" />
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" size="large" shape="circle" />
<Avatar label="+2" shape="circle" size="large" style="background-color: '#9c27b0', color: '#ffffff'" />
</AvatarGroup>
</div>
</template>
<script setup>
<\/script>`
}
};
}
};
</script>

33
doc/avatar/theming/index.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>Avatar Theming</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import StyledDoc from './StyledDoc.vue';
import UnstyledDoc from './UnstyledDoc.vue';
export default {
data() {
return {
docs: [
{
id: 'styled',
label: 'Styled',
component: StyledDoc
},
{
id: 'unstyled',
label: 'Unstyled',
component: UnstyledDoc
}
]
};
}
};
</script>

0
doc/badge/StyleDoc.vue → doc/badge/theming/StyledDoc.vue
View File

31
doc/badge/theming/UnstyledDoc.vue Normal file
View File

@ -0,0 +1,31 @@
<template>
<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>
</DocSectionText>
<DocSectionCode :code="code" embedded />
</template>
<script>
export default {
data() {
return {
code: {
composition: `
<template>
<div class="card flex flex-wrap justify-content-center gap-2">
<Badge value="2"></Badge>
<Badge value="8" severity="success"></Badge>
<Badge value="4" severity="info"></Badge>
<Badge value="12" severity="warning"></Badge>
<Badge value="3" severity="danger"></Badge>
</div>
</template>
<script setup>
<\/script>`
}
};
}
};
</script>

33
doc/badge/theming/index.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>Badge Theming</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import StyledDoc from './StyledDoc.vue';
import UnstyledDoc from './UnstyledDoc.vue';
export default {
data() {
return {
docs: [
{
id: 'styled',
label: 'Styled',
component: StyledDoc
},
{
id: 'unstyled',
label: 'Unstyled',
component: UnstyledDoc
}
]
};
}
};
</script>

0
doc/blockui/StyleDoc.vue → doc/blockui/theming/StyledDoc.vue
View File

40
doc/blockui/theming/UnstyledDoc.vue Normal file
View File

@ -0,0 +1,40 @@
<template>
<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>
</DocSectionText>
<DocSectionCode :code="code" embedded />
</template>
<script>
export default {
data() {
return {
code: {
composition: `
<template>
<div class="card">
<div class="mb-3">
<Button label="Block" @click="blocked = true" class="mr-2"></Button>
<Button label="Unblock" @click="blocked = false"></Button>
</div>
<BlockUI :blocked="blocked">
<Panel header="Basic">
<p class="m-0">
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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</Panel>
</BlockUI>
</div>
</template>
<script setup>
import { ref } from "vue";
const blocked = ref(false);
<\/script>`
}
};
}
};
</script>

33
doc/blockui/theming/index.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>BlockUI Theming</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import StyledDoc from './StyledDoc.vue';
import UnstyledDoc from './UnstyledDoc.vue';
export default {
data() {
return {
docs: [
{
id: 'styled',
label: 'Styled',
component: StyledDoc
},
{
id: 'unstyled',
label: 'Unstyled',
component: UnstyledDoc
}
]
};
}
};
</script>

0
doc/card/StyleDoc.vue → doc/card/theming/StyledDoc.vue
View File

42
doc/card/theming/UnstyledDoc.vue Normal file
View File

@ -0,0 +1,42 @@
<template>
<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>
</DocSectionText>
<DocSectionCode :code="code" embedded />
</template>
<script>
export default {
data() {
return {
code: {
composition: `
<template>
<div class="card flex align-items-center justify-content-center">
<Card style="width: 25em">
<template #header>
<img alt="user header" src="https://primefaces.org/cdn/primevue/images/usercard.png" />
</template>
<template #title> Advanced Card </template>
<template #subtitle> Card subtitle </template>
<template #content>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
quas!
</p>
</template>
<template #footer>
<Button icon="pi pi-check" label="Save" />
<Button icon="pi pi-times" label="Cancel" severity="secondary" style="margin-left: 0.5em" />
</template>
</Card>
</div>
</template>
<script setup>
<\/script>`
}
};
}
};
</script>

33
doc/card/theming/index.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>Card Theming</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import StyledDoc from './StyledDoc.vue';
import UnstyledDoc from './UnstyledDoc.vue';
export default {
data() {
return {
docs: [
{
id: 'styled',
label: 'Styled',
component: StyledDoc
},
{
id: 'unstyled',
label: 'Unstyled',
component: UnstyledDoc
}
]
};
}
};
</script>

0
doc/carousel/StyleDoc.vue → doc/carousel/theming/StyledDoc.vue
View File

85
doc/carousel/theming/UnstyledDoc.vue Normal file
View File

@ -0,0 +1,85 @@
<template>
<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>
</DocSectionText>
<DocSectionCode :code="code" embedded />
</template>
<script>
export default {
data() {
return {
code: {
composition: `
<template>
<div class="card">
<Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
<template #item="slotProps">
<div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
<div class="mb-3">
<img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-6 shadow-2" />
</div>
<div>
<h4 class="mb-1">{{ slotProps.data.name }}</h4>
<h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
<Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
<div class="mt-5">
<Button icon="pi pi-search" rounded class="mr-2" />
<Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
</div>
</div>
</div>
</template>
</Carousel>
</div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { ProductService } from '@/service/ProductService';
onMounted(() => {
ProductService.getProductsSmall().then((data) => (products.value = data.slice(0, 9)));
})
const products = ref();
const responsiveOptions = ref([
{
breakpoint: '1199px',
numVisible: 3,
numScroll: 3
},
{
breakpoint: '991px',
numVisible: 2,
numScroll: 2
},
{
breakpoint: '767px',
numVisible: 1,
numScroll: 1
}
]);
const getSeverity = (status) => {
switch (status) {
case 'INSTOCK':
return 'success';
case 'LOWSTOCK':
return 'warning';
case 'OUTOFSTOCK':
return 'danger';
default:
return null;
}
};
<\/script>`
}
};
}
};
</script>

33
doc/carousel/theming/index.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>Carousel Theming</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import StyledDoc from './StyledDoc.vue';
import UnstyledDoc from './UnstyledDoc.vue';
export default {
data() {
return {
docs: [
{
id: 'styled',
label: 'Styled',
component: StyledDoc
},
{
id: 'unstyled',
label: 'Unstyled',
component: UnstyledDoc
}
]
};
}
};
</script>

33
doc/chip/theming/StyledDoc.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<DocSectionText v-bind="$attrs">
<p>List of class names used in the styled mode.</p>
</DocSectionText>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-chip</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-chip-image</td>
<td>Container element in image mode.</td>
</tr>
<tr>
<td>p-chip-text</td>
<td>Text of the chip.</td>
</tr>
<tr>
<td>pi-chip-remove-icon</td>
<td>Remove icon.</td>
</tr>
</tbody>
</table>
</div>
</template>

29
doc/chip/theming/UnstyledDoc.vue Normal file
View File

@ -0,0 +1,29 @@
<template>
<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>
</DocSectionText>
<DocSectionCode :code="code" embedded />
</template>
<script>
export default {
data() {
return {
code: {
composition: `
<template>
<div class="card flex flex-wrap gap-2">
<Chip label="Apple" icon="pi pi-apple" />
<Chip label="Facebook" icon="pi pi-facebook" />
<Chip label="Google" icon="pi pi-google" />
<Chip label="Microsoft" icon="pi pi-microsoft" removable />
</div>
</template>
<script setup>
<\/script>`
}
};
}
};
</script>

33
doc/chip/theming/index.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>Chip Theming</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import StyledDoc from './StyledDoc.vue';
import UnstyledDoc from './UnstyledDoc.vue';
export default {
data() {
return {
docs: [
{
id: 'styled',
label: 'Styled',
component: StyledDoc
},
{
id: 'unstyled',
label: 'Unstyled',
component: UnstyledDoc
}
]
};
}
};
</script>

0
doc/divider/StyleDoc.vue → doc/divider/theming/StyledDoc.vue
View File

56
doc/divider/theming/UnstyledDoc.vue Normal file
View File

@ -0,0 +1,56 @@
<template>
<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>
</DocSectionText>
<DocSectionCode :code="code" embedded />
</template>
<script>
export default {
data() {
return {
code: {
composition: `
<template>
<div class="card">
<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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<Divider align="left" type="solid">
<b>Left</b>
</Divider>
<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 voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
</p>
<Divider align="center" type="dotted">
<b>Center</b>
</Divider>
<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. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
</p>
<Divider align="right" type="dashed">
<b>Right</b>
</Divider>
<p>
Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.
</p>
</div>
</template>
<script setup>
<\/script>`
}
};
}
};
</script>

33
doc/divider/theming/index.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>Divider Theming</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import StyledDoc from './StyledDoc.vue';
import UnstyledDoc from './UnstyledDoc.vue';
export default {
data() {
return {
docs: [
{
id: 'styled',
label: 'Styled',
component: StyledDoc
},
{
id: 'unstyled',
label: 'Unstyled',
component: UnstyledDoc
}
]
};
}
};
</script>

0
doc/fieldset/StyleDoc.vue → doc/fieldset/theming/StyledDoc.vue
View File

31
doc/fieldset/theming/UnstyledDoc.vue Normal file
View File

@ -0,0 +1,31 @@
<template>
<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>
</DocSectionText>
<DocSectionCode :code="code" embedded />
</template>
<script>
export default {
data() {
return {
code: {
composition: `
<template>
<div class="card">
<Fieldset legend="Header" :toggleable="true">
<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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</Fieldset>
</div>
</template>
<script setup>
<\/script>`
}
};
}
};
</script>

33
doc/fieldset/theming/index.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>Fieldset Theming</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import StyledDoc from './StyledDoc.vue';
import UnstyledDoc from './UnstyledDoc.vue';
export default {
data() {
return {
docs: [
{
id: 'styled',
label: 'Styled',
component: StyledDoc
},
{
id: 'unstyled',
label: 'Unstyled',
component: UnstyledDoc
}
]
};
}
};
</script>

0
doc/galleria/StyleDoc.vue → doc/galleria/theming/StyledDoc.vue
View File

65
doc/galleria/theming/UnstyledDoc.vue Normal file
View File

@ -0,0 +1,65 @@
<template>
<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>
</DocSectionText>
<DocSectionCode :code="code" embedded />
</template>
<script>
export default {
data() {
return {
code: {
composition: `
<template>
<div class="card md:flex md:justify-content-center">
<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
<template #item="slotProps">
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
</template>
<template #thumbnail="slotProps">
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
</template>
</Galleria>
</div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { PhotoService } from '@/service/PhotoService';
onMounted(() => {
PhotoService.getImages().then((data) => (images.value = data));
});
const images = ref();
const responsiveOptions = ref([
{
breakpoint: '991px',
numVisible: 4
},
{
breakpoint: '767px',
numVisible: 3
},
{
breakpoint: '575px',
numVisible: 1
}
]);
<\/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'
},
...
`
}
};
}
};
</script>

33
doc/galleria/theming/index.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>Galleria Theming</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import StyledDoc from './StyledDoc.vue';
import UnstyledDoc from './UnstyledDoc.vue';
export default {
data() {
return {
docs: [
{
id: 'styled',
label: 'Styled',
component: StyledDoc
},
{
id: 'unstyled',
label: 'Unstyled',
component: UnstyledDoc
}
]
};
}
};
</script>

0
doc/image/StyleDoc.vue → doc/image/theming/StyledDoc.vue
View File

23
doc/image/theming/UnstyledDoc.vue Normal file
View File

@ -0,0 +1,23 @@
<template>
<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>
</DocSectionText>
<DocSectionCode :code="code" embedded />
</template>
<script>
export default {
data() {
return {
code: {
composition: `
<template>
<div class="card flex justify-content-center">
<Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" preview />
</div>
</template>`
}
};
}
};
</script>

33
doc/image/theming/index.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>Image Theming</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import StyledDoc from './StyledDoc.vue';
import UnstyledDoc from './UnstyledDoc.vue';
export default {
data() {
return {
docs: [
{
id: 'styled',
label: 'Styled',
component: StyledDoc
},
{
id: 'unstyled',
label: 'Unstyled',
component: UnstyledDoc
}
]
};
}
};
</script>

0
doc/inplace/StyleDoc.vue → doc/inplace/theming/StyledDoc.vue
View File

35
doc/inplace/theming/UnstyledDoc.vue Normal file
View File

@ -0,0 +1,35 @@
<template>
<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>
</DocSectionText>
<DocSectionCode :code="code" embedded />
</template>
<script>
export default {
data() {
return {
code: {
composition: `
<template>
<div class="card">
<Inplace>
<template #display> View Content </template>
<template #content>
<p class="m-0">
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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</template>
</Inplace>
</div>
</template>
<script setup>
<\/script>`
}
};
}
};
</script>

33
doc/inplace/theming/index.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>Inplace Theming</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import StyledDoc from './StyledDoc.vue';
import UnstyledDoc from './UnstyledDoc.vue';
export default {
data() {
return {
docs: [
{
id: 'styled',
label: 'Styled',
component: StyledDoc
},
{
id: 'unstyled',
label: 'Unstyled',
component: UnstyledDoc
}
]
};
}
};
</script>

0
doc/progressbar/StyleDoc.vue → doc/progressbar/theming/StyledDoc.vue
View File

58
doc/progressbar/theming/UnstyledDoc.vue Normal file
View File

@ -0,0 +1,58 @@
<template>
<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>
</DocSectionText>
<DocSectionCode :code="code" embedded />
</template>
<script>
export default {
data() {
return {
code: {
composition: `
<template>
<div class="card">
<ProgressBar :value="50"></ProgressBar>
</div>
<div class="card">
<Toast></Toast>
<ProgressBar :value="value1" />
</div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import { useToast } from "primevue/usetoast";
onMounted(() => {
startProgress();
});
onBeforeUnmount(() => {
endProgress();
});
const toast = useToast();
const value1 = ref(0);
const interval = ref();
const startProgress = () => {
interval.value = setInterval(() => {
let newValue = value1.value + Math.floor(Math.random() * 10) + 1;
if (newValue >= 100) {
newValue = 100;
toast.add({ severity: 'info', summary: 'Success', detail: 'Process Completed', life: 1000 });
}
value1.value = newValue;
}, 2000);
};
const endProgress = () => {
clearInterval(interval.value);
interval.value = null;
};
<\/script>`
}
};
}
};
</script>

33
doc/progressbar/theming/index.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>Progressbar Theming</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import StyledDoc from './StyledDoc.vue';
import UnstyledDoc from './UnstyledDoc.vue';
export default {
data() {
return {
docs: [
{
id: 'styled',
label: 'Styled',
component: StyledDoc
},
{
id: 'unstyled',
label: 'Unstyled',
component: UnstyledDoc
}
]
};
}
};
</script>

0
doc/skeleton/StyleDoc.vue → doc/skeleton/theming/StyledDoc.vue
View File

61
doc/skeleton/theming/UnstyledDoc.vue Normal file
View File

@ -0,0 +1,61 @@
<template>
<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>
</DocSectionText>
<DocSectionCode :code="code" embedded />
</template>
<script>
export default {
data() {
return {
code: {
composition: `
<template>
<div class="card">
<div class="">
<div class="w-full">
<h5>Rectangle</h5>
<Skeleton class="mb-2"></Skeleton>
<Skeleton width="10rem" class="mb-2"></Skeleton>
<Skeleton width="5rem" class="mb-2"></Skeleton>
<Skeleton height="2rem" class="mb-2"></Skeleton>
<Skeleton width="10rem" height="4rem"></Skeleton>
</div>
<div class="w-full">
<h5>Rounded</h5>
<Skeleton class="mb-2" borderRadius="16px"></Skeleton>
<Skeleton width="10rem" class="mb-2" borderRadius="16px"></Skeleton>
<Skeleton width="5rem" borderRadius="16px" class="mb-2"></Skeleton>
<Skeleton height="2rem" class="mb-2" borderRadius="16px"></Skeleton>
<Skeleton width="10rem" height="4rem" borderRadius="16px"></Skeleton>
</div>
<div class="w-full">
<h5 class="mt-3">Square</h5>
<div class="flex items-end">
<Skeleton size="2rem" class="mr-2"></Skeleton>
<Skeleton size="3rem" class="mr-2"></Skeleton>
<Skeleton size="4rem" class="mr-2"></Skeleton>
<Skeleton size="5rem"></Skeleton>
</div>
</div>
<div class="w-full">
<h5 class="mt-3">Circle</h5>
<div class="flex items-end">
<Skeleton shape="circle" size="2rem" class="mr-2"></Skeleton>
<Skeleton shape="circle" size="3rem" class="mr-2"></Skeleton>
<Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
<Skeleton shape="circle" size="5rem"></Skeleton>
</div>
</div>
</div>
</div>
</template>
<script setup>
<\/script>`
}
};
}
};
</script>

33
doc/skeleton/theming/index.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>Skeleton Theming</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import StyledDoc from './StyledDoc.vue';
import UnstyledDoc from './UnstyledDoc.vue';
export default {
data() {
return {
docs: [
{
id: 'styled',
label: 'Styled',
component: StyledDoc
},
{
id: 'unstyled',
label: 'Unstyled',
component: UnstyledDoc
}
]
};
}
};
</script>

0
doc/splitter/StyleDoc.vue → doc/splitter/theming/StyledDoc.vue
View File

29
doc/splitter/theming/UnstyledDoc.vue Normal file
View File

@ -0,0 +1,29 @@
<template>
<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>
</DocSectionText>
<DocSectionCode :code="code" embedded />
</template>
<script>
export default {
data() {
return {
code: {
composition: `
<template>
<div class="card">
<Splitter style="height: 300px" class="mb-5">
<SplitterPanel class="flex align-items-center justify-content-center"> Panel 1 </SplitterPanel>
<SplitterPanel class="flex align-items-center justify-content-center"> Panel 2 </SplitterPanel>
</Splitter>
</div>
</template>
<script setup>
<\/script>`
}
};
}
};
</script>

33
doc/splitter/theming/index.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>Splitter Theming</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import StyledDoc from './StyledDoc.vue';
import UnstyledDoc from './UnstyledDoc.vue';
export default {
data() {
return {
docs: [
{
id: 'styled',
label: 'Styled',
component: StyledDoc
},
{
id: 'unstyled',
label: 'Unstyled',
component: UnstyledDoc
}
]
};
}
};
</script>

0
doc/tabview/StyleDoc.vue → doc/tabview/theming/StyledDoc.vue
View File

46
doc/tabview/theming/UnstyledDoc.vue Normal file
View File

@ -0,0 +1,46 @@
<template>
<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>
</DocSectionText>
<DocSectionCode :code="code" embedded />
</template>
<script>
export default {
data() {
return {
code: {
composition: `
<template>
<div class="card">
<TabView>
<TabPanel 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 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>
</TabPanel>
<TabPanel 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 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>
</TabPanel>
<TabPanel 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 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>
</TabPanel>
<TabPanel header="Header IV" :disabled="true"></TabPanel>
</TabView>
</div>
</template>
<script setup>
<\/script>`
}
};
}
};
</script>

33
doc/tabview/theming/index.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>Tabview Theming</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import StyledDoc from './StyledDoc.vue';
import UnstyledDoc from './UnstyledDoc.vue';
export default {
data() {
return {
docs: [
{
id: 'styled',
label: 'Styled',
component: StyledDoc
},
{
id: 'unstyled',
label: 'Unstyled',
component: UnstyledDoc
}
]
};
}
};
</script>

0
doc/tag/StyleDoc.vue → doc/tag/theming/StyledDoc.vue
View File

32
doc/tag/theming/UnstyledDoc.vue Normal file
View File

@ -0,0 +1,32 @@
<template>
<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>
</DocSectionText>
<DocSectionCode :code="code" embedded />
</template>
<script>
export default {
data() {
return {
code: {
composition: `
<template>
<div class="flex flex-wrap justify-content-center gap-2">
<Tag value="Primary"></Tag>
<Tag severity="success" value="Success"></Tag>
<Tag severity="info" value="Info"></Tag>
<Tag severity="warning" value="Warning"></Tag>
<Tag severity="danger" value="Danger"></Tag>
</div>
</template>
<script setup>
<\/script>
`
}
};
}
};
</script>

33
doc/tag/theming/index.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>Tag Theming</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import StyledDoc from './StyledDoc.vue';
import UnstyledDoc from './UnstyledDoc.vue';
export default {
data() {
return {
docs: [
{
id: 'styled',
label: 'Styled',
component: StyledDoc
},
{
id: 'unstyled',
label: 'Unstyled',
component: UnstyledDoc
}
]
};
}
};
</script>

0
doc/terminal/StyleDoc.vue → doc/terminal/theming/StyledDoc.vue
View File

84
doc/terminal/theming/UnstyledDoc.vue Normal file
View File

@ -0,0 +1,84 @@
<template>
<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>
</DocSectionText>
<DocSectionCode :code="code" embedded />
</template>
<script>
export default {
data() {
return {
code: {
composition: `
<template>
<div>
<p>Enter "date" to display the current date, "greet {0}" for a message and "random" to get a random number.</p>
<Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" class="dark-demo-terminal" aria-label="PrimeVue Terminal Service" />
</div>
</template>
<script setup>
import { onMounted, onBeforeUnmount } from 'vue';
import TerminalService from "primevue/terminalservice";
onMounted(() => {
TerminalService.on('command', commandHandler);
})
onBeforeUnmount(() => {
TerminalService.off('command', commandHandler);
})
const commandHandler = (text) => {
let response;
let argsIndex = text.indexOf(' ');
let command = argsIndex !== -1 ? text.substring(0, argsIndex) : text;
switch(command) {
case "date":
response = 'Today is ' + new Date().toDateString();
break;
case "greet":
response = 'Hola ' + text.substring(argsIndex + 1);
break;
case "random":
response = Math.floor(Math.random() * 100);
break;
default:
response = "Unknown command: " + command;
}
TerminalService.emit('response', response);
}
<\/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>`
}
};
}
};
</script>

33
doc/terminal/theming/index.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>Terminal Theming</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import StyledDoc from './StyledDoc.vue';
import UnstyledDoc from './UnstyledDoc.vue';
export default {
data() {
return {
docs: [
{
id: 'styled',
label: 'Styled',
component: StyledDoc
},
{
id: 'unstyled',
label: 'Unstyled',
component: UnstyledDoc
}
]
};
}
};
</script>

0
doc/toolbar/StyleDoc.vue → doc/toolbar/theming/StyledDoc.vue
View File

65
doc/toolbar/theming/UnstyledDoc.vue Normal file
View File

@ -0,0 +1,65 @@
<template>
<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>
</DocSectionText>
<DocSectionCode :code="code" embedded />
</template>
<script>
export default {
data() {
return {
code: {
composition: `
<template>
<div class="card">
<Toolbar>
<template #start>
<Button label="New" icon="pi pi-plus" class="mr-2" />
<Button label="Upload" icon="pi pi-upload" severity="success" class="mr-2" />
<i class="pi pi-bars p-toolbar-separator mr-2" />
<SplitButton label="Save" icon="pi pi-check" :model="items" severity="warning"></SplitButton>
</template>
<template #end>
<Button icon="pi pi-search" class="mr-2" />
<Button icon="pi pi-calendar" severity="success" class="mr-2" />
<Button icon="pi pi-times" severity="danger" />
</template>
</Toolbar>
</div>
</template>
<script setup>
import { ref } from 'vue';
const items = ref([
{
label: 'Update',
icon: 'pi pi-refresh'
},
{
label: 'Delete',
icon: 'pi pi-times'
},
{
label: 'Vue Website',
icon: 'pi pi-external-link',
command: () => {
window.location.href = 'https://vuejs.org/';
}
},
{
label: 'Upload',
icon: 'pi pi-upload',
command: () => {
this.$router.push('fileupload');
}
}
])
<\/script>`
}
};
}
};
</script>

33
doc/toolbar/theming/index.vue Normal file
View File

@ -0,0 +1,33 @@
<template>
<div class="doc-main">
<div class="doc-intro">
<h1>Toolbar Theming</h1>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</template>
<script>
import StyledDoc from './StyledDoc.vue';
import UnstyledDoc from './UnstyledDoc.vue';
export default {
data() {
return {
docs: [
{
id: 'styled',
label: 'Styled',
component: StyledDoc
},
{
id: 'unstyled',
label: 'Unstyled',
component: UnstyledDoc
}
]
};
}
};
</script>

20
pages/accordion/index.vue
View File

@ -1,8 +1,17 @@
<template>
<DocComponent title="Vue Accordion Component" header="Accordion" description="Accordion groups a collection of contents in tabs." :componentDocs="docs" :apiDocs="['Accordion', 'AccordionTab']" :ptTabComponent="ptComponent" />
<DocComponent
title="Vue Accordion Component"
header="Accordion"
description="Accordion groups a collection of contents in tabs."
:componentDocs="docs"
:apiDocs="['Accordion', 'AccordionTab']"
:ptTabComponent="ptComponent"
:themingDocs="themingDoc"
/>
</template>
<script>
import ThemingDoc from '@/doc/Accordion/theming/index.vue';
import AccessibilityDoc from '@/doc/accordion/AccessibilityDoc';
import BasicDoc from '@/doc/accordion/BasicDoc';
import ControlledDoc from '@/doc/accordion/ControlledDoc.vue';
@ -10,7 +19,6 @@ import Disabled from '@/doc/accordion/DisabledDoc.vue';
import DynamicDoc from '@/doc/accordion/DynamicDoc';
import ImportDoc from '@/doc/accordion/ImportDoc';
import MultipleDoc from '@/doc/accordion/MultipleDoc.vue';
import StyleDoc from '@/doc/accordion/StyleDoc';
import TemplateDoc from '@/doc/accordion/TemplateDoc.vue';
import PTComponent from '@/doc/accordion/pt/index.vue';
@ -53,18 +61,14 @@ export default {
label: 'Template',
component: TemplateDoc
},
{
id: 'style',
label: 'Style',
component: StyleDoc
},
{
id: 'accessibility',
label: 'Accessibility',
component: AccessibilityDoc
}
],
ptComponent: PTComponent
ptComponent: PTComponent,
themingDoc: ThemingDoc
};
}
};

26
pages/avatar/index.vue
View File

@ -1,16 +1,23 @@
<template>
<DocComponent title="Vue Avatar Component" header="Avatar" description="Avatar represents people using icons, labels and images." :componentDocs="docs" :apiDocs="['Avatar', 'AvatarGroup']" :ptTabComponent="ptComponent" />
<DocComponent
title="Vue Avatar Component"
header="Avatar"
description="Avatar represents people using icons, labels and images."
:componentDocs="docs"
:apiDocs="['Avatar', 'AvatarGroup']"
:ptTabComponent="ptComponent"
:themingDocs="themingDoc"
/>
</template>
<script>
import ThemingDoc from '@/doc/Avatar/theming/index.vue';
import AccessibilityDoc from '@/doc/avatar/AccessibilityDoc';
import AvatarGroupDoc from '@/doc/avatar/AvatarGroupDoc';
import IconDoc from '@/doc/avatar/IconDoc';
import ImageDoc from '@/doc/avatar/ImageDoc';
import ImportDoc from '@/doc/avatar/ImportDoc';
import LabelDoc from '@/doc/avatar/LabelDoc';
import StylingAvatarDoc from '@/doc/avatar/StylingAvatarDoc';
import StylingAvatarGroupDoc from '@/doc/avatar/StylingAvatarGroupDoc';
import PTComponent from '@/doc/avatar/pt/index.vue';
export default {
@ -42,23 +49,14 @@ export default {
label: 'AvatarGroup',
component: AvatarGroupDoc
},
{
id: 'stylingofavatar',
label: 'Styling of Avatar',
component: StylingAvatarDoc
},
{
id: 'stylingofavatargroup',
label: 'Styling of Avatar Group',
component: StylingAvatarGroupDoc
},
{
id: 'accessibility',
label: 'Accessibility',
component: AccessibilityDoc
}
],
ptComponent: PTComponent
ptComponent: PTComponent,
themingDoc: ThemingDoc
};
}
};

12
pages/badge/index.vue
View File

@ -1,8 +1,9 @@
<template>
<DocComponent title="Vue Badge Component" header="Badge" description="Badge is a small status indicator for another element." :componentDocs="docs" :apiDocs="['Badge', 'BadgeDirective']" :ptTabComponent="ptComponent" />
<DocComponent title="Vue Badge Component" header="Badge" description="Badge is a small status indicator for another element." :componentDocs="docs" :apiDocs="['Badge', 'BadgeDirective']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
</template>
<script>
import ThemingDoc from '@/doc/Badge/theming/index.vue';
import AccessibilityDoc from '@/doc/badge/AccessibilityDoc.vue';
import BasicDoc from '@/doc/badge/BasicDoc.vue';
import ButtonDoc from '@/doc/badge/ButtonDoc.vue';
@ -10,7 +11,6 @@ import ImportDoc from '@/doc/badge/ImportDoc.vue';
import PositionDoc from '@/doc/badge/PositionDoc.vue';
import SeverityDoc from '@/doc/badge/SeverityDoc.vue';
import SizeDoc from '@/doc/badge/SizeDoc.vue';
import StyleDoc from '@/doc/badge/StyleDoc.vue';
import PTComponent from '@/doc/badge/pt/index.vue';
export default {
@ -47,18 +47,14 @@ export default {
label: 'Button',
component: ButtonDoc
},
{
id: 'style',
label: 'Style',
component: StyleDoc
},
{
id: 'accessibility',
label: 'Accessibility',
component: AccessibilityDoc
}
],
ptComponent: PTComponent
ptComponent: PTComponent,
themingDoc: ThemingDoc
};
}
};

12
pages/blockui/index.vue
View File

@ -1,13 +1,13 @@
<template>
<DocComponent title="Vue BlockUI Component" header="BlockUI" description="BlockUI can either block other components or the whole page." :componentDocs="docs" :apiDocs="['BlockUI']" :ptTabComponent="ptComponent" />
<DocComponent title="Vue BlockUI Component" header="BlockUI" description="BlockUI can either block other components or the whole page." :componentDocs="docs" :apiDocs="['BlockUI']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
</template>
<script>
import ThemingDoc from '@/doc/Blockui/theming/index.vue';
import AccessibilityDoc from '@/doc/blockui/AccessibilityDoc.vue';
import BasicDoc from '@/doc/blockui/BasicDoc.vue';
import DocumentDoc from '@/doc/blockui/DocumentDoc.vue';
import ImportDoc from '@/doc/blockui/ImportDoc.vue';
import StyleDoc from '@/doc/blockui/StyleDoc.vue';
import PTComponent from '@/doc/blockui/pt/index.vue';
export default {
@ -29,18 +29,14 @@ export default {
label: 'Document',
component: DocumentDoc
},
{
id: 'style',
label: 'Style',
component: StyleDoc
},
{
id: 'accessibility',
label: 'Accessibility',
component: AccessibilityDoc
}
],
ptComponent: PTComponent
ptComponent: PTComponent,
themingDoc: ThemingDoc
};
}
};

13
pages/card/index.vue
View File

@ -1,5 +1,5 @@
<template>
<DocComponent title="Vue Card Component" header="Card" description="Card is a flexible container component." :componentDocs="docs" :apiDocs="['Card']" :ptTabComponent="ptComponent" />
<DocComponent title="Vue Card Component" header="Card" description="Card is a flexible container component." :componentDocs="docs" :apiDocs="['Card']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
</template>
<script>
@ -7,9 +7,8 @@ import AccessibilityDoc from '@/doc/card/AccessibilityDoc';
import AdvancedDoc from '@/doc/card/AdvancedDoc';
import BasicDoc from '@/doc/card/BasicDoc';
import ImportDoc from '@/doc/card/ImportDoc';
import StyleDoc from '@/doc/card/StyleDoc';
import PTComponent from '@/doc/card/pt/index.vue';
import ThemingDoc from '@/doc/Card/theming/index.vue';
export default {
data() {
return {
@ -29,18 +28,14 @@ export default {
label: 'Advanced',
component: AdvancedDoc
},
{
id: 'style',
label: 'Style',
component: StyleDoc
},
{
id: 'accessibility',
label: 'Accessibility',
component: AccessibilityDoc
}
],
ptComponent: PTComponent
ptComponent: PTComponent,
themingDoc: ThemingDoc
};
}
};

20
pages/carousel/index.vue
View File

@ -1,15 +1,23 @@
<template>
<DocComponent title="Vue Carousel Component" header="Carousel" description="Carousel is a content slider featuring various customization options." :componentDocs="docs" :apiDocs="['Carousel']" :ptTabComponent="ptComponent" />
<DocComponent
title="Vue Carousel Component"
header="Carousel"
description="Carousel is a content slider featuring various customization options."
:componentDocs="docs"
:apiDocs="['Carousel']"
:ptTabComponent="ptComponent"
:themingDocs="themingDoc"
/>
</template>
<script>
import ThemingDoc from '@/doc/Carousel/theming/index.vue';
import AccessibilityDoc from '@/doc/carousel/AccessibilityDoc';
import BasicDoc from '@/doc/carousel/BasicDoc';
import CircularDoc from '@/doc/carousel/CircularDoc';
import ImportDoc from '@/doc/carousel/ImportDoc';
import NumScrollDoc from '@/doc/carousel/NumScrollDoc';
import ResponsiveDoc from '@/doc/carousel/ResponsiveDoc';
import StyleDoc from '@/doc/carousel/StyleDoc';
import VerticalDoc from '@/doc/carousel/VerticalDoc';
import PTComponent from '@/doc/carousel/pt/index.vue';
@ -47,18 +55,14 @@ export default {
label: 'Vertical',
component: VerticalDoc
},
{
id: 'style',
label: 'Style',
component: StyleDoc
},
{
id: 'accessibility',
label: 'Accessibility',
component: AccessibilityDoc
}
],
ptComponent: PTComponent
ptComponent: PTComponent,
themingDoc: ThemingDoc
};
}
};

12
pages/chip/index.vue
View File

@ -1,14 +1,14 @@
<template>
<DocComponent title="Vue Chip Component" header="Chip" description="Chip represents entities using icons, labels and images." :componentDocs="docs" :apiDocs="['Chip']" :ptTabComponent="ptComponent" />
<DocComponent title="Vue Chip Component" header="Chip" description="Chip represents entities using icons, labels and images." :componentDocs="docs" :apiDocs="['Chip']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
</template>
<script>
import ThemingDoc from '@/doc/Chip/theming/index.vue';
import AccessibilityDoc from '@/doc/chip/AccessibilityDoc';
import BasicDoc from '@/doc/chip/BasicDoc';
import IconDoc from '@/doc/chip/IconDoc';
import ImageDoc from '@/doc/chip/ImageDoc';
import ImportDoc from '@/doc/chip/ImportDoc';
import StyleDoc from '@/doc/chip/StyleDoc';
import TemplateDoc from '@/doc/chip/TemplateDoc';
import PTComponent from '@/doc/chip/pt/index.vue';
@ -41,18 +41,14 @@ export default {
label: 'Template',
component: TemplateDoc
},
{
id: 'style',
label: 'Style',
component: StyleDoc
},
{
id: 'accessibility',
label: 'Accessibility',
component: AccessibilityDoc
}
],
ptComponent: PTComponent
ptComponent: PTComponent,
themingDoc: ThemingDoc
};
}
};

12
pages/divider/index.vue
View File

@ -1,14 +1,14 @@
<template>
<DocComponent title="Vue Divider Component" header="Divider" description="Divider is used to separate contents." :componentDocs="docs" :apiDocs="['Divider']" :ptTabComponent="ptComponent" />
<DocComponent title="Vue Divider Component" header="Divider" description="Divider is used to separate contents." :componentDocs="docs" :apiDocs="['Divider']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
</template>
<script>
import ThemingDoc from '@/doc/Divider/theming/index.vue';
import AccessibilityDoc from '@/doc/divider/AccessibilityDoc.vue';
import BasicDoc from '@/doc/divider/BasicDoc.vue';
import ContentDoc from '@/doc/divider/ContentDoc.vue';
import ImportDoc from '@/doc/divider/ImportDoc.vue';
import LoginDoc from '@/doc/divider/LoginDoc.vue';
import StyleDoc from '@/doc/divider/StyleDoc.vue';
import TypeDoc from '@/doc/divider/TypeDoc.vue';
import VerticalDoc from '@/doc/divider/VerticalDoc.vue';
import PTComponent from '@/doc/divider/pt/index.vue';
@ -47,18 +47,14 @@ export default {
label: 'Login',
component: LoginDoc
},
{
id: 'style',
label: 'Style',
component: StyleDoc
},
{
id: 'accessibility',
label: 'Accessibility',
component: AccessibilityDoc
}
],
ptComponent: PTComponent
ptComponent: PTComponent,
themingDoc: ThemingDoc
};
}
};

12
pages/fieldset/index.vue
View File

@ -1,12 +1,12 @@
<template>
<DocComponent title="Vue Fieldset Component" header="Fieldset" description="Fieldset is a grouping component with a content toggle feature." :componentDocs="docs" :apiDocs="['Fieldset']" :ptTabComponent="ptComponent" />
<DocComponent title="Vue Fieldset Component" header="Fieldset" description="Fieldset is a grouping component with a content toggle feature." :componentDocs="docs" :apiDocs="['Fieldset']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
</template>
<script>
import ThemingDoc from '@/doc/Fieldset/theming/index.vue';
import AccessibilityDoc from '@/doc/fieldset/AccessibilityDoc.vue';
import BasicDoc from '@/doc/fieldset/BasicDoc.vue';
import ImportDoc from '@/doc/fieldset/ImportDoc.vue';
import StyleDoc from '@/doc/fieldset/StyleDoc.vue';
import TemplateDoc from '@/doc/fieldset/TemplateDoc.vue';
import ToggleableDoc from '@/doc/fieldset/ToggleableDoc.vue';
import PTComponent from '@/doc/fieldset/pt/index.vue';
@ -35,18 +35,14 @@ export default {
label: 'Template',
component: TemplateDoc
},
{
id: 'style',
label: 'Style',
component: StyleDoc
},
{
id: 'accessibility',
label: 'Accessibility',
component: AccessibilityDoc
}
],
ptComponent: PTComponent
ptComponent: PTComponent,
themingDoc: ThemingDoc
};
}
};

12
pages/galleria/index.vue
View File

@ -1,8 +1,9 @@
<template>
<DocComponent title="Vue Gallery Component" header="Galleria" description="Galleria is a content gallery component." :componentDocs="docs" :apiDocs="['Galleria']" :ptTabComponent="ptComponent" />
<DocComponent title="Vue Gallery Component" header="Galleria" description="Galleria is a content gallery component." :componentDocs="docs" :apiDocs="['Galleria']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
</template>
<script>
import ThemingDoc from '@/doc/Galleria/theming/index.vue';
import AccessibilityDoc from '@/doc/galleria/AccessibilityDoc';
import AdvancedDoc from '@/doc/galleria/AdvancedDoc';
import AutoPlayDoc from '@/doc/galleria/AutoPlayDoc';
@ -11,7 +12,6 @@ import CaptionDoc from '@/doc/galleria/CaptionDoc';
import ControlledDoc from '@/doc/galleria/ControlledDoc';
import ImportDoc from '@/doc/galleria/ImportDoc';
import ResponsiveDoc from '@/doc/galleria/ResponsiveDoc';
import StyleDoc from '@/doc/galleria/StyleDoc';
import ThumbnailDoc from '@/doc/galleria/ThumbnailDoc';
import CustomContentDoc from '@/doc/galleria/fullscreen/CustomContentDoc';
import WithThumbnailsDoc from '@/doc/galleria/fullscreen/WithThumbnailsDoc';
@ -146,18 +146,14 @@ export default {
label: 'Advanced',
component: AdvancedDoc
},
{
id: 'style',
label: 'Style',
component: StyleDoc
},
{
id: 'accessibility',
label: 'Accessibility',
component: AccessibilityDoc
}
],
ptComponent: PTComponent
ptComponent: PTComponent,
themingDoc: ThemingDoc
};
}
};

12
pages/image/index.vue
View File

@ -1,13 +1,13 @@
<template>
<DocComponent title="Vue Image Component" header="Image" description="Displays a single image with preview and tranformation options." :componentDocs="docs" :apiDocs="['Image']" :ptTabComponent="ptComponent" />
<DocComponent title="Vue Image Component" header="Image" description="Displays a single image with preview and tranformation options." :componentDocs="docs" :apiDocs="['Image']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
</template>
<script>
import ThemingDoc from '@/doc/Image/theming/index.vue';
import AccessibilityDoc from '@/doc/image/AccessibilityDoc';
import BasicDoc from '@/doc/image/BasicDoc';
import ImportDoc from '@/doc/image/ImportDoc';
import PreviewDoc from '@/doc/image/PreviewDoc';
import StyleDoc from '@/doc/image/StyleDoc';
import TemplateDoc from '@/doc/image/TemplateDoc';
import PTComponent from '@/doc/image/pt/index.vue';
@ -35,18 +35,14 @@ export default {
label: 'Template',
component: TemplateDoc
},
{
id: 'style',
label: 'Style',
component: StyleDoc
},
{
id: 'accessibility',
label: 'Accessibility',
component: AccessibilityDoc
}
],
ptComponent: PTComponent
ptComponent: PTComponent,
themingDoc: ThemingDoc
};
}
};

11
pages/inplace/index.vue
View File

@ -6,17 +6,18 @@
:componentDocs="docs"
:apiDocs="['Inplace']"
:ptTabComponent="ptComponent"
:themingDocs="themingDoc"
/>
</template>
<script>
import ThemingDoc from '@/doc/Inplace/theming/index.vue';
import AccessibilityDoc from '@/doc/inplace/AccessibilityDoc';
import BasicDoc from '@/doc/inplace/BasicDoc';
import ImageDoc from '@/doc/inplace/ImageDoc';
import ImportDoc from '@/doc/inplace/ImportDoc';
import InputDoc from '@/doc/inplace/InputDoc';
import LazyDoc from '@/doc/inplace/LazyDoc';
import StyleDoc from '@/doc/inplace/StyleDoc';
import PTComponent from '@/doc/inplace/pt/index.vue';
export default {
@ -48,18 +49,14 @@ export default {
label: 'Lazy',
component: LazyDoc
},
{
id: 'style',
label: 'Style',
component: StyleDoc
},
{
id: 'accessibility',
label: 'Accessibility',
component: AccessibilityDoc
}
],
ptComponent: PTComponent
ptComponent: PTComponent,
themingDoc: ThemingDoc
};
}
};

12
pages/progressbar/index.vue
View File

@ -1,14 +1,14 @@
<template>
<DocComponent title="Vue ProgressBar Component" header="ProgressBar" description="ProgressBar is a process status indicator." :componentDocs="docs" :apiDocs="['ProgressBar']" :ptTabComponent="ptComponent" />
<DocComponent title="Vue ProgressBar Component" header="ProgressBar" description="ProgressBar is a process status indicator." :componentDocs="docs" :apiDocs="['ProgressBar']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
</template>
<script>
import ThemingDoc from '@/doc/Progressbar/theming/index.vue';
import AccessibilityDoc from '@/doc/progressbar/AccessibilityDoc';
import BasicDoc from '@/doc/progressbar/BasicDoc';
import DynamicDoc from '@/doc/progressbar/DynamicDoc';
import ImportDoc from '@/doc/progressbar/ImportDoc';
import IndeterminateDoc from '@/doc/progressbar/IndeterminateDoc';
import StyleDoc from '@/doc/progressbar/StyleDoc';
import TemplateDoc from '@/doc/progressbar/TemplateDoc';
import PTComponent from '@/doc/progressbar/pt/index.vue';
@ -41,18 +41,14 @@ export default {
label: 'Indeterminate',
component: IndeterminateDoc
},
{
id: 'style',
label: 'Style',
component: StyleDoc
},
{
id: 'accessibility',
label: 'Accessibility',
component: AccessibilityDoc
}
],
ptComponent: PTComponent
ptComponent: PTComponent,
themingDoc: ThemingDoc
};
}
};

20
pages/skeleton/index.vue
View File

@ -1,15 +1,23 @@
<template>
<DocComponent title="Vue Skeleton Component" header="Skeleton" description="Skeleton is a placeholder to display instead of the actual content." :componentDocs="docs" :apiDocs="['Skeleton']" :ptTabComponent="ptComponent" />
<DocComponent
title="Vue Skeleton Component"
header="Skeleton"
description="Skeleton is a placeholder to display instead of the actual content."
:componentDocs="docs"
:apiDocs="['Skeleton']"
:ptTabComponent="ptComponent"
:themingDocs="themingDoc"
/>
</template>
<script>
import ThemingDoc from '@/doc/Skeleton/theming/index.vue';
import Accessibility from '@/doc/skeleton/AccessibilityDoc.vue';
import CardDoc from '@/doc/skeleton/CardDoc.vue';
import DataTableDoc from '@/doc/skeleton/DataTableDoc.vue';
import ImportDoc from '@/doc/skeleton/ImportDoc.vue';
import ListDoc from '@/doc/skeleton/ListDoc.vue';
import ShapesDoc from '@/doc/skeleton/ShapesDoc.vue';
import StyleDoc from '@/doc/skeleton/StyleDoc.vue';
import PTComponent from '@/doc/skeleton/pt/index.vue';
export default {
@ -41,18 +49,14 @@ export default {
label: 'Datatable',
component: DataTableDoc
},
{
id: 'style',
label: 'Style',
component: StyleDoc
},
{
id: 'accessibility',
label: 'Accessibility',
component: Accessibility
}
],
ptComponent: PTComponent
ptComponent: PTComponent,
themingDoc: ThemingDoc
};
}
};

20
pages/splitter/index.vue
View File

@ -1,14 +1,22 @@
<template>
<DocComponent title="Vue Splitter Component" header="Splitter" description="Splitter is utilized to separate and resize panels." :componentDocs="docs" :apiDocs="['Splitter', 'SplitterPanel']" :ptTabComponent="ptComponent" />
<DocComponent
title="Vue Splitter Component"
header="Splitter"
description="Splitter is utilized to separate and resize panels."
:componentDocs="docs"
:apiDocs="['Splitter', 'SplitterPanel']"
:ptTabComponent="ptComponent"
:themingDocs="themingDoc"
/>
</template>
<script>
import ThemingDoc from '@/doc/Splitter/theming/index.vue';
import AccessibilityDoc from '@/doc/splitter/AccessibilityDoc';
import HorizontalDoc from '@/doc/splitter/HorizontalDoc.vue';
import ImportDoc from '@/doc/splitter/ImportDoc';
import NestedDoc from '@/doc/splitter/NestedDoc.vue';
import SizeDoc from '@/doc/splitter/SizeDoc.vue';
import StyleDoc from '@/doc/splitter/StyleDoc';
import VerticalDoc from '@/doc/splitter/VerticalDoc.vue';
import PTComponent from '@/doc/splitter/pt/index.vue';
@ -41,18 +49,14 @@ export default {
label: 'Nested',
component: NestedDoc
},
{
id: 'style',
label: 'Style',
component: StyleDoc
},
{
id: 'accessibility',
label: 'Accessibility',
component: AccessibilityDoc
}
],
ptComponent: PTComponent
ptComponent: PTComponent,
themingDoc: ThemingDoc
};
}
};

20
pages/tabview/index.vue
View File

@ -1,8 +1,17 @@
<template>
<DocComponent title="Vue Tabs Component" header="TabView" description="TabView is a container component to group content with tabs." :componentDocs="docs" :apiDocs="['TabView', 'TabPanel']" :ptTabComponent="ptComponent" />
<DocComponent
title="Vue Tabs Component"
header="TabView"
description="TabView is a container component to group content with tabs."
:componentDocs="docs"
:apiDocs="['TabView', 'TabPanel']"
:ptTabComponent="ptComponent"
:themingDocs="themingDoc"
/>
</template>
<script>
import ThemingDoc from '@/doc/Tabview/theming/index.vue';
import AccessibilityDoc from '@/doc/tabview/AccessibilityDoc.vue';
import BasicDoc from '@/doc/tabview/BasicDoc.vue';
import ControlledDoc from '@/doc/tabview/ControlledDoc.vue';
@ -10,7 +19,6 @@ import DisabledDoc from '@/doc/tabview/DisabledDoc.vue';
import DynamicDoc from '@/doc/tabview/DynamicDoc.vue';
import ImportDoc from '@/doc/tabview/ImportDoc.vue';
import ScrollableDoc from '@/doc/tabview/ScrollableDoc.vue';
import StyleDoc from '@/doc/tabview/StyleDoc.vue';
import TemplateDoc from '@/doc/tabview/TemplateDoc.vue';
import PTComponent from '@/doc/tabview/pt/index.vue';
@ -53,18 +61,14 @@ export default {
label: 'Template',
component: TemplateDoc
},
{
id: 'style',
label: 'Style',
component: StyleDoc
},
{
id: 'accessibility',
label: 'Accessibility',
component: AccessibilityDoc
}
],
ptComponent: PTComponent
ptComponent: PTComponent,
themingDoc: ThemingDoc
};
}
};

12
pages/tag/index.vue
View File

@ -1,15 +1,15 @@
<template>
<DocComponent title="Vue Tag Component" header="Tag" description="Tag component is used to categorize content." :componentDocs="docs" :apiDocs="['Tag']" :ptTabComponent="ptComponent" />
<DocComponent title="Vue Tag Component" header="Tag" description="Tag component is used to categorize content." :componentDocs="docs" :apiDocs="['Tag']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
</template>
<script>
import ThemingDoc from '@/doc/Tag/theming/index.vue';
import AccessibilityDoc from '@/doc/tag/AccessibilityDoc';
import BasicDoc from '@/doc/tag/BasicDoc';
import IconDoc from '@/doc/tag/IconDoc';
import ImportDoc from '@/doc/tag/ImportDoc';
import PillDoc from '@/doc/tag/PillDoc';
import SeverityDoc from '@/doc/tag/SeverityDoc';
import StyleDoc from '@/doc/tag/StyleDoc';
import TemplateDoc from '@/doc/tag/TemplateDoc';
import PTComponent from '@/doc/tag/pt/index.vue';
@ -47,18 +47,14 @@ export default {
label: 'Template',
component: TemplateDoc
},
{
id: 'style',
label: 'Style',
component: StyleDoc
},
{
id: 'accessibility',
label: 'Accessibility',
component: AccessibilityDoc
}
],
ptComponent: PTComponent
ptComponent: PTComponent,
themingDoc: ThemingDoc
};
}
};

12
pages/terminal/index.vue
View File

@ -1,12 +1,12 @@
<template>
<DocComponent title="Vue Terminal Component" header="Terminal" description="Terminal is a text based user interface." :componentDocs="docs" :apiDocs="['Terminal', 'TerminalService']" :ptTabComponent="ptComponent" />
<DocComponent title="Vue Terminal Component" header="Terminal" description="Terminal is a text based user interface." :componentDocs="docs" :apiDocs="['Terminal', 'TerminalService']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
</template>
<script>
import ThemingDoc from '@/doc/Terminal/theming/index.vue';
import AccessibilityDoc from '@/doc/terminal/AccessibilityDoc';
import BasicDoc from '@/doc/terminal/BasicDoc';
import ImportDoc from '@/doc/terminal/ImportDoc';
import StyleDoc from '@/doc/terminal/StyleDoc';
import PTComponent from '@/doc/terminal/pt/index.vue';
export default {
@ -23,18 +23,14 @@ export default {
label: 'Basic',
component: BasicDoc
},
{
id: 'style',
label: 'Style',
component: StyleDoc
},
{
id: 'accessibility',
label: 'Accessibility',
component: AccessibilityDoc
}
],
ptComponent: PTComponent
ptComponent: PTComponent,
themingDoc: ThemingDoc
};
}
};

12
pages/toolbar/index.vue
View File

@ -1,11 +1,11 @@
<template>
<DocComponent title="Vue Toolbar Component" header="Toolbar" description="Toolbar is a grouping component for buttons and other content." :componentDocs="docs" :apiDocs="['Toolbar']" :ptTabComponent="ptComponent" />
<DocComponent title="Vue Toolbar Component" header="Toolbar" description="Toolbar is a grouping component for buttons and other content." :componentDocs="docs" :apiDocs="['Toolbar']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
</template>
<script>
import ThemingDoc from '@/doc/Toolbar/theming/index.vue';
import AccessibilityDoc from '@/doc/toolbar/AccessibilityDoc';
import BasicDoc from '@/doc/toolbar/BasicDoc';
import ImportDoc from '@/doc/toolbar/ImportDoc';
import StyleDoc from '@/doc/toolbar/StyleDoc';
import PTComponent from '@/doc/toolbar/pt/index.vue';
export default {
@ -22,18 +22,14 @@ export default {
label: 'Basic',
component: BasicDoc
},
{
id: 'style',
label: 'Style',
component: StyleDoc
},
{
id: 'accessibility',
label: 'Accessibility',
component: AccessibilityDoc
}
],
ptComponent: PTComponent
ptComponent: PTComponent,
themingDoc: ThemingDoc
};
}
};