Styled mode doc updates
tugcekucukoglu
parent
4d90410cba
commit
e08d14a771
|
|
@ -53,8 +53,8 @@ export const getStyleOptions = (name) => {
|
|||
return data;
|
||||
};
|
||||
|
||||
export const getTokenOptions = (preset, name) => {
|
||||
const values = APIDocs[`${preset.toLowerCase()}/${name.toLowerCase()}`]?.tokens?.values;
|
||||
export const getTokenOptions = (name) => {
|
||||
const values = APIDocs[`themes/${name.toLowerCase()}`]?.tokens?.values;
|
||||
let data = [];
|
||||
|
||||
for (const [key, value] of Object.entries(values || {})) {
|
||||
|
|
|
|||
|
|
@ -1,33 +0,0 @@
|
|||
<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-accordion</td>
|
||||
<td>Container element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-accordionpanel</td>
|
||||
<td>Container of a panel.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-accordionheader</td>
|
||||
<td>Header of a panel.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-accordioncontent</td>
|
||||
<td>Content of a panel.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getStyleOptions } from '@/components/doc/helpers';
|
||||
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -48,14 +48,14 @@ export default {
|
|||
description: 'List of class names used in the styled mode.',
|
||||
component: DocApiTable,
|
||||
data: getStyleOptions('AccordionPanel')
|
||||
},
|
||||
{
|
||||
id: 'theming.tokens',
|
||||
label: 'Design Tokens',
|
||||
description: 'List of design tokens used in a preset.',
|
||||
component: DocApiTable,
|
||||
data: getTokenOptions('Accordion')
|
||||
}
|
||||
// {
|
||||
// id: 'theming.tokens',
|
||||
// label: 'Design Tokens',
|
||||
// description: 'List of design tokens used in a preset.',
|
||||
// component: DocApiTable,
|
||||
// data: getTokenOptions('Accordion')
|
||||
// }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,53 +0,0 @@
|
|||
<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-autocomplete</td>
|
||||
<td>Container element</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-autocomplete-panel</td>
|
||||
<td>Overlay panel of suggestions.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-autocomplete-items</td>
|
||||
<td>List container of suggestions.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-autocomplete-item</td>
|
||||
<td>List item of a suggestion.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-autocomplete-token</td>
|
||||
<td>Element of a selected item in multiple mode.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-autocomplete-token-icon</td>
|
||||
<td>Close icon element of a selected item in multiple mode.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-autocomplete-token-label</td>
|
||||
<td>Label of a selected item in multiple mode.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-autocomplete-empty-message</td>
|
||||
<td>Container element when there is no suggestion to display.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-overlay-open</td>
|
||||
<td>Container element when overlay is visible.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getStyleOptions } from '@/components/doc/helpers';
|
||||
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -27,14 +27,14 @@ export default {
|
|||
description: 'List of class names used in the styled mode.',
|
||||
component: DocApiTable,
|
||||
data: getStyleOptions('AutoComplete')
|
||||
},
|
||||
{
|
||||
id: 'theming.tokens',
|
||||
label: 'Design Tokens',
|
||||
description: 'List of design tokens used in a preset.',
|
||||
component: DocApiTable,
|
||||
data: getTokenOptions('AutoComplete')
|
||||
}
|
||||
// {
|
||||
// id: 'theming.tokens',
|
||||
// label: 'Design Tokens',
|
||||
// description: 'List of design tokens used in a preset.',
|
||||
// component: DocApiTable,
|
||||
// data: getTokenOptions('AutoComplete')
|
||||
// }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,62 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText id="stylingofavatar" label="Styling of Avatar" 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-avatar</td>
|
||||
<td>Container element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-avatar-image</td>
|
||||
<td>Container element in image mode.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-avatar-circle</td>
|
||||
<td>Container element with a circle shape.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-avatar-text</td>
|
||||
<td>Text of the Avatar.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-avatar-icon</td>
|
||||
<td>Icon of the Avatar.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-avatar-lg</td>
|
||||
<td>Container element with a large size.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-avatar-xl</td>
|
||||
<td>Container element with an xlarge size.</td>
|
||||
</tr>
|
||||
</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>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getStyleOptions } from '@/components/doc/helpers';
|
||||
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -27,14 +27,14 @@ export default {
|
|||
description: 'List of class names used in the styled mode.',
|
||||
component: DocApiTable,
|
||||
data: getStyleOptions('Avatar')
|
||||
},
|
||||
{
|
||||
id: 'theming.tokens',
|
||||
label: 'Design Tokens',
|
||||
description: 'List of design tokens used in a preset.',
|
||||
component: DocApiTable,
|
||||
data: getTokenOptions('Avatar')
|
||||
}
|
||||
// {
|
||||
// id: 'theming.tokens',
|
||||
// label: 'Design Tokens',
|
||||
// description: 'List of design tokens used in a preset.',
|
||||
// component: DocApiTable,
|
||||
// data: getTokenOptions('Avatar')
|
||||
// }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,53 +0,0 @@
|
|||
<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-badge</td>
|
||||
<td>Badge element</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-overlay-badge</td>
|
||||
<td>Wrapper of a badge and its target.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-badge-dot</td>
|
||||
<td>Badge element with no value.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-badge-success</td>
|
||||
<td>Badge element with success severity.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-badge-info</td>
|
||||
<td>Badge element with info severity.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-badge-warn</td>
|
||||
<td>Badge element with warn severity.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-badge-danger</td>
|
||||
<td>Badge element with danger severity.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-badge-lg</td>
|
||||
<td>Large badge element</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-badge-xl</td>
|
||||
<td>Extra large badge element</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getStyleOptions } from '@/components/doc/helpers';
|
||||
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -34,14 +34,14 @@ export default {
|
|||
description: 'List of class names used in the styled mode.',
|
||||
component: DocApiTable,
|
||||
data: getStyleOptions('OverlayBadge')
|
||||
},
|
||||
{
|
||||
id: 'theming.tokens',
|
||||
label: 'Design Tokens',
|
||||
description: 'List of design tokens used in a preset.',
|
||||
component: DocApiTable,
|
||||
data: getTokenOptions('Badge')
|
||||
}
|
||||
// {
|
||||
// id: 'theming.tokens',
|
||||
// label: 'Design Tokens',
|
||||
// description: 'List of design tokens used in a preset.',
|
||||
// component: DocApiTable,
|
||||
// data: getTokenOptions('Badge')
|
||||
// }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,25 +0,0 @@
|
|||
<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-blockui</td>
|
||||
<td>Mask element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-blockui-document</td>
|
||||
<td>Mask element in full screen mode.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getStyleOptions } from '@/components/doc/helpers';
|
||||
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -27,14 +27,14 @@ export default {
|
|||
description: 'List of class names used in the styled mode.',
|
||||
component: DocApiTable,
|
||||
data: getStyleOptions('BlockUI')
|
||||
},
|
||||
{
|
||||
id: 'theming.tokens',
|
||||
label: 'Design Tokens',
|
||||
description: 'List of design tokens used in a preset.',
|
||||
component: DocApiTable,
|
||||
data: getTokenOptions('BlockUI')
|
||||
}
|
||||
// {
|
||||
// id: 'theming.tokens',
|
||||
// label: 'Design Tokens',
|
||||
// description: 'List of design tokens used in a preset.',
|
||||
// component: DocApiTable,
|
||||
// data: getTokenOptions('BlockUI')
|
||||
// }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,45 +0,0 @@
|
|||
<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-breadcrumb</td>
|
||||
<td>Container element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-breadcrumb-list</td>
|
||||
<td>Ordered list element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-breadcrumb-home</td>
|
||||
<td>First list element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-menuitem</td>
|
||||
<td>Menuitem element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-menuitem-link</td>
|
||||
<td>Link element of the menuitem.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-menuitem-text</td>
|
||||
<td>Label of a menuitem.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-menuitem-icon</td>
|
||||
<td>Icon of a menuitem.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getStyleOptions } from '@/components/doc/helpers';
|
||||
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -27,14 +27,14 @@ export default {
|
|||
description: 'List of class names used in the styled mode.',
|
||||
component: DocApiTable,
|
||||
data: getStyleOptions('Breadcrumb')
|
||||
},
|
||||
{
|
||||
id: 'theming.tokens',
|
||||
label: 'Design Tokens',
|
||||
description: 'List of design tokens used in a preset.',
|
||||
component: DocApiTable,
|
||||
data: getTokenOptions('Breadcrumb')
|
||||
}
|
||||
// {
|
||||
// id: 'theming.tokens',
|
||||
// label: 'Design Tokens',
|
||||
// description: 'List of design tokens used in a preset.',
|
||||
// component: DocApiTable,
|
||||
// data: getTokenOptions('Breadcrumb')
|
||||
// }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,37 +0,0 @@
|
|||
<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-button</td>
|
||||
<td>Button element</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-button-icon</td>
|
||||
<td>Icon element</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-button-label</td>
|
||||
<td>Label element of the button</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-button-sm</td>
|
||||
<td>Smaller button element</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-button-lg</td>
|
||||
<td>Larger button element</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getStyleOptions } from '@/components/doc/helpers';
|
||||
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -34,14 +34,14 @@ export default {
|
|||
description: 'List of class names used in the styled mode.',
|
||||
component: DocApiTable,
|
||||
data: getStyleOptions('ButtonGroup')
|
||||
},
|
||||
{
|
||||
id: 'theming.tokens',
|
||||
label: 'Design Tokens',
|
||||
description: 'List of design tokens used in a preset.',
|
||||
component: DocApiTable,
|
||||
data: getTokenOptions('Button')
|
||||
}
|
||||
// {
|
||||
// id: 'theming.tokens',
|
||||
// label: 'Design Tokens',
|
||||
// description: 'List of design tokens used in a preset.',
|
||||
// component: DocApiTable,
|
||||
// data: getTokenOptions('Button')
|
||||
// }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,37 +0,0 @@
|
|||
<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-card</td>
|
||||
<td>Container element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-card-title</td>
|
||||
<td>Title element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-card-subtitle</td>
|
||||
<td>Subtitle element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-card-content</td>
|
||||
<td>Content of the card.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-card-footer</td>
|
||||
<td>Footer of the card.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getStyleOptions } from '@/components/doc/helpers';
|
||||
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -27,14 +27,14 @@ export default {
|
|||
description: 'List of class names used in the styled mode.',
|
||||
component: DocApiTable,
|
||||
data: getStyleOptions('Card')
|
||||
},
|
||||
{
|
||||
id: 'theming.tokens',
|
||||
label: 'Design Tokens',
|
||||
description: 'List of design tokens used in a preset.',
|
||||
component: DocApiTable,
|
||||
data: getTokenOptions('Card')
|
||||
}
|
||||
// {
|
||||
// id: 'theming.tokens',
|
||||
// label: 'Design Tokens',
|
||||
// description: 'List of design tokens used in a preset.',
|
||||
// component: DocApiTable,
|
||||
// data: getTokenOptions('Card')
|
||||
// }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,50 +0,0 @@
|
|||
<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-carousel</td>
|
||||
<td>Container element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-carousel-header</td>
|
||||
<td>Header section.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-carousel-footer</td>
|
||||
<td>Footer section.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-carousel-content</td>
|
||||
<td>Main content element. It contains the container of the viewport.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-carousel-container</td>
|
||||
<td>Container of the viewport. It contains navigation buttons and viewport.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-carousel-items-content</td>
|
||||
<td>Viewport.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-carousel-indicators</td>
|
||||
<td>Container of the indicators.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-carousel-indicator</td>
|
||||
<td>Indicator element.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getStyleOptions } from '@/components/doc/helpers';
|
||||
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -27,14 +27,14 @@ export default {
|
|||
description: 'List of class names used in the styled mode.',
|
||||
component: DocApiTable,
|
||||
data: getStyleOptions('Carousel')
|
||||
},
|
||||
{
|
||||
id: 'theming.tokens',
|
||||
label: 'Design Tokens',
|
||||
description: 'List of design tokens used in a preset.',
|
||||
component: DocApiTable,
|
||||
data: getTokenOptions('Carousel')
|
||||
}
|
||||
// {
|
||||
// id: 'theming.tokens',
|
||||
// label: 'Design Tokens',
|
||||
// description: 'List of design tokens used in a preset.',
|
||||
// component: DocApiTable,
|
||||
// data: getTokenOptions('Carousel')
|
||||
// }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,49 +0,0 @@
|
|||
<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-cascadeselect</td>
|
||||
<td>Container element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-cascadeselect-label</td>
|
||||
<td>Element to display label of selected option.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-cascadeselect-trigger</td>
|
||||
<td>Icon element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-cascadeselect-panel</td>
|
||||
<td>Icon element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-cascadeselect-items-wrapper</td>
|
||||
<td>Wrapper element of items list.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-cascadeselect-items</td>
|
||||
<td>List element of items.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-cascadeselect-item</td>
|
||||
<td>An item in the list.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-overlay-open</td>
|
||||
<td>Container element when overlay is visible.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getStyleOptions } from '@/components/doc/helpers';
|
||||
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -27,14 +27,14 @@ export default {
|
|||
description: 'List of class names used in the styled mode.',
|
||||
component: DocApiTable,
|
||||
data: getStyleOptions('CascadeSelect')
|
||||
},
|
||||
{
|
||||
id: 'theming.tokens',
|
||||
label: 'Design Tokens',
|
||||
description: 'List of design tokens used in a preset.',
|
||||
component: DocApiTable,
|
||||
data: getTokenOptions('CascadeSelect')
|
||||
}
|
||||
// {
|
||||
// id: 'theming.tokens',
|
||||
// label: 'Design Tokens',
|
||||
// description: 'List of design tokens used in a preset.',
|
||||
// component: DocApiTable,
|
||||
// data: getTokenOptions('CascadeSelect')
|
||||
// }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,21 +0,0 @@
|
|||
<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-chart</td>
|
||||
<td>Container element.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
<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-checkbox</td>
|
||||
<td>Container element</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-checkbox-box</td>
|
||||
<td>Container of icon.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-checkbox-icon</td>
|
||||
<td>Icon element.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getStyleOptions } from '@/components/doc/helpers';
|
||||
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -27,14 +27,14 @@ export default {
|
|||
description: 'List of class names used in the styled mode.',
|
||||
component: DocApiTable,
|
||||
data: getStyleOptions('Checkbox')
|
||||
},
|
||||
{
|
||||
id: 'theming.tokens',
|
||||
label: 'Design Tokens',
|
||||
description: 'List of design tokens used in a preset.',
|
||||
component: DocApiTable,
|
||||
data: getTokenOptions('Checkbox')
|
||||
}
|
||||
// {
|
||||
// id: 'theming.tokens',
|
||||
// label: 'Design Tokens',
|
||||
// description: 'List of design tokens used in a preset.',
|
||||
// component: DocApiTable,
|
||||
// data: getTokenOptions('Checkbox')
|
||||
// }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,33 +0,0 @@
|
|||
<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>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getStyleOptions } from '@/components/doc/helpers';
|
||||
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -27,14 +27,14 @@ export default {
|
|||
description: 'List of class names used in the styled mode.',
|
||||
component: DocApiTable,
|
||||
data: getStyleOptions('Chip')
|
||||
},
|
||||
{
|
||||
id: 'theming.tokens',
|
||||
label: 'Design Tokens',
|
||||
description: 'List of design tokens used in a preset.',
|
||||
component: DocApiTable,
|
||||
data: getTokenOptions('Chip')
|
||||
}
|
||||
// {
|
||||
// id: 'theming.tokens',
|
||||
// label: 'Design Tokens',
|
||||
// description: 'List of design tokens used in a preset.',
|
||||
// component: DocApiTable,
|
||||
// data: getTokenOptions('Chip')
|
||||
// }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,58 +0,0 @@
|
|||
<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-colorpicker</td>
|
||||
<td>Container element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-colorpicker-overlay</td>
|
||||
<td>Container element in overlay mode.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-colorpicker-preview</td>
|
||||
<td>Preview input in overlay mode.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-colorpicker-panel</td>
|
||||
<td>Panel element of the colorpicker.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-colorpicker-content</td>
|
||||
<td>Wrapper that contains color and hue sections.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-colorpicker-color-selector</td>
|
||||
<td>Color selector container.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-colorpicker-color</td>
|
||||
<td>Color element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-colorpicker-color-handle</td>
|
||||
<td>Handle of the color element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-colorpicker-hue</td>
|
||||
<td>Hue slider.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-colorpicker-hue-handle</td>
|
||||
<td>Handle of the hue slider.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getStyleOptions } from '@/components/doc/helpers';
|
||||
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -27,14 +27,14 @@ export default {
|
|||
description: 'List of class names used in the styled mode.',
|
||||
component: DocApiTable,
|
||||
data: getStyleOptions('ColorPicker')
|
||||
},
|
||||
{
|
||||
id: 'theming.tokens',
|
||||
label: 'Design Tokens',
|
||||
description: 'List of design tokens used in a preset.',
|
||||
component: DocApiTable,
|
||||
data: getTokenOptions('ColorPicker')
|
||||
}
|
||||
// {
|
||||
// id: 'theming.tokens',
|
||||
// label: 'Design Tokens',
|
||||
// description: 'List of design tokens used in a preset.',
|
||||
// component: DocApiTable,
|
||||
// data: getTokenOptions('ColorPicker')
|
||||
// }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,21 +0,0 @@
|
|||
<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-confirm-dialog</td>
|
||||
<td>Container element.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getStyleOptions } from '@/components/doc/helpers';
|
||||
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -27,14 +27,14 @@ export default {
|
|||
description: 'List of class names used in the styled mode.',
|
||||
component: DocApiTable,
|
||||
data: getStyleOptions('ConfirmDialog')
|
||||
},
|
||||
{
|
||||
id: 'theming.tokens',
|
||||
label: 'Design Tokens',
|
||||
description: 'List of design tokens used in a preset.',
|
||||
component: DocApiTable,
|
||||
data: getTokenOptions('ConfirmDialog')
|
||||
}
|
||||
// {
|
||||
// id: 'theming.tokens',
|
||||
// label: 'Design Tokens',
|
||||
// description: 'List of design tokens used in a preset.',
|
||||
// component: DocApiTable,
|
||||
// data: getTokenOptions('ConfirmDialog')
|
||||
// }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,37 +0,0 @@
|
|||
<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-confirm-popup</td>
|
||||
<td>Container element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-confirm-popup-content</td>
|
||||
<td>Content element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-confirm-popup-icon</td>
|
||||
<td>Message icon.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-confirm-popup-message</td>
|
||||
<td>Message text.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-confirm-popup-footer</td>
|
||||
<td>Footer element for buttons.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getStyleOptions } from '@/components/doc/helpers';
|
||||
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -27,14 +27,14 @@ export default {
|
|||
description: 'List of class names used in the styled mode.',
|
||||
component: DocApiTable,
|
||||
data: getStyleOptions('ConfirmPopup')
|
||||
},
|
||||
{
|
||||
id: 'theming.tokens',
|
||||
label: 'Design Tokens',
|
||||
description: 'List of design tokens used in a preset.',
|
||||
component: DocApiTable,
|
||||
data: getTokenOptions('ConfirmPopup')
|
||||
}
|
||||
// {
|
||||
// id: 'theming.tokens',
|
||||
// label: 'Design Tokens',
|
||||
// description: 'List of design tokens used in a preset.',
|
||||
// component: DocApiTable,
|
||||
// data: getTokenOptions('ConfirmPopup')
|
||||
// }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,57 +0,0 @@
|
|||
<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-contextmenu</td>
|
||||
<td>Container element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-contextmenu-root-list</td>
|
||||
<td>Root list element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-submenu-list</td>
|
||||
<td>Submenu list element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-menuitem</td>
|
||||
<td>Menuitem element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-menuitem-active</td>
|
||||
<td>Active menuitem element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-menuitem-content</td>
|
||||
<td>Content of menuitem.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-menuitem-link</td>
|
||||
<td>Link element of the menuitem.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-menuitem-text</td>
|
||||
<td>Label of a menuitem.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-menuitem-icon</td>
|
||||
<td>Icon of a menuitem.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-submenu-icon</td>
|
||||
<td>Arrow icon of a submenu.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getStyleOptions } from '@/components/doc/helpers';
|
||||
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -27,14 +27,14 @@ export default {
|
|||
description: 'List of class names used in the styled mode.',
|
||||
component: DocApiTable,
|
||||
data: getStyleOptions('ContextMenu')
|
||||
},
|
||||
{
|
||||
id: 'theming.tokens',
|
||||
label: 'Design Tokens',
|
||||
description: 'List of design tokens used in a preset.',
|
||||
component: DocApiTable,
|
||||
data: getTokenOptions('ContextMenu')
|
||||
}
|
||||
// {
|
||||
// id: 'theming.tokens',
|
||||
// label: 'Design Tokens',
|
||||
// description: 'List of design tokens used in a preset.',
|
||||
// component: DocApiTable,
|
||||
// data: getTokenOptions('ContextMenu')
|
||||
// }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,97 +0,0 @@
|
|||
<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-datatable</td>
|
||||
<td>Container element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-datatable-scrollable</td>
|
||||
<td>Container element when table is scrollable.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-datatable-header</td>
|
||||
<td>Header section.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-datatable-footer</td>
|
||||
<td>Footer section.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-datatable-wrapper</td>
|
||||
<td>Wrapper of table element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-datatable-table</td>
|
||||
<td>Table element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-datatable-thead</td>
|
||||
<td>Table thead element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-datatable-tbody</td>
|
||||
<td>Table tbody element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-datatable-tfoot</td>
|
||||
<td>Table tfoot element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-column-title</td>
|
||||
<td>Title of a column.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-sortable-column</td>
|
||||
<td>Sortable column header.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-frozen-column</td>
|
||||
<td>Frozen column header.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-rowgroup-header</td>
|
||||
<td>Header of a rowgroup.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-rowgroup-footer</td>
|
||||
<td>Footer of a rowgroup.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-datatable-row-expansion</td>
|
||||
<td>Expanded row content.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-row-toggler</td>
|
||||
<td>Toggle element for row expansion.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-datatable-emptymessage</td>
|
||||
<td>Cell containing the empty message.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-row-editor-init</td>
|
||||
<td>Pencil button of row editor.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-row-editor-init</td>
|
||||
<td>Save button of row editor.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-row-editor-init</td>
|
||||
<td>Cancel button of row editor.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getStyleOptions } from '@/components/doc/helpers';
|
||||
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -27,14 +27,14 @@ export default {
|
|||
description: 'List of class names used in the styled mode.',
|
||||
component: DocApiTable,
|
||||
data: getStyleOptions('DataTable')
|
||||
},
|
||||
{
|
||||
id: 'theming.tokens',
|
||||
label: 'Design Tokens',
|
||||
description: 'List of design tokens used in a preset.',
|
||||
component: DocApiTable,
|
||||
data: getTokenOptions('DataTable')
|
||||
}
|
||||
// {
|
||||
// id: 'theming.tokens',
|
||||
// label: 'Design Tokens',
|
||||
// description: 'List of design tokens used in a preset.',
|
||||
// component: DocApiTable,
|
||||
// data: getTokenOptions('DataTable')
|
||||
// }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,46 +0,0 @@
|
|||
<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-dataview</td>
|
||||
<td>Container element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-dataview-list</td>
|
||||
<td>Container element in list layout.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-dataview-grid</td>
|
||||
<td>Container element in grid layout.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-dataview-header</td>
|
||||
<td>Header section.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-dataview-footer</td>
|
||||
<td>Footer section.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-dataview-content</td>
|
||||
<td>Container of items.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-dataview-emptymessage</td>
|
||||
<td>Empty message element.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getStyleOptions } from '@/components/doc/helpers';
|
||||
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -27,14 +27,14 @@ export default {
|
|||
description: 'List of class names used in the styled mode.',
|
||||
component: DocApiTable,
|
||||
data: getStyleOptions('DataView')
|
||||
},
|
||||
{
|
||||
id: 'theming.tokens',
|
||||
label: 'Design Tokens',
|
||||
description: 'List of design tokens used in a preset.',
|
||||
component: DocApiTable,
|
||||
data: getTokenOptions('DataView')
|
||||
}
|
||||
// {
|
||||
// id: 'theming.tokens',
|
||||
// label: 'Design Tokens',
|
||||
// description: 'List of design tokens used in a preset.',
|
||||
// component: DocApiTable,
|
||||
// data: getTokenOptions('DataView')
|
||||
// }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,65 +0,0 @@
|
|||
<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-datepicker</td>
|
||||
<td>Main container element</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-datepicker-w-btn</td>
|
||||
<td>Main container element when button is enabled.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-datepicker-timeonly</td>
|
||||
<td>Main container element in time picker only mode.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-inputtext</td>
|
||||
<td>Input element</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-datepicker</td>
|
||||
<td>Datepicker element</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-datepicker-inline</td>
|
||||
<td>Datepicker element in inline mode</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-monthpicker</td>
|
||||
<td>Datepicker element in month view.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-monthpicker-month</td>
|
||||
<td>Month cell in month view mode.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-datepicker-touch-ui</td>
|
||||
<td>Datepicker element in touch ui mode.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-datepicker-calendar</td>
|
||||
<td>Table containing dates of a month.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-datepicker-current-day</td>
|
||||
<td>Cell of selected date.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-datepicker-today</td>
|
||||
<td>Cell of today's date.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getStyleOptions } from '@/components/doc/helpers';
|
||||
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -27,14 +27,14 @@ export default {
|
|||
description: 'List of class names used in the styled mode.',
|
||||
component: DocApiTable,
|
||||
data: getStyleOptions('DatePicker')
|
||||
},
|
||||
{
|
||||
id: 'theming.tokens',
|
||||
label: 'Design Tokens',
|
||||
description: 'List of design tokens used in a preset.',
|
||||
component: DocApiTable,
|
||||
data: getTokenOptions('DatePicker')
|
||||
}
|
||||
// {
|
||||
// id: 'theming.tokens',
|
||||
// label: 'Design Tokens',
|
||||
// description: 'List of design tokens used in a preset.',
|
||||
// component: DocApiTable,
|
||||
// data: getTokenOptions('DatePicker')
|
||||
// }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,42 +0,0 @@
|
|||
<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-dialog</td>
|
||||
<td>Container element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-dialog-titlebar</td>
|
||||
<td>Container of header.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-dialog-title</td>
|
||||
<td>Header element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-dialog-titlebar-icon</td>
|
||||
<td>Icon container inside header.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-dialog-titlebar-close</td>
|
||||
<td>Close icon element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-dialog-content</td>
|
||||
<td>Content element</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getStyleOptions } from '@/components/doc/helpers';
|
||||
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -27,14 +27,14 @@ export default {
|
|||
description: 'List of class names used in the styled mode.',
|
||||
component: DocApiTable,
|
||||
data: getStyleOptions('Dialog')
|
||||
},
|
||||
{
|
||||
id: 'theming.tokens',
|
||||
label: 'Design Tokens',
|
||||
description: 'List of design tokens used in a preset.',
|
||||
component: DocApiTable,
|
||||
data: getTokenOptions('Dialog')
|
||||
}
|
||||
// {
|
||||
// id: 'theming.tokens',
|
||||
// label: 'Design Tokens',
|
||||
// description: 'List of design tokens used in a preset.',
|
||||
// component: DocApiTable,
|
||||
// data: getTokenOptions('Dialog')
|
||||
// }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,61 +0,0 @@
|
|||
<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-divider</td>
|
||||
<td>Container element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-divider-horizontal</td>
|
||||
<td>Container element in horizontal layout.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-divider-vertical</td>
|
||||
<td>Container element in vertical layout.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-divider-solid</td>
|
||||
<td>Container element with solid border.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-divider-dashed</td>
|
||||
<td>Container element with dashed border.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-divider-dotted</td>
|
||||
<td>Container element with dotted border.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-divider-left</td>
|
||||
<td>Container element with content aligned to left.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-divider-right</td>
|
||||
<td>Container element with content aligned to right.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-divider-center</td>
|
||||
<td>Container element with content aligned to center.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-divider-bottom</td>
|
||||
<td>Container element with content aligned to bottom.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-divider-top</td>
|
||||
<td>Container element with content aligned to top.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getStyleOptions } from '@/components/doc/helpers';
|
||||
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -27,14 +27,14 @@ export default {
|
|||
description: 'List of class names used in the styled mode.',
|
||||
component: DocApiTable,
|
||||
data: getStyleOptions('Divider')
|
||||
},
|
||||
{
|
||||
id: 'theming.tokens',
|
||||
label: 'Design Tokens',
|
||||
description: 'List of design tokens used in a preset.',
|
||||
component: DocApiTable,
|
||||
data: getTokenOptions('Divider')
|
||||
}
|
||||
// {
|
||||
// id: 'theming.tokens',
|
||||
// label: 'Design Tokens',
|
||||
// description: 'List of design tokens used in a preset.',
|
||||
// component: DocApiTable,
|
||||
// data: getTokenOptions('Divider')
|
||||
// }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,46 +0,0 @@
|
|||
<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-dock</td>
|
||||
<td>Container element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-dock-list-container</td>
|
||||
<td>Container of the list.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-dock-list</td>
|
||||
<td>List of items.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-dock-item</td>
|
||||
<td>Each items in list.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-menuitem-content</td>
|
||||
<td>Content of menuitem.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-dock-link</td>
|
||||
<td>Link of the menuitem.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-dock-icon</td>
|
||||
<td>Icon of a menuitem.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getStyleOptions } from '@/components/doc/helpers';
|
||||
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -27,14 +27,14 @@ export default {
|
|||
description: 'List of class names used in the styled mode.',
|
||||
component: DocApiTable,
|
||||
data: getStyleOptions('Dock')
|
||||
},
|
||||
{
|
||||
id: 'theming.tokens',
|
||||
label: 'Design Tokens',
|
||||
description: 'List of design tokens used in a preset.',
|
||||
component: DocApiTable,
|
||||
data: getTokenOptions('Dock')
|
||||
}
|
||||
// {
|
||||
// id: 'theming.tokens',
|
||||
// label: 'Design Tokens',
|
||||
// description: 'List of design tokens used in a preset.',
|
||||
// component: DocApiTable,
|
||||
// data: getTokenOptions('Dock')
|
||||
// }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,66 +0,0 @@
|
|||
<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-drawer</td>
|
||||
<td>Container element</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-drawer-left</td>
|
||||
<td>Container element of left drawer.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-drawer-right</td>
|
||||
<td>Container element of right drawer.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-drawer-top</td>
|
||||
<td>Container element of top drawer.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-drawer-bottom</td>
|
||||
<td>Container element of bottom drawer.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-drawer-full</td>
|
||||
<td>Container element of a full screen drawer.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-drawer-visible</td>
|
||||
<td>Container element when drawer is visible.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-drawer-close</td>
|
||||
<td>Close anchor element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-drawer-sm</td>
|
||||
<td>Small sized drawer.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-drawer-md</td>
|
||||
<td>Medium sized drawer.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-drawer-lg</td>
|
||||
<td>Large sized drawer.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-drawer-mask</td>
|
||||
<td>Modal layer of the drawer.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getStyleOptions } from '@/components/doc/helpers';
|
||||
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -27,14 +27,14 @@ export default {
|
|||
description: 'List of class names used in the styled mode.',
|
||||
component: DocApiTable,
|
||||
data: getStyleOptions('Drawer')
|
||||
},
|
||||
{
|
||||
id: 'theming.tokens',
|
||||
label: 'Design Tokens',
|
||||
description: 'List of design tokens used in a preset.',
|
||||
component: DocApiTable,
|
||||
data: getTokenOptions('Drawer')
|
||||
}
|
||||
// {
|
||||
// id: 'theming.tokens',
|
||||
// label: 'Design Tokens',
|
||||
// description: 'List of design tokens used in a preset.',
|
||||
// component: DocApiTable,
|
||||
// data: getTokenOptions('Drawer')
|
||||
// }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,30 +0,0 @@
|
|||
<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-editor-container</td>
|
||||
<td>Container element</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-editor-toolbar</td>
|
||||
<td>Toolbar of the editor</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-editor-content</td>
|
||||
<td>Editable area</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getStyleOptions } from '@/components/doc/helpers';
|
||||
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -27,14 +27,14 @@ export default {
|
|||
description: 'List of class names used in the styled mode.',
|
||||
component: DocApiTable,
|
||||
data: getStyleOptions('Editor')
|
||||
},
|
||||
{
|
||||
id: 'theming.tokens',
|
||||
label: 'Design Tokens',
|
||||
description: 'List of design tokens used in a preset.',
|
||||
component: DocApiTable,
|
||||
data: getTokenOptions('Editor')
|
||||
}
|
||||
// {
|
||||
// id: 'theming.tokens',
|
||||
// label: 'Design Tokens',
|
||||
// description: 'List of design tokens used in a preset.',
|
||||
// component: DocApiTable,
|
||||
// data: getTokenOptions('Editor')
|
||||
// }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,33 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>List of class names used in the styled mode.</p>
|
||||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Element</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>p-fieldset</td>
|
||||
<td>Fieldset element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-fieldset-toggleable</td>
|
||||
<td>Toggleable fieldset element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-fieldset-legend</td>
|
||||
<td>Legend element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-fieldset-content</td>
|
||||
<td>Content element.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getStyleOptions } from '@/components/doc/helpers';
|
||||
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -27,14 +27,14 @@ export default {
|
|||
description: 'List of class names used in the styled mode.',
|
||||
component: DocApiTable,
|
||||
data: getStyleOptions('Fieldset')
|
||||
},
|
||||
{
|
||||
id: 'theming.tokens',
|
||||
label: 'Design Tokens',
|
||||
description: 'List of design tokens used in a preset.',
|
||||
component: DocApiTable,
|
||||
data: getTokenOptions('Fieldset')
|
||||
}
|
||||
// {
|
||||
// id: 'theming.tokens',
|
||||
// label: 'Design Tokens',
|
||||
// description: 'List of design tokens used in a preset.',
|
||||
// component: DocApiTable,
|
||||
// data: getTokenOptions('Fieldset')
|
||||
// }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,73 +0,0 @@
|
|||
<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-fileupload</td>
|
||||
<td>Container element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-fileupload-basic</td>
|
||||
<td>Container element in basic mode.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-fileupload-advanced</td>
|
||||
<td>Container element in advanced mode.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-fileupload-buttonbar</td>
|
||||
<td>Header containing the buttons.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-fileupload-content</td>
|
||||
<td>Content section.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-fileupload-file</td>
|
||||
<td>File item.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-fileupload-file-thumbnail</td>
|
||||
<td>Image preview of a file.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-fileupload-file-details</td>
|
||||
<td>Container of file details.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-fileupload-file-name</td>
|
||||
<td>File name element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-fileupload-file-size</td>
|
||||
<td>File size element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-fileupload-file-badge</td>
|
||||
<td>File badge element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-fileupload-file-actions</td>
|
||||
<td>Container of file actions.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-fileupload-file-remove</td>
|
||||
<td>Button to remove a file.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-fileupload-empty</td>
|
||||
<td>Container of the empty slot.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getStyleOptions } from '@/components/doc/helpers';
|
||||
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -27,14 +27,14 @@ export default {
|
|||
description: 'List of class names used in the styled mode.',
|
||||
component: DocApiTable,
|
||||
data: getStyleOptions('FileUpload')
|
||||
},
|
||||
{
|
||||
id: 'theming.tokens',
|
||||
label: 'Design Tokens',
|
||||
description: 'List of design tokens used in a preset.',
|
||||
component: DocApiTable,
|
||||
data: getTokenOptions('FileUpload')
|
||||
}
|
||||
// {
|
||||
// id: 'theming.tokens',
|
||||
// label: 'Design Tokens',
|
||||
// description: 'List of design tokens used in a preset.',
|
||||
// component: DocApiTable,
|
||||
// data: getTokenOptions('FileUpload')
|
||||
// }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,44 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Configuration is managed by the Locale API imported from <i>primevue/config</i>.</p>
|
||||
|
||||
<h3>FilterService API</h3>
|
||||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Parameters</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>filter</td>
|
||||
<td>
|
||||
value[]: An array of values to filter<br />
|
||||
fields[]: An array of properties in the value object<br />
|
||||
filterValue: Filter value<br />
|
||||
filterMatchMode: Constraint<br />
|
||||
filterLocale: Locale to use in filtering
|
||||
</td>
|
||||
<td>Whether the property values of the given value collection matches the filter.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>filters</td>
|
||||
<td>-</td>
|
||||
<td>Property to access constraints collection.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>register</td>
|
||||
<td>
|
||||
name: string <br />
|
||||
fn: Filter callback
|
||||
</td>
|
||||
<td>Registers a new constraint in filters.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
|
@ -1,143 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Parameters</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>startsWith</td>
|
||||
<td>
|
||||
value: Value to filter<br />
|
||||
filter: Filter value<br />
|
||||
filterLocale: Locale to use in filtering
|
||||
</td>
|
||||
<td>Whether the value starts with the filter value</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>contains</td>
|
||||
<td>
|
||||
value: Value to filter<br />
|
||||
filter: Filter value<br />
|
||||
filterLocale: Locale to use in filtering
|
||||
</td>
|
||||
<td>Whether the value contains the filter value</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>endsWith</td>
|
||||
<td>
|
||||
value: Value to filter<br />
|
||||
filter: Filter value<br />
|
||||
filterLocale: Locale to use in filtering
|
||||
</td>
|
||||
<td>Whether the value ends with the filter value</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>equals</td>
|
||||
<td>
|
||||
value: Value to filter<br />
|
||||
filter: Filter value<br />
|
||||
filterLocale: Locale to use in filtering
|
||||
</td>
|
||||
<td>Whether the value equals the filter value</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>notEquals</td>
|
||||
<td>
|
||||
value: Value to filter<br />
|
||||
filter: Filter value<br />
|
||||
filterLocale: Locale to use in filtering
|
||||
</td>
|
||||
<td>Whether the value does not equal the filter value</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>in</td>
|
||||
<td>
|
||||
value: Value to filter<br />
|
||||
filter[]: An array of filter values<br />
|
||||
filterLocale: Locale to use in filtering
|
||||
</td>
|
||||
<td>Whether the value contains the filter value</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>lt</td>
|
||||
<td>
|
||||
value: Value to filter<br />
|
||||
filter: Filter value<br />
|
||||
filterLocale: Locale to use in filtering
|
||||
</td>
|
||||
<td>Whether the value is less than the filter value</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>lte</td>
|
||||
<td>
|
||||
value: Value to filter<br />
|
||||
filter: Filter value<br />
|
||||
filterLocale: Locale to use in filtering
|
||||
</td>
|
||||
<td>Whether the value is less than or equals to the filter value</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>gt</td>
|
||||
<td>
|
||||
value: Value to filter<br />
|
||||
filter: Filter value<br />
|
||||
filterLocale: Locale to use in filtering
|
||||
</td>
|
||||
<td>Whether the value is greater than the filter value</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>gte</td>
|
||||
<td>
|
||||
value: Value to filter<br />
|
||||
filter: Filter value<br />
|
||||
filterLocale: Locale to use in filtering
|
||||
</td>
|
||||
<td>Whether the value is greater than or equals to the filter value</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>is</td>
|
||||
<td>
|
||||
value: Value to filter<br />
|
||||
filter: Filter value<br />
|
||||
filterLocale: Locale to use in filtering
|
||||
</td>
|
||||
<td>Whether the value equals the filter value, alias to equals</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>isNot</td>
|
||||
<td>
|
||||
value: Value to filter<br />
|
||||
filter: Filter value<br />
|
||||
filterLocale: Locale to use in filtering
|
||||
</td>
|
||||
<td>Whether the value does not equal the filter value, alias to notEquals.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>before</td>
|
||||
<td>
|
||||
value: Value to filter<br />
|
||||
filter: Filter value<br />
|
||||
filterLocale: Locale to use in filtering
|
||||
</td>
|
||||
<td>Whether the date value is before the filter date.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>after</td>
|
||||
<td>
|
||||
value: Value to filter<br />
|
||||
filter: Filter value<br />
|
||||
filterLocale: Locale to use in filtering
|
||||
</td>
|
||||
<td>Whether the date value is after the filter date.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>FilterService can be extended by adding new constraints using the register function.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `
|
||||
FilterService.register('isPrimeNumber', (value, filter): boolean => {
|
||||
if (filter === undefined || filter === null || filter.trim() === '') {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (value === undefined || value === null) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return value.toString() === filter.toString();
|
||||
});
|
||||
|
||||
FilterService.filters['isPrimeNumber'](3); //true
|
||||
FilterService.filters['isPrimeNumber'](5); //true
|
||||
FilterService.filters['isPrimeNumber'](568985673); //false
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `
|
||||
import { FilterService } from 'primevue/api';
|
||||
`
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,231 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>A custom equals filter that checks for exact case sensitive value is registered and defined as a match mode of a column filter.</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<DataTable v-model:filters="filters" :value="customers" paginator :rows="10" dataKey="id" filterDisplay="row" :loading="loading">
|
||||
<template #empty> No customers found. </template>
|
||||
<template #loading> Loading customers data. Please wait. </template>
|
||||
<Column field="name" header="Name" :filterMatchModeOptions="matchModeOptions">
|
||||
<template #body="{ data }">
|
||||
{{ data.name }}
|
||||
</template>
|
||||
<template #filter="{ filterModel, filterCallback }">
|
||||
<InputText v-model="filterModel.value" type="text" @input="filterCallback()" class="p-column-filter" :placeholder="`Search by name - ${filterModel.matchMode}`" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column header="Country" filterField="country.name" :filterMatchModeOptions="matchModeOptions">
|
||||
<template #body="{ data }">
|
||||
<img :alt="data.country.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${data.country.code} mr-2`" width="18" />
|
||||
<span>{{ data.country.name }}</span>
|
||||
</template>
|
||||
<template #filter="{ filterModel, filterCallback }">
|
||||
<InputText v-model="filterModel.value" type="text" @input="filterCallback()" class="p-column-filter" :placeholder="`Search by country - ${filterModel.matchMode}`" />
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
<DocSectionCode :code="code" :service="['CustomerService']" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CustomerService } from '@/service/CustomerService';
|
||||
import { FilterMatchMode, FilterService } from 'primevue/api';
|
||||
|
||||
const YOUR_FILTER = 'YOUR FILTER';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
customers: null,
|
||||
filters: {
|
||||
name: { value: null, matchMode: YOUR_FILTER },
|
||||
'country.name': { value: null, matchMode: FilterMatchMode.STARTS_WITH }
|
||||
},
|
||||
matchModeOptions: [
|
||||
{ label: 'Your Equals', value: YOUR_FILTER },
|
||||
{ label: 'Starts With', value: FilterMatchMode.STARTS_WITH }
|
||||
],
|
||||
loading: true,
|
||||
code: {
|
||||
basic: `
|
||||
<DataTable v-model:filters="filters" :value="customers" paginator :rows="10" dataKey="id" filterDisplay="row" :loading="loading">
|
||||
<template #empty> No customers found. </template>
|
||||
<template #loading> Loading customers data. Please wait. </template>
|
||||
<Column field="name" header="Name" :filterMatchModeOptions="matchModeOptions">
|
||||
<template #body="{ data }">
|
||||
{{ data.name }}
|
||||
</template>
|
||||
<template #filter="{ filterModel, filterCallback }">
|
||||
<InputText v-model="filterModel.value" type="text" @input="filterCallback()" class="p-column-filter" :placeholder="\`Search by name - \${filterModel.matchMode}\`" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column header="Country" filterField="country.name" :filterMatchModeOptions="matchModeOptions">
|
||||
<template #body="{ data }">
|
||||
<img :alt="data.country.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code} mr-2\`" width="18" />
|
||||
<span>{{ data.country.name }}</span>
|
||||
</template>
|
||||
<template #filter="{ filterModel, filterCallback }">
|
||||
<InputText v-model="filterModel.value" type="text" @input="filterCallback()" class="p-column-filter" :placeholder="\`Search by country - \${filterModel.matchMode}\`" />
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<DataTable v-model:filters="filters" :value="customers" paginator :rows="10" dataKey="id" filterDisplay="row" :loading="loading">
|
||||
<template #empty> No customers found. </template>
|
||||
<template #loading> Loading customers data. Please wait. </template>
|
||||
<Column field="name" header="Name" :filterMatchModeOptions="matchModeOptions">
|
||||
<template #body="{ data }">
|
||||
{{ data.name }}
|
||||
</template>
|
||||
<template #filter="{ filterModel, filterCallback }">
|
||||
<InputText v-model="filterModel.value" type="text" @input="filterCallback()" class="p-column-filter" :placeholder="\`Search by name - \${filterModel.matchMode}\`" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column header="Country" filterField="country.name" :filterMatchModeOptions="matchModeOptions">
|
||||
<template #body="{ data }">
|
||||
<img :alt="data.country.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code} mr-2\`" width="18" />
|
||||
<span>{{ data.country.name }}</span>
|
||||
</template>
|
||||
<template #filter="{ filterModel, filterCallback }">
|
||||
<InputText v-model="filterModel.value" type="text" @input="filterCallback()" class="p-column-filter" :placeholder="\`Search by country - \${filterModel.matchMode}\`" />
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CustomerService } from '@/service/CustomerService';
|
||||
import { FilterMatchMode, FilterService } from 'primevue/api';
|
||||
|
||||
const YOUR_FILTER = 'YOUR FILTER';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
customers: null,
|
||||
filters: {
|
||||
name: { value: null, matchMode: YOUR_FILTER },
|
||||
'country.name': { value: null, matchMode: FilterMatchMode.STARTS_WITH }
|
||||
},
|
||||
matchModeOptions: [
|
||||
{ label: 'Your Equals', value: YOUR_FILTER },
|
||||
{ label: 'Starts With', value: FilterMatchMode.STARTS_WITH }
|
||||
],
|
||||
loading: true
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
CustomerService.getCustomersLarge().then((data) => {
|
||||
this.customers = data;
|
||||
this.loading = false;
|
||||
});
|
||||
|
||||
FilterService.register(YOUR_FILTER, (value, filter) => {
|
||||
if (filter === undefined || filter === null || filter.trim() === '') {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (value === undefined || value === null) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return value.toString() === filter.toString();
|
||||
});
|
||||
}
|
||||
};
|
||||
<\/script>
|
||||
`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<DataTable v-model:filters="filters" :value="customers" paginator :rows="10" dataKey="id" filterDisplay="row" :loading="loading">
|
||||
<template #empty> No customers found. </template>
|
||||
<template #loading> Loading customers data. Please wait. </template>
|
||||
<Column field="name" header="Name" :filterMatchModeOptions="matchModeOptions">
|
||||
<template #body="{ data }">
|
||||
{{ data.name }}
|
||||
</template>
|
||||
<template #filter="{ filterModel, filterCallback }">
|
||||
<InputText v-model="filterModel.value" type="text" @input="filterCallback()" class="p-column-filter" :placeholder="\`Search by name - \${filterModel.matchMode}\`" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column header="Country" filterField="country.name" :filterMatchModeOptions="matchModeOptions">
|
||||
<template #body="{ data }">
|
||||
<img :alt="data.country.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code} mr-2\`" width="18" />
|
||||
<span>{{ data.country.name }}</span>
|
||||
</template>
|
||||
<template #filter="{ filterModel, filterCallback }">
|
||||
<InputText v-model="filterModel.value" type="text" @input="filterCallback()" class="p-column-filter" :placeholder="\`Search by country - \${filterModel.matchMode}\`" />
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { CustomerService } from '@/service/CustomerService';
|
||||
import { FilterMatchMode, FilterService } from 'primevue/api';
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
CustomerService.getCustomersLarge().then((data) => {
|
||||
customers.value = data;
|
||||
loading.value = false;
|
||||
});
|
||||
|
||||
FilterService.register(YOUR_FILTER.value, (value, filter) => {
|
||||
if (filter === undefined || filter === null || filter.trim() === '') {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (value === undefined || value === null) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return value.toString() === filter.toString();
|
||||
});
|
||||
});
|
||||
|
||||
const YOUR_FILTER = ref('YOUR FILTER');
|
||||
const customers = ref();
|
||||
const filters = ref({
|
||||
'name': {value: null, matchMode: YOUR_FILTER.value},
|
||||
'country.name': {value: null, matchMode: FilterMatchMode.STARTS_WITH}
|
||||
});
|
||||
const matchModeOptions = ref([
|
||||
{label: 'Your Equals', value: YOUR_FILTER.value},
|
||||
{label: 'Starts With', value: FilterMatchMode.STARTS_WITH}
|
||||
]);
|
||||
const loading = ref(true);
|
||||
|
||||
<\/script>
|
||||
`
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
CustomerService.getCustomersLarge().then((data) => {
|
||||
this.customers = data;
|
||||
this.loading = false;
|
||||
});
|
||||
|
||||
FilterService.register(YOUR_FILTER, (value, filter) => {
|
||||
if (filter === undefined || filter === null || filter.trim() === '') {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (value === undefined || value === null) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return value.toString() === filter.toString();
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Filters are accessed with <i>FilterService.filters</i>.</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: {
|
||||
basic: `
|
||||
const value = 'PrimeVue';
|
||||
|
||||
FilterService.filters.equals(value, 'Vue'); //false
|
||||
FilterService.filters.equals(value, 8); //false
|
||||
FilterService.filters.equals(value, new Date()); //false
|
||||
FilterService.filters.contains(value, 'Vue'); //true
|
||||
FilterService.filters.startsWith(value, 'Vue'); //false
|
||||
FilterService.filters.endsWith(value, 'Vue'); //true
|
||||
FilterService.filters.lt(10, 20); //true
|
||||
FilterService.filters.gt(50, 20); //true
|
||||
FilterService.filters.in(value, ['PrimeFaces', 'PrimeVue']); //true `
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>List of class names used in the styled mode.</p>
|
||||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Element</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>p-float-label</td>
|
||||
<td>Float label element.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getStyleOptions } from '@/components/doc/helpers';
|
||||
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -27,14 +27,14 @@ export default {
|
|||
description: 'List of class names used in the styled mode.',
|
||||
component: DocApiTable,
|
||||
data: getStyleOptions('FloatLabel')
|
||||
},
|
||||
{
|
||||
id: 'theming.tokens',
|
||||
label: 'Design Tokens',
|
||||
description: 'List of design tokens used in a preset.',
|
||||
component: DocApiTable,
|
||||
data: getTokenOptions('FloatLabel')
|
||||
}
|
||||
// {
|
||||
// id: 'theming.tokens',
|
||||
// label: 'Design Tokens',
|
||||
// description: 'List of design tokens used in a preset.',
|
||||
// component: DocApiTable,
|
||||
// data: getTokenOptions('FloatLabel')
|
||||
// }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,54 +0,0 @@
|
|||
<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-galleria</td>
|
||||
<td>Container element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-galleria-header</td>
|
||||
<td>Header section.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-galleria-footer</td>
|
||||
<td>Footer section.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-galleria-item-wrapper</td>
|
||||
<td>Item wrapper element. It contains item container and indicators.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-galleria-item-container</td>
|
||||
<td>Container of the item wrapper. It contains navigation buttons, items and caption content.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-galleria-indicators</td>
|
||||
<td>Container of the indicators. It contains indicator items.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-galleria-thumbnail-content</td>
|
||||
<td>Thumbnail content element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-galleria-thumbnail-container</td>
|
||||
<td>Container of the thumbnail content. It contains navigation buttons and thumbnail items.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-galleria-caption</td>
|
||||
<td>Content of the item caption.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getStyleOptions } from '@/components/doc/helpers';
|
||||
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -27,14 +27,14 @@ export default {
|
|||
description: 'List of class names used in the styled mode.',
|
||||
component: DocApiTable,
|
||||
data: getStyleOptions('Galleria')
|
||||
},
|
||||
{
|
||||
id: 'theming.tokens',
|
||||
label: 'Design Tokens',
|
||||
description: 'List of design tokens used in a preset.',
|
||||
component: DocApiTable,
|
||||
data: getTokenOptions('Galleria')
|
||||
}
|
||||
// {
|
||||
// id: 'theming.tokens',
|
||||
// label: 'Design Tokens',
|
||||
// description: 'List of design tokens used in a preset.',
|
||||
// component: DocApiTable,
|
||||
// data: getTokenOptions('Galleria')
|
||||
// }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,33 +0,0 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>List of class names used in the styled mode.</p>
|
||||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Element</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>p-icon-field</td>
|
||||
<td>Container of element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-icon-field-right</td>
|
||||
<td>Right input icon element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-icon-field-left</td>
|
||||
<td>Left input icon element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-input-icon</td>
|
||||
<td>Container of input icon.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</DocSectionText>
|
||||
</template>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getStyleOptions } from '@/components/doc/helpers';
|
||||
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -34,14 +34,14 @@ export default {
|
|||
description: 'List of class names used in the styled mode.',
|
||||
component: DocApiTable,
|
||||
data: getStyleOptions('InputIcon')
|
||||
},
|
||||
{
|
||||
id: 'theming.tokens',
|
||||
label: 'Design Tokens',
|
||||
description: 'List of design tokens used in a preset.',
|
||||
component: DocApiTable,
|
||||
data: getTokenOptions('IconField')
|
||||
}
|
||||
// {
|
||||
// id: 'theming.tokens',
|
||||
// label: 'Design Tokens',
|
||||
// description: 'List of design tokens used in a preset.',
|
||||
// component: DocApiTable,
|
||||
// data: getTokenOptions('IconField')
|
||||
// }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,50 +0,0 @@
|
|||
<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-image</td>
|
||||
<td>Container element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-image-preview-container</td>
|
||||
<td>Container element with preview enabled.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-image-preview-indicator</td>
|
||||
<td>Mask layer over the image when hovered.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-image-preview-icon</td>
|
||||
<td>Icon of the preview indicator.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-image-mask</td>
|
||||
<td>Preview overlay container.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-image-toolbar</td>
|
||||
<td>Transformation options container.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-image-action</td>
|
||||
<td>An element inside the toolbar.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-image-preview</td>
|
||||
<td>Image element inside the preview overlay.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getStyleOptions } from '@/components/doc/helpers';
|
||||
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -27,14 +27,14 @@ export default {
|
|||
description: 'List of class names used in the styled mode.',
|
||||
component: DocApiTable,
|
||||
data: getStyleOptions('Image')
|
||||
},
|
||||
{
|
||||
id: 'theming.tokens',
|
||||
label: 'Design Tokens',
|
||||
description: 'List of design tokens used in a preset.',
|
||||
component: DocApiTable,
|
||||
data: getTokenOptions('Image')
|
||||
}
|
||||
// {
|
||||
// id: 'theming.tokens',
|
||||
// label: 'Design Tokens',
|
||||
// description: 'List of design tokens used in a preset.',
|
||||
// component: DocApiTable,
|
||||
// data: getTokenOptions('Image')
|
||||
// }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,49 +0,0 @@
|
|||
<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-inline-message</td>
|
||||
<td>Container element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-inline-message-info</td>
|
||||
<td>Container element when displaying info messages.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-inline-message-warn</td>
|
||||
<td>Container element when displaying warn messages.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-inline-message-error</td>
|
||||
<td>Container element when displaying error messages.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-inline-message-success</td>
|
||||
<td>Container element when displaying success messages.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-inline-message-close</td>
|
||||
<td>Close icon.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-inline-message-icon</td>
|
||||
<td>Severity icon.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-inline-message-text</td>
|
||||
<td>Content of a message.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getStyleOptions } from '@/components/doc/helpers';
|
||||
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -27,14 +27,14 @@ export default {
|
|||
description: 'List of class names used in the styled mode.',
|
||||
component: DocApiTable,
|
||||
data: getStyleOptions('InlineMessage')
|
||||
},
|
||||
{
|
||||
id: 'theming.tokens',
|
||||
label: 'Design Tokens',
|
||||
description: 'List of design tokens used in a preset.',
|
||||
component: DocApiTable,
|
||||
data: getTokenOptions('InlineMessage')
|
||||
}
|
||||
// {
|
||||
// id: 'theming.tokens',
|
||||
// label: 'Design Tokens',
|
||||
// description: 'List of design tokens used in a preset.',
|
||||
// component: DocApiTable,
|
||||
// data: getTokenOptions('InlineMessage')
|
||||
// }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,29 +0,0 @@
|
|||
<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-inplace</td>
|
||||
<td>Container element</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-inplace-display</td>
|
||||
<td>Display container</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-inplace-content</td>
|
||||
<td>Content container</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getStyleOptions } from '@/components/doc/helpers';
|
||||
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -27,14 +27,14 @@ export default {
|
|||
description: 'List of class names used in the styled mode.',
|
||||
component: DocApiTable,
|
||||
data: getStyleOptions('Inplace')
|
||||
},
|
||||
{
|
||||
id: 'theming.tokens',
|
||||
label: 'Design Tokens',
|
||||
description: 'List of design tokens used in a preset.',
|
||||
component: DocApiTable,
|
||||
data: getTokenOptions('Inplace')
|
||||
}
|
||||
// {
|
||||
// id: 'theming.tokens',
|
||||
// label: 'Design Tokens',
|
||||
// description: 'List of design tokens used in a preset.',
|
||||
// component: DocApiTable,
|
||||
// data: getTokenOptions('Inplace')
|
||||
// }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,21 +0,0 @@
|
|||
<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-inputgroup-addon</td>
|
||||
<td>Input group addon element</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
<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-inputgroup</td>
|
||||
<td>Input group element</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getStyleOptions } from '@/components/doc/helpers';
|
||||
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -34,14 +34,14 @@ export default {
|
|||
description: 'List of class names used in the styled mode.',
|
||||
component: DocApiTable,
|
||||
data: getStyleOptions('InputGroupAddon')
|
||||
},
|
||||
{
|
||||
id: 'theming.tokens',
|
||||
label: 'Design Tokens',
|
||||
description: 'List of design tokens used in a preset.',
|
||||
component: DocApiTable,
|
||||
data: getTokenOptions('InputGroup')
|
||||
}
|
||||
// {
|
||||
// id: 'theming.tokens',
|
||||
// label: 'Design Tokens',
|
||||
// description: 'List of design tokens used in a preset.',
|
||||
// component: DocApiTable,
|
||||
// data: getTokenOptions('InputGroup')
|
||||
// }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,21 +0,0 @@
|
|||
<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-inputmask p-inputtext</td>
|
||||
<td>Input element</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getStyleOptions } from '@/components/doc/helpers';
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -1,53 +0,0 @@
|
|||
<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-inputnumber</td>
|
||||
<td>Container element</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-inputnumber-stacked</td>
|
||||
<td>Container element with stacked buttons.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-inputnumber-horizontal</td>
|
||||
<td>Container element with horizontal buttons.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-inputnumber-vertical</td>
|
||||
<td>Container element with vertical buttons.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-inputnumber-input</td>
|
||||
<td>Input element</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-inputnumber-button</td>
|
||||
<td>Input element</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-inputnumber-button-up</td>
|
||||
<td>Increment button</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-inputnumber-button-down</td>
|
||||
<td>Decrement button</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-inputnumber-button-icon</td>
|
||||
<td>Button icon</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getStyleOptions } from '@/components/doc/helpers';
|
||||
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -27,14 +27,14 @@ export default {
|
|||
description: 'List of class names used in the styled mode.',
|
||||
component: DocApiTable,
|
||||
data: getStyleOptions('InputNumber')
|
||||
},
|
||||
{
|
||||
id: 'theming.tokens',
|
||||
label: 'Design Tokens',
|
||||
description: 'List of design tokens used in a preset.',
|
||||
component: DocApiTable,
|
||||
data: getTokenOptions('InputNumber')
|
||||
}
|
||||
// {
|
||||
// id: 'theming.tokens',
|
||||
// label: 'Design Tokens',
|
||||
// description: 'List of design tokens used in a preset.',
|
||||
// component: DocApiTable,
|
||||
// data: getTokenOptions('InputNumber')
|
||||
// }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,25 +0,0 @@
|
|||
<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-inputotp</td>
|
||||
<td>Container element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-inputotp-input</td>
|
||||
<td>Input element of the component.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getStyleOptions } from '@/components/doc/helpers';
|
||||
import StyledDoc from './StyledDoc.vue';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -1,21 +0,0 @@
|
|||
<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-inputtext</td>
|
||||
<td>Input element</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getStyleOptions } from '@/components/doc/helpers';
|
||||
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -27,14 +27,14 @@ export default {
|
|||
description: 'List of class names used in the styled mode.',
|
||||
component: DocApiTable,
|
||||
data: getStyleOptions('InputText')
|
||||
},
|
||||
{
|
||||
id: 'theming.tokens',
|
||||
label: 'Design Tokens',
|
||||
description: 'List of design tokens used in a preset.',
|
||||
component: DocApiTable,
|
||||
data: getTokenOptions('InputText')
|
||||
}
|
||||
// {
|
||||
// id: 'theming.tokens',
|
||||
// label: 'Design Tokens',
|
||||
// description: 'List of design tokens used in a preset.',
|
||||
// component: DocApiTable,
|
||||
// data: getTokenOptions('InputText')
|
||||
// }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,33 +0,0 @@
|
|||
<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-knob</td>
|
||||
<td>Container element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-knob-text</td>
|
||||
<td>Text element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-knob-value</td>
|
||||
<td>Value element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-knob-text</td>
|
||||
<td>Text element.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getStyleOptions } from '@/components/doc/helpers';
|
||||
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -27,14 +27,14 @@ export default {
|
|||
description: 'List of class names used in the styled mode.',
|
||||
component: DocApiTable,
|
||||
data: getStyleOptions('Knob')
|
||||
},
|
||||
{
|
||||
id: 'theming.tokens',
|
||||
label: 'Design Tokens',
|
||||
description: 'List of design tokens used in a preset.',
|
||||
component: DocApiTable,
|
||||
data: getTokenOptions('Knob')
|
||||
}
|
||||
// {
|
||||
// id: 'theming.tokens',
|
||||
// label: 'Design Tokens',
|
||||
// description: 'List of design tokens used in a preset.',
|
||||
// component: DocApiTable,
|
||||
// data: getTokenOptions('Knob')
|
||||
// }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,37 +0,0 @@
|
|||
<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-listbox</td>
|
||||
<td>Main container element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-listbox-header</td>
|
||||
<td>Header element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-listbox-list-wrapper</td>
|
||||
<td>Container of list element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-listbox-list</td>
|
||||
<td>List element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-listbox-item</td>
|
||||
<td>An item in the list element.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getStyleOptions } from '@/components/doc/helpers';
|
||||
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -27,14 +27,14 @@ export default {
|
|||
description: 'List of class names used in the styled mode.',
|
||||
component: DocApiTable,
|
||||
data: getStyleOptions('Listbox')
|
||||
},
|
||||
{
|
||||
id: 'theming.tokens',
|
||||
label: 'Design Tokens',
|
||||
description: 'List of design tokens used in a preset.',
|
||||
component: DocApiTable,
|
||||
data: getTokenOptions('Listbox')
|
||||
}
|
||||
// {
|
||||
// id: 'theming.tokens',
|
||||
// label: 'Design Tokens',
|
||||
// description: 'List of design tokens used in a preset.',
|
||||
// component: DocApiTable,
|
||||
// data: getTokenOptions('Listbox')
|
||||
// }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,74 +0,0 @@
|
|||
<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-megamenu</td>
|
||||
<td>Container element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-megamenu-horizontal</td>
|
||||
<td>Container element in horizontal orientation.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-megamenu-vertical</td>
|
||||
<td>Container element in vertical orientation.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-megamenu-root-list</td>
|
||||
<td>Root list element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-megamenu-panel</td>
|
||||
<td>Submenu container.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-megamenu-submenu</td>
|
||||
<td>Submenu list element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-submenu-list</td>
|
||||
<td>Submenu list element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-menuitem</td>
|
||||
<td>Menuitem element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-menuitem-active</td>
|
||||
<td>Active menuitem element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-menuitem-content</td>
|
||||
<td>Content of menuitem.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-menuitem-link</td>
|
||||
<td>Link element of the menuitem.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-menuitem-text</td>
|
||||
<td>Label of a menuitem.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-menuitem-icon</td>
|
||||
<td>Icon of a menuitem.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-submenu-icon</td>
|
||||
<td>Arrow icon of a submenu.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getStyleOptions } from '@/components/doc/helpers';
|
||||
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -27,14 +27,14 @@ export default {
|
|||
description: 'List of class names used in the styled mode.',
|
||||
component: DocApiTable,
|
||||
data: getStyleOptions('MegaMenu')
|
||||
},
|
||||
{
|
||||
id: 'theming.tokens',
|
||||
label: 'Design Tokens',
|
||||
description: 'List of design tokens used in a preset.',
|
||||
component: DocApiTable,
|
||||
data: getTokenOptions('MegaMenu')
|
||||
}
|
||||
// {
|
||||
// id: 'theming.tokens',
|
||||
// label: 'Design Tokens',
|
||||
// description: 'List of design tokens used in a preset.',
|
||||
// component: DocApiTable,
|
||||
// data: getTokenOptions('MegaMenu')
|
||||
// }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,62 +0,0 @@
|
|||
<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-menu</td>
|
||||
<td>Container element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-menu-start</td>
|
||||
<td>Container of the start slot.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-menu-end</td>
|
||||
<td>Container of the end slot.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-menu-list</td>
|
||||
<td>List element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-submenu-header</td>
|
||||
<td>Header of the submenu list element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-menuitem</td>
|
||||
<td>Menuitem element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-menuitem-active</td>
|
||||
<td>Active menuitem element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-menuitem-content</td>
|
||||
<td>Content of menuitem.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-menuitem-link</td>
|
||||
<td>Link element of the menuitem.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-menuitem-text</td>
|
||||
<td>Label of a menuitem.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-menuitem-icon</td>
|
||||
<td>Icon of a menuitem.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getStyleOptions } from '@/components/doc/helpers';
|
||||
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -27,14 +27,14 @@ export default {
|
|||
description: 'List of class names used in the styled mode.',
|
||||
component: DocApiTable,
|
||||
data: getStyleOptions('Menu')
|
||||
},
|
||||
{
|
||||
id: 'theming.tokens',
|
||||
label: 'Design Tokens',
|
||||
description: 'List of design tokens used in a preset.',
|
||||
component: DocApiTable,
|
||||
data: getTokenOptions('Menu')
|
||||
}
|
||||
// {
|
||||
// id: 'theming.tokens',
|
||||
// label: 'Design Tokens',
|
||||
// description: 'List of design tokens used in a preset.',
|
||||
// component: DocApiTable,
|
||||
// data: getTokenOptions('Menu')
|
||||
// }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,70 +0,0 @@
|
|||
<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-menubar</td>
|
||||
<td>Container element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-menubar-start</td>
|
||||
<td>Container of the start slot.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-menubar-end</td>
|
||||
<td>Container of the end slot.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-menubar-button</td>
|
||||
<td>Mobile menubar toggle button.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-menubar-root-list</td>
|
||||
<td>Root list element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-submenu-list</td>
|
||||
<td>Submenu list element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-menuitem</td>
|
||||
<td>Menuitem element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-menuitem-active</td>
|
||||
<td>Active menuitem element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-menuitem-content</td>
|
||||
<td>Content of menuitem.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-menuitem-link</td>
|
||||
<td>Link element of the menuitem.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-menuitem-text</td>
|
||||
<td>Label of a menuitem.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-menuitem-icon</td>
|
||||
<td>Icon of a menuitem.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-submenu-icon</td>
|
||||
<td>Arrow icon of a submenu.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getStyleOptions } from '@/components/doc/helpers';
|
||||
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -27,14 +27,14 @@ export default {
|
|||
description: 'List of class names used in the styled mode.',
|
||||
component: DocApiTable,
|
||||
data: getStyleOptions('Menubar')
|
||||
},
|
||||
{
|
||||
id: 'theming.tokens',
|
||||
label: 'Design Tokens',
|
||||
description: 'List of design tokens used in a preset.',
|
||||
component: DocApiTable,
|
||||
data: getTokenOptions('Menubar')
|
||||
}
|
||||
// {
|
||||
// id: 'theming.tokens',
|
||||
// label: 'Design Tokens',
|
||||
// description: 'List of design tokens used in a preset.',
|
||||
// component: DocApiTable,
|
||||
// data: getTokenOptions('Menubar')
|
||||
// }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,49 +0,0 @@
|
|||
<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-message</td>
|
||||
<td>Container element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-message-info</td>
|
||||
<td>Container element when displaying info messages.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-message-warn</td>
|
||||
<td>Container element when displaying warn messages.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-message-error</td>
|
||||
<td>Container element when displaying error messages.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-message-success</td>
|
||||
<td>Container element when displaying success messages.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-message-close</td>
|
||||
<td>Close icon.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-message-icon</td>
|
||||
<td>Severity icon.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-message-text</td>
|
||||
<td>Content of a message.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getStyleOptions } from '@/components/doc/helpers';
|
||||
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -27,14 +27,14 @@ export default {
|
|||
description: 'List of class names used in the styled mode.',
|
||||
component: DocApiTable,
|
||||
data: getStyleOptions('Message')
|
||||
},
|
||||
{
|
||||
id: 'theming.tokens',
|
||||
label: 'Design Tokens',
|
||||
description: 'List of design tokens used in a preset.',
|
||||
component: DocApiTable,
|
||||
data: getTokenOptions('Message')
|
||||
}
|
||||
// {
|
||||
// id: 'theming.tokens',
|
||||
// label: 'Design Tokens',
|
||||
// description: 'List of design tokens used in a preset.',
|
||||
// component: DocApiTable,
|
||||
// data: getTokenOptions('Message')
|
||||
// }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,69 +0,0 @@
|
|||
<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-metergroup</td>
|
||||
<td>Container element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-metergroup-horizontal</td>
|
||||
<td>Container element when orientation mode is horizontal.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-metergroup-vertical</td>
|
||||
<td>Container element when orientation mode is vertical.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-metergroup-meter-container</td>
|
||||
<td>Container of the meters.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-metergroup-meter</td>
|
||||
<td>Content of a meter.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-metergroup-label-list</td>
|
||||
<td>Container element of the list of labels.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-metergroup-label-list-start</td>
|
||||
<td>Container element when label position is start.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-metergroup-label-list-end</td>
|
||||
<td>Container element when label position is end.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-metergroup-label-list-horizontal</td>
|
||||
<td>Container element when label orientation is horizontal.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-metergroup-label-list-vertical</td>
|
||||
<td>Container element when label orientation is vertical.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-metergroup-label-list-item</td>
|
||||
<td>Container element of a list item.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-metergroup-label-list-type</td>
|
||||
<td>Container element of a list type.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-metergroup-label</td>
|
||||
<td>Content of a label.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getStyleOptions } from '@/components/doc/helpers';
|
||||
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -27,14 +27,14 @@ export default {
|
|||
description: 'List of class names used in the styled mode.',
|
||||
component: DocApiTable,
|
||||
data: getStyleOptions('MeterGroup')
|
||||
},
|
||||
{
|
||||
id: 'theming.tokens',
|
||||
label: 'Design Tokens',
|
||||
description: 'List of design tokens used in a preset.',
|
||||
component: DocApiTable,
|
||||
data: getTokenOptions('MeterGroup')
|
||||
}
|
||||
// {
|
||||
// id: 'theming.tokens',
|
||||
// label: 'Design Tokens',
|
||||
// description: 'List of design tokens used in a preset.',
|
||||
// component: DocApiTable,
|
||||
// data: getTokenOptions('MeterGroup')
|
||||
// }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,53 +0,0 @@
|
|||
<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-multiselect</td>
|
||||
<td>Container element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-multiselect-label-container</td>
|
||||
<td>Container of the label to display selected items.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-multiselect-label-container</td>
|
||||
<td>Label to display selected items.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-multiselect-trigger</td>
|
||||
<td>Dropdown button.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-multiselect-filter-container</td>
|
||||
<td>Container of filter input.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-multiselect-panel</td>
|
||||
<td>Overlay panel for items.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-multiselect-items</td>
|
||||
<td>List container of items.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-multiselect-item</td>
|
||||
<td>An item in the list.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-overlay-open</td>
|
||||
<td>Container element when overlay is visible.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<script>
|
||||
import DocApiTable from '@/components/doc/DocApiTable.vue';
|
||||
import { getStyleOptions } from '@/components/doc/helpers';
|
||||
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
|
||||
import TailwindDoc from './TailwindDoc.vue';
|
||||
|
||||
export default {
|
||||
|
|
@ -27,14 +27,14 @@ export default {
|
|||
description: 'List of class names used in the styled mode.',
|
||||
component: DocApiTable,
|
||||
data: getStyleOptions('MultiSelect')
|
||||
},
|
||||
{
|
||||
id: 'theming.tokens',
|
||||
label: 'Design Tokens',
|
||||
description: 'List of design tokens used in a preset.',
|
||||
component: DocApiTable,
|
||||
data: getTokenOptions('MultiSelect')
|
||||
}
|
||||
// {
|
||||
// id: 'theming.tokens',
|
||||
// label: 'Design Tokens',
|
||||
// description: 'List of design tokens used in a preset.',
|
||||
// component: DocApiTable,
|
||||
// data: getTokenOptions('MultiSelect')
|
||||
// }
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue