jormungandr-bite/packages/client/src/ui/_common_/upload.vue

<template>
	<div class="mk-uploader _acrylic" :style="{ zIndex }">
		<ol v-if="uploads.length > 0">
			<li v-for="ctx in uploads" :key="ctx.id">
				<div
					class="img"
					:style="{ backgroundImage: `url(${ctx.img})` }"
				></div>
				<div class="top">
					<p class="name">
						<i class="ph-circle-notch ph-bold ph-lg fa-pulse"></i
						>{{ ctx.name }}
					</p>
					<p class="status">
						<span
							v-if="ctx.progressValue === undefined"
							class="initing"
							>{{ i18n.ts.waiting }}<MkEllipsis
						/></span>
						<span v-if="ctx.progressValue !== undefined" class="kb"
							>{{
								String(
									Math.floor(ctx.progressValue / 1024)
								).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")
							}}<i>KB</i> /
							{{
								String(
									Math.floor(ctx.progressMax / 1024)
								).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")
							}}<i>KB</i></span
						>
						<span
							v-if="ctx.progressValue !== undefined"
							class="percentage"
							>{{
								Math.floor(
									(ctx.progressValue / ctx.progressMax) * 100
								)
							}}</span
						>
					</p>
				</div>
				<progress
					:value="ctx.progressValue || 0"
					:max="ctx.progressMax || 0"
					:class="{
						initing: ctx.progressValue === undefined,
						waiting:
							ctx.progressValue !== undefined &&
							ctx.progressValue === ctx.progressMax,
					}"
				></progress>
			</li>
		</ol>
	</div>
</template>

<script lang="ts" setup>
import {} from "vue";
import * as os from "@/os";
import { uploads } from "@/scripts/upload";
import { i18n } from "@/i18n";

const zIndex = os.claimZIndex("high");
</script>

<style lang="scss" scoped>
.mk-uploader {
	position: fixed;
	right: 16px;
	width: 260px;
	top: 32px;
	padding: 16px 20px;
	pointer-events: none;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
	border-radius: 8px;
}
.mk-uploader:empty {
	display: none;
}
.mk-uploader > ol {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}
.mk-uploader > ol > li {
	display: grid;
	margin: 8px 0 0 0;
	padding: 0;
	height: 36px;
	width: 100%;
	border-top: solid 8px transparent;
	grid-template-columns: 36px calc(100% - 44px);
	grid-template-rows: 1fr 8px;
	column-gap: 8px;
	box-sizing: content-box;
}
.mk-uploader > ol > li:first-child {
	margin: 0;
	box-shadow: none;
	border-top: none;
}
.mk-uploader > ol > li > .img {
	position: relative;
	display: block;
	background-size: cover;
	background-position: center center;
	grid-column: 1/2;
	grid-row: 1/3;
}
.mk-uploader > ol > li > .top {
	display: flex;
	grid-column: 2/3;
	grid-row: 1/2;
}
.mk-uploader > ol > li > .top > .name {
	display: block;
	padding: 0 8px 0 0;
	margin: 0;
	font-size: 0.8em;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	flex-shrink: 1;
}
.mk-uploader > ol > li > .top > .name > i {
	margin-right: 4px;
}
.mk-uploader > ol > li > .top > .status {
	display: block;
	margin: 0 0 0 auto;
	padding: 0;
	font-size: 0.8em;
	flex-shrink: 0;
}
.mk-uploader > ol > li > .top > .status > .initing {
}
.mk-uploader > ol > li > .top > .status > .kb {
}
.mk-uploader > ol > li > .top > .status > .percentage {
	display: inline-block;
	width: 48px;
	text-align: right;
}
.mk-uploader > ol > li > .top > .status > .percentage:after {
	content: "%";
}
.mk-uploader > ol > li > progress {
	display: block;
	background: transparent;
	border: none;
	border-radius: 4px;
	overflow: hidden;
	grid-column: 2/3;
	grid-row: 2/3;
	z-index: 2;
	width: 100%;
	height: 8px;
}
.mk-uploader > ol > li > progress::-webkit-progress-value {
	background: var(--accent);
}
.mk-uploader > ol > li > progress::-webkit-progress-bar {
	//background: var(--accentAlpha01);
	background: transparent;
}
</style>