Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

fix(VProgressLinear): render in forced-colors mode #20112

Merged
merged 1 commit into from
Jul 9, 2024

Conversation

06b
Copy link
Contributor

@06b 06b commented Jul 5, 2024

Description

fixes #20111

image

Markup:

<template>
  <v-app>
    <v-container>
      <v-row dense>
        <v-col>
          <h1 class="text-subtitle-1">Native Progress Indicator Element</h1>
          <progress id="file" max="100" value="70" />
          <br>
          <progress id="progress-bar" aria-label="Content loading…" />
        </v-col>

        <v-col>
          <h1 class="text-subtitle-1">Vuetify Progress Indicator</h1>
          <v-progress-linear color="orange" model-value="20" />
          <br>
          <v-progress-linear color="green" indeterminate />
          <br>
          <v-progress-linear model-value="20" rounded />
          <br>
          <v-progress-linear indeterminate rounded />
          <br>
          <v-progress-linear
            v-model="value"
            :buffer-value="bufferValue"
            color="deep-orange"
          />
          <br>
          <v-progress-linear
            buffer-value="60"
            color="red-lighten-2"
            model-value="40"
            stream
          />
        </v-col>

      </v-row>
    </v-container>
  </v-app>
</template>

<script>
  export default {
    name: 'Playground',
    setup () {
      return {
        //
      }
    },
    data () {
      return {
        value: 10,
        bufferValue: 20,
        interval: 0,
      }
    },

    watch: {
      value (val) {
        if (val < 100) return

        this.value = 0
        this.bufferValue = 10
        this.startBuffer()
      },
    },

    mounted () {
      this.startBuffer()
    },

    beforeUnmount () {
      clearInterval(this.interval)
    },

    methods: {
      startBuffer () {
        clearInterval(this.interval)

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

@johnleider johnleider changed the title fix(VProgressLinear) render in forced-colors mode fix(VProgressLinear): render in forced-colors mode Jul 9, 2024
@johnleider johnleider added T: bug Functionality that does not work as intended/expected C: VProgressLinear VProgressLinear labels Jul 9, 2024
@johnleider johnleider added this to the v3.6.x milestone Jul 9, 2024
@johnleider johnleider merged commit 601d364 into vuetifyjs:master Jul 9, 2024
9 of 10 checks passed
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
C: VProgressLinear VProgressLinear T: bug Functionality that does not work as intended/expected
Projects
None yet
2 participants