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/ui/deck/antenna-column.vue
View file

@ -14,7 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { onMounted, ref, shallowRef, watch, defineAsyncComponent } from 'vue';
import { onMounted, ref, useTemplateRef, watch, defineAsyncComponent } from 'vue';
import XColumn from './column.vue';
import type { entities as MisskeyEntities } from 'misskey-js';
import type { Column } from '@/deck.js';
@ -34,7 +34,7 @@ const props = defineProps<{
isStacked: boolean;
}>();
const timeline = shallowRef<InstanceType<typeof MkTimeline>>();
const timeline = useTemplateRef('timeline');
const soundSetting = ref<SoundStore>(props.column.soundSetting ?? { type: null, volume: 1 });
const antennaName = ref<string | null>(null);

4
packages/frontend/src/ui/deck/channel-column.vue
View file

@ -19,7 +19,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { onMounted, ref, shallowRef, watch } from 'vue';
import { onMounted, ref, shallowRef, watch, useTemplateRef } from 'vue';
import * as Misskey from 'misskey-js';
import XColumn from './column.vue';
import type { Column } from '@/deck.js';
@ -40,7 +40,7 @@ const props = defineProps<{
isStacked: boolean;
}>();
const timeline = shallowRef<InstanceType<typeof MkTimeline>>();
const timeline = useTemplateRef('timeline');
const channel = shallowRef<Misskey.entities.Channel>();
const soundSetting = ref<SoundStore>(props.column.soundSetting ?? { type: null, volume: 1 });

4
packages/frontend/src/ui/deck/column.vue
View file

@ -42,7 +42,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { onBeforeUnmount, onMounted, provide, watch, shallowRef, ref, computed } from 'vue';
import { onBeforeUnmount, onMounted, provide, watch, useTemplateRef, ref, computed } from 'vue';
import type { Column } from '@/deck.js';
import type { MenuItem } from '@/types/menu.js';
import { updateColumn, swapLeftColumn, swapRightColumn, swapUpColumn, swapDownColumn, stackLeftColumn, popRightColumn, removeColumn, swapColumn } from '@/deck.js';
@ -68,7 +68,7 @@ const emit = defineEmits<{
(ev: 'headerWheel', ctx: WheelEvent): void;
}>();
const body = shallowRef<HTMLDivElement | null>();
const body = useTemplateRef('body');
const dragging = ref(false);
watch(dragging, v => os.deckGlobalEvents.emit(v ? 'column.dragStart' : 'column.dragEnd'));

4
packages/frontend/src/ui/deck/list-column.vue
View file

@ -14,7 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { watch, shallowRef, ref, onMounted } from 'vue';
import { watch, useTemplateRef, ref, onMounted } from 'vue';
import XColumn from './column.vue';
import type { entities as MisskeyEntities } from 'misskey-js';
import type { Column } from '@/deck.js';
@ -34,7 +34,7 @@ const props = defineProps<{
isStacked: boolean;
}>();
const timeline = shallowRef<InstanceType<typeof MkTimeline>>();
const timeline = useTemplateRef('timeline');
const withRenotes = ref(props.column.withRenotes ?? true);
const soundSetting = ref<SoundStore>(props.column.soundSetting ?? { type: null, volume: 1 });
const listName = ref<string | null>(null);

6
packages/frontend/src/ui/deck/notifications-column.vue
View file

@ -12,10 +12,10 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { defineAsyncComponent, shallowRef } from 'vue';
import { defineAsyncComponent, useTemplateRef } from 'vue';
import XColumn from './column.vue';
import { updateColumn } from '@/deck.js';
import type { Column } from '@/deck.js';
import { updateColumn } from '@/deck.js';
import XNotifications from '@/components/MkNotifications.vue';
import * as os from '@/os.js';
import { i18n } from '@/i18n.js';
@ -25,7 +25,7 @@ const props = defineProps<{
isStacked: boolean;
}>();
const notificationsComponent = shallowRef<InstanceType<typeof XNotifications>>();
const notificationsComponent = useTemplateRef('notificationsComponent');
function func() {
const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkNotificationSelectWindow.vue')), {

4
packages/frontend/src/ui/deck/role-timeline-column.vue
View file

@ -14,7 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { computed, onMounted, ref, shallowRef, watch } from 'vue';
import { onMounted, ref, useTemplateRef, watch } from 'vue';
import XColumn from './column.vue';
import type { Column } from '@/deck.js';
import type { MenuItem } from '@/types/menu.js';
@ -32,7 +32,7 @@ const props = defineProps<{
isStacked: boolean;
}>();
const timeline = shallowRef<InstanceType<typeof MkTimeline>>();
const timeline = useTemplateRef('timeline');
const soundSetting = ref<SoundStore>(props.column.soundSetting ?? { type: null, volume: 1 });
const roleName = ref<string | null>(null);

4
packages/frontend/src/ui/deck/tl-column.vue
View file

@ -32,7 +32,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { onMounted, watch, ref, shallowRef, computed } from 'vue';
import { onMounted, watch, ref, useTemplateRef, computed } from 'vue';
import XColumn from './column.vue';
import type { Column } from '@/deck.js';
import type { MenuItem } from '@/types/menu.js';
@ -50,7 +50,7 @@ const props = defineProps<{
isStacked: boolean;
}>();
const timeline = shallowRef<InstanceType<typeof MkTimeline>>();
const timeline = useTemplateRef('timeline');
const soundSetting = ref<SoundStore>(props.column.soundSetting ?? { type: null, volume: 1 });
const withRenotes = ref(props.column.withRenotes ?? true);