2. Zwischenstand
This commit is contained in:
@@ -92,33 +92,35 @@
|
||||
</main>
|
||||
|
||||
<UModal v-model:open="isModalOpen">
|
||||
<UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">{{ modalTitle }}</h3>
|
||||
<UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isModalOpen = false" />
|
||||
<template #content>
|
||||
<UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">{{ modalTitle }}</h3>
|
||||
<UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isModalOpen = false" />
|
||||
</div>
|
||||
</template>
|
||||
<div v-if="modalState.type === 'create'" class="space-y-4">
|
||||
<UFormField label="Titel" name="title">
|
||||
<UInput v-model="modalState.inputValue" autofocus placeholder="z.B. Meeting Notes" @keyup.enter="handleModalConfirm" />
|
||||
</UFormField>
|
||||
</div>
|
||||
</template>
|
||||
<div v-if="modalState.type === 'create'" class="space-y-4">
|
||||
<UFormGroup label="Titel" name="title">
|
||||
<UInput v-model="modalState.inputValue" autofocus placeholder="z.B. Meeting Notes" @keyup.enter="handleModalConfirm" />
|
||||
</UFormGroup>
|
||||
</div>
|
||||
<div v-else-if="modalState.type === 'delete'">
|
||||
<p class="text-sm text-gray-500 dark:text-gray-300">
|
||||
Möchtest du <strong>"{{ modalState.targetItem?.title }}"</strong> wirklich löschen?
|
||||
<br><span v-if="modalState.targetItem?.isFolder" class="text-red-500 font-medium">Alle Unterseiten werden ebenfalls gelöscht.</span>
|
||||
</p>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="flex justify-end gap-2">
|
||||
<UButton color="gray" variant="ghost" @click="isModalOpen = false">Abbrechen</UButton>
|
||||
<UButton :color="modalState.type === 'delete' ? 'red' : 'primary'" :loading="modalLoading" @click="handleModalConfirm">
|
||||
{{ modalState.type === 'delete' ? 'Löschen' : 'Erstellen' }}
|
||||
</UButton>
|
||||
<div v-else-if="modalState.type === 'delete'">
|
||||
<p class="text-sm text-gray-500 dark:text-gray-300">
|
||||
Möchtest du <strong>"{{ modalState.targetItem?.title }}"</strong> wirklich löschen?
|
||||
<br><span v-if="modalState.targetItem?.isFolder" class="text-red-500 font-medium">Alle Unterseiten werden ebenfalls gelöscht.</span>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
</UCard>
|
||||
<template #footer>
|
||||
<div class="flex justify-end gap-2">
|
||||
<UButton color="gray" variant="ghost" @click="isModalOpen = false">Abbrechen</UButton>
|
||||
<UButton :color="modalState.type === 'delete' ? 'red' : 'primary'" :loading="modalLoading" @click="handleModalConfirm">
|
||||
{{ modalState.type === 'delete' ? 'Löschen' : 'Erstellen' }}
|
||||
</UButton>
|
||||
</div>
|
||||
</template>
|
||||
</UCard>
|
||||
</template>
|
||||
</UModal>
|
||||
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user