Switch toggle

This component is a Vue version of Switch and the functionality found in its JS file (components.switch.js). The main difference is that this one doesn't require jQuery at all.

Live example

My label

My label

Second label

Usage

With label

<script setup>
import { ref } from 'vue'
import { SwitchToggle } from '@tickster/ui-framework/library.mjs'

const myRef1 = ref("")
</script>

<template>
    <switch-toggle v-model="myRef1" :label="`My label`" />
</template>

With second label

<script setup>
import { ref } from 'vue'
import { SwitchToggle } from '@tickster/ui-framework/library.mjs'

const myRef2 = ref("")
</script>

<template>
    <switch-toggle v-model="myRef2" :label="`My label`">Second label</switch-toggle>
</template>

Component source

<script setup>
import { useId } from 'vue'

const model = defineModel();
const props = defineProps({
    label: {
        type: String,
        required: true
    }
});
const id = useId();
</script>

<template>
    <div class="c-switch">
        <label :for="id" class="c-switch__state" :class="model ? 'c-switch__state--active' : 'c-switch__state--inactive'">{{ props.label }}</label>
        <span class="c-switch__button" :class="model ? 'c-switch__button--active' : 'c-switch__button--inactive'">
            <input type="checkbox" :id="id" v-model="model" aria-role="switch">
        </span>
    </div>
    <label v-if="$slots.default" :for="id" class="c-label"><slot></slot></label>
</template>