Files
repomix-mirror/website/client/components/Home/FileSelectionWarning.vue
Kazuki Yamada 629e8bc173 refactor(website): improve file selection component structure and maintainability
- Extract constants: FILE_SELECTION_WARNING_THRESHOLD and TabType to dedicated files
- Extract warning message to reusable FileSelectionWarning component
- Optimize performance: replace deep watch with shallow watch and use structuredClone
- Enhance accessibility: add comprehensive aria-label attributes to all interactive elements
- Strengthen error handling: add zero division protection for percentage calculation
- Improve code quality: enhance comments and maintain consistent type definitions

This refactoring improves code maintainability, performance, and user experience
while following Vue.js and accessibility best practices.
2025-08-24 16:10:18 +09:00

43 lines
833 B
Vue
Raw Permalink Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<div class="warning-message">
<div class="warning-icon"></div>
<div class="warning-text">
<slot>
Selecting more than {{ threshold }} files may cause processing issues or timeouts. Consider reducing your selection for better performance.
</slot>
</div>
</div>
</template>
<script setup lang="ts">
interface Props {
threshold: number;
}
defineProps<Props>();
</script>
<style scoped>
.warning-message {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 12px 16px;
background: var(--vp-c-warning-soft);
border: 1px solid var(--vp-c-warning);
border-radius: 4px;
margin-bottom: 8px;
}
.warning-icon {
font-size: 16px;
line-height: 1;
flex-shrink: 0;
}
.warning-text {
font-size: 13px;
color: var(--vp-c-text-1);
line-height: 1.4;
}
</style>