44 lines
1.4 KiB
Vue
44 lines
1.4 KiB
Vue
<template>
|
|
<Modal :is-open="isOpen" @close="cancel" title="GIF Settings">
|
|
<div class="p-4">
|
|
<div class="mb-6">
|
|
<label for="fps" class="block text-sm font-medium text-gray-700 mb-2">Frames Per Second (FPS)</label>
|
|
<div class="flex items-center">
|
|
<input id="fps" v-model="fpsValue" type="number" min="1" max="60" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" />
|
|
</div>
|
|
<p class="mt-2 text-sm text-gray-500">Higher FPS will result in smoother animation but larger file size.</p>
|
|
</div>
|
|
|
|
<div class="flex justify-end space-x-3">
|
|
<button @click="cancel" class="px-4 py-2 bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium rounded-lg transition-colors">Cancel</button>
|
|
<button @click="confirm" class="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white font-medium rounded-lg transition-colors">Generate GIF</button>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import Modal from './utilities/Modal.vue';
|
|
|
|
const props = defineProps<{
|
|
isOpen: boolean;
|
|
defaultFps?: number;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'close'): void;
|
|
(e: 'confirm', fps: number): void;
|
|
}>();
|
|
|
|
const fpsValue = ref(props.defaultFps || 10);
|
|
|
|
const confirm = () => {
|
|
emit('confirm', fpsValue.value);
|
|
};
|
|
|
|
const cancel = () => {
|
|
emit('close');
|
|
};
|
|
</script>
|