misty.cafe/mistykey
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

refactor(frontend): use useTemplateRef for DOM referencing

Browse source
This commit is contained in:
syuilo 2025-03-19 18:46:03 +09:00
parent 81ac71f7e5
commit 7b323031b7
127 changed files with 353 additions and 359 deletions
Download patch file Download diff file Expand all files Collapse all files

4
packages/frontend/src/widgets/WidgetAichan.vue
View file

@ -10,7 +10,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { onMounted, onUnmounted, shallowRef } from 'vue';
import { onMounted, onUnmounted, useTemplateRef } from 'vue';
import { useWidgetPropsManager } from './widget.js';
import type { WidgetComponentProps, WidgetComponentEmits, WidgetComponentExpose } from './widget.js';
import type { GetFormResultType } from '@/utility/form.js';
@ -35,7 +35,7 @@ const { widgetProps, configure } = useWidgetPropsManager(name,
emit,
);
const live2d = shallowRef<HTMLIFrameElement>();
const live2d = useTemplateRef('live2d');
const touched = () => {
//if (this.live2d) this.live2d.changeExpression('gurugurume');

8
packages/frontend/src/widgets/WidgetInstanceCloud.vue
View file

@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<MkContainer :naked="widgetProps.transparent" :showHeader="false" class="mkw-instance-cloud">
<div class="">
<MkTagCloud v-if="activeInstances">
<MkTagCloud v-if="activeInstances" ref="cloud">
<li v-for="instance in activeInstances" :key="instance.id">
<a @click.prevent="onInstanceClick(instance)">
<img style="width: 32px;" :src="getInstanceIcon(instance)">
@ -18,8 +18,9 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { shallowRef } from 'vue';
import { shallowRef, useTemplateRef } from 'vue';
import * as Misskey from 'misskey-js';
import { useInterval } from '@@/js/use-interval.js';
import { useWidgetPropsManager } from './widget.js';
import type { WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
import type { GetFormResultType } from '@/utility/form.js';
@ -27,7 +28,6 @@ import MkContainer from '@/components/MkContainer.vue';
import MkTagCloud from '@/components/MkTagCloud.vue';
import * as os from '@/os.js';
import { misskeyApi } from '@/utility/misskey-api.js';
import { useInterval } from '@@/js/use-interval.js';
import { getProxiedImageUrlNullable } from '@/utility/media-proxy.js';
const name = 'instanceCloud';
@ -50,7 +50,7 @@ const { widgetProps, configure } = useWidgetPropsManager(name,
emit,
);
const cloud = shallowRef<InstanceType<typeof MkTagCloud> | null>();
const cloud = useTemplateRef('cloud');
const activeInstances = shallowRef<Misskey.entities.FederationInstance[] | null>(null);
function onInstanceClick(i) {

8
packages/frontend/src/widgets/WidgetSlideshow.vue
View file

@ -17,14 +17,14 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { onMounted, ref, shallowRef } from 'vue';
import { onMounted, ref, useTemplateRef } from 'vue';
import * as Misskey from 'misskey-js';
import { useInterval } from '@@/js/use-interval.js';
import { useWidgetPropsManager } from './widget.js';
import type { WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
import type { GetFormResultType } from '@/utility/form.js';
import * as os from '@/os.js';
import { misskeyApi } from '@/utility/misskey-api.js';
import { useInterval } from '@@/js/use-interval.js';
import { i18n } from '@/i18n.js';
const name = 'slideshow';
@ -54,8 +54,8 @@ const { widgetProps, configure, save } = useWidgetPropsManager(name,
const images = ref<Misskey.entities.DriveFile[]>([]);
const fetching = ref(true);
const slideA = shallowRef<HTMLElement>();
const slideB = shallowRef<HTMLElement>();
const slideA = useTemplateRef('slideA');
const slideB = useTemplateRef('slideB');
const change = () => {
if (images.value.length === 0) return;