feat(Progress): new component

[DarkGhostHunter]

What?

Resolves #691

This is a new component that uses <progress> behind the scenes, with specific pseudo-element fixes for Gecko/Quantum (Firefox) and Webkit/Blink (Chromium, Safari).

Some additional features:

• Prop parity with <progress> (value, max)
• Progress (percent) indicator can be enabled with indicator and is shown on top.
• The max accepts an array of string to use as label below the progress bar.
• Detects intermediate when value is not issued or is null, showing an animated bar.
• Supports color styling and sizing.
• Slot for the indicator
• Slots for each step

The docs can be better regarding minimum and maximum values for props, or setting the type when there is more than one (like in the case of max, which is [Number, Array].

Also, the ComponentCard should allow to override the <script>, <template>, or both.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
ui	✅ Ready (Inspect)	Visit Preview	Oct 27, 2023 10:57am

[benjamincanac]

Is this a duplicate of #696? Your branch is not up-to-date with dev.

[DarkGhostHunter]

Oh, I see. Gonna fix that.

It's not a duplicate. This uses <progress> and has some new features on top (like steps). I think the team will have to decide on which one to pass, if any.

[Levy-from-Odessa]

Oh, I see. Gonna fix that.

It's not a duplicate. This uses <progress> and has some new features on top (like steps). I think the team will have to decide on which one to pass, if any.

I think your one is quite good. Just add from my MR:
animations,
indicator position,
make it possible to use a slot instead of an indicator,
loading mode (where no value is passed),
and MB min prop...

@DarkGhostHunter , what do you think?

[DarkGhostHunter]

Animations

That can be fixed by adding a lost for the bar and let the dev create it's own animation. The problem is that in WebKit/Blink uses before, while Gecko uses --moz-progess-bar. I'll give it a shot to enable that.

Indicator position

That can be fixed with just passing the slot with the current percent.

<template #indicator="{ percent }" />

Indicator slot

As the above.

Loading mode

It's called indeterminate mode from the tag point of view. When it's indeterminate, it shows the bar animation.

Min prop

The <progress> tag has hardcoded 0 as minimum value. It's left to the developer how to adjust its value. May be i give it a shot on a next version.

[DarkGhostHunter]

@benjamincanac Waiting for approval.

[DarkGhostHunter]

Seems the animation broke on iOS. I'll make some changes.

[DarkGhostHunter]

Animations are fixed on Chromium, Firefox and Safari.

That's it for me. Looking up to see it live.

[eduayme]

Any possibility to add support for inside ranges? Something like min and max?
I would love to be able to use this for price ranges value like this:

[DarkGhostHunter]

Any possibility to add support for inside ranges? Something like min and max? I would love to be able to use this for price ranges value like this:

Semantically, that's a job for <meter>, not <progress>.

You gave me an idea for a new component. I hate you.

[benjamincanac]

Does this resolves #691?

[DarkGhostHunter]

Does this resolves #691?

Yes, check the deployment->edge->meter->indeterminate.

[benjamincanac]

Will review asap.

[DarkGhostHunter]

Will review asap.

While you're active, check why the hell the dev branch nuxi dev docs gives errors on LandingCard.vue (related to something left from Nuxt Pro UI).

[DarkGhostHunter]

@benjamincanac Ready for review.

[MuhammadM1998]

The percent is not calculated correctly & the indicator overflows if value > max

Replacing this line with following should work I think

ui/src/runtime/components/elements/Progress.vue

Line 195 in 6439539

const percent = computed(() => (Math.max(0, Math.max(props.value, realMax.value)) * 100) / realMax.value)

const percent = computed(() => {
// Always return 0 for negative values
if (props.value < 0)
  return 0
// Always return 100 for values larger than max
else if (props.value > realMax.value)
  return 100
// Otherwise return value/max percentage
else
  return (props.value / realMax.value) * 100
})

Thanks a lot for your work I hope this and meter get merged soon 🙏

[DarkGhostHunter]

@MuhammadM1998 Thanks. Got a brain fart

[benjamincanac]

@DarkGhostHunter Thanks a lot for this awesome component! I've made a few changes if you want to take a look before I merge it 😊

[DarkGhostHunter]

Just saw the edits on the sizing. I think it's better.

The only thing I was wondering if the UI tree is too convoluted. I tried my best by using the native tag, but a wrapper was required to make it work, plus a bunch of other properties.

[benjamincanac]

You mean the DOM?

[DarkGhostHunter]

You mean the DOM?

No, the UI object where the classes are. Tried to slim it down to no avail