[#1985] Fix VaProgressBar slot position

packages/docs/src/locales/en/en.json

@@ -535,7 +535,8 @@
         "indeterminate": "Create a indeterminate loading bar",
         "buffer": "Create a loading bar with a buffer. Commonly used in videos",
         "reverse": "Reverse the progress bar direction",
-        "rounded": "Add a border radius to the `va-progress-bar` component (default: true)"
+        "rounded": "Add a border radius to the `va-progress-bar` component (default: true)",
+        "slotInside": "Sets the content of the slot inside the progress bar"
       },
       "slots": {
         "default": "Display any additional info about the progress"

packages/docs/src/locales/ru/ru.json

@@ -530,7 +530,8 @@
         "indeterminate": "Бесконечная анимация прогресса",
         "buffer": "Создает полосу загрузки с буфером. Обычно используется в видео",
         "reverse": "Измените направление индикатора прогресса",
-        "rounded": "Добавляет закругления (`border-radius`, включено по умолчанию)"
+        "rounded": "Добавляет закругления (`border-radius`, включено по умолчанию)",
+        "slotInside": "Устанавливает содержимое слота внутри индикатора"
       },
       "slots": {
         "default": "Отображение любой дополнительной информации"

packages/docs/src/page-configs/ui-elements/progress-bar/examples/Slots.vue

@@ -1,13 +1,14 @@
 <template>
   <div class="flex lg6 xs12">
-    <div class="mt-2 text--bold muted">When you use a default size:</div>
+    <div class="mt-2 text--bold muted">When you use a default slot:</div>
     <va-progress-bar :model-value="value">
       {{ value + '%' }}
     </va-progress-bar>
-    <div class="mt-4 mb-2 text--bold muted">When you use a 'large' size:</div>
+    <div class="mt-4 mb-2 text--bold muted">When you use a 'slot-inside' prop:</div>
     <va-progress-bar
       :model-value="value"
       size="large"
+      slot-inside
     >
       {{ value + '%' }}
     </va-progress-bar>

packages/ui/src/components/va-progress-bar/VaProgressBar.demo.vue

@@ -73,6 +73,7 @@
         :modelValue="value"
         :rounded="false"
         size="large"
+        slot-inside
       >
         {{ value + '%' }}
       </va-progress-bar>

packages/ui/src/components/va-progress-bar/VaProgressBar.vue

@@ -2,13 +2,21 @@
   <div
     class="va-progress-bar"
     :class="rootClass"
+    :style="rooStyle"
     v-bind="ariaAttributesComputed"
   >
-    <div v-if="!isLarge" class="va-progress-bar__info">
+    <div
+      v-if="!$props.slotInside"
+      class="va-progress-bar__info"
+      v-bind="{ value: $props.modelValue }"
+    >
       <slot />
     </div>
+
     <div class="va-progress-bar__wrapper" :style="wrapperStyle">
-      <div class="va-progress-bar__buffer" :style="bufferStyle" />
+      <div class="va-progress-bar__buffer" :style="bufferStyle">
+        <slot v-if="$props.slotInside" v-bind="{ value: $props.modelValue }" />
+      </div>
 
       <template v-if="indeterminate">
         <div
@@ -20,15 +28,13 @@
           :style="intermediateStyle"
         />
       </template>
-      <div v-else class="va-progress-bar__progress" :style="progressStyle">
-        <slot v-if="isLarge" />
-      </div>
+      <div v-else class="va-progress-bar__progress" :style="progressStyle" />
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from 'vue'
+import { computed, defineComponent, PropType, StyleValue } from 'vue'
 import clamp from 'lodash/clamp.js'
 
 import { useColors } from '../../composables'
@@ -47,12 +53,12 @@ export default defineComponent({
     buffer: { type: Number, default: 100 },
     rounded: { type: Boolean, default: true },
     reverse: { type: Boolean, default: false },
+    slotInside: { type: Boolean, default: false },
   },
 
   setup (props) {
     const { getColor } = useColors()
 
-    const isLarge = computed(() => props.size === 'large')
     const isTextSize = computed(() => typeof props.size === 'string' && ['small', 'medium', 'large'].includes(props.size))
 
     const getCSSHeight = () => {
@@ -63,31 +69,30 @@ export default defineComponent({
     }
 
     return {
-      isLarge,
-
       rootClass: computed(() => ({
         'va-progress-bar--square': !props.rounded,
         [`va-progress-bar--${props.size}`]: isTextSize.value,
       })),
 
+      rooStyle: computed(() => ({
+        '--va-progress-bar-background-color': getColor(props.color),
+      }) as StyleValue),
+
       wrapperStyle: computed(() => ({
         height: getCSSHeight(),
       })),
 
       bufferStyle: computed(() => ({
         width: `${props.indeterminate ? 100 : clamp(props.buffer, 0, 100)}%`,
-        backgroundColor: getColor(props.color),
         [props.reverse ? 'right' : 'left']: 0,
       })),
 
       progressStyle: computed(() => ({
         width: `${clamp(props.modelValue, 0, 100)}%`,
-        backgroundColor: getColor(props.color),
         marginLeft: props.reverse ? 'auto' : undefined,
       })),
 
       intermediateStyle: computed(() => ({
-        backgroundColor: getColor(props.color),
         animationDirection: props.reverse ? 'reverse' : 'normal',
       })),
 
@@ -150,8 +155,13 @@ export default defineComponent({
     top: var(--va-progress-bar-buffer-top);
     height: inherit;
     border-radius: inherit;
-    opacity: var(--va-progress-bar-buffer-opacity);
     transition: var(--va-progress-bar-buffer-transition);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: var(--va-progress-bar-info-font-weight);
+
+    @include va-background(var(--va-progress-bar-background-color), var(--va-progress-bar-buffer-opacity));
   }
 
   &__progress {
@@ -160,18 +170,21 @@ export default defineComponent({
     transition: var(--va-progress-bar-transition);
     text-align: var(--va-progress-bar-text-align);
     color: var(--va-progress-bar-color);
+    background-color: var(--va-progress-bar-background-color);
     letter-spacing: var(--va-progress-bar-letter-spacing);
     line-height: var(--va-progress-bar-line-height);
     font-size: var(--va-progress-bar-font-size);
     font-weight: var(--va-progress-bar-font-weight);
 
     &--indeterminate-start {
+      background-color: var(--va-progress-bar-background-color);
       animation: va-progress-bar-indeterminate-start 2s ease-in infinite;
       position: absolute;
       height: inherit;
     }
 
     &--indeterminate-end {
+      background-color: var(--va-progress-bar-background-color);
       animation: va-progress-bar-indeterminate-end 2s ease-out 1s infinite;
       position: absolute;
       height: inherit;

packages/ui/src/components/va-progress-bar/_variables.scss

@@ -3,6 +3,7 @@
   --va-progress-bar-position: relative;
   --va-progress-bar-overflow: hidden;
   --va-progress-bar-height: 0.5rem;
+  --va-progress-bar-background-color: var(--va-primary);
 
   /* Small */
   --va-progress-bar-sm-height: 2px;
@@ -14,7 +15,7 @@
   --va-progress-bar-info-font-weight: 700;
   --va-progress-bar-info-text-align: center;
   --va-progress-bar-info-text-transform: uppercase;
-  --va-progress-bar-info-not-empty-margin-bottom: 0.25rem;
+  --va-progress-bar-info-not-empty-margin-bottom: 0.1rem;
 
   /* Wrapper */
   --va-progress-bar--wrapper-position: relative;