doc,vue: headlessui component within component example

[rynz]

It's very common to wrap a HeadlessUI component with your own component and provide your own styling. It may be very useful to provide an example of how this works, for example:

<template>
  <Switch
    v-model="enable"
    :class="[
      ...classButton,
      'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500',
    ]"
  >
    <span class="sr-only">Use setting</span>
    <span
      aria-hidden="true"
      :class="[
        ...classIcon,
        'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200',
      ]"
    />
  </Switch>
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue'
import { Switch } from '@headlessui/vue'

export default defineComponent({
  name: 'BaseToggle',
  components: {
    Switch,
  },
  props: {
    modelValue: {
      type: Boolean,
      required: true,
    },
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const enable = computed({
      get: () => props.modelValue,
      set: (modelValue) => emit('update:modelValue', modelValue),
    })

    const classButton = computed(() =>
      props.modelValue ? ['bg-purple-600'] : ['bg-gray-200'],
    )

    const classIcon = computed(() =>
      props.modelValue ? ['translate-x-5'] : ['translate-x-0'],
    )

    return { enable, classButton, classIcon }
  },
})
</script>