opnform/resources/js/components/forms/ToggleSwitchInput.vue

47 lines
1009 B
Vue
Raw Normal View History

<template>
2023-12-01 20:24:38 +00:00
<input-wrapper v-bind="inputWrapperProps">
2023-10-28 10:17:50 +00:00
<template #label>
<span />
</template>
2023-10-24 09:00:54 +00:00
<div class="flex">
2023-12-01 20:24:38 +00:00
<v-switch :id="id?id:name" v-model="compVal" class="inline-block mr-2" :disabled="disabled?true:null" />
2023-10-24 09:00:54 +00:00
<slot name="label">
<span>{{ label }} <span v-if="required" class="text-red-500 required-dot">*</span></span>
</slot>
</div>
2023-10-28 10:17:50 +00:00
<template #help>
<slot name="help" />
</template>
<template #error>
<slot name="error" />
</template>
</input-wrapper>
2023-10-24 09:00:54 +00:00
</template>
<script>
import { inputProps, useFormInput } from './useFormInput.js'
import VSwitch from './components/VSwitch.vue'
2023-10-28 10:17:50 +00:00
import InputWrapper from './components/InputWrapper.vue'
2023-10-24 09:00:54 +00:00
export default {
name: 'ToggleSwitchInput',
2023-10-28 10:17:50 +00:00
components: { InputWrapper, VSwitch },
2023-10-24 09:00:54 +00:00
props: {
...inputProps
},
setup (props, context) {
return {
2023-12-01 20:24:38 +00:00
...useFormInput(props, context)
}
2023-10-24 09:00:54 +00:00
},
mounted () {
this.compVal = !!this.compVal
}
2023-10-24 09:00:54 +00:00
}
</script>