vueform / toggle Goto Github PK

The problem
Html-validate shows error: "error element does not have a "

It would be great if we could add aria-label to element and not it's parent.
Maybe you could add a new prop called "inputAria" to pass aria tags straight to element?

I try to build my app using vue3+vite and I met the error:
error TS1192: Module '"/xxx/yyy/zzz/node_modules/@vueform/toggle/src/index"' has no default export.

104 import Toggle from "@vueform/toggle";
~~~~~~

node_modules/@vueform/toggle/src/index.d.ts:1:1
1 export * from './Toggle';
~~~~~~~~~~~~~~~~~~~~~~~~~
'export *' does not re-export a default.

In this file src/index.d.ts you're not exporting any default name.
Every time I do import Toggle from "@vueform/toggle ES Lint says: No default export found in imported module "@vueform/toggle".

I think you have to fix this.

Thanks in advance.

I am conditionally disabling the toggle base on a truthy value which is working fine however when there's an on change and the disable value is false I still have the disabled classes show on the toggle even though I am able to toggle. How do I remove the class when disabled is falsy and have the disabled class when disabled is truthy?

This is an edge case :)

• assume value 0 = "running", 1 = "not running" (rather than the usual 1 = running, 0 = not running)
• isRunning: 0 in data()
• <toggle v-model="isRunning" :trueValue="0" :falseValue="1"></toggle>
• expected behavior: isRunning remains 0 until toggled
• current behavior: when the component is rendered isRunning is immediately updated to 1. Test by removing Toggle component — isRunning remains 0.

Hi @adamberecz. Thanks for you amazing work here!
I've added the toggle in my design which has tabs to change the views. When the view that has the toggle loads, it triggers the change event. I'm not sure if it is supposed to do this, or only trigger when it's changed and not rendered for the first time. I've attached some screenshots to explain better.

Image for First tab with nothing in the console

Image of setting tab with the change event triggered without clicking the toggle.

Is there anything that needs to be done or does it work this way?

I am using this package in a VitePress setup i have and during build time I am alerted to this warning:

@vueform/toggle doesn't appear to be written in CJS, but also doesn't appear to be a valid ES module (i.e. it doesn't have "type": "module" or an .mjs extension for the entry point). Please contact the package author to fix

It does not seem to be breaking anything but just wanted to point it out incase this is a fix that should take place.

after updating from 2.0.2 release to the latest version
when i use v-model it only works one way (from toggle component to parent component)
if i load anything from external api and set my data to true the toggle stays in false state

I've already seen #1 and #2, but this does seem to still be happening.
I tried the is mounted fix, and that didnt stop it.
Do we know why this is happening or a workaround?

@change event is triggered when the component loads

After using --toggle-width: 120px and --toggle-height: 35px for example, the handle will stay 20x20 pixels. The width and height of the handle should be added as variables as well.

Hello,
Thanks for the package.
I found an issue where assigning an id to the toggle does not cause the value to switch upon clicking the label with the same for value.

Expected

To be able to assign an id to the component with value switch1 and add that same value to the for attribute of a label. Clicking on the label should toggle the state

What happened instead?

The state does not get updated

Reproduction

• Add the package to a Vue or Nuxt app

<template>
     <Toggle id="s1" name="s1"
      v-model="value"
    ></Toggle>
    <label for="s1">Switch it up</label>
</template>

<script setup lang="ts">
import Toggle from "@vueform/toggle";
const value = ref(false);
</script>

Just found out that using
<style src="@vueform/toggle/themes/default.css"></style>

as mentioned in your introduction does not work and leads to the Toggle/Switch not showing up in the browser (code is however in the DOM).,

However, the import makes the switch appear properly:

import '@vueform/toggle/themes/default.css'

I use this component in a project with Vue 3, when I build, I get this error:

❯ yarn build
yarn run v1.22.17
$ vue-tsc --noEmit && vite build --emptyOutDir
node_modules/@vueform/toggle/src/Toggle.d.ts:3:30 - error TS2507: Type 'typeof import("/home/quan/Works/AgriConnect/PlantingHouse/controlview/heomay/node_modules/vue/dist/vue")' is not a constructor function type.

3 declare class Toggle extends Vue {
                               ~~~


Found 1 error.

error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

how can to @apply correctly with PostCSS ?

Now, if I use tailwind classes like bg-red-100, im not able to see the style, but when I use a simple CSS background: red; class I can see every style.

    <style lang="postcss">
    //WORKING
     .toggle-red{
          --toggle-bg-on: red;
          --toggle-border-on: red;
        }
     </style>

      <style lang="postcss">
        // WORKING
         .toggle-red{
              @apply bg-red-400;
            }
      </style>

    <style lang="postcss">
    //NOT WORKING
     .toggle-red{
          --toggle-bg-on: @apply bg-red-400;
          --toggle-border-on: @apply bg-red-400;
        }
        </style>