jennie/app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: update application configuration and UI components for improved styling and functionality

Browse source
This commit is contained in:
Jennie Robinson Faber 2025-08-16 08:13:35 +01:00
parent 0af6b17792
commit 37ab8d7bab
54 changed files with 23293 additions and 1666 deletions
Download patch file Download diff file Expand all files Collapse all files

105
components/RunwayMeter.vue
View file

@ -4,28 +4,23 @@
<div class="text-3xl font-bold" :class="textColorClass">
{{ formattedValue }}
</div>
<div class="text-sm text-gray-600">{{ label }}</div>
<UProgress
:value="progressValue"
:max="maxValue"
:color="progressColor"
class="mt-2"
:ui="{ progress: { background: 'bg-gray-200' } }"
<div class="text-sm text-neutral-600">{{ label }}</div>
<UProgress
:value="progressValue"
:max="maxValue"
:color="progressColor"
class="mt-2"
:ui="{ progress: { background: 'bg-neutral-200' } }"
:aria-label="`Runway progress: ${formattedValue} out of ${maxValue} months maximum`"
role="progressbar"
:aria-valuenow="progressValue"
:aria-valuemin="0"
:aria-valuemax="maxValue"
:aria-valuetext="`${formattedValue} runway, ${statusText.toLowerCase()} status`"
/>
<UBadge
:color="badgeColor"
variant="subtle"
class="text-xs"
>
:aria-valuetext="`${formattedValue} runway, ${statusText.toLowerCase()} status`" />
<UBadge :color="badgeColor" variant="subtle" class="text-xs">
{{ statusText }}
</UBadge>
<p v-if="description" class="text-xs text-gray-500 mt-2">
<p v-if="description" class="text-xs text-neutral-500 mt-2">
{{ description }}
</p>
</div>
@ -34,58 +29,74 @@
<script setup lang="ts">
interface Props {
months: number
label?: string
description?: string
maxMonths?: number
months: number;
label?: string;
description?: string;
maxMonths?: number;
}
const props = withDefaults(defineProps<Props>(), {
label: 'Runway',
maxMonths: 12
})
label: "Runway",
maxMonths: 12,
});
const { formatRunway, getRunwayStatus } = useRunway()
const { formatRunway, getRunwayStatus } = useRunway();
const formattedValue = computed(() => formatRunway(props.months))
const status = computed(() => getRunwayStatus(props.months))
const formattedValue = computed(() => formatRunway(props.months));
const status = computed(() => getRunwayStatus(props.months));
const progressValue = computed(() => Math.min(props.months, props.maxMonths))
const maxValue = computed(() => props.maxMonths)
const progressValue = computed(() => Math.min(props.months, props.maxMonths));
const maxValue = computed(() => props.maxMonths);
const progressColor = computed(() => {
switch (status.value) {
case 'green': return 'green'
case 'yellow': return 'yellow'
case 'red': return 'red'
default: return 'gray'
case "green":
return "green";
case "yellow":
return "yellow";
case "red":
return "red";
default:
return "gray";
}
})
});
const badgeColor = computed(() => {
switch (status.value) {
case 'green': return 'green'
case 'yellow': return 'yellow'
case 'red': return 'red'
default: return 'gray'
case "green":
return "green";
case "yellow":
return "yellow";
case "red":
return "red";
default:
return "gray";
}
})
});
const textColorClass = computed(() => {
switch (status.value) {
case 'green': return 'text-green-600'
case 'yellow': return 'text-yellow-600'
case 'red': return 'text-red-600'
default: return 'text-gray-600'
case "green":
return "text-green-600";
case "yellow":
return "text-yellow-600";
case "red":
return "text-red-600";
default:
return "text-neutral-600";
}
})
});
const statusText = computed(() => {
switch (status.value) {
case 'green': return 'Healthy'
case 'yellow': return 'Caution'
case 'red': return 'Critical'
default: return 'Unknown'
case "green":
return "Healthy";
case "yellow":
return "Caution";
case "red":
return "Critical";
default:
return "Unknown";
}
})
});
</script>