1 files changed, 10 insertions, 4 deletions
diff --git a/src/components/SCollapsible.vue b/src/components/SCollapsible.vue
index 39b4283..9008cbc 100644
--- a/src/components/SCollapsible.vue
+++ b/src/components/SCollapsible.vue
@@ -14,15 +14,17 @@
 <script setup lang="ts">
 import {ref, computed, watch} from 'vue';
 
-// Props + events
 const props = defineProps({
 	modelValue: {type: Boolean, default: false}, // For using v-model on the component
 });
+
 const emit = defineEmits(['update:modelValue', 'open']);
 
-// For open status
+// ========== For open status ==========
+
 const open = ref(false);
 watch(() => props.modelValue, (newVal) => {open.value = newVal})
+
 function onClick(){
 	open.value = !open.value;
 	emit('update:modelValue', open.value);
@@ -31,10 +33,12 @@ function onClick(){
 	}
 }
 
-// Styles
+// ========== For styles ==========
+
 const styles = computed(() => ({
 	overflow: open.value ? 'visible' : 'hidden',
 }));
+
 const contentStyles = computed(() => ({
 	overflow: 'hidden',
 	opacity: open.value ? '1' : '0',
@@ -43,18 +47,20 @@ const contentStyles = computed(() => ({
 	transitionTimingFunction: 'ease-in-out',
 }));
 
-// Open/close transitions
 function onEnter(el: HTMLDivElement){
 	el.style.maxHeight = el.scrollHeight + 'px';
 }
+
 function onAfterEnter(el: HTMLDivElement){
 	el.style.maxHeight = 'none';
 		// Allows the content to grow after the transition ends, as the scrollHeight sometimes is too short
 }
+
 function onBeforeLeave(el: HTMLDivElement){
 	el.style.maxHeight = el.scrollHeight + 'px';
 	el.offsetWidth; // Triggers reflow
 }
+
 function onLeave(el: HTMLDivElement){
 	el.style.maxHeight = '0';
 }