Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

InputSwitch TypeScript modelValue error #2262

Closed
SimonSimCity opened this issue Mar 4, 2022 · 0 comments
Closed

InputSwitch TypeScript modelValue error #2262

SimonSimCity opened this issue Mar 4, 2022 · 0 comments
Assignees
Labels
Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Milestone

Comments

@SimonSimCity
Copy link

I'm submitting a ... (check one with "x")

[X] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primevue/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=110

Current behavior
VSCode reports an error for modelValue if its not boolean. In my following example the error is:

Type '"light" | "dark"' is not assignable to type 'boolean | undefined'.
  Type '"light"' is not assignable to type 'boolean | undefined'.

Expected behavior
No error.

Minimal reproduction of the problem with instructions

<template>
  <div class="theme-toggle">
    <InputSwitch v-model="theme" true-value="light" false-value="dark" />
  </div>
</template>

<script setup lang="ts">
import { Ref, ref } from "vue";
import InputSwitch from "primevue/inputswitch";

const theme: Ref<"light" | "dark"> = ref("light");
</script>

What is the motivation / use case for changing the behavior?
Ideally, I want everything to be typed; which is also why I started using type checks for my template as well.

To me, the InputSwitchProps should have trueValue set to true and falseValue set to false by default. The parameter modelValue could now allow both types of trueValue and falseValue. I just don't quite know how to write a type like that 😅

Here's a quick start of how it could be - just needs to be refined:

export interface InputSwitchProps<T = true, U = false> {
    /**
     * Specifies whether a inputswitch should be checked or not.
     */
    modelValue?: T | U | undefined;
    /**
     * Inline style of the component.
     */
    class?: any;
    /**
     * Style class of the component input field.
     */
    style?: any;
    /**
     * Value in checked state.
     */
    trueValue?: T;
    /**
     * Value in unchecked state.
     */
    falseValue?: U;
}

Please tell us about your environment:

@tugcekucukoglu tugcekucukoglu added the Type: Bug Issue contains a bug related to a specific component. Something about the component is not working label Mar 14, 2022
@tugcekucukoglu tugcekucukoglu added this to the 3.13.0 milestone Mar 14, 2022
@tugcekucukoglu tugcekucukoglu self-assigned this Mar 14, 2022
@tugcekucukoglu tugcekucukoglu changed the title Prop "modelValue" on type "InputSwitchProps" is invalid if "trueValue" and "falseValue" are set to non-boolean values InputSwitch TypeScript modelValue error Mar 14, 2022
tugcekucukoglu added a commit that referenced this issue Mar 14, 2022
Fixed #2262 - InputSwitch TypeScript modelValue error
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Projects
None yet
Development

No branches or pull requests

2 participants