68 lines
1.8 KiB
Vue
68 lines
1.8 KiB
Vue
<script>
|
|
|
|
export default {
|
|
name: 'DoubleSwitch',
|
|
inject: ['isChecked'],
|
|
props: {
|
|
machine: {
|
|
type: Object,
|
|
default: () => ({})
|
|
},
|
|
firstTitle: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
secondTitle: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
firstColor: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
secondColor: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
},
|
|
emits: ['switched'],
|
|
computed: {
|
|
},
|
|
mounted () {
|
|
|
|
},
|
|
methods: {
|
|
buttonClass: function(value) {
|
|
return `border border-slate-400 flex items-center justify-center cursor-pointer rounded transition-all text-xs text-center py-[5px] px-2 ${value}`
|
|
},
|
|
setChecked(e) {
|
|
this.$emit('switched', e.target.checked)
|
|
}
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input
|
|
v-bind="$attrs"
|
|
class="input sr-only peer/checkbox"
|
|
type="checkbox"
|
|
:checked="isChecked"
|
|
@change="setChecked"
|
|
>
|
|
|
|
<div
|
|
:class="`w-11 h-6 rounded-full peer peer-focus:ring-4 peer-focus:ring-${secondColor}-300 dark:peer-focus:ring-${secondColor}-800 dark:bg-${firstColor}-700 peer-checked/checkbox:after:translate-x-full peer-checked/checkbox:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-${firstColor}-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-${firstColor}-600`"
|
|
:style="{background: !isChecked ? firstColor : secondColor}"
|
|
/>
|
|
<span class="block peer-checked/checkbox:hidden ml-2 text-sm font-medium text-gray-900 dark:text-gray-300"> {{ firstTitle }}</span>
|
|
<span class="hidden peer-checked/checkbox:block ml-2 text-sm font-medium text-gray-900 dark:text-gray-300"> {{ secondTitle }} </span>
|
|
</label>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style> |