<script setup> definePageMeta({ layout: "home", }); const show = reactive({ identification: true, purchase: false, sold: false, extras: false, }); const form = reactive({ name: "", description: "", notes: "", // Item Identification serialNumber: "", modelNumber: "", manufacturer: "", // Purchase Information purchaseTime: "", purchasePrice: "", purchaseFrom: "", // Sold Information soldTime: "", soldPrice: "", soldTo: "", soldNotes: "", }); function submit() { console.log("Submitted!"); } </script> <template> <BaseContainer cmp="section"> <BaseSectionHeader> Add an Item To Your Inventory </BaseSectionHeader> <form class="max-w-3xl mx-auto my-5 space-y-6" @submit.prevent="submit"> <div class="divider collapse-title px-0 cursor-pointer">Required Information</div> <div class="bg-base-200 card"> <div class="card-body"> <FormTextField v-model="form.name" label="Name" /> <FormTextArea v-model="form.description" label="Description" limit="1000" /> </div> </div> <div class="divider"> <button class="btn btn-sm" @click="show.identification = !show.identification">Product Information</button> </div> <div v-if="show.identification" class="card bg-base-200"> <div class="card-body grid md:grid-cols-2"> <FormTextField v-model="form.serialNumber" label="Serial Number" /> <FormTextField v-model="form.modelNumber" label="Model Number" /> <FormTextField v-model="form.manufacturer" label="Manufacturer" /> </div> </div> <div class=""> <button class="btn btn-sm" @click="show.purchase = !show.purchase">Purchase Information</button> <div class="divider"></div> </div> <div v-if="show.purchase" class="card bg-base-200"> <div class="card-body grid md:grid-cols-2"> <FormTextField v-model="form.purchaseTime" label="Purchase Time" /> <FormTextField v-model="form.purchasePrice" label="Purchase Price" /> <FormTextField v-model="form.purchaseFrom" label="Purchase From" /> </div> </div> <div class="divider"> <button class="btn btn-sm" @click="show.sold = !show.sold">Sold Information</button> </div> <div v-if="show.sold" class="card bg-base-200"> <div class="card-body"> <div class="grid md:grid-cols-2 gap-2"> <FormTextField v-model="form.soldTime" label="Sold Time" /> <FormTextField v-model="form.soldPrice" label="Sold Price" /> <FormTextField v-model="form.soldTo" label="Sold To" /> </div> <FormTextArea v-model="form.soldNotes" label="Sold Notes" limit="1000" /> </div> </div> <div class="divider"> <button class="btn btn-sm" @click="show.extras = !show.extras">Extras</button> </div> <div v-if="show.extras" class="card bg-base-200"> <div class="card-body"> <FormTextArea v-model="form.notes" label="Notes" limit="1000" /> </div> </div> </form> </BaseContainer> </template>