FoundKeyGang/FoundKey
FoundKeyGang/FoundKey
7
19
Fork 22
Code Issues 37 Pull requests 4 Releases Activity

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
Conversation 0 Commits 3 Files changed 1 +73 -96
1 changed files with 73 additions and 96 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

161
packages/client/src/components/ui/container.vue
View file

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