87 lines
2.3 KiB
Vue
87 lines
2.3 KiB
Vue
<template>
|
|
<div class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-md mx-4">
|
|
<!-- Header -->
|
|
<div class="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700">
|
|
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Create Collection</h3>
|
|
<rs-button
|
|
variant="text"
|
|
size="sm"
|
|
@click="$emit('close')"
|
|
class="p-2"
|
|
>
|
|
<Icon name="ic:outline-close" size="16" />
|
|
</rs-button>
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<div class="p-6">
|
|
<FormKit
|
|
type="text"
|
|
v-model="collectionName"
|
|
label="Collection Name"
|
|
placeholder="Enter collection name"
|
|
validation="required"
|
|
outer-class="mb-4"
|
|
@keyup.enter="createCollection"
|
|
/>
|
|
|
|
<FormKit
|
|
type="textarea"
|
|
v-model="collectionDescription"
|
|
label="Description (optional)"
|
|
placeholder="Describe this collection"
|
|
rows="3"
|
|
outer-class="mb-4"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="flex items-center justify-end gap-3 p-6 border-t border-gray-200 dark:border-gray-700">
|
|
<rs-button
|
|
variant="secondary"
|
|
@click="$emit('close')"
|
|
>
|
|
Cancel
|
|
</rs-button>
|
|
<rs-button
|
|
variant="primary"
|
|
@click="createCollection"
|
|
:disabled="!collectionName.trim()"
|
|
>
|
|
Create Collection
|
|
</rs-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const emit = defineEmits(['close', 'created'])
|
|
|
|
const collectionName = ref('')
|
|
const collectionDescription = ref('')
|
|
|
|
const createCollection = () => {
|
|
if (!collectionName.value.trim()) return
|
|
|
|
const newCollection = {
|
|
id: Date.now(),
|
|
name: collectionName.value.trim(),
|
|
description: collectionDescription.value.trim(),
|
|
requests: [],
|
|
createdAt: new Date().toISOString()
|
|
}
|
|
|
|
emit('created', newCollection)
|
|
emit('close')
|
|
}
|
|
|
|
// Focus the input when modal opens
|
|
onMounted(() => {
|
|
nextTick(() => {
|
|
const input = document.querySelector('input[type="text"]')
|
|
if (input) input.focus()
|
|
})
|
|
})
|
|
</script> |