@maz-ui/mcp 4.0.0-beta.26

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

@@ -0,0 +1,231 @@
+---
+title: MazTabs
+description: MazTabs is a standalone component to display content in tabs with animations
+---
+
+# {{ $frontmatter.title }}
+
+{{ $frontmatter.description }}
+
+## Basic usage
+
+<MazTabs>
+  <MazTabsBar :items="tabs" />
+
+  <MazTabsContent>
+    <MazTabsContentItem :tab="1" class="maz-py-4">
+      Tab 1
+    </MazTabsContentItem>
+    <MazTabsContentItem :tab="2" class="maz-py-4">
+      Tab 2
+    </MazTabsContentItem>
+    <MazTabsContentItem :tab="3" class="maz-py-4">
+      Tab 3
+    </MazTabsContentItem>
+  </MazTabsContent>
+</MazTabs>
+
+```vue
+<script lang="ts" setup>
+import { MazTabs, MazTabsBar, type MazTabsBarItem, MazTabsContent, MazTabsContentItem } from 'maz-ui/components'
+
+const tabs: MazTabsBarItem[] = [
+  { label: 'First Tab', disabled: false },
+  { label: 'Second Tab', disabled: false, badge: { color: 'destructive', content: 1, roundedSize: 'full' } },
+  { label: 'Third Tab', disabled: true },
+]
+</script>
+
+<template>
+  <MazTabs>
+    <MazTabsBar :items="tabs" />
+
+    <MazTabsContent>
+      <MazTabsContentItem :tab="1" class="maz-py-4">
+        Tab 1
+      </MazTabsContentItem>
+      <MazTabsContentItem :tab="2" class="maz-py-4">
+        Tab 2
+      </MazTabsContentItem>
+      <MazTabsContentItem :tab="3" class="maz-py-4">
+        Tab 3
+      </MazTabsContentItem>
+    </MazTabsContent>
+  </MazTabs>
+</template>
+```
+
+## With model-value
+
+<MazTabs v-model="currentTab">
+  <MazTabsBar :items="tabs" />
+
+  <MazTabsContent>
+    <MazTabsContentItem :tab="1" class="maz-py-4">
+      Tab 1
+    </MazTabsContentItem>
+    <MazTabsContentItem :tab="2" class="maz-py-4">
+      Tab 2
+    </MazTabsContentItem>
+    <MazTabsContentItem :tab="3" class="maz-py-4">
+      Tab 3
+    </MazTabsContentItem>
+  </MazTabsContent>
+</MazTabs>
+
+<br />
+
+<MazBtn @click="currentTab = currentTab === 1 ? 2 : 1">
+Set model-value to {{currentTab === 1 ? 2 : 1}}
+</MazBtn>
+
+::: details View code
+
+```vue
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const currentTab = ref(2)
+
+const tabs: MazTabsBarItem[] = ['First Tab', 'Second Tab', 'Third Tab']
+</script>
+
+<template>
+  <MazTabs v-model="currentTab">
+    <MazTabsBar :items="tabs" />
+
+    <MazTabsContent>
+      <MazTabsContentItem :tab="1" class="maz-py-4">
+        Tab 1
+      </MazTabsContentItem>
+      <MazTabsContentItem :tab="2" class="maz-py-4">
+        Tab 2
+      </MazTabsContentItem>
+      <MazTabsContentItem :tab="3" class="maz-py-4">
+        Tab 3
+      </MazTabsContentItem>
+    </MazTabsContent>
+  </MazTabs>
+
+  <br>
+
+  <MazBtn @click="currentTab = currentTab === 1 ? 2 : 1">
+    Set model-value to {{ currentTab === 1 ? 2 : 1 }}
+  </MazBtn>
+</template>
+```
+
+:::
+
+## Persistent tab
+
+To keep the tab current when the page reloads, you can use the `persistent` props on the component `<MazTabsBar />`.
+
+The component will save the current table index in the URL of the page via a query parameter.
+
+You can choose the name of this query parameter with the props `query-param` `@default 'tab'`
+
+<MazTabs>
+  <MazTabsBar :items="tabs2" persistent />
+
+  <MazTabsContent>
+    <MazTabsContentItem :tab="1" class="maz-py-4">
+      Tab 1
+    </MazTabsContentItem>
+    <MazTabsContentItem :tab="2" class="maz-py-4">
+      Tab 2
+    </MazTabsContentItem>
+    <MazTabsContentItem :tab="3" class="maz-py-4">
+      Tab 3
+    </MazTabsContentItem>
+  </MazTabsContent>
+</MazTabs>
+
+## Custom tabs with slot
+
+<MazTabs>
+  <MazTabsBar :items="tabs2">
+    <template #item="{ item, index, active }">
+      {{ item.label }}
+      <MazBadge
+        size="0.6rem"
+        rounded-size="full"
+        :color="active ? 'primary' : 'transparent'"
+      >
+        {{ index}}
+      </MazBadge>
+    </template>
+  </MazTabsBar>
+</MazTabs>
+
+```html
+<MazTabs>
+  <MazTabsBar :items="tabs">
+    <template #item="{ item, index, active }">
+      {{ item.label }}
+
+      <MazBadge size="0.6rem" rounded-size="full" :color="active ? 'primary' : 'transparent'"> {{ index }} </MazBadge>
+    </template>
+  </MazTabsBar>
+</MazTabs>
+```
+
+<script lang="ts" setup>
+  import { ref } from 'vue'
+
+  const currentTab = ref(2)
+
+  const tabs: MazTabsBarItem[] = [
+    { label: 'First Tab', disabled: false },
+    { label: 'Second Tab', disabled: false, badge: { color: 'destructive', content: 1, roundedSize: 'full' } },
+    { label: 'Third Tab', disabled: true },
+  ]
+
+  const tabs2: MazTabsBarItem[] = ['First Tab', 'Second Tab', 'Third Tab', 'Fourth Tab', 'Fifth Tab', 'Sixth Tab', 'Seventh Tab', 'Eighth Tab', 'Ninth Tab', 'Tenth Tab']
+</script>
+
+## Types
+
+```ts
+type MazTabsBarItem
+  = | {
+    /**
+     * Label of the tab
+     */
+    label: string
+    /**
+     * Will disable the tab
+     * @default false
+     */
+    disabled?: boolean
+    /**
+     * Badge to display in the tab
+     * Inherit all props of MazBadge component
+     */
+    badge?: MazBadgeProps & {
+      /**
+       * Content of the badge
+       */
+      content: string | number | boolean
+    }
+  }
+  | string
+```
+
+## Props & Events emitted
+
+## MazTabs
+
+<!--@include: ./../../.vitepress/generated-docs/maz-tabs.doc.md-->
+
+## MazTabsBar
+
+<!--@include: ./../../.vitepress/generated-docs/maz-tabs-bar.doc.md-->
+
+## MazTabsContent
+
+<!--@include: ./../../.vitepress/generated-docs/maz-tabs-content.doc.md-->
+
+## MazTabsContentItem
+
+<!--@include: ./../../.vitepress/generated-docs/maz-tabs-content-item.doc.md-->

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

@@ -0,0 +1,218 @@
+---
+title: MazTextarea
+description: MazTextarea is a standalone component that replaces the standard html textarea input with a beautiful design system. Many options like colors, disabled, error, warning, success and error messages are available.
+---
+
+# {{ $frontmatter.title }}
+
+{{ $frontmatter.description }}
+
+<!--@include: ./../.vitepress/mixins/getting-started.md-->
+
+::: info
+This component has the "autogrow" feature, so when the user writes, the textarea expands automatically
+:::
+
+## Basic usage
+
+<ComponentDemo expanded>
+  <MazTextarea
+    v-model="value"
+    name="comment"
+    label="Enter your comment"
+  />
+
+<template #code>
+
+```vue
+<script lang="ts" setup>
+import { MazTextarea } from 'maz-ui/components'
+import { ref } from 'vue'
+
+const value = ref()
+</script>
+
+<template>
+  <MazTextarea
+    v-model="value"
+    name="comment"
+    label="Enter your comment"
+  />
+</template>
+```
+
+  </template>
+</ComponentDemo>
+
+## With label and append slots
+
+You can use the `label` and `append` slots to customize the label and the append element.
+
+<ComponentDemo>
+  <MazTextarea
+    v-model="value"
+    name="comment"
+  >
+    <template #label>
+      <MazIcon name="envelope" class="maz-text-xl" />
+      <span class="maz-ml-2">
+        The custom label
+      </span>
+    </template>
+    <template #append>
+      <MazBtn icon="paper-airplane" size="sm" @click="sendMessage" />
+    </template>
+  </MazTextarea>
+
+<template #code>
+
+```vue
+<script lang="ts" setup>
+import { useToast } from 'maz-ui/composables'
+import { ref } from 'vue'
+
+const value = ref<string>()
+
+const toast = useToast()
+
+function sendMessage() {
+  toast.success('Message sent', {
+    position: 'top-right',
+  })
+  value.value = ''
+}
+</script>
+
+<template>
+  <MazTextarea
+    v-model="value"
+    name="comment"
+  >
+    <template #label>
+      <MazIcon name="envelope" class="maz-text-xl" />
+      <span class="maz-ml-2">
+        The custom label
+      </span>
+    </template>
+    <template #append>
+      <MazBtn icon="paper-airplane" size="sm" @click="sendMessage" />
+    </template>
+  </MazTextarea>
+</template>
+```
+
+  </template>
+</ComponentDemo>
+
+## With hint and state
+
+You can use the `hint` attribute to display a hint message. This will replace the label.
+
+<ComponentDemo>
+  <div class="maz-flex maz-flex-col maz-gap-4">
+    <MazTextarea
+      v-model="value"
+      name="comment"
+      label="This is a label"
+      hint="This is a hint message"
+    />
+    <MazTextarea
+      v-model="value"
+      name="comment"
+      label="This is a label"
+      hint="This is a hint message"
+      error
+    />
+    <MazTextarea
+      v-model="value"
+      name="comment"
+      label="This is a label"
+      hint="This is a hint message"
+      success
+    />
+    <MazTextarea
+      v-model="value"
+      name="comment"
+      label="This is a label"
+      hint="This is a hint message"
+      warning
+    />
+  </div>
+
+<template #code>
+
+```vue
+<template>
+  <MazTextarea
+    v-model="value"
+    name="comment"
+    label="This is a label"
+    hint="This is a hint message"
+  />
+  <MazTextarea
+    v-model="value"
+    name="comment"
+    label="This is a label"
+    hint="This is a hint message"
+    error
+  />
+  <MazTextarea
+    v-model="value"
+    name="comment"
+    label="This is a label"
+    hint="This is a hint message"
+    success
+  />
+  <MazTextarea
+    v-model="value"
+    name="comment"
+    label="This is a label"
+    hint="This is a hint message"
+    warning
+  />
+</template>
+```
+
+  </template>
+</ComponentDemo>
+
+## Disabled
+
+<ComponentDemo>
+  <MazTextarea
+    v-model="value"
+    name="comment"
+    label="This is a label"
+    disabled
+  />
+
+<template #code>
+
+```html
+<MazTextarea v-model="value" name="comment" label="This is a label" disabled />
+```
+
+  </template>
+</ComponentDemo>
+
+<!--@include: ./../../.vitepress/generated-docs/maz-textarea.doc.md-->
+
+<script lang="ts" setup>
+  import { ref } from 'vue'
+  import { useToast } from 'maz-ui/src/composables/useToast'
+
+  const value = ref()
+
+  const toast = useToast()
+
+  function sendMessage() {
+    toast.success('Message sent', {
+      position: 'top-right',
+    })
+    value.value = ''
+  }
+</script>
+
+```
+
+```

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

@@ -0,0 +1,34 @@
+---
+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'
+
+const aos = useAos()
+
+onMounted(() => {
+  aos.runAnimations()
+})
+</script>
+
+<template>
+  <img data-maz-aos="scale-in">
+</template>
+```

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

@@ -0,0 +1,35 @@
+---
+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

@@ -0,0 +1,88 @@
+---
+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/src/composables/index'
+
+  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>