4520c1ce5f
- Add data-testid to 18 Vue components (Pages, Blocks, Features, Layouts, Primitives)
- Naming convention: {component-kebab}-{element-description}
- 98 total data-testid attributes added
- Target elements: buttons, links, inputs, modals, navigation
- No logic/styling changes - attributes only
104 lines
3.4 KiB
Vue
104 lines
3.4 KiB
Vue
<script setup>
|
|
import Modal from '@/Components/Modal.vue'
|
|
|
|
const props = defineProps({
|
|
show: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: 'Bist du sicher?',
|
|
},
|
|
message: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
confirmLabel: {
|
|
type: String,
|
|
default: 'Bestätigen',
|
|
},
|
|
cancelLabel: {
|
|
type: String,
|
|
default: 'Abbrechen',
|
|
},
|
|
variant: {
|
|
type: String,
|
|
default: 'danger',
|
|
validator: (v) => ['danger', 'warning', 'info'].includes(v),
|
|
},
|
|
})
|
|
|
|
const emit = defineEmits(['confirm', 'cancel'])
|
|
|
|
const variantClasses = {
|
|
danger: 'bg-red-600 hover:bg-red-700 focus:ring-red-500',
|
|
warning: 'bg-amber-600 hover:bg-amber-700 focus:ring-amber-500',
|
|
info: 'bg-blue-600 hover:bg-blue-700 focus:ring-blue-500',
|
|
}
|
|
|
|
const iconColors = {
|
|
danger: 'text-red-500',
|
|
warning: 'text-amber-500',
|
|
info: 'text-blue-500',
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Modal :show="show" max-width="md" @close="emit('cancel')">
|
|
<div class="p-6">
|
|
<div class="flex items-start gap-4">
|
|
<!-- Warn-Icon -->
|
|
<div
|
|
class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-gray-100"
|
|
>
|
|
<svg
|
|
class="h-6 w-6"
|
|
:class="iconColors[variant]"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="flex-1">
|
|
<h3 class="text-lg font-semibold text-gray-900">
|
|
{{ title }}
|
|
</h3>
|
|
<p v-if="message" class="mt-1 text-sm text-gray-600">
|
|
{{ message }}
|
|
</p>
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-6 flex justify-end gap-3">
|
|
<button
|
|
data-testid="confirm-dialog-cancel-button"
|
|
type="button"
|
|
class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm transition hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2"
|
|
@click="emit('cancel')"
|
|
>
|
|
{{ cancelLabel }}
|
|
</button>
|
|
<button
|
|
data-testid="confirm-dialog-confirm-button"
|
|
type="button"
|
|
class="rounded-lg px-4 py-2 text-sm font-medium text-white shadow-sm transition focus:outline-none focus:ring-2 focus:ring-offset-2"
|
|
:class="variantClasses[variant]"
|
|
@click="emit('confirm')"
|
|
>
|
|
{{ confirmLabel }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
</template>
|