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

package/docs/src/components/maz-input-price.md

@@ -1,67 +0,0 @@
----
-title: MazInputPrice
-description: MazInputPrice is a standalone component that replaces the standard html input text and formats the text enter according to the currency provided
----
-
-# {{ $frontmatter.title }}
-
-{{ $frontmatter.description }}
-
-<!--@include: ./../../.vitepress/mixins/getting-started.md-->
-
-## Basic usage
-
-<ComponentDemo expanded>
-  <MazInputPrice
-    v-model="priceValue"
-    label="Enter your price"
-    currency="USD"
-    locale="en-US"
-    :min="5"
-    :max="1000"
-    @formatted="formattedPrice = $event"
-  />
-
-  <br />
-  <br />
-
-  priceValue: {{ priceValue }}
-
-  formattedPrice: {{ formattedPrice }}
-
-  <template #code>
-
-```vue
-<script lang="ts" setup>
-import MazInputPrice from 'maz-ui/components/MazInputPrice'
-import { ref } from 'vue'
-
-const priceValue = ref(2)
-const formattedPrice = ref()
-</script>
-
-<template>
-  <MazInputPrice
-    v-model="priceValue"
-    label="Enter your price"
-    currency="USD"
-    locale="en-US"
-    :min="5"
-    :max="1000"
-    @formatted="formattedPrice = $event"
-  />
-</template>
-```
-
-  </template>
-</ComponentDemo>
-
-<script lang="ts" setup>
-  import { ref } from 'vue'
-
-  const priceValue = ref(2)
-  const formattedPrice = ref()
-</script>
-
-<!--@include: ./../../.vitepress/mixins/maz-input-props.md-->
-<!--@include: ./../../.vitepress/generated-docs/maz-input-price.doc.md-->

package/docs/src/components/maz-input-tags.md

@@ -1,114 +0,0 @@
----
-title: MazInputTags
-description: MazInputTags is a standalone component like free inputs to help user select many values and return an Array of strings. Color options are also available.
----
-
-# {{ $frontmatter.title }}
-
-{{ $frontmatter.description }}
-
-<!--@include: ./../../.vitepress/mixins/getting-started.md-->
-
-## Basic usage
-
-<MazInputTags
-  v-model="tags"
-  placeholder="Enter tags"
-  color="info"
-/>
-
-**Returned value**
-
-<code>
-  tags: {{ tags }}
-</code>
-
-```vue
-<script lang="ts" setup>
-import MazInputTags from 'maz-ui/components/MazInputTags'
-import { ref } from 'vue'
-
-const tags = ref(['tags 1', 'tags 2'])
-const sizes = ['mini', 'xs', 'sm', 'md', 'lg', 'xl']
-</script>
-
-<template>
-  <MazInputTags
-    v-model="tags"
-    label="Enter tags"
-    color="info"
-  />
-</template>
-```
-
-## Sizing
-
-<div class="maz:flex maz:flex-col maz:gap-2">
-  <MazInputTags
-    v-for="size in sizes"
-    :key="size"
-    :size="size"
-    v-model="tags"
-    placeholder="Enter tags"
-    color="secondary"
-    size="sm"
-  />
-</div>
-
-```vue
-<script lang="ts" setup>
-import MazInputTags from 'maz-ui/components/MazInputTags'
-import { ref } from 'vue'
-
-const tags = ref(['tags 1', 'tags 2'])
-const sizes = ['mini', 'xs', 'sm', 'md', 'lg', 'xl']
-</script>
-
-<template>
-  <div class="maz:flex maz:flex-col maz:gap-2">
-    <MazInputTags
-      v-for="size in sizes"
-      :key="size"
-      v-model="tags"
-      :size="size"
-      placeholder="Enter tags"
-      color="secondary"
-    />
-  </div>
-</template>
-```
-
-<script lang="ts" setup>
-  import { ref } from 'vue'
-
-  const tags = ref(['tags 1', 'tags 2'])
-  const sizes = ['mini', 'xs', 'sm', 'md', 'lg', 'xl']
-</script>
-
-```vue
-<script lang="ts" setup>
-import MazInputTags from 'maz-ui/components/MazInputTags'
-import { ref } from 'vue'
-
-const tags = ref(['tags 1', 'tags 2'])
-const sizes = ['mini', 'xs', 'sm', 'md', 'lg', 'xl']
-</script>
-
-<template>
-  <MazInputTags
-    v-model="tags"
-    label="Enter tags"
-    color="info"
-  />
-
-  <MazInputTags
-    v-model="tags"
-    placeholder="Enter tags"
-    color="secondary"
-    size="sm"
-  />
-</template>
-```
-
-<!--@include: ./../../.vitepress/mixins/maz-input-props.md-->
-<!--@include: ./../../.vitepress/generated-docs/maz-input-tags.doc.md-->

package/docs/src/components/maz-lazy-img.md

@@ -1,88 +0,0 @@
----
-title: MazLazyImg
-description: MazLazyImg is a standalone component to display images and svgs with lazy loading
----
-
-# {{ $frontmatter.title }}
-
-{{ $frontmatter.description }}
-
-<!--@include: ./../../.vitepress/mixins/getting-started.md-->
-
-<MazLazyImg src="https://placedog.net/1000/1000" block />
-
-```vue
-<script setup lang="ts">
-import MazLazyImg from 'maz-ui/components/MazLazyImg'
-</script>
-
-<template>
-  <MazLazyImg src="https://placedog.net/1000/1000" block />
-</template>
-```
-
-::: tip Performance
-`MazLazyImg` relies on the [`vLazyImg`](./../directives/lazy-img.md) directive, whose `IntersectionObserver`s are pooled and shared across every instance - rendering many images (galleries, lists, avatars) stays cheap.
-:::
-
-## Responsive sources
-
-Pass an object with `sources` to serve different images depending on the media query (like a native `<picture>`).
-
-```vue
-<template>
-  <MazLazyImg
-    :src="{
-      sources: [
-        { srcset: 'https://placedog.net/600/400', media: '(max-width: 600px)' },
-        { srcset: 'https://placedog.net/1500/1000', media: '(min-width: 601px)' },
-      ],
-    }"
-    block
-  />
-</template>
-```
-
-## Image height full
-
-By default the image is displayed with `width: 100%`. Enable `image-height-full` to fill the **height** instead: the image keeps its aspect ratio, fills 100% of the height and overflows/crops horizontally. Handy for wide images or SVGs inside a fixed-height container.
-
-```vue
-<template>
-  <div style="height: 200px;">
-    <MazLazyImg image-height-full src="https://placedog.net/1500/1000" />
-  </div>
-</template>
-```
-
-## Fallback on error
-
-Provide `fallback-src` to swap the image when it fails to load.
-
-<MazLazyImg
-  block
-  src="https://broken-link-image-src.example"
-  fallback-src="https://placedog.net/500/500?id=42"
-/>
-
-```vue
-<template>
-  <MazLazyImg
-    src="https://broken-link-image-src.example"
-    fallback-src="https://placedog.net/500/500"
-    block
-  />
-</template>
-```
-
-## Without loader
-
-Hide the spinner shown while the image is loading with `hide-loader`.
-
-```vue
-<template>
-  <MazLazyImg src="https://placedog.net/1000/1000" hide-loader block />
-</template>
-```
-
-<!--@include: ./../../.vitepress/generated-docs/maz-lazy-img.doc.md-->

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

@@ -1,178 +0,0 @@
----
-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 (primary) </MazLink>
-    <MazLink color="secondary"> View product detail (secondary) </MazLink>
-    <MazLink color="info"> View product detail (info) </MazLink>
-    <MazLink color="success"> View product detail (success) </MazLink>
-    <MazLink color="warning"> View product detail (warning) </MazLink>
-    <MazLink color="destructive"> View product detail (destructive) </MazLink>
-    <MazLink color="accent"> View product detail (accent) </MazLink>
-    <MazLink color="contrast"> View product detail (contrast) </MazLink>
-    <MazLink color="surface"> View product detail (surface) </MazLink>
-    <MazLink color="muted"> View product detail (muted) </MazLink>
-  </div>
-
-<template #code>
-
-```html
-<MazLink color="primary"> View product detail (primary) </MazLink>
-<MazLink color="secondary"> View product detail (secondary) </MazLink>
-<MazLink color="info"> View product detail (info) </MazLink>
-<MazLink color="success"> View product detail (success) </MazLink>
-<MazLink color="warning"> View product detail (warning) </MazLink>
-<MazLink color="destructive"> View product detail (destructive) </MazLink>
-<MazLink color="accent"> View product detail (accent) </MazLink>
-<MazLink color="contrast"> View product detail (contrast) </MazLink>
-<MazLink color="surface"> View product detail (surface) </MazLink>
-<MazLink color="muted"> View product detail (muted) </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 `start-icon` and `end-icon` props.
-
-For more information about the icons, please check the [MazBtn](./maz-btn.md#icons) page.
-
-<ComponentDemo>
-  <MazLink start-icon="/home.svg" :end-icon="MazCheck"> View product detail </MazLink>
-
-<template #code>
-
-```vue
-<script lang="ts" setup>
-import { MazCheck } from '@maz-ui/icons/raw/MazCheck'
-import { MazHome } from '@maz-ui/icons/raw/MazHome'
-</script>
-
-<template>
-  <MazLink start-icon="/home.svg" :end-icon="MazHome">
-    View product detail
-  </MazLink>
-
-  <MazLink start-icon="/home.svg" :end-icon="MazHome">
-    View product detail
-  </MazLink>
-</template>
-```
-
-  </template>
-</ComponentDemo>
-
-`startIcon` and `endIcon` also accept a full `MazIconProps` object — pass the same shape `<MazIcon>` accepts to override the icon size, add a `<title>` for screen readers, etc.
-
-```vue
-<MazLink
-  href="/external"
-  :end-icon="{
-    icon: MazArrowRight,
-    size: 'lg',
-    title: 'Go to external page',
-    flipIconForRtl: true,
-  }"
->
-  Read more
-</MazLink>
-```
-
-## 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 } from '@maz-ui/icons/raw/MazCheck'
-  import { MazHome } from '@maz-ui/icons/raw/MazHome'
-</script>
-
-<!--@include: ./../../.vitepress/generated-docs/maz-link.doc.md-->

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

@@ -1,26 +0,0 @@
----
-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/MazLoadingBar'
-</script>
-
-<template>
-  <MazLoadingBar color="secondary" />
-</template>
-```
-
-<!--@include: ./../../.vitepress/generated-docs/maz-loading-bar.doc.md-->

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

@@ -1,79 +0,0 @@
----
-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 = {
-  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 = {
-    totalPages: 10,
-    activeColor: 'contrast',
-  }
-</script>
-
-<!--@include: ./../../.vitepress/generated-docs/maz-pagination.doc.md-->