feat: add Breadcrumb, Progress & Pagination components

src/components/breadcrumbs/Breadcrumb01.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator
+} from '@/components/ui/Breadcrumb'
+</script>
+
+<template>
+  <Breadcrumb>
+    <BreadcrumbList>
+      <BreadcrumbItem>
+        <BreadcrumbLink href="#">Home</BreadcrumbLink>
+      </BreadcrumbItem>
+      <BreadcrumbSeparator />
+      <BreadcrumbItem>
+        <BreadcrumbLink href="#">Components</BreadcrumbLink>
+      </BreadcrumbItem>
+      <BreadcrumbSeparator />
+      <BreadcrumbItem>
+        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+      </BreadcrumbItem>
+    </BreadcrumbList>
+  </Breadcrumb>
+</template>

src/components/breadcrumbs/Breadcrumb02.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator
+} from '@/components/ui/Breadcrumb'
+import { House } from 'lucide-vue-next'
+</script>
+
+<template>
+  <Breadcrumb>
+    <BreadcrumbList>
+      <BreadcrumbItem>
+        <BreadcrumbLink href="#" aria-label="Home">
+          <House :size="16" aria-hidden="true" />
+        </BreadcrumbLink>
+      </BreadcrumbItem>
+      <BreadcrumbSeparator />
+      <BreadcrumbItem>
+        <BreadcrumbLink href="#">Settings</BreadcrumbLink>
+      </BreadcrumbItem>
+      <BreadcrumbSeparator />
+      <BreadcrumbItem>
+        <BreadcrumbPage>Notifications</BreadcrumbPage>
+      </BreadcrumbItem>
+    </BreadcrumbList>
+  </Breadcrumb>
+</template>

src/components/breadcrumbs/Breadcrumb03.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator
+} from '@/components/ui/Breadcrumb'
+</script>
+
+<template>
+  <Breadcrumb>
+    <BreadcrumbList>
+      <BreadcrumbItem>
+        <BreadcrumbLink href="#">Home</BreadcrumbLink>
+      </BreadcrumbItem>
+      <BreadcrumbSeparator />
+      <BreadcrumbItem>
+        <BreadcrumbEllipsis />
+      </BreadcrumbItem>
+      <BreadcrumbSeparator />
+      <BreadcrumbItem>
+        <BreadcrumbLink href="#">Components</BreadcrumbLink>
+      </BreadcrumbItem>
+      <BreadcrumbSeparator />
+      <BreadcrumbItem>
+        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+      </BreadcrumbItem>
+    </BreadcrumbList>
+  </Breadcrumb>
+</template>

src/components/pagination/Pagination01.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import Button from '@/components/ui/Button.vue'
+import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
+import { ref } from 'vue'
+
+const pages = [1, 2, 3, 4, 5]
+const current = ref(1)
+</script>
+
+<template>
+  <nav aria-label="Pagination" class="flex items-center gap-1">
+    <Button
+      variant="outline"
+      size="icon"
+      aria-label="Previous page"
+      :disabled="current === 1"
+      @click="current = Math.max(1, current - 1)"
+    >
+      <ChevronLeft />
+    </Button>
+    <Button
+      v-for="page in pages"
+      :key="page"
+      :variant="page === current ? 'default' : 'outline'"
+      size="icon"
+      :aria-current="page === current ? 'page' : undefined"
+      @click="current = page"
+    >
+      {{ page }}
+    </Button>
+    <Button
+      variant="outline"
+      size="icon"
+      aria-label="Next page"
+      :disabled="current === pages.length"
+      @click="current = Math.min(pages.length, current + 1)"
+    >
+      <ChevronRight />
+    </Button>
+  </nav>
+</template>

src/components/pagination/Pagination02.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import Button from '@/components/ui/Button.vue'
+import { ArrowLeft, ArrowRight } from 'lucide-vue-next'
+import { computed, ref } from 'vue'
+
+const totalPages = 10
+const current = ref(3)
+const label = computed(() => `Page ${current.value} of ${totalPages}`)
+</script>
+
+<template>
+  <nav aria-label="Pagination" class="flex items-center gap-3">
+    <Button
+      variant="outline"
+      size="sm"
+      :disabled="current === 1"
+      @click="current = Math.max(1, current - 1)"
+    >
+      <ArrowLeft />
+      Previous
+    </Button>
+    <span class="text-sm text-muted-foreground" aria-live="polite">{{ label }}</span>
+    <Button
+      variant="outline"
+      size="sm"
+      :disabled="current === totalPages"
+      @click="current = Math.min(totalPages, current + 1)"
+    >
+      Next
+      <ArrowRight />
+    </Button>
+  </nav>
+</template>

src/components/progress/Progress01.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import Progress from '@/components/ui/Progress.vue'
+</script>
+
+<template>
+  <div class="w-full max-w-xs">
+    <Progress :model-value="60" />
+  </div>
+</template>

src/components/progress/Progress02.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import Progress from '@/components/ui/Progress.vue'
+import { onMounted, onUnmounted, ref } from 'vue'
+
+const value = ref(0)
+let timer: ReturnType<typeof setInterval> | undefined
+
+onMounted(() => {
+  timer = setInterval(() => {
+    value.value = value.value >= 100 ? 0 : value.value + 10
+  }, 800)
+})
+
+onUnmounted(() => clearInterval(timer))
+</script>
+
+<template>
+  <div class="w-full max-w-xs space-y-2">
+    <Progress :model-value="value" />
+    <p class="text-right text-xs text-muted-foreground">{{ value }}%</p>
+  </div>
+</template>

src/components/ui/Breadcrumb/Breadcrumb.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <nav aria-label="breadcrumb" :class="cn(props.class)">
+    <slot />
+  </nav>
+</template>

src/components/ui/Breadcrumb/BreadcrumbEllipsis.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { MoreHorizontal } from 'lucide-vue-next'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <span
+    role="presentation"
+    aria-hidden="true"
+    :class="cn('flex size-5 items-center justify-center', props.class)"
+  >
+    <MoreHorizontal class="size-4" />
+    <span class="sr-only">More</span>
+  </span>
+</template>

src/components/ui/Breadcrumb/BreadcrumbItem.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <li :class="cn('inline-flex items-center gap-1.5', props.class)">
+    <slot />
+  </li>
+</template>

src/components/ui/Breadcrumb/BreadcrumbLink.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { Primitive } from 'reka-ui'
+
+const props = withDefaults(
+  defineProps<{ class?: string; as?: string; asChild?: boolean; href?: string }>(),
+  { as: 'a' }
+)
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    :href="href"
+    :class="cn('transition-colors hover:text-foreground', props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>

src/components/ui/Breadcrumb/BreadcrumbList.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <ol
+    :class="
+      cn(
+        'flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </ol>
+</template>

src/components/ui/Breadcrumb/BreadcrumbPage.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <span
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    :class="cn('font-normal text-foreground', props.class)"
+  >
+    <slot />
+  </span>
+</template>

src/components/ui/Breadcrumb/BreadcrumbSeparator.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { ChevronRight } from 'lucide-vue-next'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <li
+    role="presentation"
+    aria-hidden="true"
+    :class="cn('[&>svg]:size-3.5', props.class)"
+  >
+    <slot>
+      <ChevronRight />
+    </slot>
+  </li>
+</template>

src/components/ui/Breadcrumb/index.ts

@@ -0,0 +1,7 @@
+export { default as Breadcrumb } from './Breadcrumb.vue'
+export { default as BreadcrumbList } from './BreadcrumbList.vue'
+export { default as BreadcrumbItem } from './BreadcrumbItem.vue'
+export { default as BreadcrumbLink } from './BreadcrumbLink.vue'
+export { default as BreadcrumbPage } from './BreadcrumbPage.vue'
+export { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue'
+export { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue'

src/components/ui/Progress.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { ProgressRoot, ProgressIndicator } from 'reka-ui'
+
+const props = withDefaults(
+  defineProps<{ modelValue?: number | null; class?: string }>(),
+  { modelValue: 0 }
+)
+</script>
+
+<template>
+  <ProgressRoot
+    :model-value="props.modelValue"
+    :class="cn('relative h-2 w-full overflow-hidden rounded-full bg-primary/20', props.class)"
+  >
+    <ProgressIndicator
+      class="size-full flex-1 bg-primary transition-transform duration-500 ease-out"
+      :style="`transform: translateX(-${100 - (props.modelValue ?? 0)}%)`"
+    />
+  </ProgressRoot>
+</template>

src/router/index.ts

@@ -80,6 +80,24 @@ const router = createRouter({
       name: 'tabs',
       component: () => import('@/views/Tabs.vue'),
       meta: { title: 'coss-ui-vue/tabs' }
+    },
+    {
+      path: '/breadcrumbs',
+      name: 'breadcrumbs',
+      component: () => import('@/views/Breadcrumbs.vue'),
+      meta: { title: 'coss-ui-vue/breadcrumbs' }
+    },
+    {
+      path: '/progress',
+      name: 'progress',
+      component: () => import('@/views/Progress.vue'),
+      meta: { title: 'coss-ui-vue/progress' }
+    },
+    {
+      path: '/pagination',
+      name: 'pagination',
+      component: () => import('@/views/Pagination.vue'),
+      meta: { title: 'coss-ui-vue/pagination' }
     }
   ]
 })