feat(VProgressLinear): add separate buffer color and opacity props

[KaelWD]

https://v2.vuetifyjs.com/en/components/progress-linear/#buffer-value

Markup:

<template>
  <div>
    <pre>{{ { value, bufferValue } }}</pre>
    <v-progress-linear
      v-model="value"
    />
    <br>
    <v-progress-linear
      v-model="value"
      stream
    />
    <br>
    <v-progress-linear
      v-model="value"
      :buffer-value="bufferValue"
      stream
      bg-opacity="0"
    />
    <br>
    <v-progress-linear
      v-model="value"
      :buffer-value="bufferValue"
      color="purple"
      buffer-color="primary"
      buffer-opacity="1"
    />
    <br>
    <v-progress-linear
      v-model="value"
      :buffer-value="bufferValue"
      color="red-lighten-2"
    />
    <br>
    <v-progress-linear
      v-model="value"
      :buffer-value="bufferValue"
      color="black"
      bg-opacity="0"
    />
  </div>
</template>

<script setup>
  import { onBeforeUnmount, onMounted, ref, watch } from 'vue'

  const value = ref(10)
  const bufferValue = ref(20)
  const interval = ref(0)

  watch(value, val => {
    if (val < 100) return
    value.value = 0
    bufferValue.value = 10
    startBuffer()
  })

  onMounted(() => {
    startBuffer()
  })
  onBeforeUnmount(() => {
    clearInterval(interval.value)
  })

  function startBuffer () {
    clearInterval(interval.value)
    interval.value = setInterval(() => {
      value.value += Math.random() * (15 - 5) + 5
      bufferValue.value += Math.random() * (15 - 5) + 6
    }, 2000)
  }
</script>