forked from Ivasoft/geovisio-website
83 lines
2.0 KiB
Vue
83 lines
2.0 KiB
Vue
<template>
|
|
<div class="wrapper-checkbox">
|
|
<div class="input-checkbox">
|
|
<i v-if="isChecked && !isIndeterminate" class="icon bi bi-check-square" />
|
|
<i v-if="!isChecked && !isIndeterminate" class="icon bi bi-square" />
|
|
<i v-if="isIndeterminate && !isChecked" class="icon bi bi-dash-square" />
|
|
<input
|
|
id="checkbox"
|
|
v-model="inputValue"
|
|
type="checkbox"
|
|
@input="updateValue(!inputValue)"
|
|
class="input"
|
|
/>
|
|
</div>
|
|
<label v-if="label && label.length" for="checkbox" class="label">{{
|
|
label
|
|
}}</label>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, watchEffect } from 'vue'
|
|
import type { CheckboxInterface } from '@/views/interfaces/MySequenceView'
|
|
const emit = defineEmits<{ (e: 'trigger', value: CheckboxInterface): void }>()
|
|
const props = defineProps({
|
|
name: { type: String, default: null },
|
|
label: { type: String, default: '' },
|
|
isChecked: { type: Boolean, default: false },
|
|
isIndeterminate: { type: Boolean, default: false }
|
|
})
|
|
let inputValue = ref<boolean>(props.isChecked)
|
|
const htmlCheckbox = <HTMLInputElement>document.getElementById('checkbox')
|
|
|
|
watchEffect(async () => {
|
|
if (htmlCheckbox) {
|
|
htmlCheckbox.indeterminate = props.isIndeterminate
|
|
}
|
|
})
|
|
|
|
function updateValue(value: boolean): void {
|
|
if (htmlCheckbox) {
|
|
htmlCheckbox.indeterminate = false
|
|
}
|
|
inputValue.value = value
|
|
emit('trigger', { isChecked: value, isIndeterminate: false })
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.input-checkbox {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: toRem(2);
|
|
width: toRem(2);
|
|
}
|
|
.input {
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
-ms-appearance: none;
|
|
appearance: none;
|
|
cursor: pointer;
|
|
position: absolute;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
.icon {
|
|
font-size: toRem(2);
|
|
position: absolute;
|
|
color: var(--grey-semi-dark);
|
|
}
|
|
.wrapper-checkbox {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.label {
|
|
cursor: pointer;
|
|
margin-left: toRem(0.5);
|
|
@include text(s-regular);
|
|
}
|
|
</style>
|