srcdev-nuxt-forms 0.2.0 → 1.0.1

package/pages/forms/examples/material/text-fields.vue

@@ -3,18 +3,8 @@
     <NuxtLayout name="default">
       <template #layout-content>
         <div>
-          <h1>Material UI text fields ({{ compact ? 'compact' : 'default' }})</h1>
-          <ul class="flex-group">
-            <li>
-              <InputButtonSubmit type="button" @click.stop.prevent="swapCompact(false)" button-text="Use Default UI" theme="secondary" size="normal" />
-            </li>
-            <li>
-              <InputButtonSubmit type="button" @click.stop.prevent="swapCompact(true)" button-text="Use Compact UI" theme="secondary" size="normal" />
-            </li>
-          </ul>
-
-          <p>Example test fields in default material UI</p>
-          <p>Use 'test@test.com' to trigger server errors</p>
+          <h1 class="header-1">Material UI text fields ({{ compact ? 'compact' : 'default' }})</h1>
+          <p class="body-normal">Use 'test@test.com' to trigger server errors</p>
         </div>
         <ContentGrid>
           <template #slot1>
@@ -25,77 +15,148 @@
                     <div aria-live="assertive" id="aria-live-message"></div>
                     <FormField width="wide" :has-gutter="false">
                       <template #default>
-                        <InputEmailMaterial
+                        <InputTextWithLabel
+                          v-model="state.emailAddress"
+                          type="email"
+                          :maxlength="fieldMaxLength('email')"
                           id="emailAddress"
                           name="emailAddress"
-                          validation="emailaddress"
+                          placeholder="eg. name@domain.com"
+                          label="Email address"
+                          :errorMessage="formErrors?.emailAddress?._errors[0] ?? ''"
+                          :fieldHasError="Boolean(zodFormControl.submitAttempted && formErrors?.emailAddress)"
                           :required="true"
-                          :c12="{
-                            label: 'Your Email Address',
-                            placeholder: 'eg. joe@example.com',
-                            errorMessage: 'Please enter a valid email address',
-                          }"
-                          v-model="formData"
-                          theme="secondary"
-                          :compact
-                        />
+                          :styleClassPassthrough="['style-1', 'style-2']"
+                          theme="primary"
+                        >
+                          <template #left>
+                            <Icon name="radix-icons:envelope-closed" class="icon" />
+                          </template>
+                        </InputTextWithLabel>
                       </template>
                     </FormField>
 
                     <FormField width="wide" :has-gutter="false">
                       <template #default>
-                        <InputTextMaterial
+                        <InputTextWithLabel
+                          v-model="state.username"
+                          type="text"
+                          :maxlength="fieldMaxLength('username')"
                           id="username"
                           name="username"
-                          validation="username"
+                          placeholder="eg. name@domain.com"
+                          label="Username"
+                          :errorMessage="formErrors?.username?._errors[0] ?? ''"
+                          :fieldHasError="Boolean(zodFormControl.submitAttempted && formErrors?.username)"
                           :required="true"
-                          :c12="{
-                            label: 'Your Username',
-                            placeholder: 'eg. YourUserName',
-                            errorMessage: 'Please enter a valid username',
-                          }"
-                          v-model="formData"
-                          theme="secondary"
-                          :compact
-                        />
+                          :styleClassPassthrough="['style-1', 'style-2']"
+                          theme="primary"
+                        >
+                          <template #left>
+                            <Icon name="radix-icons:person" class="icon" />
+                          </template>
+                        </InputTextWithLabel>
                       </template>
                     </FormField>
 
                     <FormField width="wide" :has-gutter="false">
                       <template #default>
-                        <InputPasswordMaterial
+                        <InputPasswordWithLabel
+                          v-model="state.password"
+                          :maxlength="fieldMaxLength('password')"
                           id="password"
                           name="password"
-                          validation="password"
+                          placeholder="eg. a mixure of numbers and letters"
+                          label="Password"
+                          :errorMessage="formErrors?.password?._errors[0] ?? ''"
+                          :fieldHasError="Boolean(zodFormControl.submitAttempted && formErrors?.password)"
                           :required="true"
-                          :c12="{
-                            label: 'Password',
-                            placeholder: 'eg. Your5illYPa55w0rd',
-                            errorMessage: 'Please enter a valid password',
-                          }"
-                          v-model="formData"
-                          theme="secondary"
-                          :compact
-                        />
+                          :styleClassPassthrough="['style-1', 'style-2']"
+                          theme="primary"
+                        >
+                          <template #right>
+                            <Icon name="radix-icons:eye-open" class="icon" />
+                          </template>
+                        </InputPasswordWithLabel>
                       </template>
                     </FormField>
 
                     <FormField width="wide" :has-gutter="false">
                       <template #default>
-                        <InputTextareaMaterial
+                        <InputTextareaWithLabel
+                          v-model="state.message"
+                          :maxlength="fieldMaxLength('message')"
                           id="message"
                           name="message"
-                          validation="message"
+                          placeholder="Type your message here"
+                          label="Your mesage"
+                          :errorMessage="formErrors?.message?._errors[0] ?? ''"
+                          :fieldHasError="Boolean(zodFormControl.submitAttempted && formErrors?.message)"
                           :required="true"
-                          :c12="{
-                            label: 'Message',
-                            placeholder: 'eg. Type something here',
-                            errorMessage: 'Bad characters in message',
-                          }"
-                          v-model="formData"
-                          theme="secondary"
-                          :compact
-                        />
+                          :styleClassPassthrough="['style-1', 'style-2']"
+                        >
+                        </InputTextareaWithLabel>
+                      </template>
+                    </FormField>
+
+                    <FormField width="wide" :has-gutter="false">
+                      <template #default>
+                        <InputTextAsNumberWithLabel
+                          v-model.number="state.count2"
+                          :maxlength="fieldMaxLength('count2')"
+                          :min="25"
+                          :max="75"
+                          :step="5"
+                          id="count2"
+                          name="count2"
+                          placeholder="eg. 10"
+                          label="How many things? Between 25 & 75"
+                          :errorMessage="formErrors?.count2?._errors[0] ?? ''"
+                          :fieldHasError="Boolean(zodFormControl.submitAttempted && formErrors?.count2)"
+                          :required="true"
+                          :styleClassPassthrough="['style-1', 'style-2']"
+                          theme="primary"
+                        >
+                          <template #description>
+                            <p class="label-description">Input type="text" inputmode="numeric"</p>
+                          </template>
+                          <template #left>
+                            <Icon name="gridicons:minus-small" class="icon" />
+                          </template>
+                          <template #right>
+                            <Icon name="gridicons:plus-small" class="icon" />
+                          </template>
+                        </InputTextAsNumberWithLabel>
+                      </template>
+                    </FormField>
+
+                    <FormField width="wide" :has-gutter="false">
+                      <template #default>
+                        <InputNumberDefault
+                          id="count"
+                          name="count"
+                          label="How many things? Between 25 & 75 , step 5"
+                          :min="25"
+                          :max="75"
+                          :step="5"
+                          placeholder="eg. What\'s your count?"
+                          :errorMessage="formErrors?.count?._errors[0] ?? ''"
+                          :fieldHasError="Boolean(zodFormControl.submitAttempted && formErrors?.count)"
+                          :required="true"
+                          :styleClassPassthrough="['count-1', 'count-2']"
+                          v-model.number="state.count"
+                          theme="primary"
+                        >
+                          <template #description>
+                            <p class="label-description">Input type="number" inputmode="numeric"</p>
+                          </template>
+                          <template #left>
+                            <Icon name="gridicons:minus-small" class="icon" />
+                          </template>
+                          <template #right>
+                            <Icon name="gridicons:plus-small" class="icon" />
+                          </template>
+                        </InputNumberDefault>
                       </template>
                     </FormField>
 
@@ -104,28 +165,66 @@
                         <InputRangeDefault
                           id="score"
                           name="score"
+                          label="Score between 0 & 100"
                           :min="0"
                           :max="100"
-                          :step="1"
+                          :step="10"
+                          placeholder="eg. What\'s your score?"
+                          :errorMessage="formErrors?.score?._errors[0] ?? ''"
+                          :fieldHasError="Boolean(zodFormControl.submitAttempted && formErrors?.score)"
                           :required="true"
-                          validation="positiveNumber0to100"
-                          :c12="{
-                            label: 'Score between 0 & 100',
-                            placeholder: 'eg. What\'s your score?',
-                            errorMessage: 'Score between 0 & 100',
-                          }"
-                          v-model="formData"
-                          theme="secondary"
+                          :styleClassPassthrough="['style-1', 'style-2']"
+                          v-model.number="state.score"
+                          theme="primary"
                         >
                           <template #description>
                             <p class="label-description">This is a description of what the user is required to do</p>
                           </template>
-                          <template #left>&lt;</template>
-                          <template #right>&gt;</template>
+                          <template #datalist>
+                            <datalist class="input-range-datalist" id="score-datalist">
+                              <option value="0" label="Rubbish!"></option>
+                              <option value="25" label="Below par"></option>
+                              <option value="50" label="Average"></option>
+                              <option value="75" label="Quite good"></option>
+                              <option value="100" label="Excellent"></option>
+                            </datalist>
+                          </template>
+                          <template #left>
+                            <Icon name="gridicons:minus-small" class="icon" />
+                          </template>
+                          <template #right>
+                            <Icon name="gridicons:plus-small" class="icon" />
+                          </template>
                         </InputRangeDefault>
                       </template>
                     </FormField>
 
+                    <FormField v-if="titleData !== null" width="wide" :has-gutter="false">
+                      <template #default>
+                        <MultipleRadiobuttons
+                          id="title"
+                          name="title"
+                          legend="What is your title"
+                          :required="true"
+                          label="Check one"
+                          placeholder="eg. Type something here"
+                          :errorMessage="formErrors?.title?._errors[0] ?? ''"
+                          :fieldHasError="Boolean(zodFormControl.submitAttempted && formErrors?.title)"
+                          v-model="state.title"
+                          v-model:fieldData="titleData"
+                          size="normal"
+                          checkbox-style="cross"
+                          checkbox-appearance="with-decorator"
+                          optionsLayout="equal-widths"
+                          theme="primary"
+                        >
+                          <template #description>
+                            <p class="label-description">This is description: optionsLayout = 'equal-widths/inline'</p>
+                          </template>
+                        </MultipleRadiobuttons>
+                      </template>
+                    </FormField>
+
                     <FormField v-if="citiesData !== null" width="wide" :has-gutter="false">
                       <template #default>
                         <MultipleCheckboxes
@@ -133,17 +232,17 @@
                           name="cities"
                           legend="Choose a location"
                           :required="true"
-                          :c12="{
-                            label: 'Check all Cities you like',
-                            placeholder: 'eg. Type something here',
-                            errorMessage: 'Please choose at least 1 location',
-                          }"
-                          v-model="formData"
+                          label="Check all Cities you like"
+                          placeholder="eg. Type something here"
+                          :errorMessage="formErrors?.cities?._errors[0] ?? ''"
+                          :fieldHasError="Boolean(zodFormControl.submitAttempted && formErrors?.cities)"
+                          v-model="state.cities"
                           v-model:fieldData="citiesData"
-                          theme="secondary"
                           size="normal"
-                          checkbox-style="check"
+                          checkbox-style="cross"
                           checkbox-appearance="with-decorator"
+                          optionsLayout="inline"
+                          theme="primary"
                         >
                           <template #description>
                             <p class="label-description">This is description: optionsLayout = 'equal-widths'</p>
@@ -159,18 +258,17 @@
                           name="countries"
                           legend="Choose a country"
                           :required="true"
-                          :c12="{
-                            label: 'Check all countries you like',
-                            placeholder: 'eg. Choose some locations',
-                            errorMessage: 'Please select a country',
-                          }"
-                          v-model="formData"
+                          label="Check all Countries you like"
+                          placeholder="eg. Type something here"
+                          :errorMessage="formErrors?.countries?._errors[0] ?? ''"
+                          :fieldHasError="Boolean(zodFormControl.submitAttempted && formErrors?.countries)"
+                          v-model="state.countries"
                           v-model:fieldData="countriesData"
-                          theme="secondary"
                           size="normal"
-                          options-layout="inline"
-                          checkbox-style="cross"
+                          checkbox-style="check"
                           checkbox-appearance="with-decorator"
+                          optionsLayout="equal-widths"
+                          theme="primary"
                         >
                           <template #description>
                             <p class="label-description">This is description: optionsLayout = 'inline'</p>
@@ -179,29 +277,46 @@
                       </template>
                     </FormField>
 
-                    <FormField v-if="titleData !== null" width="wide" :has-gutter="false">
+                    <FormField width="wide" :has-gutter="false">
                       <template #default>
-                        <MultipleRadio
-                          id="title"
-                          name="title"
-                          legend="Choose a title"
+                        <SingleCheckbox
+                          id="agreed"
+                          name="agreed"
+                          legend="I agree (label with description)"
+                          label="Click to agree to something"
                           :required="true"
-                          :c12="{
-                            label: 'Check all title you like',
-                            placeholder: 'eg. Choose some title',
-                            errorMessage: 'Please select a title',
-                          }"
-                          v-model="formData"
-                          v-model:fieldData="titleData"
-                          theme="secondary"
+                          :errorMessage="formErrors?.agreed?._errors[0] ?? ''"
+                          :fieldHasError="Boolean(zodFormControl.submitAttempted && formErrors?.agreed)"
+                          v-model="state.agreed"
                           size="normal"
-                          options-layout="equal-widths"
-                          radio-appearance="with-decorator"
+                          checkbox-style="check"
+                          checkbox-appearance="with-decorator"
+                          theme="primary"
                         >
                           <template #description>
-                            <p class="label-description">This is description: optionsLayout = 'equal-widths'</p>
+                            <p class="label-description">You must <strong>agree</strong> to continue</p>
                           </template>
-                        </MultipleRadio>
+                        </SingleCheckbox>
+                      </template>
+                    </FormField>
+
+                    <FormField width="wide" :has-gutter="false">
+                      <template #default>
+                        <SingleCheckbox
+                          id="agree"
+                          name="agree"
+                          legend="I agree (label no description)"
+                          label="Click to agree to something"
+                          :required="true"
+                          :errorMessage="formErrors?.agree?._errors[0] ?? ''"
+                          :fieldHasError="Boolean(zodFormControl.submitAttempted && formErrors?.agree)"
+                          v-model="state.agree"
+                          size="normal"
+                          checkbox-style="check"
+                          checkbox-appearance="with-decorator"
+                          theme="primary"
+                        >
+                        </SingleCheckbox>
                       </template>
                     </FormField>
 
@@ -210,21 +325,18 @@
                         <SingleCheckbox
                           id="terms"
                           name="terms"
-                          legend="Accept terms and conditions"
+                          legend="Terms and conditions"
                           :required="true"
-                          :c12="{
-                            label: 'Accept terms and conditions',
-                            placeholder: 'eg. Type something here',
-                            errorMessage: 'Please accept our terms and conditions',
-                          }"
-                          v-model="formData"
-                          theme="secondary"
+                          :errorMessage="formErrors?.terms?._errors[0] ?? ''"
+                          :fieldHasError="Boolean(zodFormControl.submitAttempted && formErrors?.terms)"
+                          v-model="state.terms"
                           size="normal"
-                          checkbox-appearance="with-decorator"
                           checkbox-style="check"
+                          checkbox-appearance="with-decorator"
+                          theme="primary"
                         >
-                          <template #description>
-                            <p class="label-description">This is a description of what the user is required to do</p>
+                          <template #labelContent>
+                            <span class="body-normal">You must agree to our <NuxtLink to="/typography" class="link-normal">terms and conditions</NuxtLink> to continue</span>
                           </template>
                         </SingleCheckbox>
                       </template>
@@ -232,7 +344,15 @@
 
                     <FormField width="wide" :has-gutter="false">
                       <template #default>
-                        <InputButtonSubmit type="button" @click.stop.prevent="submitForm()" :is-pending="false" :readonly="submitDisabled" button-text="Submit" theme="secondary" size="medium" />
+                        <InputButtonSubmit
+                          type="button"
+                          @click.stop.prevent="submitForm()"
+                          :is-pending="false"
+                          :readonly="zodFormControl.submitDisabled"
+                          button-text="Submit"
+                          theme="primary"
+                          size="medium"
+                        />
                       </template>
                     </FormField>
                   </form>
@@ -242,9 +362,18 @@
           </template>
           <template #slot2>
             <ClientOnly>
-              <p>Client only content</p>
+              <p>Client only state</p>
               <pre>
-                {{ formData }}
+                {{ state }}
+              </pre>
+              <p>Client only zodFormControl</p>
+              <pre>
+                {{ zodFormControl }}
+              </pre>
+              <p>Client only formErrors</p>
+
+              <pre>
+                {{ formErrors }}
               </pre>
             </ClientOnly>
           </template>
@@ -255,7 +384,8 @@
 </template>
 
 <script setup lang="ts">
-import type { IFieldsInitialState, IOptionsConfig, IFormMultipleOptions } from '@/types/types.forms';
+import { z, ZodError } from 'zod';
+import type { IFieldsInitialState, TFieldsInitialState, IOptionsConfig, IFormMultipleOptions } from '@/types/types.forms';
 
 definePageMeta({
   layout: false,
@@ -284,46 +414,143 @@ const { data: titleData } = await useFetch<IFormMultipleOptions>('/api/utils?cat
 /*
  * Setup forms
  */
-const fieldsInitialState = ref<IFieldsInitialState>({
-  // emailAddress: "simon@simon.com",
-  // emailAddress: "test@test.com",
+const formSchema = reactive(
+  z
+    .object({
+      emailAddress: z
+        .string({
+          required_error: 'Email address is required',
+        })
+        .email({ message: 'Invalid email address' })
+        .refine((email) => email !== zodFormControl.previousState.emailAddress.value, {
+          message: 'This email address has already been used',
+        }),
+      username: z
+        .string({
+          required_error: 'Username is required',
+        })
+        .trim()
+        .min(2, 'Username is too short')
+        .max(25, 'Username is too long')
+        .refine((email) => email !== zodFormControl.previousState.username.value, {
+          message: 'This username has already been used',
+        }),
+      password: z
+        .string()
+        .trim()
+        .min(8, 'Password is too short')
+        .max(25, 'Password is too long')
+        .refine((email) => email !== zodFormControl.previousState.password.value, {
+          message: "You've already used this password",
+        }),
+      message: z.string().trim().min(2, 'Message is too short').max(255, 'Message is too long'),
+      count: z
+        .number({
+          required_error: 'Count is required',
+          invalid_type_error: 'Count must be a number',
+        })
+        .int({ message: 'Count must be a whole number' })
+        .gte(25, 'Count must be between 25 and 75')
+        .lte(75, 'Count must be between 25 and 75')
+        .multipleOf(5, 'Count must be a multiple of 5'),
+      count2: z
+        .number({
+          required_error: 'Count is required',
+          invalid_type_error: 'Count must be a number',
+        })
+        .int({ message: 'Count must be a whole number' })
+        .gte(25, 'Count must be between 25 and 75')
+        .lte(75, 'Count must be between 25 and 75'),
+      score: z
+        .number({
+          required_error: 'Score is required',
+          invalid_type_error: 'Score must be a number',
+        })
+        .gte(0)
+        .lte(100),
+      cities: z.array(z.string()).min(1, 'Please select at least one city'),
+      countries: z.array(z.string()).min(2, 'Please select at least 2 countries').max(5, 'Please select no more than 5 countries'),
+      title: z.string().min(1, { message: 'Title is required' }),
+      agreed: z.boolean().refine((val) => val === true, { message: 'You must tick this box' }),
+      agree: z.boolean().refine((val) => val === true, { message: 'You must tick this box' }),
+      terms: z.boolean().refine((val) => val === true, { message: 'You must accept our terms' }),
+    })
+    .required({
+      emailAddress: true,
+      username: true,
+      password: true,
+      message: true,
+      count: true,
+      count2: true,
+      score: true,
+      cities: true,
+      countries: true,
+      title: true,
+      agreed: true,
+      agree: true,
+      terms: true,
+    })
+);
+
+type formSchema = z.infer<typeof formSchema>;
+const formErrors = computed<z.ZodFormattedError<formSchema> | null>(() => zodErrorObj.value);
+
+const state = reactive({
   emailAddress: '',
-  // username: "",
   username: '',
-  // password: "!+Password123",
   password: '',
   message: '',
-  // message: 'This is test 1234567890,.<>?@;:',
+  count: 25,
+  count2: 25,
   score: 50,
   cities: [],
   countries: [],
-  title: [],
+  title: '',
+  agreed: false,
+  agree: false,
   terms: false,
 });
 
-// Setup formData
-const { formData, initFormData, getErrorCount, updateErrorMessages, formIsValid, submitDisabled, useApiErrors } = useFormControl();
-await initFormData(fieldsInitialState);
+const {
+  initZodForm,
+  zodFormControl,
+  zodErrorObj,
+  // formErrors,
+  pushCustomErrors,
+  doZodValidate,
+  fieldMaxLength,
+} = useZodValidation(formSchema);
 
-async function postFormData() {
+initZodForm();
+
+const submitForm = async () => {
+  zodFormControl.submitAttempted = true;
+  if (!(await doZodValidate(state))) return;
+  zodFormControl.displayLoader = true;
   try {
+    console.log('Form valid - post it');
     const data = await $fetch('/api/textFields', {
       method: 'post',
-      body: formData.value.data,
-      onResponse({ response }) {
+      body: state,
+      async onResponse({ response }) {
         if (response.status === 400) {
           console.log('onResponse', response);
           console.log(response.status);
 
-          useApiErrors(response._data.data.errors);
+          // useApiErrors(response._data.data.errors);
           // for (const [key, message] of Object.entries(response._data.data.errors)) {
           //   console.log(`${key}: ${message}`);
           //   updateErrorMessages(key, message);
           // }
+
+          // if (error instanceof Error) {
+          await pushCustomErrors(response._data, state);
+          // zodFormControl.formIsValid = false;
+          // }
+          // zodFormControl.submitAttempted = false;
         }
         if (response.status === 200) {
-          formData.value.isPending = false;
-          formData.value.submitSuccess = true;
+          zodFormControl.submitSuccessful = true;
         }
       },
     });
@@ -331,29 +558,19 @@ async function postFormData() {
     // return data;
   } catch (error) {
     console.warn('2: An error occured posting form data', error);
-  }
-}
-
-const submitForm = async () => {
-  getErrorCount(true);
-
-  if (formIsValid.value) {
-    formData.value.isPending = true;
-    formData.value.submitDisabled = true;
-    console.log('Form is good - post it!');
-
-    postFormData();
-
-    // formData.value.errorMessages['emailAddress'] = {
-    //   useCustomError: true,
-    //   message: 'This is a custom error message',
-    // };
-
-    // executePost();
-  } else {
-    console.warn('Form has errors');
+  } finally {
+    zodFormControl.displayLoader = false;
   }
 };
+
+watch(
+  () => state,
+  () => {
+    // console.log('Watching state');
+    doZodValidate(state);
+  },
+  { deep: true }
+);
 </script>
 
 <style lang="css">
@@ -369,4 +586,9 @@ ul.flex-group {
   list-style-type: none;
   padding: 0;
 }
+
+.header-1 {
+  font-family: var(--font-family);
+  color: var(--brand-success-text-text);
+}
 </style>