refactor(ui-toolkit): replace VProgressCircular with JProgressCircular

Signed-off-by: Fernando Fernández <ferferga@hotmail.com>

Author: ferferga

frontend/src/components/Item/Card/GenericItemCard.vue

@@ -16,9 +16,13 @@
         <JSlot class="align-center card-content uno-h-full uno-w-full uno-flex uno-justify-center !uno-m-0">
           <slot name="image" />
         </JSlot>
-        <JSlot class="align-center card-upper-content uno-flex uno-justify-center">
-          <slot name="upper-content" />
-        </JSlot>
+        <JOverlay
+          v-if="$slots['upper-content']"
+          class="uno-top-0 uno-p-2">
+          <span class="uno-flex uno-items-center">
+            <slot name="upper-content" />
+          </span>
+        </JOverlay>
         <JOverlay
           v-if="overlay && hasFinePointer"
           hover

frontend/src/components/Item/Card/ItemCard.vue

@@ -12,11 +12,10 @@
         :type="getImageType" />
     </template>
     <template #upper-content>
-      <VProgressCircular
+      <JProgressCircular
         v-if="!isNil(refreshProgress)"
-        :model-value="refreshProgress"
-        :indeterminate="refreshProgress === 0"
-        size="24" />
+        :value="refreshProgress"
+        :indeterminate="refreshProgress === 0" />
       <WatchedIndicator v-if="item.UserData && item.UserData.Played" />
       <VChip
         v-if="item.UserData && item.UserData.UnplayedItemCount"

frontend/src/components/Item/Metadata/ImageSearch.vue

@@ -41,11 +41,8 @@
           hide-details />
       </VRow>
       <VDivider />
-      <VProgressCircular
+      <JProgressCircular
         v-if="loading"
-        :size="70"
-        :width="7"
-        color="primary"
         indeterminate
         class="loading-bar" />
       <VCard

frontend/src/components/Layout/AppBar/Buttons/TaskManagerButton.vue

@@ -5,7 +5,7 @@
     <template #icon>
       <JProgressCircular
         v-if="!buttonColor"
-        class="uno-h-6 uno-w-6"
+        class="uno-w-full"
         indeterminate />
       <JIcon
         v-else
@@ -24,14 +24,16 @@
               :key="`${task.id}`"
               :title="task.text">
               <template #append>
-                <VProgressCircular
-                  v-if="task.progress !== 100"
-                  :indeterminate="!!task.progress"
-                  :model-value="task.progress"
-                  size="24" />
-                <JIcon
-                  v-else
-                  class="i-mdi:check" />
+                <VListItemAction>
+                  <JProgressCircular
+                    v-if="task.progress !== 100"
+                    class="uno-w-15"
+                    :indeterminate="!!task.progress"
+                    :value="task.progress" />
+                  <JIcon
+                    v-else
+                    class="i-mdi:check" />
+                </VListItemAction>
               </template>
             </VListItem>
           </VList>
@@ -47,6 +49,7 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { VListItemAction } from 'vuetify/components';
 import { taskManager, TaskType } from '#/store/task-manager';
 
 interface TaskInfo {

frontend/src/components/Layout/Images/UserImage.vue

@@ -3,10 +3,7 @@
     :size="size">
     <JImg
       :src="url"
-      :alt="$t('userImage')"
-      :transition-props="{
-        mode: 'out-in'
-      }">
+      :alt="$t('userImage')">
       <template #placeholder>
         <VAvatar
           color="primary"

frontend/src/components/Layout/Splashscreen.vue

@@ -10,7 +10,9 @@
       name="slide-y-reverse"
       appear>
       <div class="uno-fixed uno-bottom-25 uno-w-full uno-flex uno-flex-col uno-items-center uno-gap-5">
-        <JProgressCircular indeterminate />
+        <JProgressCircular
+          class="uno-w-20"
+          indeterminate />
         <VBtn
           v-if="remote.auth.currentUser.value"
           @click="remote.auth.logoutCurrentUser">

frontend/src/pages/library/[itemId].vue

@@ -15,7 +15,7 @@
         <JProgressCircular
           v-else-if="loading"
           indeterminate
-          class="uno-h-4 uno-w-4" />
+          class="uno-h-full" />
         <template v-else>
           {{ items.length ?? 0 }}
         </template>

frontend/types/global/components.d.ts

@@ -138,7 +138,6 @@ declare module 'vue' {
     VMenu: typeof import('vuetify/components')['VMenu']
     VNavigationDrawer: typeof import('vuetify/components')['VNavigationDrawer']
     VolumeSlider: typeof import('./../../src/components/Layout/VolumeSlider.vue')['default']
-    VProgressCircular: typeof import('vuetify/components')['VProgressCircular']
     VProgressLinear: typeof import('vuetify/components')['VProgressLinear']
     VResponsive: typeof import('vuetify/components')['VResponsive']
     VRow: typeof import('vuetify/components')['VRow']

packages/ui-toolkit/src/components/JImg.vue

@@ -8,6 +8,7 @@
       @load.passive="onLoad"
       @error.passive="onError">
     <JTransition
+      mode="out-in"
       v-bind="isObj(transitionProps) ? transitionProps : undefined"
       :disabled="!transitionProps">
       <img
@@ -24,7 +25,9 @@
         <slot
           v-else-if="loading"
           name="loading">
-          <JProgressCircular indeterminate />
+          <JProgressCircular
+            class="uno-w-full uno-h-full uno-flex uno-items-center uno-justify-center"
+            indeterminate />
         </slot>
         <slot
           v-else-if="error"

packages/ui-toolkit/src/components/JProgressCircular.vue

@@ -1,58 +1,94 @@
 <template>
   <svg
-    xmlns="http://www.w3.org/2000/svg"
+    class="uno-object-contain uno-aspect-square uno-w-15"
     :class="{
       'j-progress-circular--indeterminate': indeterminate,
     }"
+    :style="{
+      '--j-progresscircular-radius': toPx(MAGIC_RADIUS_CONSTANT),
+      transform: `rotate(-90deg)`
+    }"
+    preserveAspectRatio="xMidYMid meet"
+    viewBox="0 0 100 100"
     role="progressbar"
     aria-valuemin="0"
     aria-valuemax="100"
-    :aria-valuenow="indeterminate || !model ? undefined : Math.max(0, Math.min(model, 100))">
+    :aria-valuenow="indeterminate ? undefined : normalizedValue"
+    :aria-valuetext="indeterminate ? 'Cargando...' : `${normalizedValue}% completado`"
+    v-bind="getBaseProps($attrs, false)">
     <circle
-      class="j-progress-circular__underlay"
+      class="j-progress-circular--underlay uno-stroke-current uno-z-1"
       fill="transparent"
       cx="50%"
       cy="50%"
       :r="MAGIC_RADIUS_CONSTANT"
       :stroke-width
       :stroke-dasharray="CIRCUMFERENCE"
       stroke-dashoffset="0" />
+    <text
+      v-if="$slots.default || (innerProgress && !indeterminate)"
+      x="50%"
+      y="50%"
+      class="uno-fill-current j-progress-circular--text"
+      dominant-baseline="middle"
+      text-anchor="middle">
+      <template v-if="$slots.default">
+        <slot />
+      </template>
+      <template v-else>
+        {{ normalizedValue }}%
+      </template>
+    </text>
     <circle
-      class="j-progress-circular--overlay"
+      class="j-progress-circular--overlay uno-transform-origin-center uno-stroke-current uno-stroke-cap-round uno-z-2"
       fill="transparent"
       cx="50%"
       cy="50%"
       :r="MAGIC_RADIUS_CONSTANT"
       :stroke-width
       :stroke-dasharray="CIRCUMFERENCE"
-      :stroke-dashoffset="`${CIRCUMFERENCE}px`" />
+      :stroke-dashoffset />
   </svg>
 </template>
 
+<script lang="ts">
+// Changing this value will change the proportions of the circle accordingly
+const MAGIC_RADIUS_CONSTANT = 18;
+const strokeWidth = MAGIC_RADIUS_CONSTANT * 0.3;
+const CIRCUMFERENCE = 2 * Math.PI * MAGIC_RADIUS_CONSTANT;
+</script>
+
 <script setup lang="ts">
-const { indeterminate } = defineProps<{
+import { computed } from 'vue';
+import { clamp, toPx } from '#/util/helpers';
+import { getBaseProps } from '#/util/props';
+
+const { indeterminate, innerProgress, value = 0 } = defineProps<{
   indeterminate?: boolean;
+  /**
+   * Shows the progress in the inner of the circle
+   */
+  innerProgress?: boolean;
+  value?: number;
 }>();
-const model = defineModel<number>();
 
-const strokeWidth = 6;
-const MAGIC_RADIUS_CONSTANT = 20;
-const CIRCUMFERENCE = 2 * Math.PI * MAGIC_RADIUS_CONSTANT;
+const normalizedValue = computed(() => clamp(value, 0, 100));
+const strokeDashoffset = computed(() => toPx(CIRCUMFERENCE * (1 - normalizedValue.value / 100)));
 </script>
 
 <style scoped>
 @keyframes progress-circular-dash {
   0% {
-    stroke-dasharray: 1 200;
+    stroke-dasharray: calc(var(--j-progresscircular-radius) * 0.05) calc(var(--j-progresscircular-radius) * 10);
     stroke-dashoffset: 0;
   }
   50% {
-    stroke-dasharray: 100 200;
-    stroke-dashoffset: -15px;
+    stroke-dasharray: calc(var(--j-progresscircular-radius) * 5) calc(var(--j-progresscircular-radius) * 10);
+    stroke-dashoffset: calc(var(--j-progresscircular-radius) * -0.75);
   }
   to {
-    stroke-dasharray: 100 200;
-    stroke-dashoffset: -124px;
+    stroke-dasharray: calc(var(--j-progresscircular-radius) * 5) calc(var(--j-progresscircular-radius) * 10);
+    stroke-dashoffset: calc(var(--j-progresscircular-radius) * -6.2);
   }
 }
 
@@ -62,26 +98,23 @@ const CIRCUMFERENCE = 2 * Math.PI * MAGIC_RADIUS_CONSTANT;
   }
 }
 
+.j-progress-circular--text {
+  font-size: calc(var(--j-progresscircular-radius) * 0.5);
+}
+
 .j-progress-circular--overlay {
-  stroke: currentColor;
-  z-index: 2;
   transition: all 1.4s ease-in-out, stroke-width;
 }
 
-.j-progress-circular__underlay {
+.j-progress-circular--underlay {
   color: rgba(var(--j-border-color), var(--j-border-opacity));
-  stroke: currentColor;
-  z-index: 1;
 }
 
 .j-progress-circular--indeterminate .j-progress-circular--overlay {
-  stroke-dasharray: 25 200;
+  stroke-dasharray: calc(var(--j-progresscircular-radius) * 1.25) calc(var(--j-progresscircular-radius) * 10);
   stroke-dashoffset: 0;
-  stroke-linecap: round;
-  transform-origin: 50%;
   animation: 1.4s ease-in-out infinite progress-circular-dash,
     1.4s linear infinite progress-circular-rotate;
   transform: rotate(-90deg);
 }
-
 </style>

packages/ui-toolkit/src/util/props.ts

@@ -16,12 +16,12 @@ function hasClickHandler(attrs: Record<string, unknown>) {
 /**
  * Gets the base props for every component.
  */
-export function getBaseProps(attrs: Record<string, unknown>) {
+export function getBaseProps(attrs: Record<string, unknown>, ariaHidden = true) {
   const hasClick = hasClickHandler(attrs);
 
   return mergeProps(attrs, {
     'role': hasClick ? 'button' : undefined,
-    'aria-hidden': !hasClick,
+    'aria-hidden': !hasClick && ariaHidden,
     'tabindex': hasClick ? 0 : undefined
   });
 };

packages/ui-toolkit/storybook/stories/JProgressCircular.stories.ts

@@ -11,12 +11,7 @@ type Story = StoryObj<typeof JProgressCircular>;
 
 export const Default: Story = {
   args: {
-    indeterminate: false
-  }
-};
-
-export const Indeterminate: Story = {
-  args: {
-    indeterminate: true
+    indeterminate: false,
+    value: 0
   }
 };