From d80dc105ee128c97c2a20392989fae1ea7cd0c0b Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Mon, 17 Jan 2022 13:43:46 -0800
Subject: [PATCH] Uses v-bind instead for css variables

---
 assets/components.d.ts               | 11 -----------
 assets/components/ContainerTitle.vue |  7 ++++++-
 assets/components/ScrollProgress.vue |  4 ++--
 3 files changed, 8 insertions(+), 14 deletions(-)

diff --git a/assets/components.d.ts b/assets/components.d.ts
index 436ac4a7..0357a388 100644
--- a/assets/components.d.ts
+++ b/assets/components.d.ts
@@ -4,8 +4,6 @@
 
 declare module 'vue' {
   export interface GlobalComponents {
-    CarbonCaretDown: typeof import('~icons/carbon/caret-down')['default']
-    CilColumns: typeof import('~icons/cil/columns')['default']
     ContainerStat: typeof import('./components/ContainerStat.vue')['default']
     ContainerTitle: typeof import('./components/ContainerTitle.vue')['default']
     FuzzySearchModal: typeof import('./components/FuzzySearchModal.vue')['default']
@@ -15,16 +13,7 @@ declare module 'vue' {
     LogEventSource: typeof import('./components/LogEventSource.vue')['default']
     LogViewer: typeof import('./components/LogViewer.vue')['default']
     LogViewerWithSource: typeof import('./components/LogViewerWithSource.vue')['default']
-    MdiDotsVertical: typeof import('~icons/mdi/dots-vertical')['default']
-    MdiLightChevronDoubleDown: typeof import('~icons/mdi-light/chevron-double-down')['default']
-    MdiLightChevronLeft: typeof import('~icons/mdi-light/chevron-left')['default']
-    MdiLightChevronRight: typeof import('~icons/mdi-light/chevron-right')['default']
-    MdiLightCog: typeof import('~icons/mdi-light/cog')['default']
-    MdiLightMagnify: typeof import('~icons/mdi-light/magnify')['default']
     MobileMenu: typeof import('./components/MobileMenu.vue')['default']
-    OcticonContainer24: typeof import('~icons/octicon/container24')['default']
-    OcticonDownload24: typeof import('~icons/octicon/download24')['default']
-    OcticonTrash24: typeof import('~icons/octicon/trash24')['default']
     PastTime: typeof import('./components/PastTime.vue')['default']
     RelativeTime: typeof import('./components/RelativeTime.vue')['default']
     ScrollableView: typeof import('./components/ScrollableView.vue')['default']
diff --git a/assets/components/ContainerTitle.vue b/assets/components/ContainerTitle.vue
index c4a50582..0dd77461 100644
--- a/assets/components/ContainerTitle.vue
+++ b/assets/components/ContainerTitle.vue
@@ -8,8 +8,13 @@
 </template>
 
 <script lang="ts" setup>
+import { Container } from "@/types/Container";
+import { PropType } from "vue";
 defineProps({
-  container: Object,
+  container: {
+    type: Object as PropType<Container>,
+    required: true,
+  },
 });
 </script>
 
diff --git a/assets/components/ScrollProgress.vue b/assets/components/ScrollProgress.vue
index 17febec6..90534662 100644
--- a/assets/components/ScrollProgress.vue
+++ b/assets/components/ScrollProgress.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="scroll-progress" ref="root">
     <svg width="100" height="100" viewBox="0 0 100 100" :class="{ indeterminate }">
-      <circle r="44" cx="50" cy="50" :style="{ '--progress': scrollProgress }" />
+      <circle r="44" cx="50" cy="50" />
     </svg>
     <div class="is-overlay columns is-vcentered is-centered has-text-weight-light">
       <template v-if="indeterminate">
@@ -105,7 +105,7 @@ watchPostEffect(() => {
       transform: rotate(-90deg);
       transform-origin: 50% 50%;
       stroke: var(--primary-color);
-      stroke-dashoffset: calc(276.32px - var(--progress) * 276.32px);
+      stroke-dashoffset: calc(276.32px - v-bind(scrollProgress) * 276.32px);
       stroke-dasharray: 276.32px 276.32px;
       stroke-linecap: round;
       stroke-width: 3;