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

Preset section is added to Theming tab

pull/7398/head
tugcekucukoglu 2025-03-10 16:16:44 +03:00
parent e2c3a120f2
commit 4edfa8a12c
86 changed files with 697 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
apps/showcase/assets/styles/layout/_doc.scss
View File

@ -112,7 +112,7 @@
align-items: center; align-items: center;
scroll-margin-top: 6.5rem; scroll-margin-top: 6.5rem;
> a { >a {
color: var(--primary-text-color); color: var(--primary-text-color);
opacity: 0.7; opacity: 0.7;
margin-inline-start: 1rem; margin-inline-start: 1rem;
@ -123,7 +123,7 @@
@include focus-visible(); @include focus-visible();
} }
> .doc-section-label-badge { >.doc-section-label-badge {
margin-inline-start: 0.5rem; margin-inline-start: 0.5rem;
} }
@ -132,7 +132,7 @@
} }
&:hover { &:hover {
> a { >a {
display: block; display: block;
&:hover { &:hover {
@ -143,7 +143,7 @@
} }
.doc-section-description { .doc-section-description {
> p { >p {
font-size: 1.125rem; font-size: 1.125rem;
i { i {
@ -185,7 +185,7 @@
overflow-x: hidden; overflow-x: hidden;
align-self: flex-start; align-self: flex-start;
> .navbar-item { >.navbar-item {
.navbar-item-content { .navbar-item-content {
border-inline-start: 1px solid var(--border-color); border-inline-start: 1px solid var(--border-color);
padding-inline-start: .25rem; padding-inline-start: .25rem;
@ -198,7 +198,7 @@
} }
.navbar-item { .navbar-item {
> .navbar-item-content { >.navbar-item-content {
display: flex; display: flex;
button { button {
@ -230,7 +230,7 @@
} }
&.active-navbar-item { &.active-navbar-item {
> .navbar-item-content { >.navbar-item-content {
border-color: var(--primary-text-color); border-color: var(--primary-text-color);
button { button {
@ -282,7 +282,7 @@
right: .75rem; right: .75rem;
gap: .5rem; gap: .5rem;
display: none; display: none;
background: rgba(255,255,255,.05); background: rgba(255, 255, 255, .05);
border-radius: 10px; border-radius: 10px;
padding: 2px; padding: 2px;
backdrop-filter: blur(6px); backdrop-filter: blur(6px);
@ -299,7 +299,7 @@
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: rgba(255,255,255,.1); background-color: rgba(255, 255, 255, .1);
color: var(--code-button-text-color); color: var(--code-button-text-color);
} }
@ -370,7 +370,8 @@
} }
} }
.doc-option-name, i:not(.pi) { .doc-option-name,
i:not(.pi) {
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
position: relative; position: relative;
scroll-margin-top: 6.5rem; scroll-margin-top: 6.5rem;
@ -478,3 +479,33 @@
} }
} }
} }
.doc-preset-table {
border-collapse: collapse;
width: 100%;
min-width: 640px;
margin-bottom: 1.5rem;
th {
border-bottom: 1px solid var(--border-color);
padding-block: .75rem;
padding-inline: 1rem;
text-align: start;
text-transform: capitalize;
}
td {
padding-block: .75rem;
padding-inline: 1rem;
border-bottom: 1px solid var(--border-color);
white-space: pre-line;
line-height: 1.5;
scroll-margin-top: 6.5rem;
&:first-child {
color: var(--primary-text-color);
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
font-weight: 600;
}
}
}

4
apps/showcase/assets/styles/layout/layout.scss
View File

@ -11,9 +11,9 @@
@import './_news'; @import './_news';
@import './_footer'; @import './_footer';
@import './_code'; @import './_code';
@import './_doc'; @import './_doc.scss';
@import './_docsearch'; @import './_docsearch';
@import './_responsive'; @import './_responsive';
@import './_animation'; @import './_animation';
@import './_templates'; @import './_templates';
@import './landing/_landing'; @import './landing/_landing';

56
apps/showcase/components/doc/DocStyledPreset.vue Normal file
View File

@ -0,0 +1,56 @@
<template>
<DocSectionText>
<p>PrimeVue offers various preset options that allow you to customize the component's styling to match your application's design system. Below you'll find links to the implementation and type definitions for each preset.</p>
<div class="doc-tablewrapper mt-4">
<table class="doc-preset-table">
<thead>
<tr>
<th v-for="header in headers" :key="header">
<template v-if="header !== 'readonly' && header !== 'optional' && header !== 'deprecated'">
{{ header }}
</template>
</th>
</tr>
</thead>
<tbody>
<tr v-for="preset in presets" :key="preset">
<td :class="`doc-option-preset-name-${preset.toLowerCase()}`">{{ preset }}</td>
<td :class="`doc-option-preset-implementation-${preset.toLowerCase()}`">
<a
:href="`https://github.com/primefaces/primeuix/blob/main/packages/themes/src/presets/${preset.toLowerCase()}/${$attrs.data}/index.ts`"
target="_blank"
rel="noopener noreferrer"
class="inline-flex rounded-full px-3 py-1 bg-surface-200 hover:bg-surface-300 transition-all duration-200 gap-2 items-center text-sm dark:bg-surface-800 dark:hover:bg-surface-700"
>
<span class="text-surface-900 dark:text-surface-50 font-medium">{{ preset }}</span>
<i class="pi pi-external-link text-xs! text-surface-900 dark:text-surface-50"></i>
</a>
</td>
<td :class="`doc-option-preset-type-${preset.toLowerCase()}`">
<a
:href="`https://github.com/primefaces/primeuix/blob/main/packages/themes/src/presets/${preset.toLowerCase()}/${$attrs.data}/index.d.ts`"
target="_blank"
rel="noopener noreferrer"
class="inline-flex rounded-full px-3 py-1 bg-surface-200 hover:bg-surface-300 transition-all duration-200 gap-2 items-center text-sm dark:bg-surface-800 dark:hover:bg-surface-700"
>
<span class="text-surface-900 dark:text-surface-50 font-medium">{{ preset }}</span>
<i class="pi pi-external-link text-xs! text-surface-900 dark:text-surface-50"></i>
</a>
</td>
</tr>
</tbody>
</table>
</div>
</DocSectionText>
</template>
<script>
export default {
data() {
return {
headers: ['Preset', 'Implementation', 'Types'],
presets: ['Aura', 'Lara', 'Nora', 'Material']
};
}
};
</script>

3
apps/showcase/components/doc/helpers/index.js
View File

@ -66,7 +66,8 @@ export const getTokenOptions = (name) => {
for (const [_, value] of Object.entries(tokens)) { for (const [_, value] of Object.entries(tokens)) {
data.push({ data.push({
token: value.token, token: value.token,
variable: value.variable, property: value.name.split('.').slice(1).join('.'),
'CSS Variable': value.variable,
description: value.description description: value.description
}); });
} }

7
apps/showcase/doc/accordion/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -55,6 +56,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('Accordion') data: getTokenOptions('Accordion')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'accordion'
} }
] ]
}, },

7
apps/showcase/doc/autocomplete/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('AutoComplete') data: getTokenOptions('AutoComplete')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'autocomplete'
} }
] ]
}, },

7
apps/showcase/doc/avatar/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('Avatar') data: getTokenOptions('Avatar')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'avatar'
} }
] ]
}, },

13
apps/showcase/doc/badge/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -41,6 +42,18 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('Badge') data: getTokenOptions('Badge')
},
{
id: 'theming.preset',
label: 'Badge Preset',
component: DocStyledPreset,
data: 'badge'
},
{
id: 'theming.preset',
label: 'OverlayBadge Preset',
component: DocStyledPreset,
data: 'overlaybadge'
} }
] ]
}, },

7
apps/showcase/doc/blockui/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('BlockUI') data: getTokenOptions('BlockUI')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'blockui'
} }
] ]
}, },

7
apps/showcase/doc/breadcrumb/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('Breadcrumb') data: getTokenOptions('Breadcrumb')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'breadcrumb'
} }
] ]
}, },

7
apps/showcase/doc/button/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -41,6 +42,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('Button') data: getTokenOptions('Button')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'button'
} }
] ]
}, },

7
apps/showcase/doc/card/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('Card') data: getTokenOptions('Card')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'card'
} }
] ]
}, },

7
apps/showcase/doc/carousel/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('Carousel') data: getTokenOptions('Carousel')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'carousel'
} }
] ]
}, },

7
apps/showcase/doc/cascadeselect/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('CascadeSelect') data: getTokenOptions('CascadeSelect')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'cascadeselect'
} }
] ]
}, },

7
apps/showcase/doc/checkbox/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('Checkbox') data: getTokenOptions('Checkbox')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'checkbox'
} }
] ]
}, },

7
apps/showcase/doc/chip/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('Chip') data: getTokenOptions('Chip')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'chip'
} }
] ]
}, },

7
apps/showcase/doc/colorpicker/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('ColorPicker') data: getTokenOptions('ColorPicker')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'colorpicker'
} }
] ]
}, },

7
apps/showcase/doc/confirmdialog/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('ConfirmDialog') data: getTokenOptions('ConfirmDialog')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'confirmdialog'
} }
] ]
}, },

7
apps/showcase/doc/confirmpopup/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('ConfirmPopup') data: getTokenOptions('ConfirmPopup')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'confirmpopup'
} }
] ]
}, },

7
apps/showcase/doc/contextmenu/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('ContextMenu') data: getTokenOptions('ContextMenu')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'contextmenu'
} }
] ]
}, },

7
apps/showcase/doc/datatable/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('DataTable') data: getTokenOptions('DataTable')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'datatable'
} }
] ]
}, },

7
apps/showcase/doc/dataview/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('DataView') data: getTokenOptions('DataView')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'dataview'
} }
] ]
}, },

7
apps/showcase/doc/datepicker/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('DatePicker') data: getTokenOptions('DatePicker')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'datepicker'
} }
] ]
}, },

7
apps/showcase/doc/dialog/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('Dialog') data: getTokenOptions('Dialog')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'dialog'
} }
] ]
}, },

7
apps/showcase/doc/divider/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('Divider') data: getTokenOptions('Divider')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'divider'
} }
] ]
}, },

7
apps/showcase/doc/dock/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('Dock') data: getTokenOptions('Dock')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'dock'
} }
] ]
}, },

7
apps/showcase/doc/drawer/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('Drawer') data: getTokenOptions('Drawer')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'drawer'
} }
] ]
}, },

7
apps/showcase/doc/editor/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('Editor') data: getTokenOptions('Editor')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'editor'
} }
] ]
}, },

7
apps/showcase/doc/fieldset/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('Fieldset') data: getTokenOptions('Fieldset')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'fieldset'
} }
] ]
}, },

7
apps/showcase/doc/fileupload/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('FileUpload') data: getTokenOptions('FileUpload')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'fileupload'
} }
] ]
}, },

7
apps/showcase/doc/floatlabel/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('FloatLabel') data: getTokenOptions('FloatLabel')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'floatlabel'
} }
] ]
}, },

7
apps/showcase/doc/galleria/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('Galleria') data: getTokenOptions('Galleria')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'galleria'
} }
] ]
}, },

7
apps/showcase/doc/iconfield/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -41,6 +42,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('IconField') data: getTokenOptions('IconField')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'iconfield'
} }
] ]
}, },

7
apps/showcase/doc/iftalabel/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('IftaLabel') data: getTokenOptions('IftaLabel')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'iftalabel'
} }
] ]
}, },

7
apps/showcase/doc/image/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('Image') data: getTokenOptions('Image')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'image'
} }
] ]
}, },

7
apps/showcase/doc/imagecompare/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('ImageCompare') data: getTokenOptions('ImageCompare')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'imagecompare'
} }
] ]
}, },

7
apps/showcase/doc/inplace/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('Inplace') data: getTokenOptions('Inplace')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'inplace'
} }
] ]
}, },

7
apps/showcase/doc/inputgroup/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -41,6 +42,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('InputGroup') data: getTokenOptions('InputGroup')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'inputgroup'
} }
] ]
}, },

7
apps/showcase/doc/inputnumber/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('InputNumber') data: getTokenOptions('InputNumber')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'inputnumber'
} }
] ]
}, },

16
apps/showcase/doc/inputotp/theming/index.vue
View File

@ -10,7 +10,8 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import { getStyleOptions } from '@/components/doc/helpers'; import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
export default { export default {
@ -27,6 +28,19 @@ export default {
description: 'List of class names used in the styled mode.', description: 'List of class names used in the styled mode.',
component: DocApiTable, component: DocApiTable,
data: getStyleOptions('InputOtp') data: getStyleOptions('InputOtp')
},
{
id: 'theming.tokens',
label: 'Design Tokens',
description: 'List of design tokens used in a preset.',
component: DocApiTable,
data: getTokenOptions('InputOtp')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'inputotp'
} }
] ]
}, },

7
apps/showcase/doc/inputtext/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('InputText') data: getTokenOptions('InputText')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'inputtext'
} }
] ]
}, },

7
apps/showcase/doc/knob/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('Knob') data: getTokenOptions('Knob')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'knob'
} }
] ]
}, },

7
apps/showcase/doc/listbox/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('Listbox') data: getTokenOptions('Listbox')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'listbox'
} }
] ]
}, },

7
apps/showcase/doc/megamenu/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('MegaMenu') data: getTokenOptions('MegaMenu')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'megamenu'
} }
] ]
}, },

7
apps/showcase/doc/menu/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('Menu') data: getTokenOptions('Menu')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'menu'
} }
] ]
}, },

7
apps/showcase/doc/menubar/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('Menubar') data: getTokenOptions('Menubar')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'menubar'
} }
] ]
}, },

7
apps/showcase/doc/message/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('Message') data: getTokenOptions('Message')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'message'
} }
] ]
}, },

7
apps/showcase/doc/metergroup/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('MeterGroup') data: getTokenOptions('MeterGroup')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'metergroup'
} }
] ]
}, },

7
apps/showcase/doc/multiselect/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('MultiSelect') data: getTokenOptions('MultiSelect')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'multiselect'
} }
] ]
}, },

7
apps/showcase/doc/orderlist/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('OrderList') data: getTokenOptions('OrderList')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'orderlist'
} }
] ]
}, },

7
apps/showcase/doc/organizationchart/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('OrganizationChart') data: getTokenOptions('OrganizationChart')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'organizationchart'
} }
] ]
}, },

7
apps/showcase/doc/paginator/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('Paginator') data: getTokenOptions('Paginator')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'paginator'
} }
] ]
}, },

7
apps/showcase/doc/panel/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('Panel') data: getTokenOptions('Panel')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'panel'
} }
] ]
}, },

7
apps/showcase/doc/panelmenu/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('PanelMenu') data: getTokenOptions('PanelMenu')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'panelmenu'
} }
] ]
}, },

7
apps/showcase/doc/password/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('Password') data: getTokenOptions('Password')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'password'
} }
] ]
}, },

7
apps/showcase/doc/picklist/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('PickList') data: getTokenOptions('PickList')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'picklist'
} }
] ]
}, },

7
apps/showcase/doc/popover/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('Popover') data: getTokenOptions('Popover')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'popover'
} }
] ]
}, },

7
apps/showcase/doc/progressbar/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('ProgressBar') data: getTokenOptions('ProgressBar')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'progressbar'
} }
] ]
}, },

7
apps/showcase/doc/progressspinner/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('ProgressSpinner') data: getTokenOptions('ProgressSpinner')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'progressspinner'
} }
] ]
}, },

7
apps/showcase/doc/radiobutton/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('RadioButton') data: getTokenOptions('RadioButton')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'radiobutton'
} }
] ]
}, },

7
apps/showcase/doc/rating/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('Rating') data: getTokenOptions('Rating')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'rating'
} }
] ]
}, },

7
apps/showcase/doc/ripple/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('Ripple') data: getTokenOptions('Ripple')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'ripple'
} }
] ]
}, },

7
apps/showcase/doc/scrollpanel/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('ScrollPanel') data: getTokenOptions('ScrollPanel')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'scrollpanel'
} }
] ]
}, },

7
apps/showcase/doc/select/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('Select') data: getTokenOptions('Select')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'select'
} }
] ]
}, },

7
apps/showcase/doc/selectbutton/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('SelectButton') data: getTokenOptions('SelectButton')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'selectbutton'
} }
] ]
}, },

7
apps/showcase/doc/skeleton/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('Skeleton') data: getTokenOptions('Skeleton')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'skeleton'
} }
] ]
}, },

7
apps/showcase/doc/slider/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('Slider') data: getTokenOptions('Slider')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'slider'
} }
] ]
}, },

7
apps/showcase/doc/speeddial/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('SpeedDial') data: getTokenOptions('SpeedDial')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'speeddial'
} }
] ]
}, },

7
apps/showcase/doc/splitbutton/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('SplitButton') data: getTokenOptions('SplitButton')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'splitbutton'
} }
] ]
}, },

7
apps/showcase/doc/splitter/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -41,6 +42,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('Splitter') data: getTokenOptions('Splitter')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'splitter'
} }
] ]
}, },

7
apps/showcase/doc/stepper/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -69,6 +70,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('Stepper') data: getTokenOptions('Stepper')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'stepper'
} }
] ]
}, },

7
apps/showcase/doc/tabs/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -62,6 +63,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('Tabs') data: getTokenOptions('Tabs')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'tabs'
} }
] ]
}, },

7
apps/showcase/doc/tag/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('Tag') data: getTokenOptions('Tag')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'tag'
} }
] ]
}, },

7
apps/showcase/doc/terminal/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('Terminal') data: getTokenOptions('Terminal')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'terminal'
} }
] ]
}, },

7
apps/showcase/doc/textarea/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('Textarea') data: getTokenOptions('Textarea')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'textarea'
} }
] ]
}, },

7
apps/showcase/doc/tieredmenu/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('TieredMenu') data: getTokenOptions('TieredMenu')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'tieredmenu'
} }
] ]
}, },

7
apps/showcase/doc/timeline/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('Timeline') data: getTokenOptions('Timeline')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'timeline'
} }
] ]
}, },

7
apps/showcase/doc/toast/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('Toast') data: getTokenOptions('Toast')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'toast'
} }
] ]
}, },

7
apps/showcase/doc/togglebutton/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('ToggleButton') data: getTokenOptions('ToggleButton')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'togglebutton'
} }
] ]
}, },

7
apps/showcase/doc/toggleswitch/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('ToggleSwitch') data: getTokenOptions('ToggleSwitch')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'toggleswitch'
} }
] ]
}, },

7
apps/showcase/doc/toolbar/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('Toolbar') data: getTokenOptions('Toolbar')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'toolbar'
} }
] ]
}, },

7
apps/showcase/doc/tooltip/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('Tooltip') data: getTokenOptions('Tooltip')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'tooltip'
} }
] ]
}, },

7
apps/showcase/doc/tree/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('Tree') data: getTokenOptions('Tree')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'tree'
} }
] ]
}, },

7
apps/showcase/doc/treeselect/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('TreeSelect') data: getTokenOptions('TreeSelect')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'treeselect'
} }
] ]
}, },

7
apps/showcase/doc/treetable/theming/index.vue
View File

@ -10,6 +10,7 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers'; import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
import TailwindDoc from './TailwindDoc.vue'; import TailwindDoc from './TailwindDoc.vue';
@ -34,6 +35,12 @@ export default {
description: 'List of design tokens used in a preset.', description: 'List of design tokens used in a preset.',
component: DocApiTable, component: DocApiTable,
data: getTokenOptions('TreeTable') data: getTokenOptions('TreeTable')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'treetable'
} }
] ]
}, },

16
apps/showcase/doc/virtualscroller/theming/index.vue
View File

@ -10,7 +10,8 @@
<script> <script>
import DocApiTable from '@/components/doc/DocApiTable.vue'; import DocApiTable from '@/components/doc/DocApiTable.vue';
import { getStyleOptions } from '@/components/doc/helpers'; import DocStyledPreset from '@/components/doc/DocStyledPreset.vue';
import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
export default { export default {
data() { data() {
@ -26,6 +27,19 @@ export default {
description: 'List of class names used in the styled mode.', description: 'List of class names used in the styled mode.',
component: DocApiTable, component: DocApiTable,
data: getStyleOptions('VirtualScroller') data: getStyleOptions('VirtualScroller')
},
{
id: 'theming.tokens',
label: 'Design Tokens',
description: 'List of design tokens used in a preset.',
component: DocApiTable,
data: getTokenOptions('VirtualScroller')
},
{
id: 'theming.preset',
label: 'Preset',
component: DocStyledPreset,
data: 'virtualscroller'
} }
] ]
} }