Major refactor to export TypeScript Definitions of Vue Components

Author: mythz

env.d.ts

@@ -1 +1,7 @@
 /// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

package-lock.json

@@ -53,7 +53,7 @@
     "typescript": "~4.9.5",
     "uglify-js": "^3.19.3",
     "vite": "^4.1.5",
-    "vite-plugin-dts": "^1.7.2",
+    "vite-plugin-dts": "^4.5.4",
     "vitest": "^0.34.6",
     "vue-tsc": "^1.0.24",
     "webdriverio": "^8.35.1"

package.json

@@ -26,11 +26,9 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
+import type { AlertProps } from '@/components/types'
 
-const props = withDefaults(defineProps<{
-    type?: "warn" | "info" | "error" | "success",
-    hideIcon?: boolean
-}>(), {
+const props = withDefaults(defineProps<AlertProps>(), {
     type: "warn"
 })
 

src/components/Alert.vue

@@ -27,10 +27,9 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
+import type { AlertSuccessProps } from '@/components/types'
 
 const dismissed = ref(false)
 
-defineProps<{
-    message?: string
-}>()
+defineProps<AlertSuccessProps>()
 </script>

src/components/AlertSuccess.vue

@@ -85,7 +85,8 @@
 </template>
 
 <script setup lang="ts">
-import type { ApiRequest, ApiResponse, ResponseStatus, ModalProvider, InputProp } from '@/types'
+import type { ApiRequest, ApiResponse, ModalProvider } from '@/types'
+import type { AutoCreateFormProps, AutoCreateFormEmits } from '@/components/types'
 import { useClient } from '@/use/client'
 import { useMetadata } from '@/use/metadata'
 import { form } from './css'
@@ -94,33 +95,14 @@ import { getTypeName, transition } from '@/use/utils'
 import { Sole }  from '@/use/config'
 import { ApiResult, HttpMethods, humanize, map } from '@servicestack/client'
 
-const props = withDefaults(defineProps<{
-    type: string|InstanceType<any>|Function
-    formStyle?: "slideOver" | "card"
-    panelClass?: string
-    formClass?: string
-    headingClass?: string
-    subHeadingClass?: string
-    buttonsClass?: string,
-    heading?: string
-    subHeading?: string
-    autosave?: boolean
-    showLoading?: boolean,
-    showCancel?: boolean
-    configureField?: (field:InputProp) => void
-    configureFormLayout?: (field:InputProp[]) => void
-}>(), {
+const props = withDefaults(defineProps<AutoCreateFormProps>(), {
     formStyle: "slideOver",
     autosave: true,
     showLoading: true,
     showCancel: true
 })
 
-const emit = defineEmits<{
-    (e:'done'): void
-    (e:'save', response:any): () => void
-    (e:'error', status:ResponseStatus): void
-}>()
+const emit = defineEmits<AutoCreateFormEmits>()
 
 const formFields = ref()
 const formFieldsKey = ref(1)

src/components/AutoCreateForm.vue

@@ -20,15 +20,15 @@
                 <slot name="footer" :formInstance="getCurrentInstance()?.exposed" :model="model"></slot>
 
             </div>
-            <div :class="form.buttonsClass">
+            <div :class="buttonsClass">
                 <div>
                     <ConfirmDelete v-if="deleteType" @delete="onDelete" />
                 </div>
                 <div>
                     <FormLoading v-if="showLoading && loading" />
                 </div>
                 <div class="flex justify-end">
-                    <SecondaryButton @click="close" :disabled="loading">Cancel</SecondaryButton>
+                    <SecondaryButton v-if="showCancel" @click="close" :disabled="loading">Cancel</SecondaryButton>
                     <PrimaryButton type="submit" class="ml-4" :disabled="loading">Save</PrimaryButton>
                 </div>
             </div>
@@ -66,15 +66,15 @@
 
                                 </div>
                             </div>
-                            <div :class="form.buttonsClass">
+                            <div :class="buttonsClass">
                                 <div>
                                     <ConfirmDelete v-if="deleteType" @delete="onDelete" />
                                 </div>
                                 <div>
                                     <FormLoading v-if="showLoading && loading" />
                                 </div>
                                 <div class="flex justify-end">
-                                    <SecondaryButton @click="close" :disabled="loading">Cancel</SecondaryButton>
+                                    <SecondaryButton v-if="showCancel" @click="close" :disabled="loading">Cancel</SecondaryButton>
                                     <PrimaryButton type="submit" class="ml-4" :disabled="loading">Save</PrimaryButton>
                                 </div>
                             </div>
@@ -91,42 +91,23 @@
 </template>
 
 <script setup lang="ts">
-import type { ApiRequest, ApiResponse, ResponseStatus, ModalProvider, InputProp } from '@/types'
-import { computed, getCurrentInstance, nextTick, onMounted, onUnmounted, provide, ref, watch } from 'vue'
+import type { ApiRequest, ApiResponse, ModalProvider, InputProp } from '@/types'
+import type { AutoEditFormProps, AutoEditFormEmits } from '@/components/types'
+import { computed, getCurrentInstance, onMounted, onUnmounted, provide, ref, watch } from 'vue'
 import { useClient } from '@/use/client'
 import { toFormValues, useMetadata } from '@/use/metadata'
 import { form } from './css'
 import { getTypeName, transition } from '@/use/utils'
 import { Sole }  from '@/use/config'
 import { ApiResult, HttpMethods, humanize, map, mapGet } from '@servicestack/client'
 
-const props = withDefaults(defineProps<{
-    modelValue: any
-    type: string|InstanceType<any>|Function
-    deleteType?: string|InstanceType<any>|Function
-    formStyle?: "slideOver" | "card"
-    panelClass?: string
-    formClass?: string
-    headingClass?: string
-    subHeadingClass?: string
-    heading?: string
-    subHeading?: string
-    autosave?: boolean
-    showLoading?: boolean
-    configureField?: (field:InputProp) => void
-    configureFormLayout?: (field:InputProp[]) => void
-}>(), {
+const props = withDefaults(defineProps<AutoEditFormProps>(), {
     formStyle: "slideOver",
     autosave: true,
     showLoading: true,
 })
 
-const emit = defineEmits<{
-    (e:'done'): void
-    (e:'save', response:any): () => void
-    (e:'delete', response:any): () => void
-    (e:'error', status:ResponseStatus): void
-}>()
+const emit = defineEmits<AutoEditFormEmits>()
 
 const formFields = ref()
 const formFieldsKey = ref(1)
@@ -179,6 +160,7 @@ const panelClass = computed(() => props.panelClass || form.panelClass(props.form
 const formClass = computed(() => props.formClass || form.formClass(props.formStyle))
 const headingClass = computed(() => props.headingClass || form.headingClass(props.formStyle))
 const subHeadingClass = computed(() => props.subHeadingClass || form.subHeadingClass(props.formStyle))
+const buttonsClass = computed(() => props.buttonsClass || form.buttonsClass)
 
 const dataModel = computed(() => Crud.model(metaType.value))
 const title = computed(() => props.heading || typeOf(typeName.value)?.description || 

src/components/AutoEditForm.vue

@@ -97,49 +97,23 @@
 
 <script setup lang="ts">
 import type { MetadataType, ApiRequest, ResponseStatus, ModalProvider, InputProp } from '@/types'
+import type { AutoFormProps, AutoFormEmits } from '@/components/types'
 import { computed, provide, ref, getCurrentInstance, watch, onMounted, onUnmounted, nextTick } from 'vue'
 import { ApiResult, HttpMethods, humanize, map, omitEmpty } from '@servicestack/client'
 import { useClient } from '@/use/client'
 import { transition, useUtils } from '@/use/utils'
 import { useMetadata } from '@/use/metadata'
 import { form, card, slideOver } from './css'
 
-const props = withDefaults(defineProps<{
-    type: string|InstanceType<any>|Function
-    modelValue?: ApiRequest|any
-    heading?: string
-    subHeading?: string
-    showLoading?: boolean
-    jsconfig?: string
-    formStyle?: "slideOver" | "card"
-    metaType?: MetadataType
-    configureField?: (field:InputProp) => void
-    configureFormLayout?: (field:InputProp[]) => void
-
-    panelClass?: string
-    bodyClass?: string
-    formClass?: string
-    innerFormClass?: string
-    headerClass?: string
-    buttonsClass?: string
-    headingClass?: string
-    subHeadingClass?: string
-    submitLabel?: string
-    allowSubmit?: (model:any) => boolean
-}>(), {
+const props = withDefaults(defineProps<AutoFormProps>(), {
     formStyle: "card",
     headerClass: 'p-6',
     submitLabel: 'Submit',
     jsconfig: 'eccn,edv',
     showLoading: true,
 })
 
-const emit = defineEmits<{
-    (e:'success', response:any): void
-    (e:'error', error:ResponseStatus): void
-    (e:'update:modelValue', model:any): void
-    (e:'done'): void
-}>()
+const emit = defineEmits<AutoFormEmits>()
 
 const formFields = ref()
 const formFieldsKey = ref(1)

src/components/AutoForm.vue

@@ -20,35 +20,21 @@
 </template>
 
 <script setup lang="ts">
-import type { MetadataType, InputInfo, ApiRequest, ResponseStatus, InputProp } from '@/types'
+import type { InputInfo, InputProp } from '@/types'
+import type { AutoFormFieldsProps, AutoFormFieldsEmits } from '@/components/types'
 import { computed, getCurrentInstance } from 'vue'
 import { typeForInput, typeProperties, useMetadata } from '@/use/metadata'
 import { getTypeName } from '@/use/utils'
 import { mapGet } from "@servicestack/client"
 
-const props = withDefaults(defineProps<{
-  modelValue: ApiRequest
-  type?: string
-  metaType?: MetadataType
-  api: {error?:ResponseStatus}|null
-  formLayout?: InputInfo[]
-  configureField?: (field:InputProp) => void
-  configureFormLayout?: (field:InputProp[]) => void
-  hideSummary?: boolean
-  flexClass?: string
-  divideClass?: string
-  spaceClass?: string
-  fieldsetClass?: string
-}>(), {
+const props = withDefaults(defineProps<AutoFormFieldsProps>(), {
     flexClass: "flex flex-1 flex-col justify-between",
     divideClass: "divide-y divide-gray-200 px-4 sm:px-6",
     spaceClass: "space-y-6 pt-6 pb-5",
     fieldsetClass: "grid grid-cols-12 gap-6"
 })
 
-const emit = defineEmits<{
-    (e: "update:modelValue", o:any): void
-}>()
+const emit = defineEmits<AutoFormFieldsEmits>()
 
 defineExpose({ forceUpdate, props, updateValue })
 function forceUpdate() {

src/components/AutoFormFields.vue

@@ -174,8 +174,8 @@
 </template>
 
 <script setup lang="ts">
-import type { ApiPrefs, ApiResponse, AutoQueryConvention, Column, ColumnSettings, TableStyleOptions, MetadataPropertyType, GridAllowOptions, GridShowOptions, InputProp, Breakpoint } from '@/types'
-import type { StyleValue } from 'vue'
+import type { ApiPrefs, ApiResponse, Column, ColumnSettings, MetadataPropertyType, GridAllowOptions, GridShowOptions } from '@/types'
+import type { AutoQueryGridProps, AutoQueryGridEmits } from '@/components/types'
 import { computed, inject, nextTick, onMounted, ref, useSlots, getCurrentInstance } from 'vue'
 import { ApiResult, appendQueryString, combinePaths, delaySet, JsonServiceClient, leftPart, mapGet, queryString, rightPart } from '@servicestack/client'
 import { Apis, createDto, getPrimaryKey, isComplexProp, typeProperties, useMetadata } from '@/use/metadata'
@@ -196,55 +196,12 @@ const { config, autoQueryGridDefaults } = useConfig()
 const aqd = autoQueryGridDefaults
 const storage = config.value.storage!
 
-const props = withDefaults(defineProps<{
-    filterDefinitions?: AutoQueryConvention[]
-    id?: string
-    apis?: string|string[]
-    type?: string|InstanceType<any>|Function
-    prefs?: ApiPrefs
-
-    deny?: string|GridAllowOptions|GridAllowOptions[]
-    hide?: string|GridShowOptions|GridShowOptions[]
-    
-    selectedColumns?:string[]|string
-    toolbarButtonClass?: string
-    tableStyle?: TableStyleOptions
-    gridClass?: string
-    grid2Class?: string
-    grid3Class?: string
-    grid4Class?: string
-    tableClass?: string
-    theadClass?: string
-    tbodyClass?: string
-    theadRowClass?: string
-    theadCellClass?: string
-
-    headerTitle?:(name:string) => string
-    headerTitles?: {[name:string]:string}
-    visibleFrom?: {[name:string]:Breakpoint|"never"}
-    rowClass?:(model:any,i:number) => string
-    rowStyle?:(model:any,i:number) => StyleValue | undefined
-    modelTitle?: string
-    newButtonLabel?: string
-
-    apiPrefs?: ApiPrefs
-    canFilter?:(column:string) => boolean
-    disableKeyBindings?:(column:string) => boolean
-    configureField?: (field:InputProp) => void
-    skip?: number
-    create?: boolean
-    edit?: string|number
-    filters?: any
-}>(), {
+const props = withDefaults(defineProps<AutoQueryGridProps>(), {
     id: 'AutoQueryGrid',
     skip: 0
 })
 
-const emit = defineEmits<{
-    (e: "headerSelected", name:string, ev:Event): void
-    (e: "rowSelected", item:any, ev:Event): void
-    (e: "nav", args:any): void
-}>()
+const emit = defineEmits<AutoQueryGridEmits>()
 
 const client = inject<JsonServiceClient>('client')!
 

src/components/AutoQueryGrid.vue

@@ -63,7 +63,8 @@
 </template>
 
 <script setup lang="ts">
-import type { ApiResponse, ResponseStatus } from '@/types'
+import type { ApiResponse } from '@/types'
+import type { AutoViewFormProps, AutoViewFormEmits } from '@/components/types'
 import { useMetadata, toFormValues, Apis } from '@/use/metadata'
 import { form } from './css'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
@@ -72,30 +73,11 @@ import { Sole }  from '@/use/config'
 import { useClient } from '@/use/client'
 import { ApiResult, humanize, map, mapGet } from '@servicestack/client'
 
-const props = withDefaults(defineProps<{
-    model: any
-    apis?: Apis,
-    typeName?: string,
-    done?: Function,
-    formStyle?: "slideOver" | "card"
-    panelClass?: string
-    formClass?: string
-    headingClass?: string
-    subHeadingClass?: string
-    heading?: string
-    subHeading?: string
-    showLoading?: boolean
-    deleteType?: string|InstanceType<any>|Function
-}>(), {
+const props = withDefaults(defineProps<AutoViewFormProps>(), {
     formStyle: "slideOver",
 })
 
-const emit = defineEmits<{
-    (e:'done'): void
-    (e:'save', response:any): () => void
-    (e:'delete', response:any): () => void
-    (e:'error', status:ResponseStatus): void
-}>()
+const emit = defineEmits<AutoViewFormEmits>()
 
 const { typeOf, getPrimaryKey, Crud, createDto } = useMetadata()