refactor(frontend): use composition aoi
This commit is contained in:
parent
62af89d433
commit
59dc9516d0
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="_panel" :class="[$style.root, { [$style.naked]: naked, [$style.thin]: thin, [$style.hideHeader]: !showHeader, [$style.scrollable]: scrollable, [$style.closed]: !showBody }]">
|
<div ref="rootEl" class="_panel" :class="[$style.root, { [$style.naked]: naked, [$style.thin]: thin, [$style.hideHeader]: !showHeader, [$style.scrollable]: scrollable, [$style.closed]: !showBody }]">
|
||||||
<header v-if="showHeader" ref="header" :class="$style.header">
|
<header v-if="showHeader" ref="headerEl" :class="$style.header">
|
||||||
<div :class="$style.title">
|
<div :class="$style.title">
|
||||||
<span :class="$style.titleIcon"><slot name="icon"></slot></span>
|
<span :class="$style.titleIcon"><slot name="icon"></slot></span>
|
||||||
<slot name="header"></slot>
|
<slot name="header"></slot>
|
||||||
|
@ -23,7 +23,7 @@
|
||||||
@leave="leave"
|
@leave="leave"
|
||||||
@after-leave="afterLeave"
|
@after-leave="afterLeave"
|
||||||
>
|
>
|
||||||
<div v-show="showBody" ref="content" :class="[$style.content, { [$style.omitted]: omitted }]">
|
<div v-show="showBody" ref="contentEl" :class="[$style.content, { [$style.omitted]: omitted }]">
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
<button v-if="omitted" :class="$style.fade" class="_button" @click="() => { ignoreOmit = true; omitted = false; }">
|
<button v-if="omitted" :class="$style.fade" class="_button" @click="() => { ignoreOmit = true; omitted = false; }">
|
||||||
<span :class="$style.fadeLabel">{{ i18n.ts.showMore }}</span>
|
<span :class="$style.fadeLabel">{{ i18n.ts.showMore }}</span>
|
||||||
|
@ -33,109 +33,80 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts" setup>
|
||||||
import { defineComponent } from 'vue';
|
import { onMounted, ref, shallowRef, watch } from 'vue';
|
||||||
import { defaultStore } from '@/store';
|
import { defaultStore } from '@/store';
|
||||||
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,
|
scrollable?: boolean;
|
||||||
},
|
expanded?: boolean;
|
||||||
thin: {
|
maxHeight?: number | null;
|
||||||
type: Boolean,
|
}>(), {
|
||||||
required: false,
|
expanded: true,
|
||||||
default: false,
|
showHeader: true,
|
||||||
},
|
maxHeight: null,
|
||||||
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,
|
|
||||||
defaultStore,
|
|
||||||
i18n,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
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 {
|
|
||||||
this.$el.style.flexBasis = `${headerHeight}px`;
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
immediate: true,
|
|
||||||
});
|
|
||||||
|
|
||||||
this.$el.style.setProperty('--maxHeight', this.maxHeight + 'px');
|
const rootEl = shallowRef<HTMLElement>();
|
||||||
|
const contentEl = shallowRef<HTMLElement>();
|
||||||
|
const headerEl = shallowRef<HTMLElement>();
|
||||||
|
const showBody = ref(props.expanded);
|
||||||
|
const ignoreOmit = ref(false);
|
||||||
|
const omitted = ref(false);
|
||||||
|
|
||||||
const calcOmit = () => {
|
function enter(el) {
|
||||||
if (this.omitted || this.ignoreOmit || this.maxHeight == null) return;
|
const elementHeight = el.getBoundingClientRect().height;
|
||||||
const height = this.$refs.content.offsetHeight;
|
el.style.height = 0;
|
||||||
this.omitted = height > this.maxHeight;
|
el.offsetHeight; // reflow
|
||||||
};
|
el.style.height = Math.min(elementHeight, props.maxHeight ?? Infinity) + 'px';
|
||||||
|
}
|
||||||
|
|
||||||
|
function afterEnter(el) {
|
||||||
|
el.style.height = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function leave(el) {
|
||||||
|
const elementHeight = el.getBoundingClientRect().height;
|
||||||
|
el.style.height = elementHeight + 'px';
|
||||||
|
el.offsetHeight; // reflow
|
||||||
|
el.style.height = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
function afterLeave(el) {
|
||||||
|
el.style.height = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const calcOmit = () => {
|
||||||
|
if (omitted.value || ignoreOmit.value || props.maxHeight == null) return;
|
||||||
|
const height = contentEl.value.offsetHeight;
|
||||||
|
omitted.value = height > props.maxHeight;
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
watch(showBody, v => {
|
||||||
|
const headerHeight = props.showHeader ? headerEl.value.offsetHeight : 0;
|
||||||
|
rootEl.value.style.minHeight = `${headerHeight}px`;
|
||||||
|
if (v) {
|
||||||
|
rootEl.value.style.flexBasis = 'auto';
|
||||||
|
} else {
|
||||||
|
rootEl.value.style.flexBasis = `${headerHeight}px`;
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
immediate: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
rootEl.value.style.setProperty('--maxHeight', props.maxHeight + 'px');
|
||||||
|
|
||||||
|
calcOmit();
|
||||||
|
|
||||||
|
new ResizeObserver((entries, observer) => {
|
||||||
calcOmit();
|
calcOmit();
|
||||||
new ResizeObserver((entries, observer) => {
|
}).observe(contentEl.value);
|
||||||
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;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
@ -65,7 +65,7 @@ const getBgColor = (el: HTMLElement) => {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
let rootEl = $ref<HTMLElement>();
|
let rootEl = $shallowRef<HTMLElement>();
|
||||||
let bgSame = $ref(false);
|
let bgSame = $ref(false);
|
||||||
let opened = $ref(props.defaultOpen);
|
let opened = $ref(props.defaultOpen);
|
||||||
let openedAtLeastOnce = $ref(props.defaultOpen);
|
let openedAtLeastOnce = $ref(props.defaultOpen);
|
||||||
|
|
|
@ -17,7 +17,7 @@ const props = withDefaults(defineProps<{
|
||||||
maxHeight: 200,
|
maxHeight: 200,
|
||||||
});
|
});
|
||||||
|
|
||||||
let content = $ref<HTMLElement>();
|
let content = $shallowRef<HTMLElement>();
|
||||||
let omitted = $ref(false);
|
let omitted = $ref(false);
|
||||||
let ignoreOmit = $ref(false);
|
let ignoreOmit = $ref(false);
|
||||||
|
|
||||||
|
|
|
@ -17,7 +17,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { computed, defineAsyncComponent, onMounted, onUnmounted, ref, watch } from 'vue';
|
import { computed, defineAsyncComponent, onMounted, onUnmounted, ref, watch, shallowRef } from 'vue';
|
||||||
import * as os from '@/os';
|
import * as os from '@/os';
|
||||||
|
|
||||||
const props = withDefaults(defineProps<{
|
const props = withDefaults(defineProps<{
|
||||||
|
@ -39,8 +39,8 @@ const emit = defineEmits<{
|
||||||
(ev: 'update:modelValue', value: number): void;
|
(ev: 'update:modelValue', value: number): void;
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
const containerEl = ref<HTMLElement>();
|
const containerEl = shallowRef<HTMLElement>();
|
||||||
const thumbEl = ref<HTMLElement>();
|
const thumbEl = shallowRef<HTMLElement>();
|
||||||
|
|
||||||
const rawValue = ref((props.modelValue - props.min) / (props.max - props.min));
|
const rawValue = ref((props.modelValue - props.min) / (props.max - props.min));
|
||||||
const steppedRawValue = computed(() => {
|
const steppedRawValue = computed(() => {
|
||||||
|
|
|
@ -33,7 +33,7 @@ import { $i } from '@/account';
|
||||||
|
|
||||||
let notes = $ref<Note[]>([]);
|
let notes = $ref<Note[]>([]);
|
||||||
let isScrolling = $ref(false);
|
let isScrolling = $ref(false);
|
||||||
let scrollEl = $ref<HTMLElement>();
|
let scrollEl = $shallowRef<HTMLElement>();
|
||||||
|
|
||||||
os.apiGet('notes/featured').then(_notes => {
|
os.apiGet('notes/featured').then(_notes => {
|
||||||
notes = _notes;
|
notes = _notes;
|
||||||
|
|
Loading…
Reference in New Issue