refactor(CProgress): add a more accessible structure

Author: mrholek

packages/coreui-vue/src/components/progress/CProgress.ts

@@ -1,25 +1,61 @@
-import { defineComponent, h } from 'vue'
+import { defineComponent, h, inject } from 'vue'
 
 import { CProgressBar } from './CProgressBar'
+import { Color } from '../../props'
 
 const CProgress = defineComponent({
   name: 'CProgress',
   props: {
+    /**
+     * Use to animate the stripes right to left via CSS3 animations.
+     */
+    animated: Boolean,
+    /**
+     * Sets the color context of the component to one of CoreUI’s themed colors.
+     *
+     * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
+     */
+    color: Color,
     /**
      * Sets the height of the component. If you set that value the inner `<CProgressBar>` will automatically resize accordingly.
      */
     height: Number,
+    /**
+     * A string of all className you want applied to the <CProgressBar/> component.
+     *
+     * @since 5.0.0-alpha.1
+     */
+    progressBarClassName: String,
     /**
      * Makes progress bar thinner.
      */
     thin: Boolean,
+    /**
+     * The percent to progress the ProgressBar.
+     */
+    value: {
+      type: Number,
+      default: 0,
+    },
+    /**
+     * Set the progress bar variant to optional striped.
+     *
+     * @values 'striped'
+     */
+    variant: {
+      type: String,
+      validator: (value: string) => {
+        return value === 'striped'
+      },
+    },
     /**
      * Change the default color to white.
      */
     white: Boolean,
-    ...CProgressBar.props,
   },
   setup(props, { slots }) {
+    const stacked = inject('stacked', false) as boolean
+
     return () =>
       h(
         'div',
@@ -31,20 +67,42 @@ const CProgress = defineComponent({
               'progress-white': props.white,
             },
           ],
-          ...(props.height, { style: `height: ${props.height}px` }),
+          style: {
+            ...(props.height ? { height: `${props.height}px` } : {}),
+            ...(stacked ? { width: `${props.value}%` } : {}),
+          },
+          ...(props.value !== undefined && {
+            role: 'progressbar',
+            'aria-valuenow': props.value,
+            'aria-valuemin': 0,
+            'aria-valuemax': 100,
+          }),
         },
-        props.value
-          ? h(
+        // @ts-expect-error name is defined in component
+        slots.default && slots.default().some((vnode) => vnode.type.name === 'CProgressBar')
+          ? slots.default().map((vnode) => {
+              // @ts-expect-error name is defined in component
+              if (vnode.type.name === 'CProgressBar') {
+                return h(vnode, {
+                  ...(props.animated && { animated: props.animated }),
+                  ...(props.color && { color: props.color }),
+                  ...(props.value && { value: props.value }),
+                  ...(props.variant && { variant: props.variant }),
+                })
+              }
+              return vnode
+            })
+          : h(
               CProgressBar,
               {
-                value: props.value,
+                ...(props.progressBarClassName && { class: props.progressBarClassName }),
                 animated: props.animated,
                 color: props.color,
+                value: props.value,
                 variant: props.variant,
               },
-              slots.default && slots.default(),
-            )
-          : slots.default && slots.default(),
+              () => slots.default && slots.default(),
+            ),
       )
   },
 })

packages/coreui-vue/src/components/progress/CProgressBar.ts

@@ -1,4 +1,4 @@
-import { defineComponent, h } from 'vue'
+import { defineComponent, h, inject } from 'vue'
 
 import { Color } from '../../props'
 
@@ -35,6 +35,8 @@ const CProgressBar = defineComponent({
     },
   },
   setup(props, { slots }) {
+    const stacked = inject('stacked', false) as boolean
+
     return () =>
       h(
         'div',
@@ -47,11 +49,7 @@ const CProgressBar = defineComponent({
               ['progress-bar-animated']: props.animated,
             },
           ],
-          role: 'progressbar',
-          style: `width: ${props.value}%`,
-          'aria-valuenow': props.value,
-          'aria-valuemin': '0',
-          'aria-valuemax': '100',
+          ...(!stacked && { style: { width: `${props.value}%` } }),
         },
         slots.default && slots.default(),
       )

packages/coreui-vue/src/components/progress/CProgressStacked.ts

@@ -0,0 +1,19 @@
+import { defineComponent, h, provide } from 'vue'
+
+const CProgressStacked = defineComponent({
+  name: 'CProgressStacked',
+  props: {},
+  setup(_, { slots }) {
+    provide('stacked', true)
+    return () =>
+      h(
+        'div',
+        {
+          class: 'progress-stacked',
+        },
+        slots.default && slots.default(),
+      )
+  },
+})
+
+export { CProgressStacked }

packages/coreui-vue/src/components/progress/index.ts

@@ -1,12 +1,14 @@
 import { App } from 'vue'
 import { CProgress } from './CProgress'
 import { CProgressBar } from './CProgressBar'
+import { CProgressStacked } from './CProgressStacked'
 
 const CProgressPlugin = {
   install: (app: App): void => {
     app.component(CProgress.name, CProgress)
     app.component(CProgressBar.name, CProgressBar)
+    app.component(CProgressStacked.name, CProgressStacked)
   },
 }
 
-export { CProgressPlugin, CProgress, CProgressBar }
+export { CProgressPlugin, CProgress, CProgressBar, CProgressStacked }