news-analyze/components/ui/accordion/AccordionTrigger.vue
吳元皓 5bf857f3cd feat: enhance UI components and add accordion functionality
- Updated DraggableWindow.vue to improve shadow effects.
- Refactored AboutWindow.vue for better structure and readability.
- Added chatbot functionality in chatbot.vue with cookie management.
- Improved navigation component for better code clarity.
- Created a new chat history table in the database schema.
- Modified error handling in error.vue to display error messages correctly.
- Integrated ChatbotWindow into the desktop application layout.
- Implemented accordion component in home.vue for Q/A section.
- Enhanced API for chat functionality with improved error handling.
- Removed unused routes for cleaner codebase.
- Added custom animations for accordion components in tailwind.config.js.
- Developed accordion UI components (Accordion, AccordionContent, AccordionItem, AccordionTrigger) for better user interaction.
2025-05-13 09:40:37 +08:00

42 lines
1021 B
Vue

<script setup lang="ts">
import { cn } from "@/lib/utils";
import { ChevronDown } from "lucide-vue-next";
import {
AccordionHeader,
AccordionTrigger,
type AccordionTriggerProps,
} from "reka-ui";
import { computed, type HTMLAttributes } from "vue";
const props = defineProps<
AccordionTriggerProps & { class?: HTMLAttributes["class"] }
>();
const delegatedProps = computed(() => {
const { class: _, ...delegated } = props;
return delegated;
});
</script>
<template>
<AccordionHeader class="flex">
<AccordionTrigger
v-bind="delegatedProps"
:class="
cn(
'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
props.class,
)
"
>
<slot />
<slot name="icon">
<ChevronDown
class="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200"
/>
</slot>
</AccordionTrigger>
</AccordionHeader>
</template>