mirror of
https://github.com/unraid/api.git
synced 2025-12-30 21:19:49 -06:00
89 lines
2.3 KiB
Vue
89 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
import { computed, ref } from 'vue';
|
|
import type { ComposerTranslation } from 'vue-i18n';
|
|
import { ArrowTopRightOnSquareIcon } from '@heroicons/vue/24/solid';
|
|
import { BrandButton, BrandLoading } from '@unraid/ui';
|
|
import Modal from '~/components/Modal.vue';
|
|
import { getReleaseNotesUrl } from '~/helpers/urls';
|
|
|
|
export interface Props {
|
|
open: boolean;
|
|
version: string;
|
|
t: ComposerTranslation;
|
|
}
|
|
|
|
const props = defineProps<Props>();
|
|
const emit = defineEmits<{
|
|
close: [];
|
|
}>();
|
|
|
|
const iframeRef = ref<HTMLIFrameElement | null>(null);
|
|
const isLoading = ref(true);
|
|
|
|
const releaseNotesUrl = computed(() => {
|
|
return getReleaseNotesUrl(props.version).toString();
|
|
});
|
|
|
|
const handleIframeLoad = () => {
|
|
isLoading.value = false;
|
|
};
|
|
|
|
const handleClose = () => {
|
|
emit('close');
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<Modal
|
|
:center-content="false"
|
|
max-width="max-w-6xl"
|
|
:open="open"
|
|
:show-close-x="true"
|
|
:t="t"
|
|
:tall-content="true"
|
|
:title="`Unraid OS ${version} Release Notes`"
|
|
:disable-overlay-close="false"
|
|
@close="handleClose"
|
|
>
|
|
<template #main>
|
|
<div class="flex flex-col gap-4 min-w-[280px] sm:min-w-[400px]">
|
|
<!-- Loading state -->
|
|
<div
|
|
v-if="isLoading"
|
|
class="text-center flex flex-col justify-center w-full min-h-[250px] min-w-[280px] sm:min-w-[400px]"
|
|
>
|
|
<BrandLoading class="w-[150px] mx-auto mt-6" />
|
|
<p>Loading release notes…</p>
|
|
</div>
|
|
|
|
<!-- iframe for release notes -->
|
|
<div class="w-[calc(100%+3rem)] h-[75vh] max-h-[800px] -mx-6 -my-6">
|
|
<iframe
|
|
ref="iframeRef"
|
|
:src="releaseNotesUrl"
|
|
class="w-full h-full border-0 rounded-md"
|
|
sandbox="allow-scripts allow-same-origin"
|
|
title="Unraid Release Notes"
|
|
@load="handleIframeLoad"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template #footer>
|
|
<div class="flex justify-end">
|
|
<!-- View on docs button -->
|
|
<BrandButton
|
|
variant="underline"
|
|
:external="true"
|
|
:href="releaseNotesUrl"
|
|
:icon="ArrowTopRightOnSquareIcon"
|
|
aria-label="View on Docs"
|
|
>
|
|
Open in New Tab
|
|
</BrandButton>
|
|
</div>
|
|
</template>
|
|
</Modal>
|
|
</template>
|