fix(enhanced-readabilities): fallback to default value when layout mo…

…de value isn't supported Signed-off-by: Neko Ayaka <[email protected]>
nolebase · Nov 10, 2023 · 21ba959 · 21ba959
1 parent 0e45659
commit 21ba959
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 16 deletions.
diff --git a/packages/vitepress-plugin-enhanced-readabilities/src/components/LayoutSwitch.vue b/packages/vitepress-plugin-enhanced-readabilities/src/components/LayoutSwitch.vue
@@ -2,10 +2,9 @@
 import { onMounted, ref, watch, inject } from 'vue'
 import { useLocalStorage, useMediaQuery, useMounted } from '@vueuse/core'
 
-import { InjectionKey, LayoutSwitchModeStorageKey } from '../constants'
+import { InjectionKey, LayoutSwitchModeStorageKey, LayoutMode, supportedLayoutModes } from '../constants'
 import { useLayoutAppearanceChangeAnimation } from '../composables/animation'
 import { useI18n } from '../composables/i18n'
-import { LayoutMode } from '../types'
 
 import MenuOption from './MenuOption.vue'
 import MenuTitle from './MenuTitle.vue'
@@ -57,13 +56,19 @@ watch(mounted, (val) => {
     return
 
   setClasses(layoutMode.value, false)
+  if (!supportedLayoutModes.includes(layoutMode.value)) {
+    layoutMode.value = options.layoutSwitch?.defaultMode || LayoutMode.BothWidthAdjustable
+  }
 })
 
 watch(layoutMode, (val) => {
   if (!mounted.value)
     return
 
   setClasses(val, true)
+  if (!supportedLayoutModes.includes(val)) {
+    layoutMode.value = options.layoutSwitch?.defaultMode || LayoutMode.BothWidthAdjustable
+  }
 })
 
 watch(isLargerThanMobile, () => {

diff --git a/...-plugin-enhanced-readabilities/src/components/LayoutSwitchContentLayoutMaxWidthSlider.vue b/...-plugin-enhanced-readabilities/src/components/LayoutSwitchContentLayoutMaxWidthSlider.vue
@@ -2,10 +2,9 @@
 import { computed, inject, onMounted, ref, watch } from 'vue'
 import { useDebounceFn, useLocalStorage, useMediaQuery, useMounted, useStorage } from '@vueuse/core'
 
-import { InjectionKey, ContentLayoutMaxWidthStorageKey, LayoutSwitchModeStorageKey } from '../constants'
+import { InjectionKey, ContentLayoutMaxWidthStorageKey, LayoutSwitchModeStorageKey, LayoutMode } from '../constants'
 import { useLayoutAppearanceChangeAnimation } from '../composables/animation'
 import { useI18n } from '../composables/i18n'
-import { LayoutMode } from '../types'
 
 import MenuTitle from './MenuTitle.vue'
 import MenuHelp from './MenuHelp.vue'

diff --git a/...ess-plugin-enhanced-readabilities/src/components/LayoutSwitchPageLayoutMaxWidthSlider.vue b/...ess-plugin-enhanced-readabilities/src/components/LayoutSwitchPageLayoutMaxWidthSlider.vue
@@ -2,10 +2,9 @@
 import { computed, inject, onMounted, ref, watch } from 'vue'
 import { useDebounceFn, useLocalStorage, useMediaQuery, useMounted, useStorage } from '@vueuse/core'
 
-import { InjectionKey, LayoutSwitchModeStorageKey, PageLayoutMaxWidthStorageKey } from '../constants'
+import { InjectionKey, LayoutMode, LayoutSwitchModeStorageKey, PageLayoutMaxWidthStorageKey } from '../constants'
 import { useLayoutAppearanceChangeAnimation } from '../composables/animation'
 import { useI18n } from '../composables/i18n'
-import { LayoutMode } from '../types'
 
 import MenuTitle from './MenuTitle.vue'
 import MenuHelp from './MenuHelp.vue'

diff --git a/packages/vitepress-plugin-enhanced-readabilities/src/components/ScreenLayoutSwitch.vue b/packages/vitepress-plugin-enhanced-readabilities/src/components/ScreenLayoutSwitch.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
-import { LayoutMode } from '../types'
+import { onMounted, ref, watch } from 'vue'
+import { useMediaQuery } from '@vueuse/core'
+
 import { useI18n } from '../composables/i18n'
+import { LayoutMode } from '../constants'
+
 import MenuTitle from './MenuTitle.vue'
 import MenuOption from './MenuOption.vue'
-import { useMediaQuery } from '@vueuse/core'
-import { onMounted, ref, watch } from 'vue'
 
 const disabled = ref(true)
 

diff --git a/packages/vitepress-plugin-enhanced-readabilities/src/constants.ts b/packages/vitepress-plugin-enhanced-readabilities/src/constants.ts
@@ -8,3 +8,17 @@ export const LayoutSwitchMaxWidthStrategyStorageKey = 'vitepress-nolebase-enhanc
 export const ContentLayoutMaxWidthStorageKey = 'vitepress-nolebase-enhanced-readabilities-content-layout-max-width'
 export const PageLayoutMaxWidthStorageKey = 'vitepress-nolebase-enhanced-readabilities-page-layout-max-width'
 export const SpotlightToggledStorageKey = 'vitepress-nolebase-enhanced-readabilities-spotlight-mode'
+
+export enum LayoutMode {
+  FullWidth = 1,
+  Original = 3,
+  SidebarWidthAdjustableOnly = 4,
+  BothWidthAdjustable = 5,
+}
+
+export const supportedLayoutModes = [
+  LayoutMode.FullWidth,
+  LayoutMode.Original,
+  LayoutMode.SidebarWidthAdjustableOnly,
+  LayoutMode.BothWidthAdjustable,
+]
diff --git a/packages/vitepress-plugin-enhanced-readabilities/src/types.ts b/packages/vitepress-plugin-enhanced-readabilities/src/types.ts
@@ -1,10 +1,3 @@
-export enum LayoutMode {
-  FullWidth = 1,
-  Original = 3,
-  SidebarWidthAdjustableOnly = 4,
-  BothWidthAdjustable = 5,
-}
-
 /**
  * Locale
  */