curo1305
939ea79977
- FolderRow.vue: folder icon + dots menu button (fill-based → stroke AppIcon) - FolderTreeItem.vue: folder icon in #icon slot - FolderDeleteModal.vue: warning icon - DocumentCard.vue: document, folderMove, share action icons - DocumentPreviewModal.vue: x close button (spinner SVG kept) - ShareModal.vue: x close button - DropZone.vue: upload icon - UploadProgress.vue: exclamationCircle (error) + checkCircle (done) icons; spinner kept
81 lines
2.1 KiB
Vue
81 lines
2.1 KiB
Vue
<template>
|
|
<!-- Overlay -->
|
|
<div
|
|
class="fixed inset-0 bg-black/40 flex items-center justify-center z-50"
|
|
@click.self="handleCancel"
|
|
>
|
|
<!-- Panel -->
|
|
<div
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-labelledby="delete-modal-title"
|
|
class="bg-white rounded-2xl shadow-xl p-6 max-w-md w-full mx-4"
|
|
>
|
|
<!-- Warning icon -->
|
|
<div class="flex justify-center">
|
|
<div class="w-10 h-10 bg-red-50 rounded-full flex items-center justify-center">
|
|
<AppIcon name="warning" class="w-5 h-5 text-red-500" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Heading -->
|
|
<h2 id="delete-modal-title" class="text-lg font-semibold text-gray-900 mt-4 text-center">
|
|
Delete folder?
|
|
</h2>
|
|
|
|
<!-- Body -->
|
|
<p class="text-sm text-gray-600 text-center mt-2 mb-6">
|
|
This folder contains {{ folder.doc_count ?? 0 }} document{{ (folder.doc_count ?? 0) !== 1 ? 's' : '' }}.
|
|
Deleting it will permanently delete all documents inside. This cannot be undone.
|
|
</p>
|
|
|
|
<!-- Buttons -->
|
|
<div class="flex gap-3 justify-end">
|
|
<button
|
|
@click="handleCancel"
|
|
class="text-sm text-gray-600 hover:text-gray-800 px-4 py-2 rounded-lg border border-gray-200 hover:bg-gray-50 transition-colors"
|
|
>
|
|
Keep folder
|
|
</button>
|
|
<button
|
|
@click="handleConfirm"
|
|
class="bg-red-600 hover:bg-red-700 text-white text-sm font-semibold px-4 py-2 rounded-lg min-h-[44px] transition-colors"
|
|
>
|
|
Delete folder and documents
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import AppIcon from '../ui/AppIcon.vue'
|
|
|
|
const props = defineProps({
|
|
folder: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
onConfirm: {
|
|
type: Function,
|
|
default: null,
|
|
},
|
|
onCancel: {
|
|
type: Function,
|
|
default: null,
|
|
},
|
|
})
|
|
|
|
const emit = defineEmits(['confirm', 'cancel'])
|
|
|
|
function handleConfirm() {
|
|
emit('confirm')
|
|
if (props.onConfirm) props.onConfirm()
|
|
}
|
|
|
|
function handleCancel() {
|
|
emit('cancel')
|
|
if (props.onCancel) props.onCancel()
|
|
}
|
|
</script>
|