@maz-ui/mcp 4.0.0-beta.26

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

@@ -0,0 +1,346 @@
+---
+title: MazChart
+description: MazChart is a standalone component which generates graphics & charts with chart.js
+---
+
+# {{ $frontmatter.title }}
+
+{{ $frontmatter.description }}
+
+To use this component, you have to install the `chart.js` and `vue-chartjs` dependency
+
+<div class="flex gap-4">
+  <NpmBadge package="chart.js" dist-tag="4" />
+  <NpmBadge package="vue-chartjs" dist-tag="5" />
+</div>
+
+```bash
+npm install chart.js@^4 vue-chartjs@^5
+```
+
+::: info
+
+For maz-ui versions below `3.9.x`, you should only install `chart.js@^3`
+
+<NpmBadge package="chart.js" dist-tag="3" />
+
+```bash
+npm install chart.js@^3
+```
+
+:::
+
+## Documentation
+
+Follow the [Chart.JS](https://www.chartjs.org/docs/latest/) documentation to create your own chart.
+
+You can also check the documentation and [examples of vue-chartjs](https://vue-chartjs.org/examples/)
+
+You can use all the plugins of Chart.JS. Follow the examples below.
+
+## Bar chart
+
+<MazChart
+  v-bind="{ ...barChart }"
+/>
+
+::: details View code
+
+```vue
+<script setup lang="ts">
+import dataLabels from 'chartjs-plugin-datalabels'
+
+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>
+
+<template>
+  <MazChart
+    :type="barChart.type"
+    :data="barChart.data"
+    :options="barChart.options"
+  />
+</template>
+```
+
+:::
+
+## Pie chart
+
+<br/>
+
+<MazChart
+  :type="pieChart.type"
+  :data="pieChart.data"
+  :options="pieChart.options"
+/>
+
+::: details View code
+
+```vue
+<script setup lang="ts">
+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,
+        ],
+      },
+    ],
+  },
+}
+</script>
+
+<template>
+  <MazChart
+    :type="pieChart.type"
+    :data="pieChart.data"
+  />
+</template>
+```
+
+:::
+
+## Line chart
+
+<br/>
+
+<MazChart v-bind="lineChart" />
+
+::: details View code
+
+```vue
+<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 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: [10, 15, 20, 25, 30, 35],
+        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,
+  }
+}
+</script>
+
+<template>
+  <MazChart v-bind="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>
+
+<!--@include: ./../../.vitepress/generated-docs/maz-chart.doc.md-->
+
+## Types
+
+### ChartProps
+
+Follow this link to see the type definitions: [vue-chartjs/src/types.ts](https://github.com/apertureless/vue-chartjs/blob/main/src/types.ts#L12)

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

@@ -0,0 +1,168 @@
+---
+title: MazCheckbox
+description: MazCheckbox is a standalone component that replaces the standard html input checkbox. Color options are available.
+---
+
+# {{ $frontmatter.title }}
+
+{{ $frontmatter.description }}
+
+<!--@include: ./../.vitepress/mixins/getting-started.md-->
+
+## Basic usage
+
+`v-model="{{checked}}"`
+
+<MazCheckbox v-model="checked" :label="checked ? 'Checked' : 'Unchecked'" />
+
+```vue
+<script lang="ts" setup>
+import { MazCheckbox } from 'maz-ui/components'
+import { ref } from 'vue'
+
+const checked = ref(false)
+</script>
+
+<template>
+  <MazCheckbox v-model="checked" :label="checked ? 'Checked' : 'Unchecked'" />
+</template>
+```
+
+## Colors
+
+`v-model="{{chosenColors}}"`
+
+<div class="maz-flex maz-flex-col maz-gap-2">
+  <MazCheckbox
+    v-for="color in colors"
+    :key="color"
+    v-model="chosenColors"
+    :color="color"
+    :id="color"
+    :name="color"
+    :value="color"
+  >
+    {{ color }}
+  </MazCheckbox>
+</div>
+
+::: details View code
+
+```vue
+<script lang="ts" setup>
+import type { Color } from 'maz-ui/components'
+import { MazCheckbox } from 'maz-ui/components'
+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="{{chosenSizes}}"`
+
+<div class="maz-flex maz-flex-col maz-gap-2">
+  <MazCheckbox
+    v-for="size in sizes"
+    :key="size"
+    v-model="chosenSizes"
+    name="size"
+    :value="size"
+    :size="size"
+  >
+    {{ size }}
+  </MazCheckbox>
+</div>
+
+::: details View code
+
+```vue
+<script lang="ts" setup>
+import type { MazSize } from 'maz-ui/components'
+import { MazCheckbox } from 'maz-ui/components'
+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
+
+<div class="maz-flex maz-flex-col maz-gap-2">
+  <MazCheckbox :model-value="false" disabled name="disabled">
+    disabled
+  </MazCheckbox>
+
+  <MazCheckbox :model-value="true" disabled name="disabled">
+    disabled & checked
+  </MazCheckbox>
+</div>
+
+<script lang="ts" setup>
+  import { ref } from 'vue'
+  import { type Color, type Size } from 'maz-ui/components'
+
+  const checked = ref(false)
+  const chosenColors = ref([])
+  const chosenSizes = ref([])
+
+  const colors: Color[] = [
+    'primary',
+    'secondary',
+    'info',
+    'success',
+    'warning',
+    'destructive',
+    'contrast',
+    'accent',
+  ]
+
+  const sizes: Size[] = ['mini', 'xs', 'sm', 'md', 'lg', 'xl']
+</script>
+
+<!--@include: ./../../.vitepress/generated-docs/maz-checkbox.doc.md-->