client: refactor container.vue to composition api #164

Merged
norm merged 3 commits from refactor/container.vue into main 2022-09-25 22:26:19 +00:00

View file

@ -1,5 +1,5 @@
<template>
<div v-size="{ max: [380] }" class="ukygtjoj _panel" :class="{ naked, thin, hideHeader: !showHeader, scrollable, closed: !showBody }">
<div ref="containerEl" v-size="{ max: [380] }" class="ukygtjoj _panel" :class="{ naked, thin, hideHeader: !showHeader, scrollable, closed: !showBody }">
<header v-if="showHeader" ref="header">
<div class="title"><slot name="header"></slot></div>
<div class="sub">
@ -13,9 +13,9 @@
<transition
:name="$store.state.animation ? 'container-toggle' : ''"
@enter="enter"
@after-enter="afterEnter"
@after-enter="removeHeight"
@leave="leave"
@after-leave="afterLeave"
@after-leave="removeHeight"
>
<div v-show="showBody" ref="content" class="content" :class="{ omitted }">
<slot></slot>
@ -27,107 +27,87 @@
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
<script lang="ts" setup>
import { onMounted, watch } from 'vue';
import { i18n } from '@/i18n';
export default defineComponent({
props: {
showHeader: {
type: Boolean,
required: false,
default: true,
},
thin: {
type: Boolean,
required: false,
default: false,
},
naked: {
type: Boolean,
required: false,
default: false,
},
foldable: {
type: Boolean,
required: false,
default: false,
},
expanded: {
type: Boolean,
required: false,
default: true,
},
scrollable: {
type: Boolean,
required: false,
default: false,
},
maxHeight: {
type: Number,
required: false,
default: null,
},
},
data() {
return {
showBody: this.expanded,
omitted: null,
ignoreOmit: false,
};
},
mounted() {
this.$watch('showBody', showBody => {
const headerHeight = this.showHeader ? this.$refs.header.offsetHeight : 0;
this.$el.style.minHeight = `${headerHeight}px`;
if (showBody) {
this.$el.style.flexBasis = 'auto';
const props = withDefaults(defineProps<{
showHeader?: boolean;
thin?: boolean;
naked?: boolean;
foldable?: boolean;
expanded?: boolean;
scrollable?: boolean;
maxHeight?: number | null;
}>(), {
showHeader: true,
thin: false,
naked: false,
foldable: false,
expanded: true,
scrollable: false,
maxHeight: null,
});
let showBody: boolean = $ref(props.expanded);
let omitted: boolean = $ref(false);
let ignoreOmit: boolean = $ref(false);
let containerEl: HTMLElement | null = $ref(null);
let header: HTMLElement | null = $ref(null);
let content: HTMLElement | null = $ref(null);
onMounted(() => {
watch($$(showBody), showBody_ => {
if (header && containerEl) {
const headerHeight = props.showHeader ? header.offsetHeight : 0;
containerEl.style.minHeight = `${headerHeight}px`;
if (showBody_) {
containerEl.style.flexBasis = 'auto';
} else {
this.$el.style.flexBasis = `${headerHeight}px`;
containerEl.style.flexBasis = `${headerHeight}px`;
}
}, {
immediate: true,
});
}
}, {
immediate: true,
});
if (containerEl && props.maxHeight != null) {
containerEl.style.setProperty('--maxHeight', props.maxHeight + 'px');
}
this.$el.style.setProperty('--maxHeight', this.maxHeight + 'px');
const calcOmit = (): void => {
if (omitted || ignoreOmit || props.maxHeight == null) return;
const calcOmit = () => {
if (this.omitted || this.ignoreOmit || this.maxHeight == null) return;
const height = this.$refs.content.offsetHeight;
this.omitted = height > this.maxHeight;
};
if (content) {
const height = content.offsetHeight;
omitted = height > props.maxHeight;
}
};
if (content) {
calcOmit();
new ResizeObserver(() => {
calcOmit();
}).observe(this.$refs.content);
},
methods: {
toggleContent(show: boolean) {
if (!this.foldable) return;
this.showBody = show;
},
enter(el) {
const elementHeight = el.getBoundingClientRect().height;
el.style.height = 0;
el.offsetHeight; // reflow
el.style.height = elementHeight + 'px';
},
afterEnter(el) {
el.style.height = null;
},
leave(el) {
const elementHeight = el.getBoundingClientRect().height;
el.style.height = elementHeight + 'px';
el.offsetHeight; // reflow
el.style.height = 0;
},
afterLeave(el) {
el.style.height = null;
},
},
}).observe(content);
}
});
function enter(el: HTMLElement): void {
const elementHeight = el.getBoundingClientRect().height;
el.style.height = '0';
el.offsetHeight; // reflow
el.style.height = elementHeight + 'px';
}
function leave(el: HTMLElement): void {
const elementHeight = el.getBoundingClientRect().height;
el.style.height = elementHeight + 'px';
el.offsetHeight; // reflow
el.style.height = '0';
}
function removeHeight(el: HTMLElement): void {
el.style.removeProperty('height');
}
</script>
<style lang="scss" scoped>
@ -240,9 +220,6 @@ export default defineComponent({
font-size: 0.9em;
}
}
> .content {
}
}
}