53 lines
1.5 KiB
TypeScript
53 lines
1.5 KiB
TypeScript
|
import { computed, type Ref } from 'vue';
|
||
|
|
import classNames from 'classnames';
|
||
|
|
import type { SpinnerColor, SpinnerSize } from '../types';
|
||
|
|
|
||
|
|
const sizes: Record<SpinnerSize, string> = {
|
||
|
|
0: 'w-0 h-0',
|
||
|
|
0.5: 'w-0.5 h-0.5',
|
||
|
|
1: 'w-1 h-1',
|
||
|
|
1.5: 'w-1.5 h-1.5',
|
||
|
|
10: 'w-10 h-10',
|
||
|
|
11: 'w-11 h-11',
|
||
|
|
12: 'w-12 h-12',
|
||
|
|
2: 'w-2 h-2',
|
||
|
|
2.5: 'w-2.5 h-2.5',
|
||
|
|
3: 'w-3 h-3',
|
||
|
|
4: 'w-4 h-4',
|
||
|
|
5: 'w-5 h-5',
|
||
|
|
6: 'w-6 h-6',
|
||
|
|
7: 'w-7 h-7',
|
||
|
|
8: 'w-8 h-8',
|
||
|
|
9: 'w-9 h-9'
|
||
|
|
};
|
||
|
|
|
||
|
|
const colors: Record<SpinnerColor, string> = {
|
||
|
|
blue: 'fill-blue-600',
|
||
|
|
gray: 'fill-gray-600 dark:fill-gray-300',
|
||
|
|
green: 'fill-green-500',
|
||
|
|
pink: 'fill-pink-600',
|
||
|
|
purple: 'fill-purple-600',
|
||
|
|
red: 'fill-red-600',
|
||
|
|
white: 'fill-white',
|
||
|
|
yellow: 'fill-yellow-400',
|
||
|
|
accent1: 'fill-accent1',
|
||
|
|
accent2: 'fill-accent2'
|
||
|
|
};
|
||
|
|
|
||
|
|
export type UseSpinnerClassesProps = {
|
||
|
|
color: Ref<SpinnerColor>;
|
||
|
|
size: Ref<SpinnerSize>;
|
||
|
|
};
|
||
|
|
|
||
|
|
export function useSpinnerClasses(props: UseSpinnerClassesProps): {
|
||
|
|
spinnerClasses: Ref<string>;
|
||
|
|
} {
|
||
|
|
const sizeClasses = computed(() => sizes[props.size.value]);
|
||
|
|
const colorClasses = computed(() => colors[props.color.value]);
|
||
|
|
const bgColorClasses = computed(() => 'text-gray-200 dark:text-gray-400');
|
||
|
|
const animateClasses = computed(() => 'animate-spin');
|
||
|
|
const spinnerClasses = computed(() => classNames(animateClasses.value, bgColorClasses.value, colorClasses.value, sizeClasses.value));
|
||
|
|
|
||
|
|
return { spinnerClasses };
|
||
|
|
}
|