@coreui/vue-pro 4.8.0 → 4.8.2

package/src/components/widgets/CWidgetStatsB.ts

@@ -1,9 +1,10 @@
 import { defineComponent, h } from 'vue'
 import { shape } from 'vue-types'
 
-import { Color } from '../props'
-import { CCard, CCardBody } from './../card'
-import { CProgress } from '../progress/CProgress'
+import { CCard, CCardBody } from '../card'
+import { CProgress } from '../progress'
+
+import { Color } from '../../props'
 
 const CWidgetStatsB = defineComponent({
   name: 'CWidgetStatsB',
@@ -17,11 +18,7 @@ const CWidgetStatsB = defineComponent({
     /**
      * Colors have been inverted from their default dark shade.
      */
-    inverse: {
-      type: Boolean,
-      default: undefined,
-      require: false,
-    },
+    inverse: Boolean,
     progress: shape({
       /**
        * Sets the color context of the progress bar to one of CoreUI’s themed colors
@@ -40,26 +37,17 @@ const CWidgetStatsB = defineComponent({
     /**
      * Helper text for your component. If you want to pass non-string value please use dedicated slot `<template #text>...</template>`
      */
-    text: {
-      type: String,
-      default: undefined,
-      require: false,
-    },
+    text: String,
     /**
      * Title 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,
-    },
+    title: String,
     /**
      * Value for your component. If you want to pass non-string or non-number value please use dedicated slot `<template #value>...</template>`
      */
     value: {
       type: [Number, String],
-      default: 0,
-      require: false,
+      default: 0
     },
   },
   setup(props, { slots }) {

package/src/components/widgets/CWidgetStatsC.ts

@@ -1,8 +1,8 @@
 import { defineComponent, h } from 'vue'
 import { shape } from 'vue-types'
 
-import { Color } from '../props'
-import { CCard, CCardBody } from './../card'
+import { Color } from '../../props'
+import { CCard, CCardBody } from '../card'
 import { CProgress } from '../progress/CProgress'
 
 const CWidgetStatsC = defineComponent({
@@ -17,11 +17,7 @@ const CWidgetStatsC = defineComponent({
     /**
      * Colors have been inverted from their default dark shade.
      */
-    inverse: {
-      type: Boolean,
-      default: undefined,
-      require: false,
-    },
+    inverse: Boolean,
     progress: shape({
       /**
        * Sets the color context of the progress bar to one of CoreUI’s themed colors
@@ -40,18 +36,13 @@ const CWidgetStatsC = defineComponent({
     /**
      * Title 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,
-    },
+    title: String,
     /**
      * Value for your component. If you want to pass non-string or non-number value please use dedicated slot `<template #value>...</template>`
      */
     value: {
       type: [Number, String],
-      default: 0,
-      require: false,
+      default: 0
     },
   },
   /**

package/src/components/widgets/CWidgetStatsD.ts

@@ -1,8 +1,9 @@
 import { defineComponent, h, PropType } from 'vue'
 
-import { Color } from '../props'
-import { CCard, CCardBody, CCardHeader } from './../card/'
-import { CCol } from './../grid/'
+import { CCard, CCardBody, CCardHeader } from '../card/'
+import { CCol } from '../grid/'
+
+import { Color } from '../../props'
 
 type Value = {
   title?: string
@@ -24,7 +25,6 @@ const CWidgetStatsD = defineComponent({
     values: {
       type: Array as PropType<Value[]>,
       default: () => [],
-      require: false,
     },
   },
   /**

package/src/components/widgets/CWidgetStatsE.ts

@@ -1,6 +1,6 @@
 import { defineComponent, h } from 'vue'
 
-import { CCard, CCardBody } from './../card/'
+import { CCard, CCardBody } from '../card/'
 
 const CWidgetStatsE = defineComponent({
   name: 'CWidgetStatsE',
@@ -8,18 +8,13 @@ const CWidgetStatsE = defineComponent({
     /**
      * Title 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,
-    },
+    title: String,
     /**
      * Value for your component. If you want to pass non-string or non-number value please use dedicated slot `<template #value>...</template>`
      */
     value: {
       type: [Number, String],
-      default: 0,
-      require: false,
+      default: 0
     },
   },
   /**

package/src/components/widgets/CWidgetStatsF.ts

@@ -1,7 +1,8 @@
 import { defineComponent, h } from 'vue'
 
-import { Color } from '../props'
-import { CCard, CCardBody, CCardFooter } from './../card/'
+import { CCard, CCardBody, CCardFooter } from '../card/'
+
+import { Color } from '../../props'
 
 const CWidgetStatsF = defineComponent({
   name: 'CWidgetStatsF',
@@ -22,26 +23,17 @@ const CWidgetStatsF = defineComponent({
     /**
      * Title 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,
-    },
+    title: String,
     /**
      * Helper text for your component. If you want to pass non-string value please use dedicated slot `<template #text>...</template>`
      */
-    text: {
-      type: String,
-      default: undefined,
-      require: false,
-    },
+    text: String,
     /**
      * Value for your component. If you want to pass non-string or non-number value please use dedicated slot `<template #value>...</template>`
      */
     value: {
       type: [Number, String],
-      default: 0,
-      require: false,
+      default: 0
     },
   },
   /**

package/src/components/widgets/__tests__/__snapshots__/CWidgetStatsA.spec.ts.snap

@@ -1,10 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Loads and display CWidgetStatsA component renders correctly 1`] = `
-"<div class=\\"card bg-warning text-high-emphasis-inverse\\">
-  <div class=\\"card-body pb-0 d-flex justify-content-between align-items-start\\">
+"<div class="card bg-warning text-high-emphasis-inverse">
+  <div class="card-body pb-0 d-flex justify-content-between align-items-start">
     <div>
-      <div class=\\"fs-4 fw-semibold\\">75</div>
+      <div class="fs-4 fw-semibold">75</div>
       <div>title</div>
     </div>action
   </div>chartDefault slot

package/src/components/widgets/__tests__/__snapshots__/CWidgetStatsB.spec.ts.snap

@@ -1,13 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Loads and display CWidgetStatsB component renders correctly 1`] = `
-"<div class=\\"card bg-warning text-high-emphasis-inverse\\">
-  <div class=\\"card-body\\">
-    <div class=\\"fs-4 fw-semibold\\">75</div>
+"<div class="card bg-warning text-high-emphasis-inverse">
+  <div class="card-body">
+    <div class="fs-4 fw-semibold">75</div>
     <div>title</div>
-    <div class=\\"progress progress-white my-2\\" style=\\"height: 4px;\\">
-      <div class=\\"progress-bar bg-info\\" role=\\"progressbar\\" style=\\"width: 75%;\\" aria-valuenow=\\"75\\" aria-valuemin=\\"0\\" aria-valuemax=\\"100\\"></div>
-    </div><small class=\\"text-medium-emphasis-inverse\\">text</small>
+    <div class="progress progress-white my-2" style="height: 4px;">
+      <div class="progress-bar bg-info" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
+    </div><small class="text-medium-emphasis-inverse">text</small>
   </div>
 </div>"
 `;

package/src/components/widgets/__tests__/__snapshots__/CWidgetStatsC.spec.ts.snap

@@ -1,13 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Loads and display CWidgetStatsC component renders correctly 1`] = `
-"<div class=\\"card bg-warning text-white\\">
-  <div class=\\"card-body\\">
-    <div class=\\"text-end mb-4 text-medium-emphasis-inverse\\">icon</div>
-    <div class=\\"fs-4 fw-semibold\\">75</div>
-    <div class=\\"text-uppercase fw-semibold small text-medium-emphasis-inverse\\">title</div>
-    <div class=\\"progress progress-white my-2\\" style=\\"height: 4px;\\">
-      <div class=\\"progress-bar bg-info\\" role=\\"progressbar\\" style=\\"width: 75%;\\" aria-valuenow=\\"75\\" aria-valuemin=\\"0\\" aria-valuemax=\\"100\\"></div>
+"<div class="card bg-warning text-white">
+  <div class="card-body">
+    <div class="text-end mb-4 text-medium-emphasis-inverse">icon</div>
+    <div class="fs-4 fw-semibold">75</div>
+    <div class="text-uppercase fw-semibold small text-medium-emphasis-inverse">title</div>
+    <div class="progress progress-white my-2" style="height: 4px;">
+      <div class="progress-bar bg-info" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
     </div>
   </div>
 </div>"

package/src/components/widgets/__tests__/__snapshots__/CWidgetStatsD.spec.ts.snap

@@ -1,18 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Loads and display CWidgetStatsD component renders correctly 1`] = `
-"<div class=\\"card\\">
-  <div class=\\"card-header position-relative d-flex justify-content-center align-items-center bg-warning\\">iconchart</div>
-  <div class=\\"card-body row text-center\\">
+"<div class="card">
+  <div class="card-header position-relative d-flex justify-content-center align-items-center bg-warning">iconchart</div>
+  <div class="card-body row text-center">
     <!---->
-    <div class=\\"col\\">
-      <div class=\\"col fs-5 fw-semibold\\">bb</div>
-      <div class=\\"col text-uppercase text-medium-emphasis small\\">aa</div>
+    <div class="col">
+      <div class="col fs-5 fw-semibold">bb</div>
+      <div class="col text-uppercase text-medium-emphasis small">aa</div>
     </div>
-    <div class=\\"vr\\"></div>
-    <div class=\\"col\\">
-      <div class=\\"col fs-5 fw-semibold\\">dd</div>
-      <div class=\\"col text-uppercase text-medium-emphasis small\\">cc</div>
+    <div class="vr"></div>
+    <div class="col">
+      <div class="col fs-5 fw-semibold">dd</div>
+      <div class="col text-uppercase text-medium-emphasis small">cc</div>
     </div>
   </div>
 </div>"

package/src/components/widgets/__tests__/__snapshots__/CWidgetStatsE.spec.ts.snap

@@ -1,10 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Loads and display CWidgetStatsE component renders correctly 1`] = `
-"<div class=\\"card\\">
-  <div class=\\"card-body text-center\\">
-    <div class=\\"text-muted small text-uppercase font-weight-bold\\">title</div>
-    <div class=\\"h2 py-3\\">value</div>chartdefault
+"<div class="card">
+  <div class="card-body text-center">
+    <div class="text-muted small text-uppercase font-weight-bold">title</div>
+    <div class="h2 py-3">value</div>chartdefault
   </div>
 </div>"
 `;

package/src/components/widgets/__tests__/__snapshots__/CWidgetStatsF.spec.ts.snap

@@ -1,14 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Loads and display CWidgetStatsF component renders correctly 1`] = `
-"<div class=\\"card\\">
-  <div class=\\"card-body d-flex align-items-center\\">
-    <div class=\\"me-3 text-white bg-warning p-3\\">default</div>
+"<div class="card">
+  <div class="card-body d-flex align-items-center">
+    <div class="me-3 text-white bg-warning p-3">default</div>
     <div>
-      <div class=\\"fs-6 fw-semibold text-warning\\">75</div>
-      <div class=\\"text-medium-emphasis text-uppercase fw-semibold small\\">title</div>
+      <div class="fs-6 fw-semibold text-warning">75</div>
+      <div class="text-medium-emphasis text-uppercase fw-semibold small">title</div>
     </div>
   </div>
-  <div class=\\"card-footer\\">footer</div>
+  <div class="card-footer">footer</div>
 </div>"
 `;

package/src/props.ts

@@ -0,0 +1,88 @@
+export const Shape = {
+  type: String,
+  validator: (value: string): boolean => {
+    // The value must match one of these strings
+    return [
+      'rounded',
+      'rounded-top',
+      'rounded-end',
+      'rounded-bottom',
+      'rounded-start',
+      'rounded-circle',
+      'rounded-pill',
+      'rounded-0',
+      'rounded-1',
+      'rounded-2',
+      'rounded-3',
+    ].includes(value)
+  },
+}
+
+export const Align = {
+  type: String,
+  validator: (value: string): boolean => {
+    // The value must match one of these strings
+    return ['', 'left', 'center', 'right'].includes(value)
+  },
+}
+
+export const Color = {
+  type: String,
+  validator: (value: string): boolean => {
+    // The value must match one of these strings
+    return [
+      'primary',
+      'secondary',
+      'success',
+      'danger',
+      'warning',
+      'info',
+      'dark',
+      'light',
+      'link',
+      'transparent',
+      'primary-gradient',
+      'secondary-gradient',
+      'success-gradient',
+      'danger-gradient',
+      'warning-gradient',
+      'info-gradient',
+      'dark-gradient',
+      'light-gradient',
+    ].includes(value)
+  },
+}
+
+export const TextColor = {
+  type: String,
+  validator: (value: string): boolean => {
+    return [
+      'primary',
+      'secondary',
+      'success',
+      'danger',
+      'warning',
+      'info',
+      'dark',
+      'light',
+      'white',
+      'muted',
+      'high-emphasis',
+      'medium-emphasis',
+      'disabled',
+      'high-emphasis-inverse',
+      'medium-emphasis-inverse',
+      'disabled-inverse',
+    ].includes(value)
+  },
+}
+
+export const Breakpoint = {
+  validator: (value: boolean | number): boolean => {
+    if (typeof value == 'boolean' || typeof value == 'number') {
+      return true
+    } else {
+      return false
+    }
+  },
+}

package/src/types.ts

@@ -0,0 +1,54 @@
+export type Breakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
+
+export type Colors =
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'danger'
+  | 'warning'
+  | 'info'
+  | 'dark'
+  | 'light'
+  | 'primary-gradient'
+  | 'secondary-gradient'
+  | 'success-gradient'
+  | 'danger-gradient'
+  | 'warning-gradient'
+  | 'info-gradient'
+  | 'dark-gradient'
+  | 'light-gradient'
+  | string
+
+export type Placements =
+  | 'auto'
+  | 'auto-start'
+  | 'auto-end'
+  | 'top-end'
+  | 'top'
+  | 'top-start'
+  | 'bottom-end'
+  | 'bottom'
+  | 'bottom-start'
+  | 'right-start'
+  | 'right'
+  | 'right-end'
+  | 'left-start'
+  | 'left'
+  | 'left-end'
+  | undefined
+
+export type Shapes =
+  | 'rounded'
+  | 'rounded-top'
+  | 'rounded-end'
+  | 'rounded-bottom'
+  | 'rounded-start'
+  | 'rounded-circle'
+  | 'rounded-pill'
+  | 'rounded-0'
+  | 'rounded-1'
+  | 'rounded-2'
+  | 'rounded-3'
+  | string
+
+export type Triggers = 'hover' | 'focus' | 'click'