elk/components/common/CommonCheckbox.vue

<script setup lang="ts">
defineProps<{
  label?: string
  hover?: boolean
  iconChecked?: string
  iconUnchecked?: string
  checkedIconColor?: string
  prependCheckbox?: boolean
}>()
const modelValue = defineModel<boolean | null>()
</script>

<template>
  <label
    class="common-checkbox flex items-center cursor-pointer py-1 text-md w-full gap-y-1"
    :class="hover ? 'hover:bg-active ms--2 px-4 py-2' : null"
    v-bind="$attrs"
    @click.prevent="modelValue = !modelValue"
  >
    <span v-if="label && !prependCheckbox" flex-1 ms-2 pointer-events-none>{{ label }}</span>
    <span
      :class="[
        modelValue ? (iconChecked ?? 'i-ri:checkbox-line') : (iconUnchecked ?? 'i-ri:checkbox-blank-line'),
        modelValue && checkedIconColor,
      ]"
      text-lg
      aria-hidden="true"
    />
    <input
      v-model="modelValue"
      type="checkbox"
      sr-only
    >
    <span v-if="label && prependCheckbox" flex-1 ms-2 pointer-events-none>{{ label }}</span>
  </label>
</template>

<style>
.common-checkbox:focus-within {
  outline: none;
  border-bottom: 1px solid var(--c-text-base);
}
</style>