ff52d502b8
Full Vue 3 + Vite + TypeScript + Tailwind SPA replacing the vanilla JS static frontend. Includes router, Pinia stores (auth/tasks/calendar/devops), axios API client with all endpoints, UI components (Button/Card/Dialog/Badge/Input/etc), calendar grid with lane-packing algorithm and DnD support, SSE live feed, and all 11 views. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
30 lines
795 B
Vue
30 lines
795 B
Vue
<script setup lang="ts">
|
|
import { cn } from '@/lib/utils'
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
value: number
|
|
max?: number
|
|
class?: string
|
|
color?: 'default' | 'success' | 'warning' | 'danger'
|
|
}>(),
|
|
{ max: 100, color: 'default' }
|
|
)
|
|
|
|
const pct = () => Math.min(100, Math.max(0, (props.value / props.max) * 100))
|
|
</script>
|
|
|
|
<template>
|
|
<div :class="cn('relative h-2 w-full overflow-hidden rounded-full bg-secondary', props.class)">
|
|
<div
|
|
class="h-full rounded-full transition-all duration-300"
|
|
:class="{
|
|
'bg-primary': color === 'default',
|
|
'bg-emerald-500': color === 'success',
|
|
'bg-amber-500': color === 'warning',
|
|
'bg-red-500': color === 'danger',
|
|
}"
|
|
:style="{ width: `${pct()}%` }"
|
|
/>
|
|
</div>
|
|
</template>
|