convert ProgressBar.vue to composition API + ts

client/src/components/ProgressBar.vue

@@ -1,58 +1,50 @@
+<script setup lang="ts">
+// Not really a very generic ProgressBar - consider renaming to StateProgressBar.
+
+import { BProgress, BProgressBar } from "bootstrap-vue";
+
+interface Props {
+    total: number;
+    note: string;
+    loading: boolean;
+    okCount: number;
+    runningCount: number;
+    newCount: number;
+    errorCount: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    total: 1,
+    note: undefined,
+    loading: false,
+    okCount: 0,
+    runningCount: 0,
+    newCount: 0,
+    errorCount: 0,
+});
+</script>
+
 <template>
-    <div class="my-1 progressContainer">
-        <small v-if="note" class="progressNote">
-            {{ note }}<span v-if="loading">.<span class="blinking">..</span></span>
+    <div class="my-1 progress-container">
+        <small v-if="props.note" class="progress-note">
+            {{ props.note }}<span v-if="props.loading">.<span class="blinking">..</span></span>
         </small>
-        <b-progress :max="total">
-            <b-progress-bar variant="success" :value="okCount" />
-            <b-progress-bar variant="danger" :value="errorCount" />
-            <b-progress-bar variant="warning" :value="runningCount" />
-            <b-progress-bar variant="warning" :value="newCount" />
-        </b-progress>
+        <BProgress :max="props.total">
+            <BProgressBar variant="success" :value="props.okCount" />
+            <BProgressBar variant="danger" :value="props.errorCount" />
+            <BProgressBar variant="warning" :value="props.runningCount" />
+            <BProgressBar variant="warning" :value="props.newCount" />
+        </BProgress>
     </div>
 </template>
-<script>
-// Not really a very generic ProgressBar - consider renaming to StateProgressBar.
-export default {
-    props: {
-        total: {
-            type: Number,
-            default: 1,
-        },
-        note: {
-            type: String,
-            default: null,
-        },
-        loading: {
-            type: Boolean,
-            default: false,
-        },
-        okCount: {
-            type: Number,
-            default: 0,
-        },
-        runningCount: {
-            type: Number,
-            default: 0,
-        },
-        newCount: {
-            type: Number,
-            default: 0,
-        },
-        errorCount: {
-            type: Number,
-            default: 0,
-        },
-    },
-};
-</script>
-<style lang="css" scoped>
-.progressNote {
+
+<style scoped>
+.progress-note {
     position: absolute;
     text-align: center;
     width: 100%;
 }
-.progressContainer {
+.progress-container {
     position: relative;
 }
 </style>