From 17170bb99827b317eab47cfa6cfb161fe606a4b7 Mon Sep 17 00:00:00 2001
From: Romain Hamel <rom.hml@gmail.com>
Date: Tue, 12 Nov 2024 13:57:04 +0100
Subject: [PATCH] playground(form): update examples (#2613)

---
 .../examples/form/FormExampleElements.vue     |  10 +-
 .../app/components/FormElementsExample.vue    | 108 ------------------
 .../app/components/FormNestedExample.vue      |  65 -----------
 .../app/components/FormNestedListExample.vue  |  83 --------------
 playground/app/pages/components/form.vue      |  84 +++-----------
 5 files changed, 24 insertions(+), 326 deletions(-)
 delete mode 100644 playground/app/components/FormElementsExample.vue
 delete mode 100644 playground/app/components/FormNestedExample.vue
 delete mode 100644 playground/app/components/FormNestedListExample.vue

diff --git a/docs/app/components/content/examples/form/FormExampleElements.vue b/docs/app/components/content/examples/form/FormExampleElements.vue
index cbf60b8f..d01da473 100644
--- a/docs/app/components/content/examples/form/FormExampleElements.vue
+++ b/docs/app/components/content/examples/form/FormExampleElements.vue
@@ -73,15 +73,15 @@ async function onSubmit(event: FormSubmitEvent<any>) {
       </UFormField>
 
       <UFormField name="select" label="Select">
-        <USelect v-model="state.select" :items="items" />
+        <USelect v-model="state.select" :items="items" class="w-48" />
       </UFormField>
 
       <UFormField name="selectMenu" label="Select Menu">
-        <USelectMenu v-model="state.selectMenu" :items="items" />
+        <USelectMenu v-model="state.selectMenu" :items="items" class="w-48" />
       </UFormField>
 
       <UFormField name="selectMenuMultiple" label="Select Menu (Multiple)">
-        <USelectMenu v-model="state.selectMenuMultiple" multiple :items="items" />
+        <USelectMenu v-model="state.selectMenuMultiple" multiple :items="items" class="w-48" />
       </UFormField>
 
       <UFormField name="inputMenu" label="Input Menu">
@@ -104,11 +104,11 @@ async function onSubmit(event: FormSubmitEvent<any>) {
     </div>
 
     <div class="flex gap-2 mt-8">
-      <UButton color="neutral" type="submit">
+      <UButton type="submit">
         Submit
       </UButton>
 
-      <UButton color="neutral" variant="outline" @click="form?.clear()">
+      <UButton variant="outline" @click="form?.clear()">
         Clear
       </UButton>
     </div>
diff --git a/playground/app/components/FormElementsExample.vue b/playground/app/components/FormElementsExample.vue
deleted file mode 100644
index 75e3676d..00000000
--- a/playground/app/components/FormElementsExample.vue
+++ /dev/null
@@ -1,108 +0,0 @@
-<script setup lang="ts">
-import { z } from 'zod'
-import type { FormSubmitEvent } from '@nuxt/ui'
-
-const schema = z.object({
-  input: z.string().min(10),
-  inputMenu: z.any().refine(option => option?.value === 'option-2', {
-    message: 'Select Option 2'
-  }),
-  inputMenuMultiple: z.any().refine(values => !!values?.find((option: any) => option.value === 'option-2'), {
-    message: 'Include Option 2'
-  }),
-  textarea: z.string().min(10),
-  select: z.string().refine(value => value === 'option-2', {
-    message: 'Select Option 2'
-  }),
-  selectMenu: z.any().refine(option => option?.value === 'option-2', {
-    message: 'Select Option 2'
-  }),
-  selectMenuMultiple: z.any().refine(values => !!values?.find((option: any) => option.value === 'option-2'), {
-    message: 'Include Option 2'
-  }),
-  switch: z.boolean().refine(value => value === true, {
-    message: 'Toggle me'
-  }),
-  checkbox: z.boolean().refine(value => value === true, {
-    message: 'Check me'
-  }),
-  radioGroup: z.string().refine(value => value === 'option-2', {
-    message: 'Select Option 2'
-  }),
-  slider: z.number().max(20, { message: 'Must be less than 20' })
-})
-
-type Schema = z.input<typeof schema>
-
-const state = reactive<Partial<Schema>>({})
-
-const form = useTemplateRef('form')
-
-const items = [
-  { label: 'Option 1', value: 'option-1' },
-  { label: 'Option 2', value: 'option-2' },
-  { label: 'Option 3', value: 'option-3' }
-]
-
-function onSubmit(event: FormSubmitEvent<Schema>) {
-  console.log(event.data)
-}
-</script>
-
-<template>
-  <UForm ref="form" :state="state" :schema="schema" class="gap-4 flex flex-col w-60" @submit="onSubmit">
-    <UFormField label="Input" name="input">
-      <UInput v-model="state.input" placeholder="john@lennon.com" />
-    </UFormField>
-
-    <UFormField label="Textarea" name="textarea">
-      <UTextarea v-model="state.textarea" />
-    </UFormField>
-
-    <UFormField name="select" label="Select">
-      <USelect v-model="state.select" class="w-44" :items="items" />
-    </UFormField>
-
-    <UFormField name="selectMenu" label="Select Menu">
-      <USelectMenu v-model="state.selectMenu" class="w-44" :items="items" />
-    </UFormField>
-
-    <UFormField name="selectMenuMultiple" label="Select Menu (Multiple)">
-      <USelectMenu v-model="state.selectMenuMultiple" class="w-44" multiple :items="items" />
-    </UFormField>
-
-    <UFormField name="inputMenu" label="Input Menu">
-      <UInputMenu v-model="state.inputMenu" :items="items" />
-    </UFormField>
-
-    <UFormField name="inputMenuMultiple" label="Input Menu (Multiple)">
-      <UInputMenu v-model="state.inputMenuMultiple" multiple :items="items" />
-    </UFormField>
-
-    <UFormField name="checkbox">
-      <UCheckbox v-model="state.checkbox" label="Check me" />
-    </UFormField>
-
-    <UFormField name="radioGroup">
-      <URadioGroup v-model="state.radioGroup" legend="Radio group" :items="items" />
-    </UFormField>
-
-    <UFormField name="switch">
-      <USwitch v-model="state.switch" label="Switch me" />
-    </UFormField>
-
-    <UFormField name="slider" label="Slider">
-      <USlider v-model="state.slider" />
-    </UFormField>
-
-    <div class="flex gap-2">
-      <UButton color="neutral" type="submit">
-        Submit
-      </UButton>
-
-      <UButton color="neutral" variant="outline" @click="form?.clear()">
-        Clear
-      </UButton>
-    </div>
-  </UForm>
-</template>
diff --git a/playground/app/components/FormNestedExample.vue b/playground/app/components/FormNestedExample.vue
deleted file mode 100644
index f6e92844..00000000
--- a/playground/app/components/FormNestedExample.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<script setup lang="ts">
-import { z } from 'zod'
-import type { FormSubmitEvent } from '@nuxt/ui'
-
-const schema = z.object({
-  email: z.string().min(2),
-  password: z.string().min(8)
-})
-
-type Schema = z.output<typeof schema>
-
-const nestedSchema = z.object({
-  phone: z.string().length(10)
-})
-
-type NestedSchema = z.output<typeof nestedSchema>
-
-const state = reactive<Partial<Schema & { nested: Partial<NestedSchema> }>>({
-  nested: {}
-})
-
-const checked = ref(false)
-
-function onSubmit(event: FormSubmitEvent<Schema>) {
-  console.log('Success', event.data)
-}
-
-function onError(event: any) {
-  console.log('Error', event)
-}
-</script>
-
-<template>
-  <UForm
-    :state="state"
-    :schema="schema"
-    class="gap-4 flex flex-col w-60"
-    @submit="onSubmit"
-    @error="onError"
-  >
-    <UFormField label="Email" name="email">
-      <UInput v-model="state.email" placeholder="john@lennon.com" />
-    </UFormField>
-
-    <UFormField label="Password" name="password">
-      <UInput v-model="state.password" type="password" />
-    </UFormField>
-
-    <div>
-      <UCheckbox v-model="checked" name="check" label="Check me" @change="state.nested = {}" />
-    </div>
-
-    <UForm v-if="checked && state.nested" :state="state.nested" :schema="nestedSchema">
-      <UFormField label="Phone" name="phone">
-        <UInput v-model="state.nested.phone" />
-      </UFormField>
-    </UForm>
-
-    <div>
-      <UButton color="neutral" type="submit">
-        Submit
-      </UButton>
-    </div>
-  </UForm>
-</template>
diff --git a/playground/app/components/FormNestedListExample.vue b/playground/app/components/FormNestedListExample.vue
deleted file mode 100644
index b2fdd3ba..00000000
--- a/playground/app/components/FormNestedListExample.vue
+++ /dev/null
@@ -1,83 +0,0 @@
-<script setup lang="ts">
-import { z } from 'zod'
-import type { FormSubmitEvent } from '@nuxt/ui'
-
-const schema = z.object({
-  email: z.string().min(2),
-  password: z.string().min(8)
-})
-
-type Schema = z.output<typeof schema>
-
-const itemSchema = z.object({
-  name: z.string().min(1),
-  price: z.string().min(1)
-})
-
-type ItemSchema = z.output<typeof itemSchema>
-
-const state = reactive<Partial<Schema & { items: Partial<ItemSchema>[] }>>({})
-
-function addItem() {
-  if (!state.items) {
-    state.items = []
-  }
-  state.items.push({})
-}
-
-function removeItem() {
-  if (state.items) {
-    state.items.pop()
-  }
-}
-
-function onSubmit(event: FormSubmitEvent<Schema>) {
-  console.log('Success', event.data)
-}
-
-function onError(event: any) {
-  console.log('Error', event)
-}
-</script>
-
-<template>
-  <UForm
-    :state="state"
-    :schema="schema"
-    class="gap-4 flex flex-col w-60"
-    @submit="onSubmit"
-    @error="onError"
-  >
-    <UFormField label="Email" name="email">
-      <UInput v-model="state.email" placeholder="john@lennon.com" />
-    </UFormField>
-
-    <UFormField label="Password" name="password">
-      <UInput v-model="state.password" type="password" />
-    </UFormField>
-
-    <UForm v-for="item, count in state.items" :key="count" :state="item" :schema="itemSchema" class="flex gap-2">
-      <UFormField label="Name" name="name">
-        <UInput v-model="item.name" />
-      </UFormField>
-      <UFormField label="Price" name="price">
-        <UInput v-model="item.price" />
-      </UFormField>
-    </UForm>
-
-    <div class="flex gap-2">
-      <UButton color="neutral" variant="subtle" size="sm" @click="addItem()">
-        Add Item
-      </UButton>
-
-      <UButton color="neutral" variant="ghost" size="sm" @click="removeItem()">
-        Remove Item
-      </UButton>
-    </div>
-    <div>
-      <UButton color="neutral" type="submit">
-        Submit
-      </UButton>
-    </div>
-  </UForm>
-</template>
diff --git a/playground/app/pages/components/form.vue b/playground/app/pages/components/form.vue
index 77a57191..9d113672 100644
--- a/playground/app/pages/components/form.vue
+++ b/playground/app/pages/components/form.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { z } from 'zod'
 import type { FormSubmitEvent } from '@nuxt/ui'
+import FormExampleElements from '../../../../docs/app/components/content/examples/form/FormExampleElements.vue'
+import FormExampleNestedList from '../../../../docs/app/components/content/examples/form/FormExampleNestedList.vue'
+import FormExampleNested from '../../../../docs/app/components/content/examples/form/FormExampleNested.vue'
 
 const schema = z.object({
   email: z.string().email(),
@@ -8,18 +11,20 @@ const schema = z.object({
   tos: z.literal(true)
 })
 
-type Schema = z.output<typeof schema>
+type Schema = z.input<typeof schema>
 
 const state = reactive<Partial<Schema>>({})
-const state2 = reactive<Partial<Schema>>({})
 
 function onSubmit(event: FormSubmitEvent<Schema>) {
   console.log(event.data)
 }
+
+const validateOn = ref(['input', 'change', 'blur'])
+const disabled = ref(false)
 </script>
 
 <template>
-  <div class="flex flex-col gap-4">
+  <div class="flex flex-col gap-8">
     <div class="flex gap-4">
       <UForm
         :state="state"
@@ -40,75 +45,24 @@ function onSubmit(event: FormSubmitEvent<Schema>) {
         </UFormField>
 
         <div>
-          <UButton color="neutral" type="submit">
+          <UButton type="submit">
             Submit
           </UButton>
         </div>
       </UForm>
-
-      <UForm
-        :state="state2"
-        :schema="schema"
-        class="gap-4 flex flex-col w-60"
-        :validate-on-input-delay="2000"
-        @submit="onSubmit"
-      >
-        <UFormField label="Email" name="email">
-          <UInput v-model="state2.email" placeholder="john@lennon.com" />
-        </UFormField>
-
-        <UFormField
-          label="Password"
-          name="password"
-          :validate-on-input-delay="50"
-          eager-validation
-        >
-          <UInput v-model="state2.password" type="password" />
-        </UFormField>
-
-        <div>
-          <UButton color="neutral" type="submit">
-            Submit
-          </UButton>
-        </div>
-      </UForm>
-      <FormNestedExample />
-      <FormNestedListExample />
+      <FormExampleNested />
+      <FormExampleNestedList />
     </div>
 
-    <USeparator class="my-8" />
+    <div class="border border-[var(--ui-border)] rounded-lg">
+      <div class="py-2 px-4 flex gap-4 items-center">
+        <UFormField label="Validate on" class="flex items-center gap-2">
+          <USelectMenu v-model="validateOn" :items="['input', 'change', 'blur']" multiple class="w-48" />
+        </UFormField>
+        <UCheckbox v-model="disabled" label="Disabled" />
+      </div>
 
-    <div class="flex gap-4 flex-wrap">
-      <div>
-        <p class="text-lg font-bold underline mb-4">
-          Validate on input
-        </p>
-        <FormElementsExample :validate-on="['input']" />
-      </div>
-      <div>
-        <p class="text-lg font-bold underline mb-4">
-          Validate on change
-        </p>
-        <FormElementsExample :validate-on="['change']" />
-      </div>
-      <div>
-        <p class="text-lg font-bold underline mb-4">
-          Validate on blur
-        </p>
-        <FormElementsExample :validate-on="['blur']" />
-      </div>
-      <div>
-        <p class="text-lg font-bold underline mb-4">
-          Default
-        </p>
-        <FormElementsExample />
-      </div>
-      <div>
-        <p class="text-lg font-bold underline mb-4">
-          Disabled
-        </p>
-        <FormElementsExample disabled />
-      </div>
+      <FormExampleElements :validate-on="validateOn" :disabled="disabled" class="border-t border-[var(--ui-border)] p-4" />
     </div>
   </div>
 </template>