village-hall
/
opnform
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix vSwitch

This commit is contained in:
Julien Nahum 2024-01-17 12:55:35 +01:00
parent 1f558dbcbb
commit 8655f8d92e
1 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
client/components/forms/components/VSwitch.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div role="button" @click="onClick"> <div role="button" @click.stop="onClick">
<div class="inline-flex items-center h-6 w-12 p-1 bg-gray-300 border rounded-full cursor-pointer focus:outline-none transition-all transform ease-in-out duration-100" :class="{'bg-nt-blue': modelValue}"> <div class="inline-flex items-center h-6 w-12 p-1 bg-gray-300 border rounded-full cursor-pointer focus:outline-none transition-all transform ease-in-out duration-100" :class="{'bg-nt-blue': props.modelValue}">
<div class="inline-block h-4 w-4 rounded-full bg-white shadow transition-all transform ease-in-out duration-150 rounded-2xl scale-100" :class="{'translate-x-5.5': modelValue}" /> <div class="inline-block h-4 w-4 rounded-full bg-white shadow transition-all transform ease-in-out duration-150 rounded-2xl scale-100" :class="{'translate-x-5.5': props.modelValue}" />
</div> </div>
</div> </div>
</template> </template>
@ -9,14 +9,14 @@
<script setup> <script setup>
import { defineProps, defineEmits } from 'vue' import { defineProps, defineEmits } from 'vue'
const { modelValue, disabled } = defineProps({ const props = defineProps({
modelValue: { type: Boolean, default: false }, modelValue: { type: Boolean, default: false },
disabled: { type: Boolean, default: false } disabled: { type: Boolean, default: false }
}) })
const emits = defineEmits(['update:modelValue']) const emits = defineEmits(['update:modelValue'])
const onClick = () => { const onClick = () => {
if (disabled) return if (props.disabled) return
emits('update:modelValue', !modelValue) emits('update:modelValue', !props.modelValue)
} }
</script> </script>