init

src/components/ExpansionPanel.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+interface Props {
+  title: string
+}
+
+const icons = ['mdi-chevron-right', 'mdi-chevron-down']
+const isOpen = ref(true)
+const { title } = defineProps<Props>()
+
+const icon = computed(() => {
+  return isOpen.value ? icons[1] : icons[0]
+})
+
+const open = () => {
+  isOpen.value = !isOpen.value
+}
+</script>
+
+<template>
+  <div class="d-flex flex-column ga-1">
+    <div class="d-flex align-center ga-1">
+      <v-btn density="compact" size="small" :icon="icon" @click="open" />
+      <div @click="open" class="font-weight-bold text-capitalize text-title-medium cursor-pointer">{{ title }}</div>
+    </div>
+    <div v-if="isOpen" class="ml-6 mt-2">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>