1<template> 2 <h3>Basic infos</h3> 3 <div 4 v-if="zipFile" 5 v-bind="$attrs" 6 > 7 <ul class="align"> 8 <li><strong> File name </strong> {{ zipFile.name }}</li> 9 <li><strong> File size </strong> {{ zipFile.size }} Bytes</li> 10 <li> 11 <strong> File last modified date </strong> 12 {{ zipFile.lastModifiedDate }} 13 </li> 14 </ul> 15 </div> 16 <div 17 v-if="payload && payload.metadata" 18 v-bind="$attrs" 19 > 20 <ul class="align"> 21 <li 22 v-for="formatter in MetadataFormat" 23 :key="formatter.name" 24 > 25 <strong> {{ formatter.name }} </strong> 26 <p class="wrap"> 27 {{ String(payload[formatter.key]) }} 28 </p> 29 </li> 30 </ul> 31 </div> 32 <div v-if="payload && payload.manifest"> 33 <ul class="align"> 34 <li> 35 <strong> Incremental </strong> 36 <!-- Check if the first partition is incremental or not --> 37 <span v-if="payload.preBuild"> 38 ✅ 39 </span> 40 <span v-else> ❌ </span> 41 </li> 42 <li> 43 <strong> Partial </strong> 44 <span v-if="payload.manifest.partialUpdate"> ✅ </span> 45 <span v-else> ❌ </span> 46 </li> 47 <li> 48 <strong> A/B update </strong> 49 <span v-if="!payload.manifest.nonAB"> 50 ✅ 51 </span> 52 <span v-else> ❌ </span> 53 </li> 54 <li> 55 <strong> VAB </strong> 56 <span v-if="payload.manifest.dynamicPartitionMetadata.snapshotEnabled"> 57 ✅ 58 </span> 59 <span v-else> ❌ </span> 60 </li> 61 <li> 62 <strong> VABC </strong> 63 <span v-if="payload.manifest.dynamicPartitionMetadata.vabcEnabled"> 64 ✅ 65 </span> 66 <span v-else> ❌ </span> 67 </li> 68 </ul> 69 </div> 70</template> 71 72<script> 73import { Payload, MetadataFormat } from '@/services/payload.js' 74 75export default { 76 props: { 77 zipFile: { 78 type: File, 79 required: true, 80 }, 81 payload: { 82 type: Payload, 83 required: true, 84 }, 85 }, 86 data() { 87 return { 88 MetadataFormat 89 } 90 } 91} 92</script> 93 94<style scoped> 95.align strong { 96 display: inline-block; 97 width: 50%; 98 position: relative; 99 padding-right: 10px; /* Ensures colon does not overlay the text */ 100 text-align: right; 101} 102 103.align strong::after { 104 content: ':'; 105} 106 107li { 108 list-style-type: none; 109} 110 111.wrap { 112 width: 50%; 113 display: inline-block; 114 white-space: pre-wrap; 115 word-wrap: break-word; 116 font-family: inherit; 117} 118</style>