From 567a21a8d0498f467f558d9ec1a6db8f1b52c0e6 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Sun, 3 Jul 2022 20:37:46 +1000
Subject: Add SCollapsible component

Also update info-modal source-info styling
---
 src/components/SCollapsible.vue | 39 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 src/components/SCollapsible.vue

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

diff --git a/src/components/SCollapsible.vue b/src/components/SCollapsible.vue
new file mode 100644
index 0000000..4b414fc
--- /dev/null
+++ b/src/components/SCollapsible.vue
@@ -0,0 +1,39 @@
+<template>
+<div :style="styles">
+	<div class="hover:cursor-pointer" @click="collapsed = !collapsed">
+		<slot name="summary" :collapsed="collapsed">(Summary)</slot>
+	</div>
+	<div :style="contentStyles" ref="content">
+		<slot name="content">(Content)</slot>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import {defineComponent, PropType} from 'vue';
+
+export default defineComponent({
+	data(){
+		return {
+			collapsed: true,
+		};
+	},
+	computed: {
+		styles(): Record<string,string> {
+			return {
+				overflow: this.collapsed ? 'hidden' : 'visible',
+			};
+		},
+		contentStyles(): Record<string,string> {
+			return {
+				overflow: 'hidden',
+				maxHeight: this.collapsed ? '0' : (this.$refs.content as HTMLDivElement).scrollHeight + 'px',
+				opacity: this.collapsed ? '0' : '1',
+				transitionProperty: 'max-height, opacity',
+				transitionDuration: '300ms',
+				transitionTimingFunction: 'ease-in-out',
+			};
+		},
+	},
+});
+</script>
-- 
cgit v1.2.3