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

package/docs/{src/components → components}/maz-card.md

@@ -1,29 +1,27 @@
 ---
-title: MazCard
-description: MazCard is a standalone component to display some texts and images and also add button actions
+title: "MazCard"
+description: "MazCard is a standalone component to display some texts and images and also add button actions"
+package: "maz-ui"
+url: "https://maz-ui.com/components/maz-card"
 ---
 
-# {{ $frontmatter.title }}
+# MazCard
 
-{{ $frontmatter.description }}
+> MazCard is a standalone component to display some texts and images and also add button actions
 
-<!--@include: ./../../.vitepress/mixins/getting-started.md-->
+- Package: `maz-ui`
+- Import: `import MazCard from 'maz-ui/components/MazCard'`
+- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
+- Web: https://maz-ui.com/components/maz-card
 
-## Basic usage
-
-<ComponentDemo expanded>
-  <MazCard title="Cute Kitten">
-    <p class="maz:text-muted">
-      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
-    </p>
-  </MazCard>
+> Before use it, you should install the MazUi plugin in your project, follow instructions in [Getting Started](../guide/getting-started.md)
 
-  <template #code>
+## Basic usage
 
 ```vue
 <template>
   <MazCard class="vp-raw" title="Cute Kitten">
-    <p class="maz:text-muted">
+    <p class="text-muted">
       Lorem Ipsum is simply dummy text of the printing and typesetting industry.
       Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an
       unknown printer took a galley of type and scrambled it to make a type specimen book.
@@ -36,38 +34,9 @@ description: MazCard is a standalone component to display some texts and images
 </script>
 ```
 
-  </template>
-</ComponentDemo>
-
 ## Advanced usage
 
-<MazCard :gallery="{ images: ['https://placedog.net/480/480'], height: 300 }" class="vp-raw">
-  <template #content-title>
-    Cute Kitten
-  </template>
-  <template #content-subtitle>
-    Cat
-  </template>
-  <template #content-body>
-    <p class="maz:text-muted" style="margin: 0;">
-      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
-    </p>
-  </template>
-  <template #actions>
-    <MazBtn
-      fab
-      color="destructive"
-      class="maz:me-2"
-    >
-      <MazIcon icon="/trash.svg" class="maz:text-xl" />
-    </MazBtn>
-    <MazBtn color="surface">
-      <MazIcon icon="/user-plus.svg" class="maz:text-xl" />
-    </MazBtn>
-  </template>
-</MazCard>
-
-::: details View code
+**Details: View code**
 
 ```vue
 <template>
@@ -85,7 +54,7 @@ description: MazCard is a standalone component to display some texts and images
       </span>
     </template>
     <template #content-body>
-      <p class="maz:text-muted">
+      <p class="text-muted">
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
       </p>
     </template>
@@ -94,7 +63,7 @@ description: MazCard is a standalone component to display some texts and images
         size="md"
         fab
         color="destructive"
-        class="maz:me-2"
+        class="me-2"
       >
         <MazIcon icon="/trash.svg" />
       </MazBtn>
@@ -113,27 +82,13 @@ description: MazCard is a standalone component to display some texts and images
 </script>
 ```
 
-:::
-
 ## Orientation
 
 When you display images, you can change the orientation of the card, available options include: `column` `row` `row-reverse` `column-reverse`
 
 ### Row
 
-<br />
-<MazCard :gallery="{ images: ['https://placedog.net/450/450'] }" orientation="row" class="vp-raw">
-  <template #content-title>
-    <h3> Cute Kitten </h3>
-  </template>
-  <template #content-body>
-    <p class="maz:text-muted">
-      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
-    </p>
-  </template>
-</MazCard>
-
-::: details View code
+**Details: View code**
 
 ```html
 <MazCard :gallery="{ images: ['https://placedog.net/450/450'] }" orientation="row">
@@ -141,31 +96,16 @@ When you display images, you can change the orientation of the card, available o
     <h3> Cute Kitten </h3>
   </template>
   <template #content-body>
-    <p class="maz:text-muted">
+    <p class="text-muted">
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
     </p>
   </template>
 </MazCard>
 ```
 
-:::
-
 ### Row Reverse
 
-<br />
-
-<MazCard :gallery="{ images: ['https://placedog.net/380/380'] }" orientation="row-reverse" class="vp-raw">
-  <template #content-title>
-    <h3> Cute Kitten </h3>
-  </template>
-  <template #content-body>
-    <p class="maz:text-muted">
-      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
-    </p>
-  </template>
-</MazCard>
-
-::: details View code
+**Details: View code**
 
 ```html
 <MazCard
@@ -176,7 +116,7 @@ When you display images, you can change the orientation of the card, available o
     <h3> Cute Kitten </h3>
   </template>
   <template #content-body>
-    <p class="maz:text-muted">
+    <p class="text-muted">
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
     </p>
   </template>
@@ -184,28 +124,9 @@ When you display images, you can change the orientation of the card, available o
 
 ```
 
-:::
-
 ### Column Reverse
 
-<br />
-
-<MazCard
-  :gallery="{ images: ['https://placedog.net/420/420'], height: 300 }"
-  orientation="column-reverse"
-  class="vp-raw"
->
-  <template #content-title>
-    <h3> Cute Kitten </h3>
-  </template>
-  <template #content-body>
-    <p class="maz:text-muted">
-      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
-    </p>
-  </template>
-</MazCard>
-
-::: details View code
+**Details: View code**
 
 ```html
 <MazCard
@@ -216,32 +137,18 @@ When you display images, you can change the orientation of the card, available o
     <h3> Cute Kitten </h3>
   </template>
   <template #content-body>
-    <p class="maz:text-muted">
+    <p class="text-muted">
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
     </p>
   </template>
 </MazCard>
 ```
 
-:::
-
 ## Collapsible
 
 Use props: `collapsible` & `v-model:collapse-open`
 
-<MazCard collapsible title="Lorem Ipsum is simply" block style="margin-bottom: 1rem;" class="vp-raw">
-  <p>
-    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
-  </p>
-</MazCard>
-
-<MazCard collapsible v-model:collapse-open="cardOpen" title="Lorem Ipsum is simply" block class="vp-raw">
-  <p>
-    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
-  </p>
-</MazCard>
-
-::: details View code
+**Details: View code**
 
 ```vue
 <template>
@@ -265,14 +172,6 @@ Use props: `collapsible` & `v-model:collapse-open`
 </script>
 ```
 
-<script setup>
-  import { ref } from 'vue'
-
-  const cardOpen = ref(true)
-</script>
-
-:::
-
 ## Linked card
 
 To access the link, simply click the card.
@@ -281,17 +180,9 @@ To access the link, simply click the card.
 - `href-target` is the behavior of the link on click
 - You can use `:scale="false"` to remove the scale animation on hover
 
-<MazCard
-  :gallery="{ images: ['https://placedog.net/400/400'], height: 300 }"
-  href="/components/maz-card#linked-card"
-  href-target="_blank"
-  block
-  class="vp-raw"
->
-  Click on the card to follow the href link
-</MazCard>
+- [MazCard](./maz-card.md#linked-card)
 
-::: details View code
+**Details: View code**
 
 ```html
 <MazCard
@@ -306,15 +197,9 @@ To access the link, simply click the card.
 </MazCard>
 ```
 
-:::
-
 ## No bordered
 
-<MazCard :bordered="false" class="vp-raw">
-  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
-</MazCard>
-
-::: details View code
+**Details: View code**
 
 ```html
 <MazCard :bordered="false">
@@ -322,15 +207,9 @@ To access the link, simply click the card.
 </MazCard>
 ```
 
-:::
-
 ## Elevation
 
-<MazCard elevation :bordered="false" class="vp-raw">
-  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
-</MazCard>
-
-::: details View code
+**Details: View code**
 
 ```html
 <MazCard elevation :bordered="false">
@@ -338,23 +217,9 @@ To access the link, simply click the card.
 </MazCard>
 ```
 
-:::
-
 ## Gallery images
 
-<MazCard
-  :gallery="{
-    images: ['https://placedog.net/640/640', 'https://placedog.net/560/560', 'https://placedog.net/720/720', 'https://placedog.net/360/360'],
-    displayedCount: 3,
-    remaining: true,
-    zoom: true,
-  }"
-  class="vp-raw"
->
-  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
-</MazCard>
-
-::: details View code
+**Details: View code**
 
 ```html
 <MazCard
@@ -369,23 +234,11 @@ To access the link, simply click the card.
 </MazCard>
 ```
 
-:::
-
 ## Footer slot
 
 ### Basic
 
-<MazCard class="vp-raw">
-  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
-
-  <template #footer>
-    <MazBtn>
-      Button
-    </MazBtn>
-  </template>
-</MazCard>
-
-::: details View code
+**Details: View code**
 
 ```html
 <MazCard>
@@ -399,23 +252,11 @@ To access the link, simply click the card.
 </MazCard>
 ```
 
-:::
-
 ### Footer aligned on left
 
 Use the prop option `footer-align="start"`
 
-<MazCard footer-align="start" class="vp-raw">
-  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
-
-  <template #footer>
-    <MazBtn>
-      Button
-    </MazBtn>
-  </template>
-</MazCard>
-
-::: details View code
+**Details: View code**
 
 ```html
 <MazCard footer-align="start">
@@ -429,8 +270,6 @@ Use the prop option `footer-align="start"`
 </MazCard>
 ```
 
-:::
-
 ## Types
 
 ```ts
@@ -443,4 +282,40 @@ type MazGalleryImage =
   | string
 ```
 
-<!--@include: ./../../.vitepress/generated-docs/maz-card.doc.md-->
+## MazCard API
+
+`import MazCard from 'maz-ui/components/MazCard'`
+
+### Props
+
+- `orientation` (`"row" | "column" | "column-reverse" | "row-reverse"`, default: `"column"`): Card variant: Must be `column | row | row-reverse | column-reverse`.
+- `href` (`string`): Make card a link (footer area excluded).
+- `to` (`string | et | X`): Make card a link with a router-link or nuxt-link (footer area excluded).
+- `href-target` (`string`, default: `"_self"`): Target option of link: Muse be one of `_blank | _self | _parent | _top | framename`.
+- `footer-align` (`"end" | "start"`, default: `"end"`): Footer text alignment along the inline axis: `start | end` (`end` = right in LTR, left in RTL).
+- `gallery` (`MazGalleryProps`, default: `` `{ displayedCount: 3, remaining: false, zoom: !href && !to, width: 200, height: 150 }` If `href` or `to` is set, `zoom` is set to `false` ``): Images gallery props options (see `MazGallery` component).
+- `scale` (`boolean`): scale animation on hover (only linked cards).
+- `elevation` (`boolean`): Set elevation to card (box-shadow).
+- `radius` (`boolean`): Set radius to card.
+- `bordered` (`boolean`): Set border to card (in dark mode, the card is always bordered).
+- `wrapper-class` (`ClassValue`): add classes to wrapper.
+- `padding` (`boolean`): Remove padding from content wrapper.
+- `overflow-hidden` (`boolean`): Hide overflow.
+- `collapsible` (`boolean`, default: `false`): Make card collapsible.
+- `collapse-open` (`boolean`, default: `false`, `v-model:collapse-open`): Card is open by default if `true`.
+- `title` (`string`): Title of the card in header.
+- `block` (`boolean`): The card will be displayed in full width.
+
+### Events
+
+- `@update:collapseOpen` (payload: `unknown[`): Update the collapseOpen model
+
+### Slots
+
+- `#title`: The title of the card
+- `#content-title`: The title of the card Bindings: `collapseOpen: boolean` (The collapse open state of the card).
+- `#content-subtitle`: The subtitle of the card
+- `#content-body`: The body of the card
+- `#default`: The content of the card Bindings: `collapseOpen: boolean` (The collapse open state of the card).
+- `#footer`: The footer of the card
+- `#actions`: The actions of the image gallery (only if gallery is displayed)

package/docs/components/maz-carousel.md

@@ -0,0 +1,153 @@
+---
+title: "MazCarousel"
+description: "MazCarousel is a standalone component to display and manage items in a row"
+package: "maz-ui"
+url: "https://maz-ui.com/components/maz-carousel"
+---
+
+# MazCarousel
+
+> MazCarousel is a standalone component to display and manage items in a row
+
+- Package: `maz-ui`
+- Import: `import MazCarousel from 'maz-ui/components/MazCarousel'`
+- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
+- Web: https://maz-ui.com/components/maz-carousel
+
+> Before use it, you should install the MazUi plugin in your project, follow instructions in [Getting Started](../guide/getting-started.md)
+
+**Tip:**
+
+This component can be translated globally using the [MazUi](../ecosystem/translations.md) plugin.
+
+## Basic usage
+
+```vue
+<script lang="ts" setup>
+import MazCarousel from 'maz-ui/components/MazCarousel'
+import MazCard from 'maz-ui/components/MazCard'
+</script>
+
+<template>
+  <MazCarousel title="Carousel title">
+    <MazCard
+      v-for="(item, i) in Array(8)"
+      :key="i"
+      :gallery="{
+        images: [
+          'https://placedog.net/250/300?random',
+        ],
+      }"
+      style="min-width: 250px;"
+    >
+      <template #title>
+        <h4 class="m-0">
+          Doggo
+        </h4>
+      </template>
+      <template #content-body>
+        <p class="text-muted" style="margin-bottom: 0;">
+          It's a beautifull doggo, no ?
+        </p>
+      </template>
+    </MazCard>
+  </MazCarousel>
+</template>
+```
+
+## Options
+
+### hide-scrollbar
+
+This options will display the component without scrollbar only when the component is not hovered, focused or active
+
+```vue
+<script lang="ts" setup>
+import MazCarousel from 'maz-ui/components/MazCarousel'
+import MazCard from 'maz-ui/components/MazCard'
+</script>
+
+<template>
+  <MazCarousel hide-scrollbar>
+    <template #title>
+      <h4 class="text-2xl font-bold">Carousel</h4>
+    </template>
+    <MazCard
+      v-for="(item, i) in Array(8)"
+      :key="i"
+      :gallery="{
+        images: [
+          'https://placedog.net/400/200?random'
+        ]
+      }"
+      style="min-width: 250px;"
+    >
+      <template #content-title>
+        <h4 class="m-0">
+          Doggo
+        </h4>
+      </template>
+      <template #content-body>
+        <p class="text-muted" style="margin-bottom: 0;">
+          It's a beautifull doggo, no ?
+        </p>
+      </template>
+    </MazCard>
+  </MazCarousel>
+</template>
+```
+
+### hide-scroll-buttons
+
+This options will display the component without scroll buttons
+
+```vue
+<script lang="ts" setup>
+import MazCarousel from 'maz-ui/components/MazCarousel'
+import MazCard from 'maz-ui/components/MazCard'
+</script>
+
+<template>
+  <MazCarousel hide-scroll-buttons title="Carousel without scroll buttons">
+    <MazCard
+      v-for="(item, i) in Array(8)"
+      :key="i"
+      :gallery="{
+        images: [
+          'https://placedog.net/300/200'
+        ]
+      }"
+      style="min-width: 250px;"
+    >
+      <template #content-title>
+        <h4 class="m-0">
+          Doggo
+        </h4>
+      </template>
+      <template #content-body>
+        <p class="text-muted" style="margin-bottom: 0;">
+          It's a beautifull doggo, no ?
+        </p>
+      </template>
+    </MazCard>
+  </MazCarousel>
+</template>
+```
+
+## MazCarousel API
+
+`import MazCarousel from 'maz-ui/components/MazCarousel'`
+
+### Props
+
+- `hide-scroll-buttons` (`boolean`, default: `false`): Hide display the scroll buttons.
+- `translations` (`{ ariaLabel?: { previousButton?: string | undefined; nextButton?: string | undefined; } | undefined; }`, default: `Translations from`): Translations of the carousel.
+- `hide-scrollbar` (`boolean`, default: `false`): Hide the scrollbar when not active.
+- `title` (`string`): The title of the carousel.
+
+### Slots
+
+- `#title`
+- `#previous-icon`
+- `#next-icon`
+- `#default`