feat: add isLoading boolean and complete playground

Author: JB AUBREE

README.md

@@ -136,15 +136,16 @@ Returns an object containing the following properties:
 - `validate`: Function to validate the form.
 - `errors`: Reactive reference to the current validation errors.
 - `isValid`: Reactive reference indicating whether the form is valid.
+- `isLoading`: Reactive reference indicating if the form validation is in progress.
 - `errorCount`: Reactive reference to the number of errors.
 - `clearErrors`: Function to clear validation errors.
 - `getErrorMessage`: Function to get the error message for a specific field.
 - `focusFirstErroredInput`: Function to focus the first input with an error.
 - `focusInput`: Function to focus a specific input.
 
-## Example Tests
+## Example
 
-Refer to the `useFormValidation.test.ts` file for comprehensive test cases that demonstrate the functionality and usage of the composable.
+Refer to the `playground` folder for comprehensive use cases that demonstrate the functionality and usage of the composable.
 
 ## License
 

playground/package.json

@@ -14,10 +14,13 @@
     "vue": "^3.5.12"
   },
   "devDependencies": {
+    "@iconify-json/ph": "^1.1.11",
     "@types/node": "^20.16.11",
     "@vitejs/plugin-vue": "^5.1.4",
     "@vue/tsconfig": "^0.5.1",
     "typescript": "~5.5.4",
+    "unocss": "^0.63.6",
+    "unuse-ui": "^0.1.24",
     "vite": "^5.4.8",
     "vue-tsc": "^2.1.6",
     "vue-use-form-validation": "workspace:*",

playground/src/App.vue

@@ -1,23 +1,74 @@
 <script setup lang="ts">
+import { UButton, UCard, UContainer, UFormGroup, UIcon, UInput, UNotifications, useToast, UText } from 'unuse-ui'
 import { ref } from 'vue'
 import { useFormValidation } from 'vue-use-form-validation'
 import * as z from 'zod'
 
+const toast = useToast()
+
 const schema = z.object({
-  field1: z.string().min(1, 'field1 is required'),
-  field2: z.string().email('Invalid field2'),
+  email: z.string().email(),
+  password: z.string().min(8),
 })
 
 const form = ref({
-  field1: '',
-  field2: '',
+  email: '',
+  password: '',
 })
 
-const { validate } = useFormValidation(schema, form)
+const {
+  errors,
+  errorCount,
+  hasError,
+  isLoading,
+  isValid,
+  focusFirstErroredInput,
+  focusInput,
+  getErrorMessage,
+  validate,
+} = useFormValidation(schema, form)
 
-await validate()
+async function onSubmit() {
+  await validate()
+  if (!isValid.value) {
+    focusFirstErroredInput()
+    return
+  }
+  toast.add({ title: 'Form is valid !', icon: 'icon-ph-check-circle', color: 'success' })
+}
 </script>
 
 <template>
-  Hi
+  <UContainer class="py-5">
+    <UText as="h1" label="Form example" class="mb-5" :ui="{ font: 'font-bold', size: 'text-2xl' }" />
+    <UCard v-if="hasError" class="mb-5" :ui="{ background: 'bg-red-200 dark:bg-red-600', body: { base: 'flex flex-col items-start gap-2' } }">
+      <UText :label="`Form has ${errorCount} ${errorCount > 1 ? 'errors' : 'error'}:`" :ui="{ font: 'font-bold', size: 'text-lg' }" class="mb-1" />
+      <div
+        v-for="
+          error, i in Object.keys(errors) as Array<keyof typeof errors>
+        "
+        :key="i"
+        class="flex items-center"
+      >
+        <UIcon name="icon-ph-dot-bold" color="dark" />
+        <UButton
+          class="ml-3" color="dark" :is-padded="false" variant="link"
+          :label="getErrorMessage(error)"
+          @click="focusInput({ inputName: error })"
+        />
+      </div>
+    </UCard>
+    <form class="flex flex-col gap-3">
+      <UFormGroup label="Email" :error="getErrorMessage('email')" is-required>
+        <UInput v-model="form.email" name="email" type="email" placeholder="[email protected]" autofocus size="md" />
+      </UFormGroup>
+      <UFormGroup label="Password" :error="getErrorMessage('password')" is-required>
+        <UInput v-model="form.password" name="password" type="password" placeholder="**********" size="md" />
+      </UFormGroup>
+      <UButton label="Submit" is-block :is-loading="isLoading" @click="onSubmit" />
+    </form>
+  </UContainer>
+  <Teleport to="body">
+    <UNotifications />
+  </Teleport>
 </template>

playground/src/main.ts

@@ -1,5 +1,12 @@
+// @unocss-include
+import { UnuseUI } from 'unuse-ui'
 import { createApp } from 'vue'
 
 import App from './App.vue'
 
-createApp(App).mount('#app')
+import 'unuse-ui/dist/style.css'
+import 'uno.css'
+
+createApp(App)
+  .use(UnuseUI)
+  .mount('#app')

playground/uno.config.ts

@@ -0,0 +1,19 @@
+import { defineConfig, presetIcons, presetUno } from 'unocss'
+import { presetUnuse } from 'unuse-ui'
+
+export default defineConfig({
+  presets: [
+    presetIcons({
+      prefix: 'icon-',
+      scale: 1,
+      warn: true,
+    }),
+    presetUno(),
+    presetUnuse(),
+  ],
+  content: {
+    pipeline: {
+      include: [/.*\/unuse-ui\.js(.*)$/, './**/*.vue'],
+    },
+  },
+})

playground/vite.config.ts

@@ -1,8 +1,10 @@
-import vue from '@vitejs/plugin-vue'
+import Vue from '@vitejs/plugin-vue'
+import Unocss from 'unocss/vite'
 import { defineConfig } from 'vite'
 
 export default defineConfig({
   plugins: [
-    vue(),
+    Vue(),
+    Unocss(),
   ],
 })