bug: vue: v-model.number modifier is not properly typed

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x
• Nightly

Current Behavior

Given this:

<template>
  <IonInput
    v-model.number="options.androidMaxAttempts"
    type="number"
  />
</template>

<script setup lang="ts">
import { IonInput } from '@ionic/vue'

const options = reactive({
  androidMaxAttempts: 0
})
</script>

If you run vue-tsc, you get this error:

error TS2322: Type 'number' is not assignable to type 'string | boolean | undefined'.

86           v-model.number="options.androidMaxAttempts"
             ~~~~~~~

  node_modules/.pnpm/@ionic+vue@6.1.12/node_modules/@ionic/vue/dist/types/vue-component-lib/utils.d.ts:2:5
    2     modelValue?: string | boolean;
          ~~~~~~~~~~
    The expected type comes from property 'modelValue' which is declared here on type 'IntrinsicAttributes & Partial<{}> & Omit<Readonly<IonInput & InputProps> & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>'

Note that Vue has no problem compiling the code and it runs correctly.

Expected Behavior

There should not be any errors. If you change IonicInput to input, vue-tsc does not report any errors.

Steps to Reproduce

This minimal app was created using your Getting Started Wizard. I have no idea if it will build or run, it is there just to demonstrate the typing bug.

npm i -g pnpm
git clone https://github.com/aparajita/v-model-bug
cd v-model-bug
pnpm i
node_modules/.bin/vue-tsc --noEmit

Code Reproduction URL

https://github.com/aparajita/v-model-bug

Ionic Info

Ionic:

   Ionic CLI : 6.20.1 (/Users/aparajita/Library/pnpm/global/5/.pnpm/@ionic+cli@6.20.1/node_modules/@ionic/cli)

Capacitor:

   Capacitor CLI      : 3.6.0
   @capacitor/android : 3.6.0
   @capacitor/core    : 3.6.0
   @capacitor/ios     : 3.6.0

Utility:

   cordova-res : 0.15.4
   native-run  : not installed globally

System:

   NodeJS : v18.4.0 (/Users/aparajita/.fnm/node-versions/v18.4.0/installation/bin/node)
   npm    : 8.12.1
   OS     : macOS Monterey

Additional Information

@liamdebeasi I think this is one for you.

[sean-perkins]

@aparajita thanks for reporting this issue. I am able to reproduce and have been able to narrow it to our output targets interface: https://github.com/ionic-team/stencil-ds-output-targets/blob/bc8878f5ccd1890ec378a57f8e69a44b15213102/packages/vue-output-target/vue-component-lib/utils.ts#L3-L5

Updating the interface locally to:

export interface InputProps {
    modelValue?: string | boolean | number;
}

resolves the issue. Input is one of our few components that accepts a number type directly for the value.

We may want to consider making the type a generic in the future, so that the Stencil build step can pass the type of the component, as the required signature for the v-model, i.e.:

export interface InputProps<T> {
    modelValue?: T; // optionally we can assign a default type for T if one is not set
}

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.