docs(Progress): improve

Author: IgorShevchik

docs/components/progress.md

@@ -36,9 +36,7 @@ Use the `v-model` directive to control the value of the Progress.
   </ClientOnly>
 </div>
 
-::: details
 <<< @/examples/progress/demo/Progress.vue{8 vue:line-numbers}
-:::
 
 ### Max
 
@@ -82,7 +80,7 @@ Use the `status` prop to display the current Progress value above the bar.
 
 ### Indeterminate
 
-When no `v-model` is set or the value is `null`, the Progress becomes _indeterminate_. The progress bar is animated as a `carousel`, but you can change it using the [`animation`](#animation) prop.
+When no `v-model` is set or the value is `null`, the Progress becomes _indeterminate_. The progress bar is animated as a `loading`, but you can change it using the [`animation`](#animation) prop.
 
 <div class="lg:min-h-[160px]">
   <ClientOnly>
@@ -96,7 +94,7 @@ When no `v-model` is set or the value is `null`, the Progress becomes _indetermi
 
 ### Animation
 
-Use the `animation` prop to change the animation of the Progress to an inverse carousel, a swinging bar or an elastic bar. Defaults to `carousel`.
+Use the `animation` prop to change the animation of the Progress to an inverse carousel, a swinging bar or an elastic bar. Defaults to `loading`.
 
 <div class="lg:min-h-[275px]">
   <ClientOnly>
@@ -105,7 +103,7 @@ Use the `animation` prop to change the animation of the Progress to an inverse c
 </div>
 
 ::: details
-<<< @/examples/progress/demo/Animation.vue{13 vue:line-numbers}
+<<< @/examples/progress/demo/Animation.vue{15 vue:line-numbers}
 :::
 
 ### Orientation
@@ -119,7 +117,7 @@ Use the `orientation` prop to change the orientation of the Progress. Defaults t
 </div>
 
 ::: details
-<<< @/examples/progress/demo/Orientation.vue{13 vue:line-numbers}
+<<< @/examples/progress/demo/Orientation.vue{15 vue:line-numbers}
 :::
 
 ### Color
@@ -133,7 +131,7 @@ Use the `color` prop to change the color of the Slider.
 </div>
 
 ::: details
-<<< @/examples/progress/demo/Color.vue{13 vue:line-numbers}
+<<< @/examples/progress/demo/Color.vue{15 vue:line-numbers}
 :::
 
 ### Size
@@ -147,7 +145,7 @@ Use the `size` prop to change the size of the Slider.
 </div>
 
 ::: details
-<<< @/examples/progress/demo/Size.vue{13 vue:line-numbers}
+<<< @/examples/progress/demo/Size.vue{15 vue:line-numbers}
 :::
 
 ### Inverted

docs/examples/progress/Animation.vue

@@ -6,13 +6,15 @@ import Demo from './demo/Animation.vue'
 
 const animations = Object.keys(theme.variants.animation)
 
-const animation = ref('swing' as const)
+const animation = ref('loading' as const)
 </script>
 
 <template>
   <ComponentShowExample>
     <template #actions>
-      <B24RadioGroup v-model="animation" legend="animation" :items="animations" orientation="horizontal" />
+      <B24FormField label="animation" class="w-full sm:w-1/4">
+        <B24Select v-model="animation" :items="animations" />
+      </B24FormField>
     </template>
     <Demo :animation="animation" />
   </ComponentShowExample>

docs/examples/progress/Orientation.vue

@@ -13,6 +13,8 @@ const orientation = ref('vertical' as const)
     <template #actions>
       <B24RadioGroup v-model="orientation" legend="orientations" :items="orientations" orientation="horizontal" />
     </template>
-    <Demo :orientation="orientation" />
+    <div class="h-48 w-full flex flex-col items-center justify-center">
+      <Demo :orientation="orientation" />
+    </div>
   </ComponentShowExample>
 </template>

docs/examples/progress/demo/Animation.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
+import type { ProgressProps } from '@bitrix24/b24ui-nuxt'
+
 export interface ExampleProps {
-  animation?: any
+  animation?: ProgressProps['animation']
 }
 
 withDefaults(defineProps<ExampleProps>(), {
-  animation: 'swing'
+  animation: 'swing' as const
 })
 </script>
 

docs/examples/progress/demo/Color.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
+import type { ProgressProps } from '@bitrix24/b24ui-nuxt'
+
 export interface ExampleProps {
-  color?: any
+  color?: ProgressProps['color']
 }
 
 withDefaults(defineProps<ExampleProps>(), {
-  color: 'default'
+  color: 'default' as const
 })
 </script>
 

docs/examples/progress/demo/MaxArray.vue

@@ -7,6 +7,6 @@ const value = ref(3)
 <template>
   <B24Progress
     v-model="value"
-    :max="['Waiting...', 'Cloning...', 'Migrating...', 'Deploying...', 'Done!']"
+    :max="['Prospecting...', 'Qualifying...', 'Presenting...', 'Negotiating...', 'Closed!']"
   />
 </template>

docs/examples/progress/demo/Orientation.vue

@@ -1,16 +1,17 @@
 <script setup lang="ts">
+import type { ProgressProps } from '@bitrix24/b24ui-nuxt'
+
 export interface ExampleProps {
-  orientation?: any
+  orientation?: ProgressProps['orientation']
 }
 
 withDefaults(defineProps<ExampleProps>(), {
-  orientation: 'horizontal'
+  orientation: 'horizontal' as const
 })
 </script>
 
 <template>
   <B24Progress
     :orientation="orientation"
-    class="h-48"
   />
 </template>

docs/examples/progress/demo/Size.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
+import type { ProgressProps } from '@bitrix24/b24ui-nuxt'
+
 export interface ExampleProps {
-  size?: any
+  size?: ProgressProps['size']
 }
 
 withDefaults(defineProps<ExampleProps>(), {
-  size: 'md'
+  size: 'md' as const
 })
 </script>