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

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

@@ -1,15 +1,24 @@
 ---
-title: MazReadMore
-description: MazReadMore is a standalone component to truncate long text with a "Read more" / "Read less" toggle functionality
+title: "MazReadMore"
+description: "MazReadMore is a standalone component to truncate long text with a \"Read more\" / \"Read less\" toggle functionality"
+package: "maz-ui"
+url: "https://maz-ui.com/components/maz-read-more"
 ---
 
-# {{ $frontmatter.title }}
+# MazReadMore
 
-{{ $frontmatter.description }}
+> MazReadMore is a standalone component to truncate long text with a "Read more" / "Read less" toggle functionality
 
-<!--@include: ./../../.vitepress/mixins/getting-started.md-->
+- Package: `maz-ui`
+- Import: `import MazReadMore from 'maz-ui/components/MazReadMore'`
+- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
+- Web: https://maz-ui.com/components/maz-read-more
 
-<!--@include: ./../../.vitepress/mixins/translated-component.md-->
+> 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
 
@@ -17,12 +26,6 @@ Use the `text` prop or the default slot to provide the content to truncate. By d
 
 ### With text prop
 
-<br />
-
-<ComponentDemo>
-  <MazReadMore :text="longText" />
-<template #code>
-
 ```vue
 <script lang="ts" setup>
 import MazReadMore from 'maz-ui/components/MazReadMore'
@@ -41,19 +44,8 @@ Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.`
 </template>
 ```
 
-</template>
-</ComponentDemo>
-
 ### With default slot
 
-<br />
-
-<ComponentDemo>
-  <MazReadMore>
-    <p>{{longText}}</p>
-  </MazReadMore>
-<template #code>
-
 ```vue
 <script lang="ts" setup>
 import MazReadMore from 'maz-ui/components/MazReadMore'
@@ -68,27 +60,10 @@ import MazReadMore from 'maz-ui/components/MazReadMore'
 </template>
 ```
 
-</template>
-</ComponentDemo>
-
 ## Truncation with max lines
 
 Control the number of visible lines using the `max-lines` prop.
 
-<ComponentDemo>
-  <div class="maz:flex maz:flex-col maz:gap-4">
-    <div>
-      <p class="maz:text-sm maz:text-muted maz:mb-2">2 lines</p>
-      <MazReadMore :text="longText" :max-lines="2" />
-    </div>
-    <div>
-      <p class="maz:text-sm maz:text-muted maz:mb-2">6 lines</p>
-      <MazReadMore :text="longText" :max-lines="6" />
-    </div>
-  </div>
-
-<template #code>
-
 ```vue
 <script lang="ts" setup>
 import MazReadMore from 'maz-ui/components/MazReadMore'
@@ -108,29 +83,10 @@ Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.`
 </template>
 ```
 
-</template>
-</ComponentDemo>
-
 ## Truncation with max characters
 
 Use the `max-chars` prop to truncate based on character count instead of lines.
 
-<ComponentDemo>
-  <div class="maz:flex maz:flex-col maz:gap-4">
-    <div>
-      <p class="maz:text-sm maz:text-muted maz:mb-2">50 characters</p>
-      <MazReadMore :text="longText" :max-chars="50" />
-    </div>
-    <div>
-      <p class="maz:text-sm maz:text-muted maz:mb-2">150 characters</p>
-      <MazReadMore :max-chars="150">
-        {{ longText }}
-      </MazReadMore>
-    </div>
-  </div>
-
-<template #code>
-
 ```vue
 <script lang="ts" setup>
 import MazReadMore from 'maz-ui/components/MazReadMore'
@@ -152,25 +108,10 @@ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.`
 </template>
 ```
 
-</template>
-</ComponentDemo>
-
 ## Using slot for content
 
 You can use the default slot to provide rich content instead of plain text.
 
-<ComponentDemo>
-  <MazReadMore :max-lines="2">
-    <p>
-      <strong>Rich content example:</strong> Lorem ipsum dolor sit amet,
-      <em>consectetur adipiscing elit</em>. Sed do eiusmod tempor incididunt ut labore
-      et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
-      ullamco laboris nisi ut aliquip ex ea commodo consequat.
-    </p>
-  </MazReadMore>
-
-<template #code>
-
 ```vue
 <script lang="ts" setup>
 import MazReadMore from 'maz-ui/components/MazReadMore'
@@ -188,25 +129,10 @@ import MazReadMore from 'maz-ui/components/MazReadMore'
 </template>
 ```
 
-</template>
-</ComponentDemo>
-
 ## Colors
 
 Customize the color of the toggle link using the `color` prop.
 
-<ComponentDemo>
-  <div class="maz:flex maz:flex-col maz:gap-4">
-    <MazReadMore :text="longText" color="primary" :max-lines="2" />
-    <MazReadMore :text="longText" color="secondary" :max-lines="2" />
-    <MazReadMore :text="longText" color="info" :max-lines="2" />
-    <MazReadMore :text="longText" color="success" :max-lines="2" />
-    <MazReadMore :text="longText" color="warning" :max-lines="2" />
-    <MazReadMore :text="longText" color="destructive" :max-lines="2" />
-  </div>
-
-<template #code>
-
 ```vue
 <script lang="ts" setup>
 import MazReadMore from 'maz-ui/components/MazReadMore'
@@ -226,23 +152,10 @@ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.`
 </template>
 ```
 
-</template>
-</ComponentDemo>
-
 ## Custom toggle text
 
 Customize the "Read more" and "Read less" text using the `expand-text` and `collapse-text` props.
 
-<ComponentDemo>
-  <MazReadMore
-    :text="longText"
-    :max-lines="2"
-    expand-text="Show more"
-    collapse-text="Show less"
-  />
-
-<template #code>
-
 ```vue
 <script lang="ts" setup>
 import MazReadMore from 'maz-ui/components/MazReadMore'
@@ -262,18 +175,10 @@ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.`
 </template>
 ```
 
-</template>
-</ComponentDemo>
-
 ## Short content (no button)
 
 When the content is shorter than the truncation limit, the toggle button is automatically hidden.
 
-<ComponentDemo>
-  <MazReadMore text="This is a short text that doesn't need truncation." :max-lines="4" />
-
-<template #code>
-
 ```vue
 <script lang="ts" setup>
 import MazReadMore from 'maz-ui/components/MazReadMore'
@@ -284,17 +189,21 @@ import MazReadMore from 'maz-ui/components/MazReadMore'
 </template>
 ```
 
-</template>
-</ComponentDemo>
+## MazReadMore API
 
-<!--@include: ./../../.vitepress/generated-docs/maz-read-more.doc.md-->
+`import MazReadMore from 'maz-ui/components/MazReadMore'`
 
-<script lang="ts" setup>
-const longText = `Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.`
-</script>
+### Props
+
+- `text` (`string`): The text to be truncated.
+- `max-lines` (`number`, default: `4`): The maximum number of lines to be displayed.
+- `max-chars` (`number`): The maximum number of characters to be displayed.
+- `color` (`"primary" | "secondary" | "accent" | "info" | "success" | "warning" | "destructive" | "contrast" | "transparent" | "surface" | "muted" | "inherit"`, default: `"primary"`): The color of the link (MazLink).
+- `collapse-text` (`string`, default: `'readMore.collapse' (translations)`): The text of the link when the content is collapsed.
+- `expand-text` (`string`, default: `'readMore.expand' (translations)`): The text of the link when the content is expanded.
+- `id` (`string`): Unique identifier for accessibility linking.
+- `aria-label` (`string`, default: `'readMore.ariaLabel' (translations)`): Accessibility label for the content region.
+
+### Slots
+
+- `#default`

package/docs/components/maz-reading-progress-bar.md

@@ -0,0 +1,96 @@
+---
+title: "MazReadingProgressBar"
+description: "MazReadingProgressBar is a standalone component to display a reading progress bar"
+package: "maz-ui"
+url: "https://maz-ui.com/components/maz-reading-progress-bar"
+---
+
+# MazReadingProgressBar
+
+> MazReadingProgressBar is a standalone component to display a reading progress bar
+
+- Package: `maz-ui`
+- Import: `import MazReadingProgressBar from 'maz-ui/components/MazReadingProgressBar'`
+- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
+- Web: https://maz-ui.com/components/maz-reading-progress-bar
+
+> Before use it, you should install the MazUi plugin in your project, follow instructions in [Getting Started](../guide/getting-started.md)
+
+This component use the `<Teleport />` component to move the progress bar to the top of the page. You can set the `teleport-selector` prop to change the target of the teleportation.
+
+## Basic usage
+
+Look at the top of the page to see the component in action (scroll in page to inscrease progress bar width).
+
+```vue
+<script lang="ts" setup>
+import MazReadingProgressBar from 'maz-ui/components/MazReadingProgressBar'
+</script>
+
+<template>
+  <MazReadingProgressBar content-selector=".VPDoc" teleport-selector="#app" />
+</template>
+```
+
+## Types
+
+### Props
+
+```ts
+export interface Props {
+  /**
+   * Height of the progress bar
+   * @default 4px
+   */
+  height?: string
+  /**
+   * Color of the progress bar
+   * @default primary
+   */
+  color?: Color
+  /**
+   * Selector of the element to teleport the progress bar
+   * @default body
+   */
+  teleportSelector?: string
+  /**
+   * Selector of the element to get the height
+   * @default body
+   */
+  contentSelector?: string
+  /**
+   * Offset of the progress bar
+   * @default 0
+   */
+  offset?: number
+  /**
+   * Class of the progress bar
+   * @default undefined
+   */
+  barClass?: HTMLAttributes['class']
+  /**
+   * Instead of using the height of the content with a selector, you can set a scroll distance
+   * @default undefined
+   */
+  distance?: number
+}
+```
+
+## MazReadingProgressBar API
+
+`import MazReadingProgressBar from 'maz-ui/components/MazReadingProgressBar'`
+
+### Props
+
+- `height` (`string`, default: `"4px"`): Height of the progress bar.
+- `color` (`"primary" | "secondary" | "accent" | "info" | "success" | "warning" | "destructive" | "contrast" | "transparent"`, default: `"primary"`): Color of the progress bar.
+- `teleport-selector` (`string`, default: `"body"`): Selector of the element to teleport the progress bar.
+- `content-selector` (`string`, default: `"body"`): Selector of the element to get the height.
+- `offset` (`number`, default: `0`): Offset of the progress bar.
+- `bar-class` (`ClassValue`): Class of the progress bar.
+- `distance` (`number`): Instead of using the height of the content with a selector, you can set a scroll distance.
+
+### Events
+
+- `@begin`
+- `@complete`