srcdev-nuxt-forms 0.0.23 → 0.2.0

package/composables/useFormControl.ts

@@ -1,31 +1,38 @@
-import type { IFormData, IFieldsInitialState, ICustomErrorMessage, ICustomErrorMessagesArr } from "@/types/types.forms";
+import type { IFormData, IFieldsInitialState, IFormFieldC12, IApiErrorMessages, ICustomErrorMessage, IErrorMessagesArr } from '@/types/types.forms';
+import { formFieldC12 } from '@/components/forms/c12/utils';
 
-export function useFormControl(fieldsInitialState: IFieldsInitialState | Ref<IFieldsInitialState | null>) {
+// export function useFormControl(name: string = '') {
+export function useFormControl(name: string = '') {
   let savedInitialState = {};
 
   const formData = ref<IFormData>({
     data: {} as IFieldsInitialState,
     validityState: {},
+    dirtyFields: {},
+    focusedField: '',
     isPending: false,
     errorCount: 0,
-    customErrorMessages: {},
+    errorMessages: {},
+    formFieldsC12: {},
     hasCustomErrorMessages: false,
     formIsValid: false,
-    showErrors: false,
-    submitSuccess: false
+    submitAttempted: false,
+    submitDisabled: false,
+    submitSuccess: false,
+    displayErrorMessages: false,
   });
 
-  const initValidationState = async () => {
+  const initValidationState = async (fieldsInitialState: IFieldsInitialState | Ref<IFieldsInitialState | null>) => {
     const fields = Object.keys(fieldsInitialState.value || {});
-    const state = fields.reduce((acc, field) => {
-      acc[field] = false;
-      return acc;
+    const state = fields.reduce((accumulatedFields, field) => {
+      accumulatedFields[field] = false;
+      return accumulatedFields;
     }, {} as Record<string, boolean>);
     formData.value.validityState = state;
   };
 
-  const initFormData = async () => {
-    await initValidationState();
+  const initFormData = async (fieldsInitialState: IFieldsInitialState | Ref<IFieldsInitialState | null>) => {
+    initValidationState(fieldsInitialState);
 
     if (fieldsInitialState !== null) {
       savedInitialState = toRaw(fieldsInitialState.value) as IFieldsInitialState;
@@ -34,17 +41,46 @@ export function useFormControl(fieldsInitialState: IFieldsInitialState | Ref<IFi
     return;
   };
 
-  const getErrorCount = async () => {
+  const initFormFieldsC12 = (name: string, formFieldC12: IFormFieldC12) => {
+    formData.value.formFieldsC12[name] = formFieldC12;
+    return;
+  };
+
+  const updatePreviousValues = () => {
+    Object.keys(formData.value.data).forEach((key) => {
+      formData.value.formFieldsC12[key].previousValue = formData.value.data[key];
+    });
+  };
+
+  const getErrorCount = async (updateState: boolean = false) => {
     await nextTick();
 
     const errorCount = Object.values(formData.value.validityState).filter((value) => !value).length;
     formData.value.errorCount = errorCount;
     formData.value.formIsValid = errorCount === 0;
+
+    if (updateState) {
+      formData.value.submitDisabled = true;
+      formData.value.displayErrorMessages = formData.value.errorCount > 0;
+      formData.value.submitAttempted = true;
+    }
+
+    if (formData.value.submitDisabled) {
+      formData.value.submitDisabled = !formData.value.formIsValid;
+    }
+
+    // update fieldHasError ref
+    // if (typeof formData.value!.formFieldsC12[name] !== 'undefined') {
+    //   fieldHasError.value = formData.value!.submitAttempted && !formData.value!.formFieldsC12[name].isValid;
+    // } else {
+    //   fieldHasError.value = false;
+    // }
+
     return formData.value.errorCount;
   };
 
   // Function to count items with "useCustomError" set to true
-  const countItemsWithCustomError = (obj: ICustomErrorMessagesArr) => {
+  const countItemsWithCustomError = (obj: IErrorMessagesArr) => {
     let count = 0;
 
     for (const key in obj) {
@@ -59,44 +95,115 @@ export function useFormControl(fieldsInitialState: IFieldsInitialState | Ref<IFi
   /*
    *   Useage:
    *
-   *   const { updateCustomErrors } = useFormControl();
+   *   const { updateErrorMessages } = useFormControl();
    *
    *   Add/Update entry
    *   const sampleCustomErrorEmail = {
    *     useCustomError: true,
    *     message: "This is a sample custom error for error EMAIL",
    *   };
-   *   updateCustomErrors("email", sampleCustomErrorEmail);
+   *   updateErrorMessages("email", sampleCustomErrorEmail);
    */
-  const updateCustomErrors = (name: string, message: null | string = null, valid: boolean = false) => {
-    if (message !== null) {
-      formData.value.validityState[name] = valid;
-      formData.value.customErrorMessages[name] = {
-        useCustomError: true,
-        message
-      };
+  const updateErrorMessages = async (name: string, message: string = '', valid: boolean = false) => {
+    if (!valid) {
+      // formData.value.validityState[name] = valid;
+      // formData.value.errorMessages[name] = {
+      //   useCustomError: true,
+      //   message,
+      // };
+
+      formData.value.formFieldsC12[name].useCustomError = true;
+
+      // if (typeof message === 'string') {
+      //   formData.value.formFieldsC12[name].customErrors = message;
+      // } else if (typeof message === 'object') {
+      //   formData.value.formFieldsC12[name].customErrors = message;
+      // }
+
+      formData.value.formFieldsC12[name].customErrors = message;
+      formData.value.formFieldsC12[name].isValid = valid;
+
+      // formData.value.errorMessages[name].useCustomError = true;
+      // formData.value.errorMessages[name].message = message;
     }
-    formData.value.hasCustomErrorMessages = countItemsWithCustomError(formData.value.customErrorMessages) > 0;
+    formData.value.hasCustomErrorMessages = countItemsWithCustomError(formData.value.errorMessages) > 0;
   };
 
-  const resetForm = () => {
-    formData.value.data = toRaw(fieldsInitialState.value) as IFieldsInitialState;
-    formData.value.validityState = {};
-    formData.value.errorCount = 0;
-    formData.value.isPending = false;
-    formData.value.customErrorMessages = {};
-    formData.value.formIsValid = false;
+  const useApiErrors = async (errors: IApiErrorMessages) => {
+    // Object.keys(errors).forEach((key) => {
+    //   updateErrorMessages(key, errors[key]);
+    // });
+
+    for (const [key, message] of Object.entries(errors)) {
+      // console.log(`${key}: ${message}`);
+      updateErrorMessages(key, message);
+    }
   };
 
-  const showErrors = computed(() => {
-    return formData.value.errorCount > 0 && formData.value.isPending;
-  });
+  // const resetForm = () => {
+  //   console.log('resetForm()');
+  //   formData.value.data = toRaw(fieldsInitialState.value) as IFieldsInitialState;
+  //   formData.value.validityState = {};
+  //   formData.value.errorCount = 0;
+  //   formData.value.isPending = false;
+  //   formData.value.errorMessages = {};
+  //   formData.value.formIsValid = false;
+  // };
+
+  const fieldIsDirty = (name: string) => {
+    if (typeof formData.value.formFieldsC12[name] !== 'undefined') {
+      return formData.value.formFieldsC12[name].isDirty;
+    } else {
+      return false;
+    }
+  };
+
+  // const fieldHasError = (name: string) => {
+  //   const currentValidityState = formData.value.validityState[name];
+
+  //   if (formData.value.submitAttempted) {
+  //     return currentValidityState;
+  //   }
+  //   return false;
+  // };
+
+  // const fieldHasError = computed({
+  //   // getter
+  //   get() {
+  //     console.log(`fieldHasError getter: ${name}`);
+  //     if (typeof formData.value!.formFieldsC12[name] !== 'undefined') {
+  //       return !formData.value!.formFieldsC12[name].isValid;
+  //     }
+  //     return formData.value.validityState[name];
+  //   },
+  //   // setter
+  //   set(newValue) {
+  //     if (formData.value.submitAttempted) {
+  //       return newValue;
+  //     }
+  //     return false;
+  //   },
+  // });
+
+  // const fieldHasError = ref(false);
 
   const formIsValid = computed(() => {
-    return formData.value.errorCount === 0;
+    return formData.value.formIsValid;
+  });
+
+  const submitDisabled = computed(() => {
+    return formData.value.submitDisabled;
   });
 
   // Keep an eye on this for performance issue
+
+  // const updateFieldValidity = (name: string, valid: boolean) => {
+  //   console.log(`updateFieldValidity: name:${name} - valid:${valid}`);
+  //   console.log(formData.value);
+  //   // formData.value.formFieldsC12[name].isValid = valid;
+  //   formData.value.validityState[name] = valid;
+  // };
+
   watch(
     () => formData.value.validityState,
     () => {
@@ -105,12 +212,35 @@ export function useFormControl(fieldsInitialState: IFieldsInitialState | Ref<IFi
     { deep: true }
   );
 
-  // watch(
-  //   () => savedInitialState,
-  //   () => {
-  //     console.log("savedInitialState UPDATED", savedInitialState);
-  //   }
-  // );
+  watch(
+    () => formData.value.formFieldsC12,
+    () => {
+      formData.value.formFieldsC12;
+    },
+    { deep: true }
+  );
+
+  watch(
+    () => formData.value.isPending,
+    (newValue, oldValue) => {
+      if (newValue) {
+        updatePreviousValues();
+      }
+    }
+  );
 
-  return { formData, initFormData, getErrorCount, updateCustomErrors, resetForm, showErrors, formIsValid };
+  return {
+    formData,
+    initFormData,
+    initFormFieldsC12,
+    getErrorCount,
+    updateErrorMessages,
+    // resetForm,
+    formIsValid,
+    submitDisabled,
+    useApiErrors,
+    // fieldHasError,
+    fieldIsDirty,
+    // updateFieldValidity,
+  };
 }

package/layouts/default.vue

@@ -1,10 +1,18 @@
 <template>
   <div class="page-layout">
     <div>
-      <h1>Header</h1>
+      <h1><NuxtLink to="/">Home</NuxtLink></h1>
+      <ul class="flex-group">
+        <li>
+          <NuxtLink to="/forms/examples/material/text-fields">Material UI text fields</NuxtLink>
+        </li>
+        <li>
+          <NuxtLink to="/forms/examples/buttons">Buttons</NuxtLink>
+        </li>
+      </ul>
     </div>
 
-    <div>
+    <div class="page-layout-content">
       <slot name="layout-content"></slot>
     </div>
 
@@ -20,7 +28,7 @@ useHead({
     class: 'body-default',
     id: 'body',
   },
-})
+});
 </script>
 
 <style lang="css">
@@ -28,4 +36,21 @@ useHead({
   display: grid;
   grid-template-rows: auto 1fr auto;
 }
+
+.page-layout-content {
+  container: content / inline-size;
+}
+
+.flex-group {
+  align-items: flex-start;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 24px;
+  margin-bottom: 32px;
+}
+
+ul.flex-group {
+  list-style-type: none;
+  padding: 0;
+}
 </style>

package/nuxt.config.ts

@@ -1,20 +1,43 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
-import { createResolver } from '@nuxt/kit'
-const { resolve } = createResolver(import.meta.url)
+import { createResolver } from '@nuxt/kit';
+const { resolve } = createResolver(import.meta.url);
 
 export default defineNuxtConfig({
   devtools: { enabled: true },
+
+  app: {
+    head: {
+      htmlAttrs: {
+        lang: 'en',
+      },
+      titleTemplate: '%s - Website name',
+      meta: [{ charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }],
+    },
+    pageTransition: {
+      name: 'page',
+      mode: 'out-in',
+    },
+    layoutTransition: {
+      name: 'layout',
+      mode: 'out-in',
+    },
+  },
   css: [resolve('./assets/styles/main.css')],
+
   runtimeConfig: {
     public: {
       validatorLocale: 'en-GB',
     },
   },
 
+  modules: ['@nuxt/icon'],
+
   components: [
     {
       path: './components',
       pathPrefix: false,
     },
   ],
-})
+
+  compatibilityDate: '2024-07-13',
+});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-forms",
   "type": "module",
-  "version": "0.0.23",
+  "version": "0.2.0",
   "main": "./nuxt.config.ts",
   "scripts": {
     "reinstall": "rm -rf node_modules && npm install",
@@ -14,10 +14,13 @@
     "release": "release-it"
   },
   "devDependencies": {
-    "@nuxt/eslint-config": "^0.3.13",
-    "eslint": "^9.5.0",
-    "nuxt": "^3.12.2",
-    "release-it": "^17.4.0",
-    "typescript": "^5.5.2"
+    "@iconify-json/material-symbols": "^1.1.88",
+    "@iconify-json/radix-icons": "^1.1.15",
+    "@nuxt/eslint-config": "^0.5.0",
+    "@nuxt/icon": "^1.4.5",
+    "eslint": "^9.9.0",
+    "nuxt": "^3.12.4",
+    "release-it": "^17.6.0",
+    "typescript": "^5.5.4"
   }
 }

package/pages/forms/examples/buttons/index.vue

@@ -0,0 +1,155 @@
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+        <div>
+          <h1>Example buttons</h1>
+          <p>Primary submit</p>
+
+          <p>Themes switcher</p>
+          <ul class="flex-group">
+            <li>
+              <InputButtonSubmit type="button" @click.stop.prevent="swapTheme('primary')" :is-pending="false" button-text="Primary" theme="primary" size="normal" />
+            </li>
+            <li>
+              <InputButtonSubmit type="button" @click.stop.prevent="swapTheme('secondary')" :is-pending="false" button-text="Secondary" theme="secondary" size="normal" />
+            </li>
+            <li>
+              <InputButtonSubmit type="button" @click.stop.prevent="swapTheme('tertiary')" :is-pending="false" button-text="Tertiary" theme="tertiary" size="normal" />
+            </li>
+            <li>
+              <InputButtonSubmit type="button" @click.stop.prevent="swapTheme('warning')" :is-pending="false" button-text="Warning" theme="warning" size="normal" />
+            </li>
+            <li>
+              <InputButtonSubmit type="button" @click.stop.prevent="swapTheme('success')" :is-pending="false" button-text="Success" theme="success" size="normal" />
+            </li>
+            <li>
+              <InputButtonSubmit type="button" @click.stop.prevent="swapTheme('error')" :is-pending="false" button-text="Error" theme="error" size="normal" />
+            </li>
+            <li>
+              <InputButtonSubmit type="button" @click.stop.prevent="swapTheme('ghost')" :is-pending="false" button-text="Ghost" theme="ghost" size="normal" />
+            </li>
+          </ul>
+
+          <FormWrapper width="medium">
+            <template #default>
+              <form @submit.prevent="submitForm">
+                <div class="flex-group">
+                  <InputButtonSubmit type="button" @click.stop.prevent="submitForm" :is-pending="false" button-text="Submit" :theme size="x-small" />
+
+                  <InputButtonSubmit type="button" @click.stop.prevent="submitForm" :is-pending="false" button-text="Submit" :theme size="small" />
+
+                  <InputButtonSubmit type="button" @click.stop.prevent="submitForm" :is-pending="false" button-text="Submit" :theme size="normal" />
+                  <InputButtonSubmit type="button" @click.stop.prevent="submitForm" :is-pending="false" button-text="Submit" :theme size="medium" />
+                  <InputButtonSubmit type="button" @click.stop.prevent="submitForm" :is-pending="false" button-text="Submit" :theme size="large" />
+                </div>
+
+                <div class="flex-group">
+                  <InputButtonConfirm @click.stop.prevent="submitForm" :is-pending="false" button-text="Confirm" :theme size="x-small" />
+                  <InputButtonConfirm @click.stop.prevent="submitForm" :is-pending="false" button-text="Confirm" :theme size="small" />
+                  <InputButtonConfirm @click.stop.prevent="submitForm" :is-pending="false" button-text="Confirm" :theme size="normal" />
+                  <InputButtonConfirm @click.stop.prevent="submitForm" :is-pending="false" button-text="Confirm" :theme size="medium" />
+                  <InputButtonConfirm @click.stop.prevent="submitForm" :is-pending="false" button-text="Confirm" :theme size="large" />
+                </div>
+                <div class="flex-group">
+                  <InputButtonCore @click.stop.prevent="submitForm" :is-pending="false" button-text="Submit" :theme size="x-small">
+                    <template #iconOnly>
+                      <Icon name="radix-icons:eye-none" class="icon" />
+                    </template>
+                  </InputButtonCore>
+
+                  <InputButtonCore @click.stop.prevent="submitForm" :is-pending="false" button-text="Submit" :theme size="small">
+                    <template #iconOnly>
+                      <Icon name="radix-icons:eye-none" class="icon" />
+                    </template>
+                  </InputButtonCore>
+
+                  <InputButtonCore @click.stop.prevent="submitForm" :is-pending="false" button-text="Submit" :theme size="normal">
+                    <template #iconOnly>
+                      <Icon name="radix-icons:eye-none" class="icon" />
+                    </template>
+                  </InputButtonCore>
+
+                  <InputButtonCore @click.stop.prevent="submitForm" :is-pending="false" button-text="Submit" :theme size="medium">
+                    <template #iconOnly>
+                      <Icon name="radix-icons:eye-none" class="icon" />
+                    </template>
+                  </InputButtonCore>
+
+                  <InputButtonCore @click.stop.prevent="submitForm" :is-pending="false" button-text="Submit" :theme size="large">
+                    <template #iconOnly>
+                      <Icon name="radix-icons:eye-none" class="icon" />
+                    </template>
+                  </InputButtonCore>
+                </div>
+              </form>
+            </template>
+          </FormWrapper>
+        </div>
+      </template>
+    </NuxtLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { IFieldsInitialState, IOptionsConfig } from '@/types/types.forms';
+
+definePageMeta({
+  layout: false,
+});
+
+useHead({
+  title: 'Homepage',
+  meta: [{ name: 'description', content: 'Homepage' }],
+  bodyAttrs: {
+    class: '',
+  },
+});
+
+const theme = ref('primary');
+
+const swapTheme = (newTheme: string) => {
+  theme.value = newTheme;
+};
+
+/*
+ * Setup forms
+ */
+const fieldsInitialState = ref<IFieldsInitialState>({
+  emailAddress: '',
+  username: '',
+  password: '',
+});
+
+// Setup formData
+const { formData, initFormData, getErrorCount, updateErrorMessages, formIsValid, submitDisabled, useApiErrors } = useFormControl();
+await initFormData(fieldsInitialState);
+
+const submitForm = async () => {
+  await getErrorCount(true);
+
+  if (formIsValid.value) {
+    formData.value.isPending = true;
+    console.log('Form is good - post it!');
+    // await useSleep(2000);
+    // formData.value.isPending = false;
+  } else {
+    console.warn('Form has errors');
+  }
+};
+</script>
+
+<style lang="css">
+.flex-group {
+  align-items: flex-start;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 24px;
+  margin-bottom: 32px;
+}
+
+ul.flex-group {
+  list-style-type: none;
+  padding: 0;
+}
+</style>