adding components

2026-06-01 17:09:26 -06:00
parent 79a8720fb0
commit 0b1ab9261e
12 changed files with 681 additions and 0 deletions
@@ -0,0 +1,64 @@
+<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>