srcdev-nuxt-forms 0.1.0 → 1.0.0

package/components/forms/input-text/variants/material/InputTextWithLabel.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="input-text-with-label" :data-form-theme="formTheme" :class="[elementClasses, { dirty: isDirty }, { active: isActive }]">
+    <label :for="id" class="input-text-label body-normal-bold">{{ label }}</label>
+
+    <InputTextCore
+      v-model="modelValue"
+      v-model:isDirty="isDirty"
+      v-model:isActive="isActive"
+      :type
+      :maxlength
+      :id
+      :name
+      :placeholder
+      :label
+      :errorMessage
+      :fieldHasError
+      :required
+      :styleClassPassthrough
+      :theme
+    >
+      <template v-if="hasLeftSlot" #left>
+        <slot name="left"></slot>
+      </template>
+      <template v-if="hasRightSlot" #right>
+        <slot name="right"></slot>
+      </template>
+    </InputTextCore>
+    <InputError :errorMessage="errorMessage" :fieldHasError :id :isDetached="false" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import propValidators from '../../../c12/prop-validators';
+const { type, maxlength, id, name, placeholder, label, errorMessage, fieldHasError, required, styleClassPassthrough, theme } = defineProps({
+  maxlength: {
+    type: Number,
+    default: 255,
+  },
+  type: {
+    type: String,
+    required: true,
+  },
+  id: {
+    type: String,
+    required: true,
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  label: {
+    type: String,
+    required: true,
+  },
+  errorMessage: {
+    type: [Object, String],
+    required: true,
+  },
+  fieldHasError: {
+    type: Boolean,
+    default: false,
+  },
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  theme: {
+    type: String as PropType<string>,
+    default: 'primary',
+    validator(value: string) {
+      return propValidators.theme.includes(value);
+    },
+  },
+});
+
+const slots = useSlots();
+const hasLeftSlot = computed(() => slots.left !== undefined);
+const hasRightSlot = computed(() => slots.right !== undefined);
+
+const formTheme = computed(() => {
+  return fieldHasError ? 'error' : theme;
+});
+
+const modelValue = defineModel();
+const isActive = ref<boolean>(false);
+const isDirty = ref<boolean>(false);
+
+const { elementClasses, updateElementClasses } = useStyleClassPassthrough(styleClassPassthrough);
+
+const testDirty = () => {
+  const watchValue = modelValue.value ?? '';
+
+  if (!isDirty.value && typeof watchValue === 'string' && watchValue.length > 0) {
+    isDirty.value = true;
+  }
+};
+
+onMounted(() => {
+  testDirty();
+});
+
+watch(
+  () => modelValue.value,
+  () => {
+    testDirty();
+  }
+);
+</script>
+
+<style lang="css">
+.input-text-with-label {
+  .input-text-label {
+    display: block;
+    margin-block: 8px;
+  }
+}
+</style>

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

@@ -0,0 +1,161 @@
+<template>
+  <div
+    class="input-textarea-wrapper"
+    :data-form-theme="formTheme"
+    :class="[{ dirty: isDirty }, { active: isActive }, { error: fieldHasError }, { 'has-left-slot': hasLeftSlot }, { 'has-right-slot': hasRightSlot }]"
+  >
+    <span v-if="hasLeftSlot" class="slot left-slot">
+      <slot name="left"></slot>
+    </span>
+
+    <textarea
+      :maxlength
+      :placeholder
+      :id
+      :name
+      :required
+      :class="['input-text-core', 'text-normal', elementClasses, { dirty: isDirty }, { active: isActive }]"
+      v-model="modelValue"
+      ref="inputField"
+      :aria-invalid="fieldHasError"
+      :aria-describedby="`${id}-error-message`"
+      @focusin="updateFocus(true)"
+      @focusout="updateFocus(false)"
+    ></textarea>
+
+    <span v-if="hasRightSlot" class="slot right-slot">
+      <slot name="right"></slot>
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import propValidators from '../c12/prop-validators';
+const { maxlength, id, name, placeholder, fieldHasError, required, styleClassPassthrough, theme } = defineProps({
+  maxlength: {
+    type: Number,
+    default: 255,
+  },
+  id: {
+    type: String,
+    required: true,
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  fieldHasError: {
+    type: Boolean,
+    default: false,
+  },
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  theme: {
+    type: String as PropType<string>,
+    default: 'primary',
+    validator(value: string) {
+      return propValidators.theme.includes(value);
+    },
+  },
+});
+
+const slots = useSlots();
+const hasLeftSlot = computed(() => slots.left !== undefined);
+const hasRightSlot = computed(() => slots.right !== undefined);
+
+const formTheme = computed(() => {
+  return fieldHasError ? 'error' : theme;
+});
+
+const modelValue = defineModel<string | number | readonly string[] | null | undefined>();
+const isDirty = defineModel('isDirty');
+const isActive = defineModel('isActive');
+
+const updateFocus = (isFocused: boolean) => {
+  isActive.value = isFocused;
+};
+
+const inputField = ref<HTMLInputElement | null>(null);
+
+const { elementClasses, updateElementClasses } = useStyleClassPassthrough(styleClassPassthrough);
+
+onMounted(() => {
+  updateElementClasses(['deep-bristol', 'deep-london', 'deep-bath']);
+});
+</script>
+
+<style lang="css">
+.input-textarea-wrapper {
+  --_gutter: 12px;
+  --_border-width: var(--input-border-width-thin);
+  --_outline-width: var(--input-border-width-thin);
+
+  display: flex;
+  align-items: center;
+
+  background-color: var(--theme-form-input-bg);
+  border-radius: var(--input-border-width-default);
+  border: var(--_border-width) solid var(--theme-form-input-border);
+
+  &:focus-within {
+    border: var(--_border-width) solid var(--theme-form-input-border-focus);
+    outline: var(--_outline-width) solid hsl(from var(--theme-form-input-outline-focus) h s 50%);
+    box-shadow: var(--theme-form-focus-box-shadow);
+  }
+
+  .slot {
+    display: inline-block;
+    padding-inline: 8px;
+
+    .icon {
+      color: var(--theme-form-input-text);
+    }
+  }
+
+  &.has-left-slot {
+    .left-slot {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  &.has-right-slot {
+    .right-slot {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .input-text-core {
+    background-color: transparent;
+    border: none;
+    outline: none;
+    box-shadow: none;
+    flex-grow: 1;
+
+    color: var(--theme-form-input-text);
+    font-family: var(--font-family);
+    font-size: var(--theme-form-button-font-size-normal);
+    line-height: var(--line-height);
+    padding: 8px 12px;
+
+    &::placeholder,
+    &::-webkit-input-placeholder {
+      font-family: var(--font-family);
+      font-size: var(--font-size);
+      font-style: italic;
+      font-weight: 400;
+    }
+  }
+}
+</style>

package/components/forms/input-textarea/variants/InputTextareaWithLabel.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="input-textarea-with-label" :data-form-theme="formTheme" :class="[elementClasses, { dirty: isDirty }, { active: isActive }]">
+    <label :for="id" class="input-textarea-label body-normal-semibold">{{ label }}</label>
+
+    <InputTextareaCore v-model="modelValue" v-model:isDirty="isDirty" v-model:isActive="isActive" :maxlength :id :name :placeholder :label :fieldHasError :required :styleClassPassthrough :theme>
+      <template v-if="hasLeftSlot" #left>
+        <slot name="left"></slot>
+      </template>
+      <template v-if="hasRightSlot" #right>
+        <slot name="right"></slot>
+      </template>
+    </InputTextareaCore>
+    <InputError :errorMessage :fieldHasError :id :isDetached="false" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import propValidators from '../../c12/prop-validators';
+const { maxlength, id, name, placeholder, label, errorMessage, fieldHasError, required, styleClassPassthrough, theme } = defineProps({
+  maxlength: {
+    type: Number,
+    default: 255,
+  },
+  id: {
+    type: String,
+    required: true,
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  label: {
+    type: String,
+    required: true,
+  },
+  errorMessage: {
+    type: [Object, String],
+    required: true,
+  },
+  fieldHasError: {
+    type: Boolean,
+    default: false,
+  },
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  theme: {
+    type: String as PropType<string>,
+    default: 'primary',
+    validator(value: string) {
+      return propValidators.theme.includes(value);
+    },
+  },
+});
+
+const slots = useSlots();
+const hasLeftSlot = computed(() => slots.left !== undefined);
+const hasRightSlot = computed(() => slots.right !== undefined);
+
+const formTheme = computed(() => {
+  return fieldHasError ? 'error' : theme;
+});
+
+const modelValue = defineModel<string | number | readonly string[] | null | undefined>();
+const isActive = ref<boolean>(false);
+const isDirty = ref<boolean>(false);
+
+const { elementClasses, updateElementClasses } = useStyleClassPassthrough(styleClassPassthrough);
+
+const testDirty = () => {
+  const watchValue = modelValue.value ?? '';
+
+  if (!isDirty.value && typeof watchValue === 'string' && watchValue.length > 0) {
+    isDirty.value = true;
+  }
+};
+
+onMounted(() => {
+  testDirty();
+});
+
+watch(
+  () => modelValue.value,
+  () => {
+    testDirty();
+  }
+);
+</script>
+
+<style lang="css">
+.input-textarea-with-label {
+  .input-textarea-label {
+    display: block;
+    margin-block: 8px;
+  }
+}
+</style>

package/components/scaffolding/footer/NavFooter.vue

@@ -0,0 +1,62 @@
+<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/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/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/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 {