playground: migrate to nuxt compatibility 4

playground/app/components/FormElementsExample.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { z } from 'zod'
+import type { FormSubmitEvent, Form } from '#ui/types/form'
+
+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.output<typeof schema>
+
+const state = reactive<Partial<Schema>>({})
+const form = ref<Form<Schema>>()
+
+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="gray" type="submit" :disabled="form?.disabled">
+        Submit
+      </UButton>
+
+      <UButton variant="outline" :disabled="form?.disabled" @click="form?.clear()">
+        Clear
+      </UButton>
+    </div>
+  </UForm>
+</template>

playground/app/components/FormNestedExample.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { z } from 'zod'
+import type { FormSubmitEvent } from '#ui/types/form'
+
+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="(event) => onSubmit(event)"
+    @error="(event) => onError(event)"
+  >
+    <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="gray" type="submit">
+        Submit
+      </UButton>
+    </div>
+  </UForm>
+</template>

playground/app/components/FormNestedListExample.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { z } from 'zod'
+import type { FormSubmitEvent } from '#ui/types/form'
+
+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()
+  }
+}
+const formItemRef = ref()
+
+function onSubmit(event: FormSubmitEvent<Schema>) {
+  console.log('Success', event.data)
+}
+
+function onError(event: any) {
+  console.log('Error', event)
+}
+</script>
+
+<template>
+  <UForm
+    ref="formItemRef"
+    :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="black" @click="addItem()">
+        Add Item
+      </UButton>
+
+      <UButton color="black" variant="ghost" @click="removeItem()">
+        Remove Item
+      </UButton>
+    </div>
+    <div>
+      <UButton color="gray" type="submit">
+        Submit
+      </UButton>
+    </div>
+  </UForm>
+</template>

playground/app/components/ModalProgrammaticExample.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+const modal = useModal()
+
+defineProps<{
+  count: number
+}>()
+</script>
+
+<template>
+  <UModal title="This modal was opened programmatically">
+    <template #footer>
+      <div class="flex w-full justify-between">
+        <p>Count: {{ count }}</p>
+        <UButton color="gray" label="Close" @click="modal.close()" />
+      </div>
+    </template>
+  </UModal>
+</template>

playground/app/components/Placeholder.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="relative overflow-hidden rounded border border-dashed border-gray-400 dark:border-gray-500 opacity-75 px-4 flex items-center justify-center">
+    <svg class="absolute inset-0 h-full w-full stroke-gray-900/10 dark:stroke-white/10" fill="none">
+      <defs>
+        <pattern
+          id="pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e"
+          x="0"
+          y="0"
+          width="10"
+          height="10"
+          patternUnits="userSpaceOnUse"
+        >
+          <path d="M-3 13 15-5M-5 5l18-18M-1 21 17 3" />
+        </pattern>
+      </defs>
+      <rect stroke="none" fill="url(#pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e)" width="100%" height="100%" />
+    </svg>
+
+    <slot />
+  </div>
+</template>

playground/app/components/SlideoverProgrammaticExample.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+const slideover = useSlideover()
+
+defineProps<{
+  count: number
+}>()
+</script>
+
+<template>
+  <USlideover title="This slideover was opened programmatically">
+    <template #footer>
+      <div class="flex w-full justify-between">
+        <p>Count: {{ count }}</p>
+        <UButton color="gray" label="Close" @click="slideover.close()" />
+      </div>
+    </template>
+  </USlideover>
+</template>