Checkbox and InputSwitch: "on" CSS classes not applied

[vzakharov]

Describe the bug

Don’t know what update initially caused the fault, but in 3.50.0 p-inputswitch-checked is not applied to InputSwitches, and p-highlight is not applied to Checkboxes’ boxes (but it is applied to the main class, which doesn’t cause anything, and where the bug probably is).

Here are workaround components that I have to use rn:

For the checkbox:

<template>
  <Checkbox :="$attrs"
    :pt="{ box: { class: { 'p-highlight': checked } } }"
  />
</template>

<script setup lang="ts">
import Checkbox from 'primevue/checkbox';
import { computed, useAttrs } from 'vue';
const attrs = useAttrs() as {
  binary: true,
  modelValue: boolean,
  value: never,
} | {
  binary: undefined,
  modelValue: string[],
  value: string,
};

const checked = computed(() => 
  attrs.binary !== undefined 
    ? attrs.modelValue 
    : attrs.modelValue.includes(attrs.value)
  );
</script>

(not that this is a very simplified approach that does not support trueValues/falseValues.)

For the input switch:

<template>
  <InputSwitch :="$attrs"
    :class="{ 'p-inputswitch-checked': $attrs.modelValue }"
  />
</template>

<script setup lang="ts">
import InputSwitch from 'primevue/inputswitch';
</script>

Hopefully this gets fixed at some point so I can get back to using original components.

P.S. Sorry I won’t spend time creating a reproducer. I’m hoping, if other people are facing the same issue, this workaround will help them. If not, you can just ignore the ticket.

Reproducer

https://sorry-i-wont

PrimeVue version

3.50.0

Vue version

3.x

Language

TypeScript

Build / Runtime

Vue CLI App

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

[tugcekucukoglu]

There have been major changes since v3.47.0. Reference issue: #5071