merge: select note component in <setup> (!517)
View MR for information: https://activitypub.software/TransFem-org/Sharkey/-/merge_requests/517 Approved-by: Marie <marie@kaifa.ch> Approved-by: Tess K <me@thvxl.se>
This commit is contained in:
		
						commit
						518de221c5
					
				
					 5 changed files with 38 additions and 47 deletions
				
			
		| 
						 | 
				
			
			@ -15,7 +15,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 | 
			
		|||
	<template #default="{ items: notes }">
 | 
			
		||||
		<div :class="[$style.root, { [$style.noGap]: noGap }]">
 | 
			
		||||
			<MkDateSeparatedList
 | 
			
		||||
				v-if="defaultStore.state.noteDesign === 'misskey'"
 | 
			
		||||
				ref="notes"
 | 
			
		||||
				v-slot="{ item: note }"
 | 
			
		||||
				:items="notes"
 | 
			
		||||
| 
						 | 
				
			
			@ -27,34 +26,25 @@ SPDX-License-Identifier: AGPL-3.0-only
 | 
			
		|||
			>
 | 
			
		||||
				<MkNote :key="note._featuredId_ || note._prId_ || note.id" :class="$style.note" :note="note" :withHardMute="true"/>
 | 
			
		||||
			</MkDateSeparatedList>
 | 
			
		||||
			<MkDateSeparatedList
 | 
			
		||||
				v-else-if="defaultStore.state.noteDesign === 'sharkey'"
 | 
			
		||||
				ref="notes" 
 | 
			
		||||
				v-slot="{ item: note }"
 | 
			
		||||
				:items="notes"
 | 
			
		||||
				:direction="pagination.reversed ? 'up' : 'down'"
 | 
			
		||||
				:reversed="pagination.reversed"
 | 
			
		||||
				:noGap="noGap"
 | 
			
		||||
				:ad="true"
 | 
			
		||||
				:class="$style.notes"
 | 
			
		||||
			>
 | 
			
		||||
				<SkNote :key="note._featuredId_ || note._prId_ || note.id" :class="$style.note" :note="note" :withHardMute="true"/>
 | 
			
		||||
			</MkDateSeparatedList>
 | 
			
		||||
		</div>
 | 
			
		||||
	</template>
 | 
			
		||||
</MkPagination>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script lang="ts" setup>
 | 
			
		||||
import { shallowRef, ref } from 'vue';
 | 
			
		||||
import MkNote from '@/components/MkNote.vue';
 | 
			
		||||
import SkNote from '@/components/SkNote.vue';
 | 
			
		||||
import { defineAsyncComponent, shallowRef, ref } from 'vue';
 | 
			
		||||
import MkDateSeparatedList from '@/components/MkDateSeparatedList.vue';
 | 
			
		||||
import MkPagination, { Paging } from '@/components/MkPagination.vue';
 | 
			
		||||
import { i18n } from '@/i18n.js';
 | 
			
		||||
import { infoImageUrl } from '@/instance.js';
 | 
			
		||||
import { defaultStore } from '@/store.js';
 | 
			
		||||
 | 
			
		||||
const MkNote = defineAsyncComponent(() =>
 | 
			
		||||
	(defaultStore.state.noteDesign === 'misskey') ? import('@/components/MkNote.vue') :
 | 
			
		||||
	(defaultStore.state.noteDesign === 'sharkey') ? import('@/components/SkNote.vue') :
 | 
			
		||||
	null
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
const props = defineProps<{
 | 
			
		||||
	pagination: Paging;
 | 
			
		||||
	noGap?: boolean;
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -14,26 +14,20 @@ SPDX-License-Identifier: AGPL-3.0-only
 | 
			
		|||
		</template>
 | 
			
		||||
 | 
			
		||||
		<template #default="{ items: notifications }">
 | 
			
		||||
			<MkDateSeparatedList v-if="defaultStore.state.noteDesign === 'misskey'" v-slot="{ item: notification }" :class="$style.list" :items="notifications" :noGap="true">
 | 
			
		||||
			<MkDateSeparatedList v-slot="{ item: notification }" :class="$style.list" :items="notifications" :noGap="true">
 | 
			
		||||
				<MkNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :key="notification.id + ':note'" :note="notification.note" :withHardMute="true"/>
 | 
			
		||||
				<XNotification v-else :key="notification.id" :notification="notification" :withTime="true" :full="true" class="_panel"/>
 | 
			
		||||
			</MkDateSeparatedList>
 | 
			
		||||
			<MkDateSeparatedList v-else-if="defaultStore.state.noteDesign === 'sharkey'" v-slot="{ item: notification }" :class="$style.list" :items="notifications" :noGap="true">
 | 
			
		||||
				<SkNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :key="notification.id + ':note'" :note="notification.note" :withHardMute="true"/>
 | 
			
		||||
				<XNotification v-else :key="notification.id" :notification="notification" :withTime="true" :full="true" class="_panel"/>
 | 
			
		||||
			</MkDateSeparatedList>
 | 
			
		||||
		</template>
 | 
			
		||||
	</MkPagination>
 | 
			
		||||
</MkPullToRefresh>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script lang="ts" setup>
 | 
			
		||||
import { onUnmounted, onDeactivated, onMounted, computed, shallowRef, onActivated } from 'vue';
 | 
			
		||||
import { defineAsyncComponent, onUnmounted, onDeactivated, onMounted, computed, shallowRef, onActivated } from 'vue';
 | 
			
		||||
import MkPagination from '@/components/MkPagination.vue';
 | 
			
		||||
import XNotification from '@/components/MkNotification.vue';
 | 
			
		||||
import MkDateSeparatedList from '@/components/MkDateSeparatedList.vue';
 | 
			
		||||
import MkNote from '@/components/MkNote.vue';
 | 
			
		||||
import SkNote from '@/components/SkNote.vue';
 | 
			
		||||
import { useStream } from '@/stream.js';
 | 
			
		||||
import { i18n } from '@/i18n.js';
 | 
			
		||||
import { notificationTypes } from '@/const.js';
 | 
			
		||||
| 
						 | 
				
			
			@ -42,6 +36,12 @@ import { defaultStore } from '@/store.js';
 | 
			
		|||
import MkPullToRefresh from '@/components/MkPullToRefresh.vue';
 | 
			
		||||
import * as Misskey from 'misskey-js';
 | 
			
		||||
 | 
			
		||||
const MkNote = defineAsyncComponent(() =>
 | 
			
		||||
	(defaultStore.state.noteDesign === 'misskey') ? import('@/components/MkNote.vue') :
 | 
			
		||||
	(defaultStore.state.noteDesign === 'sharkey') ? import('@/components/SkNote.vue') :
 | 
			
		||||
	null
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
const props = defineProps<{
 | 
			
		||||
	excludeTypes?: typeof notificationTypes[number][];
 | 
			
		||||
}>();
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -16,14 +16,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 | 
			
		|||
			</template>
 | 
			
		||||
 | 
			
		||||
			<template #default="{ items }">
 | 
			
		||||
				<MkDateSeparatedList v-if="defaultStore.state.noteDesign === 'misskey'"
 | 
			
		||||
					v-slot="{ item }" :items="items" :direction="'down'" :noGap="false" :ad="false">
 | 
			
		||||
				<MkDateSeparatedList v-slot="{ item }" :items="items" :direction="'down'" :noGap="false" :ad="false">
 | 
			
		||||
					<MkNote :key="item.id" :note="item.note" :class="$style.note"/>
 | 
			
		||||
				</MkDateSeparatedList>
 | 
			
		||||
				<MkDateSeparatedList v-if="defaultStore.state.noteDesign === 'sharkey'"
 | 
			
		||||
					v-slot="{ item }" :items="items" :direction="'down'" :noGap="false" :ad="false">
 | 
			
		||||
					<SkNote :key="item.id" :note="item.note" :class="$style.note"/>
 | 
			
		||||
				</MkDateSeparatedList>
 | 
			
		||||
			</template>
 | 
			
		||||
		</MkPagination>
 | 
			
		||||
	</MkSpacer>
 | 
			
		||||
| 
						 | 
				
			
			@ -32,14 +27,19 @@ SPDX-License-Identifier: AGPL-3.0-only
 | 
			
		|||
 | 
			
		||||
<script lang="ts" setup>
 | 
			
		||||
import MkPagination from '@/components/MkPagination.vue';
 | 
			
		||||
import MkNote from '@/components/MkNote.vue';
 | 
			
		||||
import SkNote from '@/components/SkNote.vue';
 | 
			
		||||
import MkDateSeparatedList from '@/components/MkDateSeparatedList.vue';
 | 
			
		||||
import { defineAsyncComponent } from 'vue';
 | 
			
		||||
import { i18n } from '@/i18n.js';
 | 
			
		||||
import { definePageMetadata } from '@/scripts/page-metadata.js';
 | 
			
		||||
import { infoImageUrl } from '@/instance.js';
 | 
			
		||||
import { defaultStore } from '@/store.js';
 | 
			
		||||
 | 
			
		||||
const MkNote = defineAsyncComponent(() =>
 | 
			
		||||
	(defaultStore.state.noteDesign === 'misskey') ? import('@/components/MkNote.vue') :
 | 
			
		||||
	(defaultStore.state.noteDesign === 'sharkey') ? import('@/components/SkNote.vue') :
 | 
			
		||||
	null
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
const pagination = {
 | 
			
		||||
	endpoint: 'i/favorites' as const,
 | 
			
		||||
	limit: 10,
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -19,14 +19,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 | 
			
		|||
							<MkButton v-if="note.channelId" rounded :class="$style.loadButton" @click="showNext = 'channel'"><i class="ti ti-chevron-up"></i> <i class="ti ti-device-tv"></i></MkButton>
 | 
			
		||||
							<MkButton rounded :class="$style.loadButton" @click="showNext = 'user'"><i class="ti ti-chevron-up"></i> <i class="ti ti-user"></i></MkButton>
 | 
			
		||||
						</div>
 | 
			
		||||
						<div v-if="defaultStore.state.noteDesign === 'misskey'" class="_margin _gaps_s">
 | 
			
		||||
						<div class="_margin _gaps_s">
 | 
			
		||||
							<MkRemoteCaution v-if="note.user.host != null" :href="note.url ?? note.uri"/>
 | 
			
		||||
							<MkNoteDetailed :key="note.id" v-model:note="note" :initialTab="initialTab" :class="$style.note" :expandAllCws="expandAllCws"/>
 | 
			
		||||
						</div>
 | 
			
		||||
						<div v-else-if="defaultStore.state.noteDesign === 'sharkey'" class="_margin _gaps_s">
 | 
			
		||||
							<MkRemoteCaution v-if="note.user.host != null" :href="note.url ?? note.uri"/>
 | 
			
		||||
							<SkNoteDetailed :key="note.id" v-model:note="note" :initialTab="initialTab" :class="$style.note" :expandAllCws="expandAllCws"/>
 | 
			
		||||
						</div>
 | 
			
		||||
						<div v-if="clips && clips.length > 0" class="_margin">
 | 
			
		||||
							<div style="font-weight: bold; padding: 12px;">{{ i18n.ts.clip }}</div>
 | 
			
		||||
							<div class="_gaps">
 | 
			
		||||
| 
						 | 
				
			
			@ -52,12 +48,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 | 
			
		|||
</template>
 | 
			
		||||
 | 
			
		||||
<script lang="ts" setup>
 | 
			
		||||
import { computed, watch, ref } from 'vue';
 | 
			
		||||
import { defineAsyncComponent, computed, watch, ref } from 'vue';
 | 
			
		||||
import * as Misskey from 'misskey-js';
 | 
			
		||||
import type { Paging } from '@/components/MkPagination.vue';
 | 
			
		||||
import MkNoteDetailed from '@/components/MkNoteDetailed.vue';
 | 
			
		||||
import MkNotes from '@/components/MkNotes.vue';
 | 
			
		||||
import SkNoteDetailed from '@/components/SkNoteDetailed.vue';
 | 
			
		||||
import MkRemoteCaution from '@/components/MkRemoteCaution.vue';
 | 
			
		||||
import MkButton from '@/components/MkButton.vue';
 | 
			
		||||
import { misskeyApi } from '@/scripts/misskey-api.js';
 | 
			
		||||
| 
						 | 
				
			
			@ -67,6 +61,12 @@ import { dateString } from '@/filters/date.js';
 | 
			
		|||
import MkClipPreview from '@/components/MkClipPreview.vue';
 | 
			
		||||
import { defaultStore } from '@/store.js';
 | 
			
		||||
 | 
			
		||||
const MkNoteDetailed = defineAsyncComponent(() =>
 | 
			
		||||
	(defaultStore.state.noteDesign === 'misskey') ? import('@/components/MkNoteDetailed.vue') :
 | 
			
		||||
	(defaultStore.state.noteDesign === 'sharkey') ? import('@/components/SkNoteDetailed.vue') :
 | 
			
		||||
	null
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
const props = defineProps<{
 | 
			
		||||
	noteId: string;
 | 
			
		||||
	initialTab?: string;
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -120,12 +120,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 | 
			
		|||
			</div>
 | 
			
		||||
 | 
			
		||||
			<div class="contents _gaps">
 | 
			
		||||
				<div v-if="user.pinnedNotes.length > 0 && defaultStore.state.noteDesign === 'misskey'" class="_gaps">
 | 
			
		||||
				<div v-if="user.pinnedNotes.length > 0" class="_gaps">
 | 
			
		||||
					<MkNote v-for="note in user.pinnedNotes" :key="note.id" class="note _panel" :note="note" :pinned="true"/>
 | 
			
		||||
				</div>
 | 
			
		||||
				<div v-else-if="user.pinnedNotes.length > 0 && defaultStore.state.noteDesign === 'sharkey'" class="_gaps">
 | 
			
		||||
					<SkNote v-for="note in user.pinnedNotes" :key="note.id" class="note _panel" :note="note" :pinned="true"/>
 | 
			
		||||
				</div>
 | 
			
		||||
				<MkInfo v-else-if="$i && $i.id === user.id">{{ i18n.ts.userPagePinTip }}</MkInfo>
 | 
			
		||||
				<template v-if="narrow">
 | 
			
		||||
					<MkLazy>
 | 
			
		||||
| 
						 | 
				
			
			@ -171,9 +168,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 | 
			
		|||
import { defineAsyncComponent, computed, onMounted, onUnmounted, nextTick, watch, ref } from 'vue';
 | 
			
		||||
import * as Misskey from 'misskey-js';
 | 
			
		||||
import MkTab from '@/components/MkTab.vue';
 | 
			
		||||
import MkNote from '@/components/MkNote.vue';
 | 
			
		||||
import MkNotes from '@/components/MkNotes.vue';
 | 
			
		||||
import SkNote from '@/components/SkNote.vue';
 | 
			
		||||
import MkFollowButton from '@/components/MkFollowButton.vue';
 | 
			
		||||
import MkAccountMoved from '@/components/MkAccountMoved.vue';
 | 
			
		||||
import MkRemoteCaution from '@/components/MkRemoteCaution.vue';
 | 
			
		||||
| 
						 | 
				
			
			@ -195,6 +190,12 @@ import { isFollowingVisibleForMe, isFollowersVisibleForMe } from '@/scripts/isFf
 | 
			
		|||
import { useRouter } from '@/router/supplier.js';
 | 
			
		||||
import { getStaticImageUrl } from '@/scripts/media-proxy.js';
 | 
			
		||||
 | 
			
		||||
const MkNote = defineAsyncComponent(() =>
 | 
			
		||||
	(defaultStore.state.noteDesign === 'misskey') ? import('@/components/MkNote.vue') :
 | 
			
		||||
	(defaultStore.state.noteDesign === 'sharkey') ? import('@/components/SkNote.vue') :
 | 
			
		||||
	null
 | 
			
		||||
);
 | 
			
		||||
 | 
			
		||||
function calcAge(birthdate: string): number {
 | 
			
		||||
	const date = new Date(birthdate);
 | 
			
		||||
	const now = new Date();
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue