90 lines
3.5 KiB
Vue
90 lines
3.5 KiB
Vue
<template>
|
|
<Modal :is-open="isOpen" @close="close" title="New project" :initialWidth="400" :initialHeight="320">
|
|
<div class="px-2 pt-2 pb-1">
|
|
<form @submit.prevent="handleSubmit">
|
|
<div class="grid grid-cols-2 gap-4 mb-3">
|
|
<div>
|
|
<label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1 uppercase tracking-wider">Sprite Width</label>
|
|
<div class="relative">
|
|
<input v-model.number="width" type="number" min="1" required class="w-full pl-3 pr-8 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" />
|
|
<span class="absolute right-3 top-2 text-gray-400 text-xs">px</span>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1 uppercase tracking-wider">Sprite Height</label>
|
|
<div class="relative">
|
|
<input v-model.number="height" type="number" min="1" required class="w-full pl-3 pr-8 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" />
|
|
<span class="absolute right-3 top-2 text-gray-400 text-xs">px</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-4 mb-4">
|
|
<div>
|
|
<label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1 uppercase tracking-wider">Columns</label>
|
|
<input v-model.number="columns" type="number" min="1" max="20" 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" />
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1 uppercase tracking-wider">Rows</label>
|
|
<input v-model.number="rows" type="number" min="1" 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" title="Rows are dynamic but this sets an initial expectation" />
|
|
</div>
|
|
</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="!isValid">Create project</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</Modal>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, computed, watch } from 'vue';
|
|
import Modal from '@/components/utilities/Modal.vue';
|
|
|
|
const props = defineProps<{
|
|
isOpen: boolean;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'close'): void;
|
|
(e: 'create', config: { width: number; height: number; columns: number; rows: number }): void;
|
|
}>();
|
|
|
|
const width = ref(64);
|
|
const height = ref(64);
|
|
const columns = ref(8);
|
|
const rows = ref(8);
|
|
|
|
const isValid = computed(() => {
|
|
return width.value > 0 && height.value > 0 && columns.value > 0 && rows.value > 0;
|
|
});
|
|
|
|
// Reset to defaults when opened
|
|
watch(
|
|
() => props.isOpen,
|
|
val => {
|
|
if (val) {
|
|
width.value = 64;
|
|
height.value = 64;
|
|
columns.value = 8;
|
|
rows.value = 8;
|
|
}
|
|
}
|
|
);
|
|
|
|
const close = () => emit('close');
|
|
const handleSubmit = () => {
|
|
if (isValid.value) {
|
|
emit('create', {
|
|
width: width.value,
|
|
height: height.value,
|
|
columns: columns.value,
|
|
rows: rows.value,
|
|
});
|
|
close();
|
|
}
|
|
};
|
|
</script>
|