feat: The accordion mode of the menu is configurable

This commit is contained in:
vben
2024-05-22 22:56:26 +08:00
parent a0423eb9ba
commit c28adc9a94
12 changed files with 30 additions and 3 deletions

View File

@@ -14,6 +14,7 @@ defineProps<{ disabled?: boolean; disabledNavigationSplit?: boolean }>();
const navigationStyle = defineModel<string>('navigationStyle');
const navigationSplit = defineModel<boolean>('navigationSplit');
const navigationAccordion = defineModel<boolean>('navigationAccordion');
const stylesItems: SelectListItem[] = [
{ label: $t('preference.rounded'), value: 'rounded' },
@@ -29,10 +30,16 @@ const stylesItems: SelectListItem[] = [
>
{{ $t('preference.navigation-style') }}
</ToggleItem>
<SwitchItem v-model="navigationSplit" :disabled="disabledNavigationSplit">
<SwitchItem
v-model="navigationSplit"
:disabled="disabledNavigationSplit || disabled"
>
{{ $t('preference.navigation-split') }}
<template #tip>
{{ $t('preference.navigation-split-tip') }}
</template>
</SwitchItem>
<SwitchItem v-model="navigationAccordion" :disabled="disabled">
{{ $t('preference.navigation-accordion') }}
</SwitchItem>
</template>

View File

@@ -52,11 +52,15 @@ function updateLocale(value: string) {
:page-progress="preference.pageProgress"
:tabs-icon="preference.tabsIcon"
:locale="preference.locale"
:navigation-accordion="preference.navigationAccordion"
:navigation-style="preference.navigationStyle"
:navigation-split="preference.navigationSplit"
:side-collapse-show-title="preference.sideCollapseShowTitle"
:page-transition-enable="preference.pageTransitionEnable"
@update:navigation-style="(value) => handleUpdate('navigationStyle', value)"
@update:navigation-accordion="
(value) => handleUpdate('navigationAccordion', value)
"
@update:navigation-split="(value) => handleUpdate('navigationSplit', value)"
@update:dynamic-title="(value) => handleUpdate('dynamicTitle', value)"
@update:tabs-icon="(value) => handleUpdate('tabsIcon', value)"

View File

@@ -54,6 +54,7 @@ const colorGrayMode = defineModel<boolean>('colorGrayMode');
const colorPrimary = defineModel<string>('colorPrimary');
const navigationStyle = defineModel<string>('navigationStyle');
const navigationSplit = defineModel<boolean>('navigationSplit');
const navigationAccordion = defineModel<boolean>('navigationAccordion');
const pageProgress = defineModel<boolean>('pageProgress');
const pageTransition = defineModel<string>('pageTransition');
const pageTransitionEnable = defineModel<boolean>('pageTransitionEnable');
@@ -197,6 +198,7 @@ function handleReset() {
<Navigation
v-model:navigation-style="navigationStyle"
v-model:navigation-split="navigationSplit"
v-model:navigation-accordion="navigationAccordion"
:disabled="isFullContent"
:disabled-navigation-split="!isMixedNav"
/>