65 lines
1.9 KiB
Vue
65 lines
1.9 KiB
Vue
<template>
|
|
<Teleport to="body">
|
|
<div v-if="isOpen" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm" @click.self="close">
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-xl p-6 w-full max-w-sm border border-gray-200 dark:border-gray-700">
|
|
<h2 class="text-xl font-bold mb-4 text-gray-900 dark:text-gray-100">Save Project</h2>
|
|
<form @submit.prevent="handleSubmit">
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Project Name</label>
|
|
<input
|
|
v-model="projectName"
|
|
type="text"
|
|
required
|
|
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white"
|
|
placeholder="My Awesome Spritesheet"
|
|
ref="inputRef"
|
|
/>
|
|
</div>
|
|
<div class="flex justify-end gap-3">
|
|
<button type="button" @click="close" class="btn btn-secondary">Cancel</button>
|
|
<button type="submit" class="btn btn-primary" :disabled="!projectName.trim()">Save</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</Teleport>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, watch, nextTick } from 'vue';
|
|
|
|
const props = defineProps<{
|
|
isOpen: boolean;
|
|
initialName?: string;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'close'): void;
|
|
(e: 'save', name: string): void;
|
|
}>();
|
|
|
|
const projectName = ref('');
|
|
const inputRef = ref<HTMLInputElement | null>(null);
|
|
|
|
watch(
|
|
() => props.isOpen,
|
|
(isOpen) => {
|
|
if (isOpen) {
|
|
projectName.value = props.initialName || '';
|
|
nextTick(() => {
|
|
inputRef.value?.focus();
|
|
inputRef.value?.select();
|
|
});
|
|
}
|
|
}
|
|
);
|
|
|
|
const close = () => emit('close');
|
|
const handleSubmit = () => {
|
|
if (projectName.value.trim()) {
|
|
emit('save', projectName.value);
|
|
close();
|
|
}
|
|
};
|
|
</script>
|