refactor: update shared props types handling

Author: mrholek

packages/coreui-vue/src/components/form/CFormControlWrapper.ts

@@ -4,6 +4,15 @@ import { CFormFloating } from './CFormFloating'
 import { CFormLabel } from './CFormLabel'
 import { CFormText } from './CFormText'
 
+type CFormControlValidationProps = InstanceType<typeof CFormControlValidation>['$props']
+
+interface CFormControlWrapperProps {
+  floatingLabel?: string
+  id?: string
+  label?: string
+  text?: string
+}
+
 const CFormControlWrapper = defineComponent({
   name: 'CFormControlWrapper',
   inheritAttrs: false,
@@ -32,7 +41,7 @@ const CFormControlWrapper = defineComponent({
      */
     text: String,
   },
-  setup(props, { slots }) {
+  setup(props: CFormControlWrapperProps & CFormControlValidationProps, { slots }) {
     const formControlValidation = () =>
       h(
         CFormControlValidation,

packages/coreui-vue/src/components/form/CFormInput.ts

@@ -130,7 +130,9 @@ const CFormInput = defineComponent({
       h(
         CFormControlWrapper,
         {
-          describedby: attrs['aria-describedby'],
+          ...(typeof attrs['aria-describedby'] === 'string' && {
+            describedby: attrs['aria-describedby'],
+          }),
           feedback: props.feedback,
           feedbackInvalid: props.feedbackInvalid,
           feedbackValid: props.feedbackValid,

packages/coreui-vue/src/components/form/CFormSelect.ts

@@ -119,7 +119,9 @@ const CFormSelect = defineComponent({
       h(
         CFormControlWrapper,
         {
-          describedby: attrs['aria-describedby'],
+          ...(typeof attrs['aria-describedby'] === 'string' && {
+            describedby: attrs['aria-describedby'],
+          }),
           feedback: props.feedback,
           feedbackInvalid: props.feedbackInvalid,
           feedbackValid: props.feedbackValid,

packages/coreui-vue/src/components/form/CFormTextarea.ts

@@ -106,7 +106,9 @@ const CFormTextarea = defineComponent({
       h(
         CFormControlWrapper,
         {
-          describedby: attrs['aria-describedby'],
+          ...(typeof attrs['aria-describedby'] === 'string' && {
+            describedby: attrs['aria-describedby'],
+          }),
           feedback: props.feedback,
           feedbackInvalid: props.feedbackInvalid,
           feedbackValid: props.feedbackValid,

packages/coreui-vue/src/components/nav/CNavItem.ts

@@ -2,6 +2,12 @@ import { defineComponent, h } from 'vue'
 
 import { CNavLink } from './CNavLink'
 
+type CNavLinkProps = Omit<InstanceType<typeof CNavLink>['$props'], 'as'>
+
+interface CNavItemProps {
+  as: string
+}
+
 const CNavItem = defineComponent({
   name: 'CNavItem',
   props: {
@@ -14,12 +20,11 @@ const CNavItem = defineComponent({
       default: 'li',
     },
   },
-  setup(props, { slots }) {
+  setup(props: CNavLinkProps & CNavItemProps, { slots }) {
     return () =>
       h(
         props.as,
         {
-          as: props.component,
           class: 'nav-item',
         },
         props.href

packages/coreui-vue/src/components/toast/CToastClose.ts

@@ -1,6 +1,12 @@
 import { defineComponent, h, inject } from 'vue'
 import { CCloseButton } from '../close-button/CCloseButton'
 
+type CCloseButtonProps = InstanceType<typeof CCloseButton>['$props']
+
+interface CToastCloseProps {
+  as: string
+}
+
 const CToastClose = defineComponent({
   name: 'CToastClose',
   props: {
@@ -16,7 +22,7 @@ const CToastClose = defineComponent({
      */
     'close',
   ],
-  setup(props, { slots, emit }) {
+  setup(props: CToastCloseProps & CCloseButtonProps, { slots, emit }) {
     // eslint-disable-next-line no-unused-vars
     const updateVisible = inject('updateVisible') as (visible: boolean) => void
     const handleClose = () => {

packages/coreui-vue/src/components/toast/CToastHeader.ts

@@ -9,20 +9,11 @@ const CToastHeader = defineComponent({
      */
     closeButton: Boolean,
   },
-  emits: [
-    /**
-     * Event called after clicking the close button.
-     */
-    'close',
-  ],
-  setup(props, { slots, emit }) {
+  setup(props, { slots }) {
     return () =>
       h('div', { class: 'toast-header' }, [
         slots.default && slots.default(),
-        props.closeButton &&
-          h(CToastClose, {
-            onClose: () => emit('close'),
-          }),
+        props.closeButton && h(CToastClose),
       ])
   },
 })