srcdev-nuxt-forms 1.1.0 → 2.0.0

package/.nmprc

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

package/.playground/composables/useApiRequest.ts

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,59 @@
+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

@@ -0,0 +1,248 @@
+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

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

package/.playground/composables/useStyleClassPassthrough.ts

@@ -0,0 +1,30 @@
+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,
+  };
+};

package/.playground/composables/useZodValidation.ts

@@ -0,0 +1,120 @@
+import { z, ZodError } from 'zod';
+import type { IFormFieldStateObj, ApiErrorResponse } from '@/types/types.forms';
+
+const useZodValidation = (formSchema: any) => {
+  const zodFormControl = reactive({
+    errorCount: 0,
+    displayLoader: false,
+    submitDisabled: false,
+    submitAttempted: false,
+    submitSuccessful: false,
+    formIsValid: false,
+    isPending: false,
+    isDisabled: false,
+    previousState: {} as Record<string, any>,
+  });
+
+  type formSchema = z.infer<typeof formSchema>;
+  const zodErrorObj = ref<z.ZodFormattedError<formSchema> | null>(null);
+
+  const resetPreviousValues = () => {
+    for (const [field] of Object.entries(formSchema.shape)) {
+      const previousValue = {
+        value: null,
+        message: '',
+      };
+
+      zodFormControl.previousState[field] = previousValue;
+    }
+  };
+
+  const initZodForm = () => {
+    resetPreviousValues();
+  };
+
+  const getErrorCount = (zodErrorObj: Ref<z.ZodFormattedError<formSchema> | null>) => {
+    const zodCountErrors = zodErrorObj.value ?? [];
+    // @ts-ignore
+    delete zodCountErrors._errors;
+    const errorCount = Object.keys(zodCountErrors ?? []).length;
+    return errorCount;
+  };
+
+  const transformErrorMessages = (errors: any) => {
+    const apiErrors = ref({}) as any;
+    for (const [key, value] of Object.entries(errors)) {
+      const fieldPath = key.split('.').map((key: string) => key.charAt(0).toLowerCase() + key.slice(1));
+      apiErrors.value[fieldPath.join('.')] = value;
+    }
+
+    return apiErrors.value;
+  };
+
+  const updatePreviousValue = async (field: string, message: string, state: Record<string, any>) => {
+    const previousValue = {
+      value: state[field],
+      message: message,
+    };
+    zodFormControl.previousState[field] = previousValue;
+  };
+
+  const pushCustomErrors = async (apiErrorResponse: ApiErrorResponse, state: Record<string, any>) => {
+    const apiErrors = transformErrorMessages(apiErrorResponse.data.errors);
+
+    // 1: Create a ZodError object to hold the issues
+    const zodError = new ZodError([]);
+
+    // 2: Reset previous state values
+    resetPreviousValues();
+
+    // 3: Add issues to the ZodError object
+    for (const [path, message] of Object.entries(apiErrors)) {
+      zodError.addIssue({
+        path: path.split('.'),
+        message: message as string,
+        code: z.ZodIssueCode.custom,
+      });
+      await updatePreviousValue(path, message as string, state);
+    }
+
+    zodErrorObj.value = zodError.format();
+    zodFormControl.errorCount = getErrorCount(zodErrorObj);
+    zodFormControl.formIsValid = zodFormControl.errorCount === 0;
+    zodFormControl.displayLoader = false;
+    zodFormControl.submitAttempted = true;
+    return zodErrorObj.value;
+  };
+
+  const doZodValidate = async (state: Record<string, any>) => {
+    const valid = formSchema.safeParse(toRaw(state));
+    if (!valid.success) {
+      zodErrorObj.value = valid.error.format();
+    } else {
+      zodErrorObj.value = null;
+    }
+
+    zodFormControl.errorCount = getErrorCount(zodErrorObj);
+    zodFormControl.formIsValid = valid.success;
+
+    return valid.success;
+  };
+
+  const fieldMaxLength = (name: string) => {
+    const fieldSchema = formSchema.shape[name];
+    if (fieldSchema instanceof z.ZodString) {
+      return fieldSchema._def.checks.find((check) => check.kind === 'max')?.value || null;
+    }
+    return null;
+  };
+
+  return {
+    initZodForm,
+    zodFormControl,
+    zodErrorObj,
+    pushCustomErrors,
+    doZodValidate,
+    fieldMaxLength,
+  };
+};
+
+export default useZodValidation;

package/.playground/nuxt.config.ts

@@ -0,0 +1,27 @@
+export default defineNuxtConfig({
+  devtools: { enabled: true },
+  extends: ['..'],
+  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',
+    },
+  },
+  components: [
+    {
+      path: './components',
+      pathPrefix: false,
+    },
+  ],
+});

package/assets/styles/forms/themes/_error.css

@@ -7,8 +7,7 @@
     --theme-form-input-outline: white;
     --theme-form-input-outline-active: var(--red-6);
     --theme-form-input-outline-focus: var(--red-6);
-    --theme-form-input-text: light-dark(var(--gray-11), var(--gray-11));
-
+    --theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
     --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--red-12);
 
     --theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));

package/assets/styles/forms/themes/_ghost.css

@@ -7,8 +7,7 @@
     --theme-form-input-outline: white;
     --theme-form-input-outline-active: var(--gray-6);
     --theme-form-input-outline-focus: var(--gray-6);
-    --theme-form-input-text: light-dark(var(--gray-11), var(--gray-11));
-
+    --theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
     --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--gray-1);
 
     --theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));

package/assets/styles/forms/themes/_primary.css

@@ -7,7 +7,7 @@
     --theme-form-input-outline: white;
     --theme-form-input-outline-active: var(--blue-6);
     --theme-form-input-outline-focus: var(--blue-6);
-    --theme-form-input-text: light-dark(var(--gray-11), var(--gray-11));
+    --theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
 
     --theme-form-focus-box-shadow: 1px 1px 8px 1px light-dark(var(--blue-12), var(--blue-2));
 

package/assets/styles/forms/themes/_secondary.css

@@ -7,8 +7,7 @@
     --theme-form-input-outline: white;
     --theme-form-input-outline-active: var(--gray-6);
     --theme-form-input-outline-focus: var(--gray-6);
-    --theme-form-input-text: light-dark(var(--gray-11), var(--gray-11));
-
+    --theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
     --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--gray-12);
 
     --theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));

package/assets/styles/forms/themes/_success.css

@@ -7,8 +7,7 @@
     --theme-form-input-outline: white;
     --theme-form-input-outline-active: var(--green-6);
     --theme-form-input-outline-focus: var(--green-6);
-    --theme-form-input-text: light-dark(var(--gray-11), var(--gray-11));
-
+    --theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
     --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--green-12);
 
     --theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));

package/assets/styles/forms/themes/_tertiary.css

@@ -7,8 +7,7 @@
     --theme-form-input-outline: white;
     --theme-form-input-outline-active: var(--gray-6);
     --theme-form-input-outline-focus: var(--gray-6);
-    --theme-form-input-text: light-dark(var(--gray-11), var(--gray-11));
-
+    --theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
     --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--gray-12);
 
     --theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));

package/assets/styles/forms/themes/_warning.css

@@ -7,8 +7,7 @@
     --theme-form-input-outline: white;
     --theme-form-input-outline-active: var(--orange-6);
     --theme-form-input-outline-focus: var(--orange-6);
-    --theme-form-input-text: light-dark(var(--gray-11), var(--gray-11));
-
+    --theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
     --theme-form-focus-box-shadow: 1px 1px 8px 1px var(--orange-12);
 
     --theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));

package/components/forms/input-checkbox/InputCheckboxCore.vue

@@ -110,7 +110,7 @@ const isChecked = computed(() => {
   --_checkbox-size: initial;
   --_checkbox-border-radius: 4px;
   --_outline-width: var(--input-outline-width-thin);
-  --_border-width: var(--input-border-width-thin); /* --input-border-width-default / 2px */
+  --_border-width: var(--input-border-width-default); /* --input-border-width-default / 2px */
 
   display: grid;
   grid-template-areas: 'element-stack';

package/components/forms/input-number/InputNumberCore.vue

@@ -110,7 +110,7 @@ onMounted(() => {
 <style lang="css">
 .input-number-wrapper {
   --_gutter: 12px;
-  --_border-width: var(--input-border-width-thin);
+  --_border-width: var(--input-border-width-default);
   --_min-width: v-bind(minLength);
 
   display: flex;

package/components/forms/input-radio/InputRadiobuttonCore.vue

@@ -111,7 +111,7 @@ const isChecked = computed(() => {
 .input-radiobutton-wrapper {
   --_checkbox-size: initial;
   --_outline-width: var(--input-outline-width-thin);
-  --_border-width: var(--input-border-width-thin);
+  --_border-width: var(--input-border-width-default);
 
   display: grid;
   grid-template-areas: 'element-stack';

package/components/forms/input-range/InputRangeCore.vue

@@ -107,7 +107,7 @@ const modelValue = defineModel<number | readonly number[]>();
 <style lang="css">
 .input-range-wrapper {
   --_gutter: 12px;
-  --_border-width: var(--input-border-width-thin);
+  --_border-width: var(--input-border-width-default);
   --_outline-width: var(--input-outline-width-thin);
 
   --_input-range-height: 24px;

package/components/forms/input-text/InputTextCore.vue

@@ -137,8 +137,8 @@ onMounted(() => {
 <style lang="css">
 .input-text-wrapper {
   --_gutter: 12px;
-  --_border-width: var(--input-border-width-thin);
-  --_outline-width: var(--input-border-width-thin);
+  --_border-width: var(--input-border-width-default);
+  --_outline-width: var(--input-border-width-default);
 
   display: flex;
   align-items: center;
@@ -200,14 +200,15 @@ onMounted(() => {
 }
 
 input:autofill,
+input:-internal-autofill-selected,
 input:-webkit-autofill-strong-password,
 input:-webkit-autofill-strong-password-viewable,
 input:-webkit-autofill-and-obscured {
   background-color: var(--theme-form-input-bg) !important;
   background-image: none !important;
-  color: var(--_input-text-color) !important;
+  color: var(--theme-form-input-text) !important;
   -webkit-box-shadow: 0 0 0px 1000px var(--theme-form-input-bg) inset;
-  /* -webkit-text-fill-color: black; */
+  -webkit-text-fill-color: var(--theme-form-input-text);
   transition: background-color 5000s ease-in-out 0s;
 }
 </style>

package/components/forms/input-textarea/InputTextareaCore.vue

@@ -97,8 +97,8 @@ onMounted(() => {
 <style lang="css">
 .input-textarea-wrapper {
   --_gutter: 12px;
-  --_border-width: var(--input-border-width-thin);
-  --_outline-width: var(--input-border-width-thin);
+  --_border-width: var(--input-border-width-default);
+  --_outline-width: var(--input-border-width-default);
 
   display: flex;
   align-items: center;

package/nuxt.config.ts

@@ -4,40 +4,13 @@ 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,16 +1,16 @@
 {
   "name": "srcdev-nuxt-forms",
   "type": "module",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "main": "./nuxt.config.ts",
   "scripts": {
     "reinstall": "rm -rf node_modules && npm install",
-    "dev": "nuxi dev",
-    "build": "nuxt build",
-    "generate": "nuxt generate",
-    "preview": "nuxt preview",
+    "dev": "nuxi dev .playground",
+    "build": "nuxt build .playground",
+    "generate": "nuxt generate .playground",
+    "preview": "nuxt preview .playground",
     "lint": "eslint .",
-    "postinstall": "nuxt prepare",
+    "postinstall": "nuxt prepare .playground",
     "release": "release-it"
   },
   "devDependencies": {