srcdev-nuxt-forms 0.1.0 → 0.2.0

package/components/forms/input-textarea/variants/material/InputTextareaMaterialCore.vue

@@ -0,0 +1,290 @@
+<template>
+  <div class="input-textarea-material" :class="[`theme-${theme}`, { error: fieldHasError }, { compact: compact }]">
+    <label class="input-textarea-label" :for="id" :class="[{ active: isFocused }, { error: fieldHasError }, { dirty: fieldIsDirty }, { compact: compact }]">
+      <span>{{ c12.label }}</span>
+    </label>
+    <div class="input-textarea-container" :class="[{ active: isFocused }, { error: fieldHasError }, { dirty: fieldIsDirty }, { compact: compact }]">
+      <slot name="input"></slot>
+    </div>
+    <InputError :errorMessaging :fieldHasError :id :isDetached="false" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { InpuTextC12, IFormData } from '@/types/types.forms';
+
+import propValidators from '../../../c12/prop-validators';
+
+const props = defineProps({
+  size: {
+    type: String as PropType<string>,
+    default: 'normal',
+    validator(value: string) {
+      return propValidators.size.includes(value);
+    },
+  },
+  weight: {
+    type: String as PropType<string>,
+    default: 'wght-400',
+    validator(value: string) {
+      return propValidators.weight.includes(value);
+    },
+  },
+  theme: {
+    type: String as PropType<string>,
+    default: 'primary',
+    validator(value: string) {
+      return propValidators.theme.includes(value);
+    },
+  },
+  id: {
+    type: String,
+    required: true,
+  },
+  name: {
+    type: String,
+    default: null,
+  },
+  required: {
+    type: Boolean,
+    value: false,
+  },
+  c12: {
+    type: Object as PropType<InpuTextC12>,
+    required: true,
+  },
+  styleClassPassthrough: {
+    type: String,
+    default: '',
+  },
+  compact: {
+    type: Boolean,
+    value: false,
+  },
+});
+
+const errorMessaging = computed(() => {
+  if (
+    typeof modelValue.value!.formFieldsC12[props.name] !== 'undefined' &&
+    modelValue.value!.formFieldsC12[props.name].useCustomError &&
+    modelValue.value.data[props.name] === modelValue.value.formFieldsC12[props.name].previousValue
+  ) {
+    return modelValue.value.formFieldsC12[props.name]?.customErrors || [];
+  } else {
+    return props.c12.errorMessage;
+  }
+});
+
+const modelValue = defineModel() as Ref<IFormData>;
+
+const isFocused = computed(() => {
+  return modelValue.value.focusedField == props.name;
+});
+
+const fieldIsDirty = computed(() => {
+  if (typeof modelValue.value!.formFieldsC12[props.name] !== 'undefined') {
+    return modelValue.value!.formFieldsC12[props.name].isDirty;
+  } else {
+    return false;
+  }
+});
+
+const fieldHasError = computed(() => {
+  if (typeof modelValue.value!.formFieldsC12[props.name] !== 'undefined') {
+    return modelValue.value!.submitAttempted && !modelValue.value!.formFieldsC12[props.name].isValid;
+  }
+  return false;
+});
+</script>
+
+<style lang="css">
+.input-textarea-material {
+  --_form-theme: var(--theme-form-primary);
+  --_focus-colour: var(--theme-form-primary-focus);
+  --_gutter: 12px;
+  --_border-width: var(--input-border-width-thin);
+  --_border-color: var(--_form-theme);
+  --_outline-width: var(--input-outline-width-thin);
+
+  &.theme-secondary {
+    --_form-theme: var(--theme-form-secondary);
+    --_focus-colour: var(--theme-form-secondary-focus);
+  }
+
+  &.error {
+    --_form-theme: var(--theme-error);
+  }
+
+  .input-textarea-core {
+    color: var(--_form-theme);
+    background-color: transparent;
+    line-height: var(--line-height);
+    field-sizing: content;
+    min-height: 3rem;
+
+    &:focus {
+      outline: none;
+      box-shadow: none;
+      border: none;
+    }
+
+    &:-internal-autofill-selected,
+    &:autofill {
+      background-color: transparent !important;
+    }
+  }
+
+  .input-textarea-label {
+    color: var(--_form-theme);
+    margin: initial;
+    line-height: var(--line-height);
+    padding: initial;
+    transition: color 0.2s ease-in-out;
+  }
+
+  display: grid;
+  border-radius: 2px;
+  border: var(--_border-width) solid var(--_border-color);
+
+  margin-bottom: 20px;
+  overflow: hidden;
+
+  &:focus-within {
+    --_border-color: white;
+    outline: var(--_outline-width) solid hsl(from var(--_form-theme) h s 50%);
+    background-color: hsl(from var(--_form-theme) h s 95%);
+  }
+
+  &:has(.input-textarea-core:focus-visible) {
+    box-shadow: 0 0 2px 3px var(--_focus-colour);
+    outline-color: var(--_focus-colour);
+  }
+
+  &.error {
+    /* outline: calc(var(--_border-width) * 2) solid var(--theme-error); */
+
+    border: var(--_border-width) solid var(--theme-error);
+    outline: var(--_outline-width) solid hsl(from var(--theme-error) h s 75%);
+
+    background-color: hsl(from var(--theme-error) h s 95%);
+  }
+
+  .input-textarea-label {
+    grid-row: 1;
+    grid-column: 1;
+
+    font-family: var(--font-family);
+    font-size: 20px;
+    font-weight: 700;
+    padding: var(--_gutter);
+    transform: translateY(12px);
+    transition: all linear 0.2s;
+    background-color: transparent;
+    z-index: 2;
+    height: 3.5rem;
+    transition: color 0.2s ease-in-out;
+
+    &.active,
+    &.dirty,
+    &.error {
+      font-size: 16px;
+      height: 1.5em;
+      transform: translateY(-2px);
+      z-index: auto;
+    }
+  }
+
+  .input-textarea-container {
+    display: grid;
+    grid-row: 1;
+    grid-column: 1;
+    margin-top: 2rem;
+    background-color: transparent;
+    opacity: 0;
+    transition: opacity linear 0.2s;
+
+    &.active,
+    &.dirty,
+    &.error {
+      opacity: 1;
+    }
+
+    .input-textarea-core {
+      font-family: var(--font-family);
+      border: 0px solid green;
+      padding: calc(var(--_gutter) / 2) var(--_gutter);
+      font-size: var(--font-size);
+      margin: 0;
+      /* opacity: 0;
+      transition: opacity linear 0.2s;
+
+      &.active,
+      &.dirty {
+        opacity: 1;
+      } */
+      /*
+      &::placeholder,
+      &:-ms-input-placeholder,
+      &::-moz-placeholder, */
+      &::-webkit-input-placeholder {
+        font-family: var(--font-family);
+        /* color: var(--gray-5); */
+        color: hsl(from var(--_form-theme) h s 50%);
+        font-size: var(--font-size);
+        font-style: italic;
+        font-weight: 500;
+      }
+    }
+  }
+}
+
+/*
+* Compact UI
+**/
+
+.input-textarea-material {
+  &.compact {
+    overflow: initial;
+
+    &:focus-within {
+      background-color: initial;
+    }
+
+    &.error {
+      background-color: initial;
+    }
+  }
+
+  .input-textarea-label {
+    &.compact {
+      align-content: center;
+      font-size: 16px;
+      padding: 0 12px;
+      transform: translateY(0);
+
+      span {
+        padding: 0 8px;
+      }
+
+      &.active,
+      &.dirty,
+      &.error {
+        font-size: 16px;
+        font-weight: 500;
+        transform: translateY(-14px);
+        z-index: auto;
+
+        span {
+          background-color: white;
+        }
+      }
+    }
+  }
+
+  .input-textarea-container {
+    &.compact {
+      margin: 10px 8px 6px 8px;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,85 @@
+<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/composables/useErrorMessages.ts

@@ -2,15 +2,17 @@ import type { IFormData } from '@/types/types.forms';
 
 export function useErrorMessage(name: string, formData: Ref<IFormData>) {
   const defaultError = ref('');
-  const customErrorMessages = ref(toRaw(formData.value.customErrorMessages));
+  const errorMessages = ref(formData.value.errorMessages);
 
   const hasCustomError = () => {
-    return customErrorMessages.value[name] !== undefined && customErrorMessages.value[name].useCustomError;
+    return errorMessages.value[name] !== undefined && errorMessages.value[name].useCustomError;
   };
 
   const errorMessage = computed(() => {
+    console.log(`errorMessage()`);
     if (hasCustomError()) {
-      return customErrorMessages.value[name].message;
+      console.log(`errorMessage() | IF`);
+      return errorMessages.value[name].message;
     } else {
       return defaultError.value;
     }
@@ -21,20 +23,30 @@ export function useErrorMessage(name: string, formData: Ref<IFormData>) {
   };
 
   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) => {
-    formData.value.validityState[name] = valid;
+    console.log(`useErrorMessage | removeCustomError | name(${name}) | valid(${valid})`);
+    // formData.value.validityState[name] = valid;
     // await nextTick();
-    delete formData.value.customErrorMessages[name];
+    // delete formData.value.errorMessages[name];
   };
 
   return {

package/composables/useFormControl.ts

@@ -1,6 +1,8 @@
-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>({
@@ -10,24 +12,27 @@ export function useFormControl(fieldsInitialState: IFieldsInitialState | Ref<IFi
     focusedField: '',
     isPending: false,
     errorCount: 0,
-    customErrorMessages: {},
+    errorMessages: {},
+    formFieldsC12: {},
     hasCustomErrorMessages: false,
     formIsValid: 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;
@@ -36,6 +41,17 @@ export function useFormControl(fieldsInitialState: IFieldsInitialState | Ref<IFi
     return;
   };
 
+  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();
 
@@ -45,17 +61,26 @@ export function useFormControl(fieldsInitialState: IFieldsInitialState | Ref<IFi
 
     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) {
@@ -70,37 +95,100 @@ 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.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);
     }
-    formData.value.hasCustomErrorMessages = countItemsWithCustomError(formData.value.customErrorMessages) > 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 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(() => {
@@ -109,9 +197,12 @@ export function useFormControl(fieldsInitialState: IFieldsInitialState | Ref<IFi
 
   // Keep an eye on this for performance issue
 
-  watchEffect(() => {
-    console.log('watchEffect: formData.value', formData.value.validityState);
-  });
+  // 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,
@@ -121,16 +212,35 @@ export function useFormControl(fieldsInitialState: IFieldsInitialState | Ref<IFi
     { deep: true }
   );
 
-  onMounted(() => {
-    initFormData();
-  });
+  watch(
+    () => formData.value.formFieldsC12,
+    () => {
+      formData.value.formFieldsC12;
+    },
+    { deep: true }
+  );
+
+  watch(
+    () => formData.value.isPending,
+    (newValue, oldValue) => {
+      if (newValue) {
+        updatePreviousValues();
+      }
+    }
+  );
 
   return {
     formData,
+    initFormData,
+    initFormFieldsC12,
     getErrorCount,
-    updateCustomErrors,
-    resetForm,
+    updateErrorMessages,
+    // resetForm,
     formIsValid,
     submitDisabled,
+    useApiErrors,
+    // fieldHasError,
+    fieldIsDirty,
+    // updateFieldValidity,
   };
 }