@maz-ui/mcp 4.0.0-beta.26

package/docs/src/composables/use-idle-timeout.md

@@ -0,0 +1,256 @@
+---
+title: useIdleTimeout
+description: A Vue 3 composable that provides an easy way to track user inactivity on your website and execute a callback function when the user becomes idle.
+---
+
+# {{ $frontmatter.title }}
+
+{{ $frontmatter.description }}
+
+::: info
+A plugin to know the amount of time a user has spent on your website
+:::
+
+## Demo
+
+<ComponentDemo>
+  <div class="flex items-start gap-05 items-center flex-wrap">
+    <MazBtn @click="idleTimeout.start()" color="info">
+      Start
+    </MazBtn>
+    <MazBtn @click="idleTimeout.pause()" color="warning">
+      Pause
+    </MazBtn>
+    <MazBtn @click="idleTimeout.resume()">
+      Resume
+    </MazBtn>
+    <MazBtn @click="idleTimeout.reset()" color="secondary">
+      Reset
+    </MazBtn>
+    <MazBtn @click="idleTimeout.destroy()" color="destructive">
+      Destroy
+    </MazBtn>
+  </div>
+
+  <br />
+
+  <MazCard block>
+    <div style="display: flex;">
+      <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>
+
+  <br />
+  <br />
+
+  <p class="maz-text-warning">Wait 5 seconds without any actions to see the dialog popup</p>
+
+<template #code>
+
+```vue
+<script lang="ts" setup>
+import { MazBtn, MazCard } from 'maz-ui/components'
+
+import { useDialog, useIdleTimeout } from 'maz-ui/composables'
+
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+
+const dialog = useDialog()
+
+const event = ref({})
+
+const timeout = 5000
+
+const idleTimeout = useIdleTimeout({
+  callback,
+  options: {
+    timeout,
+    immediate: false,
+    once: false,
+  },
+})
+
+async function callback({ isIdle, eventType, instance }) {
+  console.log({ isIdle, eventType })
+  event.value = { isIdle, eventType }
+
+  if (isIdle) {
+    try {
+      instance.destroy()
+      await dialog.open({
+        title: 'Are you still here?',
+        message: `You have been inactive for ${timeout / 1000} secondes, do you want to continue?`,
+        cancelText: 'No',
+        confirmText: 'Yes',
+      }).promise
+      instance.start()
+    }
+    catch (e) {
+      // do something like logout the user
+    }
+  }
+}
+
+onMounted(() => {
+  // should be executed on client side
+  idleTimeout.start()
+})
+
+onBeforeUnmount(() => {
+  // Destroy the instance when the component is destroyed to avoid memory leaks
+  idleTimeout.destroy()
+})
+</script>
+
+<template>
+  <MazBtn color="info" @click="idle.start()">
+    Start
+  </MazBtn>
+  <MazBtn color="warning" @click="idle.pause()">
+    Pause
+  </MazBtn>
+  <MazBtn @click="idle.resume()">
+    Resume
+  </MazBtn>
+  <MazBtn color="secondary" @click="idle.reset()">
+    Reset
+  </MazBtn>
+  <MazBtn color="destructive" @click="idle.destroy()">
+    Destroy
+  </MazBtn>
+
+  <MazCard block>
+    <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>
+```
+
+  </template>
+</ComponentDemo>
+
+<script lang="ts" setup>
+  import { onMounted, ref, onBeforeUnmount } from 'vue'
+
+  import { useIdleTimeout } from 'maz-ui/src/composables/useIdleTimeout'
+  import { useDialog } from 'maz-ui/src/composables/useDialog'
+
+  const dialog = useDialog()
+
+  const event = ref({})
+
+  const timeout = 5000
+
+  const idleTimeout = useIdleTimeout({
+    callback,
+    options: {
+      timeout,
+      immediate: false,
+      once: false,
+    },
+  })
+
+  async function callback({ isIdle, eventType, instance }) {
+    console.log({ isIdle, eventType })
+    event.value = { isIdle, eventType }
+
+    if (isIdle) {
+      try {
+        instance.destroy()
+        await dialog.open({
+          title: 'Are you still here?',
+          message: `You have been inactive for ${timeout / 1000} secondes, do you want to continue?`,
+          data: {
+            cancelText: 'No',
+            confirmText: 'Yes',
+          }
+        }).promise
+        instance.start()
+      } catch (e) {
+        instance.destroy()
+      }
+    }
+  }
+
+  onMounted(() => {
+    // should be executed on client
+    idleTimeout.start()
+  })
+
+  onBeforeUnmount(() => {
+    idleTimeout.destroy()
+  })
+</script>
+
+## Callback
+
+```ts
+type IdleTimeoutCallback = (payload: {
+  isIdle: boolean
+  eventType?: string
+}) => void
+```
+
+## Options
+
+```ts
+interface IdleTimeoutStrictOption {
+  /** @default document.body */
+  element?: HTMLElement | Document
+  /** @default 60 * 1000 * 5 --> 5 minutes */
+  timeout?: number
+  /** @default false */
+  once?: boolean
+  /** @default true */
+  immediate?: boolean
+}
+```
+
+## Actions
+
+### Start
+
+Start tracking user - needed for SSR when `immediate` option is set to false (execute it on client side)
+
+```ts
+idleTimeout.start()
+```
+
+### Pause
+
+Will pause the timeout and events, can't be executed when the timeout has expired
+
+```ts
+idleTimeout.pause()
+```
+
+### Resume
+
+Resume the instance will reinit the timeout
+
+```ts
+idleTimeout.resume()
+```
+
+### Reset
+
+Reset the timeout of the instance like a restart
+
+```ts
+idleTimeout.reset()
+```
+
+### Destroy
+
+Will destroy the instance and stop tracking
+
+```ts
+idleTimeout.destroy()
+```

package/docs/src/composables/use-reading-time.md

@@ -0,0 +1,168 @@
+---
+title: useReadingTime
+description: This composable allows you to calculate the reading time of a text
+---
+
+# {{ $frontmatter.title }}
+
+{{ $frontmatter.description }}
+
+## Basic usage
+
+Time to read this page: <strong>{{ duration }} minutes</strong>
+
+```vue
+<script lang="ts" setup>
+import { useReadingTime } from 'maz-ui/composables'
+
+const { duration } = useReadingTime({
+  content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lectus quam id leo in. Placerat vestibulum lectus mauris ultrices eros in cursus turpis. Et tortor consequat id porta nibh venenatis cras sed. Praesent tristique magna sit amet. Iaculis at erat pellentesque adipiscing commodo elit at. Interdum velit euismod in pellentesque massa placerat duis. Eget nunc scelerisque viverra mauris in aliquam. Nulla facilisi morbi tempus iaculis urna id volutpat lacus. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Egestas integer eget aliquet nibh praesent tristique magna sit amet. Volutpat blandit aliquam etiam erat velit scelerisque. Eget nullam non nisi est sit amet. Turpis egestas sed tempus urna et pharetra. Nisl rhoncus mattis rhoncus urna neque viverra justo. Rutrum tellus pellentesque eu tincidunt tortor aliquam. Non odio euismod lacinia at. Magna eget est lorem ipsum. Et ultrices neque ornare aenean euismod elementum nisi. Ullamcorper eget nulla facilisi etiam dignissim diam quis enim lobortis. Lobortis feugiat vivamus at augue eget arcu. Ut diam quam nulla porttitor massa id neque. Turpis in eu mi bibendum neque egestas. Vivamus at augue eget arcu dictum varius duis at. Nunc sed blandit libero volutpat. Convallis a cras semper auctor neque vitae tempus. Odio facilisis mauris sit amet massa vitae tortor condimentum. Condimentum id venenatis a condimentum. Tincidunt praesent semper feugiat nibh sed pulvinar. Dolor magna eget est lorem ipsum dolor. Ultricies mi eget mauris pharetra et ultrices neque ornare aenean. Sapien pellentesque habitant morbi tristique senectus et netus. Tortor vitae purus faucibus ornare suspendisse sed nisi. Est lorem ipsum dolor sit amet consectetur adipiscing elit pellentesque. Enim neque volutpat ac tincidunt vitae. Iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Scelerisque felis imperdiet proin fermentum leo vel orci porta non. Ut etiam sit amet nisl purus in mollis nunc sed. Sed velit dignissim sodales ut eu sem integer. Odio tempor orci dapibus ultrices in iaculis nunc. Id semper risus in hendrerit gravida. Aliquam faucibus purus in massa tempor nec. Mattis nunc sed blandit libero volutpat sed cras ornare arcu. Quisque id diam vel quam elementum pulvinar etiam non quam. Et egestas quis ipsum suspendisse ultrices gravida dictum. Velit aliquet sagittis id consectetur purus ut faucibus pulvinar elementum. In hac habitasse platea dictumst quisque. Amet nisl purus in mollis nunc sed id semper. Sollicitudin tempor id eu nisl nunc mi. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim. In iaculis nunc sed augue lacus viverra vitae.'
+})
+</script>
+
+<template>
+  <div>
+    Time to read this page: <strong>{{ duration }} minutes</strong>
+  </div>
+</template>
+```
+
+## With content selector
+
+::: warning
+This method is not SSR friendly (only on client side, with Nuxt use this composable in `onMounted(() => { ... })`) and not recommended because it is less performant than the previous one
+:::
+
+Time to read this page: <strong>{{ durationSelector }} minutes</strong>
+
+<MazCard collapsible class="maz-w-full" title="Content to read">
+  <div id="content-to-read" class="maz-px-4">
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lectus quam id leo in. Placerat vestibulum lectus mauris ultrices eros in cursus turpis. Et tortor consequat id porta nibh venenatis cras sed. Praesent tristique magna sit amet. Iaculis at erat pellentesque adipiscing commodo elit at. Interdum velit euismod in pellentesque massa placerat duis. Eget nunc scelerisque viverra mauris in aliquam. Nulla facilisi morbi tempus iaculis urna id volutpat lacus. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Egestas integer eget aliquet nibh praesent tristique magna sit amet. Volutpat blandit aliquam etiam erat velit scelerisque. Eget nullam non nisi est sit amet. Turpis egestas sed tempus urna et pharetra. Nisl rhoncus mattis rhoncus urna neque viverra justo. Rutrum tellus pellentesque eu tincidunt tortor aliquam. Non odio euismod lacinia at. Magna eget est lorem ipsum.
+    </p>
+    <p>
+      Et ultrices neque ornare aenean euismod elementum nisi. Ullamcorper eget nulla facilisi etiam dignissim diam quis enim lobortis. Lobortis feugiat vivamus at augue eget arcu. Ut diam quam nulla porttitor massa id neque. Turpis in eu mi bibendum neque egestas. Vivamus at augue eget arcu dictum varius duis at. Nunc sed blandit libero volutpat. Convallis a cras semper auctor neque vitae tempus. Odio facilisis mauris sit amet massa vitae tortor condimentum. Condimentum id venenatis a condimentum. Tincidunt praesent semper feugiat nibh sed pulvinar. Dolor magna eget est lorem ipsum dolor. Ultricies mi eget mauris pharetra et ultrices neque ornare aenean. Sapien pellentesque habitant morbi tristique senectus et netus. Tortor vitae purus faucibus ornare suspendisse sed nisi. Est lorem ipsum dolor sit amet consectetur adipiscing elit pellentesque. Enim neque volutpat ac tincidunt vitae.
+    </p>
+    <p>
+      Iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Scelerisque felis imperdiet proin fermentum leo vel orci porta non. Ut etiam sit amet nisl purus in mollis nunc sed. Sed velit dignissim sodales ut eu sem integer. Odio tempor orci dapibus ultrices in iaculis nunc. Id semper risus in hendrerit gravida. Aliquam faucibus purus in massa tempor nec. Mattis nunc sed blandit libero volutpat sed cras ornare arcu. Quisque id diam vel quam elementum pulvinar etiam non quam. Et egestas quis ipsum suspendisse ultrices gravida dictum. Velit aliquet sagittis id consectetur purus ut faucibus pulvinar elementum. In hac habitasse platea dictumst quisque. Amet nisl purus in mollis nunc sed id semper. Sollicitudin tempor id eu nisl nunc mi. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim. In iaculis nunc sed augue lacus viverra vitae.
+    </p>
+  </div>
+</MazCard>
+
+```vue
+<script lang="ts" setup>
+import { useReadingTime } from 'maz-ui/composables'
+
+const readingTime = ref<number>()
+
+const { duration } = useReadingTime({
+  contentSelector: '#content-to-read'
+})
+
+readingTime.value = duration
+
+onMounted(() => {
+  const { duration } = useReadingTime({
+    contentSelector: '#content-to-read'
+  })
+
+  readingTime.value = duration
+})
+</script>
+
+<template>
+  <div>
+    Time to read this page: <strong>{{ duration }} minutes</strong>
+  </div>
+
+  <MazCard collapsible class="maz-w-full" title="Content to read">
+    <div id="content-to-read" class="maz-px-4">
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lectus quam id leo in. Placerat vestibulum lectus mauris ultrices eros in cursus turpis. Et tortor consequat id porta nibh venenatis cras sed. Praesent tristique magna sit amet. Iaculis at erat pellentesque adipiscing commodo elit at. Interdum velit euismod in pellentesque massa placerat duis. Eget nunc scelerisque viverra mauris in aliquam. Nulla facilisi morbi tempus iaculis urna id volutpat lacus. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Egestas integer eget aliquet nibh praesent tristique magna sit amet. Volutpat blandit aliquam etiam erat velit scelerisque. Eget nullam non nisi est sit amet. Turpis egestas sed tempus urna et pharetra. Nisl rhoncus mattis rhoncus urna neque viverra justo. Rutrum tellus pellentesque eu tincidunt tortor aliquam. Non odio euismod lacinia at. Magna eget est lorem ipsum.
+      </p>
+      <p>
+        Et ultrices neque ornare aenean euismod elementum nisi. Ullamcorper eget nulla facilisi etiam dignissim diam quis enim lobortis. Lobortis feugiat vivamus at augue eget arcu. Ut diam quam nulla porttitor massa id neque. Turpis in eu mi bibendum neque egestas. Vivamus at augue eget arcu dictum varius duis at. Nunc sed blandit libero volutpat. Convallis a cras semper auctor neque vitae tempus. Odio facilisis mauris sit amet massa vitae tortor condimentum. Condimentum id venenatis a condimentum. Tincidunt praesent semper feugiat nibh sed pulvinar. Dolor magna eget est lorem ipsum dolor. Ultricies mi eget mauris pharetra et ultrices neque ornare aenean. Sapien pellentesque habitant morbi tristique senectus et netus. Tortor vitae purus faucibus ornare suspendisse sed nisi. Est lorem ipsum dolor sit amet consectetur adipiscing elit pellentesque. Enim neque volutpat ac tincidunt vitae.
+      </p>
+      <p>
+        Iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Scelerisque felis imperdiet proin fermentum leo vel orci porta non. Ut etiam sit amet nisl purus in mollis nunc sed. Sed velit dignissim sodales ut eu sem integer. Odio tempor orci dapibus ultrices in iaculis nunc. Id semper risus in hendrerit gravida. Aliquam faucibus purus in massa tempor nec. Mattis nunc sed blandit libero volutpat sed cras ornare arcu. Quisque id diam vel quam elementum pulvinar etiam non quam. Et egestas quis ipsum suspendisse ultrices gravida dictum. Velit aliquet sagittis id consectetur purus ut faucibus pulvinar elementum. In hac habitasse platea dictumst quisque. Amet nisl purus in mollis nunc sed id semper. Sollicitudin tempor id eu nisl nunc mi. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim. In iaculis nunc sed augue lacus viverra vitae.
+      </p>
+    </div>
+  </MazCard>
+</template>
+```
+
+## Velocity
+
+> The velocity is the number of words per minute. By default it is 150 words per minute.
+
+**Velocity**: {{ velocity ?? 150 }} words per minute
+
+<MazInputNumber v-model="velocity" placeholder="Velocity" />
+
+Time to read this page: <strong>{{ durationSelector }} minutes</strong>
+
+{{wordCount}}
+
+<script lang="ts" setup>
+  import { ref, onMounted } from 'vue'
+  import { useReadingTime } from 'maz-ui/src/composables/useReadingTime'
+
+  const velocity = ref()
+
+  const { duration } = useReadingTime({
+    content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lectus quam id leo in. Placerat vestibulum lectus mauris ultrices eros in cursus turpis. Et tortor consequat id porta nibh venenatis cras sed. Praesent tristique magna sit amet. Iaculis at erat pellentesque adipiscing commodo elit at. Interdum velit euismod in pellentesque massa placerat duis. Eget nunc scelerisque viverra mauris in aliquam. Nulla facilisi morbi tempus iaculis urna id volutpat lacus. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Egestas integer eget aliquet nibh praesent tristique magna sit amet. Volutpat blandit aliquam etiam erat velit scelerisque. Eget nullam non nisi est sit amet. Turpis egestas sed tempus urna et pharetra. Nisl rhoncus mattis rhoncus urna neque viverra justo. Rutrum tellus pellentesque eu tincidunt tortor aliquam. Non odio euismod lacinia at. Magna eget est lorem ipsum. Et ultrices neque ornare aenean euismod elementum nisi. Ullamcorper eget nulla facilisi etiam dignissim diam quis enim lobortis. Lobortis feugiat vivamus at augue eget arcu. Ut diam quam nulla porttitor massa id neque. Turpis in eu mi bibendum neque egestas. Vivamus at augue eget arcu dictum varius duis at. Nunc sed blandit libero volutpat. Convallis a cras semper auctor neque vitae tempus. Odio facilisis mauris sit amet massa vitae tortor condimentum. Condimentum id venenatis a condimentum. Tincidunt praesent semper feugiat nibh sed pulvinar. Dolor magna eget est lorem ipsum dolor. Ultricies mi eget mauris pharetra et ultrices neque ornare aenean. Sapien pellentesque habitant morbi tristique senectus et netus. Tortor vitae purus faucibus ornare suspendisse sed nisi. Est lorem ipsum dolor sit amet consectetur adipiscing elit pellentesque. Enim neque volutpat ac tincidunt vitae. Iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Scelerisque felis imperdiet proin fermentum leo vel orci porta non. Ut etiam sit amet nisl purus in mollis nunc sed. Sed velit dignissim sodales ut eu sem integer. Odio tempor orci dapibus ultrices in iaculis nunc. Id semper risus in hendrerit gravida. Aliquam faucibus purus in massa tempor nec. Mattis nunc sed blandit libero volutpat sed cras ornare arcu. Quisque id diam vel quam elementum pulvinar etiam non quam. Et egestas quis ipsum suspendisse ultrices gravida dictum. Velit aliquet sagittis id consectetur purus ut faucibus pulvinar elementum. In hac habitasse platea dictumst quisque. Amet nisl purus in mollis nunc sed id semper. Sollicitudin tempor id eu nisl nunc mi. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim. In iaculis nunc sed augue lacus viverra vitae.',
+    velocity,
+  })
+
+  const contentSelector = ref()
+
+  const { duration: durationSelector, wordCount } = useReadingTime({
+    contentSelector,
+    velocity,
+  })
+
+  onMounted(() => {
+    setTimeout(() => {
+      contentSelector.value = '#content-to-read'
+    }, 500)
+  })
+</script>
+
+## Types
+
+### Options
+
+```ts
+export interface ReadingTimeOptions {
+  /**
+   * Content to calculate the reading time
+   * @default undefined
+   */
+  content?: string | Ref<string>
+  /**
+   * Selector of the content to calculate the reading time
+   * @default undefined
+   */
+  contentSelector?: string | Ref<string>
+  /**
+   * Words per minute
+   * @default 150
+   */
+  velocity?: number
+}
+```
+
+### Returns
+
+```ts
+export interface ReadingTimeReturn {
+  /** Content to calculate the reading time */
+  content: ComputedRef<string | undefined | null>
+  /** Number of words in the content */
+  wordCount: ComputedRef<number>
+  /** Words per minute */
+  velocity: ComputedRef<number>
+  /** Reading time in minutes */
+  duration: ComputedRef<number>
+}
+```

package/docs/src/composables/use-string-matching.md

@@ -0,0 +1,63 @@
+---
+title: useStringMatching
+description: Efficient composable for string matching tasks, utilizing Levenshtein distance calculation. Simplify comparison operations with minimal setup. Enhance text similarity checks effortlessly.
+---
+
+# {{ $frontmatter.title }}
+
+{{ $frontmatter.description }}
+
+## Usage
+
+<ComponentDemo>
+  <div class="maz-flex maz-gap-4 maz-items-start maz-flex-wrap maz-mb-4">
+    <MazInput v-model="string1" label="Enter first string" />
+    <MazInput v-model="string2" label="Enter second string" />
+  </div>
+
+  <p class="!maz-mb-1">
+    <b>isMatching:</b> {{ isMatching }}
+  </p>
+  <p class="!maz-my-0">
+    <b>score:</b> {{ score }}
+  </p>
+
+<template #code>
+
+```vue
+<script lang="ts" setup>
+import { useStringMatching } from 'maz-ui/composables'
+import { ref } from 'vue'
+
+const string1 = ref<string>('maz-ui')
+const string2 = ref<string>('màéz-uiok')
+
+const { score, isMatching } = useStringMatching(string1, string2)
+</script>
+
+<template>
+  <MazInput v-model="string1" label="Enter first string" />
+  <MazInput v-model="string2" label="Enter second string" />
+
+  <p>
+    <b>isMatching:</b> {{ isMatching }}
+  </p>
+  <p>
+    <b>score:</b> {{ score }}
+  </p>
+</template>
+```
+
+  </template>
+
+</ComponentDemo>
+
+<script lang="ts" setup>
+  import { ref } from 'vue'
+  import { useStringMatching } from 'maz-ui/src/composables/useStringMatching'
+
+  const string1 = ref<string>('maz-ui')
+  const string2 = ref<string>('méz-ui')
+
+  const { score, isMatching } = useStringMatching(string1, string2, 0.75)
+</script>