chore: Undo accidental formattnig

src/components/Widgets/WidgetBase.vue

@@ -1,18 +1,10 @@
 <template>
   <div :class="`widget-base ${loading ? 'is-loading' : ''}`">
     <!-- Update and Full-Page Action Buttons  -->
-    <Button
+    <Button :click="update" class="action-btn update-btn" v-if="!hideControls && !loading">
-      :click="update"
-      class="action-btn update-btn"
-      v-if="!hideControls && !loading"
-    >
       <UpdateIcon />
     </Button>
-    <Button
+    <Button :click="fullScreenWidget" class="action-btn open-btn" v-if="!hideControls && !error && !loading">
-      :click="fullScreenWidget"
-      class="action-btn open-btn"
-      v-if="!hideControls && !error && !loading"
-    >
       <OpenIcon />
     </Button>
     <!-- Loading Spinner -->
@@ -31,13 +23,8 @@
     </div>
     <!-- Widget -->
     <div :class="`widget-wrap ${error ? 'has-error' : ''}`">
-      <component
+      <component v-bind:is="component" :options="widgetOptions" @loading="setLoaderState" @error="handleError"
-        v-bind:is="component"
+        :ref="widgetRef" />
-        :options="widgetOptions"
-        @loading="setLoaderState"
-        @error="handleError"
-        :ref="widgetRef"
-      />
     </div>
   </div>
 </template>
@@ -124,7 +111,7 @@ const COMPAT = {
   'synology-download': 'SynologyDownload',
   'system-info': 'SystemInfo',
   'tfl-status': 'TflStatus',
-  'uptime-kuma':'UptimeKuma',
+  'uptime-kuma': 'UptimeKuma',
   'wallet-balance': 'WalletBalance',
   weather: 'Weather',
   'weather-forecast': 'WeatherForecast',
@@ -216,11 +203,13 @@ export default {
 
 <style scoped lang="scss">
 @import "@/styles/media-queries.scss";
+
 .widget-base {
   position: relative;
   padding: 0.75rem 0.5rem 0.5rem 0.5rem;
   background: var(--widget-base-background);
   box-shadow: var(--widget-base-shadow, none);
+
   // Refresh and full-page action buttons
   button.action-btn {
     height: 1rem;
@@ -233,21 +222,26 @@ export default {
     border: none;
     opacity: var(--dimming-factor);
     color: var(--widget-text-color);
+
     &:hover {
       opacity: 1;
       color: var(--widget-background-color);
     }
+
     &.update-btn {
       right: -0.25rem;
     }
+
     &.open-btn {
       right: 1.75rem;
     }
   }
+
   // Optional widget label
   .widget-label {
     color: var(--widget-text-color);
   }
+
   // Actual widget container
   .widget-wrap {
     &.has-error {
@@ -255,11 +249,13 @@ export default {
       opacity: 0.5;
       border-radius: var(--curve-factor);
       background: #ffff0040;
+
       &:hover {
         background: none;
       }
     }
   }
+
   // Error message output
   .widget-error {
     p.error-msg {
@@ -268,12 +264,14 @@ export default {
       font-size: 1rem;
       margin: 0 auto 0.5rem auto;
     }
+
     p.error-output {
       font-family: var(--font-monospace);
       color: var(--widget-text-color);
       font-size: 0.85rem;
       margin: 0.5rem auto;
     }
+
     p.retry-link {
       cursor: pointer;
       text-decoration: underline;
@@ -282,14 +280,17 @@ export default {
       margin: 0;
     }
   }
+
   // Loading spinner
   .loading {
     margin: 0.2rem auto;
     text-align: center;
+
     svg.loader {
       width: 100px;
     }
   }
+
   // Hide widget contents while loading
   &.is-loading {
     .widget-wrap {