feat(lib): add helpers about user activity

packages/docs/docs/.vuepress/config.ts

@@ -2,6 +2,7 @@ import { defineUserConfig, SiteData } from 'vuepress'
 import type { DefaultThemeOptions } from 'vuepress'
 import { path } from '@vuepress/utils'
 import { navbar, sidebar } from './configs'
+import { sitemap } from "vuepress-plugin-sitemap2"
 
 const getBaseUrl = (path: string): string => {
   const base = process.env.NODE_ENV === 'production' ? '/maz-ui-3' : ''
@@ -133,7 +134,10 @@ export default defineUserConfig<DefaultThemeOptions>({
         id: 'G-EM35TM23ZC',
       },
     ],
-    ['vuepress-plugin-sitemap2']
+    sitemap({
+      hostname: 'https://louismazel.github.io/maz-ui-3/',
+      changefreq: 'daily'
+    })
   ],
 
   alias: {

packages/docs/docs/.vuepress/configs/helpers.ts

@@ -2,5 +2,7 @@ export const helpers = {
   text: 'Helpers',
   children: [
     '/helpers/theme-handler.md',
+    '/helpers/idle-timeout.md',
+    '/helpers/user-visibility.md',
   ]
 }

packages/docs/docs/helpers/idle-timeout.md

@@ -0,0 +1,202 @@
+---
+description: Helper to see and manage the user activity
+---
+
+# idle-timeout
+
+Helper to see and manage the user activity
+
+## Demo
+
+<br />
+
+**options**: `IdleTimeoutOptions`
+
+```ts
+const options: IdleTimeoutOptions = {
+  element: document.body,
+  timeout: 3000,
+  immediate: true,
+  once: false,
+}
+```
+
+**callback**: `IdleTimeoutCallback`
+
+```ts
+const idleTimeoutCallback: IdleTimeoutCallback = ({ isIdle, eventType }) => {
+  console.log({ isIdle, eventType })
+
+  event.value = {
+    isIdle,
+    eventType,
+  }
+}
+```
+
+<br />
+
+<div class="flex items-start gap-05 items-center flex-wrap">
+  <MazBtn @click="idleTimeoutInstance.pause()" color="warning">
+    Pause
+  </MazBtn>
+  <MazBtn @click="idleTimeoutInstance.resume()">
+    Resume
+  </MazBtn>
+  <MazBtn @click="idleTimeoutInstance.reset()" color="secondary">
+    Reset
+  </MazBtn>
+  <MazBtn @click="idleTimeoutInstance.destroy()" color="danger">
+    Destroy
+  </MazBtn>
+</div>
+
+<br />
+
+<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>
+</MazCard>
+
+**Wait 3 seconds without any actions to see the idle change to true**
+
+## How to use it ?
+
+```vue
+<template>
+  <MazBtn @click="idleTimeoutInstance.pause()" color="warning">
+    Pause
+  </MazBtn>
+  <MazBtn @click="idleTimeoutInstance.resume()">
+    Resume
+  </MazBtn>
+  <MazBtn @click="idleTimeoutInstance.reset()" color="secondary">
+    Reset
+  </MazBtn>
+  <MazBtn @click="idleTimeoutInstance.destroy()" color="danger">
+    Destroy
+  </MazBtn>
+
+  <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>
+  </MazCard>
+</template>
+
+<script lang="ts" setup>
+  import { onMounted, ref } from 'vue'
+
+  import MazBtn from 'maz-ui/components/MazBtn'
+  import MazCard from 'maz-ui/components/MazCard'
+
+  import { IdleTimeout } from 'maz-ui/package/helpers'
+  // for typescript users
+  import type { IdleTimeoutOptions, IdleTimeoutCallback } from 'maz-ui'
+
+  const event = ref<{ isIdle: boolean, eventType?: string }>()
+
+  const idleTimeoutOptions: IdleTimeoutOptions = {
+    immediate: false,
+    element: document.body,
+    once: false,
+    timeout: 3000,
+  }
+
+  const idleTimeoutCallback: IdleTimeoutCallback = ({ isIdle, eventType }) => {
+    console.log({ isIdle, eventType })
+
+    event.value = {
+      isIdle,
+      eventType,
+    }
+  }
+
+  const idleTimeoutInstance = new IdleTimeout(idleTimeoutCallback, idleTimeoutOptions)
+</script>
+```
+
+<script lang="ts" setup>
+  import { onMounted, ref } from 'vue'
+
+  import MazBtn from 'maz-ui/components/MazBtn'
+  import MazCard from 'maz-ui/components/MazCard'
+
+  import { IdleTimeout } from 'maz-ui/package/helpers'
+  // 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 idleTimeoutCallback: IdleTimeoutCallback = ({ isIdle, eventType }) => {
+    console.log({ isIdle, eventType })
+
+    event.value = {
+      isIdle,
+      eventType,
+    }
+  }
+
+  const idleTimeoutInstance = new IdleTimeout(idleTimeoutCallback, idleTimeoutOptions)
+</script>
+
+## Options
+
+### Default Options
+
+```ts
+const defaultOptions: IdleTimeoutStrictOption = {
+  element: document.body,
+  timeout: 60 * 1000 * 5, // 5 minutes
+  once: false,
+  immediate: false,
+}
+```
+
+### Actions
+
+#### Pause
+
+Pause the instance
+
+```ts
+idleTimeoutInstance.pause()
+```
+
+#### Resume
+
+Resume the instance
+
+```ts
+idleTimeoutInstance.resume()
+```
+
+#### Reset
+
+Reset the timeout of the instance
+
+```ts
+idleTimeoutInstance.reset()
+```
+
+#### Destroy
+
+Will destroy the instance
+
+```ts
+idleTimeoutInstance.destroy()
+```

packages/docs/docs/helpers/user-visibility.md

@@ -0,0 +1,137 @@
+---
+description: Helper to see and mange the user page visibility
+---
+
+# user-visibility
+
+Helper to see and mange the user page visibility
+
+## Demo
+
+<br />
+
+**options**: `IdleTimeoutOptions`
+
+```ts
+const userVisibilyOptions: UserVisibilyOptions = {
+  immediate: true,
+  once: false,
+  timeout: 1000,
+}
+```
+
+**callback**: `IdleTimeoutCallback`
+
+```ts
+const userVisibilyCallback: UserVisibilyCallback = ({ isVisible }) => {
+  console.log('isVisible', isVisible)
+  event.value.push({ isVisible: isVisible })
+}
+```
+
+<br />
+
+<MazBtn @click="userVisibilityInstance.destroy()" color="danger">
+  Destroy
+</MazBtn>
+
+<br />
+<br />
+
+<MazCard overflow-hidden style="width: 100%;">
+  <div v-for="({isVisible}, i) in events" :key="i">
+    isVisible: {{isVisible}}
+  </div>
+</MazCard>
+
+**Switch tabs for a second to see events**
+
+## How to use it ?
+
+```vue
+<template>
+  <MazBtn @click="userVisibilityInstance.destroy()" color="danger">
+    Destroy
+  </MazBtn>
+
+  <MazCard overflow-hidden style="width: 100%;">
+    <div v-for="({isVisible}, i) in events" :key="i">
+      isVisible: {{isVisible}}
+    </div>
+  </MazCard>
+</template>
+
+<script lang="ts" setup>
+  import { onMounted, ref } from 'vue'
+
+  import MazBtn from 'maz-ui/components/MazBtn'
+  import MazCard from 'maz-ui/components/MazCard'
+
+  import { UserVisibility } from 'maz-ui/package/helpers'
+  // for typescript users
+  import type { UserVisibilyOptions, UserVisibilyCallback } from 'maz-ui'
+
+  const events = ref<{ isVisible: boolean }[]>([])
+
+  const userVisibilyCallback: UserVisibilyCallback = ({ isVisible }) => {
+    console.log('isVisible', isVisible)
+    events.value.push({ isVisible: isVisible })
+  }
+
+  const userVisibilyOptions: UserVisibilyOptions = {
+    immediate: false,
+    once: false,
+    timeout: 1000,
+  }
+
+  const userVisibilityInstance = new UserVisibility(userVisibilyCallback, userVisibilyOptions)
+</script>
+```
+
+<script lang="ts" setup>
+  import { onMounted, ref } from 'vue'
+
+  import MazBtn from 'maz-ui/components/MazBtn'
+  import MazCard from 'maz-ui/components/MazCard'
+
+  import { UserVisibility } from 'maz-ui/package/helpers'
+  // for typescript users
+  import type { UserVisibilyOptions, UserVisibilyCallback } from 'maz-ui'
+
+  const events = ref<{ isVisible: boolean }[]>([])
+
+  const userVisibilyCallback: UserVisibilyCallback = ({ isVisible }) => {
+    console.log('isVisible', isVisible)
+    events.value.push({ isVisible: isVisible })
+  }
+
+  const userVisibilyOptions: UserVisibilyOptions = {
+    immediate: true,
+    once: false,
+    timeout: 1000,
+  }
+
+  const userVisibilityInstance = new UserVisibility(userVisibilyCallback, userVisibilyOptions)
+</script>
+
+## Options
+
+### Default Options
+
+```ts
+const defaultOptions: UserVisibilyOptions = {
+  immediate: false,
+  timeout: 5000,
+  once: false,
+}
+```
+
+### Actions
+
+#### Destroy
+
+Will destroy the instance
+
+```ts
+userVisibilityInstance.destroy()
+```