chore(root): upgrade deps

package.json

@@ -18,18 +18,18 @@
     ]
   },
   "devDependencies": {
-    "@commitlint/cli": "^15.0.0",
-    "@commitlint/config-conventional": "^15.0.0",
+    "@commitlint/cli": "^16.2.3",
+    "@commitlint/config-conventional": "^16.2.1",
     "@types/command-exists": "^1.2.0",
-    "@types/node": "^17.0.13",
-    "commitlint-config-cz": "^0.13.2",
-    "cz-customizable": "^5.5.0",
+    "@types/node": "^17.0.23",
+    "commitlint-config-cz": "^0.13.3",
+    "cz-customizable": "^6.3.0",
     "gulp-conventional-changelog": "^2.0.35",
     "husky": "^7.0.0",
     "lerna": "^4.0.0",
-    "lint-staged": "^12.1.2",
-    "prettier": "^2.5.0",
-    "typescript": "^4.5.5"
+    "lint-staged": "^12.3.7",
+    "prettier": "^2.6.1",
+    "typescript": "^4.6.3"
   },
   "repository": {
     "type": "git",

packages/docs/docs/.vuepress/configs/components.ts

@@ -13,6 +13,7 @@ export const components = {
         '/components/maz-input-tags.md',
         '/components/maz-picker.md',
         '/components/maz-phone-number-input.md',
+        '/components/maz-radio-buttons.md',
         '/components/maz-select.md',
         '/components/maz-slider.md',
         '/components/maz-switch.md',

packages/docs/docs/components/maz-radio-buttons.md

@@ -0,0 +1,308 @@
+---
+description: MazRadioButtons is a stand-alone component to select a value in a list
+head:
+  - - meta
+    - name: twitter:title
+      content: MazRadioButtons | Maz-UI
+    - name: twitter:description
+      content: MazRadioButtons is a stand-alone component to select a value in a list
+    - property: og:title
+      content: MazRadioButtons | Maz-UI
+    - property: og:description
+      content: MazRadioButtons is a stand-alone component to select a value in a list
+---
+
+# MazRadioButtons
+
+MazRadioButtons is a stand-alone component to select a value in a list
+
+> Before you have to import the global css files in your project, follow instructions in [Getting Started](/maz-ui-3/guide/getting-started.html)
+
+## Basic usage
+
+Select a competition
+
+<MazRadioButtons
+  v-model="competitionSelected"
+  :options="competitions"
+/>
+
+```vue
+<template>
+  <MazRadioButtons
+    v-model="competitionSelected"
+    :options="competitions"
+  />
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue'
+
+  import MazRadioButtons from 'maz-ui/components/MazRadioButtons'
+
+  const competitionSelected = 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>
+```
+
+## Custom slot template
+
+Select a competition
+
+<div>
+  <MazRadioButtons
+    v-model="competitionSelected"
+    :options="competitions"
+  >
+    <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>
+</div>
+
+## Orientation - Column
+
+Select a competition
+
+<div>
+  <MazRadioButtons
+    v-model="competitionSelected"
+    :options="competitions"
+    orientation="col"
+  >
+    <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>
+</div>
+
+```vue
+<template>
+  <MazRadioButtons
+    v-model="competitionSelected"
+    :options="competitions"
+    orientation="col | row"
+  >
+    <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>
+
+<script lang="ts" setup>
+  import { ref } from 'vue'
+
+  import MazRadioButtons from 'maz-ui/components/MazRadioButtons'
+  import MazAvatar from 'maz-ui/components/MazAvatar'
+
+  const competitionSelected = 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>
+```
+
+
+<script lang="ts" setup>
+  import { ref } from 'vue'
+
+  const competitionSelected = 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>
+
+## Props & Events emitted
+
+<ComponentPropDoc component="MazRadioButtons" />

packages/docs/docs/components/maz-select.md

@@ -82,8 +82,6 @@ description: MazSelect is a stand-alone component replaces the standard html inp
 </script>
 ```
 
-## Options
-
 ## Props & Events emitted
 
 <ComponentPropDoc component="MazSelect" />