@onereach/ui-components 2.74.12 → 2.74.13-beta.2364.0

package/src/components/or-loader-v3/OrLoader.vue

@@ -54,7 +54,7 @@
               ]"
               x1="2"
               y1="50%"
-              x2="calc(100% - 2px)"
+              :x2="strokeWidth"
               y2="50%"
             />
 
@@ -65,7 +65,7 @@
               ]"
               x1="2"
               y1="50%"
-              x2="calc(100% - 2px)"
+              :x2="strokeWidth"
               y2="50%"
               :stroke="color === 'inherit' ? 'currentColor' : 'inherit'"
             />
@@ -83,6 +83,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref } from 'vue-demi';
+import { useElementSize } from '@vueuse/core';
 import { LoaderColor, LoaderSize, LoaderVariant } from './props';
 import { LoaderContainer, LoaderDescription, LoaderRoot, LoaderRootColors, LoaderTitle } from './styles';
 
@@ -131,6 +132,8 @@ export default defineComponent({
     // Refs
     const root = ref<HTMLElement>();
 
+    const { width: loaderContainerWidth } = useElementSize(root);
+
     // Styles
     const rootStyles = computed(() => [
       'or-loader',
@@ -161,6 +164,12 @@ export default defineComponent({
       }
     });
 
+    const strokeWidth = computed(() => {
+      return loaderContainerWidth.value
+        ? loaderContainerWidth.value - 2
+        : '100%';
+    });
+
     /**
      * Preserves circular loading indicator from shrinking caused by external styles.
      */
@@ -175,6 +184,7 @@ export default defineComponent({
       titleStyles,
       descriptionStyles,
       computedSize,
+      strokeWidth,
       wrapperStyle,
     };
   },

package/src/components/or-progress-v3/OrProgress.vue

@@ -36,7 +36,7 @@
 
             x1="2"
             y1="50%"
-            x2="calc(100% - 2px)"
+            :x2="strokeWidth"
             y2="50%"
           />
 
@@ -45,7 +45,7 @@
 
             x1="2"
             y1="50%"
-            x2="calc(100% - 2px)"
+            :x2="strokeWidth"
             y2="50%"
             :stroke-dasharray="strokeDasharray"
             :stroke-dashoffset="strokeDashoffset"
@@ -240,6 +240,12 @@ export default defineComponent({
           0,
     );
 
+    const strokeWidth = computed(() => {
+      return width.value
+        ? width.value - 2
+        : '100%';
+    });
+
     const strokeDashoffset = computed(() => props.loading ?
       undefined :
       (1 - localProgress.value) * strokeDasharray.value,
@@ -256,6 +262,7 @@ export default defineComponent({
       progressBarMainPartStyles,
       strokeDasharray,
       strokeDashoffset,
+      strokeWidth,
       localProgress,
       localValue,
       percent,