You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
100 lines
1.9 KiB
100 lines
1.9 KiB
<template>
|
|
<label class="checkbox-label relative flex items-center">
|
|
<input class="hidden" type="checkbox" v-model="isChecked" :disabled="disabled">
|
|
<span></span>
|
|
<span v-if="label" class="ml-2">{{label}}</span>
|
|
</label>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent } from "vue";
|
|
|
|
export default defineComponent({
|
|
data() {
|
|
return {
|
|
isChecked: this.modelValue
|
|
}
|
|
},
|
|
props: {
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
label: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
modelValue: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
watch: {
|
|
isChecked(newState) {
|
|
this.$emit("update:modelValue", newState);
|
|
this.$emit("onChange", newState);
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
|
|
.checkbox-label input[type="checkbox"]:focus-visible + span {
|
|
@apply ring ring-offset-2 ring-indigo-500;
|
|
}
|
|
|
|
.checkbox-label input[type="checkbox"] + span {
|
|
@apply inline-block w-4 h-4 bg-white border rounded-sm border-gray-300;
|
|
}
|
|
|
|
.checkbox-label input[type="checkbox"]:checked + span {
|
|
@apply bg-indigo-500 border-indigo-500;
|
|
}
|
|
|
|
.checkbox-label input[type="checkbox"] + span::before {
|
|
content: '';
|
|
position: absolute;
|
|
border-color: white;
|
|
border-width: 0;
|
|
/* transform: translateY(0.3rem) rotate(45deg); */
|
|
}
|
|
|
|
.checkbox-label input[type="checkbox"]:checked + span::before {
|
|
border-width: 0 0px 2px 2px;
|
|
width: .5rem;
|
|
height: .25rem;
|
|
transform: translateX(calc(50% - 1px)) translateY(calc(0.3rem - 1px)) rotate(-45deg);
|
|
}
|
|
|
|
@keyframes shrink-bounce{
|
|
0%{
|
|
transform: scale(1);
|
|
}
|
|
33%{
|
|
transform: scale(.85);
|
|
}
|
|
100%{
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
@keyframes checkbox-check{
|
|
0%{
|
|
width: 0;
|
|
height: 0;
|
|
border-color: #212121;
|
|
transform: translate3d(0,0,0) rotate(45deg);
|
|
}
|
|
33%{
|
|
width: .2em;
|
|
height: 0;
|
|
transform: translate3d(0,0,0) rotate(45deg);
|
|
}
|
|
100%{
|
|
width: .2em;
|
|
height: .5em;
|
|
border-color: #212121;
|
|
transform: translate3d(0,-.5em,0) rotate(45deg);
|
|
}
|
|
}
|
|
</style>
|