161sh/jointrashposs
1
0
Fork 0
mirror of https://iceshrimp.dev/Crimekillz/jointrashposs.git synced 2024-11-25 02:09:05 +01:00
Code Issues Packages Projects Releases Wiki Activity

enhance(MisskeyGateway): ボタンアクションが実行できるように

Browse Source
This commit is contained in:
kakkokari-gtyih 2024-01-28 12:32:14 +09:00
parent 26229ad0a2
commit f6096deffa
2 changed files with 31 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
components/g/MisskeyGateway.vue
View File

@ -17,8 +17,10 @@
<NuxtLink :to="localePath('/docs/for-users/features/share-form/#hub-share-disclaimer')" target="_blank"><HelpIco class="ml-1" /></NuxtLink>
</div>
<div class="rounded-lg border border-gray-300 dark:border-gray-600 group">
<GNuxtLink
:to="joinURL(`https://${manualInstanceData.url}/`, path)"
<component
:is="action.type === 'link' ? GNuxtLink : 'button'"
v-bind="action.type === 'link' && { to: joinURL(`https://${manualInstanceData.url}/`, action.path) }"
@click="handleClick(manualInstanceData)"
class="group-first:rounded-t-lg group-last:rounded-b-lg py-2 px-4 sm:p-4 w-full flex items-center hover:bg-gray-100 active:bg-gray-200 dark:hover:bg-gray-700 dark:active:bg-gray-600"
>
<div
@ -26,19 +28,21 @@
>
<img v-if="manualInstanceData.icon && manualInstanceData.meta?.iconUrl" :src="manualInstanceData.meta?.iconUrl" class="w-full h-full" />
</div>
<div class="min-w-0 mr-3">
<div class="min-w-0 mr-3 text-start">
<h2 class="text-sm sm:text-base font-bold truncate">{{ manualInstanceData.name }}</h2>
<p class="text-xs truncate">{{ manualInstanceData.url }}</p>
</div>
<ArrowRightIco class="block ml-auto flex-shrink-0 h-4 w-4" />
</GNuxtLink>
</component>
</div>
</div>
<ul class="rounded-lg border divide-y border-gray-300 dark:border-gray-600 divide-gray-300 dark:divide-gray-600">
<li v-for="instance in displayInstances" :key="instance.url" class="group">
<GNuxtLink
:to="joinURL(`https://${instance.url}/`, path)"
<component
:is="action.type === 'link' ? GNuxtLink : 'button'"
v-bind="action.type === 'link' && { to: joinURL(`https://${instance.url}/`, action.path) }"
@click="handleClick(instance)"
class="group-first:rounded-t-lg group-last:rounded-b-lg py-2 px-4 sm:p-4 w-full flex items-center hover:bg-gray-100 active:bg-gray-200 dark:hover:bg-gray-700 dark:active:bg-gray-600"
>
<div
@ -60,12 +64,12 @@
</template>
<img v-else-if="instance.icon && instance.meta?.iconUrl" :src="instance.meta?.iconUrl" class="w-full h-full" />
</div>
<div class="min-w-0 mr-3">
<div class="min-w-0 mr-3 text-start">
<h2 class="text-sm sm:text-base font-bold truncate">{{ instance.name }}</h2>
<p class="text-xs truncate">{{ instance.url }}</p>
</div>
<ArrowRightIco class="block ml-auto flex-shrink-0 h-4 w-4" />
</GNuxtLink>
</component>
</li>
<li class="group">
<details class="group-first:rounded-t-lg group-last:rounded-b-lg group/details">
@ -113,6 +117,7 @@ import { isLocalPath, resolveObjPath } from '@/assets/js/misc';
import { parseURL, joinURL } from 'ufo';
import { api as misskeyApi } from 'misskey-js';
import { forkedSoftwares } from '~/assets/data/forks';
import { GNuxtLink } from '#components';
import type { InstanceInfo, InstanceItem } from '@/types/instances-info';
import type { FunctionalComponent } from 'vue';
@ -120,7 +125,13 @@ const { t } = useI18n();
const localePath = useGLocalePath();
const props = defineProps<{
path: string;
action: {
type: 'link';
path: string;
} | {
type: 'fn';
onClick: (instance: ExtendedInstanceItem) => Promise<void>;
};
branding?: {
heading?: string;
icon?: FunctionalComponent | string;
@ -215,6 +226,13 @@ function getPlaceholderImage(instance: ExtendedInstanceItem | InstanceItem) {
return 'notDetermined';
}
async function handleClick(instance: ExtendedInstanceItem) {
if (props.action.type !== 'fn') return;
loading.value = true;
await props.action.onClick(instance);
loading.value = false;
}
onMounted(async () => {
if (process.client) {
const fetchedInfo = await window.fetch('https://instanceapp.misskey.page/instances.json');

5
pages/share.vue
View File

@ -7,7 +7,10 @@
></MkAnimBg>
<GMisskeyGateway
class="relative"
:path="`/share?${stringifyQuery(filteredQuery)}`"
:action="{
type: 'link',
path: `/share?${stringifyQuery(filteredQuery)}`,
}"
:manualInstance="manualInstance"
></GMisskeyGateway>
</template>