| 309 | } |
| 310 | |
| 311 | async function addInitialApp( |
| 312 | dirName: string, |
| 313 | component: string, |
| 314 | pro: boolean, |
| 315 | ts: boolean |
| 316 | ) { |
| 317 | const appPath = resolve(cwd(), `./${dirName}/${component}`) |
| 318 | // Ensure directory exists (for nested paths like app/app.vue) |
| 319 | await mkdir(dirname(appPath), { recursive: true }) |
| 320 | await writeFile( |
| 321 | appPath, |
| 322 | `<script setup${ts ? ' lang="ts"' : ''}> |
| 323 | async function submit() { |
| 324 | await new Promise(r => setTimeout(r, 1000)) |
| 325 | alert('Submitted! 🎉') |
| 326 | } |
| 327 | </script> |
| 328 | |
| 329 | <template> |
| 330 | <div class="bg-white rounded-xl shadow-xl p-8 mx-auto my-16 max-w-[450px]"> |
| 331 | <img |
| 332 | src="https://pro.formkit.com/logo.svg" |
| 333 | alt="FormKit Logo" |
| 334 | width="244" |
| 335 | height="50" |
| 336 | class="mx-auto mb-8 w-48" |
| 337 | > |
| 338 | <FormKit |
| 339 | type="form" |
| 340 | #default="{ value }" |
| 341 | @submit="submit" |
| 342 | > |
| 343 | <FormKit |
| 344 | type="text" |
| 345 | name="name" |
| 346 | label="Name" |
| 347 | help="What do people call you?" |
| 348 | /> |
| 349 | <FormKit |
| 350 | type="checkbox" |
| 351 | name="flavors" |
| 352 | label="Favorite ice cream flavors" |
| 353 | :options="{ |
| 354 | 'vanilla': 'Vanilla', |
| 355 | 'chocolate': 'Chocolate', |
| 356 | 'strawberry': 'Strawberry', |
| 357 | 'mint-chocolate-chip': 'Mint Chocolate Chip', |
| 358 | 'rocky-road': 'Rocky Road', |
| 359 | 'cookie-dough': 'Cookie Dough', |
| 360 | 'pistachio': 'Pistachio', |
| 361 | }" |
| 362 | validation="required|min:2" |
| 363 | /> |
| 364 | ${ |
| 365 | (pro && |
| 366 | ` |
| 367 | <FormKit |
| 368 | type="repeater" |