@maz-ui/mcp 5.0.1-beta.0 → 5.1.0-beta.0

package/docs/src/components/maz-timeline.md

@@ -1,478 +0,0 @@
----
-title: MazTimeline
-description: MazTimeline is a step/progress timeline component for Vue 3 with support for horizontal, vertical, and responsive layouts, customizable colors, sizes, step states, and scoped slots
----
-
-# {{ $frontmatter.title }}
-
-{{ $frontmatter.description }}
-
-<!--@include: ./../../.vitepress/mixins/getting-started.md-->
-
----
-
-Control the current step:
-
-<MazRadioButtons
-  :model-value="currentStep"
-  size="sm"
-  :options="[
-    { label: 'None', value: -1 },
-    ...steps.map((step, index) => ({ label: index, value: index })),
-    { label: 'All Completed', value: 99 },
-  ]"
-  @update:model-value="currentStep = $event"
-/>
-
-## Basic usage
-
-<ComponentDemo>
-  <MazTimeline v-model="currentStep" :steps="steps" />
-
-  <template #code>
-
-```vue
-<template>
-  <MazTimeline v-model="currentStep" :steps="steps" />
-</template>
-
-<script lang="ts" setup>
-  import { ref } from 'vue'
-  import MazTimeline from 'maz-ui/components/MazTimeline'
-
-  const currentStep = ref(1)
-  const steps = [
-    { title: 'Account', subtitle: 'Create your account' },
-    { title: 'Profile', subtitle: 'Set up your profile' },
-    { title: 'Settings', subtitle: 'Configure preferences' },
-    { title: 'Complete', subtitle: 'All done!' },
-  ]
-</script>
-```
-
-  </template>
-</ComponentDemo>
-
-## Directions
-
-### Horizontal
-
-<ComponentDemo>
-  <MazTimeline v-model="currentStep" :steps="steps" direction="horizontal" />
-
-  <template #code>
-
-```vue
-<template>
-  <MazTimeline v-model="currentStep" :steps="steps" direction="horizontal" />
-</template>
-```
-
-  </template>
-</ComponentDemo>
-
-### Vertical
-
-<ComponentDemo>
-  <MazTimeline v-model="currentStep" :steps="steps" direction="vertical" />
-
-  <template #code>
-
-```vue
-<template>
-  <MazTimeline v-model="currentStep" :steps="steps" direction="vertical" />
-</template>
-```
-
-  </template>
-</ComponentDemo>
-
-### Auto (responsive)
-
-The default direction is `'auto'`, which switches from horizontal to vertical based on the `breakpoint` prop (default: `'768px'`).
-
-<ComponentDemo>
-  <MazTimeline v-model="currentStep" :steps="steps" direction="auto" breakpoint="768px" />
-
-  <template #code>
-
-```vue
-<template>
-  <MazTimeline
-    v-model="currentStep"
-    :steps="steps"
-    direction="auto"
-    breakpoint="768px"
-  />
-</template>
-```
-
-  </template>
-</ComponentDemo>
-
-## Colors
-
-Use the `color` prop to change the theme color.
-
-<ComponentDemo>
-  <div class="maz:flex maz:flex-col maz:gap-6">
-    <MazTimeline v-for="color in colors" :key="color" :model-value="1" :steps="colorSteps" :color="color" direction="horizontal" />
-  </div>
-
-  <template #code>
-
-```vue
-<template>
-  <MazTimeline :steps="steps" color="primary" />
-  <MazTimeline :steps="steps" color="secondary" />
-  <MazTimeline :steps="steps" color="info" />
-  <MazTimeline :steps="steps" color="success" />
-  <MazTimeline :steps="steps" color="warning" />
-  <MazTimeline :steps="steps" color="destructive" />
-</template>
-```
-
-  </template>
-</ComponentDemo>
-
-## Sizes
-
-Use the `size` prop to change the indicator size.
-
-<ComponentDemo>
-  <div class="maz:flex maz:flex-col maz:gap-6">
-    <MazTimeline v-for="size in sizes" :key="size" :model-value="1" :steps="colorSteps" :size="size" direction="horizontal" />
-  </div>
-
-  <template #code>
-
-```vue
-<template>
-  <MazTimeline :steps="steps" size="mini" />
-  <MazTimeline :steps="steps" size="xs" />
-  <MazTimeline :steps="steps" size="sm" />
-  <MazTimeline :steps="steps" size="md" />
-  <MazTimeline :steps="steps" size="lg" />
-  <MazTimeline :steps="steps" size="xl" />
-</template>
-```
-
-  </template>
-</ComponentDemo>
-
-## Step states
-
-Each step can have a manual `state` property: `'completed'`, `'active'`, `'error'`, `'warning'`, or `'pending'`.
-
-<ComponentDemo>
-  <MazTimeline :steps="stateSteps" direction="horizontal" />
-
-  <template #code>
-
-```vue
-<template>
-  <MazTimeline :steps="stateSteps" direction="horizontal" />
-</template>
-
-<script lang="ts" setup>
-  const stateSteps = [
-    { title: 'Completed', subtitle: 'Step finished', state: 'completed' },
-    { title: 'Active', subtitle: 'In progress', state: 'active' },
-    { title: 'Error', subtitle: 'Something went wrong', state: 'error' },
-    { title: 'Warning', subtitle: 'Needs attention', state: 'warning' },
-    { title: 'Pending', subtitle: 'Not started', state: 'pending' },
-  ]
-</script>
-```
-
-  </template>
-</ComponentDemo>
-
-## Clickable
-
-Enable `clickable` to allow users to navigate between steps by clicking on them. The `click-step` event is emitted with the step index.
-
-<ComponentDemo>
-  <MazTimeline v-model="clickableStep" :steps="steps" clickable direction="horizontal" />
-
-  <template #code>
-
-```vue
-<template>
-  <MazTimeline v-model="clickableStep" :steps="steps" clickable />
-</template>
-
-<script lang="ts" setup>
-  import { ref } from 'vue'
-
-  const clickableStep = ref(0)
-</script>
-```
-
-  </template>
-</ComponentDemo>
-
-## Disabled steps
-
-Individual steps can be disabled by setting `disabled: true` on the step object.
-
-<ComponentDemo>
-  <MazTimeline v-model="currentStep" :steps="disabledSteps" clickable direction="horizontal" />
-
-  <template #code>
-
-```vue
-<template>
-  <MazTimeline v-model="currentStep" :steps="disabledSteps" clickable />
-</template>
-
-<script lang="ts" setup>
-  const disabledSteps = [
-    { title: 'Account', subtitle: 'Create your account' },
-    { title: 'Profile', subtitle: 'Set up your profile' },
-    { title: 'Settings', subtitle: 'Locked', disabled: true },
-    { title: 'Complete', subtitle: 'All done!' },
-  ]
-</script>
-```
-
-  </template>
-</ComponentDemo>
-
-## Without step numbers
-
-Hide the step numbers inside indicators with `:show-step-numbers="false"`.
-
-<ComponentDemo>
-  <MazTimeline v-model="currentStep" :steps="steps" :show-step-numbers="false" direction="horizontal" />
-
-  <template #code>
-
-```vue
-<template>
-  <MazTimeline
-    v-model="currentStep"
-    :steps="steps"
-    :show-step-numbers="false"
-  />
-</template>
-```
-
-  </template>
-</ComponentDemo>
-
-## Without auto-validate
-
-By default, completed steps show a checkmark. Disable this with `:auto-validate-steps="false"`.
-
-<ComponentDemo>
-  <MazTimeline :model-value="2" :steps="steps" :auto-validate-steps="false" direction="horizontal" />
-
-  <template #code>
-
-```vue
-<template>
-  <MazTimeline
-    :model-value="2"
-    :steps="steps"
-    :auto-validate-steps="false"
-  />
-</template>
-```
-
-  </template>
-</ComponentDemo>
-
-## Rounded sizes
-
-Customize the indicator border radius with the `rounded-size` prop.
-
-<ComponentDemo>
-  <div class="maz:flex maz:flex-col maz:gap-6">
-    <MazTimeline v-for="rounded in roundedSizes" :key="rounded" :model-value="1" :steps="colorSteps" :rounded-size="rounded" direction="horizontal" />
-  </div>
-
-  <template #code>
-
-```vue
-<template>
-  <MazTimeline :steps="steps" rounded-size="full" />
-  <MazTimeline :steps="steps" rounded-size="lg" />
-  <MazTimeline :steps="steps" rounded-size="md" />
-  <MazTimeline :steps="steps" rounded-size="sm" />
-  <MazTimeline :steps="steps" rounded-size="none" />
-</template>
-```
-
-  </template>
-</ComponentDemo>
-
-## Custom Icons
-
-<ComponentDemo>
-  <MazTimeline :model-value="0" :steps="iconsSteps" direction="horizontal" size="lg" />
-
-  <template #code>
-
-```vue
-<template>
-  <MazTimeline
-    v-model="currentStep"
-    :steps="steps"
-    size="lg"
-  />
-</template>
-
-<script lang="ts" setup>
-  import { MazCommandLine } from '@maz-ui/icons/MazCommandLine'
-  import { MazClipboardDocumentList } from '@maz-ui/icons/MazClipboardDocumentList'
-  import { MazClipboardDocumentCheck } from '@maz-ui/icons/MazClipboardDocumentCheck'
-  import { MazComputerDesktop } from '@maz-ui/icons/MazComputerDesktop'
-
-  const iconsSteps = [
-    { title: 'PO', subtitle: 'Writing PRD', icon: MazClipboardDocumentList },
-    { title: 'Dev', subtitle: 'Building Code', icon: MazCommandLine },
-    { title: 'Tech Lead', subtitle: 'Review Code', icon: MazComputerDesktop },
-    { title: 'QA', subtitle: 'Testing', icon: MazClipboardDocumentCheck },
-  ]
-</script>
-```
-
-  </template>
-</ComponentDemo>
-
-## Custom slots
-
-MazTimeline provides scoped slots for full customization.
-
-### Indicator slot
-
-<ComponentDemo>
-  <MazTimeline v-model="currentStep" :steps="steps" direction="horizontal">
-    <template #indicator="{ step, index, state }">
-      <span style="font-size: 1.2em">{{ index + 1 }}.</span>
-    </template>
-  </MazTimeline>
-
-  <template #code>
-
-```vue
-<template>
-  <MazTimeline v-model="currentStep" :steps="steps">
-    <template #indicator="{ step, index, state }">
-      <span style="font-size: 1.2em">{{ index + 1 }}.</span>
-    </template>
-  </MazTimeline>
-</template>
-```
-
-  </template>
-</ComponentDemo>
-
-### Content slot
-
-<ComponentDemo>
-  <MazTimeline v-model="currentStep" :steps="steps" direction="horizontal">
-    <template #content="{ step, index, state }">
-      <div class="maz:text-center">
-        <strong>{{ step.title }}</strong>
-        <p class="maz:text-muted maz:text-sm maz:m-0">Step {{ index + 1 }} - {{ state }}</p>
-      </div>
-    </template>
-  </MazTimeline>
-
-  <template #code>
-
-```vue
-<template>
-  <MazTimeline v-model="currentStep" :steps="steps">
-    <template #content="{ step, index, state }">
-      <div class="maz:text-center">
-        <strong>{{ step.title }}</strong>
-        <p class="maz:text-muted maz:text-sm maz:m-0">
-          Step {{ index + 1 }} - {{ state }}
-        </p>
-      </div>
-    </template>
-  </MazTimeline>
-</template>
-```
-
-  </template>
-</ComponentDemo>
-
-### Connector slot
-
-<ComponentDemo>
-  <MazTimeline v-model="currentStep" :steps="steps" direction="horizontal">
-    <template #connector="{ index, state }">
-      <div class="maz:text-center maz:text-xs maz:text-muted">---</div>
-    </template>
-  </MazTimeline>
-
-  <template #code>
-
-```vue
-<template>
-  <MazTimeline v-model="currentStep" :steps="steps">
-    <template #connector="{ index, state }">
-      <div class="maz:text-center maz:text-xs maz:text-muted">---</div>
-    </template>
-  </MazTimeline>
-</template>
-```
-
-  </template>
-</ComponentDemo>
-
-<script lang="ts" setup>
-  import { ref } from 'vue'
-  import { MazComputerDesktop } from '@maz-ui/icons/MazComputerDesktop'
-  import { MazCommandLine } from '@maz-ui/icons/MazCommandLine'
-  import { MazClipboardDocumentList } from '@maz-ui/icons/MazClipboardDocumentList'
-  import { MazClipboardDocumentCheck } from '@maz-ui/icons/MazClipboardDocumentCheck'
-
-  const currentStep = ref(1)
-  const clickableStep = ref(0)
-
-  const steps = [
-    { title: 'Account', subtitle: 'Create your account' },
-    { title: 'Profile', subtitle: 'Set up your profile' },
-    { title: 'Settings', subtitle: 'Configure preferences' },
-    { title: 'Complete', subtitle: 'All done!' },
-  ]
-
-  const colorSteps = [
-    { title: 'Step 1' },
-    { title: 'Step 2' },
-    { title: 'Step 3' },
-  ]
-
-  const stateSteps = [
-    { title: 'Completed', subtitle: 'Step finished', state: 'completed' },
-    { title: 'Active', subtitle: 'In progress', state: 'active' },
-    { title: 'Error', subtitle: 'Something went wrong', state: 'error' },
-    { title: 'Warning', subtitle: 'Needs attention', state: 'warning' },
-    { title: 'Pending', subtitle: 'Not started', state: 'pending' },
-  ]
-
-  const disabledSteps = [
-    { title: 'Account', subtitle: 'Create your account' },
-    { title: 'Profile', subtitle: 'Set up your profile' },
-    { title: 'Settings', subtitle: 'Locked', disabled: true },
-    { title: 'Complete', subtitle: 'All done!' },
-  ]
-
-  const iconsSteps = [
-    { title: 'PO', subtitle: 'Writing PRD', icon: MazClipboardDocumentList },
-    { title: 'Dev', subtitle: 'Building Code', icon: MazCommandLine },
-    { title: 'Tech Lead', subtitle: 'Review Code', icon: MazComputerDesktop },
-    { title: 'QA', subtitle: 'Testing', icon: MazClipboardDocumentCheck },
-  ]
-
-  const colors = ['primary', 'secondary', 'info', 'success', 'warning', 'destructive']
-  const sizes = ['mini', 'xs', 'sm', 'md', 'lg', 'xl']
-  const roundedSizes = ['full', 'lg', 'md', 'sm', 'none']
-</script>
-
-<!--@include: ./../../.vitepress/generated-docs/maz-timeline.doc.md-->

package/docs/src/composables/use-aos.md

@@ -1,34 +0,0 @@
----
-title: useAos
-description: Vue composable for handling aos plugin in your components
----
-
-# {{ $frontmatter.title }}
-
-{{ $frontmatter.description }}
-
-::: warning
-You must install the [aos plugin](./../plugins/aos.md#install) before you start using it
-:::
-
-::: tip
-More info about the [aos plugin](./../plugins/aos.md) can be found in its documentation
-:::
-
-## Usage
-
-```vue
-<script lang="ts" setup>
-import { useAos } from 'maz-ui/composables'
-
-const aos = useAos()
-
-onMounted(() => {
-  aos.runAnimations()
-})
-</script>
-
-<template>
-  <img data-maz-aos="scale-in">
-</template>
-```

package/docs/src/composables/use-breakpoints.md

@@ -1,35 +0,0 @@
----
-title: useWindowSize
-description: This composable extends the functionality of the useWindowSize composable to manage responsive breakpoints
----
-
-# {{ $frontmatter.title }}
-
-{{ $frontmatter.description }}
-
-## Basic usage
-
-```ts
-const breakpoints = {
-  'sm': '640px',
-  'md': '768px',
-  'lg': '1024px',
-  'xl': '1280px',
-  '2xl': '1536px',
-}
-
-const {
-  isLargeScreen,
-  isMediumScreen,
-  isSmallScreen,
-} = useBreakpoints({
-  breakpoints,
-  initialWidth: 0,
-  mediumBreakPoint: 'md',
-  largeBreakPoint: 'lg',
-})
-```
-
-::: warning
-More documentation to come
-:::

package/docs/src/composables/use-dialog.md

@@ -1,88 +0,0 @@
----
-title: useDialog
-description: Vue composable for handling dialog plugin in your components
----
-
-# {{ $frontmatter.title }}
-
-{{ $frontmatter.description }}
-
-::: warning
-You must install [dialog plugin](./../plugins/dialog.md#install) before use it
-:::
-
-::: tip
-More info about [dialog plugin](./../plugins/dialog.md) in its documentation
-:::
-
-## Usage
-
-<ComponentDemo>
-  <MazBtn
-    @click="openDialog"
-  >
-    Open Dialog
-  </MazBtn>
-
-<template #code>
-
-```vue
-<script lang="ts" setup>
-import { useDialog, useToast } from 'maz-ui/composables'
-
-const dialog = useDialog()
-
-const toast = useToast()
-
-function openDialog() {
-  dialog.open({
-    title: 'Dialog title',
-    message: 'Dialog message',
-    onAccept: (response) => {
-      toast.success(`Dialog accepted`, {
-        position: 'bottom',
-      })
-    },
-    onReject: (response) => {
-      toast.error(`Dialog rejected`, {
-        position: 'bottom',
-      })
-    },
-  })
-}
-</script>
-
-<template>
-  <MazBtn @click="openDialog">
-    Open Dialog
-  </MazBtn>
-</template>
-```
-
-  </template>
-
-</ComponentDemo>
-
-<script lang="ts" setup>
-  import { useDialog, useToast } from 'maz-ui/composables'
-
-  const dialog = useDialog()
-  const toast = useToast()
-
-  function openDialog() {
-    dialog.open({
-      title: 'Dialog title',
-      message: 'Dialog message',
-      onAccept: (response) => {
-        toast.success(`Dialog accepted`, {
-          position: 'bottom',
-        })
-      },
-      onReject: (response) => {
-        toast.error(`Dialog rejected`, {
-          position: 'bottom',
-        })
-      },
-    })
-  }
-</script>

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

@@ -1,63 +0,0 @@
----
-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/composables/useStringMatching'
-
-  const string1 = ref<string>('maz-ui')
-  const string2 = ref<string>('méz-ui')
-
-  const { score, isMatching } = useStringMatching(string1, string2, 0.75)
-</script>