@maz-ui/mcp 4.0.0-beta.26

package/docs/src/components/maz-pull-to-refresh.md

@@ -0,0 +1,49 @@
+---
+title: MazPullToRefresh
+description: MazPullToRefresh is a standalone component to add pull to refresh feature
+---
+
+# {{ $frontmatter.title }}
+
+{{ $frontmatter.description }}
+
+<!--@include: ./../.vitepress/mixins/getting-started.md-->
+
+## Demo
+
+![MazPullToRefresh](/img/maz-pull-to-refresh.gif)
+
+## Basic usage
+
+Wrap your app inside this component
+
+```vue
+<script lang="ts" setup>
+import { MazPullToRefresh } from 'maz-ui/components'
+
+async function pullToRefreshAction() {
+  // do promise or just `window.location.reload()`
+}
+</script>
+
+<template>
+  <MazPullToRefresh
+    header-class="maz-bg-bg-dark maz-text-foreground-light"
+    class="maz-flex maz-min-h-screen maz-w-full maz-flex-col"
+    :action="pullToRefreshAction"
+    spinner-color="white"
+    standalone-mode
+    :disabled="false"
+  >
+    <div>
+      App Content
+    </div>
+  </MazPullToRefresh>
+</template>
+```
+
+::: warning
+More documentation to come
+:::
+
+<!--@include: ./../../.vitepress/generated-docs/maz-pull-to-refresh.doc.md-->

package/docs/src/components/maz-radio-buttons.md

@@ -0,0 +1,456 @@
+---
+title: MazRadioButtons
+description: MazRadioButtons is a standalone component to select a value in a list. Made with native HTMLInputElement type radio
+---
+
+# {{ $frontmatter.title }}
+
+{{ $frontmatter.description }}
+
+<!--@include: ./../.vitepress/mixins/getting-started.md-->
+
+## Basic usage
+
+<ComponentDemo>
+  <p class="maz-mb-4">
+    Select a competition
+  </p>
+
+  <MazRadioButtons
+    v-model="selectedCompetition"
+    :options="competitions"
+  />
+
+  <template #code>
+
+  ```vue
+  <template>
+    <MazRadioButtons
+      v-model="selectedCompetition"
+      :options="competitions"
+    />
+  </template>
+
+  <script lang="ts" setup>
+    import { ref } from 'vue'
+
+    import { MazRadioButtons } from 'maz-ui/components'
+
+    const selectedCompetition = ref<string>()
+
+    const competitions = [
+      {
+        value: "1",
+        label: "Ligue 1",
+        areaName: "France",
+        areaEnsignUrl: "https://upload.wikimedia.org/wikipedia/en/c/c3/Flag_of_France.svg",
+      },
+      {
+        value: "2",
+        label: "Premier League",
+        areaName: "England",
+        areaEnsignUrl: "https://crests.football-data.org/770.svg",
+      },
+      {
+        value: "3",
+        label: "Bundesliga",
+        areaName: "Germany",
+        areaEnsignUrl: "https://upload.wikimedia.org/wikipedia/commons/b/ba/Flag_of_Germany.svg",
+      },
+      {
+        value: "4",
+        label: "Eredivisie",
+        areaName: "Netherlands",
+        areaEnsignUrl: "https://upload.wikimedia.org/wikipedia/commons/2/20/Flag_of_the_Netherlands.svg",
+      },
+      {
+        value: "5",
+        label: "Serie A",
+        areaName: "Italy",
+        areaEnsignUrl: "https://upload.wikimedia.org/wikipedia/en/0/03/Flag_of_Italy.svg",
+      },
+      {
+        value: "6",
+        label: "Primera Division",
+        areaName: "Spain",
+        areaEnsignUrl: "https://upload.wikimedia.org/wikipedia/en/9/9a/Flag_of_Spain.svg",
+      },
+      {
+        value: "7",
+        label: "Primeira Liga",
+        areaName: "Portugal",
+        areaEnsignUrl: "https://upload.wikimedia.org/wikipedia/commons/5/5c/Flag_of_Portugal.svg",
+      },
+      {
+        value: "8",
+        label: "UEFA Champions League",
+        areaName: "Europe",
+        areaEnsignUrl: "https://crests.football-data.org/EUR.svg",
+      }
+    ]
+  </script>
+  ```
+
+  </template>
+</ComponentDemo>
+
+## Custom slot template
+
+<ComponentDemo>
+  <p class="maz-mb-4">
+    Select a competition
+  </p>
+
+  <MazRadioButtons
+    v-model="selectedCompetition"
+    :options="competitions"
+    color="secondary"
+    v-slot="{ option, selected }"
+  >
+    <div style="display: flex;">
+      <MazAvatar
+        v-if="option.areaEnsignUrl"
+        :src="option.areaEnsignUrl"
+        style="margin-right: 16px;"
+        size="0.8rem"
+      />
+      <div style="display: flex; flex-direction: column;">
+        <span>
+          {{ option.label }}
+        </span>
+        <span :class="{ 'maz-text-muted': !selected }">
+          {{ option.areaName }}
+        </span>
+      </div>
+    </div>
+  </MazRadioButtons>
+
+  <template #code>
+
+  ```html
+  <MazRadioButtons
+    v-model="selectedCompetition"
+    :options="competitions"
+    color="secondary"
+  >
+    <template #default="{ option, selected }">
+      <div style="display: flex;">
+        <MazAvatar
+          v-if="option.areaEnsignUrl"
+          :src="option.areaEnsignUrl"
+          style="margin-right: 16px;"
+          size="0.8rem"
+        />
+        <div style="display: flex; flex-direction: column;">
+          <span>
+            {{ option.label }}
+          </span>
+          <span :class="{ 'maz-text-muted': !selected }">
+            {{ option.areaName }}
+          </span>
+        </div>
+      </div>
+    </template>
+  </MazRadioButtons>
+  ```
+
+  </template>
+
+</ComponentDemo>
+
+## Orientation - Column
+
+<ComponentDemo>
+  <p class="maz-mb-4">
+    Select a competition
+  </p>
+
+  <MazRadioButtons
+    v-model="selectedCompetition"
+    :options="competitions"
+    orientation="col"
+    v-slot="{ option, selected }"
+  >
+    <div style="display: flex;">
+      <MazAvatar
+        v-if="option.areaEnsignUrl"
+        :src="option.areaEnsignUrl"
+        style="margin-right: 16px;"
+        size="0.8rem"
+      />
+      <div style="display: flex; flex-direction: column;">
+        <span>
+          {{ option.label }}
+        </span>
+        <span :class="{ 'maz-text-muted': !selected }">
+          {{ option.areaName }}
+        </span>
+      </div>
+    </div>
+  </MazRadioButtons>
+
+  <template #code>
+
+  ```vue
+  <template>
+    <MazRadioButtons
+      v-model="selectedCompetition"
+      :options="competitions"
+      orientation="col | row"
+      v-slot="{ option, selected }"
+    >
+      <div style="display: flex;">
+        <MazAvatar
+          v-if="option.areaEnsignUrl"
+          :src="option.areaEnsignUrl"
+          style="margin-right: 16px;"
+          size="0.8rem"
+        />
+        <div style="display: flex; flex-direction: column;">
+          <span>
+            {{ option.label }}
+          </span>
+          <span :class="{ 'maz-text-muted': !selected }">
+            {{ option.areaName }}
+          </span>
+        </div>
+      </div>
+    </MazRadioButtons>
+  </template>
+
+  <script lang="ts" setup>
+    import { ref } from 'vue'
+
+    import { MazRadioButtons, MazAvatar } from 'maz-ui/components'
+
+    const selectedCompetition = ref<string>()
+
+    const competitions = [
+      {
+        value: "1",
+        label: "Ligue 1",
+        areaName: "France",
+        areaEnsignUrl: "https://upload.wikimedia.org/wikipedia/en/c/c3/Flag_of_France.svg",
+      },
+      {
+        value: "2",
+        label: "Premier League",
+        areaName: "England",
+        areaEnsignUrl: "https://crests.football-data.org/770.svg",
+      },
+      {
+        value: "3",
+        label: "Bundesliga",
+        areaName: "Germany",
+        areaEnsignUrl: "https://upload.wikimedia.org/wikipedia/commons/b/ba/Flag_of_Germany.svg",
+      },
+      {
+        value: "4",
+        label: "Eredivisie",
+        areaName: "Netherlands",
+        areaEnsignUrl: "https://upload.wikimedia.org/wikipedia/commons/2/20/Flag_of_the_Netherlands.svg",
+      },
+      {
+        value: "5",
+        label: "Serie A",
+        areaName: "Italy",
+        areaEnsignUrl: "https://upload.wikimedia.org/wikipedia/en/0/03/Flag_of_Italy.svg",
+      },
+      {
+        value: "6",
+        label: "Primera Division",
+        areaName: "Spain",
+        areaEnsignUrl: "https://upload.wikimedia.org/wikipedia/en/9/9a/Flag_of_Spain.svg",
+      },
+      {
+        value: "7",
+        label: "Primeira Liga",
+        areaName: "Portugal",
+        areaEnsignUrl: "https://upload.wikimedia.org/wikipedia/commons/5/5c/Flag_of_Portugal.svg",
+      },
+      {
+        value: "8",
+        label: "UEFA Champions League",
+        areaName: "Europe",
+        areaEnsignUrl: "https://crests.football-data.org/EUR.svg",
+      }
+    ]
+  </script>
+  ```
+
+  </template>
+
+</ComponentDemo>
+
+## Selector icon with options equal-size
+
+This option will display a select icon on the left of the label
+
+<ComponentDemo>
+  <MazRadioButtons
+    v-slot="{ option, selected }"
+    v-model="selectedMode"
+    :options="modeOptions"
+    selector
+    equal-size
+    block
+    class="vp-raw"
+  >
+    <div class="maz-flex maz-flex-col maz-items-start maz-p-2">
+      <h3 class="maz-mb-2 maz-text-xl maz-font-semibold">
+        {{ option.label }}
+      </h3>
+      <span :class="{ 'maz-text-muted': !selected }">
+        {{ option.description }}
+      </span>
+    </div>
+  </MazRadioButtons>
+
+  <template #code>
+
+  ```vue
+  <template>
+    <MazRadioButtons
+      v-slot="{ option, selected }"
+      v-model="selectedMode"
+      :options="modeOptions"
+      selector
+      equal-size
+      block
+    >
+      <div class="flex flex-col items-start p-2">
+        <h3 class="mb-2 text-xl font-semibold">
+          {{ option.label }}
+        </h3>
+        <span :class="{ 'text-muted': !selected }">
+          {{ option.description }}
+        </span>
+      </div>
+    </MazRadioButtons>
+  </template>
+
+  <script lang="ts" setup>
+    import { ref } from 'vue'
+    import { type MazRadioButtonsOption } from 'maz-ui/components/MazRadioButtons'
+
+    const selectedMode = ref('scores')
+
+    const modeOptions: MazRadioButtonsOption[] = [
+      {
+        label: 'Scores',
+        value: 'scores',
+        description:
+          'Predict the score of matches. If you find the outcome of the match you win 5 points, if you get the perfect score you double your score!',
+        style: 'min-width: 250px;'
+      },
+      {
+        label: 'Cotes',
+        value: 'odds',
+        description:
+          'Predict with match odds. If you find the correct winner of the match you earn the points associated with the rating, if you have the perfect score you double your score.',
+        style: 'min-width: 250px;'
+      },
+    ]
+  </script>
+  ```
+
+  </template>
+</ComponentDemo>
+
+## Types
+
+### options
+
+The options prop is an array of `ButtonsRadioOption` type
+
+```ts
+export type ButtonsRadioOption = {
+  /** The label of the option */
+  label: string
+  /** The value of the option */
+  value: string | number | boolean
+  /** The classes to apply to the option */
+  classes?: any
+  /** The style to apply to the option */
+  style?: StyleValue
+} & Record<string, unknown>
+```
+
+<!--@include: ./../../.vitepress/generated-docs/maz-radio-buttons.doc.md-->
+
+<script lang="ts" setup>
+  import { ref } from 'vue'
+  import MazRadioButtons from 'maz-ui/src/components/MazRadioButtons.vue'
+
+  const selectedCompetition = ref<string>()
+
+  const competitions = [
+    {
+      value: "1",
+      label: "Ligue 1",
+      areaName: "France",
+      areaEnsignUrl: "https://upload.wikimedia.org/wikipedia/en/c/c3/Flag_of_France.svg",
+    },
+    {
+      value: "2",
+      label: "Premier League",
+      areaName: "England",
+      areaEnsignUrl: "https://crests.football-data.org/770.svg",
+    },
+    {
+      value: "3",
+      label: "Bundesliga",
+      areaName: "Germany",
+      areaEnsignUrl: "https://upload.wikimedia.org/wikipedia/commons/b/ba/Flag_of_Germany.svg",
+    },
+    {
+      value: "4",
+      label: "Eredivisie",
+      areaName: "Netherlands",
+      areaEnsignUrl: "https://upload.wikimedia.org/wikipedia/commons/2/20/Flag_of_the_Netherlands.svg",
+    },
+    {
+      value: "5",
+      label: "Serie A",
+      areaName: "Italy",
+      areaEnsignUrl: "https://upload.wikimedia.org/wikipedia/en/0/03/Flag_of_Italy.svg",
+    },
+    {
+      value: "6",
+      label: "Primera Division",
+      areaName: "Spain",
+      areaEnsignUrl: "https://upload.wikimedia.org/wikipedia/en/9/9a/Flag_of_Spain.svg",
+    },
+    {
+      value: "7",
+      label: "Primeira Liga",
+      areaName: "Portugal",
+      areaEnsignUrl: "https://upload.wikimedia.org/wikipedia/commons/5/5c/Flag_of_Portugal.svg",
+    },
+    {
+      value: "8",
+      label: "UEFA Champions League",
+      areaName: "Europe",
+      areaEnsignUrl: "https://crests.football-data.org/EUR.svg",
+    }
+  ]
+
+  const selectedMode = ref('scores')
+
+  const modeOptions = [
+    {
+      label: 'Scores',
+      value: 'scores',
+      description:
+        'Predict the score of matches. If you find the outcome of the match you win 5 points, if you get the perfect score you double your score!',
+      style: 'min-width: 250px;'
+    },
+    {
+      label: 'Cotes',
+      value: 'odds',
+      description:
+        'Predict with match odds. If you find the correct winner of the match you earn the points associated with the rating, if you have the perfect score you double your score.',
+      style: 'min-width: 250px;'
+    },
+  ]
+</script>

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

@@ -0,0 +1,141 @@
+---
+title: MazRadio
+description: MazRadio is a standalone component
+---
+
+# {{ $frontmatter.title }}
+
+{{ $frontmatter.description }}
+
+<!--@include: ./../.vitepress/mixins/getting-started.md-->
+
+## Basic usage
+
+`v-model="{{chosenColor ?? 'undefined'}}"`
+
+<div class="maz-flex maz-flex-col maz-gap-2">
+  <MazRadio
+    v-for="color in colors"
+    v-model="chosenColor"
+    name="chosenColor"
+    :color="color"
+    :key="color"
+    :value="color"
+  >
+    {{ color }}
+  </MazRadio>
+</div>
+
+::: details View code
+
+```vue
+<script lang="ts" setup>
+import { MazRadio } from 'maz-ui/components'
+import { ref } from 'vue'
+
+const chosenColor = ref('primary')
+const chosenSize = ref('mini')
+
+const colors: Color[] = [
+  'primary',
+  'secondary',
+  'info',
+  'success',
+  'warning',
+  'destructive',
+  'accent',
+  'contrast',
+]
+</script>
+
+<template>
+  <MazRadio
+    v-for="color in colors"
+    :key="color"
+    v-model="chosenColor"
+    name="chosenColor"
+    :color="color"
+    :value="color"
+  >
+    {{ color }}
+  </MazRadio>
+</template>
+```
+
+:::
+
+## Sizing
+
+`v-model="{{chosenSize ?? 'undefined'}}"`
+
+<div class="maz-flex maz-flex-col maz-gap-2">
+  <MazRadio
+    v-for="size in sizes"
+    v-model="chosenSize"
+    name="chosenSize"
+    :key="size"
+    :size="size"
+    :value="size"
+    :label="size"
+  />
+</div>
+
+::: details View code
+
+```vue
+<script lang="ts" setup>
+import { MazRadio, type Size } from 'maz-ui/components'
+import { ref } from 'vue'
+
+const chosenSize = ref('mini')
+
+const sizes: Size[] = ['mini', 'xs', 'sm', 'md', 'lg', 'xl']
+</script>
+
+<template>
+  <MazRadio
+    v-for="size in sizes"
+    :key="size"
+    v-model="chosenSize"
+    name="chosenSize"
+    :size="size"
+    :value="size"
+    :label="size"
+  />
+</template>
+```
+
+:::
+
+## Disabled
+
+<div class="maz-flex maz-flex-col maz-gap-2">
+  <MazRadio disabled name="disabled" value="disabled2">
+    disabled
+  </MazRadio>
+
+  <MazRadio model-value="disabled" disabled name="disabled" value="disabled">
+    disabled & selected
+  </MazRadio>
+</div>
+
+<script lang="ts" setup>
+  import { ref } from 'vue'
+  const chosenColor = ref()
+  const chosenSize = ref()
+
+  const colors: Color[] = [
+    'primary',
+    'secondary',
+    'info',
+    'success',
+    'warning',
+    'destructive',
+    'accent',
+    'contrast',
+  ]
+
+  const sizes: Size[] = ['mini', 'xs', 'sm', 'md', 'lg', 'xl']
+</script>
+
+<!--@include: ./../../.vitepress/generated-docs/maz-radio.doc.md-->

package/docs/src/components/maz-reading-progress-bar.md

@@ -0,0 +1,74 @@
+---
+title: MazReadingProgressBar
+description: MazReadingProgressBar is a standalone component to display a reading progress bar
+---
+
+# {{ $frontmatter.title }}
+
+{{ $frontmatter.description }}
+
+<!--@include: ./../.vitepress/mixins/getting-started.md-->
+
+This component use the `<Teleport />` component to move the progress bar to the top of the page. You can set the `teleport-selector` prop to change the target of the teleportation.
+
+## Basic usage
+
+Look at the top of the page to see the component in action (scroll in page to inscrease progress bar width).
+
+<MazReadingProgressBar content-selector=".VPDoc" teleport-selector="#app" />
+
+```vue
+<script lang="ts" setup>
+import MazReadingProgressBar from 'maz-ui/components/MazReadingProgressBar'
+</script>
+
+<template>
+  <MazReadingProgressBar content-selector=".VPDoc" teleport-selector="#app" />
+</template>
+```
+
+## Types
+
+### Props
+
+```ts
+export interface Props {
+  /**
+   * Height of the progress bar
+   * @default 4px
+   */
+  height?: string
+  /**
+   * Color of the progress bar
+   * @default primary
+   */
+  color?: Color
+  /**
+   * Selector of the element to teleport the progress bar
+   * @default body
+   */
+  teleportSelector?: string
+  /**
+   * Selector of the element to get the height
+   * @default body
+   */
+  contentSelector?: string
+  /**
+   * Offset of the progress bar
+   * @default 0
+   */
+  offset?: number
+  /**
+   * Class of the progress bar
+   * @default undefined
+   */
+  barClass?: HTMLAttributes['class']
+  /**
+   * Instead of using the height of the content with a selector, you can set a scroll distance
+   * @default undefined
+   */
+  distance?: number
+}
+```
+
+<!--@include: ./../../.vitepress/generated-docs/maz-reading-progress-bar.doc.md-->