59 lines
1.4 KiB
Vue
59 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
|
|
const props = defineProps<{
|
|
open: boolean;
|
|
parentId?: string | null;
|
|
}>();
|
|
|
|
const emit = defineEmits(['update:open', 'created']);
|
|
|
|
const name = ref('');
|
|
const loading = ref(false);
|
|
|
|
const close = () => {
|
|
emit('update:open', false);
|
|
name.value = '';
|
|
};
|
|
|
|
const create = async () => {
|
|
if (!name.value) return;
|
|
loading.value = true;
|
|
try {
|
|
await $fetch('/api/folders', {
|
|
method: 'POST',
|
|
body: { name: name.value, parentId: props.parentId }
|
|
});
|
|
emit('created');
|
|
close();
|
|
} catch (error) {
|
|
console.error(error);
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<UModal :open="open" @update:open="$emit('update:open', $event)">
|
|
<template #content>
|
|
<UCard>
|
|
<template #header>
|
|
<h3 class="text-xl font-semibold">New Folder</h3>
|
|
</template>
|
|
|
|
<form @submit.prevent="create" class="space-y-4">
|
|
<UFormGroup label="Folder Name">
|
|
<UInput v-model="name" placeholder="E.g., Projects" autofocus required />
|
|
</UFormGroup>
|
|
|
|
<div class="flex justify-end gap-3 mt-6">
|
|
<UButton color="neutral" variant="ghost" @click="close">Cancel</UButton>
|
|
<UButton type="submit" :loading="loading">Create</UButton>
|
|
</div>
|
|
</form>
|
|
</UCard>
|
|
</template>
|
|
</UModal>
|
|
</template>
|