mirror of
https://github.com/Instadapp/assembly.git
synced 2024-07-29 22:37:06 +00:00
47 lines
1.0 KiB
Vue
47 lines
1.0 KiB
Vue
|
<template>
|
||
|
|
<div
|
||
|
|
class="flex items-center cursor-pointer group"
|
||
|
|
@click="$emit('change', value)"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
class="flex items-center justify-center w-5 h-5 duration-150 border rounded-full transition-color group-hover:border-ocean-blue-pure dark:group-hover:border-light"
|
||
|
|
:class="{
|
||
|
|
'border-ocean-blue-pure dark:border-light': checked,
|
||
|
|
'border-grey-pure': !checked
|
||
|
|
}"
|
||
|
|
>
|
||
|
|
<transition-fade-in>
|
||
|
|
<div
|
||
|
|
v-if="checked"
|
||
|
|
class="w-2 h-2 rounded-full bg-ocean-blue-pure dark:bg-light"
|
||
|
|
></div>
|
||
|
|
</transition-fade-in>
|
||
|
|
</div>
|
||
|
|
<div v-if="label" :class="labelClasses">{{ label }}</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { defineComponent } from '@nuxtjs/composition-api'
|
||
|
|
|
||
|
|
export default defineComponent({
|
||
|
|
props: {
|
||
|
|
value: {},
|
||
|
|
checked: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false,
|
||
|
|
},
|
||
|
|
label: {
|
||
|
|
type: String,
|
||
|
|
default: '',
|
||
|
|
},
|
||
|
|
labelClasses: {
|
||
|
|
type: String,
|
||
|
|
default: 'ml-2 font-medium',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style></style>
|