53 lines
1.4 KiB
Vue
53 lines
1.4 KiB
Vue
<template>
|
|
<div class="rounded-lg border border-amber-200 bg-amber-50 p-4">
|
|
<p class="mb-3 text-sm font-semibold text-amber-900">{{ prompt }}</p>
|
|
<form class="space-y-3" @submit.prevent="submit">
|
|
<div v-for="field in fields" :key="field.name" class="space-y-1">
|
|
<label class="text-xs font-medium text-slate-600">
|
|
{{ field.label }}
|
|
</label>
|
|
<input
|
|
v-model="form[field.name]"
|
|
class="w-full rounded border border-slate-300 px-3 py-2 text-sm"
|
|
:type="field.type === 'number' ? 'number' : 'text'"
|
|
:required="field.required"
|
|
/>
|
|
</div>
|
|
<button
|
|
type="submit"
|
|
class="rounded bg-slate-900 px-4 py-2 text-sm font-semibold text-white"
|
|
>
|
|
Submit
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = defineProps<{
|
|
schema: Record<string, any>
|
|
prompt: string
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
(event: 'submit', payload: Record<string, unknown>): void
|
|
}>()
|
|
|
|
const form = reactive<Record<string, string>>({})
|
|
|
|
const fields = computed(() => {
|
|
const properties = props.schema?.properties || {}
|
|
const required = props.schema?.required || []
|
|
return Object.entries(properties).map(([name, config]: [string, any]) => ({
|
|
name,
|
|
label: config.title || name,
|
|
type: config.type || 'string',
|
|
required: required.includes(name),
|
|
}))
|
|
})
|
|
|
|
const submit = () => {
|
|
emit('submit', { ...form })
|
|
}
|
|
</script>
|