From 836007dfa6f67b263cedeba692cecd3dab8ed5ee Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 31 Jul 2024 15:53:34 +0200
Subject: [PATCH] docs(progress): update

---
 docs/content/3.components/progress.md | 122 +++++++++++++++++++++++++-
 src/runtime/components/Progress.vue   |   3 +
 2 files changed, 124 insertions(+), 1 deletion(-)

diff --git a/docs/content/3.components/progress.md b/docs/content/3.components/progress.md
index 8508382f..76df14c1 100644
--- a/docs/content/3.components/progress.md
+++ b/docs/content/3.components/progress.md
@@ -11,14 +11,134 @@ links:
 
 ## Usage
 
+Use the `v-model` directive to control the value of the Progress.
+
 ::component-code
 ---
+external:
+  - modelValue
 props:
   modelValue: 50
 ---
 ::
 
-## Examples
+### Max
+
+Use the `max` prop to set the maximum value of the Progress.
+
+::component-code
+---
+external:
+  - modelValue
+props:
+  modelValue: 3
+  max: 4
+---
+::
+
+Use the `max` prop with an array of strings to display the active step under the bar, the maximum value of the Progress will be the length of the array.
+
+::component-code
+---
+prettier: true
+ignore:
+  - max
+external:
+  - modelValue
+props:
+  modelValue: 3
+  max:
+    - 'Waiting...'
+    - 'Cloning...'
+    - 'Migrating...'
+    - 'Deploying...'
+    - 'Done!'
+---
+::
+
+### Status
+
+Use the `status` prop to display the current Progress value above the bar.
+
+::component-code
+---
+external:
+  - modelValue
+props:
+  modelValue: 50
+  status: true
+---
+::
+
+### Indeterminate
+
+When no `v-model` is set or the value is `null`, the Progress becomes _indeterminate_. The progress bar will be animated as a carousel, but you can change it using the `animation` prop for an inverse carousel, a swinging bar or an elastic bar.
+
+::component-code
+---
+external:
+  - modelValue
+props:
+  modelValue: null
+---
+::
+
+### Animation
+
+Use the `animation` prop to change the animation of the Progress. Defaults to `carousel`.
+
+::component-code
+---
+props:
+  animation: swing
+---
+::
+
+### Orientation
+
+Use the `orientation` prop to change the orientation of the Progress. Defaults to `horizontal`.
+
+::component-code
+---
+props:
+  orientation: vertical
+  class: 'h-96 mx-auto'
+---
+::
+
+### Color
+
+Use the `color` prop to change the color of the Slider.
+
+::component-code
+---
+props:
+  color: gray
+---
+::
+
+### Size
+
+Use the `size` prop to change the size of the Slider.
+
+::component-code
+---
+props:
+  size: xl
+---
+::
+
+### Inverted
+
+Use the `inverted` prop to visually invert the Progress.
+
+::component-code
+---
+props:
+  inverted: true
+  modelValue: 25
+---
+::
 
 ## API
 
diff --git a/src/runtime/components/Progress.vue b/src/runtime/components/Progress.vue
index 885bf6fb..ed42c9e6 100644
--- a/src/runtime/components/Progress.vue
+++ b/src/runtime/components/Progress.vue
@@ -17,8 +17,11 @@ export interface ProgressProps extends Pick<ProgressRootProps, 'getValueLabel' |
    * @defaultValue `div`
    */
   as?: any
+  /** The maximum progress value. */
   max?: number | Array<any>
+  /** Display the current progress value. */
   status?: boolean
+  /** Whether the progress is visually inverted. */
   inverted?: boolean
   size?: ProgressVariants['size']
   color?: ProgressVariants['color']