use additonalInfo slot
This commit is contained in:
parent
717b3873dd
commit
fd58e9c9bb
|
@ -56,23 +56,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</MkFolder>
|
||||
</div>
|
||||
</FormSection>
|
||||
<FormSection v-if="url || hashVerified">
|
||||
<template #label>{{ i18n.ts._externalResourceInstaller._vendorInfo.title }}</template>
|
||||
<div class="_gaps_s">
|
||||
<MkKeyValue v-if="url">
|
||||
<template #key>{{ i18n.ts._externalResourceInstaller._vendorInfo.endpoint }}</template>
|
||||
<template #value><MkUrl :url="url" :showUrlPreview="false"></MkUrl></template>
|
||||
</MkKeyValue>
|
||||
<MkKeyValue v-if="hashVerified">
|
||||
<!-- hashVerifiedがfalseでも失敗表示は出ないので、エラー表示は別で作成すること -->
|
||||
<!-- そもそもこのコンポーネントはハッシュ検証が必要であれば事前に済ませていることを前提としている -->
|
||||
<template #key>{{ i18n.ts._externalResourceInstaller._vendorInfo.hashVerify }}</template>
|
||||
<template #value>
|
||||
<i class="ti ti-check" style="color: var(--accent)"></i>
|
||||
</template>
|
||||
</MkKeyValue>
|
||||
</div>
|
||||
</FormSection>
|
||||
<slot name="additionalInfo"/>
|
||||
<div class="_buttonsCenter">
|
||||
<MkButton primary @click="emits('confirm')"><i class="ti ti-check"></i> {{ i18n.ts.install }}</MkButton>
|
||||
</div>
|
||||
|
@ -107,7 +91,6 @@ import MkButton from '@/components/MkButton.vue';
|
|||
import FormSection from '@/components/form/section.vue';
|
||||
import FormSplit from '@/components/form/split.vue';
|
||||
import MkCode from '@/components/MkCode.vue';
|
||||
import MkUrl from '@/components/global/MkUrl.vue';
|
||||
import MkInfo from '@/components/MkInfo.vue';
|
||||
import MkFolder from '@/components/MkFolder.vue';
|
||||
import MkKeyValue from '@/components/MkKeyValue.vue';
|
||||
|
@ -118,8 +101,6 @@ const isTheme = computed(() => props.extension.type === 'theme');
|
|||
|
||||
const props = defineProps<{
|
||||
extension: Extension;
|
||||
url?: string;
|
||||
hashVerified?: boolean; // true: 検証成功表示 false/undefined: 検証不要、表示なし
|
||||
}>();
|
||||
|
||||
const emits = defineEmits<{
|
||||
|
|
|
@ -8,8 +8,26 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
|
||||
<MkSpacer :contentMax="500">
|
||||
<MkLoading v-if="uiPhase === 'fetching'"/>
|
||||
<!-- この画面が表示されている時点でハッシュの検証には成功している -->
|
||||
<MkExtensionInstaller v-else-if="uiPhase === 'confirm' && data" :extension="data" :url="url" hashVerified @confirm="install()"/>
|
||||
<MkExtensionInstaller v-else-if="uiPhase === 'confirm' && data" :extension="data" @confirm="install()">
|
||||
<template #additionalInfo>
|
||||
<FormSection>
|
||||
<template #label>{{ i18n.ts._externalResourceInstaller._vendorInfo.title }}</template>
|
||||
<div class="_gaps_s">
|
||||
<MkKeyValue>
|
||||
<template #key>{{ i18n.ts._externalResourceInstaller._vendorInfo.endpoint }}</template>
|
||||
<template #value><MkUrl :url="url" :showUrlPreview="false"></MkUrl></template>
|
||||
</MkKeyValue>
|
||||
<MkKeyValue>
|
||||
<template #key>{{ i18n.ts._externalResourceInstaller._vendorInfo.hashVerify }}</template>
|
||||
<template #value>
|
||||
<!-- この画面が出ている時点でハッシュの検証には成功している -->
|
||||
<i class="ti ti-check" style="color: var(--accent)"></i>
|
||||
</template>
|
||||
</MkKeyValue>
|
||||
</div>
|
||||
</FormSection>
|
||||
</template>
|
||||
</MkExtensionInstaller>
|
||||
<div v-else-if="uiPhase === 'error'" class="_gaps_m" :class="[$style.extInstallerRoot, $style.error]">
|
||||
<div :class="$style.extInstallerIconWrapper">
|
||||
<i class="ti ti-circle-x"></i>
|
||||
|
@ -30,6 +48,9 @@ import { ref, computed, onActivated, onDeactivated, nextTick } from 'vue';
|
|||
import MkLoading from '@/components/global/MkLoading.vue';
|
||||
import MkExtensionInstaller, { type Extension } from '@/components/MkExtensionInstaller.vue';
|
||||
import MkButton from '@/components/MkButton.vue';
|
||||
import MkKeyValue from '@/components/MkKeyValue.vue';
|
||||
import MkUrl from '@/components/global/MkUrl.vue';
|
||||
import FormSection from '@/components/form/section.vue';
|
||||
import * as os from '@/os.js';
|
||||
import { misskeyApi } from '@/scripts/misskey-api.js';
|
||||
import { AiScriptPluginMeta, parsePluginMeta, installPlugin } from '@/scripts/install-plugin.js';
|
||||
|
|
Loading…
Reference in New Issue