mirror of https://github.com/elk-zone/elk.git
44 lines
1.1 KiB
Vue
44 lines
1.1 KiB
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>
|