docs(docs): maz-switch page (#228)

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

@@ -15,6 +15,7 @@ export const components = {
         '/components/maz-phone-number-input.md',
         '/components/maz-select.md',
         '/components/maz-slider.md',
+        '/components/maz-switch.md',
       ]
     },
     {

packages/docs/docs/.vuepress/styles/index.scss

@@ -117,6 +117,18 @@ code {
   font-size: .85em;
 }
 
+.token.tag {
+  color: var(--maz-color-danger);
+}
+
+.token.attr-name {
+  color:#4EC9B0;
+}
+
+.token.attr-value {
+  color: var(--maz-bg-color-light-light);
+}
+
 .flex {
   display: flex;
 }

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

@@ -35,9 +35,9 @@ description: MazCheckbox is a stand-alone component replaces the standard html i
 </template>
 
 <script lang="ts" setup>
-  import { MazCheckbox } from 'vue'
-
   import { ref } from 'vue'
+  import MazCheckbox from 'maz-ui/components/MazCheckbox'
+
   const inputValue = ref(false)
 
   const colors = [

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

@@ -0,0 +1,62 @@
+---
+description: MazSwitch is a stand-alone component replaces the standard html input checkbox. Color option available.
+---
+
+# MazSwitch
+
+> Before you have to import the global css files in your project, follow instructions in [Getting Started](/maz-ui-3/guide/getting-started.html)
+
+<MazSwitch
+  v-for="color in colors"
+  v-model="switchValue"
+  :color="color"
+  :name="color"
+  :key="color"
+  style="margin-bottom: 12px;"
+/>
+
+<script lang="ts" setup>
+  import { ref } from 'vue'
+  const switchValue = ref(false)
+
+  const colors = [
+    'primary',
+    'secondary',
+    'info',
+    'success',
+    'warning',
+    'danger',
+  ]
+</script>
+
+```vue
+<template>
+  <MazSwitch
+    v-for="color in colors"
+    v-model="switchValue"
+    :color="color"
+    :name="color"
+    :key="color"
+  />
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue'
+  import MazSwitch from 'maz-ui/components/MazSwitch'
+
+  const switchValue = ref(false)
+
+  const colors = [
+    'primary',
+    'secondary',
+    'info',
+    'success',
+    'warning',
+    'danger',
+  ]
+</script>
+```
+
+## Props & Events emitted
+
+<ComponentPropDoc component="MazSwitch" />