Add theming tab

pull/4208/head
Cagatay Civici 2023-07-25 16:47:12 +03:00
parent a9309e3b08
commit 9c03b03b99
6 changed files with 63 additions and 14 deletions

View File

@ -13,7 +13,7 @@
background-color: transparent; background-color: transparent;
border: 0 none; border: 0 none;
display: block; display: block;
padding: 1rem 0; padding: 1rem 2rem;
min-width: 12rem; min-width: 12rem;
text-align: center; text-align: center;
color: var(--text-color-secondary); color: var(--text-color-secondary);

View File

@ -12,8 +12,11 @@
<li :class="{ 'doc-tabmenu-active': tab === 1 }"> <li :class="{ 'doc-tabmenu-active': tab === 1 }">
<button type="button" @click="tab = 1">API</button> <button type="button" @click="tab = 1">API</button>
</li> </li>
<li v-if="ptTabComponent" :class="{ 'doc-tabmenu-active': tab === 2 }"> <li :class="{ 'doc-tabmenu-active': tab === 2 }">
<button type="button" @click="tab = 2">PASS THROUGH</button> <button type="button" @click="tab = 2">THEMING</button>
</li>
<li v-if="ptTabComponent" :class="{ 'doc-tabmenu-active': tab === 3 }">
<button type="button" @click="tab = 3">PASS THROUGH</button>
</li> </li>
</ul> </ul>
@ -34,6 +37,10 @@
</div> </div>
<div v-if="tab === 2" class="doc-tabpanel"> <div v-if="tab === 2" class="doc-tabpanel">
<component :is="{ ...themingDocs }" />
</div>
<div v-if="tab === 3" class="doc-tabpanel">
<component :is="{ ...ptTabComponent }" /> <component :is="{ ...ptTabComponent }" />
</div> </div>
</div> </div>
@ -42,14 +49,14 @@
<script> <script>
export default { export default {
props: ['title', 'header', 'description', 'componentDocs', 'apiDocs', 'className', 'ptTabComponent'], props: ['title', 'header', 'description', 'componentDocs', 'apiDocs', 'className', 'ptTabComponent', 'themingDocs'],
data() { data() {
return { return {
tab: 0 tab: 0
}; };
}, },
mounted() { mounted() {
this.tab = this.$route.hash.includes('api') ? 1 : this.$route.hash.includes('pt') ? 2 : 0; this.tab = this.$route.hash.includes('api') ? 1 : this.$route.hash.includes('pt') ? 3 : 0;
} }
}; };
</script> </script>

View File

@ -1,5 +1,5 @@
<template> <template>
<DocSectionText id="style" label="Style" v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p> <p>Following is the list of structural style classes, for theming classes visit <PrimeVueNuxtLink to="/theming">theming</PrimeVueNuxtLink> page.</p>
</DocSectionText> </DocSectionText>

View File

@ -0,0 +1,5 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
</DocSectionText>
</template>

View File

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

View File

@ -1,5 +1,13 @@
<template> <template>
<DocComponent title="Vue Checkbox Component" header="Checkbox" description="Checkbox is an extension to standard checkbox element with theming." :componentDocs="docs" :apiDocs="['Checkbox']" :ptTabComponent="ptComponent" /> <DocComponent
title="Vue Checkbox Component"
header="Checkbox"
description="Checkbox is an extension to standard checkbox element with theming."
:componentDocs="docs"
:apiDocs="['Checkbox']"
:ptTabComponent="ptComponent"
:themingDocs="themingDoc"
/>
</template> </template>
<script> <script>
@ -10,9 +18,9 @@ import DynamicDoc from '@/doc/checkbox/DynamicDoc';
import GroupDoc from '@/doc/checkbox/GroupDoc'; import GroupDoc from '@/doc/checkbox/GroupDoc';
import ImportDoc from '@/doc/checkbox/ImportDoc'; import ImportDoc from '@/doc/checkbox/ImportDoc';
import InvalidDoc from '@/doc/checkbox/InvalidDoc'; import InvalidDoc from '@/doc/checkbox/InvalidDoc';
import StyleDoc from '@/doc/checkbox/StyleDoc';
import VeeValidateDoc from '@/doc/checkbox/form/VeeValidateDoc'; import VeeValidateDoc from '@/doc/checkbox/form/VeeValidateDoc';
import PTComponent from '@/doc/checkbox/pt/index.vue'; import PTComponent from '@/doc/checkbox/pt/index.vue';
import ThemingDoc from '@/doc/checkbox/theming/index.vue';
export default { export default {
data() { data() {
@ -60,18 +68,14 @@ export default {
} }
] ]
}, },
{
id: 'style',
label: 'Style',
component: StyleDoc
},
{ {
id: 'accessibility', id: 'accessibility',
label: 'Accessibility', label: 'Accessibility',
component: AccessibilityDoc component: AccessibilityDoc
} }
], ],
ptComponent: PTComponent ptComponent: PTComponent,
themingDoc: ThemingDoc
}; };
} }
}; };