1
0
mirror of https://github.com/elk-zone/elk synced 2024-12-16 15:48:00 +09:00
elk/components/common/CommonRadio.vue
2023-01-05 09:47:58 +01:00

38 lines
810 B
Vue

<script setup lang="ts">
defineProps<{
label: string
value: any
hover?: boolean
}>()
const { modelValue } = defineModel<{
modelValue: any
}>()
</script>
<template>
<label
class="common-radio 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"
@click.prevent="modelValue = value"
>
<span flex-1 ms-2 pointer-events-none>{{ label }}</span>
<span
:class="modelValue === value ? 'i-ri:radio-button-line' : 'i-ri:checkbox-blank-circle-line'"
aria-hidden="true"
/>
<input
v-model="modelValue"
type="radio"
:value="value"
sr-only
>
</label>
</template>
<style>
.common-radio:focus-within {
outline: none;
border-bottom: 1px solid var(--c-text-base);
}
</style>