feat(Form): update and migrate valibot to v0.31.0

docs/forms/demo/Form/CustomValidation.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import {reactive} from "vue";
+
+const state = reactive({
+  email: undefined,
+  password: undefined
+})
+
+const validate = (state: any) => {
+  const errors = []
+  if (!state.email) errors.push({path: 'email', message: 'Required'})
+  if (!state.password) errors.push({path: 'password', message: 'Required'})
+  return errors
+}
+
+async function onSubmit(event) {
+  // Do something with data
+  console.log(event.data)
+}
+</script>
+
+<template>
+  <SForm :validate="validate" :state="state" class="space-y-4" @submit="onSubmit">
+    <SFormGroup label="Email" name="email">
+      <SInput v-model="state.email"/>
+    </SFormGroup>
+
+    <SFormGroup label="Password" name="password">
+      <SInput v-model="state.password" type="password"/>
+    </SFormGroup>
+
+    <SButton type="submit">
+      Submit
+    </SButton>
+  </SForm>
+</template>
+

docs/forms/demo/Form/Valibot.vue

@@ -1,42 +1,38 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import { string, object, email, minLength, Input } from 'valibot'
+import * as v from 'valibot'
+import {reactive} from "vue";
 
-const schema = object({
-  email: string([email('Invalid email')]),
-  password: string([minLength(8, 'Must be at least 8 characters')])
+const schema = v.object({
+  email: v.pipe(v.string(), v.email('Invalid email')),
+  password: v.pipe(v.string(), v.minLength(8, 'Must be at least 8 characters'))
 })
 
-type Schema = Input<typeof schema>
+type Schema = v.InferOutput<typeof schema>
 
-const state = ref({
-  email: undefined,
-  password: undefined
+const state = reactive({
+  email: '',
+  password: ''
 })
 
-async function submit (event) {
+async function onSubmit (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">
+  <SForm :schema="v.safeParser(schema)" :state="state" class="space-y-4" @submit="onSubmit">
+    <SFormGroup label="Email" name="email">
+      <SInput v-model="state.email" />
+    </SFormGroup>
+
+    <SFormGroup label="Password" name="password">
+      <SInput v-model="state.password" type="password" />
+    </SFormGroup>
+
+    <SButton type="submit">
       Submit
-    </s-button>
-  </s-form>
+    </SButton>
+  </SForm>
 </template>
+

docs/forms/form.md

@@ -3,66 +3,111 @@ outline: deep
 ---
 
 <script setup>
-import Basic from './demo/Form/Basic.vue';
 import Yup from './demo/Form/Yup.vue';
 import Zod from './demo/Form/Zod.vue';
 import Joi from './demo/Form/Joi.vue';
 import Valibot from './demo/Form/Valibot.vue';
+import CustomValidation from './demo/Form/CustomValidation.vue';
+
+const items = [
+{
+  slot: 'yup',
+  label: 'Yup'
+}, 
+{
+  slot: 'zod',
+  label: 'Zod'
+},
+{
+  slot: 'joi',
+  label: 'Joi'
+},
+{
+  slot: 'valibot',
+  label: 'Valibot'
+}
+]
 </script>
 
 # Form
 
-Use the Form component to validate form data using schema libraries such as Yup, Zod, Joi, Valibot or your own
-validation logic. It works seamlessly with the FormGroup component to automatically display error messages around form
-elements.
+Collect and validate form data.
 
-The Form component requires the `validate` and `state` props for form validation.
+## Usage
 
-- `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.
+Use the Form component to validate form data using schema libraries such
+as [Yup](https://github.com/jquense/yup), [Zod](https://github.com/colinhacks/zod), [Joi](https://github.com/hapijs/joi), [Valibot](https://valibot.dev/),
+or your own validation logic.
 
-<DemoContainer>
-  <Basic/>
-</DemoContainer>
+It works with the [FormGroup](/forms/form-group) component to display error messages around form elements
+automatically.
+
+The form component requires two props:
 
-<<< @/forms/demo/Form/Basic.vue
+- `state` - a reactive object holding the form's state.
+- `schema` - a schema object from [Yup](#yup), [Zod](#zod), [Joi](#joi), or [Valibot](#valibot).
+
+::: info
+Note that **no validation library is included** by default, so ensure you **install the one you need**.
+:::
 
 ## Schema
 
-You can provide a schema from Yup, Zod or Joi, Valibot through the `schema` prop to validate the state. It's important to
+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>
+  <STabs :items="items" class="w-full space-y-2">
+    <template #yup="{ item }">
+      <DemoContainer>
+        <Yup/>
+      </DemoContainer>
 
 <<< @/forms/demo/Form/Yup.vue
 
-### Zod
+  </template>
 
+<template #zod="{ item }">
 <DemoContainer>
-  <Zod/>
+<Zod/>
 </DemoContainer>
 
 <<< @/forms/demo/Form/Zod.vue
 
-### Joi
-
-<DemoContainer>
-  <Joi/>
-</DemoContainer>
+  </template>
+<template #joi="{ item }">
+      <DemoContainer>
+        <Joi/>
+      </DemoContainer>
 
 <<< @/forms/demo/Form/Joi.vue
 
-### Valibot
+  </template>
+<template #valibot="{ item }">
+      <DemoContainer>
+        <Valibot/>
+      </DemoContainer>
+
+<<< @/forms/demo/Form/Valibot.vue
+
+  </template>
+</STabs>
+
+## Custom validation
+
+Use the `validate` prop to apply your own validation logic.
+
+The validation function must return a list of errors with the following attributes:
+
+- `message` - Error message for display.
+- `path` - Path to the form element corresponding to the `name` attribute.
+
+::: info
+Note that it can be used alongside the `schema` prop to handle complex use cases.
+:::
 
 <DemoContainer>
-  <Valibot/>
+    <CustomValidation/>
 </DemoContainer>
 
-<<< @/forms/demo/Form/Valibot.vue
+<<< @/forms/demo/Form/CustomValidation.vue

package.json

@@ -1,6 +1,6 @@
 {
   "name": "stellar-ui",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "license": "MIT",
   "scripts": {
     "build": "rimraf dist && run-p build:stellar build:helpers",
@@ -21,10 +21,10 @@
     "eslint-plugin-import": "^2.29.1",
     "npm-run-all": "^4.1.5",
     "rimraf": "^5.0.7",
-    "sass": "^1.77.4",
+    "sass": "^1.77.5",
     "tailwindcss": "^3.4.4",
     "typescript": "latest",
-    "vite": "^5.2.13",
+    "vite": "^5.3.1",
     "vitepress": "^1.2.3",
     "vue-tsc": "^2.0.21"
   },
@@ -69,19 +69,19 @@
     "@docsearch/js": "^3.6.0",
     "@headlessui/vue": "^1.7.22",
     "@iconify-json/heroicons": "^1.1.21",
-    "@iconify-json/lucide": "^1.1.191",
+    "@iconify-json/lucide": "^1.1.192",
     "@iconify-json/mdi": "^1.1.66",
-    "@iconify/json": "^2.2.218",
+    "@iconify/json": "^2.2.219",
     "@iconify/tailwind": "^1.1.1",
     "@popperjs/core": "^2.11.8",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.13",
-    "@vueuse/core": "^10.10.0",
-    "@vueuse/integrations": "^10.10.0",
-    "@vueuse/math": "^10.10.0",
-    "@vueuse/shared": "^10.10.0",
+    "@vueuse/core": "^10.11.0",
+    "@vueuse/integrations": "^10.11.0",
+    "@vueuse/math": "^10.11.0",
+    "@vueuse/shared": "^10.11.0",
     "autoprefixer": "^10.4.19",
     "cssnano": "^7.0.2",
     "defu": "^6.1.4",
@@ -95,7 +95,8 @@
     "rollup-plugin-pure": "^0.2.1",
     "scule": "^1.3.0",
     "tailwind-merge": "^2.3.0",
-    "valibot": "^0.30.0",
+    "valibot30": "npm:[email protected]",
+    "valibot": "^0.31.1",
     "vite-plugin-dts": "^3.9.1",
     "vue-demi": "^0.14.8",
     "yup": "^1.4.0",