root/spritesheet-generator
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FEAT] Format code

Browse Source
This commit is contained in:
root
2026-01-01 18:46:46 +01:00
parent 221dcb7072
commit 65bdc2974f
17 changed files with 561 additions and 528 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
src/components/project/NewProjectModal.vue
View File

@@ -4,58 +4,31 @@
<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">New Project</h2>
<form @submit.prevent="handleSubmit">
<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">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"
/>
<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"
/>
<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-6">
<div>
<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"
/>
<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>
<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"
/>
<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>
@@ -70,46 +43,49 @@
</template>
<script setup lang="ts">
import { ref, computed, watch } from 'vue';
import { ref, computed, watch } from 'vue';
const props = defineProps<{
isOpen: boolean;
}>();
const props = defineProps<{
isOpen: boolean;
}>();
const emit = defineEmits<{
(e: 'close'): void;
(e: 'create', config: { width: number; height: number; columns: number; rows: number }): void;
}>();
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 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;
});
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;
}
});
// 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();
}
};
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>