graphite/Sharkey
1
0
Fork 0
mirror of https://git.joinsharkey.org/Sharkey/Sharkey.git synced 2024-11-10 05:43:09 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor(frontend): use composition aoi

Browse source
This commit is contained in:
syuilo 2023-04-23 08:13:12 +09:00
parent 62af89d433
commit 59dc9516d0
5 changed files with 76 additions and 105 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

155
packages/frontend/src/components/MkContainer.vue
View file

@ -1,6 +1,6 @@
<template>
<div 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">
<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="headerEl" :class="$style.header">
<div :class="$style.title">
<span :class="$style.titleIcon"><slot name="icon"></slot></span>
<slot name="header"></slot>
@ -23,7 +23,7 @@
@leave="leave"
@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>
<button v-if="omitted" :class="$style.fade" class="_button" @click="() => { ignoreOmit = true; omitted = false; }">
<span :class="$style.fadeLabel">{{ i18n.ts.showMore }}</span>
@ -33,109 +33,80 @@
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
<script lang="ts" setup>
import { onMounted, ref, shallowRef, watch } from 'vue';
import { defaultStore } from '@/store';
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,
defaultStore,
i18n,
const props = withDefaults(defineProps<{
showHeader?: boolean;
thin?: boolean;
naked?: boolean;
foldable?: boolean;
scrollable?: boolean;
expanded?: boolean;
maxHeight?: number | null;
}>(), {
expanded: true,
showHeader: true,
maxHeight: null,
});
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);
function enter(el) {
const elementHeight = el.getBoundingClientRect().height;
el.style.height = 0;
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;
};
},
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';
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 {
this.$el.style.flexBasis = `${headerHeight}px`;
rootEl.value.style.flexBasis = `${headerHeight}px`;
}
}, {
immediate: true,
});
this.$el.style.setProperty('--maxHeight', this.maxHeight + 'px');
const calcOmit = () => {
if (this.omitted || this.ignoreOmit || this.maxHeight == null) return;
const height = this.$refs.content.offsetHeight;
this.omitted = height > this.maxHeight;
};
rootEl.value.style.setProperty('--maxHeight', props.maxHeight + 'px');
calcOmit();
new ResizeObserver((entries, observer) => {
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(contentEl.value);
});
</script>

2
packages/frontend/src/components/MkFolder.vue
View file

@ -65,7 +65,7 @@ const getBgColor = (el: HTMLElement) => {
}
};
let rootEl = $ref<HTMLElement>();
let rootEl = $shallowRef<HTMLElement>();
let bgSame = $ref(false);
let opened = $ref(props.defaultOpen);
let openedAtLeastOnce = $ref(props.defaultOpen);

2
packages/frontend/src/components/MkOmit.vue
View file

@ -17,7 +17,7 @@ const props = withDefaults(defineProps<{
maxHeight: 200,
});
let content = $ref<HTMLElement>();
let content = $shallowRef<HTMLElement>();
let omitted = $ref(false);
let ignoreOmit = $ref(false);

6
packages/frontend/src/components/MkRange.vue
View file

@ -17,7 +17,7 @@
</template>
<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';
const props = withDefaults(defineProps<{
@ -39,8 +39,8 @@ const emit = defineEmits<{
(ev: 'update:modelValue', value: number): void;
}>();
const containerEl = ref<HTMLElement>();
const thumbEl = ref<HTMLElement>();
const containerEl = shallowRef<HTMLElement>();
const thumbEl = shallowRef<HTMLElement>();
const rawValue = ref((props.modelValue - props.min) / (props.max - props.min));
const steppedRawValue = computed(() => {

2
packages/frontend/src/pages/welcome.timeline.vue
View file

@ -33,7 +33,7 @@ import { $i } from '@/account';
let notes = $ref<Note[]>([]);
let isScrolling = $ref(false);
let scrollEl = $ref<HTMLElement>();
let scrollEl = $shallowRef<HTMLElement>();
os.apiGet('notes/featured').then(_notes => {
notes = _notes;