BFormRating

[jonkri]

Clear and concise description of the problem

I'm working on migrating a project from BootstrapVue to BootstrapVueNext. One component that I'm missing is BFormRating available in BootstrapVue.

Suggested solution

A component corresponding to https://bootstrap-vue.org/docs/components/form-rating.

Alternative

No response

Additional context

No response

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guide.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[VividLemon]

You're going to need to make a PR if you want it added

[jonkri]

Thanks for your reply, @VividLemon!

Unfortunately, I don't have time to make a PR. However, I made a quick and dirty hack to approximate the simple use case I had. I'll post it here in case it helps anyone:

<output
  class="form-control"
  style="
    border: solid var(--bs-border-width) var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: 0.5rem;
    width: max-content;
  "
>
  <component
    class="star"
    @click="rating = index"
    :is="rating >= index ? IconStarFill : IconStar"
    :key="index"
    v-for="index in 5"
  />
</output>

.star {
  font-size: 0.9em;
  margin: 0 0.35em 0.25em;
  transition: all 0.15s ease-in-out;
}

.star:hover {
  transform: scale(1.5);
}

Note that it's not matching BootstrapVue's style exactly.

[anrolmar]

Thanks @jonkri. I'll start to develop the component next week. So, all the help you could give me it'd be nice

[jonkri]

Thanks @jonkri. I'll start to develop the component next week. So, all the help you could give me it'd be nice

Sorry, @anrolmar, but unfortunately I don't have any more time to put into this. I'm using my hack above and while it may not be elegant it does the trick for my use case. Good luck with the component!