Are there details on how to implement the examples?

[ForceConstant]

I see the gif with the 9 examples, and it would be helpful if I could see how each one was implemented. Specifically how was the last one with the "Reviews" implemented?

[setaman]

Hey, thanks for your feedback! Usage examples are definitely on the roadmap. In the meantime, I asked ChatGPT to generate an example similar to the one you mentioned:

<template>
  <div class="review-progress">
    <ve-progress
      :progress="progress"
      :size="150"
      :thickness="5"
      :color="color"
      :emptyColor="'#e0e0e0'"
    >
      <div class="review-content">
        <div class="review-score">{{ rating }} / 5</div>
        <div class="review-count">{{ totalReviews }} REVIEWS</div>
        <div class="review-stars">
          <span
            v-for="n in 5"
            :key="n"
            class="star"
            :class="{ filled: n <= rating }"
            >★</span
          >
        </div>
      </div>
    </ve-progress>
    <button @click="randomizeRating">Randomize Rating</button>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";

const rating = ref(3); // Initial rating
const totalReviews = ref(24); // Total number of reviews
const color = ref("#2196F3"); // Progress color

// Compute progress dynamically based on rating
const progress = computed(() => (rating.value / 5) * 100);

// Function to randomize rating
const randomizeRating = () => {
  rating.value = Math.floor(Math.random() * 5) + 1; // Random rating between 1 and 5
};
</script>

<style scoped>
.review-progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.review-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: Arial, sans-serif;
}

.review-score {
  font-size: 1.2em;
  font-weight: bold;
}

.review-count {
  font-size: 0.8em;
  color: gray;
}

.review-stars {
  display: flex;
  gap: 2px;
}

.star {
  font-size: 14px;
  color: lightgray;
}

.star.filled {
  color: gold;
}

button {
  padding: 8px 12px;
  border: none;
  background-color: #2196f3;
  color: white;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

button:hover {
  background-color: #1976d2;
}
</style>

Here is the corresponding CodeSandbox.

You can also find the examples from the GIF in this legacy demo. Note that this demo only supports plugin v1 and is not compatible with Vue 3.

To build a similar example, you will need the following:

• progress
• legend
• default slot

Let me know if you need further clarification!