srcdev-nuxt-forms 3.0.0 → 4.1.0

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

@@ -0,0 +1,270 @@
+<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" ref="colourSchemeWrapper">
+      <div class="select-scheme-marker-wrapper">
+        <div class="select-scheme-marker" :class="[{ show: showMarker }]"></div>
+      </div>
+      <div class="select-scheme-group-wrapper">
+        <div class="select-scheme-group">
+          <LazyIcon name="material-symbols:night-sight-auto-sharp" class="scheme-icon" />
+          <input type="radio" id="auto" name="colour-scheme" class="scheme-input" v-model="currentColourScheme" value="auto" />
+          <label for="auto" class="sr-only">Auto</label>
+        </div>
+        <div class="select-scheme-group">
+          <LazyIcon name="radix-icons:sun" class="scheme-icon" />
+          <input type="radio" id="light" name="colour-scheme" class="scheme-input" v-model="currentColourScheme" value="light" />
+          <label for="light" class="sr-only">Light</label>
+        </div>
+        <div class="select-scheme-group">
+          <LazyIcon name="radix-icons:moon" class="scheme-icon" />
+          <input type="radio" id="dark" name="colour-scheme" class="scheme-input" v-model="currentColourScheme" 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';
+
+const props = defineProps({
+  name: {
+    type: String,
+    defaul: 'colour-scheme-select',
+  },
+  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);
+    },
+  },
+  stepAnimationDuration: {
+    type: Number as PropType<number>,
+    default: 100,
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+});
+
+const duration = ref(props.stepAnimationDuration);
+
+const { currentColourScheme } = useColourScheme();
+
+const colourSchemeWrapper = ref<HTMLFormElement | null>(null);
+const colourSchemeGroupElements = ref<HTMLDivElement[]>([]);
+const colourSchemeInputElements = ref<HTMLInputElement[]>([]);
+const showMarker = ref(false);
+
+const findIndexOfInputValueFromCurrentColourScheme = () => {
+  if (currentColourScheme.value === 'auto') return 1;
+  if (currentColourScheme.value === 'light') return 2;
+  if (currentColourScheme.value === 'dark') return 3;
+  return undefined;
+};
+
+const findIndexOfCheckedInput = () => {
+  return colourSchemeInputElements.value.findIndex((input) => input.checked);
+};
+
+const currentActiveIndex = ref(findIndexOfCheckedInput());
+
+const setColourSchemeAttr = async () => {
+  const index = findIndexOfInputValueFromCurrentColourScheme() ?? 0;
+
+  await nextTick();
+  currentActiveIndex.value = findIndexOfCheckedInput();
+
+  const wrapperLeftPosition = colourSchemeWrapper.value?.getBoundingClientRect().left ?? 0;
+  const parentLeftPosition = colourSchemeWrapper.value?.parentElement?.getBoundingClientRect().left ?? 0;
+  const relativeLeftPosition = wrapperLeftPosition - parentLeftPosition;
+
+  colourSchemeWrapper.value?.style.setProperty('--_select-scheme-marker-step-animation-duration', colourSchemeGroupElements.value?.length * duration.value + 'ms');
+
+  colourSchemeWrapper.value?.style.setProperty('--_select-scheme-marker-position', index !== undefined ? index.toString() : '0');
+  colourSchemeWrapper.value?.style.setProperty('--_select-scheme-marker-left-offset', colourSchemeGroupElements.value?.[index - 1]?.offsetLeft - relativeLeftPosition + 'px');
+  colourSchemeWrapper.value?.style.setProperty('--_select-scheme-marker-width', colourSchemeGroupElements.value?.[index - 1]?.getBoundingClientRect().width + 'px');
+};
+
+const handleInputActiveClass = () => {
+  colourSchemeInputElements.value.forEach((element) => {
+    element.classList.remove('active');
+  });
+
+  setTimeout(() => {
+    colourSchemeInputElements.value?.[currentActiveIndex.value].classList.add('active');
+  }, duration.value);
+};
+
+onMounted(() => {
+  colourSchemeGroupElements.value = Array.from(colourSchemeWrapper.value?.querySelectorAll('.select-scheme-group') || []) as HTMLInputElement[];
+  colourSchemeInputElements.value = Array.from(colourSchemeWrapper.value?.querySelectorAll('.scheme-input') || []) as HTMLInputElement[];
+
+  if (colourSchemeWrapper.value !== null) {
+    setColourSchemeAttr();
+    setTimeout(() => {
+      showMarker.value = true;
+      handleInputActiveClass();
+    }, duration.value);
+  }
+});
+
+watch(currentColourScheme, () => {
+  setColourSchemeAttr();
+});
+
+watch(currentActiveIndex, () => {
+  handleInputActiveClass();
+});
+</script>
+
+<style lang="css">
+.colour-scheme-select {
+  --_form-background-color: var(--theme-form-checkbox-bg);
+  --_form-border-width: 0.1rem;
+  --_form-border-colour: var(--theme-form-radio-border);
+  --_form-outline-width: 0.1rem;
+
+  --_form-outline-colour: var(--theme-form-radio-outline);
+
+  --_form-border-radius: calc(
+    (var(--_scheme-icon-font-size) / 2) + var(--_form-border-width) + var(--_form-outline-width) + var(--_form-padding) + var(--_select-scheme-group-padding) + var(--_select-scheme-group-border-width) +
+      var(--_select-scheme-group-outline-width)
+  );
+
+  --_form-items-gap: 1rem;
+  --_form-padding: 0.6rem;
+
+  --_select-scheme-group-background-color: var(--theme-form-checkbox-bg);
+  --_select-scheme-group-padding: 0.5rem;
+  --_select-scheme-group-border-width: 0.2rem;
+  --_select-scheme-group-border-colour: transparent;
+  --_select-scheme-group-outline-width: 0.2rem;
+  --_select-scheme-group-outline-colour: transparent;
+  --_select-scheme-group-width: calc(
+    var(--_scheme-icon-font-size) + (var(--_select-scheme-group-padding) * 2) + (var(--_select-scheme-group-border-width) * 2) + (var(--_select-scheme-group-outline-width) * 2)
+  );
+
+  --_scheme-icon-font-size: 2rem;
+  --_scheme-icon-colour: black;
+
+  .colour-scheme-select-form {
+    display: inline-grid;
+    grid-template-areas: 'select-stack';
+    width: fit-content;
+
+    background-color: var(--_form-background-color);
+    border: var(--_form-border-width) solid var(--_form-border-colour);
+    outline: var(--_form-outline-width) solid var(--_form-outline-colour);
+    border-radius: var(--_form-border-radius);
+    padding: var(--_form-padding);
+
+    .select-scheme-marker-wrapper {
+      grid-area: select-stack;
+      z-index: 1;
+      display: flex;
+      align-items: center;
+      position: relative;
+
+      .select-scheme-marker {
+        aspect-ratio: 1;
+        width: var(--_select-scheme-group-width);
+        transition: all var(--_select-scheme-marker-step-animation-duration) ease-in-out;
+        background-color: var(--theme-form-radio-border);
+        border-radius: 50%;
+
+        position: absolute;
+        left: calc(var(--_select-scheme-marker-left-offset) - var(--_select-scheme-group-border-width));
+
+        opacity: 0;
+
+        &.show {
+          opacity: 1;
+        }
+      }
+    }
+
+    .select-scheme-group-wrapper {
+      display: grid;
+      grid-area: select-stack;
+      grid-template-columns: repeat(3, 1fr);
+      align-items: center;
+      width: fit-content;
+      z-index: 2;
+      gap: var(--_form-items-gap);
+      position: relative;
+
+      .select-scheme-group {
+        aspect-ratio: 1;
+        display: grid;
+        grid-template-areas: 'icon-stack';
+        place-content: center;
+        background: var(--_select-scheme-group-background-color);
+        border: var(--_select-scheme-group-border-width) solid var(--_select-scheme-group-border-colour);
+        outline: var(--_select-scheme-group-outline-width) solid var(--_select-scheme-group-outline-colour);
+        border-radius: 50%;
+        padding: var(--_select-scheme-group-padding);
+
+        transition: background calc(var(--_select-scheme-marker-step-animation-duration) / 3);
+
+        .scheme-icon {
+          grid-area: icon-stack;
+          display: block;
+          color: var(--_scheme-icon-colour);
+          font-size: var(--_scheme-icon-font-size);
+
+          &:hover {
+            cursor: pointer;
+          }
+        }
+
+        .scheme-input {
+          grid-area: icon-stack;
+          opacity: 0;
+
+          &:hover {
+            cursor: pointer;
+          }
+        }
+
+        &:has(input[value='auto']) {
+          &:has(.active) {
+            --_select-scheme-group-background-color: green;
+            --_scheme-icon-colour: white;
+          }
+        }
+
+        &:has(input[value='light']) {
+          &:has(.active) {
+            /* background: rgb(180, 58, 91);
+            background: linear-gradient(90deg, rgba(180, 58, 91, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(252, 176, 69, 1) 100%); */
+            --_select-scheme-group-background-color: radial-gradient(circle, rgba(180, 58, 91, 1) 0%, rgba(253, 29, 29, 1) 27%, rgba(252, 176, 69, 1) 100%);
+            /* --_select-scheme-group-background-color: radial-gradient(circle, rgba(63, 94, 251, 1) 70%, rgba(63, 94, 251, 0.5550814075630253) 90%, rgba(255, 255, 255, 0.42622986694677867) 100%); */
+
+            --_scheme-icon-colour: white;
+          }
+        }
+
+        &:has(input[value='dark']) {
+          &:has(.active) {
+            --_select-scheme-group-background-color: black;
+            --_scheme-icon-colour: white;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

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