perf(client): use shallowRef instead of ref for template reference
This commit is contained in:
parent
826e4502cb
commit
c93f091ba8
|
@ -23,7 +23,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref } from 'vue';
|
import { ref, shallowRef } from 'vue';
|
||||||
import * as Misskey from 'misskey-js';
|
import * as Misskey from 'misskey-js';
|
||||||
import XWindow from '@/components/MkWindow.vue';
|
import XWindow from '@/components/MkWindow.vue';
|
||||||
import MkTextarea from '@/components/form/textarea.vue';
|
import MkTextarea from '@/components/form/textarea.vue';
|
||||||
|
@ -40,7 +40,7 @@ const emit = defineEmits<{
|
||||||
(ev: 'closed'): void;
|
(ev: 'closed'): void;
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
const uiWindow = ref<InstanceType<typeof XWindow>>();
|
const uiWindow = shallowRef<InstanceType<typeof XWindow>>();
|
||||||
const comment = ref(props.initialComment || '');
|
const comment = ref(props.initialComment || '');
|
||||||
|
|
||||||
function send() {
|
function send() {
|
||||||
|
|
|
@ -50,7 +50,7 @@ const props = defineProps<{
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
const imgUrl = getProxiedImageUrl(props.file.url);
|
const imgUrl = getProxiedImageUrl(props.file.url);
|
||||||
let dialogEl = $ref<InstanceType<typeof XModalWindow>>();
|
let dialogEl = $shallowRef<InstanceType<typeof XModalWindow>>();
|
||||||
let imgEl = $shallowRef<HTMLImageElement>();
|
let imgEl = $shallowRef<HTMLImageElement>();
|
||||||
let cropper: Cropper | null = null;
|
let cropper: Cropper | null = null;
|
||||||
let loading = $ref(true);
|
let loading = $ref(true);
|
||||||
|
|
|
@ -39,7 +39,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { onBeforeUnmount, onMounted, ref } from 'vue';
|
import { onBeforeUnmount, onMounted, ref, shallowRef } from 'vue';
|
||||||
import MkModal from '@/components/MkModal.vue';
|
import MkModal from '@/components/MkModal.vue';
|
||||||
import MkButton from '@/components/MkButton.vue';
|
import MkButton from '@/components/MkButton.vue';
|
||||||
import MkInput from '@/components/form/input.vue';
|
import MkInput from '@/components/form/input.vue';
|
||||||
|
@ -94,7 +94,7 @@ const emit = defineEmits<{
|
||||||
(ev: 'closed'): void;
|
(ev: 'closed'): void;
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
const modal = ref<InstanceType<typeof MkModal>>();
|
const modal = shallowRef<InstanceType<typeof MkModal>>();
|
||||||
|
|
||||||
const inputValue = ref(props.input?.default || null);
|
const inputValue = ref(props.input?.default || null);
|
||||||
const selectedValue = ref(props.select?.default || null);
|
const selectedValue = ref(props.select?.default || null);
|
||||||
|
|
|
@ -118,7 +118,7 @@ const emit = defineEmits<{
|
||||||
(ev: 'open-folder', v: Misskey.entities.DriveFolder): void;
|
(ev: 'open-folder', v: Misskey.entities.DriveFolder): void;
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
const loadMoreFiles = ref<InstanceType<typeof MkButton>>();
|
const loadMoreFiles = shallowRef<InstanceType<typeof MkButton>>();
|
||||||
const fileInput = shallowRef<HTMLInputElement>();
|
const fileInput = shallowRef<HTMLInputElement>();
|
||||||
|
|
||||||
const folder = ref<Misskey.entities.DriveFolder | null>(null);
|
const folder = ref<Misskey.entities.DriveFolder | null>(null);
|
||||||
|
|
|
@ -19,7 +19,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref } from 'vue';
|
import { ref, shallowRef } from 'vue';
|
||||||
import * as Misskey from 'misskey-js';
|
import * as Misskey from 'misskey-js';
|
||||||
import XDrive from '@/components/MkDrive.vue';
|
import XDrive from '@/components/MkDrive.vue';
|
||||||
import XModalWindow from '@/components/MkModalWindow.vue';
|
import XModalWindow from '@/components/MkModalWindow.vue';
|
||||||
|
@ -38,7 +38,7 @@ const emit = defineEmits<{
|
||||||
(ev: 'closed'): void;
|
(ev: 'closed'): void;
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
const dialog = ref<InstanceType<typeof XModalWindow>>();
|
const dialog = shallowRef<InstanceType<typeof XModalWindow>>();
|
||||||
|
|
||||||
const selected = ref<Misskey.entities.DriveFile[]>([]);
|
const selected = ref<Misskey.entities.DriveFile[]>([]);
|
||||||
|
|
||||||
|
|
|
@ -26,7 +26,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref } from 'vue';
|
import { shallowRef } from 'vue';
|
||||||
import MkModal from '@/components/MkModal.vue';
|
import MkModal from '@/components/MkModal.vue';
|
||||||
import MkEmojiPicker from '@/components/MkEmojiPicker.vue';
|
import MkEmojiPicker from '@/components/MkEmojiPicker.vue';
|
||||||
import { defaultStore } from '@/store';
|
import { defaultStore } from '@/store';
|
||||||
|
@ -48,8 +48,8 @@ const emit = defineEmits<{
|
||||||
(ev: 'closed'): void;
|
(ev: 'closed'): void;
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
const modal = ref<InstanceType<typeof MkModal>>();
|
const modal = shallowRef<InstanceType<typeof MkModal>>();
|
||||||
const picker = ref<InstanceType<typeof MkEmojiPicker>>();
|
const picker = shallowRef<InstanceType<typeof MkEmojiPicker>>();
|
||||||
|
|
||||||
function chosen(emoji: any) {
|
function chosen(emoji: any) {
|
||||||
emit('done', emoji);
|
emit('done', emoji);
|
||||||
|
|
|
@ -37,7 +37,7 @@ const emit = defineEmits<{
|
||||||
(ev: 'closed'): void;
|
(ev: 'closed'): void;
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
const dialog = $ref<InstanceType<typeof XModalWindow>>();
|
const dialog = $shallowRef<InstanceType<typeof XModalWindow>>();
|
||||||
|
|
||||||
let caption = $ref(props.default);
|
let caption = $ref(props.default);
|
||||||
|
|
||||||
|
|
|
@ -28,7 +28,7 @@ const emit = defineEmits<{
|
||||||
(ev: 'closed'): void;
|
(ev: 'closed'): void;
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
const modal = $ref<InstanceType<typeof MkModal>>();
|
const modal = $shallowRef<InstanceType<typeof MkModal>>();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
|
@ -44,7 +44,7 @@ const preferedModalType = (deviceKind === 'desktop' && props.src != null) ? 'pop
|
||||||
deviceKind === 'smartphone' ? 'drawer' :
|
deviceKind === 'smartphone' ? 'drawer' :
|
||||||
'dialog';
|
'dialog';
|
||||||
|
|
||||||
const modal = $ref<InstanceType<typeof MkModal>>();
|
const modal = $shallowRef<InstanceType<typeof MkModal>>();
|
||||||
|
|
||||||
const menu = defaultStore.state.menu;
|
const menu = defaultStore.state.menu;
|
||||||
|
|
||||||
|
|
|
@ -82,7 +82,7 @@ let itemsEl = $shallowRef<HTMLDivElement>();
|
||||||
|
|
||||||
let items2: InnerMenuItem[] = $ref([]);
|
let items2: InnerMenuItem[] = $ref([]);
|
||||||
|
|
||||||
let child = $ref<InstanceType<typeof XChild>>();
|
let child = $shallowRef<InstanceType<typeof XChild>>();
|
||||||
|
|
||||||
let keymap = $computed(() => ({
|
let keymap = $computed(() => ({
|
||||||
'up|k|shift+tab': focusUp,
|
'up|k|shift+tab': focusUp,
|
||||||
|
|
|
@ -49,7 +49,7 @@ router.addListener('push', ctx => {
|
||||||
|
|
||||||
let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
|
let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
|
||||||
let rootEl = $ref();
|
let rootEl = $ref();
|
||||||
let modal = $ref<InstanceType<typeof MkModal>>();
|
let modal = $shallowRef<InstanceType<typeof MkModal>>();
|
||||||
let path = $ref(props.initialPath);
|
let path = $ref(props.initialPath);
|
||||||
let width = $ref(860);
|
let width = $ref(860);
|
||||||
let height = $ref(660);
|
let height = $ref(660);
|
||||||
|
|
|
@ -41,7 +41,7 @@ const emit = defineEmits<{
|
||||||
(event: 'ok'): void;
|
(event: 'ok'): void;
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
let modal = $ref<InstanceType<typeof MkModal>>();
|
let modal = $shallowRef<InstanceType<typeof MkModal>>();
|
||||||
let rootEl = $shallowRef<HTMLElement>();
|
let rootEl = $shallowRef<HTMLElement>();
|
||||||
let headerEl = $shallowRef<HTMLElement>();
|
let headerEl = $shallowRef<HTMLElement>();
|
||||||
let bodyWidth = $ref(0);
|
let bodyWidth = $ref(0);
|
||||||
|
|
|
@ -158,7 +158,7 @@ const isRenote = (
|
||||||
|
|
||||||
const el = shallowRef<HTMLElement>();
|
const el = shallowRef<HTMLElement>();
|
||||||
const menuButton = shallowRef<HTMLElement>();
|
const menuButton = shallowRef<HTMLElement>();
|
||||||
const renoteButton = ref<InstanceType<typeof MkRenoteButton>>();
|
const renoteButton = shallowRef<InstanceType<typeof MkRenoteButton>>();
|
||||||
const renoteTime = shallowRef<HTMLElement>();
|
const renoteTime = shallowRef<HTMLElement>();
|
||||||
const reactButton = shallowRef<HTMLElement>();
|
const reactButton = shallowRef<HTMLElement>();
|
||||||
let appearNote = $computed(() => isRenote ? note.renote as misskey.entities.Note : note);
|
let appearNote = $computed(() => isRenote ? note.renote as misskey.entities.Note : note);
|
||||||
|
|
|
@ -168,7 +168,7 @@ const isRenote = (
|
||||||
|
|
||||||
const el = shallowRef<HTMLElement>();
|
const el = shallowRef<HTMLElement>();
|
||||||
const menuButton = shallowRef<HTMLElement>();
|
const menuButton = shallowRef<HTMLElement>();
|
||||||
const renoteButton = ref<InstanceType<typeof MkRenoteButton>>();
|
const renoteButton = shallowRef<InstanceType<typeof MkRenoteButton>>();
|
||||||
const renoteTime = shallowRef<HTMLElement>();
|
const renoteTime = shallowRef<HTMLElement>();
|
||||||
const reactButton = shallowRef<HTMLElement>();
|
const reactButton = shallowRef<HTMLElement>();
|
||||||
let appearNote = $computed(() => isRenote ? note.renote as misskey.entities.Note : note);
|
let appearNote = $computed(() => isRenote ? note.renote as misskey.entities.Note : note);
|
||||||
|
|
|
@ -18,7 +18,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref } from 'vue';
|
import { shallowRef } from 'vue';
|
||||||
import XNote from '@/components/MkNote.vue';
|
import XNote from '@/components/MkNote.vue';
|
||||||
import XList from '@/components/MkDateSeparatedList.vue';
|
import XList from '@/components/MkDateSeparatedList.vue';
|
||||||
import MkPagination, { Paging } from '@/components/MkPagination.vue';
|
import MkPagination, { Paging } from '@/components/MkPagination.vue';
|
||||||
|
@ -29,7 +29,7 @@ const props = defineProps<{
|
||||||
noGap?: boolean;
|
noGap?: boolean;
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
const pagingComponent = ref<InstanceType<typeof MkPagination>>();
|
const pagingComponent = shallowRef<InstanceType<typeof MkPagination>>();
|
||||||
|
|
||||||
defineExpose({
|
defineExpose({
|
||||||
pagingComponent,
|
pagingComponent,
|
||||||
|
|
|
@ -56,7 +56,7 @@ const props = withDefaults(defineProps<{
|
||||||
|
|
||||||
let includingTypes = $computed(() => props.includingTypes || []);
|
let includingTypes = $computed(() => props.includingTypes || []);
|
||||||
|
|
||||||
const dialog = $ref<InstanceType<typeof XModalWindow>>();
|
const dialog = $shallowRef<InstanceType<typeof XModalWindow>>();
|
||||||
|
|
||||||
let typesMap = $ref<Record<typeof notificationTypes[number], boolean>>({});
|
let typesMap = $ref<Record<typeof notificationTypes[number], boolean>>({});
|
||||||
let useGlobalSetting = $ref((includingTypes === null || includingTypes.length === 0) && props.showGlobalToggle);
|
let useGlobalSetting = $ref((includingTypes === null || includingTypes.length === 0) && props.showGlobalToggle);
|
||||||
|
|
|
@ -17,7 +17,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { defineComponent, markRaw, onUnmounted, onMounted, computed, ref } from 'vue';
|
import { defineComponent, markRaw, onUnmounted, onMounted, computed, shallowRef } from 'vue';
|
||||||
import { notificationTypes } from 'misskey-js';
|
import { notificationTypes } from 'misskey-js';
|
||||||
import MkPagination, { Paging } from '@/components/MkPagination.vue';
|
import MkPagination, { Paging } from '@/components/MkPagination.vue';
|
||||||
import XNotification from '@/components/MkNotification.vue';
|
import XNotification from '@/components/MkNotification.vue';
|
||||||
|
@ -33,7 +33,7 @@ const props = defineProps<{
|
||||||
unreadOnly?: boolean;
|
unreadOnly?: boolean;
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
const pagingComponent = ref<InstanceType<typeof MkPagination>>();
|
const pagingComponent = shallowRef<InstanceType<typeof MkPagination>>();
|
||||||
|
|
||||||
const pagination: Paging = {
|
const pagination: Paging = {
|
||||||
endpoint: 'i/notifications' as const,
|
endpoint: 'i/notifications' as const,
|
||||||
|
|
|
@ -47,7 +47,7 @@ defineEmits<{
|
||||||
const router = new Router(routes, props.initialPath);
|
const router = new Router(routes, props.initialPath);
|
||||||
|
|
||||||
let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
|
let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
|
||||||
let windowEl = $ref<InstanceType<typeof XWindow>>();
|
let windowEl = $shallowRef<InstanceType<typeof XWindow>>();
|
||||||
const history = $ref<{ path: string; key: any; }[]>([{
|
const history = $ref<{ path: string; key: any; }[]>([{
|
||||||
path: router.getCurrentPath(),
|
path: router.getCurrentPath(),
|
||||||
key: router.getCurrentKey(),
|
key: router.getCurrentKey(),
|
||||||
|
|
|
@ -22,7 +22,7 @@ const emit = defineEmits<{
|
||||||
(ev: 'closed'): void;
|
(ev: 'closed'): void;
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
let modal = $ref<InstanceType<typeof MkModal>>();
|
let modal = $shallowRef<InstanceType<typeof MkModal>>();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
|
@ -31,8 +31,8 @@ const emit = defineEmits<{
|
||||||
(ev: 'closed'): void;
|
(ev: 'closed'): void;
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
let modal = $ref<InstanceType<typeof MkModal>>();
|
let modal = $shallowRef<InstanceType<typeof MkModal>>();
|
||||||
let form = $ref<InstanceType<typeof MkPostForm>>();
|
let form = $shallowRef<InstanceType<typeof MkPostForm>>();
|
||||||
|
|
||||||
function onPosted() {
|
function onPosted() {
|
||||||
modal.close({
|
modal.close({
|
||||||
|
|
|
@ -32,7 +32,7 @@ const emit = defineEmits<{
|
||||||
(ev: 'cancelled'): void;
|
(ev: 'cancelled'): void;
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
const dialog = $ref<InstanceType<typeof XModalWindow>>();
|
const dialog = $shallowRef<InstanceType<typeof XModalWindow>>();
|
||||||
|
|
||||||
function onClose() {
|
function onClose() {
|
||||||
emit('cancelled');
|
emit('cancelled');
|
||||||
|
|
|
@ -33,7 +33,7 @@ const emit = defineEmits<{
|
||||||
(ev: 'closed'): void;
|
(ev: 'closed'): void;
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
const dialog = $ref<InstanceType<typeof XModalWindow>>();
|
const dialog = $shallowRef<InstanceType<typeof XModalWindow>>();
|
||||||
|
|
||||||
function onSignup(res) {
|
function onSignup(res) {
|
||||||
emit('done', res);
|
emit('done', res);
|
||||||
|
|
|
@ -54,7 +54,7 @@ const emit = defineEmits<{
|
||||||
(ev: 'done', result: { name: string | null, permissions: string[] }): void;
|
(ev: 'done', result: { name: string | null, permissions: string[] }): void;
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
const dialog = $ref<InstanceType<typeof XModalWindow>>();
|
const dialog = $shallowRef<InstanceType<typeof XModalWindow>>();
|
||||||
let name = $ref(props.initialName);
|
let name = $ref(props.initialName);
|
||||||
let permissions = $ref({});
|
let permissions = $ref({});
|
||||||
|
|
||||||
|
|
|
@ -10,14 +10,14 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref } from 'vue';
|
import { shallowRef } from 'vue';
|
||||||
import MkModal from '@/components/MkModal.vue';
|
import MkModal from '@/components/MkModal.vue';
|
||||||
import MkButton from '@/components/MkButton.vue';
|
import MkButton from '@/components/MkButton.vue';
|
||||||
import MkSparkle from '@/components/MkSparkle.vue';
|
import MkSparkle from '@/components/MkSparkle.vue';
|
||||||
import { version } from '@/config';
|
import { version } from '@/config';
|
||||||
import { i18n } from '@/i18n';
|
import { i18n } from '@/i18n';
|
||||||
|
|
||||||
const modal = ref<InstanceType<typeof MkModal>>();
|
const modal = shallowRef<InstanceType<typeof MkModal>>();
|
||||||
|
|
||||||
const whatIsNew = () => {
|
const whatIsNew = () => {
|
||||||
modal.value.close();
|
modal.value.close();
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<MkPagination ref="pagingComponent" :pagination="pagination">
|
<MkPagination :pagination="pagination">
|
||||||
<template #empty>
|
<template #empty>
|
||||||
<div class="_fullinfo">
|
<div class="_fullinfo">
|
||||||
<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
|
<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
|
||||||
|
@ -16,7 +16,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref } from 'vue';
|
import { shallowRef } from 'vue';
|
||||||
import MkUserInfo from '@/components/MkUserInfo.vue';
|
import MkUserInfo from '@/components/MkUserInfo.vue';
|
||||||
import MkPagination, { Paging } from '@/components/MkPagination.vue';
|
import MkPagination, { Paging } from '@/components/MkPagination.vue';
|
||||||
import { userPage } from '@/filters/user';
|
import { userPage } from '@/filters/user';
|
||||||
|
@ -26,8 +26,6 @@ const props = defineProps<{
|
||||||
pagination: Paging;
|
pagination: Paging;
|
||||||
noGap?: boolean;
|
noGap?: boolean;
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
const pagingComponent = ref<InstanceType<typeof MkPagination>>();
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
|
@ -48,7 +48,7 @@ import * as misskey from 'misskey-js';
|
||||||
import MkModal from '@/components/MkModal.vue';
|
import MkModal from '@/components/MkModal.vue';
|
||||||
import { i18n } from '@/i18n';
|
import { i18n } from '@/i18n';
|
||||||
|
|
||||||
const modal = $ref<InstanceType<typeof MkModal>>();
|
const modal = $shallowRef<InstanceType<typeof MkModal>>();
|
||||||
|
|
||||||
const props = withDefaults(defineProps<{
|
const props = withDefaults(defineProps<{
|
||||||
currentVisibility: typeof misskey.noteVisibilities[number];
|
currentVisibility: typeof misskey.noteVisibilities[number];
|
||||||
|
|
|
@ -9,10 +9,10 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { watch, ref } from 'vue';
|
import { watch, shallowRef } from 'vue';
|
||||||
import MkModal from '@/components/MkModal.vue';
|
import MkModal from '@/components/MkModal.vue';
|
||||||
|
|
||||||
const modal = ref<InstanceType<typeof MkModal>>();
|
const modal = shallowRef<InstanceType<typeof MkModal>>();
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
success: boolean;
|
success: boolean;
|
||||||
|
|
|
@ -58,7 +58,7 @@ import * as os from '@/os';
|
||||||
import { i18n } from '@/i18n';
|
import { i18n } from '@/i18n';
|
||||||
import { definePageMetadata } from '@/scripts/page-metadata';
|
import { definePageMetadata } from '@/scripts/page-metadata';
|
||||||
|
|
||||||
let reports = $ref<InstanceType<typeof MkPagination>>();
|
let reports = $shallowRef<InstanceType<typeof MkPagination>>();
|
||||||
|
|
||||||
let state = $ref('unresolved');
|
let state = $ref('unresolved');
|
||||||
let reporterOrigin = $ref('combined');
|
let reporterOrigin = $ref('combined');
|
||||||
|
|
|
@ -68,7 +68,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { computed, defineAsyncComponent, defineComponent, ref, toRef } from 'vue';
|
import { computed, defineAsyncComponent, defineComponent, ref, shallowRef } from 'vue';
|
||||||
import XHeader from './_header_.vue';
|
import XHeader from './_header_.vue';
|
||||||
import MkButton from '@/components/MkButton.vue';
|
import MkButton from '@/components/MkButton.vue';
|
||||||
import MkInput from '@/components/form/input.vue';
|
import MkInput from '@/components/form/input.vue';
|
||||||
|
@ -81,7 +81,7 @@ import * as os from '@/os';
|
||||||
import { i18n } from '@/i18n';
|
import { i18n } from '@/i18n';
|
||||||
import { definePageMetadata } from '@/scripts/page-metadata';
|
import { definePageMetadata } from '@/scripts/page-metadata';
|
||||||
|
|
||||||
const emojisPaginationComponent = ref<InstanceType<typeof MkPagination>>();
|
const emojisPaginationComponent = shallowRef<InstanceType<typeof MkPagination>>();
|
||||||
|
|
||||||
const tab = ref('local');
|
const tab = ref('local');
|
||||||
const query = ref(null);
|
const query = ref(null);
|
||||||
|
|
|
@ -43,10 +43,10 @@ const activeSincePrevTick = ref(0);
|
||||||
const active = ref(0);
|
const active = ref(0);
|
||||||
const delayed = ref(0);
|
const delayed = ref(0);
|
||||||
const waiting = ref(0);
|
const waiting = ref(0);
|
||||||
let chartProcess = $ref<InstanceType<typeof XChart>>();
|
let chartProcess = $shallowRef<InstanceType<typeof XChart>>();
|
||||||
let chartActive = $ref<InstanceType<typeof XChart>>();
|
let chartActive = $shallowRef<InstanceType<typeof XChart>>();
|
||||||
let chartDelayed = $ref<InstanceType<typeof XChart>>();
|
let chartDelayed = $shallowRef<InstanceType<typeof XChart>>();
|
||||||
let chartWaiting = $ref<InstanceType<typeof XChart>>();
|
let chartWaiting = $shallowRef<InstanceType<typeof XChart>>();
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
domain: string;
|
domain: string;
|
||||||
|
|
|
@ -53,10 +53,10 @@ const active = ref(0);
|
||||||
const delayed = ref(0);
|
const delayed = ref(0);
|
||||||
const waiting = ref(0);
|
const waiting = ref(0);
|
||||||
const jobs = ref([]);
|
const jobs = ref([]);
|
||||||
let chartProcess = $ref<InstanceType<typeof XChart>>();
|
let chartProcess = $shallowRef<InstanceType<typeof XChart>>();
|
||||||
let chartActive = $ref<InstanceType<typeof XChart>>();
|
let chartActive = $shallowRef<InstanceType<typeof XChart>>();
|
||||||
let chartDelayed = $ref<InstanceType<typeof XChart>>();
|
let chartDelayed = $shallowRef<InstanceType<typeof XChart>>();
|
||||||
let chartWaiting = $ref<InstanceType<typeof XChart>>();
|
let chartWaiting = $shallowRef<InstanceType<typeof XChart>>();
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
domain: string;
|
domain: string;
|
||||||
|
|
|
@ -65,7 +65,7 @@ import { definePageMetadata } from '@/scripts/page-metadata';
|
||||||
import MkUserCardMini from '@/components/MkUserCardMini.vue';
|
import MkUserCardMini from '@/components/MkUserCardMini.vue';
|
||||||
import { dateString } from '@/filters/date';
|
import { dateString } from '@/filters/date';
|
||||||
|
|
||||||
let paginationComponent = $ref<InstanceType<typeof MkPagination>>();
|
let paginationComponent = $shallowRef<InstanceType<typeof MkPagination>>();
|
||||||
|
|
||||||
let sort = $ref('+createdAt');
|
let sort = $ref('+createdAt');
|
||||||
let state = $ref('all');
|
let state = $ref('all');
|
||||||
|
|
|
@ -35,7 +35,7 @@ const props = defineProps<{
|
||||||
let antenna = $ref(null);
|
let antenna = $ref(null);
|
||||||
let queue = $ref(0);
|
let queue = $ref(0);
|
||||||
let rootEl = $shallowRef<HTMLElement>();
|
let rootEl = $shallowRef<HTMLElement>();
|
||||||
let tlEl = $ref<InstanceType<typeof XTimeline>>();
|
let tlEl = $shallowRef<InstanceType<typeof XTimeline>>();
|
||||||
const keymap = $computed(() => ({
|
const keymap = $computed(() => ({
|
||||||
't': focus,
|
't': focus,
|
||||||
}));
|
}));
|
||||||
|
|
|
@ -72,7 +72,7 @@ const props = defineProps<{
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
let origin = $ref('local');
|
let origin = $ref('local');
|
||||||
let tagsEl = $ref<InstanceType<typeof MkFolder>>();
|
let tagsEl = $shallowRef<InstanceType<typeof MkFolder>>();
|
||||||
let tagsLocal = $ref([]);
|
let tagsLocal = $ref([]);
|
||||||
let tagsRemote = $ref([]);
|
let tagsRemote = $ref([]);
|
||||||
|
|
||||||
|
|
|
@ -51,7 +51,7 @@ const props = withDefaults(defineProps<{
|
||||||
});
|
});
|
||||||
|
|
||||||
let tab = $ref(props.initialTab);
|
let tab = $ref(props.initialTab);
|
||||||
let tagsEl = $ref<InstanceType<typeof MkFolder>>();
|
let tagsEl = $shallowRef<InstanceType<typeof MkFolder>>();
|
||||||
let searchQuery = $ref(null);
|
let searchQuery = $ref(null);
|
||||||
let searchOrigin = $ref('combined');
|
let searchOrigin = $ref('combined');
|
||||||
|
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
<MkStickyContainer>
|
<MkStickyContainer>
|
||||||
<template #header><MkPageHeader/></template>
|
<template #header><MkPageHeader/></template>
|
||||||
<MkSpacer :content-max="800">
|
<MkSpacer :content-max="800">
|
||||||
<MkPagination ref="pagingComponent" :pagination="pagination">
|
<MkPagination :pagination="pagination">
|
||||||
<template #empty>
|
<template #empty>
|
||||||
<div class="_fullinfo">
|
<div class="_fullinfo">
|
||||||
<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
|
<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
|
||||||
|
@ -33,8 +33,6 @@ const pagination = {
|
||||||
limit: 10,
|
limit: 10,
|
||||||
};
|
};
|
||||||
|
|
||||||
const pagingComponent = ref<InstanceType<typeof MkPagination>>();
|
|
||||||
|
|
||||||
definePageMetadata({
|
definePageMetadata({
|
||||||
title: i18n.ts.favorites,
|
title: i18n.ts.favorites,
|
||||||
icon: 'ti ti-star',
|
icon: 'ti ti-star',
|
||||||
|
|
|
@ -35,14 +35,14 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref, computed } from 'vue';
|
import { shallowRef, computed } from 'vue';
|
||||||
import MkPagination from '@/components/MkPagination.vue';
|
import MkPagination from '@/components/MkPagination.vue';
|
||||||
import { userPage, acct } from '@/filters/user';
|
import { userPage, acct } from '@/filters/user';
|
||||||
import * as os from '@/os';
|
import * as os from '@/os';
|
||||||
import { i18n } from '@/i18n';
|
import { i18n } from '@/i18n';
|
||||||
import { definePageMetadata } from '@/scripts/page-metadata';
|
import { definePageMetadata } from '@/scripts/page-metadata';
|
||||||
|
|
||||||
const paginationComponent = ref<InstanceType<typeof MkPagination>>();
|
const paginationComponent = shallowRef<InstanceType<typeof MkPagination>>();
|
||||||
|
|
||||||
const pagination = {
|
const pagination = {
|
||||||
endpoint: 'following/requests/list' as const,
|
endpoint: 'following/requests/list' as const,
|
||||||
|
|
|
@ -72,8 +72,8 @@ const props = defineProps<{
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
let rootEl = $shallowRef<HTMLDivElement>();
|
let rootEl = $shallowRef<HTMLDivElement>();
|
||||||
let formEl = $ref<InstanceType<typeof XForm>>();
|
let formEl = $shallowRef<InstanceType<typeof XForm>>();
|
||||||
let pagingComponent = $ref<InstanceType<typeof MkPagination>>();
|
let pagingComponent = $shallowRef<InstanceType<typeof MkPagination>>();
|
||||||
|
|
||||||
let fetching = $ref(true);
|
let fetching = $ref(true);
|
||||||
let user: Misskey.entities.UserDetailed | null = $ref(null);
|
let user: Misskey.entities.UserDetailed | null = $ref(null);
|
||||||
|
|
|
@ -29,7 +29,7 @@ const pagination = {
|
||||||
limit: 10,
|
limit: 10,
|
||||||
};
|
};
|
||||||
|
|
||||||
const pagingComponent = $ref<InstanceType<typeof MkPagination>>();
|
const pagingComponent = $shallowRef<InstanceType<typeof MkPagination>>();
|
||||||
|
|
||||||
async function create() {
|
async function create() {
|
||||||
const { canceled, result } = await os.form(i18n.ts.createNewClip, {
|
const { canceled, result } = await os.form(i18n.ts.createNewClip, {
|
||||||
|
|
|
@ -25,7 +25,7 @@ import * as os from '@/os';
|
||||||
import { i18n } from '@/i18n';
|
import { i18n } from '@/i18n';
|
||||||
import { definePageMetadata } from '@/scripts/page-metadata';
|
import { definePageMetadata } from '@/scripts/page-metadata';
|
||||||
|
|
||||||
const pagingComponent = $ref<InstanceType<typeof MkPagination>>();
|
const pagingComponent = $shallowRef<InstanceType<typeof MkPagination>>();
|
||||||
|
|
||||||
const pagination = {
|
const pagination = {
|
||||||
endpoint: 'users/lists/list' as const,
|
endpoint: 'users/lists/list' as const,
|
||||||
|
|
|
@ -34,7 +34,7 @@ import { i18n } from '@/i18n';
|
||||||
import { definePageMetadata } from '@/scripts/page-metadata';
|
import { definePageMetadata } from '@/scripts/page-metadata';
|
||||||
import MkPushNotificationAllowButton from '@/components/MkPushNotificationAllowButton.vue';
|
import MkPushNotificationAllowButton from '@/components/MkPushNotificationAllowButton.vue';
|
||||||
|
|
||||||
let allowButton = $ref<InstanceType<typeof MkPushNotificationAllowButton>>();
|
let allowButton = $shallowRef<InstanceType<typeof MkPushNotificationAllowButton>>();
|
||||||
let pushRegistrationInServer = $computed(() => allowButton?.pushRegistrationInServer);
|
let pushRegistrationInServer = $computed(() => allowButton?.pushRegistrationInServer);
|
||||||
let sendReadMessage = $computed(() => pushRegistrationInServer?.sendReadMessage || false);
|
let sendReadMessage = $computed(() => pushRegistrationInServer?.sendReadMessage || false);
|
||||||
|
|
||||||
|
|
|
@ -41,7 +41,7 @@ const keymap = {
|
||||||
't': focus,
|
't': focus,
|
||||||
};
|
};
|
||||||
|
|
||||||
const tlComponent = $ref<InstanceType<typeof XTimeline>>();
|
const tlComponent = $shallowRef<InstanceType<typeof XTimeline>>();
|
||||||
const rootEl = $shallowRef<HTMLElement>();
|
const rootEl = $shallowRef<HTMLElement>();
|
||||||
|
|
||||||
let queue = $ref(0);
|
let queue = $ref(0);
|
||||||
|
|
|
@ -34,7 +34,7 @@ const props = defineProps<{
|
||||||
|
|
||||||
let list = $ref(null);
|
let list = $ref(null);
|
||||||
let queue = $ref(0);
|
let queue = $ref(0);
|
||||||
let tlEl = $ref<InstanceType<typeof XTimeline>>();
|
let tlEl = $shallowRef<InstanceType<typeof XTimeline>>();
|
||||||
let rootEl = $shallowRef<HTMLElement>();
|
let rootEl = $shallowRef<HTMLElement>();
|
||||||
|
|
||||||
watch(() => props.listId, async () => {
|
watch(() => props.listId, async () => {
|
||||||
|
|
|
@ -26,7 +26,7 @@ const emit = defineEmits<{
|
||||||
(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
|
(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
let timeline = $ref<InstanceType<typeof XTimeline>>();
|
let timeline = $shallowRef<InstanceType<typeof XTimeline>>();
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
if (props.column.antennaId == null) {
|
if (props.column.antennaId == null) {
|
||||||
|
|
|
@ -26,7 +26,7 @@ const emit = defineEmits<{
|
||||||
(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
|
(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
let timeline = $ref<InstanceType<typeof XTimeline>>();
|
let timeline = $shallowRef<InstanceType<typeof XTimeline>>();
|
||||||
|
|
||||||
if (props.column.listId == null) {
|
if (props.column.listId == null) {
|
||||||
setList();
|
setList();
|
||||||
|
|
|
@ -45,7 +45,7 @@ const { widgetProps, configure } = useWidgetPropsManager(name,
|
||||||
emit,
|
emit,
|
||||||
);
|
);
|
||||||
|
|
||||||
let cloud = $ref<InstanceType<typeof MkTagCloud> | null>();
|
let cloud = $shallowRef<InstanceType<typeof MkTagCloud> | null>();
|
||||||
let activeInstances = $shallowRef(null);
|
let activeInstances = $shallowRef(null);
|
||||||
|
|
||||||
function onInstanceClick(i) {
|
function onInstanceClick(i) {
|
||||||
|
|
Loading…
Reference in New Issue