diff options
Diffstat (limited to 'src/components/SCollapsible.vue')
| -rw-r--r-- | src/components/SCollapsible.vue | 28 |
1 files changed, 22 insertions, 6 deletions
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> |