refactor: update example views

src/views/widgets/Widgets.vue

@@ -652,37 +652,37 @@
 </template>
 
 <script>
-import { getStyle } from "@coreui/utils";
-import { CChart } from "@coreui/vue-chartjs";
-import WidgetsStatsA from "./WidgetsStatsTypeA.vue";
-import WidgetsStatsD from "./WidgetsStatsTypeD.vue";
-import Example from "../../components/DocsExample.vue";
+import { getStyle } from '@coreui/utils'
+import { CChart } from '@coreui/vue-chartjs'
+import WidgetsStatsA from './WidgetsStatsTypeA.vue'
+import WidgetsStatsD from './WidgetsStatsTypeD.vue'
+import Example from '../../components/DocsExample.vue'
 export default {
-  name: "Widgets",
+  name: 'Widgets',
   components: {
     CChart,
     WidgetsStatsA,
     WidgetsStatsD,
     Example,
   },
-  data() {
+  setup() {
     const widgetStatsE = {
       labels: [
-        "M",
-        "T",
-        "W",
-        "T",
-        "F",
-        "S",
-        "S",
-        "M",
-        "T",
-        "W",
-        "T",
-        "F",
-        "S",
-        "S",
-        "M",
+        'M',
+        'T',
+        'W',
+        'T',
+        'F',
+        'S',
+        'S',
+        'M',
+        'T',
+        'W',
+        'T',
+        'F',
+        'S',
+        'S',
+        'M',
       ],
       optionsBar: {
         maintainAspectRatio: false,
@@ -724,19 +724,19 @@ export default {
           },
         },
       },
-    };
+    }
 
     return {
       getStyle,
       widgetStatsE,
       widgetProgressIconItems: [
-        { color: "primary", icon: "cil-puzzle" },
-        { color: "success", icon: "cil-speedometer" },
-        { color: "danger", icon: "cil-cursor" },
-        { color: "info", icon: "cil-drop" },
-        { color: "secondary", icon: "cil-pencil" },
+        { color: 'primary', icon: 'cil-puzzle' },
+        { color: 'success', icon: 'cil-speedometer' },
+        { color: 'danger', icon: 'cil-cursor' },
+        { color: 'info', icon: 'cil-drop' },
+        { color: 'secondary', icon: 'cil-pencil' },
       ],
-    };
+    }
   },
-};
+}
 </script>

src/views/widgets/WidgetsStatsTypeA.vue

@@ -1,7 +1,7 @@
 <template>
   <CRow>
     <CCol :xs="3">
-      <CWidgetStatsA class="mb-3" color="primary">
+      <CWidgetStatsA class="mb-4" color="primary">
         <template #value
           >26K
           <span class="fs-6 fw-normal">
@@ -96,7 +96,7 @@
       </CWidgetStatsA>
     </CCol>
     <CCol :xs="3">
-      <CWidgetStatsA class="mb-3" color="info">
+      <CWidgetStatsA class="mb-4" color="info">
         <template #value
           >$6.200
           <span class="fs-6 fw-normal">
@@ -190,7 +190,7 @@
       </CWidgetStatsA>
     </CCol>
     <CCol :xs="3">
-      <CWidgetStatsA class="mb-3" color="warning">
+      <CWidgetStatsA class="mb-4" color="warning">
         <template #value
           >2.49%
           <span class="fs-6 fw-normal">
@@ -271,7 +271,7 @@
       </CWidgetStatsA>
     </CCol>
     <CCol :xs="3">
-      <CWidgetStatsA class="mb-3" color="danger">
+      <CWidgetStatsA class="mb-4" color="danger">
         <template #value
           >44K
           <span class="fs-6 fw-normal">