65 lines
1.5 KiB
Vue
65 lines
1.5 KiB
Vue
<script setup>
|
|
import { computed } from 'vue'
|
|
|
|
const props = defineProps({
|
|
variant: {
|
|
type: String,
|
|
default: 'contained',
|
|
validator: v => ['contained', 'gradient'].includes(v),
|
|
},
|
|
color: {
|
|
type: String,
|
|
default: 'primary',
|
|
validator: v => ['primary','secondary','info','success','warning','danger','error','light','dark'].includes(v),
|
|
},
|
|
value: {
|
|
type: Number,
|
|
required: true,
|
|
},
|
|
})
|
|
|
|
const contained = {
|
|
primary: 'bg-primary',
|
|
secondary: 'bg-secondary',
|
|
info: 'bg-info',
|
|
success: 'bg-success',
|
|
warning: 'bg-warning',
|
|
danger: 'bg-danger',
|
|
error: 'bg-danger',
|
|
light: 'bg-light',
|
|
dark: 'bg-dark',
|
|
}
|
|
|
|
const grad = {
|
|
primary: 'bg-gradient-primary',
|
|
secondary: 'bg-gradient-secondary',
|
|
info: 'bg-gradient-info',
|
|
success: 'bg-gradient-success',
|
|
warning: 'bg-gradient-warning',
|
|
danger: 'bg-gradient-danger',
|
|
error: 'bg-gradient-danger',
|
|
light: 'bg-gradient-light',
|
|
dark: 'bg-gradient-dark',
|
|
}
|
|
|
|
const barClass = computed(() =>
|
|
(props.variant === 'gradient' ? grad : contained)[props.color] ?? contained.primary
|
|
)
|
|
|
|
const pct = computed(() => Math.min(100, Math.max(0, props.value)))
|
|
</script>
|
|
|
|
<template>
|
|
<div class="w-full overflow-hidden rounded-full bg-gray-200" style="height: 6px">
|
|
<div
|
|
:class="barClass"
|
|
class="h-full rounded-full transition-all duration-500"
|
|
role="progressbar"
|
|
:style="{ width: `${pct}%` }"
|
|
:aria-valuenow="pct"
|
|
aria-valuemin="0"
|
|
aria-valuemax="100"
|
|
/>
|
|
</div>
|
|
</template>
|