Sharkey/src/client/components/ui/container.vue

144 lines
2.6 KiB
Vue
Raw Normal View History

<template>
<div class="ukygtjoj _panel" :class="{ naked, hideHeader: !showHeader }">
<header v-if="showHeader">
<div class="title"><slot name="header"></slot></div>
<slot name="func"></slot>
<button class="_button" v-if="bodyTogglable" @click="() => showBody = !showBody">
<template v-if="showBody"><fa :icon="faAngleUp"/></template>
<template v-else><fa :icon="faAngleDown"/></template>
</button>
</header>
2020-02-08 07:31:51 +02:00
<transition name="container-toggle"
@enter="enter"
@after-enter="afterEnter"
@leave="leave"
@after-leave="afterLeave"
>
<div v-show="showBody">
<slot></slot>
</div>
</transition>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import { faAngleUp, faAngleDown } from '@fortawesome/free-solid-svg-icons';
export default Vue.extend({
props: {
showHeader: {
type: Boolean,
required: false,
default: true
},
naked: {
type: Boolean,
required: false,
default: false
},
bodyTogglable: {
type: Boolean,
required: false,
default: false
},
expanded: {
type: Boolean,
required: false,
default: true
},
},
data() {
return {
showBody: this.expanded,
faAngleUp, faAngleDown
};
},
methods: {
toggleContent(show: boolean) {
if (!this.bodyTogglable) return;
this.showBody = show;
2020-02-08 07:31:51 +02:00
},
enter(el) {
2020-02-08 11:02:28 +02:00
const elementHeight = el.getBoundingClientRect().height;
el.style.height = 0;
el.offsetHeight; // reflow
el.style.height = elementHeight + 'px';
2020-02-08 07:31:51 +02:00
},
afterEnter(el) {
2020-02-08 11:02:28 +02:00
el.style.height = null;
2020-02-08 07:31:51 +02:00
},
leave(el) {
2020-02-08 11:02:28 +02:00
const elementHeight = el.getBoundingClientRect().height;
el.style.height = elementHeight + 'px';
el.offsetHeight; // reflow
el.style.height = 0;
2020-02-08 07:31:51 +02:00
},
afterLeave(el) {
2020-02-08 11:02:28 +02:00
el.style.height = null;
2020-02-08 07:31:51 +02:00
},
}
});
</script>
<style lang="scss" scoped>
2020-02-08 07:31:51 +02:00
.container-toggle-enter-active, .container-toggle-leave-active {
2020-02-08 11:02:28 +02:00
overflow-y: hidden;
2020-02-08 07:31:51 +02:00
transition: opacity 0.5s, height 0.5s !important;
}
.container-toggle-enter {
opacity: 0;
}
.container-toggle-leave-to {
opacity: 0;
}
.ukygtjoj {
position: relative;
overflow: hidden;
& + .ukygtjoj {
margin-top: var(--margin);
}
&.naked {
background: transparent !important;
box-shadow: none !important;
}
> header {
position: relative;
2020-02-08 07:31:51 +02:00
box-shadow: 0 1px 0 0 var(--divider);
2020-03-20 11:11:39 +02:00
z-index: 1;
> .title {
margin: 0;
padding: 12px 16px;
@media (max-width: 500px) {
padding: 8px 10px;
}
> [data-icon] {
margin-right: 6px;
}
&:empty {
display: none;
}
}
> button {
position: absolute;
z-index: 2;
top: 0;
right: 0;
padding: 0;
width: 42px;
height: 100%;
}
}
}
</style>