Progress Group

<script setup lang="ts">
import { ProgressGroup, type ProgressSegment } from "@bysages/vue";

const segments: ProgressSegment[] = [
  { value: 60, pigment: "success" },
  { value: 30, pigment: "warning" },
  { value: 10, pigment: "danger" },
];
</script>

<template>
  <div class="grid gap-3 w-full">
    <ProgressGroup :segments="segments" :show-legend="false" />
    <span class="text-sm text-tertiary"> Six in ten entries pass the first reading. </span>
  </div>
</template>

<script setup lang="ts">
import { ProgressGroup, type ProgressSegment } from "@bysages/vue";

const segments: ProgressSegment[] = [
  { value: 42, label: "Shelved", pigment: "primary" },
  { value: 28, label: "Catalogued", pigment: "info" },
  { value: 18, label: "Awaiting seal", pigment: "warning" },
  { value: 12, label: "Deferred", pigment: "danger" },
];
</script>

<template>
  <ProgressGroup :segments="segments" class="w-full" />
</template>

<script setup lang="ts">
import { ProgressGroup, type ProgressSegment } from "@bysages/vue";

const segments: ProgressSegment[] = [
  { value: 64, label: "Bound", pigment: "success" },
  { value: 48, label: "In press", pigment: "info" },
];
</script>

<template>
  <!-- A larger whole leaves the remainder as groove. -->
  <ProgressGroup :segments="segments" :max="200" class="w-full" />
</template>