Unable to use boolean values with USelectMenu or null with UInput

Wazbat commented 6 months ago

Environment

Operating System: Windows_NT
Node Version: v20.12.2
Nuxt Version: 3.10.3
CLI Version: 3.10.1
Nitro Version: 2.9.1
Package Manager: pnpm@8.3.1
Builder: -
User Config: app, colorMode, ui, css, modules, runtimeConfig, authJs, pinia, nitro, alias, devtools, imports, typescript
Runtime Modules: @pinia/nuxt@0.4.11, @pinia-plugin-persistedstate/nuxt@1.2.0, @vueuse/nuxt@9.13.0, @hebilicious/authjs-nuxt@0.3.0-beta.2, @nuxtjs/eslint-module@4.1.0, nuxt-monaco-editor@1.2.7, nuxt-lodash@2.5.3, @nuxt/ui@2.14.2
Build Modules: -

Version

v2.14.2

Reproduction

https://stackblitz.com/edit/nuxt-ui-eqhn2j?file=app.vue

Description

I'm getting multiple new type errors that I wasn't getting before with types that used to be valid. I think this is being caused by an update to vue-tsc, however I'm not sure.

In the reproduction link you can see the two examples that don't compile. Simply run npm run typecheck in the console to get the errors Here are the minimal examples

<script setup lang="ts">
const value = ref<string | null | undefined>(undefined);
</script>

<template>
  <div>
    <UInput v-model.trim="value" />
  </div>
</template>

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

<script setup lang="ts">
const value = ref<boolean|undefined>();
const options = [
  {
    label: 'Yes',
    value: true
  },
  {
    label: 'No',
    value: false
  },
  {
    label: 'None selected',
    value: undefined
  }
];
</script>
<template>
  <div>
    <USelectMenu
    :options="options"
    v-model="value"
    value-attribute="value" option-attribute="label"
    />
  </div>
</template>

TS2322: Type 'boolean | undefined' is not assignable to type 'string | number | Record<string, any> | unknown[] | undefined'.

Additional context

Logs

app.vue:14:15 - error TS2322: Type 'string | null | undefined' is not assignable to type 'string | number | undefined'.

14       <UInput v-model.trim="inputValue" />
                 ~~~~~~~~~~

  node_modules/@nuxt/ui/dist/runtime/components/forms/Input.vue.d.ts:244:5
    244     modelValue: string | number;
            ~~~~~~~~~~
    The expected type comes from property 'modelValue' which is declared here on type 'Partial<{ size: InputSize; ui: any; id: string; icon: string; color: any; type: string; class: any; name: string; modelValue: string | number; leading: boolean; variant: InputVariant; ... 12 more ...; modelModifiers: { ...; }; }> & Omit<...> & Record<...>'

Found 1 error in app.vue:14

Wazbat commented 6 months ago

I've also tried downgrading vue-tsc to the latest ^1.8.27 release according to the warning in https://nuxt.com/docs/guide/concepts/typescript but I still get the error. I've updated the stackblitz with the downgraded version

Shhu commented 1 month ago

I have the same issue with UInput, it should accept null as v-model value

ElYaiko commented 2 weeks ago

I also can't use Booleans in Select Any update? @nuxt

nuxt / ui