feat(lib): add helpers about user activity (#238)

CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.0.0-next.21](https://github.com/LouisMazel/maz-ui/compare/v2.3.13...3.0.0-next.21) (2022-04-15)
+
+### Bug Fixes
+
+- **docs:** aos implementation ([#218](https://github.com/LouisMazel/maz-ui/issues/218)) ([3849e05](https://github.com/LouisMazel/maz-ui/commit/3849e0566973906ae1a557d6dfa230429b550618))
+- **docs:** aos installation on client side ([#217](https://github.com/LouisMazel/maz-ui/issues/217)) ([6790515](https://github.com/LouisMazel/maz-ui/commit/67905153973581418b4f807e531b1ee4f01b1331))
+- **lib:** maz-radio-buttons - hover color ([#239](https://github.com/LouisMazel/maz-ui/issues/239)) ([8a945ab](https://github.com/LouisMazel/maz-ui/commit/8a945abe271d13a929a0def2966f566f3be20b73))
+
+### Features
+
+- **lib:** add helpers about user activity ([#238](https://github.com/LouisMazel/maz-ui/issues/238)) ([86d6cb2](https://github.com/LouisMazel/maz-ui/commit/86d6cb2772a5f8fd9fab51ca39fb8c20544ef735))
+- **lib:** add maz-picker component ([#197](https://github.com/LouisMazel/maz-ui/issues/197)) ([877515e](https://github.com/LouisMazel/maz-ui/commit/877515e585d1aa9a3febd83e222c12346e7401b5))
+- **lib:** add wait plugin to manage loading state ([#214](https://github.com/LouisMazel/maz-ui/issues/214)) ([a6a1931](https://github.com/LouisMazel/maz-ui/commit/a6a1931ba7000c5e545cfc4808fe7205809629c4))
+- **lib:** adding maz-input-number ([#195](https://github.com/LouisMazel/maz-ui/issues/195)) ([dfb835d](https://github.com/LouisMazel/maz-ui/commit/dfb835d796682955b53dfb82455aefc763895c86))
+- **lib:** aos - adding anchor option ([#219](https://github.com/LouisMazel/maz-ui/issues/219)) ([b1c8b02](https://github.com/LouisMazel/maz-ui/commit/b1c8b028286d2154b86c5bb52fa7208d0c347d3e))
+- **lib:** export tailwind config ([#201](https://github.com/LouisMazel/maz-ui/issues/201)) ([94fddb9](https://github.com/LouisMazel/maz-ui/commit/94fddb9d35e91a6f649bcb18ae7105048d048584))
+- **lib:** MazInput - adding style color for autofill ([#208](https://github.com/LouisMazel/maz-ui/issues/208)) ([b3ae969](https://github.com/LouisMazel/maz-ui/commit/b3ae969584bda0e690179c1b6c9defdc1bbf0425))
+- **lib:** new component - maz-radio-buttons ([#232](https://github.com/LouisMazel/maz-ui/issues/232)) ([#233](https://github.com/LouisMazel/maz-ui/issues/233)) ([ece3d19](https://github.com/LouisMazel/maz-ui/commit/ece3d19bdf393cffc8e883c3b6362f21204bbfc8)), closes [#231](https://github.com/LouisMazel/maz-ui/issues/231)
+
 # [3.0.0-next.20](https://github.com/LouisMazel/maz-ui/compare/v2.3.13...3.0.0-next.20) (2022-04-15)
 
 ### Bug Fixes

lerna.json

@@ -1,7 +1,7 @@
 {
   "packages": ["packages/*"],
   "loglevel": "verbose",
-  "version": "3.0.0-next.20",
+  "version": "3.0.0-next.21",
   "npmClientArgs": ["--production=false", "--no-progress"],
   "yes": true,
   "granularPathspec": false,

packages/docs/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.0.0-next.21](https://github.com/LouisMazel/maz-ui/compare/v2.3.13...3.0.0-next.21) (2022-04-15)
+
+
+### Bug Fixes
+
+* **docs:** aos implementation ([#218](https://github.com/LouisMazel/maz-ui/issues/218)) ([3849e05](https://github.com/LouisMazel/maz-ui/commit/3849e0566973906ae1a557d6dfa230429b550618))
+* **docs:** aos installation on client side ([#217](https://github.com/LouisMazel/maz-ui/issues/217)) ([6790515](https://github.com/LouisMazel/maz-ui/commit/67905153973581418b4f807e531b1ee4f01b1331))
+* **lib:** maz-radio-buttons - hover color ([#239](https://github.com/LouisMazel/maz-ui/issues/239)) ([8a945ab](https://github.com/LouisMazel/maz-ui/commit/8a945abe271d13a929a0def2966f566f3be20b73))
+
+
+### Features
+
+* **lib:** add helpers about user activity ([#238](https://github.com/LouisMazel/maz-ui/issues/238)) ([86d6cb2](https://github.com/LouisMazel/maz-ui/commit/86d6cb2772a5f8fd9fab51ca39fb8c20544ef735))
+* **lib:** add maz-picker component ([#197](https://github.com/LouisMazel/maz-ui/issues/197)) ([877515e](https://github.com/LouisMazel/maz-ui/commit/877515e585d1aa9a3febd83e222c12346e7401b5))
+* **lib:** add wait plugin to manage loading state ([#214](https://github.com/LouisMazel/maz-ui/issues/214)) ([a6a1931](https://github.com/LouisMazel/maz-ui/commit/a6a1931ba7000c5e545cfc4808fe7205809629c4))
+* **lib:** adding maz-input-number ([#195](https://github.com/LouisMazel/maz-ui/issues/195)) ([dfb835d](https://github.com/LouisMazel/maz-ui/commit/dfb835d796682955b53dfb82455aefc763895c86))
+* **lib:** aos - adding anchor option ([#219](https://github.com/LouisMazel/maz-ui/issues/219)) ([b1c8b02](https://github.com/LouisMazel/maz-ui/commit/b1c8b028286d2154b86c5bb52fa7208d0c347d3e))
+* **lib:** export tailwind config ([#201](https://github.com/LouisMazel/maz-ui/issues/201)) ([94fddb9](https://github.com/LouisMazel/maz-ui/commit/94fddb9d35e91a6f649bcb18ae7105048d048584))
+* **lib:** new component - maz-radio-buttons ([#232](https://github.com/LouisMazel/maz-ui/issues/232)) ([#233](https://github.com/LouisMazel/maz-ui/issues/233)) ([ece3d19](https://github.com/LouisMazel/maz-ui/commit/ece3d19bdf393cffc8e883c3b6362f21204bbfc8)), closes [#231](https://github.com/LouisMazel/maz-ui/issues/231)
+
+
+
+
+
 # [3.0.0-next.20](https://github.com/LouisMazel/maz-ui/compare/v2.3.13...3.0.0-next.20) (2022-04-15)
 
 

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()
+```