biggy
26e3b76b11
- Created style.css for base styles and color variables for light and dark themes. - Added tailwind.css for Tailwind CSS integration and custom theme variables. - Introduced transitions.css to manage global transitions and reduce motion preferences. - Updated tsconfig.app.json to include path aliases for easier imports. - Modified tsconfig.json to set baseUrl and paths for module resolution. - Added typed-router.d.ts for auto-generated route types. - Enhanced vite.config.ts with Vue Router plugin, Tailwind CSS integration, and server proxy settings.
73 lines
1.5 KiB
Vue
73 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import { Loader2 } from "lucide-vue-next";
|
|
|
|
interface Props {
|
|
/**
|
|
* Size of the loader
|
|
* @default "md"
|
|
*/
|
|
size?: "sm" | "md" | "lg";
|
|
/**
|
|
* Message to display below the loader
|
|
*/
|
|
message?: string;
|
|
/**
|
|
* Whether the loader is centered
|
|
* @default true
|
|
*/
|
|
centered?: boolean;
|
|
/**
|
|
* Whether the loader is fullscreen
|
|
* @default false
|
|
*/
|
|
fullScreen?: boolean;
|
|
}
|
|
|
|
// Default props
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
size: "md",
|
|
centered: true,
|
|
message: "",
|
|
fullScreen: false,
|
|
});
|
|
|
|
// Calculate size class based on props
|
|
const sizeClass = computed(() => {
|
|
switch (props.size) {
|
|
case "sm":
|
|
return "h-4 w-4";
|
|
case "lg":
|
|
return "h-10 w-10";
|
|
case "md":
|
|
default:
|
|
return "h-6 w-6";
|
|
}
|
|
});
|
|
|
|
// Calculate container class based on props
|
|
const containerClass = computed(() => {
|
|
const classes = [];
|
|
|
|
if (props.centered) {
|
|
classes.push("flex flex-col items-center justify-center");
|
|
}
|
|
|
|
if (props.fullScreen) {
|
|
classes.push("fixed inset-0 z-50 bg-background/80 backdrop-blur-sm");
|
|
} else {
|
|
classes.push("py-6");
|
|
}
|
|
|
|
return classes.join(" ");
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div :class="containerClass">
|
|
<Loader2 :class="[sizeClass, 'animate-spin text-primary']" />
|
|
<p v-if="message" class="mt-2 text-sm text-muted-foreground">
|
|
{{ message }}
|
|
</p>
|
|
</div>
|
|
</template>
|