opnform-host-nginx/client/components/forms/components/VSwitch.vue

<template>
  <div
    role="button"
    @click.stop="onClick"
  >
    <div
      class="inline-flex items-center h-6 w-12 p-1 bg-gray-300 border rounded-full cursor-pointer focus:outline-none transition-all transform ease-in-out duration-100"
      :class="{ 'toggle-switch': props.modelValue }"
      :style="{ '--accent-color': props.color }"

    >
      <div
        class="inline-block h-4 w-4 rounded-full bg-white shadow transition-all transform ease-in-out duration-150 rounded-2xl scale-100"
        :class="{ 'translate-x-5.5': props.modelValue }"
      />
    </div>
  </div>
</template>

<script setup>
import { defineEmits, defineProps } from "vue"

const props = defineProps({
  modelValue: { type: Boolean, default: false },
  disabled: { type: Boolean, default: false },
  color: { type: String, default: null },
})
const emit = defineEmits(["update:modelValue"])

function onClick() {
  if (props.disabled) return
  emit("update:modelValue", !props.modelValue)
}
</script>
<style>
  .toggle-switch {
    background-color: var(--accent-color);
  }
</style>