elk/components/common/CommonCheckbox.vue

44 lines
1.1 KiB
Vue
Raw Normal View History

<script setup lang="ts">
defineProps<{
2023-05-20 19:23:41 +00:00
label?: string
hover?: boolean
2023-05-20 19:23:41 +00:00
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"
2023-05-20 19:23:41 +00:00
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>