| 1 | <script setup lang="ts"> |
| 2 | import type { ClicksContext } from '@slidev/types' |
| 3 | import { computed } from 'vue' |
| 4 | import { useNav } from '../composables/useNav' |
| 5 | |
| 6 | const props = defineProps<{ |
| 7 | clicksContext?: ClicksContext |
| 8 | current?: number |
| 9 | }>() |
| 10 | |
| 11 | const nav = useNav() |
| 12 | const clicksContext = computed(() => props.clicksContext ?? nav.clicksContext.value) |
| 13 | const current = computed(() => props.current ?? nav.currentSlideNo.value) |
| 14 | const { total } = nav |
| 15 | </script> |
| 16 | |
| 17 | <template> |
| 18 | <div class="relative flex gap-px"> |
| 19 | <div |
| 20 | v-for="i of total - 1" |
| 21 | :key="i" class="border-x border-b border-main h-4px transition-all" |
| 22 | :style="{ width: `${(1 / (total - 1) * 100)}%` }" |
| 23 | :class="i < current ? 'bg-primary border-primary' : ''" |
| 24 | > |
| 25 | <Transition name="fade"> |
| 26 | <div |
| 27 | v-if="i === current" |
| 28 | class="h-full bg-primary op75 transition-all" |
| 29 | :style="{ width: `${clicksContext.total === 0 ? 0 : clicksContext.current / (clicksContext.total + 1) * 100}%` }" |
| 30 | /> |
| 31 | </Transition> |
| 32 | </div> |
| 33 | </div> |
| 34 | </template> |
| 35 |