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

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

@@ -1,15 +1,24 @@
 ---
-title: MazDropzone
-description: MazDropzone is a powerful and flexible file upload component with drag & drop support, progress tracking, and customizable UI. Perfect for handling single or multiple file uploads in your Vue applications.
+title: "MazDropzone"
+description: "MazDropzone is a powerful and flexible file upload component with drag & drop support, progress tracking, and customizable UI. Perfect for handling single or multiple file uploads in your Vue applications."
+package: "maz-ui"
+url: "https://maz-ui.com/components/maz-dropzone"
 ---
 
-# {{ $frontmatter.title }}
+# MazDropzone
 
-{{ $frontmatter.description }}
+> MazDropzone is a powerful and flexible file upload component with drag & drop support, progress tracking, and customizable UI. Perfect for handling single or multiple file uploads in your Vue applications.
 
-<!--@include: ./../../.vitepress/mixins/getting-started.md-->
+- Package: `maz-ui`
+- Import: `import MazDropzone from 'maz-ui/components/MazDropzone'`
+- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
+- Web: https://maz-ui.com/components/maz-dropzone
 
-<!--@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.
 
 ## Key Features
 
@@ -40,7 +49,7 @@ description: MazDropzone is a powerful and flexible file upload component with d
 
 ### Error handling example
 
-::: details View code
+**Details: View code**
 
 ```vue
 <script setup>
@@ -71,35 +80,8 @@ function handleError({ code, files }) {
 </template>
 ```
 
-:::
-
 ## Basic Usage
 
-<ComponentDemo expanded>
-  <MazDropzone
-    ref="dropzone"
-    v-model="files"
-    :max-file-size="3"
-    multiple
-    :max-concurrent-uploads="3"
-    @upload-success="onUploadSuccess"
-    @upload-error="onUploadError"
-    @error="onError"
-    url="https://httpbin.org/post"
-    :request-options="{
-      headers: { 'My-Awesome-Header': 'header value' },
-    }"
-  />
-
-  <br />
-  <div class="maz:text-center">
-    <MazBtn @click="dropzone?.uploadFiles()" :loading="dropzone?.isUploading">
-      Upload Files
-    </MazBtn>
-  </div>
-
-<template #code>
-
 ```vue
 <script setup lang="ts">
 import { useToast } from 'maz-ui/composables'
@@ -148,24 +130,10 @@ function onError({ files, event, code }) {
 </template>
 ```
 
-  </template>
-</ComponentDemo>
-
 ## File Type Restrictions
 
 You can restrict allowed file types using the `data-types` prop:
 
-<ComponentDemo>
-  <MazDropzone
-    v-model="files"
-    :data-types="acceptedFormats"
-    :max-file-size="5"
-    :max-files="5"
-    @error="onError"
-  />
-
-<template #code>
-
 ```vue
 <script lang="ts" setup>
 const acceptedFormats = [
@@ -213,25 +181,10 @@ const acceptedFormats = [
 </template>
 ```
 
-  </template>
-</ComponentDemo>
-
 ## Auto Upload
 
 Enable automatic file upload using the `auto-upload` prop. Files can be uploaded individually (`single`) in separate requests or all at once (`multiple`) in a single request:
 
-<ComponentDemo>
-  <MazDropzone
-    v-model="files"
-    auto-upload="single"
-    url="https://your-upload-endpoint.com/upload"
-    @upload-success="onUploadSuccess"
-    @upload-error="onUploadError"
-    @error="onError"
-  />
-
-<template #code>
-
 ```html
 <MazDropzone
   v-model="files"
@@ -243,12 +196,10 @@ Enable automatic file upload using the `auto-upload` prop. Files can be uploaded
 />
 ```
 
-  </template>
-</ComponentDemo>
-
 You can also upload all files at once using `multiple`:
 
-::: tip
+**Tip:**
+
 Multiple upload is allowed:
 
 - when `max-files` is greater than 1
@@ -256,19 +207,6 @@ Multiple upload is allowed:
 - when `multiple` prop is set to `true`
 
 [Link to the source code](https://github.com/maz-ui/maz-ui/blob/main/components/MazDropzone.vue#L219)
-:::
-
-<ComponentDemo>
-  <MazDropzone
-    v-model="files"
-    auto-upload="multiple"
-    url="https://your-upload-endpoint.com/upload"
-    @upload-success-multiple="onUploadSuccessMultiple"
-    @upload-error-multiple="onUploadErrorMultiple"
-    @error="onError"
-  />
-
-<template #code>
 
 ```html
 <template>
@@ -302,33 +240,15 @@ Multiple upload is allowed:
 </script>
 ```
 
-  </template>
-</ComponentDemo>
-
 ## Custom Upload Area
 
 Customize the upload area using slots:
 
-<ComponentDemo>
-  <MazDropzone v-model="files" @error="onError">
-    <template #no-files-area="{ handleFileInputClick }">
-      <div class="maz:flex maz:flex-col maz:items-center maz:gap-4">
-        <MazIcon icon="/arrow-up-on-square.svg" class="maz:text-4xl" />
-        <p>Drop your files here or click to browse</p>
-        <MazBtn @click="handleFileInputClick">
-          Select Files
-        </MazBtn>
-      </div>
-    </template>
-  </MazDropzone>
-
-<template #code>
-
 ```html
 <MazDropzone v-model="files" @error="onError">
   <template #no-files-area="{ handleFileInputClick }">
-    <div class="maz:flex maz:flex-col maz:items-center maz:gap-4">
-      <MazIcon icon="/arrow-up-on-square.svg" class="maz:text-4xl" />
+    <div class="flex flex-col items-center gap-4">
+      <MazIcon icon="/arrow-up-on-square.svg" class="text-4xl" />
       <p>Drop your files here or click to browse</p>
       <MazBtn @click="handleFileInputClick"> Select Files </MazBtn>
     </div>
@@ -336,28 +256,12 @@ Customize the upload area using slots:
 </MazDropzone>
 ```
 
-  </template>
-</ComponentDemo>
-
 ## Custom Translations
 
 ### Using `translations` prop
 
 Customize text messages using the `translations` prop:
 
-<ComponentDemo>
-  <MazDropzone
-    v-model="files"
-    :translations="{
-      dragAndDrop: 'Drag files here',
-      selectFile: 'browse files',
-      fileInfos: 'Accepted files: Images up to 5MB'
-    }"
-    @error="onError"
-  />
-
-<template #code>
-
 ```html
 <MazDropzone
   v-model="files"
@@ -370,14 +274,11 @@ Customize text messages using the `translations` prop:
 />
 ```
 
-  </template>
-</ComponentDemo>
-
 ### Using `MazUi` plugin
 
 You can also use the `MazUi` plugin to customize the translations:
 
-::: details View code
+**Details: View code**
 
 ```ts
 import { MazUi } from 'maz-ui/plugins/maz-ui'
@@ -401,33 +302,10 @@ app.use(MazUi, {
 })
 ```
 
-:::
-
 ## Custom Upload Request
 
 Customize the upload request using `uploadUrl`, `requestOptions` and `transformBody`:
 
-<ComponentDemo>
-  <MazDropzone
-    v-model="files"
-    url="/api/upload"
-    :request-options="{
-      method: 'POST',
-      headers: {
-        'Authorization': 'Bearer token123'
-      },
-    }"
-    :transform-body="(formData, files) => {
-      // Add additional data to FormData
-      formData.append('userId', '123')
-      formData.append('fileCount', files.length.toString())
-      return formData
-    }"
-    @error="onError"
-  />
-
-<template #code>
-
 ```html
 <MazDropzone
   v-model="files"
@@ -448,81 +326,62 @@ Customize the upload request using `uploadUrl`, `requestOptions` and `transformB
 />
 ```
 
-  </template>
-</ComponentDemo>
-
-<!--@include: ./../../.vitepress/generated-docs/maz-dropzone.doc.md-->
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import { useToast } from 'maz-ui/composables/useToast'
-
-const files = ref<File[]>([])
-const dropzone = ref<InstanceType<typeof MazDropzone>>()
-const toast = useToast()
-
-const onUploadSuccess = ({ file, response }) => {
-  console.log('Upload success:', file, response)
-  toast.success(`File ${file.name} uploaded successfully`)
-}
-
-const onUploadError = ({ file, code, error }) => {
-  console.error('Upload failed:', file, code, error)
-  toast.error(`File ${file.name} upload failed: ${code} - ${error}`)
-}
-
-const onUploadSuccessMultiple = ({ files, response }) => {
-  console.log('Upload multiple success:', files, response)
-  toast.success(`${files.length} files uploaded successfully`)
-}
-
-const onUploadErrorMultiple = ({ files, code, error }) => {
-  console.error('Upload multiple failed:', files, code, error)
-  toast.error(`${files.length} files upload failed: ${code} - ${error}`)
-}
-
-const onError = ({ files, event, code }) => {
-  console.error('Error:', files, event, code)
-  toast.error(`${files?.length} files upload failed: ${code} - ${files?.map(file => file.name).join(', ')}`)
-}
-
-const acceptedFormats = [
-  // iOS
-  '.strings',
-  '.stringsdict',
-  '.plist',
-  '.xliff',
-  '.xlf',
-  // Android
-  '.xml',
-  // Web
-  '.json',
-  '.yaml',
-  '.yml',
-  '.po',
-  '.pot',
-  '.mo',
-  // Java
-  '.properties',
-  // Flutter
-  '.arb',
-  // Général
-  '.csv',
-  '.tsv',
-  '.txt',
-  // MIME types fallback
-  'text/*',
-  'application/json',
-  'text/xml',
-  'application/xml',
-  'text/yaml',
-  'text/html',
-  'image/svg+xml',
-  'video/mp4',
-  'video/quicktime',
-  'video/mpeg',
-  'video/ogg',
-  'video/webm',
-  'audio/*',
-]
-</script>
+## MazDropzone API
+
+`import MazDropzone from 'maz-ui/components/MazDropzone'`
+
+### Props
+
+- `id` (`string`): The id of the dropzone.
+- `multiple` (`boolean`, default: `false`): Allow multiple files to be uploaded.
+- `data-types` (`string[]`, default: `['*\/*']`): Allowed data types/MIME types for files (e.g. ['application/json']).
+- `prevent-default-for-unhandled` (`boolean`, default: `true`): Prevent default behavior for unhandled drag & drop events.
+- `max-file-size` (`number`): Maximum file size in MB.
+- `max-files` (`number`): Maximum number of files allowed.
+- `disabled` (`boolean`, default: `false`): Disable the dropzone.
+- `preview` (`boolean`, default: `true`): Show file preview.
+- `min-file-size` (`number`): Minimum file size in MB.
+- `allow-duplicates` (`boolean`, default: `false`): Allow duplicates.
+- `translations` (`{ dragAndDrop?: string | undefined; selectFile?: string | undefined; divider?: string | undefined; fileMaxCount?: string | undefined; fileMaxSize?: string | undefined; fileTypes?: string | undefined; types?: { image?: string | undefined;...`): Translations - Custom translations for the component.
+- `color` (`"primary" | "secondary" | "accent" | "info" | "success" | "warning" | "destructive" | "contrast" | "transparent"`, default: `"primary"`): Main color of the component.
+- `remove-file-btn-props` (`MazBtnProps`, default: `{}`): MazBtn props [MazBtn props](./maz-btn.md#props).
+- `spinner-props` (`MazSpinnerProps`, default: `{}`): MazSpinner props [MazSpinner props](./maz-spinner.md#props).
+- `auto-upload` (`false | "multiple" | "single"`, default: `false`): Auto upload files - If set to `multiple`, all files will be uploaded at once in a single request. If set to `single`, files will be uploaded one by one in separate requests. If set to `false`, no upload will be done automatically.
+- `url` (`string`): Upload URL - If set, files will be uploaded to the given URL.
+- `request-options` (`RequestInit`): Request options - Request options to be used for the upload (using fetch) [Request options](https://developer.mozilla.org/en-US/docs/Web/API/fetch#options).
+- `transform-body` (`((formData: FormData) => BodyInit | null | undefined)`): Transform the body of the request.
+- `max-concurrent-uploads` (`number`, default: `5`): Maximum number of concurrent uploads - Limit the number of files uploaded simultaneously to avoid overwhelming the server.
+- `model-value` (`MazDropzoneFileData[]`, default: `[]`, `v-model`): The files data.
+
+### Events
+
+- `@error` (payload: `values: { files: File[] | null; event: DragEvent | null; code: MazDropzoneErrorCode; }`): Event emitted when an error occurs
+- `@add` (payload: `value: File`): Event emitted when a file is added to the dropzone
+- `@drop` (payload: `values: { files: File[] | null; event: DragEvent; }`): Event emitted when files are dropped in the dropzone
+- `@update:modelValue` (payload: `value: MazDropzoneFileData[]`)
+- `@enter` (payload: `values: { files: File[] | null; event: DragEvent; }`): Event emitted when dragged files enter the dropzone
+- `@leave` (payload: `values: { files: File[] | null; event: DragEvent; }`): Event emitted when dragged files leave the dropzone
+- `@over` (payload: `values: { files: File[] | null; event: DragEvent; }`): Event emitted when dragged files are over the dropzone
+- `@remove` (payload: `value: File`): Event emitted when a file is removed from the dropzone
+- `@upload-error` (payload: `values: { file: File; code: MazDropzoneErrorCode; error: unknown; }`): Event emitted when an error occurs during file upload
+- `@upload-error-multiple` (payload: `values: { files: File[]; code: MazDropzoneErrorCode; error: unknown; }`): Event emitted when an error occurs during multiple files upload
+- `@upload-success` (payload: `values: { file: File; response?: Response | undefined; }`): Event emitted when a file is successfully uploaded
+- `@upload-success-multiple` (payload: `values: { files: File[]; response?: Response | undefined; }`): Event emitted when multiple files are successfully uploaded
+
+### Slots
+
+- `#files-area`: Slot to customize the files area Bindings: `filesData: MazDropzoneFileData[]` (The files data).
+- `#file-item`: Slot to customize the file item Bindings: `file: MazDropzoneFileData` (The drop file data).
+- `#no-files-area`: Slot to customize the no files area Bindings: `selectFile: () => void` (The function to select the file).
+- `#upload-icon`: Slot to customize the upload icon
+
+### Exposed (template ref)
+
+- `uploadFiles`: Upload files
+- `uploadFilesMultiple`: Upload multiple files
+- `getFormData`: Get form data
+- `getFormDataMultiple`: Get form data multiple
+- `reset`: Reset the files
+- `isUploading`: Check if the files are uploading
+- `addFile`: Add a file to the dropzone
+- `removeFile`: Remove a file from the dropzone

package/docs/components/maz-expand-animation.md

@@ -0,0 +1,82 @@
+---
+title: "MazExpandAnimation"
+description: "MazExpandAnimation is a standalone component that allows you to animate the height of a block element"
+package: "maz-ui"
+url: "https://maz-ui.com/components/maz-expand-animation"
+---
+
+# MazExpandAnimation
+
+> MazExpandAnimation is a standalone component that allows you to animate the height of a block element
+
+- Package: `maz-ui`
+- Import: `import MazExpandAnimation from 'maz-ui/components/MazExpandAnimation'`
+- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
+- Web: https://maz-ui.com/components/maz-expand-animation
+
+> Before use it, you should install the MazUi plugin in your project, follow instructions in [Getting Started](../guide/getting-started.md)
+
+## Basic usage
+
+```vue
+<script lang="ts" setup>
+import MazExpandAnimation from 'maz-ui/components/MazExpandAnimation'
+import { ref } from 'vue'
+
+const visible = ref(false)
+</script>
+
+<template>
+  <MazBtn @click="visible = !visible">
+    Exec animation
+  </MazBtn>
+
+  <MazExpandAnimation v-model="visible">
+    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.
+    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.
+  </MazExpandAnimation>
+</template>
+```
+
+## Options
+
+- **duration**: `String` - default: `300ms` - Duration of the animation in ms
+- **timing-function**: `String` - default: `ease-in-out` - Timing function of the animation
+
+```vue
+<script lang="ts" setup>
+import MazExpandAnimation from 'maz-ui/components/MazExpandAnimation'
+import { ref } from 'vue'
+
+const visible = ref(false)
+</script>
+
+<template>
+  <MazBtn @click="visible = !visible">
+    Exec animation
+  </MazBtn>
+
+  <MazExpandAnimation v-model="visible" duration="1000ms" timing-function="linear">
+    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.
+    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.
+  </MazExpandAnimation>
+</template>
+```
+
+## MazExpandAnimation API
+
+`import MazExpandAnimation from 'maz-ui/components/MazExpandAnimation'`
+
+### Props
+
+- `duration` (`string`, default: `"300ms"`): Duration of the animation in milliseconds.
+- `timing-function` (`string`, default: `"ease-in-out"`): Timing function of the animation.
+- `model-value` (`boolean`, `v-model`)
+
+### Events
+
+- `@update:modelValue` (payload: `value: boolean | undefined`)
+
+### Slots
+
+- `#default`: Default Slot - Display content

package/docs/components/maz-fullscreen-loader.md

@@ -0,0 +1,58 @@
+---
+title: "MazFullscreenLoader"
+description: "MazFullscreenLoader is a standalone component"
+package: "maz-ui"
+url: "https://maz-ui.com/components/maz-fullscreen-loader"
+---
+
+# MazFullscreenLoader
+
+> MazFullscreenLoader is a standalone component
+
+- Package: `maz-ui`
+- Import: `import MazFullscreenLoader from 'maz-ui/components/MazFullscreenLoader'`
+- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
+- Web: https://maz-ui.com/components/maz-fullscreen-loader
+
+> Before use it, you should install the MazUi plugin in your project, follow instructions in [Getting Started](../guide/getting-started.md)
+
+## Basic usage
+
+```vue
+<script lang="ts" setup>
+import { MazBtn, MazFullscreenLoader } from 'maz-ui/components'
+
+import { ref } from 'vue'
+
+const showLoader = ref(false)
+</script>
+
+<template>
+  <MazFullscreenLoader v-if="showLoader" @click="showLoader = false">
+    <p>
+      Loading...
+    </p>
+    <p>
+      (click to hide loader)
+    </p>
+  </MazFullscreenLoader>
+
+  <MazBtn @click="showLoader = true">
+    Show loader
+  </MazBtn>
+</template>
+```
+
+## MazFullscreenLoader API
+
+`import MazFullscreenLoader from 'maz-ui/components/MazFullscreenLoader'`
+
+### Props
+
+- `color` (`"primary" | "secondary" | "accent" | "info" | "success" | "warning" | "destructive" | "contrast" | "transparent"`, default: `"primary"`): The color of the spinner.
+- `size` (`` `${number}rem` | `${number}px` | `${number}em` | `${number}vw` | `${number}vh` | `${number}vmin` | `${number}vmax` | `${number}%` | `${number}ch` | `${number}cm` | `${number}mm` | `${number}in` | `${number}ex` | `${number}pc` | `${number... ``, default: `"3em"`): The size of the spinner.
+- `teleport-selector` (`string`, default: `"body"`): The selector to teleport the loader.
+
+### Slots
+
+- `#default`

package/docs/components/maz-gallery.md

@@ -0,0 +1,79 @@
+---
+title: "MazGallery"
+description: "MazGallery is a standalone component used to display images in a container and has many options and actions"
+package: "maz-ui"
+url: "https://maz-ui.com/components/maz-gallery"
+---
+
+# MazGallery
+
+> MazGallery is a standalone component used to display images in a container and has many options and actions
+
+- Package: `maz-ui`
+- Import: `import MazGallery from 'maz-ui/components/MazGallery'`
+- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
+- Web: https://maz-ui.com/components/maz-gallery
+
+> Before use it, you should install the MazUi plugin in your project, follow instructions in [Getting Started](../guide/getting-started.md)
+
+## Basic usage
+
+```vue
+<script lang="ts" setup>
+import { MazGallery, type MazGalleryImage } from 'maz-ui/components'
+
+const images: MazGalleryImage[] = [
+  'https://placedog.net/640/400',
+  { src: 'https://placedog.net/640/600', thumbnail: 'https://placedog.net/100/100', alt: 'image description' },
+  { src: 'https://placedog.net/640/700', alt: 'image description' },
+  'https://placedog.net/640/800',
+  'https://placedog.net/640/1000',
+  'https://placedog.net/800/800'
+]
+</script>
+
+<template>
+  <MazGallery
+    :images
+    :height="320"
+  />
+</template>
+```
+
+## Set height by CSS
+
+```html
+<MazGallery :images="images" class="h-48 md:h-60 lg:h-80" :height="false" />
+```
+
+## Types
+
+```ts
+type MazGalleryImage
+  = | {
+    thumbnail?: string
+    src: string
+    alt?: string
+  }
+  | string
+```
+
+## MazGallery API
+
+`import MazGallery from 'maz-ui/components/MazGallery'`
+
+### Props
+
+- `images` (`MazGalleryImage[]`, default: `[]`): Array of string or object: `['https://via.placeholder.com/500', 'https://via.placeholder.com/600']` or `[{ slug: 'https://via.placeholder.com/500', alt: 'image descripton' }, { slug: 'https://via.placeholder.com/600', alt: 'image descripton' }]`.
+- `displayed-count` (`number`, default: `5`): Images count shown (max: 5).
+- `remaining` (`boolean`, default: `true`): Remove transparent layer with the remain count (ex: +2).
+- `height` (`string | number | false`, default: `"100%"`): Height of gallery - set to `false` to remove default height.
+- `width` (`string | number | false`, default: `"100%"`): Width of gallery - set to `false` to remove default width.
+- `radius` (`boolean`, default: `true`): Disable the border radius of the gallery.
+- `zoom` (`boolean`, default: `true`): Disable full size display when clicking on image.
+- `has-empty-layer` (`boolean`, default: `true`): Layer with photography icon when no images is provided.
+- `lazy` (`boolean`, default: `true`): Lazy load image - if false, images are directly loaded.
+- `blur` (`boolean`, default: `true`): Disable blur effect on image hover.
+- `scale` (`boolean`, default: `true`): Disable scale animation effect on image hover.
+- `separator-color` (`string`, default: `"transparent"`): Choose color of borders between images - Should be a CSS color or CSS variable - Ex: `#000`.
+- `background-color` (`string`): Choose background color of the gallery - Should be a CSS color or CSS variable - Ex: `#000`.