@maz-ui/mcp 4.0.0-beta.26

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

@@ -0,0 +1,156 @@
+---
+title: MazLink
+description: MazLink is a standalone component to create links and buttons.
+---
+
+# {{ $frontmatter.title }}
+
+{{ $frontmatter.description }}
+
+<!--@include: ./../.vitepress/mixins/getting-started.md-->
+
+## Basic usage
+
+<ComponentDemo expanded>
+  <MazLink href="https://maz-ui.com" target="_blank"> View product detail </MazLink>
+
+<template #code>
+
+```vue
+<script lang="ts" setup>
+import MazLink from 'maz-ui/components/MazLink'
+</script>
+
+<template>
+  <MazLink href="https://maz-ui.com" target="_blank">
+    View product detail
+  </MazLink>
+</template>
+```
+
+  </template>
+</ComponentDemo>
+
+## Color
+
+<ComponentDemo>
+  <div class="maz-flex maz-flex-col maz-gap-2 maz-justify-center">
+    <MazLink color="primary"> View product detail </MazLink>
+    <MazLink color="secondary"> View product detail </MazLink>
+    <MazLink color="info"> View product detail </MazLink>
+    <MazLink color="success"> View product detail </MazLink>
+    <MazLink color="warning"> View product detail </MazLink>
+    <MazLink color="destructive"> View product detail </MazLink>
+    <MazLink color="accent"> View product detail </MazLink>
+    <MazLink color="contrast"> View product detail </MazLink>
+  </div>
+
+<template #code>
+
+```html
+<MazLink color="primary"> View product detail </MazLink>
+<MazLink color="secondary"> View product detail </MazLink>
+<MazLink color="info"> View product detail </MazLink>
+<MazLink color="success"> View product detail </MazLink>
+<MazLink color="warning"> View product detail </MazLink>
+<MazLink color="destructive"> View product detail </MazLink>
+<MazLink color="accent"> View product detail </MazLink>
+<MazLink color="contrast"> View product detail </MazLink>
+```
+
+  </template>
+</ComponentDemo>
+
+## RouterLink
+
+When you use the `to` prop, the component will be a `router-link` and will use the `router` to navigate.
+
+<ComponentDemo>
+  <MazLink :to="{ path: '/' }"> View product detail </MazLink>
+
+<template #code>
+
+```html
+<MazLink :to="{ path: '/' }"> View product detail </MazLink>
+```
+
+  </template>
+</ComponentDemo>
+
+## Icons
+
+You can add an icon on the left and right to the link text with the `left-icon` and `right-icon` props.
+
+For more information about the icons, please check the [MazBtn](./maz-btn.md#icons) page.
+
+<ComponentDemo>
+  <MazLink left-icon="home" :right-icon="MazCheck"> View product detail </MazLink>
+
+<template #code>
+
+```vue
+<script lang="ts" setup>
+import { MazCheck, MazHome } from '@maz-ui/icons'
+</script>
+
+<template>
+  <MazLink left-icon="home" :right-icon="MazHome">
+    View product detail
+  </MazLink>
+
+  <MazLink left-icon="home" :right-icon="MazHome">
+    View product detail
+  </MazLink>
+</template>
+```
+
+  </template>
+</ComponentDemo>
+
+## External icon (true by default)
+
+When you use the `autoExternal` prop, the component will have an external icon if the link has the target `_blank`.
+
+<ComponentDemo>
+  <MazLink href="https://loicmazuel.com" target="_blank" auto-external> View product detail </MazLink>
+
+<template #code>
+
+```html
+<MazLink href="https://loicmazuel.com" target="_blank" auto-external> View product detail </MazLink>
+```
+
+  </template>
+</ComponentDemo>
+
+## As button
+
+If no `to` or `href` is provided, the component will be a `button` by default. You can force the component to be a `button`, `a`, `router-link` or `nuxt-link` with the `as` prop.
+
+<ComponentDemo>
+  <div class="maz-flex maz-flex-col maz-gap-2 maz-justify-center">
+    <MazLink as="button"> View product detail </MazLink>
+    <MazLink as="button" disabled> View product detail </MazLink>
+  </div>
+
+<template #code>
+
+  ```vue
+  <script lang="ts" setup>
+    import MazLink from 'maz-ui/components/MazLink'
+  </script>
+
+  <template>
+    <MazLink as="button"> View product detail </MazLink>
+    <MazLink as="button" disabled> View product detail </MazLink>
+  </template>
+  ```
+
+  </template>
+</ComponentDemo>
+
+<script setup lang="ts">
+  import { MazCheck, MazHome } from '@maz-ui/icons'
+</script>
+
+<!--@include: ./../../.vitepress/generated-docs/maz-link.doc.md-->

package/docs/src/components/maz-loading-bar.md

@@ -0,0 +1,26 @@
+---
+title: MazLoadingBar
+description: MazLoadingBar is a standalone component
+---
+
+# {{ $frontmatter.title }}
+
+{{ $frontmatter.description }}
+
+<!--@include: ./../.vitepress/mixins/getting-started.md-->
+
+## Basic usage
+
+<MazLoadingBar color="secondary" />
+
+```vue
+<script lang="ts" setup>
+import { MazLoadingBar } from 'maz-ui/components'
+</script>
+
+<template>
+  <MazLoadingBar color="secondary" />
+</template>
+```
+
+<!--@include: ./../../.vitepress/generated-docs/maz-loading-bar.doc.md-->

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

@@ -0,0 +1,81 @@
+---
+title: MazPagination
+description: MazPagination is a standalone component
+---
+
+# {{ $frontmatter.title }}
+
+{{ $frontmatter.description }}
+
+<!--@include: ./../.vitepress/mixins/getting-started.md-->
+
+<!--@include: ./../.vitepress/mixins/translated-component.md-->
+
+## Basic usage
+
+<MazPagination v-bind="props" v-model="currentPage" size="md" />
+
+`v-model="{{currentPage}}"`
+
+```vue
+<script lang="ts" setup>
+import { MazPagination, type MazPaginationProps } from 'maz-ui/components'
+
+import { ref } from 'vue'
+
+const currentPage = ref(1)
+
+const props: MazPaginationProps = {
+  resultsSize: 100,
+  totalPages: 10,
+  activeColor: 'contrast',
+}
+</script>
+
+<template>
+  <MazPagination v-bind="props" v-model="currentPage" size="md" />
+</template>
+```
+
+## Sizes
+
+<div class="maz-flex maz-flex-col maz-gap-4">
+  <MazPagination v-bind="props" v-model="currentPage" size="xs" />
+  <MazPagination v-bind="props" v-model="currentPage" size="sm" />
+  <MazPagination v-bind="props" v-model="currentPage" size="md" />
+  <MazPagination v-bind="props" v-model="currentPage" size="lg" />
+  <MazPagination v-bind="props" v-model="currentPage" size="xl" />
+</div>
+
+```html
+<MazPagination v-bind="props" v-model="currentPage" size="xs" />
+<MazPagination v-bind="props" v-model="currentPage" size="sm" />
+<MazPagination v-bind="props" v-model="currentPage" size="md" />
+<MazPagination v-bind="props" v-model="currentPage" size="lg" />
+<MazPagination v-bind="props" v-model="currentPage" size="xl" />
+```
+
+## Colors
+
+<div class="maz-flex maz-flex-col maz-gap-4">
+  <MazPagination :total-pages="10" v-model="currentPage" active-color="primary" />
+  <MazPagination :total-pages="10" v-model="currentPage" active-color="secondary" />
+  <MazPagination :total-pages="10" v-model="currentPage" active-color="success" />
+  <MazPagination :total-pages="10" v-model="currentPage" active-color="warning" />
+  <MazPagination :total-pages="10" v-model="currentPage" active-color="destructive" />
+</div>
+
+<script lang="ts" setup>
+  import type { MazPaginationProps } from 'maz-ui/components'
+  import { ref } from 'vue'
+
+  const currentPage = ref(1)
+
+  const props: Props = {
+    resultsSize: 100,
+    totalPages: 10,
+    activeColor: 'contrast',
+  }
+</script>
+
+<!--@include: ./../../.vitepress/generated-docs/maz-pagination.doc.md-->