101 lines
2.7 KiB
Vue
101 lines
2.7 KiB
Vue
<script>
|
|
export default {
|
|
name: 'VDoubleSwitch',
|
|
components: {
|
|
},
|
|
props: {
|
|
machine: {
|
|
type: Object,
|
|
default: () => ({})
|
|
},
|
|
firstTitle: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
secondTitle: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
firstColor: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
secondColor: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
isCheck: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
position: {
|
|
type: String,
|
|
default: 'row'
|
|
},
|
|
labelClass: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
switchClass: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
},
|
|
emits: ['switched'],
|
|
data() {
|
|
return {
|
|
isChecked: false
|
|
}
|
|
},
|
|
computed: {
|
|
},
|
|
watch: {
|
|
isCheck: function () {
|
|
this.isChecked = !this.isChecked
|
|
},
|
|
},
|
|
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="`${position === 'row' ? 'flex-row' : 'flex-col'} ${labelClass} relative flex items-center cursor-pointer`">
|
|
<input
|
|
v-bind="$attrs"
|
|
class="input sr-only peer/checkbox"
|
|
type="checkbox"
|
|
:checked="isCheck"
|
|
@change="setChecked"
|
|
>
|
|
<span
|
|
v-if="position === 'col'"
|
|
class="block peer-checked/checkbox:hidden ml-0 text-xs font-medium text-gray-900 dark:text-gray-300"
|
|
> {{ firstTitle }}</span>
|
|
<span
|
|
v-if="position === 'col'"
|
|
class="hidden peer-checked/checkbox:block ml-0 text-xs font-medium text-gray-900 dark:text-gray-300"
|
|
> {{ secondTitle }} </span>
|
|
<div
|
|
:class="`${switchClass} relative 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: !isCheck ? firstColor : secondColor}"
|
|
/>
|
|
<span
|
|
v-if="position === 'row'"
|
|
class="block peer-checked/checkbox:hidden ml-2 text-sm font-medium text-gray-900 dark:text-gray-300"
|
|
> {{ firstTitle }}</span>
|
|
<span
|
|
v-if="position === 'row'"
|
|
class="hidden peer-checked/checkbox:block ml-2 text-sm font-medium text-gray-900 dark:text-gray-300"
|
|
> {{ secondTitle }} </span>
|
|
</label>
|
|
</template> |