SwitchButton.vue

<template>
  <button
    :id="id"
    type="button"
    role="switch"
    :aria-checked="value"
    class="tw-appearance-none tw-border-0 tw-py-[.5em] tw-px-[1em] tw-ring-black tw-relative first:tw-rounded-l last:tw-rounded-r"
    :class="{
      'tw-bg-aura-primary tw-text-white': value,
      'tw-bg-gray-100': !value,
      'focus:tw-z-10 focus:tw-ring-2 focus:tw-brightness-95': true,
      'hover:tw-brightness-90': true,
    }"
    tabindex="0"
    @click="value = !value"
  >
    <slot>{{ label }}</slot>
  </button>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { useId } from '@/util'

const props = defineProps<{
  modelValue: boolean
  label?: string
}>()
const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void
}>()
const id = useId()
const value = computed({
  get() {
    return props.modelValue
  },
  set(value: boolean) {
    emit('update:modelValue', value)
  },
})
</script>

<script lang="ts">
export default {
  compatConfig: {
    MODE: 3,
  },
}
</script>