fix(panel): refactor and fix background progress transition

Author: dvcol

src/components/container/ContainerComponent.ce.vue

@@ -9,13 +9,14 @@ import {
   NNotificationProvider,
 } from 'naive-ui';
 
-import { computed, ref } from 'vue';
+import { computed, onBeforeMount, ref } from 'vue';
 
 import LoadingBarProvider from '~/components/container/LoadingBarProvider.vue';
 import MessageProvider from '~/components/container/MessageProvider.vue';
 import NotificationProvider from '~/components/container/NotificationProvider.vue';
 import { NavbarService } from '~/services/navbar.service';
 import { lazyComponent } from '~/utils/lazy.utils';
+import { addCustomProgressProperty } from '~/utils/style.utils';
 
 const AppComponent = lazyComponent(() => import('~/components/AppComponent.vue'));
 
@@ -30,6 +31,8 @@ const { drawer } = NavbarService;
 const drawerOpen = NavbarService.open;
 
 const root = ref<HTMLElement>();
+
+onBeforeMount(() => addCustomProgressProperty());
 </script>
 
 <template>

src/components/views/panel/PanelButtonProgress.vue

@@ -17,6 +17,10 @@ const props = defineProps({
     type: Boolean,
     required: false,
   },
+  disabled: {
+    type: Boolean,
+    required: false,
+  },
   percentage: {
     type: Number,
     required: false,
@@ -43,7 +47,6 @@ const percentageLabel = computed(() => {
 
 <template>
   <div
-    ref="root"
     class="container"
     :data-progress="percentage"
     :style="{
@@ -66,7 +69,7 @@ const percentageLabel = computed(() => {
           :class="{ filled, progress }"
           round
           :secondary="!filled"
-          :disabled="loading"
+          :disabled="disabled"
           :loading="loading"
           :type="type"
         >
@@ -81,37 +84,35 @@ const percentageLabel = computed(() => {
 </template>
 
 <style lang="scss" scoped>
+@use '~/styles/mixin' as mixin;
+
 .container {
   i {
     margin-left: calc(0% - var(--n-icon-margin));
   }
 }
 
 .button {
-  background: linear-gradient(to right, var(--n-color) 0%, var(--n-color) 100%);
   transition:
     color 0.3s var(--n-bezier),
     background 0.3s var(--n-bezier),
     background-color 0.3s var(--n-bezier),
     opacity 0.3s var(--n-bezier),
     border-color 0.3s var(--n-bezier),
-    filter 0.3s var(--n-bezier);
-  will-change: color, background, background-color, opacity, border-color, filter;
+    filter 0.3s var(--n-bezier),
+    --progress 0.3s var(--n-bezier);
 
   &:hover {
-    background-color: unset;
     filter: brightness(1.2);
   }
 }
 
+.filled:not(.progress) {
+  background: linear-gradient(to right, var(--n-color) 0%, var(--n-color) 100%);
+}
+
 .progress:not(.filled) {
-  background: linear-gradient(
-    to right,
-    var(--progress-color) 0%,
-    var(--progress-color) var(--progress, 0%),
-    var(--n-color) var(--progress, 0%),
-    var(--n-color) 100%
-  );
+  @include mixin.progress-background($rail: var(--n-color));
 }
 
 .metric {

src/components/views/panel/PanelSelectProgress.vue

@@ -182,35 +182,34 @@ const renderLabel = (option: SelectOption & { icon: Component }) => [
 </template>
 
 <style scoped lang="scss">
+@use '~/styles/mixin' as mixin;
+
 .button-progress-container {
   i {
     margin-left: calc(0% - var(--n-icon-margin));
   }
 
   .button {
-    background: linear-gradient(to right, var(--n-color) 0%, var(--n-color) 100%);
     transition:
       color 0.3s var(--n-bezier),
       background 0.3s var(--n-bezier),
       background-color 0.3s var(--n-bezier),
       opacity 0.3s var(--n-bezier),
       border-color 0.3s var(--n-bezier),
-      filter 0.3s var(--n-bezier);
-    will-change: color, background, background-color, opacity, border-color, filter;
+      filter 0.3s var(--n-bezier),
+      --progress 0.3s var(--n-bezier);
 
     &:hover {
       filter: brightness(1.2);
     }
   }
 
+  .filled:not(.progress) {
+    background: linear-gradient(to right, var(--n-color) 0%, var(--n-color) 100%);
+  }
+
   .progress:not(.filled) {
-    background: linear-gradient(
-      to right,
-      var(--progress-color) 0%,
-      var(--progress-color) var(--progress, 0%),
-      var(--n-color) var(--progress, 0%),
-      var(--n-color) 100%
-    );
+    @include mixin.progress-background($rail: var(--n-color));
   }
 }
 

src/styles/mixin.scss

@@ -33,3 +33,17 @@
     background: $to;
   }
 }
+
+@mixin progress-background(
+  $color: var(--progress-color, var(--color-primary)),
+  $rail: var(--rail-color, var(--color-primary-focus)),
+  $progress: var(--progress, 0%),
+) {
+  background: linear-gradient(
+                  to right,
+                  $color 0%,
+                  $color var(--progress, 0%),
+                  $rail $progress,
+                  $rail 100%
+  );
+}

src/utils/style.utils.ts

@@ -0,0 +1,13 @@
+export const addCustomProgressProperty = (progress = 0, throwOnError = false) => {
+  try {
+    window.CSS.registerProperty({
+      name: '--progress',
+      syntax: '<percentage>',
+      inherits: true,
+      initialValue: `${progress}%`,
+    });
+  } catch (error) {
+    (throwOnError ? console.error : console.warn)('Failed to register custom CSS property: --progress', error);
+    if (throwOnError) throw error;
+  }
+};