mirror of
https://github.com/unraid/api.git
synced 2026-04-24 00:01:39 -05:00
Zack Spear
115 lines
3.6 KiB
Vue
115 lines
3.6 KiB
Vue
<script setup lang="ts">
|
|
import type { UiBadgeProps } from '~/types/ui/badge';
|
|
|
|
const props = withDefaults(defineProps<UiBadgeProps>(), {
|
|
color: 'gray',
|
|
icon: undefined,
|
|
iconRight: undefined,
|
|
iconStyles: '',
|
|
size: '16px',
|
|
});
|
|
|
|
const computedStyleClasses = computed(() => {
|
|
let colorClasses = '';
|
|
let textSize = '';
|
|
let iconSize = '';
|
|
switch (props.color) {
|
|
case 'alpha':
|
|
colorClasses = 'bg-alpha text-white group-hover:opacity-75 group-focus:opacity-75';
|
|
break;
|
|
case 'beta':
|
|
colorClasses = 'bg-beta text-white group-hover:opacity-75 group-focus:opacity-75';
|
|
break;
|
|
case 'gamma':
|
|
colorClasses = 'bg-gamma text-white group-hover:opacity-75 group-focus:opacity-75';
|
|
break;
|
|
case 'red':
|
|
colorClasses = 'bg-unraid-red text-white group-hover:bg-orange-dark group-focus:bg-orange-dark';
|
|
break;
|
|
case 'yellow':
|
|
colorClasses = 'bg-yellow-100 text-black group-hover:bg-yellow-200 group-focus:bg-yellow-200';
|
|
break;
|
|
case 'green':
|
|
colorClasses = 'bg-green-200 text-green-800 group-hover:bg-green-300 group-focus:bg-green-300';
|
|
break;
|
|
case 'blue':
|
|
colorClasses = 'bg-blue-100 text-blue-800 group-hover:bg-blue-200 group-focus:bg-blue-200';
|
|
break;
|
|
case 'indigo':
|
|
colorClasses = 'bg-indigo-100 text-indigo-800 group-hover:bg-indigo-200 group-focus:bg-indigo-200';
|
|
break;
|
|
case 'purple':
|
|
colorClasses = 'bg-purple-100 text-purple-800 group-hover:bg-purple-200 group-focus:bg-purple-200';
|
|
break;
|
|
case 'pink':
|
|
colorClasses = 'bg-pink-100 text-pink-800 group-hover:bg-pink-200 group-focus:bg-pink-200';
|
|
break;
|
|
case 'orange':
|
|
colorClasses = 'bg-orange text-white group-hover:bg-orange-dark group-focus:bg-orange-dark';
|
|
break;
|
|
case 'black':
|
|
colorClasses = 'bg-black text-white group-hover:bg-gray-800 group-focus:bg-gray-800';
|
|
break;
|
|
case 'white':
|
|
colorClasses = 'bg-white text-black group-hover:bg-gray-100 group-focus:bg-gray-100';
|
|
break;
|
|
case 'transparent':
|
|
colorClasses = 'bg-transparent text-black group-hover:bg-gray-100 group-focus:bg-gray-100';
|
|
break;
|
|
case 'current':
|
|
colorClasses = 'bg-current text-black group-hover:bg-gray-100 group-focus:bg-gray-100';
|
|
break;
|
|
case 'gray':
|
|
colorClasses = 'bg-gray-200 text-gray-800 group-hover:bg-gray-300 group-focus:bg-gray-300';
|
|
break;
|
|
case 'custom':
|
|
colorClasses = '';
|
|
break;
|
|
}
|
|
switch (props.size) {
|
|
case '12px':
|
|
textSize = 'text-12px px-8px py-4px gap-4px';
|
|
iconSize = 'w-12px';
|
|
break;
|
|
case '14px':
|
|
textSize = 'text-14px px-8px py-4px gap-8px';
|
|
iconSize = 'w-14px';
|
|
break;
|
|
case '16px':
|
|
textSize = 'text-16px px-12px py-8px gap-8px';
|
|
iconSize = 'w-16px';
|
|
break;
|
|
case '18px':
|
|
textSize = 'text-18px px-12px py-8px gap-8px';
|
|
iconSize = 'w-18px';
|
|
break;
|
|
case '20px':
|
|
textSize = 'text-20px px-16px py-12px gap-8px';
|
|
iconSize = 'w-20px';
|
|
break;
|
|
case '24px':
|
|
textSize = 'text-24px px-16px py-12px gap-8px';
|
|
iconSize = 'w-24px';
|
|
break;
|
|
}
|
|
|
|
return {
|
|
badge: `${textSize} ${colorClasses}`,
|
|
icon: `${iconSize} ${props.iconStyles}`,
|
|
};
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<span
|
|
class="inline-flex items-center rounded-full font-semibold leading-none transition-all duration-200 ease-in-out"
|
|
:class="[
|
|
computedStyleClasses.badge,
|
|
]"
|
|
>
|
|
<component :is="icon" v-if="icon" class="flex-shrink-0" :class="computedStyleClasses.icon" />
|
|
<slot />
|
|
<component :is="iconRight" v-if="iconRight" class="flex-shrink-0" :class="computedStyleClasses.icon" />
|
|
</span>
|
|
</template>
|