Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork98
Uh oh!
There was an error while loading.Please reload this page.
Uh oh!
There was an error while loading.Please reload this page.
-
ContextI'm trying to create a custom element used inhttps://wails.io/ based app, but I assume that's not relevant. The essence of the component is the snippet below. Expected behaviourThis component (or a slight modification of it) works with no typescript errors <template> <ElementLayout> <template #element> <buttontype="button"@click="selectPath" > Select file </button> <input:id="fieldId":value="value"type="text"v-bind="{ ...aria }"@input="handleInput" > </template> </ElementLayout></template><script lang="ts">import {PropType,toRefs }from'vue';import {defineElement }from'@vueform/vueform';import {OpenFileDialog }from'@wailsjs/go/main/App';exportdefaultdefineElement({ name:'FileselectElement', props: { directory:Boolean, filters: { type:ArrayasPropType<{ DisplayName:string, Pattern:string}[]|null>,default: ()=>null, }, }, setup(props:any, {element }:any) {const { handleInput, value }=element;const { filters }=toRefs(props);asyncfunction selectPath():Promise<void> {const result=OpenFileDialog({ DefaultFilename:value.value,...(filters.value&& { filters:filters.value }) });if (result) {element.update(result); } }return {...element,selectPath,handleInput,value, }; },});</script> Actual behaviourThe user-facing functionality works well only if I add vue-tsc --noEmitsrc/components/FileSelectElement.vue:3:16 - error TS2339: Property'element' does not exist ontype'{ field: VNode<RendererNode, RendererElement, { [key: string]: any; }>[]; label: VNode<RendererNode, RendererElement, { ...; }>[]; ... 4 more ...; after: VNode<...>[]; }'.3<template#element>~~~~~~~src/components/FileSelectElement.vue:6:17 - error TS2339: Property'selectPath' does not exist ontype'{}'.6 @click="selectPath"~~~~~~~~~~src/components/FileSelectElement.vue:12:14 - error TS2339: Property'fieldId' does not exist ontype'{}'.12 :id="fieldId"~~~~~~~src/components/FileSelectElement.vue:13:17 - error TS2339: Property'value' does not exist ontype'{}'.13 :value="value"~~~~~src/components/FileSelectElement.vue:15:22 - error TS2339: Property'aria' does not exist ontype'{}'.15 v-bind="{ ...aria }"~~~~src/components/FileSelectElement.vue:16:17 - error TS2339: Property'handleInput' does not exist ontype'{}'.16 @input="handleInput"~~~~~~~~~~~ Any suggestions how to make this work with typescript? Or a link to an example app where it works with typescript? |
BetaWas this translation helpful?Give feedback.
All reactions
Replies: 2 comments 3 replies
-
@adamberecz any chance you can chime in here we have the same problem that we need to add |
BetaWas this translation helpful?Give feedback.
All reactions
-
Unfortunately Vueform is behind in TS support. It only has a generated definition file which quite simple. Couldthis be something useful here? |
BetaWas this translation helpful?Give feedback.
All reactions
-
Hi@adamberecz thanks yea unfortunately its not useable. In our case we are also using Vue Composition API so the declarations are completely missing when creating custom form builder elements |
BetaWas this translation helpful?Give feedback.
All reactions
-
Vueform 1.0 wasn’t built with TypeScript in mind, and that’s the core issue here. We might be able to find asemi-hacky workaround to make it function without using |
BetaWas this translation helpful?Give feedback.
All reactions
🎉 2
-
Awesome stuff thats great to hear! |
BetaWas this translation helpful?Give feedback.