88 lines
1.8 KiB
Vue
88 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import { useTreeDataStore } from '@/stores/tree-data'
|
|
|
|
const { deleteFolder } = useTreeDataStore()
|
|
const emit = defineEmits(['update:confirmDelete'])
|
|
const props = withDefaults(
|
|
defineProps<{ confirmDelete: boolean; pathname: string }>(),
|
|
{
|
|
confirmDelete: false,
|
|
}
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<q-dialog
|
|
v-model="props.confirmDelete"
|
|
persistent
|
|
transition-show="scale"
|
|
transition-hide="scale"
|
|
>
|
|
<q-card style="width: 400px">
|
|
<q-card-section>
|
|
|
|
<div class="text-h6"><q-icon name="error" color="negative" size="2.5rem"/>แจ้งเตือนการลบ</div>
|
|
</q-card-section>
|
|
|
|
<q-card-section class="q-pt-none">
|
|
ถ้าดำเนินการต่อจะทำการลบ
|
|
</q-card-section>
|
|
|
|
<q-card-actions align="right" class="bg-white text-primary">
|
|
<q-space />
|
|
<q-btn
|
|
flat
|
|
label="ยกเลิก"
|
|
v-close-popup
|
|
@click="
|
|
() => {
|
|
emit('update:confirmDelete')
|
|
}
|
|
"
|
|
/>
|
|
|
|
<q-btn
|
|
flat
|
|
label="ลบ"
|
|
v-close-popup
|
|
class="text-red"
|
|
@click="
|
|
() => {
|
|
deleteFolder(pathname)
|
|
emit('update:confirmDelete')
|
|
}
|
|
"
|
|
/>
|
|
</q-card-actions>
|
|
</q-card>
|
|
</q-dialog>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.box {
|
|
display: inline-block;
|
|
border: 2px solid #f1f2f4;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.dashed {
|
|
opacity: 0.4;
|
|
display: inline-block;
|
|
border: 2px solid #babdc3;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
border-style: dashed;
|
|
}
|
|
|
|
.add-icon {
|
|
margin: auto auto;
|
|
}
|
|
|
|
.add-button {
|
|
position: absolute;
|
|
top: 75px;
|
|
right: 45px;
|
|
background-color: white;
|
|
}
|
|
</style>
|