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,67 @@
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  size: {
+    type: String,
+    default: 'md',
+    validator: v => ['sm', 'md', 'lg'].includes(v),
+  },
+  color: {
+    type: String,
+    default: 'success',
+    validator: v => ['primary','secondary','info','success','warning','error','danger','light','dark','white'].includes(v),
+  },
+  variant: {
+    type: String,
+    default: 'fill',
+    validator: v => ['fill', 'gradient'].includes(v),
+  },
+  rounded: { type: Boolean, default: false },
+})
+
+const fill = {
+  primary:   'bg-primary text-white',
+  secondary: 'bg-secondary text-white',
+  info:      'bg-info text-white',
+  success:   'bg-success text-white',
+  warning:   'bg-warning text-white',
+  danger:    'bg-danger text-white',
+  error:     'bg-danger text-white',
+  light:     'bg-light text-dark',
+  dark:      'bg-dark text-white',
+  white:     'bg-white text-dark shadow-soft-xs',
+}
+
+const grad = {
+  primary:   'bg-gradient-primary shadow-primary text-white',
+  secondary: 'bg-gradient-secondary shadow-secondary text-white',
+  info:      'bg-gradient-info shadow-info text-white',
+  success:   'bg-gradient-success shadow-success text-white',
+  warning:   'bg-gradient-warning shadow-warning text-white',
+  danger:    'bg-gradient-danger shadow-danger text-white',
+  error:     'bg-gradient-danger shadow-danger text-white',
+  light:     'bg-gradient-light shadow-soft-xs text-dark',
+  dark:      'bg-gradient-dark shadow-dark text-white',
+  white:     'bg-white shadow-soft-xs text-dark',
+}
+
+const sizes = {
+  sm: 'px-2 py-0.5 text-xs',
+  md: 'px-2.5 py-1 text-xs',
+  lg: 'px-3 py-1.5 text-sm',
+}
+
+const classes = computed(() => [
+  'inline-flex items-center font-medium',
+  props.rounded ? 'rounded-full' : 'rounded-md',
+  sizes[props.size],
+  (props.variant === 'gradient' ? grad : fill)[props.color] ?? fill.success,
+])
+</script>
+
+<template>
+  <span :class="classes">
+    <slot />
+  </span>
+</template>