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

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

@@ -1,85 +1,24 @@
 ---
-title: MazStepper
-description: MazStepper is a standalone UI component customizable, reactive for intuitive step-by-step navigation. Ideal for guiding users through forms, workflows, or checkout processes.
+title: "MazStepper"
+description: "MazStepper is a standalone UI component customizable, reactive for intuitive step-by-step navigation. Ideal for guiding users through forms, workflows, or checkout processes."
+package: "maz-ui"
+url: "https://maz-ui.com/components/maz-stepper"
 ---
 
-# {{ $frontmatter.title }}
+# MazStepper
 
-{{ $frontmatter.description }}
+> MazStepper is a standalone UI component customizable, reactive for intuitive step-by-step navigation. Ideal for guiding users through forms, workflows, or checkout processes.
 
-<!--@include: ./../../.vitepress/mixins/getting-started.md-->
+- Package: `maz-ui`
+- Import: `import MazStepper from 'maz-ui/components/MazStepper'`
+- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
+- Web: https://maz-ui.com/components/maz-stepper
 
-## Basic usage
+> Before use it, you should install the MazUi plugin in your project, follow instructions in [Getting Started](../guide/getting-started.md)
 
-<MazStepper auto-validate-steps>
-  <template #title-1>
-      Sign-In
-  </template>
-  <template #subtitle-1>
-    You should be sign-in to continue
-  </template>
-  <template #title-info-1>
-    Required
-  </template>
-  <template #content-1="{ nextStep }">
-    <form @submit.prevent="nextStep">
-      <MazInput v-model="email" label="E-mail" type="email" autocomplete="new-email" name="new-email" />
-      <br />
-      <br />
-      <MazInput v-model="password" label="password" type="password" autocomplete="new-password" name="new-password" />
-      <br />
-      <br />
-      <MazBtn type="submit">
-        Sign-In
-      </MazBtn>
-    </form>
-  </template>
-
-  <template #title-2>
-    Delivery address
-  </template>
-  <template #subtitle-2>
-    Where should we deliver your package?
-  </template>
-  <template #title-info-2>
-    {{ address }}
-  </template>
-  <template #content-2="{ nextStep, previousStep }">
-    <MazInput v-model="address" label="Delivery address" />
-    <br />
-    <br />
-    <div class="maz:flex maz:gap-4">
-      <MazBtn @click="previousStep" color="secondary">
-        Previous
-      </MazBtn>
-      <MazBtn @click="nextStep">
-        Validate
-      </MazBtn>
-    </div>
-  </template>
-
-  <template #title-3>
-    Checkout
-  </template>
-  <template #subtitle-3>
-    Provide credit card
-  </template>
-  <template #content-3="{ nextStep, previousStep }">
-    <MazInput label="Credit card number" type="number" />
-    <br />
-    <br />
-    <div class="maz:flex maz:gap-4">
-      <MazBtn @click="previousStep" color="secondary">
-        Previous
-      </MazBtn>
-      <MazBtn @click="nextStep">
-        Payment
-      </MazBtn>
-    </div>
-  </template>
-</MazStepper>
+## Basic usage
 
-::: details View code
+**Details: View code**
 
 ```vue
 <template>
@@ -157,31 +96,18 @@ description: MazStepper is a standalone UI component customizable, reactive for
 </script>
 ```
 
-:::
-
 ## Use `step` property instead of slots
 
 Instead of using slots, you can provide its data with the `steps` property
 
 You can use html in all properties
 
-<MazStepper
-  :steps="[
-    { title: 'Title 1', subtitle: 'Subtitle 1', titleInfo: 'Info 1', content: 'Content 1' },
-    { title: 'Title 2', subtitle: `<span class='maz:text-primary'>Subtitle 2</span>`, titleInfo: 'Info 2', content: 'Content 2' },
-    { title: 'Title 3', subtitle: 'Subtitle 3', titleInfo: 'Info 3', content: 'Content 3' },
-    { title: 'Title 4', subtitle: 'Subtitle 4', titleInfo: 'Info 4', content: 'Content 4' },
-  ]"
->
-
-</MazStepper>
-
 ```vue{3-8}
 <template>
   <MazStepper
     :steps="[
       { title: 'Title 1', subtitle: 'Subtitle 1', titleInfo: 'Info 1', content: 'Content 1' },
-      { title: 'Title 2', subtitle: '<span class="maz:text-primary">Subtitle 2</span>', titleInfo: 'Info 2', content: 'Content 2' },
+      { title: 'Title 2', subtitle: '<span class="text-primary">Subtitle 2</span>', titleInfo: 'Info 2', content: 'Content 2' },
       { title: 'Title 3', subtitle: 'Subtitle 3', titleInfo: 'Info 3', content: 'Content 3' },
       { title: 'Title 4', subtitle: 'Subtitle 4', titleInfo: 'Info 4', content: 'Content 4' },
     ]"
@@ -191,16 +117,6 @@ You can use html in all properties
 
 ## Replace default step point
 
-<MazStepper
-  :steps="[
-      { title: 'Title 1', subtitle: 'Subtitle 1', titleInfo: 'Info 1', content: 'Content 1' },
-      { title: 'Title 2', subtitle: 'Subtitle 2', titleInfo: 'Info 2', content: 'Content 2' },
-  ]">
-  <template #point="{ step }">
-    <div class="maz:bg-red-500 maz:p-1 maz:size-8 maz:rounded-md maz:flex maz:flex-center">{{ step }}</div>
-  </template>
-</MazStepper>
-
 ```vue{8-10}
 <template>
   <MazStepper
@@ -224,33 +140,6 @@ States available: `'success' | 'warning' | 'error' | 'disabled'`
 
 You should respect order of steps in the array:
 
-<MazStepper
-  v-model="currentStep"
-  :steps="[
-    { disabled: true },
-    { success: true },
-    { warning: true, disabled: true },
-    { error: true },
-  ]"
->
-
-  <template #title-1> Title 1 </template>
-  <template #title-info-1> Disabled </template>
-  <template #content-1> Content 1 </template>
-
-  <template #title-2> Title 2 </template>
-  <template #title-info-2> Success </template>
-  <template #content-2> Content 2 </template>
-
-  <template #title-3> Title 3 </template>
-  <template #title-info-3> Warning & Disabled </template>
-  <template #content-3> Content 3 </template>
-
-  <template #title-4> Title 4 </template>
-  <template #title-info-4> Error </template>
-  <template #content-4> Content 4 </template>
-</MazStepper>
-
 ```vue{4-9}
 <template>
   <MazStepper
@@ -289,20 +178,9 @@ You can use the prop option:
 
 Then all previous steps then the current and then the validated state
 
-::: tip
-Click on the first or third step to see the validated steps changes:
-:::
-
-<MazStepper v-model="currentStep" auto-validate-steps color="secondary">
-  <template #title-1> Step 1 </template>
-  <template #content-1> Content 1 </template>
+**Tip:**
 
-  <template #title-2> Step 2 </template>
-  <template #content-2> Content 2 </template>
-
-  <template #title-3> Step 3 </template>
-  <template #content-3> Content 3 </template>
-</MazStepper>
+Click on the first or third step to see the validated steps changes:
 
 ```vue{4}
 <template>
@@ -335,20 +213,9 @@ To not allow your users to go to the next steps, you can use the following prop
 - `disabled-previous-steps`
 - `disabled-next-steps`
 
-::: tip
-Try to click on first and third steps
-:::
-
-<MazStepper :model-value="2" disabled-previous-steps disabled-next-steps>
-  <template #title-1> Step 1 </template>
-  <template #content-1> Content 1 </template>
+**Tip:**
 
-  <template #title-2> Step 2 </template>
-  <template #content-2> Content 2 </template>
-
-  <template #title-3> Step 3 </template>
-  <template #content-3> Content 3 </template>
-</MazStepper>
+Try to click on first and third steps
 
 ```vue{4,5}
 <template>
@@ -381,35 +248,13 @@ To open and validate all steps, you can use the following prop options:
 - `all-steps-validated`
 - `all-steps-opened`
 
-<MazStepper all-steps-validated all-steps-opened>
-  <template #title-1> Step 1 </template>
-  <template #content-1> Content 1 </template>
-
-  <template #title-2> Step 2 </template>
-  <template #content-2> Content 2 </template>
-
-  <template #title-3> Step 3 </template>
-  <template #content-3> Content 3 </template>
-</MazStepper>
-
 ## Can close steps
 
 Use the property `can-close-steps` to let the user be able to close each step on click
 
-::: tip
-Click on step titles to toggle content
-:::
-
-<MazStepper can-close-steps>
-  <template #title-1> Step 1 </template>
-  <template #content-1> Content 1 </template>
-
-  <template #title-2> Step 2 </template>
-  <template #content-2> Content 2 </template>
+**Tip:**
 
-  <template #title-3> Step 3 </template>
-  <template #content-3> Content 3 </template>
-</MazStepper>
+Click on step titles to toggle content
 
 ## Types
 
@@ -427,17 +272,35 @@ type Steps = Array<{
 }>
 ```
 
-<script setup lang="ts">
-  import { ref } from 'vue'
-
-  const currentStep = ref(2)
-  const address = ref('20 Cooper Square')
-  const email = ref()
-  const password = ref()
-</script>
-
 ## Accessibility
 
 Each step header is a button exposing the current step (`aria-current="step"`) and its open state (`aria-expanded`), and controls its content (`aria-controls`), labelled by the header. The ids are unique per instance.
 
-<!--@include: ./../../.vitepress/generated-docs/maz-stepper.doc.md-->
+## MazStepper API
+
+`import MazStepper from 'maz-ui/components/MazStepper'`
+
+### Props
+
+- `model-value` (`number`, `v-model`): The current step.
+- `steps` (`MazStepperStep[]`): The steps.
+- `color` (`"primary" | "secondary" | "accent" | "info" | "success" | "warning" | "destructive" | "contrast" | "transparent"`, default: `"primary"`): The color of the stepper.
+- `disabled-next-steps` (`boolean`): Disable the next steps.
+- `disabled-previous-steps` (`boolean`): Disable the previous steps.
+- `auto-validate-steps` (`boolean`): Auto validate the steps.
+- `all-steps-opened` (`boolean`): Open all steps.
+- `all-steps-validated` (`boolean`): Validate all steps.
+- `can-close-steps` (`boolean`): Allow to close the steps.
+
+### Events
+
+- `@update:model-value` (payload: `value: number`)
+
+### Slots
+
+- `#point` Bindings: `step: number`.
+- `#icon-{step}`: One slot per `step`: `#icon-<step>`.
+- `#title-{step}`: One slot per `step`: `#title-<step>`.
+- `#subtitle-{step}`: One slot per `step`: `#subtitle-<step>`.
+- `#title-info-{step}`: One slot per `step`: `#title-info-<step>`.
+- `#content-{step}`: One slot per `step`: `#content-<step>`.

package/docs/components/maz-switch.md

@@ -0,0 +1,86 @@
+---
+title: "MazSwitch"
+description: "MazSwitch is a standalone component that replaces the standard html input checkbox. Color options are available."
+package: "maz-ui"
+url: "https://maz-ui.com/components/maz-switch"
+---
+
+# MazSwitch
+
+> MazSwitch is a standalone component that replaces the standard html input checkbox. Color options are available.
+
+- Package: `maz-ui`
+- Import: `import MazSwitch from 'maz-ui/components/MazSwitch'`
+- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
+- Web: https://maz-ui.com/components/maz-switch
+
+> Before use it, you should install the MazUi plugin in your project, follow instructions in [Getting Started](../guide/getting-started.md)
+
+```vue
+<template>
+  <MazSwitch
+    v-for="color in colors"
+    v-model="switchValue"
+    :color="color"
+    :name="color"
+    :key="color"
+  />
+
+  <p>Disabled</p>
+
+  <MazSwitch
+    v-model="switchValue"
+    name="disabled"
+    disabled
+  >
+    {{ color }}
+  </MazSwitch>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue'
+  import MazSwitch from 'maz-ui/components/MazSwitch'
+
+  const switchValue = ref(false)
+  const switchValueDisabled = ref(false)
+
+  const colors = [
+    'primary',
+    'secondary',
+    'info',
+    'success',
+    'warning',
+    'destructive',
+    'accent',
+    'contrast',
+  ]
+</script>
+```
+
+## MazSwitch API
+
+`import MazSwitch from 'maz-ui/components/MazSwitch'`
+
+### Props
+
+- `model-value` (`boolean`, default: `false`, `v-model`): The model value of the switch.
+- `id` (`string`): The id of the switch.
+- `disabled` (`boolean`): If the switch is disabled.
+- `name` (`string`): The name of the switch.
+- `label` (`string`): Text label.
+- `color` (`"primary" | "secondary" | "accent" | "info" | "success" | "warning" | "destructive" | "contrast" | "transparent"`, default: `"primary"`): The color of the switch.
+- `error` (`boolean`): Whether there is an error with the input.
+- `success` (`boolean`): Whether the input is successful.
+- `warning` (`boolean`): Whether there is a warning with the input.
+- `hint` (`string`): The hint text to display below the input.
+
+### Events
+
+- `@update:model-value` (payload: `value: boolean`): Emitted when the model value changes
+- `@blur` (payload: `value: FocusEvent`): Emitted when the switch lost focus
+- `@change` (payload: `value: boolean`): Emitted when the model value changes
+- `@focus` (payload: `value: FocusEvent`): Emitted when the switch is focused
+
+### Slots
+
+- `#default`: The label of the switch Bindings: `value: boolean` (The value of the switch).

package/docs/components/maz-table-cell.md

@@ -0,0 +1,27 @@
+---
+title: "MazTableCell"
+description: "Cell of a MazTableRow, with the size and padding of MazTable."
+package: "maz-ui"
+---
+
+# MazTableCell
+
+> Cell of a MazTableRow, with the size and padding of MazTable.
+
+- Package: `maz-ui`
+- Import: `import MazTableCell from 'maz-ui/components/MazTableCell'`
+- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
+
+Used inside [MazTable](./maz-table.md): read its page for complete examples.
+
+## MazTableCell API
+
+`import MazTableCell from 'maz-ui/components/MazTableCell'`
+
+### Props
+
+No props.
+
+### Slots
+
+- `#default`

package/docs/components/maz-table-row.md

@@ -0,0 +1,28 @@
+---
+title: "MazTableRow"
+description: "Row of MazTable, when you write the rows by hand in its default slot."
+package: "maz-ui"
+---
+
+# MazTableRow
+
+> Row of MazTable, when you write the rows by hand in its default slot.
+
+- Package: `maz-ui`
+- Import: `import MazTableRow from 'maz-ui/components/MazTableRow'`
+- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
+
+Used inside [MazTable](./maz-table.md): read its page for complete examples.
+
+## MazTableRow API
+
+`import MazTableRow from 'maz-ui/components/MazTableRow'`
+
+### Props
+
+- `hoverable` (`boolean`, default: `true`): Override hoverable of table props.
+- `is-head` (`boolean`, default: `false`): If true, the row is a head row.
+
+### Slots
+
+- `#default`

package/docs/components/maz-table-title.md

@@ -0,0 +1,27 @@
+---
+title: "MazTableTitle"
+description: "Header cell of MazTable, when you write the header by hand."
+package: "maz-ui"
+---
+
+# MazTableTitle
+
+> Header cell of MazTable, when you write the header by hand.
+
+- Package: `maz-ui`
+- Import: `import MazTableTitle from 'maz-ui/components/MazTableTitle'`
+- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
+
+Used inside [MazTable](./maz-table.md): read its page for complete examples.
+
+## MazTableTitle API
+
+`import MazTableTitle from 'maz-ui/components/MazTableTitle'`
+
+### Props
+
+No props.
+
+### Slots
+
+- `#default`

package/docs/components/maz-table-virtualizer.md

@@ -0,0 +1,31 @@
+---
+title: "MazTableVirtualizer"
+description: "Renderless provider loaded on demand by MazTable to virtualize long lists of rows."
+package: "maz-ui"
+---
+
+# MazTableVirtualizer
+
+> Renderless provider loaded on demand by MazTable to virtualize long lists of rows.
+
+- Package: `maz-ui`
+- Import: `import MazTableVirtualizer from 'maz-ui/components/MazTableVirtualizer'`
+
+## MazTableVirtualizer API
+
+`import MazTableVirtualizer from 'maz-ui/components/MazTableVirtualizer'`
+
+### Props
+
+- `count` (`number`, required): Total number of rows to virtualize.
+- `scroll-element` (`HTMLElement | null`, default: `null`): Scrollable viewport element the virtualizer observes.
+- `estimate-size` (`number`, default: `44`): Fixed per-row height used to place rows and size the spacers.
+- `overscan` (`number`, default: `10`): Rows rendered outside the viewport on each side.
+
+### Events
+
+- `@change` (payload: `window: MazTableVirtualWindow`)
+
+### Slots
+
+- `#default`