srcdev-nuxt-forms 3.0.0 → 4.0.0

package/components/utils/colour-scheme-select/ColourSchemeSelectOld.vue

@@ -0,0 +1,225 @@
+<template>
+  <div class="colour-scheme-select" :data-size="size" :data-form-theme="theme">
+    <p>Color Scheme select</p>
+
+    <form class="colour-scheme-select-form mbe-20">
+      <div class="input-range-markers">
+        <div class="marker">
+          <LazyIcon name="material-symbols:night-sight-auto-sharp" class="marker-icon" />
+        </div>
+        <div class="marker">
+          <LazyIcon name="radix-icons:sun" class="marker-icon" />
+        </div>
+        <div class="marker" v>
+          <LazyIcon name="radix-icons:moon" class="marker-icon" />
+        </div>
+      </div>
+
+      <div class="scheme-marker-wrapper">
+        <div class="scheme-marker-indicator"></div>
+      </div>
+
+      <div class="form-elements">
+        <div class="form-input">
+          <input type="radio" id="auto" name="colour-scheme" v-model="colourScheme" value="auto" />
+          <label for="auto" class="sr-only">Auto</label>
+        </div>
+        <div class="form-input">
+          <input type="radio" id="light" name="colour-scheme" v-model="colourScheme" value="light" />
+          <label for="light" class="sr-only">Light</label>
+        </div>
+        <div class="form-input">
+          <input type="radio" id="dark" name="colour-scheme" v-model="colourScheme" value="dark" />
+          <label for="dark" class="sr-only">Dark</label>
+        </div>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import propValidators from '../../forms/c12/prop-validators';
+
+defineProps({
+  name: {
+    type: String,
+    defaul: useId(),
+  },
+  size: {
+    type: String as PropType<string>,
+    default: 'medium',
+    validator(value: string) {
+      return propValidators.size.includes(value);
+    },
+  },
+  theme: {
+    type: String as PropType<string>,
+    default: 'primary',
+    validator(value: string) {
+      return propValidators.theme.includes(value);
+    },
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+});
+
+const colourScheme = ref<'auto' | 'dark' | 'light'>('auto');
+
+useColourScheme(colourScheme);
+</script>
+
+<style lang="css">
+.colour-scheme-select {
+  --_outline-width: 0.1rem;
+  --_border-width: 0.1rem;
+  --_border-radius: 50%;
+  --_background-color: var(--theme-form-checkbox-bg);
+  --_box-shadow: none;
+
+  --_icon-size: var(--form-input-checkbox-radio-button-size);
+
+  --_background-color: var(--theme-form-radio-bg);
+  --_border-color: var(--theme-form-radio-border);
+  --_border-radius: 50%;
+  --_outline-color: var(--theme-form-radio-outline);
+
+  --_form-padding: 0.5rem;
+  --_form-input-outline-width: 0.2rem;
+
+  --_scheme-marker-position: start;
+
+  .colour-scheme-select-form {
+    display: grid;
+    grid-template-areas: 'element-stack';
+    align-items: center;
+
+    background-color: var(--theme-form-radio-bg);
+    border: var(--_border-width) solid var(--_border-color);
+
+    border-radius: calc((var(--_icon-size) / 2) + var(--_form-padding) + var(--_border-width) + var(--_outline-width) + var(--_form-input-outline-width));
+
+    outline: var(--_outline-width) solid var(--_outline-color);
+    box-shadow: var(--_box-shadow);
+
+    /* height: calc(var(--_icon-size) + 4px); */
+    width: calc((var(--_icon-size) * 3) + (var(--_form-padding) * 17));
+
+    transition: all 0.2s ease-in-out;
+
+    .input-range-markers {
+      grid-area: element-stack;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      padding: var(--_form-padding);
+
+      .marker {
+        background-color: black;
+        padding: var(--_form-padding);
+        border-radius: 50%;
+        overflow: hidden;
+        /* outline: 1px solid gray; */
+
+        &:hover {
+          cursor: pointer;
+        }
+
+        .marker-icon {
+          /* font-size: 2rem; */
+          display: block;
+          color: white;
+          height: var(--_icon-size);
+          width: var(--_icon-size);
+        }
+      }
+    }
+
+    .scheme-marker-wrapper {
+      grid-area: element-stack;
+      display: grid;
+      gap: 1rem;
+
+      grid-template-columns: repeat(3, 1fr);
+      /* transition: grid-template-columns 0.2s; */
+      /* text-align: var(--_scheme-marker-position); */
+      padding: var(--_form-padding);
+      /* z-index: 9; */
+
+      .scheme-marker-indicator {
+        grid-column: 3;
+        aspect-ratio: 1;
+        background-color: var(--theme-form-radio-bg);
+        background-color: red;
+        border-radius: 50%;
+        height: calc(var(--_icon-size) + var(--_form-padding));
+        /* width: calc(var(--_icon-size) + var(--_form-padding)); */
+        padding: var(--_form-padding);
+        transition: grid-columns 0.2s;
+      }
+    }
+
+    .form-elements {
+      grid-area: element-stack;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 1rem;
+      padding: var(--_form-padding);
+
+      .form-input {
+        border-radius: 50%;
+        display: flex;
+        place-content: center;
+        padding: var(--_form-padding);
+        outline: var(--_form-input-outline-width) solid gray;
+        opacity: 0.75;
+
+        &:has(input[value='auto']) {
+          background-color: green;
+
+          &:has(input[value='auto']:checked) {
+            --_scheme-marker-position: start;
+            outline: var(--_form-input-outline-width) solid var(--_border-color);
+            opacity: 1;
+          }
+        }
+
+        &:has(input[value='light']) {
+          background-color: orange;
+
+          &:has(input[value='light']:checked) {
+            --_scheme-marker-position: center;
+            outline: var(--_form-input-outline-width) solid var(--_border-color);
+            opacity: 1;
+          }
+        }
+
+        &:has(input[value='dark']) {
+          background-color: black;
+
+          &:has(input[value='dark']:checked) {
+            --_scheme-marker-position: end;
+            outline: var(--_form-input-outline-width) solid var(--_border-color);
+            opacity: 1;
+          }
+        }
+
+        input[type='radio'] {
+          opacity: 0;
+          height: var(--_icon-size);
+          width: var(--_icon-size);
+          margin: 0;
+          padding: 0;
+
+          &:hover {
+            cursor: pointer;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

package/components/utils/dark-mode-switcher/DarkModeSwitcher.vue

@@ -0,0 +1,47 @@
+<template>
+  <ToggleSwitchWithLabelInline v-model="currentColourScheme" :name :label labelWeight="normal" :size trueValue="dark" falseValue="light" :style-class-passthrough>
+    <template #iconOn>
+      <LazyIcon name="radix-icons:moon" class="icon" />
+    </template>
+    <template #iconOff>
+      <LazyIcon name="radix-icons:sun" class="icon" />
+    </template>
+  </ToggleSwitchWithLabelInline>
+</template>
+
+<script setup lang="ts">
+import propValidators from '../../forms/c12/prop-validators';
+
+defineProps({
+  name: {
+    type: String,
+    required: true,
+  },
+  label: {
+    type: String,
+    required: true,
+  },
+  labelWeight: {
+    type: String as PropType<string>,
+    default: 'semi-bold',
+    validator(value: string) {
+      return propValidators.labelWeight.includes(value);
+    },
+  },
+  size: {
+    type: String as PropType<string>,
+    default: 'small',
+    validator(value: string) {
+      return propValidators.size.includes(value);
+    },
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+});
+
+// const displayMode = ref<'auto' | 'dark' | 'light'>('auto');
+
+const { currentColourScheme } = useColourScheme();
+</script>

package/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/composables/useColourScheme.ts

@@ -0,0 +1,25 @@
+export const useColourScheme = () => {
+  const currentColourScheme = ref<'auto' | 'dark' | 'light' | null>(null);
+
+  const returnSavedColourPreferenceFromLocalStorage = () => {
+    if (import.meta.client) {
+      return localStorage.getItem('colourScheme') as 'auto' | 'dark' | 'light' | null;
+    }
+  };
+
+  onMounted(() => {
+    currentColourScheme.value = returnSavedColourPreferenceFromLocalStorage() || 'auto';
+  });
+
+  watch(currentColourScheme, (newVal) => {
+    if (import.meta.client && newVal !== null) {
+      localStorage.setItem('colourScheme', newVal);
+      document.documentElement.dataset.colorScheme = newVal;
+      currentColourScheme.value = newVal;
+    }
+  });
+
+  return {
+    currentColourScheme,
+  };
+};

package/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/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/composables/useSleep.ts

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

package/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,
+  };
+};