BreadcrumbsReady

<script setup lang="ts">
const route = useRoute()
const breadcrumbs = ref<BreadcrumbsType>({
  category: 'common.breadcrumbs.label',
  items: [
    {
      // @ts-expect-error - translation string
      label: 'Breadcrumbs 1',
      url: { path: route.path, query: { consultation_id: 1 } },
    },
    {
      // @ts-expect-error - translation string
      label: 'Breadcrumbs 2',
      url: { path: route.path, query: { consultation_id: 2 } },
    },
  ],
})

useBreadcrumbs().mutate(breadcrumbs.value)
</script>

<template>
  <TheBreadcrumbs />
</template>

<script setup lang="ts">
const route = useRoute()
const maxBreadcrumbs = 5
const breadcrumbsCount = ref(2)
const breadcrumbs = ref<BreadcrumbsType>({
  category: 'common.breadcrumbs.label',
  items: [],
})

function updateBreadcrumbsCount(event: Event) {
  breadcrumbsCount.value = Number((event.target as HTMLInputElement).value)
}

watchEffect(() => {
  // reset the breadcrumbs
  breadcrumbs.value.items = []

  for (let step = 0; step < breadcrumbsCount.value; step++) {
    if (breadcrumbsCount.value === 1 || step === breadcrumbsCount.value - 1) {
      /**
       * ! The example below demonstrates how to use interpolation with a translation string
       */
      breadcrumbs.value.items.push({
        // @ts-expect-error - translation string
        label: `Breadcrumbs ${pad(step + 1)}`,
        url: { path: route.path, query: { consultation_id: step } },
      })
    } else {
      breadcrumbs.value.items.push({
        // @ts-expect-error - translation string
        label: `Breadcrumbs ${pad(step + 1)}`,
        url: { path: route.path, query: { consultation_id: pad(step + 1, 9) } },
      })
    }
  }

  useBreadcrumbs().mutate(breadcrumbs.value)
})
</script>

<template>
  <div class="n-stack n-gap-m">
    <TheBreadcrumbs />

    <provet-card padding="l">
      <h2 slot="header">Breadcrumbs component</h2>

      <div class="n-stack n-gap-m">
        <provet-range
          label="Breadcrumbs count"
          :value="breadcrumbsCount.toString()"
          :min="1"
          :max="maxBreadcrumbs"
          @input="updateBreadcrumbsCount"
        />

        <p>See the example below.</p>

        <code
          class="n-border n-color-background n-color-text n-padding-s n-border-radius n-border n-color-status-neutral-weak n-border-radius"
        >
          useBreadcrumbs().mutate({{ breadcrumbs }})
        </code>
      </div>
    </provet-card>
  </div>
</template>

<style scoped>
code {
  white-space: pre-wrap;
}
</style>