advent22/ui/src/components/bulma/Breadcrumbs.vue

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <nav class="breadcrumb has-succeeds-separator">
    <ul>
      <li
        v-for="(step, index) in steps"
        :key="index"
        :class="modelValue === index ? 'is-active' : ''"
        @click.left="change_step(index)"
      >
        <a>
          <span class="icon is-small">
            <FontAwesomeIcon :icon="step.icon" />
          </span>
          <span>{{ step.label }}</span>
        </a>
      </li>
    </ul>
  </nav>
</template>

<script setup lang="ts">
import { Step } from "@/lib/helpers";

const props = defineProps<{
  steps: Step[];
  modelValue: number;
}>();

const emit = defineEmits<{
  (event: "update:modelValue", value: number): void;
}>();

function change_step(next_step: number) {
  if (next_step === props.modelValue) return;

  emit("update:modelValue", next_step);
}
</script>