refactor(CWidgets): update widgets

Author: mrholek

docs/4.0/components/widgets.md

@@ -0,0 +1,74 @@
+import { defineComponent, h } from 'vue'
+
+import { CCard, CCardBody } from '../card'
+
+const CWidgetStatsA = defineComponent({
+  name: 'CWidgetStatsA',
+  props: {
+    color: {
+      type: String,
+      default: undefined,
+      require: false,
+    },
+    /**
+     * Title node for your component. If you want to pass non-string value please use dedicated slot `<template #title>...</template>`
+     */
+    title: {
+      type: String,
+      default: undefined,
+      require: false,
+    },
+    /**
+     * Value node for your component. If you want to pass non-string value please use dedicated slot `<template #value>...</template>`
+     */
+    value: {
+      type: [Number, String],
+      default: 0,
+      require: false,
+    },
+  },
+  setup(props, { slots }) {
+    return () =>
+      h(
+        CCard,
+        {
+          class: [
+            { [`bg-${props.color}`]: props.color, 'text-high-emphasis-inverse': props.color },
+          ],
+        },
+        () => [
+          h(
+            CCardBody,
+            {
+              class: 'pb-0 d-flex justify-content-between align-items-start',
+            },
+            () => [
+              h('div', {}, [
+                (props.value || slots.value) &&
+                  h(
+                    'div',
+                    { class: 'fs-4 fw-semibold' },
+                    {
+                      default: () => (slots.value && slots.value()) || props.value,
+                    },
+                  ),
+                (props.title || slots.title) &&
+                  h(
+                    'div',
+                    {},
+                    {
+                      default: () => (slots.title && slots.title()) || props.title,
+                    },
+                  ),
+              ]),
+              slots.action && slots.action(),
+            ],
+          ),
+          slots.chart && slots.chart(),
+          slots.default && slots.default(),
+        ],
+      )
+  },
+})
+
+export { CWidgetStatsA }

src/components/widgets/CWidgetDropdown.ts

@@ -1,65 +1,76 @@
 import { defineComponent, h } from 'vue'
+import { shape } from 'vue-types'
 
+import { Color } from '../props'
 import { CCard, CCardBody } from './../card'
 import { CProgress } from '../progress/CProgress'
 
-const CWidgetProgress = defineComponent({
-  name: 'CWidgetProgress',
+const CWidgetStatsB = defineComponent({
+  name: 'CWidgetStatsB',
   props: {
     /**
-     * Sets the color context of the component to one of CoreUI’s themed colors. [docs]
+     * Sets the color context of the component to one of CoreUI’s themed colors
      *
      * @values 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
      */
-    color: {
-      type: String,
-      default: undefined,
-      require: false,
-    },
+    color: Color,
+    /**
+     * Colors have been inverted from their default dark shade.
+     */
     inverse: {
       type: Boolean,
       default: undefined,
       require: false,
     },
+    progress: shape({
+      /**
+       * Sets the color context of the progress bar to one of CoreUI’s themed colors
+       *
+       * @values 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
+       */
+      color: Color,
+      /**
+       * The percent to progress the ProgressBar (out of 100).
+       * @default 0
+       */
+      value: {
+        type: Number,
+        default: 0,
+      },
+    }),
     /**
-     * Sets the color context of the progress bar to one of CoreUI’s themed colors. [docs]
-     *
-     * @values 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
+     * Helper text for your component. If you want to pass non-string value please use dedicated slot `<template #text>...</template>`
      */
-    progressColor: {
-      type: String,
-      default: undefined,
-      require: false,
-    },
-    progressValue: {
-      type: Number,
-      default: 0,
-      require: false,
-    },
     text: {
       type: String,
       default: undefined,
       require: false,
     },
+    /**
+     * Title node for your component. If you want to pass non-string value please use dedicated slot `<template #title>...</template>`
+     */
     title: {
       type: String,
       default: undefined,
       require: false,
     },
+    /**
+     * Value node for your component. If you want to pass non-string value please use dedicated slot `<template #value>...</template>`
+     */
     value: {
       type: [Number, String],
       default: 0,
       require: false,
     },
   },
-  setup(props) {
+  setup(props, { slots }) {
     return () =>
       h(
         CCard,
         {
           class: [
             {
-              ['text-white']: props.inverse,
+              ['text-high-emphasis-inverse']: props.inverse,
             },
           ],
           color: props.color,
@@ -71,32 +82,32 @@ const CWidgetProgress = defineComponent({
               class: 'card-body',
             },
             () => [
-              props.value &&
+              (props.value || slots.value) &&
                 h(
                   'div',
                   {
                     class: 'fs-4 fw-semibold',
                   },
                   {
-                    default: () => props.value,
+                    default: () => (slots.value && slots.value()) || props.value,
                   },
                 ),
-              props.title &&
+              (props.title || slots.title) &&
                 h(
                   'div',
                   {},
                   {
-                    default: () => props.title,
+                    default: () => (slots.title && slots.title()) || props.title,
                   },
                 ),
               h(CProgress, {
                 class: 'my-2',
-                color: props.progressColor,
+                color: props.progress?.color,
                 height: 4,
-                value: props.progressValue,
+                value: props.progress?.value,
                 white: props.inverse,
               }),
-              props.text &&
+              (props.text || slots.text) &&
                 h(
                   'small',
                   {
@@ -105,7 +116,7 @@ const CWidgetProgress = defineComponent({
                     ],
                   },
                   {
-                    default: () => props.text,
+                    default: () => (slots.text && slots.text()) || props.text,
                   },
                 ),
             ],
@@ -114,4 +125,4 @@ const CWidgetProgress = defineComponent({
   },
 })
 
-export { CWidgetProgress }
+export { CWidgetStatsB }