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

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

@@ -1,11 +1,18 @@
 ---
-title: MazChart
-description: MazChart is a standalone component which generates graphics & charts with chart.js
+title: "MazChart"
+description: "MazChart is a standalone component which generates graphics & charts with chart.js"
+package: "maz-ui"
+url: "https://maz-ui.com/components/maz-chart"
 ---
 
-# {{ $frontmatter.title }}
+# MazChart
 
-{{ $frontmatter.description }}
+> MazChart is a standalone component which generates graphics & charts with chart.js
+
+- Package: `maz-ui`
+- Import: `import MazChart from 'maz-ui/components/MazChart'`
+- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
+- Web: https://maz-ui.com/components/maz-chart
 
 ## Documentation
 
@@ -13,19 +20,15 @@ Follow the [Chart.JS](https://www.chartjs.org/docs/latest/) documentation to cre
 
 You can use all the plugins of Chart.JS. Follow the examples below.
 
-::: tip Performance
-`MazChart` lazy-loads `chart.js` on mount and registers only the controllers, elements and scales needed for the chart `type` you requested. A `<MazChart type="pie">` won't pull `BarController`, `LineElement` or any other unused module. The chart instance is also held outside Vue's reactivity (`shallowRef` + `markRaw`) — this avoids accidental deep proxying of the underlying chart and the freezes that can come with it on large datasets.
+**Tip: Performance**
+
+`MazChart` lazy-loads `chart.js` on mount and registers only the controllers, elements and scales needed for the chart `type` you requested. A `<MazChart type="pie">` won't pull `BarController`, `LineElement` or any other unused module. The chart instance is also held outside Vue's reactivity (`shallowRef` + `markRaw`) - this avoids accidental deep proxying of the underlying chart and the freezes that can come with it on large datasets.
 
 When `data` or `options` change after the initial render, `chart.update()` is called with `'none'` by default so updates don't animate. Pass `update-mode="default"` (or any other Chart.js update mode) to opt back into animations.
-:::
 
 ## Bar chart
 
-<MazChart
-  v-bind="{ ...barChart }"
-/>
-
-::: details View code
+**Details: View code**
 
 ```vue
 <script setup lang="ts">
@@ -71,19 +74,9 @@ const barChart = {
 </template>
 ```
 
-:::
-
 ## Pie chart
 
-<br/>
-
-<MazChart
-  :type="pieChart.type"
-  :data="pieChart.data"
-  :options="pieChart.options"
-/>
-
-::: details View code
+**Details: View code**
 
 ```vue
 <script setup lang="ts">
@@ -121,15 +114,9 @@ const pieChart = {
 </template>
 ```
 
-:::
-
 ## Line chart
 
-<br/>
-
-<MazChart v-bind="lineChart" />
-
-::: details View code
+**Details: View code**
 
 ```vue
 <script setup lang="ts">
@@ -199,139 +186,10 @@ const lineChart = {
 </template>
 ```
 
-:::
-
-<script setup lang="ts">
-  import dataLabels from 'chartjs-plugin-datalabels'
-
-  let delayed: boolean
-
-  const animation = {
-    onComplete: () => {
-      delayed = true
-    },
-    delay: (context: Record<string, any>) => {
-      let delay = 0
-      if (context.type === 'data' && context.mode === 'default' && !delayed) {
-        delay = context.dataIndex *100 + context.datasetIndex* 50
-      }
-      return delay
-    },
-  }
-
-  const pieChart = {
-    type: 'doughnut',
-    data: {
-      labels: [
-        `Perfects - ${40}%`,
-        `Bons - ${35}%`,
-        `Mauvais - ${25}%`,
-      ],
-      datasets: [
-        {
-          backgroundColor: [
-            '#fcb731',
-            'rgb(28 209 161)',
-            'rgb(255, 109, 106)',
-          ],
-          data: [
-            40,
-            35,
-            25,
-          ],
-        },
-      ],
-    },
-  }
-
-  const lineChart = {
-    type: 'line',
-    // locally registered and available for this chart
-    plugins: [dataLabels],
-    data: {
-      labels: [1, 2, 3, 4, 5, 6],
-      datasets: [
-        {
-          label: 'Moyenne des bons pronos du groupe',
-          data: [10, 15, 20, 25, 30, 35],
-          fill: false,
-          borderColor: 'rgb(28 209 161)',
-          tension: 0.5,
-          backgroundColor: '#17a2b8',
-        },
-        {
-          label: 'Vos bons pronos',
-          data: [20, 15, 15, 30, 22, 40],
-          fill: false,
-          borderColor: '#333',
-          tension: 0.5,
-          backgroundColor: '#1e90ff',
-        },
-      ],
-    },
-    options: {
-      plugins: {
-        datalabels: {
-          backgroundColor: (context: Record<string, any>) => {
-            return context.dataset.backgroundColor
-          },
-          borderRadius: 4,
-          color: 'white',
-          font: {
-            weight: 'bold',
-          },
-          padding: 6,
-        },
-      },
-      animation,
-    }
-  }
-
-  const barChart = {
-    type: 'bar',
-    data: {
-      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-      datasets: [{
-        label: 'My First Dataset',
-        data: [65, 59, 80, 81, 56, 55, 40],
-        backgroundColor: [
-          'rgba(255, 99, 132, 0.2)',
-          'rgba(255, 159, 64, 0.2)',
-          'rgba(255, 205, 86, 0.2)',
-          'rgba(75, 192, 192, 0.2)',
-          'rgba(54, 162, 235, 0.2)',
-          'rgba(153, 102, 255, 0.2)',
-          'rgba(201, 203, 207, 0.2)'
-        ],
-        borderColor: [
-          'rgb(255, 99, 132)',
-          'rgb(255, 159, 64)',
-          'rgb(255, 205, 86)',
-          'rgb(75, 192, 192)',
-          'rgb(54, 162, 235)',
-          'rgb(153, 102, 255)',
-          'rgb(201, 203, 207)'
-        ],
-        borderWidth: 1
-      }]
-    },
-  }
-</script>
-
-## Accessibility
-
-A chart is drawn in a `<canvas>`, which has no accessible content. Give it a name with `aria-label` (or `aria-labelledby`): the canvas is then exposed as an image (`role="img"`). For complex data, also provide the values in text (a table, a summary) next to the chart.
-
 ```vue
 <MazChart type="bar" :data="data" aria-label="Sales by quarter, from 120 to 340 units" />
 ```
 
-<!--@include: ./../../.vitepress/generated-docs/maz-chart.doc.md-->
-
-## Types
-
-`MazChartProps` is generic over the chart type, the data point shape and the label type — it mirrors the same generic signature as `Chart.js` itself:
-
 ```ts
 interface MazChartProps<
   T extends ChartType = ChartType,
@@ -346,5 +204,3 @@ interface MazChartProps<
   updateMode?: UpdateMode
 }
 ```
-
-For the underlying types, see [chart.js types](https://www.chartjs.org/docs/latest/api/).

package/docs/components/maz-checkbox.md

@@ -0,0 +1,138 @@
+---
+title: "MazCheckbox"
+description: "MazCheckbox 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-checkbox"
+---
+
+# MazCheckbox
+
+> MazCheckbox is a standalone component that replaces the standard html input checkbox. Color options are available.
+
+- Package: `maz-ui`
+- Import: `import MazCheckbox from 'maz-ui/components/MazCheckbox'`
+- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
+- Web: https://maz-ui.com/components/maz-checkbox
+
+> Before use it, you should install the MazUi plugin in your project, follow instructions in [Getting Started](../guide/getting-started.md)
+
+## Basic usage
+
+`v-model=""`
+
+```vue
+<script lang="ts" setup>
+import MazCheckbox from 'maz-ui/components/MazCheckbox'
+import { ref } from 'vue'
+
+const checked = ref(false)
+</script>
+
+<template>
+  <MazCheckbox v-model="checked" :label="checked ? 'Checked' : 'Unchecked'" />
+</template>
+```
+
+## Colors
+
+`v-model=""`
+
+**Details: View code**
+
+```vue
+<script lang="ts" setup>
+import type { Color } from 'maz-ui/components'
+import MazCheckbox from 'maz-ui/components/MazCheckbox'
+import { ref } from 'vue'
+
+const chosenColors = ref([])
+
+const colors: Color[] = [
+  'primary',
+  'secondary',
+  'info',
+  'success',
+  'warning',
+  'destructive',
+  'contrast',
+  'accent',
+]
+</script>
+
+<template>
+  <MazCheckbox
+    v-for="color in colors"
+    :id="color"
+    :key="color"
+    v-model="chosenColors"
+    :color="color"
+    name="color"
+    :value="color"
+  >
+    {{ color }}
+  </MazCheckbox>
+</template>
+```
+
+## Sizing
+
+`v-model=""`
+
+**Details: View code**
+
+```vue
+<script lang="ts" setup>
+import type { MazSize } from 'maz-ui/components'
+import MazCheckbox from 'maz-ui/components/MazCheckbox'
+import { ref } from 'vue'
+
+const chosenSizes = ref([])
+
+const sizes: MazSize[] = ['mini', 'xs', 'sm', 'md', 'lg', 'xl']
+</script>
+
+<template>
+  <MazCheckbox
+    v-for="size in sizes"
+    :key="size"
+    v-model="chosenSizes"
+    name="size"
+    :value="size"
+    :size="size"
+  >
+    {{ size }}
+  </MazCheckbox>
+</template>
+```
+
+## Disabled
+
+## MazCheckbox API
+
+`import MazCheckbox from 'maz-ui/components/MazCheckbox'`
+
+### Props
+
+- `model-value` (`T`, `v-model`): The model value of the checkbox.
+- `id` (`string`): The id of the checkbox.
+- `color` (`"primary" | "secondary" | "accent" | "info" | "success" | "warning" | "destructive" | "contrast" | "transparent"`, default: `"primary"`): The color of the checkbox.
+- `value` (`MazCheckboxValue`): The value of the checkbox when selected.
+- `name` (`string`, default: `"m-checkbox"`): The name of the checkbox.
+- `size` (`"xs" | "sm" | "md" | "lg" | "xl" | "mini"`): The size of the checkbox.
+- `label` (`string`): Text label.
+- `disabled` (`boolean`): If the checkbox is disabled.
+- `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: T`): Emitted when the model value change
+- `@blur` (payload: `value: FocusEvent`): Emitted when the checkbox lost focus
+- `@change` (payload: `value: T`): Emitted when the model value change
+- `@focus` (payload: `value: FocusEvent`): Emitted when the checkbox is focused
+
+### Slots
+
+- `#default` Bindings: `value: MazCheckboxValue`.

package/docs/components/maz-checklist.md

@@ -0,0 +1,251 @@
+---
+title: "MazChecklist"
+description: "MazChecklist is a standalone component that allows creating a checklist with integrated search functionality. It provides a flexible and customizable user interface for selecting multiple items from a list of options. The component supports real-time search, color customization, and displays messages when no results are found."
+package: "maz-ui"
+url: "https://maz-ui.com/components/maz-checklist"
+---
+
+# MazChecklist
+
+> MazChecklist is a standalone component that allows creating a checklist with integrated search functionality. It provides a flexible and customizable user interface for selecting multiple items from a list of options. The component supports real-time search, color customization, and displays messages when no results are found.
+
+- Package: `maz-ui`
+- Import: `import MazChecklist from 'maz-ui/components/MazChecklist'`
+- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
+- Web: https://maz-ui.com/components/maz-checklist
+
+> 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
+<template>
+  Selected languages: {{ languages || 'none' }}
+
+  <br />
+
+  <MazChecklist
+    v-model="languages"
+    v-model:query="query"
+    title="Select your languages"
+    :search="{
+      enabled: true,
+      placeholder: 'Search a language',
+      debounce: 300,
+      autoFocus: false,
+      size: 'sm'
+    }"
+    :items="languagesOptions"
+    class="h-80"
+  >
+    <template #item="{ item }">
+      <div class="flex w-full items-center justify-between gap-2">
+        <span class="capitalize">{{ item.label }}</span>
+        <MazBadge color="theme" outlined>
+          {{ item.value }}
+        </MazBadge>
+      </div>
+    </template>
+  </MazChecklist>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue'
+  import MazChecklist from 'maz-ui/components/MazChecklist'
+  import { useDisplayNames } from 'maz-ui/composables/useDisplayNames'
+
+  const query = ref<string>()
+  const languages = ref<string[]>()
+  const languagesOptions = useDisplayNames('en-US').getAllDisplayNames({ type: 'language' }).value.map(({ code, name }) => ({
+    label: name,
+    value: code,
+  }))
+</script>
+```
+
+## Custom search function
+
+You can replace the default search function by providing a custom search function. Useful when you need to search by multiple fields, if you want to use a different search algorithm or if you want search into your database by fetching data from an API.
+
+```vue
+<template>
+  Selected employees: {{ selectedEmployees || 'none' }}
+
+  <br />
+
+  <MazChecklist
+    v-model="selectedEmployees"
+    v-model:query="employeeQuery"
+    title="Select team members"
+    :search="{
+      placeholder: 'Search by name, email, or department...',
+      debounce: 200,
+      block: true,
+    }"
+    :items="employees"
+    :search-function="customEmployeeSearch"
+    color="success"
+    elevation
+    class="max-h-96"
+  >
+    <template #item="{ item }">
+      <div class="flex w-full items-center gap-4">
+        <div class="flex h-12 w-12 flex-none items-center justify-center rounded-full bg-linear-to-br from-primary-500 to-secondary-500 text-white font-semibold text-lg">
+          {{ item.initials }}
+        </div>
+        <div class="flex flex-1 flex-col gap-1">
+          <div class="flex items-center gap-2">
+            <span class="font-semibold text-normal">{{ item.label }}</span>
+            <MazBadge :color="item.departmentColor" size="xs">
+              {{ item.department }}
+            </MazBadge>
+          </div>
+          <span class="text-muted text-sm">{{ item.email }}</span>
+        </div>
+        <div class="flex flex-none items-center gap-1">
+          <MazIcon icon="/star.svg" class="text-warning-500" size="1rem" />
+          <span class="text-sm font-medium">{{ item.rating }}</span>
+        </div>
+      </div>
+    </template>
+  </MazChecklist>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue'
+  import MazChecklist from 'maz-ui/components/MazChecklist'
+
+  const employeeQuery = ref<string>()
+  const selectedEmployees = ref<string[]>()
+
+  const employees = [
+    {
+      label: 'Sarah Johnson',
+      value: 'sarah.johnson',
+      email: 'sarah.johnson@company.com',
+      department: 'Engineering',
+      departmentColor: 'info',
+      initials: 'SJ',
+      rating: 4.9
+    },
+    {
+      label: 'Michael Chen',
+      value: 'michael.chen',
+      email: 'michael.chen@company.com',
+      department: 'Design',
+      departmentColor: 'warning',
+      initials: 'MC',
+      rating: 4.7
+    },
+    {
+      label: 'Emma Rodriguez',
+      value: 'emma.rodriguez',
+      email: 'emma.rodriguez@company.com',
+      department: 'Marketing',
+      departmentColor: 'success',
+      initials: 'ER',
+      rating: 4.8
+    },
+    {
+      label: 'David Kim',
+      value: 'david.kim',
+      email: 'david.kim@company.com',
+      department: 'Engineering',
+      departmentColor: 'info',
+      initials: 'DK',
+      rating: 4.6
+    },
+    {
+      label: 'Lisa Thompson',
+      value: 'lisa.thompson',
+      email: 'lisa.thompson@company.com',
+      department: 'Product',
+      departmentColor: 'contrast',
+      initials: 'LT',
+      rating: 4.9
+    },
+    {
+      label: 'John Doe',
+      value: 'john.doe',
+      email: 'john.doe@company.com',
+      department: 'Marketing',
+      departmentColor: 'success',
+      initials: 'JD',
+      rating: 4.9
+    },
+    {
+      label: 'Jane Smith',
+      value: 'jane.smith',
+      email: 'jane.smith@company.com',
+      department: 'Engineering',
+      departmentColor: 'info',
+      initials: 'JS',
+      rating: 4.9
+    },
+    {
+      label: 'Jim Beam',
+      value: 'jim.beam',
+      email: 'jim.beam@company.com',
+      department: 'Sales',
+      departmentColor: 'destructive',
+      initials: 'JB',
+      rating: 4.9
+    },
+    {
+      label: 'Jill Johnson',
+      value: 'jill.johnson',
+      email: 'jill.johnson@company.com',
+      department: 'Marketing',
+      departmentColor: 'success',
+      initials: 'JJ',
+      rating: 4.9
+    },
+  ]
+
+  function customEmployeeSearch(query: string, items: typeof employees) {
+    const searchTerm = query.toLowerCase().trim()
+
+    if (!searchTerm) return items
+
+    return items.filter(employee =>
+      employee.label.toLowerCase().includes(searchTerm) ||
+      employee.email.toLowerCase().includes(searchTerm) ||
+      employee.department.toLowerCase().includes(searchTerm) ||
+      employee.value.toLowerCase().includes(searchTerm)
+    )
+  }
+</script>
+```
+
+## MazChecklist API
+
+`import MazChecklist from 'maz-ui/components/MazChecklist'`
+
+### Props
+
+- `model-value` (`T[]`, `v-model`): The model value of the checklist (selected items).
+- `query` (`string`, `v-model:query`): The query to filter the items (model).
+- `items` (`O[]`): The list of items to display.
+- `title` (`string`): The title of the checklist.
+- `elevation` (`boolean`, default: `false`): Add elevation to the card.
+- `search` (`boolean | MazInputProps<string>`, default: `{ enabled: false, debounce: 300, autoFocus: false }`): The search input options.
+- `search-options` (`(NormalizeStringOptions & { threshold?: number | undefined; })`): The options to normalize the search query (used by the default search function) By default, the threshold is 0.75.
+- `search-function` (`((query: string, items: O[]) => O[] | undefined)`): Replace the default search function to provide a custom search function.
+- `color` (`"primary" | "secondary" | "accent" | "info" | "success" | "warning" | "destructive" | "contrast" | "transparent"`, default: `"primary"`): The color of the checklist (card, checkbox and search input).
+- `translations` (`{ noResultsFound?: string | undefined; searchInput?: { placeholder?: string | undefined; } | undefined; }`, default: `Translations from`): Translations of the checklist component.
+
+### Events
+
+- `@update:model-value` (payload: `value?: T[] | undefined`): Emitted when the model value change
+- `@update:query` (payload: `value?: string | undefined`): Emitted when the query change
+
+### Slots
+
+- `#title`: use this slot to customize the title
+- `#no-results`: use this slot to customize the no results area
+- `#no-results-text`: use this slot to customize the no results message
+- `#item`: use this slot to customize the item Bindings: `selectedValues: T[]`, `item: O`.