amechama/sharkey
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 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

157
packages/frontend/src/components/MkContainer.vue
View File

@ -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, const rootEl = shallowRef<HTMLElement>();
default: false, const contentEl = shallowRef<HTMLElement>();
}, const headerEl = shallowRef<HTMLElement>();
foldable: { const showBody = ref(props.expanded);
type: Boolean, const ignoreOmit = ref(false);
required: false, const omitted = ref(false);
default: false,
}, function enter(el) {
expanded: { const elementHeight = el.getBoundingClientRect().height;
type: Boolean, el.style.height = 0;
required: false, el.offsetHeight; // reflow
default: true, el.style.height = Math.min(elementHeight, props.maxHeight ?? Infinity) + 'px';
}, }
scrollable: {
type: Boolean, function afterEnter(el) {
required: false, el.style.height = null;
default: false, }
},
maxHeight: { function leave(el) {
type: Number, const elementHeight = el.getBoundingClientRect().height;
required: false, el.style.height = elementHeight + 'px';
default: null, el.offsetHeight; // reflow
}, el.style.height = 0;
}, }
data() {
return { function afterLeave(el) {
showBody: this.expanded, el.style.height = null;
omitted: null, }
ignoreOmit: false,
defaultStore, const calcOmit = () => {
i18n, 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; onMounted(() => {
this.$el.style.minHeight = `${headerHeight}px`; watch(showBody, v => {
if (showBody) { const headerHeight = props.showHeader ? headerEl.value.offsetHeight : 0;
this.$el.style.flexBasis = 'auto'; rootEl.value.style.minHeight = `${headerHeight}px`;
if (v) {
rootEl.value.style.flexBasis = 'auto';
} else { } else {
this.$el.style.flexBasis = `${headerHeight}px`; rootEl.value.style.flexBasis = `${headerHeight}px`;
} }
}, { }, {
immediate: true, immediate: true,
}); });
this.$el.style.setProperty('--maxHeight', this.maxHeight + 'px'); rootEl.value.style.setProperty('--maxHeight', props.maxHeight + 'px');
const calcOmit = () => {
if (this.omitted || this.ignoreOmit || this.maxHeight == null) return;
const height = this.$refs.content.offsetHeight;
this.omitted = height > this.maxHeight;
};
calcOmit(); calcOmit();
new ResizeObserver((entries, observer) => { new ResizeObserver((entries, observer) => {
calcOmit(); calcOmit();
}).observe(this.$refs.content); }).observe(contentEl.value);
},
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>

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 bgSame = $ref(false);
let opened = $ref(props.defaultOpen); let opened = $ref(props.defaultOpen);
let openedAtLeastOnce = $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, 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);

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

@ -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(() => {

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

@ -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;