Skip to content

feat(VProgress): create new component#22682

Merged
J-Sek merged 13 commits intomasterfrom
haviles04/v-progress
Mar 16, 2026
Merged

feat(VProgress): create new component#22682
J-Sek merged 13 commits intomasterfrom
haviles04/v-progress

Conversation

@Haviles04
Copy link
Copy Markdown
Contributor

@Haviles04 Haviles04 commented Mar 5, 2026 •
edited by J-Sek
Loading

Fixes #22256

<template>
  <v-app theme="dark">
    <v-container max-width="800">
      <v-progress
        buffer-value="70"
        class="my-10"
        details-position="bottom"
        label="Bottom Label"
        model-value="60"
        stream
      />

      <v-progress
        buffer-value="70"
        class="my-10"
        details-position="top"
        label="Top Label"
        model-value="60"
        stream
      />

      <v-progress
        class="my-10"
        details-position="bottom"
        label="Bottom Label"
        model-value="60"
        type="circular"
      />

      <v-progress
        class="my-10"
        details-position="top"
        label="Top Label"
        model-value="60"
        type="circular"
      />

      <v-progress
        buffer-value="70"
        class="my-10"
        details-position="top"
        label="Top Label"
        model-value="60"
        type="circular"
        hide-value
      />

      <v-progress
        buffer-value="70"
        class="my-10"
        details-position="bottom"
        label="Bottom Label"
        model-value="60"
        type="circular"
        hide-label
      />
    </v-container>
  </v-app>
</template>

@Haviles04 Haviles04 changed the title Feat: V-Progress Component feat: V-Progress Component Mar 5, 2026
@Haviles04 Haviles04 requested a review from J-Sek March 5, 2026 00:17
@Haviles04
Copy link
Copy Markdown
Contributor Author

Haviles04 commented Mar 5, 2026

@J-Sek Let me know your thoughts and I can write up some test and doc files

@J-Sek
Copy link
Copy Markdown
Contributor

J-Sek commented Mar 5, 2026 •
edited
Loading

Good foundation.

  • move to ./labs folder
  • add to nav.json
  • add to page-to-api.json
  • add VProgress.json with API descriptions
  • add valueFormat prop (similar to titleFormat in VPieTooltip.tsx and getting us what valueLabel do in react-aria)
  • add aria-* attributes (align with react-aria)
  • docs page, usage.vue and 2-3 examples
  • maybe useDimension? if requested by the community

@J-Sek
Copy link
Copy Markdown
Contributor

J-Sek commented Mar 5, 2026 •
edited
Loading

If you asked about mixing makeVProgressLinearProps and makeVProgressCircularProps... it does not feel right. TS will suggest props that make no sense.

I think we need to try something different - e.g limit to just a subset of common props:

  • modelValue
  • indeterminate
  • color
  • bgColor
  • rounded
  • theme

... and add slot default (with props full of aria attributes) for the user to customize it further if needed. Ofc it would also be possible to use global defaults to pass props within, so it is not like we force people to use this slot.

@J-Sek J-Sek added the C: New Component This issue would need a new component to be developed. label Mar 8, 2026
J-Sek
J-Sek reviewed Mar 8, 2026
View reviewed changes
@J-Sek J-Sek force-pushed the haviles04/v-progress branch from 743c0e1 to df8455b Compare March 8, 2026 19:19
@J-Sek J-Sek requested a review from a team March 8, 2026 19:24
@J-Sek J-Sek changed the title feat: V-Progress Component feat(VProgress): create new component Mar 8, 2026
@J-Sek J-Sek merged commit 122cdeb into master Mar 16, 2026
16 checks passed
@J-Sek J-Sek deleted the haviles04/v-progress branch March 16, 2026 18:44
@coderabbitai coderabbitai bot mentioned this pull request Apr 11, 2026
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@J-Sek J-Sek J-Sek approved these changes

Assignees

@Haviles04 Haviles04

Labels

C: New Component This issue would need a new component to be developed.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[Feature Request] VProgressLinear - slots for label and value

2 participants

@Haviles04 @J-Sek