srcdev-nuxt-forms 2.0.3 → 2.0.5

package/composables/useZodValidation.ts

@@ -1,6 +1,6 @@
 import { ref, reactive, toRaw, type Ref } from 'vue';
 import { z, ZodError } from 'zod';
-import type { IFormFieldStateObj, ApiErrorResponse } from '@/types/types.forms';
+import type { IFormFieldStateObj, ApiErrorResponse } from '../types/types.forms';
 
 const useZodValidation = (formSchema: any) => {
   const zodFormControl = reactive({

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "srcdev-nuxt-forms",
   "type": "module",
-  "version": "2.0.3",
-  "main": "./nuxt.config.ts",
+  "version": "2.0.5",
+  "main": "nuxt.config.ts",
   "scripts": {
+    "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",
     "reinstall": "rm -rf node_modules && npm install",
     "dev": "nuxi dev .playground",
     "build": "nuxt build .playground",
@@ -13,9 +14,17 @@
     "postinstall": "nuxt prepare .playground",
     "release": "release-it"
   },
+  "files": [
+    "assets/",
+    "components/",
+    "composables/",
+    "types/",
+    "nuxt.config.ts"
+  ],
   "devDependencies": {
     "@nuxt/eslint-config": "0.6.1",
     "eslint": "9.14.0",
+    "nuxt": "3.14.159",
     "release-it": "17.10.0",
     "typescript": "5.6.3"
   },
@@ -25,7 +34,16 @@
     "@iconify-json/radix-icons": "1.2.1",
     "@iconify-json/ri": "1.2.3",
     "@nuxt/icon": "1.7.2",
-    "nuxt": "3.14.159",
     "zod": "3.23.8"
+  },
+  "release-it": {
+    "$schema": "https://unpkg.com/release-it/schema/release-it.json",
+    "git": {
+      "commitMessage": "chore(release): release v${version}"
+    },
+    "github": {
+      "release": true,
+      "releaseName": "v${version}"
+    }
   }
 }

package/.editorconfig

@@ -1,12 +0,0 @@
-root = true
-
-[*]
-indent_size = 2
-indent_style = space
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-
-[*.md]
-trim_trailing_whitespace = false

package/.eslintignore

@@ -1,7 +0,0 @@
-node_modules
-dist
-.nuxt
-.output
-coverage
-components.d.ts
-nuxt.d.ts

package/.eslintrc.cjs

@@ -1,12 +0,0 @@
-module.exports = {
-  "root": true,
-  "extends": [
-    "@nuxtjs/eslint-config-typescript",
-    "plugin:prettier/recommended"
-  ],
-  "rules": {
-    "vue/multi-word-component-names": "off",
-    "vue/no-multiple-template-root": "off",
-    "@typescript-eslint/no-unused-vars": "off"
-  }
-};

package/.nmprc

@@ -1,2 +0,0 @@
-shamefully-hoist=true
-strict-peer-dependencies=false

package/.nuxtrc

@@ -1 +0,0 @@
-typescript.includeWorkspace = true

package/.playground/components/scaffolding/footer/NavFooter.vue

@@ -1,62 +0,0 @@
-<template>
-  <footer>
-    <ul class="footer-list">
-      <li class="footer-item">
-        <Icon name="material-symbols-light:mail-rounded" class="icon" />
-        <span class="text">email@address.com</span>
-      </li>
-      <li class="footer-item">
-        <Icon name="ph:building-office-light" class="icon" />
-        <span class="text">Company number: 12345678</span>
-      </li>
-      <li class="footer-item">
-        <Icon name="material-symbols:call" class="icon" />
-        <span class="text">+44 (0) 1223 123 123</span>
-      </li>
-      <li class="footer-item">
-        <Icon name="material-symbols:location-on" class="icon" />
-        <span class="text">Some address, City, Postcode</span>
-      </li>
-    </ul>
-  </footer>
-</template>
-<script setup lang="ts"></script>
-
-<style lang="css">
-footer {
-  display: none;
-  padding: 1rem;
-  text-align: center;
-  background: white;
-  margin-bottom: 50px;
-
-  .footer-list {
-    display: inline-grid;
-    gap: 10px;
-    grid-template-columns: 280px 456px;
-    margin-inline: auto;
-    padding: 0;
-  }
-
-  .footer-item {
-    list-style-type: none;
-    gap: 10px;
-    display: grid;
-    grid-template-columns: 40px auto;
-    align-items: center;
-
-    .icon {
-      display: block;
-      font-size: 30px;
-      text-align: center;
-      min-width: 40px;
-    }
-    .text {
-      font-family: 'Poppins', Sans-serif;
-      font-family: var(--font-family);
-      font-size: var(--step-1);
-      text-align: start;
-    }
-  }
-}
-</style>

package/.playground/components/ui/content-grid/ContentGrid.vue

@@ -1,85 +0,0 @@
-<template>
-  <div class="ui-content-grid" :class="[applyClasses]" :data-testid="dataTestid">
-    <div v-if="hasSlot1" class="col-1">
-      <slot name="slot1"></slot>
-    </div>
-    <div v-if="hasSlot2" class="col-2">
-      <slot name="slot2"></slot>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-const props = defineProps({
-  dataTestid: {
-    type: String,
-    default: 'ui-content-grid',
-  },
-  applyClasses: {
-    type: String,
-    default: '',
-  },
-});
-
-const slots = useSlots();
-const hasSlot1 = ref(slots.slot1 !== undefined);
-const hasSlot2 = ref(slots.slot2 !== undefined);
-</script>
-
-<style lang="css">
-.ui-content-grid {
-  --_margin-inline: 0;
-  --_grid-template-columns: repeat(4, 1fr);
-  --_grid-template-rows: repeat(2, auto);
-  --_grid-gap: 16px;
-
-  display: grid;
-  gap: var(--_grid-gap);
-  grid-template-columns: var(--_grid-template-columns);
-  grid-template-rows: var(--_grid-template-rows);
-  margin-inline: var(--_margin-inline);
-
-  @container content (min-width: 768px) {
-    --_margin-inline: 0;
-    --_grid-template-columns: repeat(6, 1fr);
-    --_grid-gap: 32px;
-  }
-
-  @container content (min-width: 1024px) {
-    --_margin-inline: 0;
-    --_grid-template-columns: repeat(12, 1fr);
-    --_grid-template-rows: initial;
-  }
-
-  .col-1 {
-    --_grid-column: 1 / span 4;
-    --_grid-row: 1;
-    grid-column: var(--_grid-column);
-    grid-row: var(--_grid-row);
-
-    @container content (min-width: 768px) {
-      --_grid-column: 1 / span 6;
-    }
-
-    @container content (min-width: 1024px) {
-      --_grid-column: 1 / span 6;
-    }
-  }
-
-  .col-2 {
-    --_grid-column: 1 / span 4;
-    --_grid-row: 2;
-    grid-column: var(--_grid-column);
-    grid-row: var(--_grid-row);
-
-    @container content (min-width: 768px) {
-      --_grid-column: 1 / span 6;
-    }
-
-    @container content (min-width: 1024px) {
-      --_grid-column: 7 / span 6;
-      --_grid-row: 1;
-    }
-  }
-}
-</style>

package/.playground/composables/useApiRequest.ts

@@ -1,25 +0,0 @@
-class CustomError extends Error {
-  // name = "CustomError";
-  override name = 'CustomError';
-  extraProp = 'Error: test';
-}
-
-async function useApiRequest<T, E extends new (message?: string) => Error>(promise: Promise<T>, errorsToCatch?: E[]): Promise<[undefined, T] | [InstanceType<E>]> {
-  return promise
-    .then((data) => {
-      return [undefined, data] as [undefined, T];
-    })
-    .catch((error) => {
-      if (errorsToCatch == undefined) {
-        return [error];
-      }
-
-      if (errorsToCatch.some((errorType) => error instanceof errorType)) {
-        return [error];
-      }
-
-      throw error;
-    });
-}
-
-export default useApiRequest;

package/.playground/composables/useErrorMessages.ts

@@ -1,59 +0,0 @@
-import type { IFormData } from '@/types/types.forms';
-
-export function useErrorMessage(name: string, formData: Ref<IFormData>) {
-  const defaultError = ref('');
-  const errorMessages = ref(formData.value.errorMessages);
-
-  const hasCustomError = () => {
-    return errorMessages.value[name] !== undefined && errorMessages.value[name].useCustomError;
-  };
-
-  const errorMessage = computed(() => {
-    console.log(`errorMessage()`);
-    if (hasCustomError()) {
-      console.log(`errorMessage() | IF`);
-      return errorMessages.value[name].message;
-    } else {
-      return defaultError.value;
-    }
-  });
-
-  const setDefaultError = (newDefaultError: string) => {
-    defaultError.value = newDefaultError;
-  };
-
-  const fieldHasError = computed(() => {
-    // console.log(`fieldHasError() | name(${name})`);
-    nextTick();
-    if (formData.value.submitDisabled) {
-      console.log(`fieldHasError() | name(${name}) | IF`);
-      if (hasCustomError()) {
-        console.log(`fieldHasError() | name(${name}) | IF | IF`);
-
-        return true;
-      } else if (Object.keys(formData.value.validityState).length > 0 && formData.value.validityState[name] !== undefined) {
-        console.log(`fieldHasError() | name(${name}) | IF | ELSE IF`);
-
-        return !formData.value.validityState[name];
-      }
-      console.log(`fieldHasError() | name(${name}) | IF | ELSE`);
-
-      return false;
-    }
-  });
-
-  const removeCustomError = (valid: boolean = false) => {
-    console.log(`useErrorMessage | removeCustomError | name(${name}) | valid(${valid})`);
-    // formData.value.validityState[name] = valid;
-    // await nextTick();
-    // delete formData.value.errorMessages[name];
-  };
-
-  return {
-    hasCustomError,
-    errorMessage,
-    setDefaultError,
-    fieldHasError,
-    removeCustomError,
-  };
-}

package/.playground/composables/useFormControl.ts

@@ -1,248 +0,0 @@
-import type { IFormData, IFieldsInitialState, IFormFieldC12, IApiErrorMessages, ICustomErrorMessage, IErrorMessagesArr } from '@/types/types.forms';
-import { formFieldC12 } from '@/components/forms/c12/utils';
-
-// 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,
-    errorMessages: {},
-    formFieldsC12: {},
-    hasCustomErrorMessages: false,
-    formIsValid: false,
-    submitAttempted: false,
-    submitDisabled: false,
-    submitSuccess: false,
-    displayErrorMessages: false,
-  });
-
-  const initValidationState = async (fieldsInitialState: IFieldsInitialState | Ref<IFieldsInitialState | null>) => {
-    const fields = Object.keys(fieldsInitialState.value || {});
-    const state = fields.reduce((accumulatedFields, field) => {
-      accumulatedFields[field] = false;
-      return accumulatedFields;
-    }, {} as Record<string, boolean>);
-    formData.value.validityState = state;
-  };
-
-  const initFormData = async (fieldsInitialState: IFieldsInitialState | Ref<IFieldsInitialState | null>) => {
-    initValidationState(fieldsInitialState);
-
-    if (fieldsInitialState !== null) {
-      savedInitialState = toRaw(fieldsInitialState.value) as IFieldsInitialState;
-      formData.value.data = fieldsInitialState as IFieldsInitialState;
-    }
-    return;
-  };
-
-  const initFormFieldsC12 = (name: string, formFieldC12: IFormFieldC12) => {
-    formData.value.formFieldsC12[name] = formFieldC12;
-    return;
-  };
-
-  const updatePreviousValues = () => {
-    console.log(`useFormControl | 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: IErrorMessagesArr) => {
-    let count = 0;
-
-    for (const key in obj) {
-      if (obj.hasOwnProperty(key) && obj[key].useCustomError === true) {
-        count++;
-      }
-    }
-
-    return count;
-  };
-
-  /*
-   *   Useage:
-   *
-   *   const { updateErrorMessages } = useFormControl();
-   *
-   *   Add/Update entry
-   *   const sampleCustomErrorEmail = {
-   *     useCustomError: true,
-   *     message: "This is a sample custom error for error EMAIL",
-   *   };
-   *   updateErrorMessages("email", sampleCustomErrorEmail);
-   */
-  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.errorMessages) > 0;
-  };
-
-  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 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.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,
-    () => {
-      getErrorCount();
-    },
-    { deep: true }
-  );
-
-  watch(
-    () => formData.value.formFieldsC12,
-    () => {
-      formData.value.formFieldsC12;
-    },
-    { deep: true }
-  );
-
-  watch(
-    () => formData.value.isPending,
-    (newValue, oldValue) => {
-      if (newValue) {
-        updatePreviousValues();
-      }
-    }
-  );
-
-  return {
-    formData,
-    initFormData,
-    initFormFieldsC12,
-    getErrorCount,
-    updateErrorMessages,
-    // resetForm,
-    formIsValid,
-    submitDisabled,
-    useApiErrors,
-    // fieldHasError,
-    fieldIsDirty,
-    // updateFieldValidity,
-  };
-}

package/.playground/composables/useSleep.ts

@@ -1,5 +0,0 @@
-async function useSleep(ms: number) {
-  return new Promise((resolve) => setTimeout(resolve, ms));
-}
-
-export default useSleep;

package/.playground/composables/useStyleClassPassthrough.ts

@@ -1,30 +0,0 @@
-export const useStyleClassPassthrough = (styleClassPassthrough: string[]) => {
-  const styleClassPassthroughRef = ref(styleClassPassthrough);
-
-  const elementClasses = computed(() => {
-    return styleClassPassthroughRef.value.join(' ');
-  });
-
-  const updateElementClasses = (cssClass: string | string[]) => {
-    let cssClasses = [] as string[];
-    if (typeof cssClass === 'string') {
-      cssClasses = [cssClass];
-    } else if (Array.isArray(cssClass)) {
-      cssClasses = cssClass;
-    }
-
-    cssClasses.forEach((cssClass) => {
-      if (styleClassPassthroughRef.value.includes(cssClass)) {
-        styleClassPassthroughRef.value = styleClassPassthroughRef.value.filter((className) => className !== cssClass);
-      } else {
-        styleClassPassthroughRef.value.push(cssClass);
-      }
-    });
-  };
-
-  return {
-    elementClasses,
-    updateElementClasses,
-    styleClassPassthroughRef,
-  };
-};