54 lines
1.9 KiB
Vue
54 lines
1.9 KiB
Vue
<template>
|
|
<teleport to="body">
|
|
<div class="modal fade show d-block" tabindex="-1" role="dialog" aria-modal="true" @click.self="closeModal">
|
|
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Create New Space</h5>
|
|
<button type="button" class="btn-close" aria-label="Close" @click="closeModal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form @submit.prevent="handleCreate">
|
|
<div class="mb-3">
|
|
<label for="spaceName" class="form-label">Space Name</label>
|
|
<input id="spaceName" v-model="form.name" type="text" class="form-control" required />
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="spaceDesc" class="form-label">Description</label>
|
|
<textarea id="spaceDesc" v-model="form.description" class="form-control" rows="3"></textarea>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">Create</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-backdrop fade show"></div>
|
|
</teleport>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from "vue";
|
|
|
|
const emit = defineEmits(["close", "create"]);
|
|
|
|
const form = ref({
|
|
name: "",
|
|
description: "",
|
|
});
|
|
|
|
const closeModal = () => {
|
|
emit("close");
|
|
};
|
|
|
|
const handleCreate = () => {
|
|
if (form.value.name.trim()) {
|
|
emit("create", form.value);
|
|
form.value = { name: "", description: "" };
|
|
}
|
|
};
|
|
</script>
|
|
|
|
|
|
|