Yup - Form Docs

docs/forms/demo/Form/Yup.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { object, string, InferType } from 'yup'
+
+const schema = object({
+  email: string().email('Invalid email').required('Required'),
+  password: string()
+      .min(8, 'Must be at least 8 characters')
+      .required('Required')
+})
+
+type Schema = InferType<typeof schema>
+
+const state = ref({
+  email: undefined,
+  password: undefined
+})
+
+async function submit (event) {
+  // Do something with event.data
+  console.log(event.data)
+}
+</script>
+
+<template>
+  <s-form
+      :schema="schema"
+      :state="state"
+      @submit="submit"
+      class="space-y-4"
+  >
+    <s-form-group label="Email" name="email">
+      <s-input v-model="state.email" />
+    </s-form-group>
+
+    <s-form-group label="Password" name="password">
+      <s-input v-model="state.password" type="password" />
+    </s-form-group>
+
+    <s-button type="submit">
+      Submit
+    </s-button>
+  </s-form>
+</template>

docs/forms/form.md

@@ -1,5 +1,6 @@
 <script setup>
 import Basic from './demo/Form/Basic.vue';
+import Yup from './demo/Form/Yup.vue';
 </script>
 
 # Form
@@ -10,14 +11,27 @@ elements.
 
 The Form component requires the `validate` and `state` props for form validation.
 
-
 - `state` - a reactive object that holds the current state of the form.
-- `validate` - a function that takes the form's state as input and returns an array of `FormError` objects with the following fields:
-  - `message` - the error message to display.
-  - `path` - the path to the form element matching the name.
+- `validate` - a function that takes the form's state as input and returns an array of `FormError` objects with the
+  following fields:
+    - `message` - the error message to display.
+    - `path` - the path to the form element matching the name.
 
 <DemoContainer>
   <Basic/>
 </DemoContainer>
 
-<<< @/forms/demo/Form/Basic.vue
+<<< @/forms/demo/Form/Basic.vue
+
+# Schema
+
+You can provide a schema from Yup, Zod or Joi, Valibot through the `schema` prop to validate the state. It's important to
+note that **none of these libraries are included** by default, so make sure to **install the one you need**.
+
+## Yup
+
+<DemoContainer>
+  <Yup/>
+</DemoContainer>
+
+<<< @/forms/demo/Form/Yup.vue