51 lines
1.7 KiB
Vue
Executable File
51 lines
1.7 KiB
Vue
Executable File
<template>
|
|
<SwitchGroup as="div" :class="{'pointer-events-none': disabled}"
|
|
class="flex items-center"
|
|
@click="clicked"
|
|
>
|
|
<Switch v-model="enabled" :class="[enabled ? 'bg-orange' : 'bg-indigo-200', 'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500']">
|
|
<!-- <span class="sr-only">Use setting</span> -->
|
|
<span aria-hidden="true" :class="[enabled ? 'translate-x-5' : 'translate-x-0', 'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200']" />
|
|
</Switch>
|
|
<SwitchLabel as="span" class="ml-3">
|
|
<span v-show="!enabled" class="text-sm text-white">{{ textin }}</span>
|
|
<span v-show="enabled" class="text-sm text-white">{{ textout }}</span>
|
|
</SwitchLabel>
|
|
</SwitchGroup>
|
|
</template>
|
|
|
|
<script>
|
|
import { Switch, SwitchGroup, SwitchLabel } from '@headlessui/vue'
|
|
|
|
export default {
|
|
components: {
|
|
Switch,
|
|
SwitchGroup,
|
|
SwitchLabel,
|
|
},
|
|
props: {
|
|
textin: String,
|
|
textout: String,
|
|
user_id: Number,
|
|
enabled: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
},
|
|
emits: ['clicked', 'prohibited'],
|
|
methods: {
|
|
clicked(){
|
|
if(this.disabled === false){
|
|
this.$emit('clicked', this.user_id)
|
|
}else{
|
|
this.$emit('prohibited')
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|