fix(vue): add correct v-model type (#325)

ionic-team · Mar 30, 2023 · 2dc273e · 2dc273e
1 parent caa4732
commit 2dc273e
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 6 deletions.
diff --git a/packages/vue-output-target/__tests__/generate-vue-components.spec.ts b/packages/vue-output-target/__tests__/generate-vue-components.spec.ts
@@ -79,7 +79,7 @@ export const MyComponent = /*@__PURE__*/ defineContainer<Components.MyComponent>
     });
 
     expect(output).toEqual(`
-export const MyComponent = /*@__PURE__*/ defineContainer<Components.MyComponent>('my-component', undefined, [
+export const MyComponent = /*@__PURE__*/ defineContainer<Components.MyComponent, Components.MyComponent["value"]>('my-component', undefined, [
   'value',
   'ionChange'
 ],
@@ -139,7 +139,7 @@ export const MyComponent = /*@__PURE__*/ defineContainer<Components.MyComponent>
     });
 
     expect(output).toEqual(`
-export const MyComponent = /*@__PURE__*/ defineContainer<Components.MyComponent>('my-component', undefined, [
+export const MyComponent = /*@__PURE__*/ defineContainer<Components.MyComponent, Components.MyComponent["value"]>('my-component', undefined, [
   'value',
   'ionChange'
 ],

diff --git a/packages/vue-output-target/src/generate-vue-component.ts b/packages/vue-output-target/src/generate-vue-component.ts
@@ -22,19 +22,21 @@ export const createComponentDefinition =
       props = [...props, ...cmpMeta.events.map((event) => `'${event.name}'`)];
     }
 
-    let templateString = `
-export const ${tagNameAsPascal} = /*@__PURE__*/ defineContainer<${importTypes}.${tagNameAsPascal}>('${cmpMeta.tagName}', ${importAs}`;
-
+    const componentType = `${importTypes}.${tagNameAsPascal}`;
     const findModel =
       componentModelConfig && componentModelConfig.find((config) => config.elements.includes(cmpMeta.tagName));
+    const modelType = findModel !== undefined ? `, ${componentType}["${findModel.targetAttr}"]` : '';
+
+    let templateString = `
+export const ${tagNameAsPascal} = /*@__PURE__*/ defineContainer<${componentType}${modelType}>('${cmpMeta.tagName}', ${importAs}`;
 
     if (props.length > 0) {
       templateString += `, [
   ${props.length > 0 ? props.join(',\n  ') : ''}
 ]`;
       /**
        * If there are no props,
-       * but but v-model is stil used,
+       * but v-model is still used,
        * make sure we pass in an empty array
        * otherwise all of the defineContainer properties
        * will be off by one space.