aboutsummaryrefslogtreecommitdiffstats
path: root/components/editor/quest/modal/EditorQuestModalRename.vue
diff options
context:
space:
mode:
authorLeonardo Bishop <me@leonardobishop.com>2024-03-12 17:48:23 +0000
committerLeonardo Bishop <me@leonardobishop.com>2024-03-12 17:48:23 +0000
commitaddf95bc7e1e694cd9ba7797c8b0847bfecaf54c (patch)
tree422e96cb24eb3b3ec9d4c96de555b8fa14239c59 /components/editor/quest/modal/EditorQuestModalRename.vue
parent8664ad155c89d47affd94f8b0385ebf39841f1f8 (diff)
Add nuxt prefixes back to component file names
Diffstat (limited to 'components/editor/quest/modal/EditorQuestModalRename.vue')
-rw-r--r--components/editor/quest/modal/EditorQuestModalRename.vue58
1 files changed, 58 insertions, 0 deletions
diff --git a/components/editor/quest/modal/EditorQuestModalRename.vue b/components/editor/quest/modal/EditorQuestModalRename.vue
new file mode 100644
index 0000000..3d846aa
--- /dev/null
+++ b/components/editor/quest/modal/EditorQuestModalRename.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useSessionStore } from '@/stores/session';
+
+const model = defineModel();
+
+const emit = defineEmits(['update']);
+
+const props = defineProps({
+ questId: String,
+});
+
+const session = useSessionStore();
+
+const newQuestId = ref(props.questId);
+
+const isDuplicate = computed(() => {
+ return session.getQuestById(newQuestId.value!) !== undefined;
+});
+
+</script>
+
+<template>
+ <Modal v-model="model">
+ <template v-slot:header>
+ <h2>Rename quest '{{ questId }}'</h2>
+ </template>
+
+ <template v-slot:body>
+ <div id="body">
+ <div class="option-group">
+ <label for="new-type">New quest ID</label>
+ <input id="new-type" name="new-type" type="text" v-model="newQuestId" />
+ </div>
+ <p v-if="isDuplicate" class="error-text">Name is not unique.</p>
+ <p>A Quest ID must be unique, alphanumeric, and not contain any spaces.</p>
+ <div id="confirm" class="control-group">
+ <Button :icon="['fas', 'times']" :label="'Cancel'" @click="model = false"></Button>
+ <Button type="solid" :icon="['fas', 'check']" :label="'Rename'" :disabled="isDuplicate"
+ @click="emit('update', newQuestId)"></Button>
+ </div>
+ </div>
+ </template>
+ </Modal>
+</template>
+
+<style scoped>
+#confirm {
+ display: flex;
+ justify-content: flex-end;
+}
+
+#body {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+}
+</style> \ No newline at end of file