refactor(maz-ui): MazSpinner - the default color is now 'theme'

LouisMazel · Oct 11, 2024 · 7132b6f · 7132b6f
1 parent 13c26be
commit 7132b6f
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 10 deletions.
diff --git a/packages/docs/docs/components/maz-spinner.md b/packages/docs/docs/components/maz-spinner.md
@@ -7,16 +7,76 @@ description: MazSpinner is a standalone component that replaces the standard htm
 
 {{ $frontmatter.description }}
 
-<MazSpinner color="secondary" />
+## Basic usage
+
+<MazSpinner />
 
 ```vue
 <template>
-  <MazSpinner color="secondary" />
+  <MazSpinner />
 </template>
 
 <script>
   import MazSpinner from 'maz-ui/components/MazSpinner'
 </script>
 ```
 
+## Options
+
+### Colors
+
+Choose the color of the spinner
+
+By default the color is `theme`
+
+<div class="maz-flex maz-gap-2 maz-flex-wrap">
+  <MazSpinner color="primary" />
+  <MazSpinner color="secondary" />
+  <MazSpinner color="danger" />
+  <MazSpinner color="warning" />
+  <MazSpinner color="success" />
+  <MazSpinner color="info" />
+  <MazSpinner color="theme" />
+  <MazSpinner color="white" />
+  <MazSpinner color="black" />
+</div>
+
+```vue
+<MazSpinner color="primary" />
+<MazSpinner color="secondary" />
+<MazSpinner color="danger" />
+<MazSpinner color="warning" />
+<MazSpinner color="success" />
+<MazSpinner color="info" />
+<MazSpinner color="theme" />
+<MazSpinner color="white" />
+<MazSpinner color="black" />
+```
+
+### Sizes
+
+Choose the size of the spinner
+
+The default size is `2em`
+
+<div class="maz-flex maz-gap-2 maz-flex-wrap maz-items-center">
+  <MazSpinner size="1em" />
+  <MazSpinner />
+  <MazSpinner size="3em" />
+  <MazSpinner size="4em" />
+  <MazSpinner size="5em" />
+  <MazSpinner size="6em" />
+  <MazSpinner size="7em" />
+</div>
+
+```vue
+<MazSpinner size="1em" />
+<MazSpinner size="2em" />
+<MazSpinner size="3em" />
+<MazSpinner size="4em" />
+<MazSpinner size="5em" />
+<MazSpinner size="6em" />
+<MazSpinner size="7em" />
+```
+
 <!--@include: ./../.vitepress/generated-docs/maz-spinner.doc.md-->
diff --git a/packages/lib/components/MazSpinner.vue b/packages/lib/components/MazSpinner.vue
@@ -1,16 +1,25 @@
 <script lang="ts" setup>
-import type { PropType } from 'vue'
 import type { Color } from './types'
 
 export type { Color }
 
-defineProps({
-  size: { type: String, default: '2em' },
-  color: {
-    type: String as PropType<Color>,
-    default: 'primary',
-  },
-})
+export interface MazSpinnerProps {
+  /**
+   * The size of the spinner
+   * @default 2em
+   */
+  size?: string
+  /**
+   * The color of the spinner
+   * @default theme
+   */
+  color?: Color
+}
+
+const {
+  size = '2em',
+  color = 'theme',
+} = defineProps<MazSpinnerProps>()
 </script>
 
 <template>