From ef4a9b9223d6019f0b782eb2f944f3cfe2b6ed41 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Fri, 8 Jul 2022 00:24:47 +1000
Subject: Adjust SCollapsible, allowing for v-model and @open

---
 src/components/SCollapsible.vue | 28 ++++++++++++++++++++++------
 1 file changed, 22 insertions(+), 6 deletions(-)

(limited to 'src/components/SCollapsible.vue')

diff --git a/src/components/SCollapsible.vue b/src/components/SCollapsible.vue
index 4570ee0..5b49c8c 100644
--- a/src/components/SCollapsible.vue
+++ b/src/components/SCollapsible.vue
@@ -1,10 +1,10 @@
 <template>
 <div :style="styles">
-	<div class="hover:cursor-pointer" @click="collapsed = !collapsed">
-		<slot name="summary" :collapsed="collapsed">(Summary)</slot>
+	<div class="hover:cursor-pointer" @click="onClick">
+		<slot name="summary" :open="open">(Summary)</slot>
 	</div>
 	<transition @enter="onEnter" @after-enter="onAfterEnter" @leave="onLeave" @before-leave="onBeforeLeave">
-		<div v-show="!collapsed" :style="contentStyles" class="max-h-0" ref="content">
+		<div v-show="open" :style="contentStyles" class="max-h-0" ref="content">
 			<slot name="content">(Content)</slot>
 		</div>
 	</transition>
@@ -15,21 +15,24 @@
 import {defineComponent, PropType} from 'vue';
 
 export default defineComponent({
+	props: {
+		modelValue: {type: Boolean, default: false}, // For using v-model on the component
+	},
 	data(){
 		return {
-			collapsed: true,
+			open: false,
 		};
 	},
 	computed: {
 		styles(): Record<string,string> {
 			return {
-				overflow: this.collapsed ? 'hidden' : 'visible',
+				overflow: this.open ? 'visible' : 'hidden',
 			};
 		},
 		contentStyles(): Record<string,string> {
 			return {
 				overflow: 'hidden',
-				opacity: this.collapsed ? '0' : '1',
+				opacity: this.open ? '1' : '0',
 				transitionProperty: 'max-height, opacity',
 				transitionDuration: '300ms',
 				transitionTimingFunction: 'ease-in-out',
@@ -37,6 +40,13 @@ export default defineComponent({
 		},
 	},
 	methods: {
+		onClick(evt: Event){
+			this.open = !this.open;
+			this.$emit('update:modelValue', this.open);
+			if (this.open){
+				this.$emit('open');
+			}
+		},
 		onEnter(el: HTMLDivElement){
 			el.style.maxHeight = el.scrollHeight + 'px';
 		},
@@ -52,5 +62,11 @@ export default defineComponent({
 			el.style.maxHeight = '0';
 		},
 	},
+	watch: {
+		modelValue(newVal, oldVal){
+			this.open = newVal;
+		},
+	},
+	emits: ['update:modelValue', 'open', ],
 });
 </script>
-- 
cgit v1.2.3