docs(form): add regle example (#5178)

Co-authored-by: Romain Hamel <[email protected]>

Author: victorgarciaesgi

docs/app/components/content/examples/form/FormExampleRegle.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { useRegle, type InferInput } from '@regle/core'
+import { required, email, minLength, withMessage } from '@regle/rules'
+import type { FormSubmitEvent } from '@nuxt/ui'
+
+const { r$ } = useRegle({ email: '', password: '' }, {
+  email: { required, email: withMessage(email, 'Invalid email') },
+  password: { required, minLength: withMessage(minLength(8), 'Must be at least 8 characters') }
+})
+
+type Schema = InferInput<typeof r$>
+
+const toast = useToast()
+async function onSubmit(event: FormSubmitEvent<Schema>) {
+  toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'success' })
+  console.log(event.data)
+}
+</script>
+
+<template>
+  <UForm :schema="r$" :state="r$.$value" class="space-y-4" @submit="onSubmit">
+    <UFormField label="Email" name="email">
+      <UInput v-model="r$.$value.email" />
+    </UFormField>
+
+    <UFormField label="Password" name="password">
+      <UInput v-model="r$.$value.password" type="password" />
+    </UFormField>
+
+    <UButton type="submit">
+      Submit
+    </UButton>
+  </UForm>
+</template>

docs/content/docs/2.components/form.md

@@ -9,7 +9,7 @@ links:
 
 ## Usage
 
-Use the Form component to validate form data using any validation library supporting [Standard Schema](https://github.com/standard-schema/standard-schema) such as [Valibot](https://github.com/fabian-hiller/valibot), [Zod](https://github.com/colinhacks/zod), [Yup](https://github.com/jquense/yup), [Joi](https://github.com/hapijs/joi) or [Superstruct](https://github.com/ianstormtaylor/superstruct) or your own validation logic.
+Use the Form component to validate form data using any validation library supporting [Standard Schema](https://github.com/standard-schema/standard-schema) such as [Valibot](https://github.com/fabian-hiller/valibot), [Zod](https://github.com/colinhacks/zod), [Regle](https://github.com/victorgarciaesgi/regle), [Yup](https://github.com/jquense/yup), [Joi](https://github.com/hapijs/joi) or [Superstruct](https://github.com/ianstormtaylor/superstruct) or your own validation logic.
 
 It works with the [FormField](/docs/components/form-field) component to display error messages around form elements automatically.
 
@@ -41,6 +41,14 @@ It requires two props:
   ---
   ::
 
+  ::component-example{label="Regle"}
+  ---
+  name: 'form-example-regle'
+  props:
+    class: 'w-60'
+  ---
+  ::
+
   ::component-example{label="Yup"}
   ---
   name: 'form-example-yup'

docs/package.json

@@ -22,6 +22,8 @@
     "@nuxt/ui": "workspace:*",
     "@nuxtjs/plausible": "^2.0.1",
     "@octokit/rest": "^22.0.0",
+    "@regle/core": "^1.9.5",
+    "@regle/rules": "^1.9.5",
     "@vercel/analytics": "^1.5.0",
     "@vercel/speed-insights": "^1.2.0",
     "@vueuse/integrations": "^13.9.0",