releae: v4.0.0-beta.1

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coreui/vue",
   "description": "UI Components Library for Vue.js",
-  "version": "4.0.0-beta.0",
+  "version": "4.0.0-beta.1",
   "config": {
     "version_short": "4.0"
   },
@@ -67,7 +67,7 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-vue": "^6.0.0",
     "ts-jest": "^27.0.5",
-    "typescript": "^4.4.2",
+    "typescript": "4.3.5",
     "vue": "^3.2.6",
     "vue-docgen-cli": "^4.41.1",
     "vue-jest": "^5.0.0-alpha.7",

src/components/badge/CBadge.ts

@@ -59,6 +59,7 @@ const CBadge = defineComponent({
               [`text-${props.textColor}`]: props.textColor,
               [`badge-${props.size}`]: props.size,
             },
+            props.shape,
           ],
         },
         slots.default && slots.default(),

src/components/form/CFormCheck.ts

@@ -97,7 +97,7 @@ const CFormCheck = defineComponent({
       required: false,
     },
   },
-  setup(props, { attrs }) {
+  setup(props, { slots, attrs }) {
     const formControl = () => {
       return h('input', {
         ...attrs,
@@ -131,14 +131,14 @@ const CFormCheck = defineComponent({
           ...(props.id && { for: props.id }),
         },
         {
-          default: () => props.label,
+          default: () => (slots.label && slots.label()) || props.label,
         },
       )
     }
 
     return () =>
       props.button
-        ? [formControl(), props.label && formLabel()]
+        ? [formControl(), (slots.label || props.label) && formLabel()]
         : props.label
         ? h(
             'div',

src/components/form/CFormInput.ts

@@ -63,17 +63,7 @@ const CFormInput = defineComponent({
       required: false,
     },
   },
-  emits: ['change', 'input'],
-  setup(props, { attrs, emit, slots }) {
-    const handleInput = (event: Event) => {
-      const target = event.target as HTMLInputElement
-      emit('input', target.value)
-    }
-
-    const handleChange = (event: Event) => {
-      const target = event.target as HTMLInputElement
-      emit('change', target.value)
-    }
+  setup(props, { attrs, slots }) {
     return () =>
       h(
         'input',
@@ -89,8 +79,6 @@ const CFormInput = defineComponent({
               'is-valid': props.valid,
             },
           ],
-          onChange: handleChange,
-          onInput: handleInput,
         },
         slots.default && slots.default(),
       )

src/components/form/CFormSelect.ts

@@ -39,12 +39,7 @@ const CFormSelect = defineComponent({
       required: false,
     },
   },
-  emits: ['change'],
-  setup(props, { attrs, emit, slots }) {
-    const handleChange = (event: Event) => {
-      const target = event.target as HTMLSelectElement
-      emit('change', Number(target.value))
-    }
+  setup(props, { attrs, slots }) {
     return () =>
       h(
         'select',
@@ -57,7 +52,6 @@ const CFormSelect = defineComponent({
             },
           ],
           size: props.htmlSize,
-          onChange: handleChange,
         },
         slots.default && slots.default(),
       )

src/components/pagination/CPaginationItem.ts

@@ -36,11 +36,7 @@ const CPaginationItem = defineComponent({
       required: false,
     },
   },
-  emits: ['click'],
-  setup(props, { emit, slots }) {
-    const handleClick = () => {
-      emit('click')
-    }
+  setup(props, { slots }) {
     return () => {
       const component = props.component ? props.component : props.active ? 'span' : 'a'
       return h(
@@ -62,7 +58,6 @@ const CPaginationItem = defineComponent({
                 class: ['page-link'],
                 component: component,
                 href: props.href,
-                onClick: handleClick,
               },
               {
                 default: () => slots.default && slots.default(),

src/components/progress/CProgressBar.ts

@@ -1,5 +1,7 @@
 import { defineComponent, h } from 'vue'
 
+import { Color } from '../props'
+
 const CProgressBar = defineComponent({
   name: 'CProgressBar',
   props: {
@@ -15,23 +17,7 @@ const CProgressBar = defineComponent({
      *
      * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
      */
-    color: {
-      type: String,
-      default: undefined,
-      require: true,
-      validator: (value: string) => {
-        return [
-          'primary',
-          'secondary',
-          'success',
-          'danger',
-          'warning',
-          'info',
-          'dark',
-          'light',
-        ].includes(value)
-      },
-    },
+    color: Color,
     /**
      * The percent to progress the ProgressBar.
      *

src/components/table/CTableRow.ts

@@ -32,11 +32,7 @@ const CTableRow = defineComponent({
      */
     color: Color,
   },
-  emits: ['click'],
-  setup(props, { emit, slots }) {
-    const handleClick = () => {
-      emit('click')
-    }
+  setup(props, { slots }) {
     return () =>
       h(
         'tr',
@@ -48,7 +44,6 @@ const CTableRow = defineComponent({
               [`table-${props.color}`]: props.color,
             },
           ],
-          onClick: handleClick,
         },
         slots.default && slots.default(),
       )

yarn.lock

@@ -6991,10 +6991,10 @@ typedarray-to-buffer@^3.1.5:
   dependencies:
     is-typedarray "^1.0.0"
 
-typescript@^4.4.2:
-  version "4.4.2"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.4.2.tgz#6d618640d430e3569a1dfb44f7d7e600ced3ee86"
-  integrity sha512-gzP+t5W4hdy4c+68bfcv0t400HVJMMd2+H9B7gae1nQlBzCqvrXX+6GL/b3GAgyTH966pzrZ70/fRjwAtZksSQ==
+typescript@4.3.5:
+  version "4.3.5"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.3.5.tgz#4d1c37cc16e893973c45a06886b7113234f119f4"
+  integrity sha512-DqQgihaQ9cUrskJo9kIyW/+g0Vxsk8cDtZ52a3NGh0YNTfpUSArXSohyUGnvbPazEPLu398C0UxmKSOrPumUzA==
 
 uc.micro@^1.0.1, uc.micro@^1.0.5:
   version "1.0.6"