fix(docs): ssr rendering (#250)

LouisMazel · May 2, 2022 · a6e0d5d · a6e0d5d
1 parent b831bd5
commit a6e0d5d
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 39 deletions.
diff --git a/packages/docs/docs/components/maz-transition-expand.md b/packages/docs/docs/components/maz-transition-expand.md
@@ -1,14 +1,11 @@
 ---
-title: MazTransitionExpand
 description: MazTransitionExpand is a stand-alone component replaces the standard html button with a beautiful design system. Many options like colors, sizes, disabled state, loading state, includes icons. Support of router-link and nuxt-link
 ---
 
 # MazTransitionExpand
 
-
 > Before you have to import the global css files in your project, follow instructions in [Getting Started](/maz-ui-3/guide/getting-started.html)
 
-
 ## Basic usage
 
 <br />
@@ -18,6 +15,7 @@ description: MazTransitionExpand is a stand-alone component replaces the standar
 <br />
 <br />
 
+<ClientOnly>
 <div class="flex items-start gap-05">
   <MazCard class="flex-1">
     <MazTransitionExpand>
@@ -56,6 +54,7 @@ description: MazTransitionExpand is a stand-alone component replaces the standar
     </MazTransitionExpand>
   </MazCard>
 </div>
+</ClientOnly>
 
 ```vue
 <template>

diff --git a/packages/docs/docs/helpers/idle-timeout.md b/packages/docs/docs/helpers/idle-timeout.md
@@ -37,16 +37,16 @@ const idleTimeoutCallback: IdleTimeoutCallback = ({ isIdle, eventType }) => {
 <br />
 
 <div class="flex items-start gap-05 items-center flex-wrap">
-  <MazBtn @click="idleTimeoutInstance.pause()" color="warning">
+  <MazBtn @click="idleTimeoutInstance?.pause" color="warning">
     Pause
   </MazBtn>
-  <MazBtn @click="idleTimeoutInstance.resume()">
+  <MazBtn @click="idleTimeoutInstance?.resume">
     Resume
   </MazBtn>
-  <MazBtn @click="idleTimeoutInstance.reset()" color="secondary">
+  <MazBtn @click="idleTimeoutInstance?.reset" color="secondary">
     Reset
   </MazBtn>
-  <MazBtn @click="idleTimeoutInstance.destroy()" color="danger">
+  <MazBtn @click="idleTimeoutInstance?.destroy" color="danger">
     Destroy
   </MazBtn>
 </div>
@@ -55,8 +55,8 @@ const idleTimeoutCallback: IdleTimeoutCallback = ({ isIdle, eventType }) => {
 
 <MazCard overflow-hidden style="width: 100%;">
   <div style="display: flex;">
-    <div style="flex: 1;">isIdle: {{event.isIdle}}</div>
-    <div v-if="event.eventType" style="flex: 1; padding-left: 10px;">eventType: {{event.eventType}}</div>
+    <div style="flex: 1;">isIdle: {{event.isIdle ?? false}}</div>
+    <div v-if="event.eventType" style="flex: 1; padding-left: 10px;">eventType: {{event.eventType ?? '-' }}</div>
   </div>
 </MazCard>
 
@@ -66,16 +66,16 @@ const idleTimeoutCallback: IdleTimeoutCallback = ({ isIdle, eventType }) => {
 
 ```vue
 <template>
-  <MazBtn @click="idleTimeoutInstance.pause()" color="warning">
+  <MazBtn @click="idleTimeoutInstance?.pause" color="warning">
     Pause
   </MazBtn>
-  <MazBtn @click="idleTimeoutInstance.resume()">
+  <MazBtn @click="idleTimeoutInstance?.resume">
     Resume
   </MazBtn>
-  <MazBtn @click="idleTimeoutInstance.reset()" color="secondary">
+  <MazBtn @click="idleTimeoutInstance?.reset" color="secondary">
     Reset
   </MazBtn>
-  <MazBtn @click="idleTimeoutInstance.destroy()" color="danger">
+  <MazBtn @click="idleTimeoutInstance?.destroy" color="danger">
     Destroy
   </MazBtn>
 
@@ -101,16 +101,9 @@ const idleTimeoutCallback: IdleTimeoutCallback = ({ isIdle, eventType }) => {
   // for typescript users
   import type { IdleTimeoutOptions, IdleTimeoutCallback } from 'maz-ui'
 
-  const event = ref<{ isIdle: boolean, eventType?: string }>()
+  const event = ref<{ isIdle: boolean, eventType?: string }>({})
 
-  const idleTimeoutOptions: IdleTimeoutOptions = {
-    immediate: false,
-    element: document.body,
-    once: false,
-    timeout: 3000,
-  }
-
-  const idleTimeoutCallback: IdleTimeoutCallback = ({ isIdle, eventType }) => {
+  const idleTimeoutCallback: IdleTimeoutCallback = (payload) => {
     console.log({ isIdle, eventType })
 
     event.value = {
@@ -119,7 +112,18 @@ const idleTimeoutCallback: IdleTimeoutCallback = ({ isIdle, eventType }) => {
     }
   }
 
-  const idleTimeoutInstance = new IdleTimeout(idleTimeoutCallback, idleTimeoutOptions)
+  const idleTimeoutInstance = ref<IdleTimeout>()
+
+  onMounted(() => {
+    const idleTimeoutOptions: IdleTimeoutOptions = {
+      element: document.body,
+      timeout: 3000,
+      immediate: true,
+      once: false,
+    }
+
+    idleTimeoutInstance.value = new IdleTimeout(idleTimeoutCallback, idleTimeoutOptions)
+  })
 </script>
 ```
 
@@ -133,14 +137,7 @@ const idleTimeoutCallback: IdleTimeoutCallback = ({ isIdle, eventType }) => {
   // for typescript users
   import type { IdleTimeoutOptions, IdleTimeoutCallback } from 'maz-ui'
 
-  const event = ref<{ isIdle: boolean, eventType?: string }>()
-
-  const idleTimeoutOptions: IdleTimeoutOptions = {
-    element: document.body,
-    timeout: 3000,
-    immediate: true,
-    once: false,
-  }
+  const event = ref<{ isIdle: boolean, eventType?: string }>({})
 
   const idleTimeoutCallback: IdleTimeoutCallback = ({ isIdle, eventType }) => {
     console.log({ isIdle, eventType })
@@ -151,7 +148,18 @@ const idleTimeoutCallback: IdleTimeoutCallback = ({ isIdle, eventType }) => {
     }
   }
 
-  const idleTimeoutInstance = new IdleTimeout(idleTimeoutCallback, idleTimeoutOptions)
+  const idleTimeoutInstance = ref<IdleTimeout>()
+
+  onMounted(() => {
+    const idleTimeoutOptions: IdleTimeoutOptions = {
+      element: document.body,
+      timeout: 3000,
+      immediate: true,
+      once: false,
+    }
+
+    idleTimeoutInstance.value = new IdleTimeout(idleTimeoutCallback, idleTimeoutOptions)
+  })
 </script>
 
 ## Options

diff --git a/packages/docs/docs/helpers/user-visibility.md b/packages/docs/docs/helpers/user-visibility.md
@@ -31,7 +31,7 @@ const userVisibilyCallback: UserVisibilyCallback = ({ isVisible }) => {
 
 <br />
 
-<MazBtn @click="userVisibilityInstance.destroy()" color="danger">
+<MazBtn @click="userVisibilityInstance?.destroy" color="danger">
   Destroy
 </MazBtn>
 
@@ -50,7 +50,7 @@ const userVisibilyCallback: UserVisibilyCallback = ({ isVisible }) => {
 
 ```vue
 <template>
-  <MazBtn @click="userVisibilityInstance.destroy()" color="danger">
+  <MazBtn @click="userVisibilityInstance?.destroy" color="danger">
     Destroy
   </MazBtn>
 
@@ -84,7 +84,11 @@ const userVisibilyCallback: UserVisibilyCallback = ({ isVisible }) => {
     timeout: 1000,
   }
 
-  const userVisibilityInstance = new UserVisibility(userVisibilyCallback, userVisibilyOptions)
+  const userVisibilityInstance = ref<UserVisibility>()
+
+  onMounted(() => {
+    userVisibilityInstance.value = new UserVisibility(userVisibilyCallback, userVisibilyOptions)
+  })
 </script>
 ```
 
@@ -111,7 +115,11 @@ const userVisibilyCallback: UserVisibilyCallback = ({ isVisible }) => {
     timeout: 1000,
   }
 
-  const userVisibilityInstance = new UserVisibility(userVisibilyCallback, userVisibilyOptions)
+  const userVisibilityInstance = ref<UserVisibility>()
+
+  onMounted(() => {
+    userVisibilityInstance.value = new UserVisibility(userVisibilyCallback, userVisibilyOptions)
+  })
 </script>
 
 ## Options

diff --git a/packages/lib/package/components/MazTransitionExpand.vue b/packages/lib/package/components/MazTransitionExpand.vue
@@ -20,6 +20,7 @@
     AFTER_ENTERING = 'entering',
     LEAVING = 'entering',
   }
+
   const state = ref<States>(States.NONE)
 
   const enter = (element: HTMLElement) => {
@@ -57,13 +58,15 @@
       element.style.height = height
     })
   }
+
   const afterEnter = (element: HTMLElement) => {
     if (state.value !== States.NONE) {
       return
     }
 
     element.style.height = 'auto'
   }
+
   const leave = (element: HTMLElement) => {
     if (state.value !== States.NONE) {
       return

diff --git a/packages/lib/package/helpers/idle-timeout/idle-timeout-handler.ts b/packages/lib/package/helpers/idle-timeout/idle-timeout-handler.ts
@@ -143,7 +143,7 @@ export class IdleTimeout {
 
       this.resetTimeout()
 
-      this.callback({ isIdle: this.isIdle })
+      this.callback({ isIdle: this.isIdle, eventType: event.type })
     } catch (error) {
       throw new Error(`[IdleTimeout](handleEvent) ${error}`)
     }

diff --git a/packages/lib/tests/unit/specs/helpers/idle-timeout.spec.ts b/packages/lib/tests/unit/specs/helpers/idle-timeout.spec.ts
@@ -44,7 +44,9 @@ describe('@/plugins/idle-timeout/idle-timeout-handler.ts', () => {
       it('Then user is new not idle callback called and idle equal "false"', async () => {
         await sleep(DEFAULT_TIMEOUT)
         expect(instance?.idle).toBeTruthy()
-        expect(callback).toHaveBeenCalledWith({ isIdle: true })
+        expect(callback).toHaveBeenCalledWith({
+          isIdle: true,
+        })
 
         /* eslint-disable */
         // @ts-ignore
@@ -57,7 +59,10 @@ describe('@/plugins/idle-timeout/idle-timeout-handler.ts', () => {
         /* eslint-enable */
 
         // expect(instance?.idle).toBeFalsy()
-        expect(callback).toHaveBeenCalledWith({ isIdle: false })
+        expect(callback).toHaveBeenCalledWith({
+          isIdle: false,
+          eventType: 'mousemove',
+        })
       })
 
       it('Then idle is "true" and callback called after time', async () => {