feat: Add PrimeProgress, PrimeSelect, and PrimeSkeleton components with customizable styles and props

- Implemented PrimeProgress component with support for labels, helper text, and various styles (size, variant, color).
- Created PrimeSelect component with dropdown functionality, custom templates, and validation states.
- Developed PrimeSkeleton component for loading placeholders with different shapes and animations.
- Updated index.ts to export new components for easy import.
- Enhanced PrimeVueTest.vue to include tests for new components and their functionalities.
- Introduced a custom ThrillWiki theme for PrimeVue with tailored color schemes and component styles.
- Added ambient type declarations for various components to improve TypeScript support.
This commit is contained in:
pacnpal
2025-08-27 21:00:02 -04:00
parent 6125c4ee44
commit 08a4a2d034
164 changed files with 73094 additions and 11001 deletions

View File

@@ -26,8 +26,8 @@
</h4>
<p class="text-gray-600 dark:text-gray-400 mb-6">
You need to be signed in to add "{{ searchTerm }}" to ThrillWiki's database. Join
our community of theme park enthusiasts!
You need to be signed in to add "{{ searchTerm }}" to ThrillWiki's database. Join our
community of theme park enthusiasts!
</p>
</div>
@@ -135,9 +135,7 @@
<!-- Alternative Options -->
<div class="text-center pt-4 border-t border-gray-200 dark:border-gray-700">
<p class="text-sm text-gray-500 dark:text-gray-400 mb-3">
Or continue exploring ThrillWiki
</p>
<p class="text-sm text-gray-500 dark:text-gray-400 mb-3">Or continue exploring ThrillWiki</p>
<button
@click="handleBrowseExisting"
class="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 text-sm font-medium transition-colors"
@@ -150,26 +148,26 @@
<script setup lang="ts">
interface Props {
searchTerm: string;
searchTerm: string
}
const props = defineProps<Props>();
const props = defineProps<Props>()
const emit = defineEmits<{
login: [];
signup: [];
browse: [];
}>();
login: []
signup: []
browse: []
}>()
const handleLogin = () => {
emit("login");
};
emit('login')
}
const handleSignup = () => {
emit("signup");
};
emit('signup')
}
const handleBrowseExisting = () => {
emit("browse");
};
emit('browse')
}
</script>