mirror of
https://github.com/yamadashy/repomix.git
synced 2026-05-30 11:18:53 +02:00
Kazuki Yamada
191a7502a1
Add event.detail > 0 condition to handleClick to only trigger cancel on actual mouse clicks, not on Enter key form submission. This prevents the pack button from canceling requests when users press Enter during processing. - Mouse clicks (event.detail > 0): trigger cancel when loading - Enter key (event.detail === 0): allow normal form submission, no cancel
102 lines
2.0 KiB
Vue
102 lines
2.0 KiB
Vue
<template>
|
|
<button
|
|
class="pack-button"
|
|
:class="{ 'pack-button--loading': loading }"
|
|
:disabled="!isValid && !loading"
|
|
:aria-label="loading ? 'Cancel processing' : 'Pack repository'"
|
|
type="submit"
|
|
@click="handleClick"
|
|
>
|
|
<span class="pack-button__text pack-button__text--normal">
|
|
{{ loading ? 'Processing...' : 'Pack' }}
|
|
</span>
|
|
<span class="pack-button__text pack-button__text--hover">
|
|
{{ loading ? 'Cancel' : 'Pack' }}
|
|
</span>
|
|
<PackIcon v-if="!loading" :size="20" />
|
|
</button>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import PackIcon from './PackIcon.vue';
|
|
|
|
const props = defineProps<{
|
|
loading?: boolean;
|
|
isValid?: boolean;
|
|
}>();
|
|
|
|
const emit = defineEmits<(e: 'cancel') => void>();
|
|
|
|
function handleClick(event: MouseEvent) {
|
|
// Only handle cancel on actual mouse clicks, not on form submission (Enter key)
|
|
if (props.loading && event.detail > 0) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
emit('cancel');
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.pack-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
padding: 12px 24px;
|
|
height: 50px;
|
|
width: 100%;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
background: var(--vp-c-brand-1);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
position: relative;
|
|
}
|
|
|
|
.pack-button:hover:not(:disabled) {
|
|
background: var(--vp-c-brand-2);
|
|
}
|
|
|
|
.pack-button--loading:hover {
|
|
background: var(--vp-c-danger-1);
|
|
}
|
|
|
|
.pack-button:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.pack-button__text {
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.pack-button__text--hover {
|
|
position: absolute;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.pack-button--loading:hover .pack-button__text--normal {
|
|
opacity: 0;
|
|
}
|
|
|
|
.pack-button--loading:hover .pack-button__text--hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.pack-button-icon {
|
|
font-size: 20px;
|
|
line-height: 1;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.pack-button {
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|