41 lines
1.3 KiB
Vue
41 lines
1.3 KiB
Vue
<template>
|
|
<SwitchGroup @click="clicked" as="div" class="flex items-center">
|
|
<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,
|
|
},
|
|
emits: ['clicked'],
|
|
props: {
|
|
textin: String,
|
|
textout: String,
|
|
user_id: Number,
|
|
enabled: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
},
|
|
methods: {
|
|
clicked(){
|
|
this.$emit('clicked', this.user_id);
|
|
}
|
|
}
|
|
}
|
|
</script>
|