I think the better way to implement the VaSwitch is not to rely on the state get by v-model to build component state

[menocrat]

Vuestic-ui version: 1.10.3

Description

the smallest example of VaSwitch

i wish in this example, I can freely switch component states like the input element

because i didn't bind the reactive variables, so i can't switch this box, but it's not intuitive, Refer to the html checkbox style input element, i think the better is the switch component have a self state bind with input element, and when user change the switch state, switch component notify the changes to the reactive variables bind by v-model actually is the modelVaule and update:modelValue

No matter how the developer uses this component, the VaSwitch get the default value through :modelValue props, and notify changes through @update:modelValue emit.

in my opinion, this implement way will be better and.

[m0ksem]

You can use stateful prop. You can also set stateful true in global config for VaSwitch if it is your preference.

https://ui.vuestic.dev/play#eNp9kDFPwzAQhf9K5LmNh25VqASoAwyAKGLyEtxr6+LYlu/cBlX579gOCQVV3ezvPd29dyd261x5CMDmrELplaMCgYJbCCNMxXvUfwgap2uC+CuK6r1eHRXJXYEU2SboRcUH1juUcYEK+nJwI5jcgfz8sK1gPKoVPxsmDJsw1TjradrUrtyjNTHOKQ0RPwIKNi8ySSzmRVJyGlTCgu2IHM45DypVSVK5hgMfbDYQb2pl4mTB0oxOmC7uJJTWbNT230ZpG6c0+GdHypq/m2ut7fExM/IBJgPP9S7wPcbGKeKLBwR/AMFGjWq/Berl5eoJ2vgexcaug47uK+IroNUhZextd8GsY+wzX077kA+ozPYNly2BwaFUCpqvkf35qvdXqv/GnZWz8YrdN8J6wTg=

[menocrat]

Thanks, that is what i need,

But, why not let the stateful true be a default switch state?

[m0ksem]

Thanks, that is what i need,

But, why not let the stateful true be a default switch state?

I think it is personal preference with its own upsides and downsides. We try to be consistent and require v-model for every form component. You may accidentally think that your value is bound to state, while actually it is just stateful.

Stateful is helpful when you're working with non-data state like doShowModal, doShowDropdown, isCollapsed, etc. For data state such as isAcknowledged, doStaySignIn, it is better to have stateful off by default.

Do you have an example when you use VaCheckbox and you DON'T need to bind a ref?

[menocrat]

The scene I encountered that did not require binding a ref was when i use VaCheckbox to control the theme state, it need to call a function to switch the theme, and for the user experience. it also usually need save the theme state in Local Storage. so that, when user refresh the web page. the theme will not change to the default state.

In this scene, i use VaCheckbox to call the function which can switch the theme state.

I also know than i can just use the computed variables, but who want to write the same code in many vue file. i code once the switch function and call anywhere by one line. i think it is perfect to me

like this

<template>
<VaSwitch
      stateful
      :modelValue="theme.getCurrentTheme()"
      @update:modelValue="(e) => theme.setTheme(e)"
      true-value="dark"
      false-value="light"
      color="#5123a1"
      off-color="#ffd300"
      style="--va-switch-checker-background-color: #252723"
    >
      <template #innerLabel>
        <div class="va-text-center">
          <VaIcon :name="theme.getCurrentTheme() == 'dark' ? 'dark_mode' : 'light_mode'" />
        </div>
      </template>
    </VaSwitch>
</template>

<script lang="ts" setup>
import { useColors, VaIcon } from 'vuestic-ui'
import { useThemes } from '../../../hooks/use-themes'

const { applyPreset } = useColors()
const theme = useThemes(applyPreset)
</script>

[m0ksem]

The scene I encountered that did not require binding a ref was when i use VaCheckbox to control the theme state, it need to call a function to switch the theme, and for the user experience. it also usually need save the theme state in Local Storage. so that, when user refresh the web page. the theme will not change to the default state.

In this scene, i use VaCheckbox to call the function which can switch the theme state.

I also know than i can just use the computed variables, but who want to write the same code in many vue file. i code once the switch function and call anywhere by one line. i think it is perfect to me

like this

<template>
<VaSwitch
      stateful
      :modelValue="theme.getCurrentTheme()"
      @update:modelValue="(e) => theme.setTheme(e)"
      true-value="dark"
      false-value="light"
      color="#5123a1"
      off-color="#ffd300"
      style="--va-switch-checker-background-color: #252723"
    >
      <template #innerLabel>
        <div class="va-text-center">
          <VaIcon :name="theme.getCurrentTheme() == 'dark' ? 'dark_mode' : 'light_mode'" />
        </div>
      </template>
    </VaSwitch>
</template>

<script lang="ts" setup>
import { useColors, VaIcon } from 'vuestic-ui'
import { useThemes } from '../../../hooks/use-themes'

const { applyPreset } = useColors()
const theme = useThemes(applyPreset)
</script>

Thats why we have stateful, just in case you need it.