refactor: update shared props types handling

Author: mrholek

packages/coreui-vue/package.json

@@ -62,6 +62,6 @@
     "vue-types": "^5.1.3"
   },
   "peerDependencies": {
-    "vue": "^3.2.21"
+    "vue": "^3.5.0"
   }
 }

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

@@ -4,9 +4,9 @@ import { CFormFloating } from './CFormFloating'
 import { CFormLabel } from './CFormLabel'
 import { CFormText } from './CFormText'
 
-type CFormControlValidationProps = InstanceType<typeof CFormControlValidation>['$props']
+import type { ComponentProps } from '../../utils/ComponentProps'
 
-interface CFormControlWrapperProps {
+interface CFormControlWrapperProps extends ComponentProps<typeof CFormControlValidation> {
   floatingLabel?: string
   id?: string
   label?: string
@@ -27,7 +27,9 @@ const CFormControlWrapper = defineComponent({
     /**
      * @ignore
      */
-    id: String,
+    id: {
+      type: String,
+    },
     /**
      * Add a caption for a component.
      *
@@ -41,7 +43,7 @@ const CFormControlWrapper = defineComponent({
      */
     text: String,
   },
-  setup(props: CFormControlWrapperProps & CFormControlValidationProps, { slots }) {
+  setup(props: CFormControlWrapperProps, { slots }) {
     const formControlValidation = () =>
       h(
         CFormControlValidation,
@@ -50,7 +52,6 @@ const CFormControlWrapper = defineComponent({
           feedback: props.feedback,
           feedbackInvalid: props.feedbackInvalid,
           feedbackValid: props.feedbackValid,
-          floatingLabel: props.floatingLabel,
           invalid: props.invalid,
           tooltipFeedback: props.tooltipFeedback,
           valid: props.valid,

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

@@ -1,10 +1,9 @@
 import { defineComponent, h } from 'vue'
-
 import { CNavLink } from './CNavLink'
 
-type CNavLinkProps = Omit<InstanceType<typeof CNavLink>['$props'], 'as'>
+import type { ComponentProps } from '../../utils/ComponentProps'
 
-interface CNavItemProps {
+interface CNavItemProps extends ComponentProps<typeof CNavLink> {
   as: string
 }
 
@@ -20,7 +19,7 @@ const CNavItem = defineComponent({
       default: 'li',
     },
   },
-  setup(props: CNavLinkProps & CNavItemProps, { slots }) {
+  setup(props: CNavItemProps, { slots }) {
     return () =>
       h(
         props.as,

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

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

packages/coreui-vue/src/utils/ComponentProps.ts

@@ -0,0 +1,6 @@
+import { DefineComponent, ExtractPropTypes, ExtractPublicPropTypes } from 'vue'
+
+export type ComponentProps<T> =
+  T extends DefineComponent<ExtractPropTypes<infer Props>, any, any>
+    ? ExtractPublicPropTypes<Props>
+    : never

packages/docs/build/docgen.config.js

@@ -8,7 +8,8 @@ module.exports = {
   components: [
     '**/[A-Z]*.ts',
     '!**/[A-Z]*.d.ts',
-    '!**/[A-Z]*.spec.ts'
+    '!**/[A-Z]*.spec.ts',
+    '!**/ComponentProps.ts',
   ],
   outDir: 'api', // folder to save components docs in (relative to the current working directry)
   getDocFileName: (componentPath) =>