fix(typescript): use vue-tsc in build step / fix typescript errors in src #41

sfxcode · sfxcode · commit be7bde1733dc · 2024-10-23T17:45:48.000+02:00
diff --git a/.gitignore b/.gitignore
@@ -24,6 +24,7 @@ coverage
 *.sln
 *.sw?
 *.iml
+*.tsbuildinfo
 
 .gitconfig
 
diff --git a/package.json b/package.json
@@ -68,7 +68,7 @@
     "dist"
   ],
   "scripts": {
-    "build": "unbuild",
+    "build": "vue-tsc --build --force && unbuild",
     "dev": "vite serve dev",
     "dev:build": "vite build dev",
     "dev:preview": "vite preview dev",
@@ -103,6 +103,7 @@
     "@formkit/core": "^1.6.7",
     "@primevue/themes": "^4.1.1",
     "@types/node": "^22.7.9",
+    "@types/uuid": "^10.0.0",
     "@unocss/preset-icons": "^0.63.6",
     "@unocss/preset-uno": "^0.63.6",
     "@vitejs/plugin-vue": "^5.1.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/FormKitDataEdit.vue b/src/components/FormKitDataEdit.vue
@@ -1,4 +1,6 @@
 <script setup lang='ts'>
+import type { FormKitSchemaDefinition } from '@formkit/core'
+import type { PropType } from 'vue'
 import { FormKit, FormKitMessages, FormKitSchema } from '@formkit/vue'
 import { ref } from 'vue'
 import FormKitDebug from './FormKitDebug.vue'
@@ -13,7 +15,7 @@ const props = defineProps({
     default: null,
   },
   schema: {
-    type: Object,
+    type: Object as PropType<FormKitSchemaDefinition>,
     default: null,
   },
   debugData: {
@@ -82,7 +84,7 @@ function handleSave() {
       </template>
     </FormKit>
     <FormKitDebug v-if="debugData" :data="formData" header="Data" />
-    <FormKitDebug v-if="debugSchema" :data="formSchema" header="Schema" />
+    <FormKitDebug v-if="debugSchema" :data="formSchema as object" header="Schema" />
   </div>
 </template>
 
diff --git a/src/components/FormKitDataView.vue b/src/components/FormKitDataView.vue
@@ -1,4 +1,6 @@
 <script setup lang='ts'>
+import type { FormKitSchemaDefinition } from '@formkit/core'
+import type { PropType } from 'vue'
 import { FormKit, FormKitSchema } from '@formkit/vue'
 import { ref } from 'vue'
 import FormKitDebug from './FormKitDebug.vue'
@@ -9,7 +11,7 @@ const props = defineProps({
     default: null,
   },
   schema: {
-    type: Object,
+    type: Object as PropType<FormKitSchemaDefinition>,
     default: null,
   },
   formClass: {
@@ -42,7 +44,7 @@ const formData = ref(props.data)
       <slot />
     </FormKit>
     <FormKitDebug v-if="debugData" :data="formData" header="Data" />
-    <FormKitDebug v-if="debugSchema" :data="formSchema" header="Schema" />
+    <FormKitDebug v-if="debugSchema" :data="formSchema as object" header="Schema" />
   </div>
 </template>
 
diff --git a/src/components/PrimeAutoComplete.vue b/src/components/PrimeAutoComplete.vue
@@ -25,7 +25,8 @@ const props = defineProps({
 
 const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
 
-const suggestions = ref([])
+const suggestions = ref(['', {}])
+suggestions.value = []
 
 function search(event: AutoCompleteCompleteEvent) {
   if (props.context?.options && props.context?.optionLabel) {
diff --git a/src/components/PrimeCheckbox.vue b/src/components/PrimeCheckbox.vue
@@ -47,7 +47,7 @@ const generatedId = generateId()
       :tabindex="context?.attrs.tabindex"
       :aria-label="context?.attrs.ariaLabel"
       :aria-labelledby="context?.attrs.ariaLabelledby"
-      :indeterminate="context.indeterminate ?? null"
+      :indeterminate="context.indeterminate ?? undefined"
       :binary="context.binary ?? true"
       :variant="context.variant ?? 'outlined'"
       :true-value="context.trueValue ?? undefined"
diff --git a/src/components/PrimeDatePicker.vue b/src/components/PrimeDatePicker.vue
@@ -62,7 +62,7 @@ const props = defineProps({
 const { validSlotNames, unstyled, isInvalid, handleInput } = useFormKitInput(props.context)
 
 function handleBlur(e: DatePickerBlurEvent) {
-  props.context?.handlers.blur(e.originalEvent)
+  props.context?.handlers.blur(e.originalEvent as FocusEvent)
 }
 
 function handleClearClick() {
diff --git a/src/components/PrimeEditor.vue b/src/components/PrimeEditor.vue
@@ -26,7 +26,7 @@ const { unstyled, isInvalid, handleInput } = useFormKitInput(props.context)
 
 function handleSelection(e: EditorSelectionChangeEvent) {
   if (e.range === null)
-    props.context?.handlers.blur(e.htmlValue)
+    props.context?.node.input(props.context?._value)
 }
 </script>
 
diff --git a/src/components/PrimeInputNumber.vue b/src/components/PrimeInputNumber.vue
@@ -37,7 +37,7 @@ const props = defineProps({
 const { validSlotNames, unstyled, isInvalid } = useFormKitInput(props.context)
 
 function handleBlur(e: InputNumberBlurEvent) {
-  props.context?.handlers.blur(e.originalEvent)
+  props.context?.handlers.blur(e.originalEvent as FocusEvent)
 }
 
 function handleInput(_: any) {
diff --git a/src/components/PrimeMultiSelect.vue b/src/components/PrimeMultiSelect.vue
@@ -13,7 +13,6 @@ export interface FormKitPrimeMultiSelectProps {
   optionGroupLabel?: MultiSelectProps['optionGroupLabel']
   optionGroupChildren?: MultiSelectProps['optionGroupChildren']
   scrollHeight?: MultiSelectProps['scrollHeight']
-  closeIcon?: MultiSelectProps['closeIcon']
   dataKey?: MultiSelectProps['dataKey']
   filter?: MultiSelectProps['filter']
   filterPlaceholder?: MultiSelectProps['filterPlaceholder']
diff --git a/src/composables/useInputEditor.ts b/src/composables/useInputEditor.ts
@@ -11,16 +11,17 @@ export function useInputEditor() {
 
     const formkitInput = data?._dollar_formkit
     let tempData = { }
-    if (data.prime && data.prime?.length > 0) {
-      const mapped = data.prime?.map((entry) => {
-        const key = entry.prime_key
-        let value = entry.prime_value
+    if (data.prime && data.prime.length > 0) {
+      const mapped = data.prime.map((entry: { prime_key: string, prime_value: any }) => {
+        const key: string = entry.prime_key
+        let value: any = entry.prime_value
         // some inputs require numbers
-        if (formkitInput === 'primeInputOtp' && key === 'length')
+        if (formkitInput === 'primeInputOtp' && key === 'length') {
           value = +value
-        return [key, value]
+        }
+        return [key, value] as [string, any]
       })
-      tempData = Object.assign(...mapped.map(([key, val]) => ({ [key]: val })))
+      tempData = Object.assign({}, ...mapped.map(([key, val]: [string, any]) => ({ [key]: val })))
     }
 
     const readonlyValue = data.readonly ? true : undefined
@@ -48,7 +49,7 @@ export function useInputEditor() {
 
     const useOptions = primeInputWithOptionNames.map(s => `prime${s}`).includes(formkitInput)
 
-    let result = {}
+    let result: { [key: string]: any } = {}
     if (useOptions)
       result = { ...data, $formkit: formkitInput, ...tempData, ...undefinedObject, ...defaultObject, outerClass, wrapperClass, innerClass, optionLabel: 'label', optionValue: 'value' }
     else
@@ -81,11 +82,11 @@ export function useInputEditor() {
     return JSON.stringify(dataToSchema(data))
   }
 
-  function objectToString(data: any) {
-    return `{${Object.entries(data).map(([key, value]) => {
-      if (key === 'options' && value.length > 0) {
+  function objectToString(data: Record<string, any>): string {
+    return `{${Object.entries(data).map(([key, value]: [string, any]) => {
+      if (key === 'options' && Array.isArray(value) && value.length > 0) {
         let result = '['
-        value.forEach(o => result = `${result + objectToString(o)}, `)
+        value.forEach((o: any) => result = `${result + objectToString(o)}, `)
         return `${key}: ${result.substring(0, result.length - 2)}]`
       }
       else if (key === 'primeInputOtp') {
diff --git a/src/plugins/index.ts b/src/plugins/index.ts
@@ -1,22 +1,26 @@
-export function addPrimeAsteriskPlugin(node: any): any {
+import type { FormKitExtendableSchemaRoot, FormKitNode } from '@formkit/core'
+
+export function addPrimeAsteriskPlugin(node: FormKitNode): void {
   if (!node.props.type.startsWith('prime'))
     return
 
   node.on('created', () => {
-    const schemaFn = node.props.definition.schema
-    node.props.definition.schema = (sectionsSchema = {}) => {
-      sectionsSchema.label = {
-        children: ['$label', {
-          $el: 'span',
-          if: '$state.required',
-          attrs: {
-            class: 'p-formkit-asterisk',
-          },
-          children: ['*'],
-        }],
-      }
+    if (node.props.definition?.schema) {
+      const schemaFn = node.props.definition?.schema as FormKitExtendableSchemaRoot
+      node.props.definition!.schema = (sectionsSchema = {}) => {
+        sectionsSchema.label = {
+          children: ['$label', {
+            $el: 'span',
+            if: '$state.required',
+            attrs: {
+              class: 'p-formkit-asterisk',
+            },
+            children: ['*'],
+          }],
+        }
 
-      return schemaFn(sectionsSchema)
+        return schemaFn(sectionsSchema)
+      }
     }
   })
 }
diff --git a/tsconfig.json b/tsconfig.json
@@ -2,5 +2,8 @@
   "extends": "@vue/tsconfig/tsconfig.dom.json",
   "compilerOptions": {
     "types": ["vitest/globals"]
-  }
+  },
+  "include": [
+    "src"
+  ]
 }

Original file line number	Diff line number	Diff line change
`@@ -62,7 +62,7 @@ const props = defineProps({`
`62`	`62`	`const { validSlotNames, unstyled, isInvalid, handleInput } = useFormKitInput(props.context)`
`63`	`63`
`64`	`64`	`function handleBlur(e: DatePickerBlurEvent) {`
`65`		`- props.context?.handlers.blur(e.originalEvent)`
	`65`	`+ props.context?.handlers.blur(e.originalEvent as FocusEvent)`
`66`	`66`	`}`
`67`	`67`
`68`	`68`	`function handleClearClick() {`
Original file line number	Diff line number	Diff line change
`@@ -26,7 +26,7 @@ const { unstyled, isInvalid, handleInput } = useFormKitInput(props.context)`
`26`	`26`
`27`	`27`	`function handleSelection(e: EditorSelectionChangeEvent) {`
`28`	`28`	`if (e.range === null)`
`29`		`- props.context?.handlers.blur(e.htmlValue)`
	`29`	`+ props.context?.node.input(props.context?._value)`
`30`	`30`	`}`
`31`	`31`	`</script>`
`32`	`32`
Original file line number	Diff line number	Diff line change
`@@ -37,7 +37,7 @@ const props = defineProps({`
`37`	`37`	`const { validSlotNames, unstyled, isInvalid } = useFormKitInput(props.context)`
`38`	`38`
`39`	`39`	`function handleBlur(e: InputNumberBlurEvent) {`
`40`		`- props.context?.handlers.blur(e.originalEvent)`
	`40`	`+ props.context?.handlers.blur(e.originalEvent as FocusEvent)`
`41`	`41`	`}`
`42`	`42`
`43`	`43`	`function handleInput(_: any) {`