feat(enhanced-readabilities): option to disable animation (#236)

* feat(enhanced-readabilities): option to disable animation
* chore: update packages/vitepress-plugin-enhanced-readabilities/src/client/components/LayoutSwitch.vue

---------

Co-authored-by: Neko Ayaka <neko@ayaka.moe>

Author: Glomzzz

docs/pages/en/integrations/vitepress-plugin-enhanced-readabilities/index.md

@@ -423,6 +423,10 @@ export interface Options {
      * @default false
      */
     disableHelp?: boolean
+    /**
+    * Disable Layout Switch animation
+    */
+    disableAnimation?: boolean,
     /**
      * Default mode for layout switch
      *
@@ -445,6 +449,10 @@ export interface Options {
        * @default 100 (100%)
        */
       defaultMaxWidth?: number
+      /**
+      * Disable Layout Max Width animation
+      */
+      disableAnimation?: boolean,
     }
     /**
      * Page layout max width slider configuration
@@ -462,6 +470,10 @@ export interface Options {
        * @default 800 (80%)
        */
       defaultMaxWidth?: number
+      /**
+      * Disable Layout Max Width animation
+      */
+      disableAnimation?: boolean,
     }
   }
   /**
@@ -491,7 +503,7 @@ export interface Options {
      *
      * @default SpotlightStyle.Aside (2)
      */
-    defaultStyle?: SpotlightStyles
+    defaultStyle?: SpotlightStyle
   }
 }
 ```

docs/pages/zh-CN/integrations/vitepress-plugin-enhanced-readabilities/index.md

@@ -424,6 +424,10 @@ export interface Options {
      * @default false
      */
     disableHelp?: boolean
+    /**
+    * Disable Layout Switch animation
+    */
+    disableAnimation?: boolean,
     /**
      * Default mode for layout switch
      *
@@ -446,6 +450,10 @@ export interface Options {
        * @default 100 (100%)
        */
       defaultMaxWidth?: number
+      /**
+      * Disable Layout Max Width animation
+      */
+      disableAnimation?: boolean,
     }
     /**
      * Page layout max width slider configuration
@@ -463,6 +471,10 @@ export interface Options {
        * @default 800 (80%)
        */
       defaultMaxWidth?: number
+      /**
+      * Disable Layout Max Width animation
+      */
+      disableAnimation?: boolean,
     }
   }
   /**
@@ -492,7 +504,7 @@ export interface Options {
      *
      * @default SpotlightStyle.Aside (2)
      */
-    defaultStyle?: SpotlightStyles
+    defaultStyle?: SpotlightStyle
   }
 }
 ```

packages/vitepress-plugin-enhanced-readabilities/src/client/components/LayoutSwitch.vue

@@ -101,13 +101,13 @@ watch(layoutMode, (val) => {
   if (!mounted.value)
     return
 
-  setClasses(val, true)
+  setClasses(val, !options.layoutSwitch?.disableAnimation)
   if (!supportedLayoutModes.includes(val))
     layoutMode.value = options.layoutSwitch?.defaultMode || LayoutMode.BothWidthAdjustable
 })
 
 watch(route, () => {
-  setClasses(layoutMode.value, true)
+  setClasses(layoutMode.value, !options.layoutSwitch?.disableAnimation)
 })
 
 watch(isLargerThanMobile, () => {

packages/vitepress-plugin-enhanced-readabilities/src/client/components/LayoutSwitchContentLayoutMaxWidthSlider.vue

@@ -59,11 +59,13 @@ const { trigger: triggerAnimation } = useLayoutAppearanceChangeAnimation()
 
 const updatePageMaxWidth = useDebounceFn((val: number) => {
   if (!shouldActivateMaxWidth.value) {
-    triggerAnimation(document.body)
+    if (!options.layoutSwitch?.contentLayoutMaxWidth?.disableAnimation)
+      triggerAnimation(document.body)
     document.body.style.setProperty('--vp-nolebase-enhanced-readabilities-content-max-width', `100%`)
   }
   else {
-    triggerAnimation(document.body)
+    if (!options.layoutSwitch?.contentLayoutMaxWidth?.disableAnimation)
+      triggerAnimation(document.body)
     document.body.style.setProperty('--vp-nolebase-enhanced-readabilities-content-max-width', `${Math.ceil(val / 100)}%`)
   }
 }, 1000)

packages/vitepress-plugin-enhanced-readabilities/src/client/components/LayoutSwitchPageLayoutMaxWidthSlider.vue

@@ -62,7 +62,8 @@ const updatePageMaxWidth = useDebounceFn((val: number) => {
     document.body.style.setProperty('--vp-nolebase-enhanced-readabilities-page-max-width', `100%`)
   }
   else {
-    triggerAnimation(document.body)
+    if (!options.layoutSwitch?.pageLayoutMaxWidth?.disableAnimation)
+      triggerAnimation(document.body)
     document.body.style.setProperty('--vp-nolebase-enhanced-readabilities-page-max-width', `${Math.ceil(val / 100)}%`)
   }
 }, 1000)

packages/vitepress-plugin-enhanced-readabilities/src/client/types.ts

@@ -294,6 +294,10 @@ export interface Options {
      * @default LayoutMode.Original (3)
      */
     defaultMode?: LayoutMode
+    /**
+    * Disable Layout Switch animation
+    */
+    disableAnimation?: boolean
     /**
      * Content layout max width slider configuration
      */
@@ -310,6 +314,10 @@ export interface Options {
        * @default 100 (100%)
        */
       defaultMaxWidth?: number
+      /**
+      * Disable Layout Max Width animation
+      */
+      disableAnimation?: boolean
     }
     /**
      * Page layout max width slider configuration
@@ -327,6 +335,10 @@ export interface Options {
        * @default 800 (80%)
        */
       defaultMaxWidth?: number
+      /**
+      * Disable Layout Max Width animation
+      */
+      disableAnimation?: boolean
     }
   }
   /**