pull/4683/head
mertsincan 2023-10-24 14:06:20 +01:00
commit 7086966266
5 changed files with 37 additions and 10 deletions

View File

@ -174,6 +174,21 @@ export interface AccordionSlots {
* Default slot to detect AccordionTab components.
*/
default(): VNode[];
/**
* Custom toggler icon template.
* @param {Object} scope - togglericon slot's params.
*/
togglericon(scope: {
/**
* Current index of the tab
*/
index: number;
/**
* Whether the current tab is active
* @param {number} index - Current index of the tab
*/
isTabActive: (index: number) => void;
}): VNode[];
}
/**

View File

@ -21,6 +21,7 @@
v-bind="{ ...getTabProp(tab, 'headeractionprops'), ...getTabPT(tab, 'headeraction', i) }"
>
<component v-if="tab.children && tab.children.headericon" :is="tab.children.headericon" :isTabActive="isTabActive(i)" :index="i"></component>
<component v-else-if="$slots.toggleicon" :is="$slots.toggleicon" :isTabActive="isTabActive(i)" :index="i"></component>
<component v-else-if="isTabActive(i)" :is="collapseIcon ? 'span' : 'ChevronDownIcon'" :class="[cx('tab.headerIcon'), collapseIcon]" aria-hidden="true" v-bind="getTabPT(tab, 'headericon', i)" />
<component v-else :is="expandIcon ? 'span' : 'ChevronRightIcon'" :class="[cx('tab.headerIcon'), expandIcon]" aria-hidden="true" v-bind="getTabPT(tab, 'headericon', i)" />
<span v-if="tab.props && tab.props.header" :class="cx('tab.headerTitle')" v-bind="getTabPT(tab, 'headertitle', i)">{{ tab.props.header }}</span>

View File

@ -300,6 +300,19 @@
"parameters": [],
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Default slot to detect AccordionTab components."
},
{
"name": "togglericon",
"parameters": [
{
"name": "scope",
"optional": false,
"type": "{\n \t <span class=\"ml-3 text-primary-700\">index</span>: <span class=\"text-primary-500\">number</span>, <span class=\"text-primary-300\">// Current index of the tab</span>\n \t <span class=\"ml-3 text-primary-700\">isTabActive</span>: <span class=\"text-primary-500\">(<span class=\"text-primary-700\">index</span>: number) &rArr; void</span>, <span class=\"text-primary-300\">// Whether the current tab is active</span>\n}",
"description": "togglericon slot's params."
}
],
"returnType": "VNode<RendererNode, RendererElement, Object>[]",
"description": "Custom toggler icon template."
}
]
},

View File

@ -18,8 +18,7 @@
:pt="{
root: 'w-2rem h-2rem border-round-sm bg-primary hover:bg-primary',
icon: {
class: 'text-base',
style: 'color: var(--primary-color-text)'
class: 'text-base'
}
}"
/>
@ -54,8 +53,7 @@ export default {
:pt="{
root: 'w-2rem h-2rem border-round-sm bg-primary hover:bg-primary',
icon: {
class: 'text-base',
style: 'color: var(--primary-color-text)'
class: 'text-base'
}
}"
/>
@ -81,8 +79,7 @@ export default {
:pt="{
root: 'w-2rem h-2rem border-round-sm bg-primary hover:bg-primary',
icon: {
class: 'text-base',
style: 'color: var(--primary-color-text)'
class: 'text-base'
}
}"
/>

View File

@ -13,10 +13,6 @@
</template>
<script>
definePageMeta({
layout: 'custom'
});
import EventBus from '@/layouts/AppEventBus';
import AppNews from '@/layouts/AppNews';
import AppTopBar from '@/layouts/AppTopBar.vue';
@ -29,6 +25,11 @@ import ThemeSection from './landing/ThemeSection';
import UsersSection from './landing/UsersSection';
export default {
setup() {
definePageMeta({
layout: 'custom'
});
},
props: {
theme: {
type: String,