srcdev-nuxt-forms 0.1.0 → 0.2.0

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="input-text-wrapper" :class="[{ 'has-left-content': hasLeftContent }]">
+  <div class="input-text-wrapper" :class="[{ 'has-left-content': hasLeftContent }, { 'has-right-content': hasRightContent }]">
     <template v-if="hasLeftContent">
       <span class="left-content">
         <slot name="left"></slot>
@@ -14,10 +14,11 @@
       :pattern="componentValidation.pattern"
       :maxlength="componentValidation.maxlength"
       :required
-      :class="['input-text', 'text-normal', styleClassPassthrough, { active: isFocused }, { dirty: isDirty }, { error: fieldHasError() }]"
+      :class="['input-text-core', 'text-normal', styleClassPassthrough, { active: isFocused }, { dirty: fieldIsDirty }, { error: fieldHasError }]"
       v-model="modelValue.data[name]"
       ref="inputField"
-      :readonly="isPending"
+      :aria-invalid="fieldHasError"
+      :aria-describedby="`${id}-error-message`"
       @focusin="updateFocus(name, true)"
       @focusout="updateFocus(name, false)"
     />
@@ -31,19 +32,18 @@
 </template>
 
 <script setup lang="ts">
-import type { InpuTextC12, IFormData } from '@/types/types.forms';
+import type { InpuTextC12, IFormFieldC12, IFormData } from '@/types/types.forms';
 import { validationConfig } from '@/components/forms/c12/validation-patterns';
+import propValidators from '../c12/prop-validators';
 
 const props = defineProps({
   type: {
-    // type: String as PropType<"text" | "password" | "tel" | "number" | "email" | "url">, // This breaks props setup in unit tests
     type: String,
     validator(value: string) {
-      return ['text', 'password', 'tel', 'number', 'email', 'url'].includes(value);
+      return propValidators.inputTypesText.includes(value);
     },
   },
   id: {
-    // type: String as PropType<string>,
     type: String,
     required: true,
   },
@@ -79,18 +79,10 @@ const updateFocus = (name: string, isFocused: boolean) => {
   modelValue.value.focusedField = isFocused ? name : '';
 };
 
-const isPending = computed(() => {
-  return modelValue.value.isPending;
-});
-
 const isFocused = computed(() => {
   return modelValue.value.focusedField == name.value;
 });
 
-const isDirty = computed(() => {
-  return modelValue.value.dirtyFields[name.value];
-});
-
 const name = computed(() => {
   return props.name !== null ? props.name : props.id;
 });
@@ -100,32 +92,56 @@ const validatorLocale = toRef(useRuntimeConfig().public.validatorLocale);
 const componentValidation = validationConfig[validatorLocale.value][props.validation];
 const inputField = ref<HTMLInputElement | null>(null);
 
-const { hasCustomError, removeCustomError } = useErrorMessage(name.value, modelValue);
-
-const fieldHasError = () => {
-  const hasApiErrorMessage = hasCustomError();
-  const inputBad = !inputField.value?.validity.valid;
+const fieldIsDirty = computed(() => {
+  return modelValue.value!.formFieldsC12[name.value].isDirty;
+});
+const fieldHasError = computed(() => {
+  return modelValue.value!.submitAttempted && !modelValue.value!.formFieldsC12[name.value].isValid;
+});
 
-  if (modelValue.value.isPending) {
-    modelValue.value!.validityState[name.value] = inputField.value?.validity.valid ?? false;
-    return hasApiErrorMessage ? hasApiErrorMessage : inputBad;
-  }
-  return false;
+// const { fieldHasError } = useFormControl(name.value);
+
+const formFieldC12 = <IFormFieldC12>{
+  label: props.c12.label,
+  placeholder: props.c12.placeholder,
+  errorMessage: props.c12.errorMessage,
+  useCustomError: false,
+  customErrors: {},
+  isValid: false,
+  isDirty: false,
+  type: 'string',
+  previousValue: null,
 };
+modelValue.value!.formFieldsC12[name.value] = formFieldC12;
+
+const { initFormFieldsC12 } = useFormControl();
+initFormFieldsC12(props.name, formFieldC12);
 
-watchEffect(() => {
-  console.log('watchEffect()');
-  modelValue.value.dirtyFields[name.value] = modelValue.value.data[name.value] !== '';
+const fieldValue = computed(() => {
+  return modelValue.value.data[name.value];
+});
 
+watch(fieldValue, () => {
+  if (!modelValue.value!.formFieldsC12[name.value].isDirty) {
+    modelValue.value!.formFieldsC12[name.value].isDirty = modelValue.value.data[name.value] !== '';
+  }
+  modelValue.value!.formFieldsC12[name.value].isValid = inputField.value?.validity.valid ?? false;
   modelValue.value!.validityState[name.value] = inputField.value?.validity.valid ?? false;
-  if (hasCustomError()) {
-    removeCustomError(inputField.value?.validity.valid);
+
+  if (modelValue.value!.formFieldsC12[name.value].useCustomError && modelValue.value.data[props.name] === modelValue.value.formFieldsC12[props.name].previousValue) {
+    modelValue.value!.validityState[name.value] = false;
+    modelValue.value!.formFieldsC12[name.value].isValid = false;
+    modelValue.value.displayErrorMessages = true;
   }
 });
 
 const isValid = () => {
   setTimeout(() => {
     modelValue.value!.validityState[name.value] = inputField.value?.validity.valid ?? false;
+    modelValue.value!.formFieldsC12[name.value].isValid = inputField.value?.validity.valid ?? false;
+    if (!modelValue.value!.formFieldsC12[name.value].isDirty) {
+      modelValue.value!.formFieldsC12[name.value].isDirty = modelValue.value.data[name.value] !== '';
+    }
   }, 0);
 };
 
@@ -136,10 +152,12 @@ onMounted(() => {
 
 <style lang="css">
 .input-text-wrapper {
-  display: flex;
   align-items: center;
+  display: grid;
+  grid-template-columns: 1fr;
 
   &.has-left-content {
+    grid-template-columns: auto 1fr;
     margin-left: var(--_gutter);
 
     .left-content {
@@ -147,5 +165,17 @@ onMounted(() => {
       align-items: center;
     }
   }
+
+  &.has-right-content {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    /* display: flex; */
+    margin-right: var(--_gutter);
+
+    .right-content {
+      display: flex;
+      align-items: center;
+    }
+  }
 }
 </style>

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

@@ -3,7 +3,16 @@
     <template #input>
       <InputTextCore :id :name :type :validation :required v-model="modelValue" :c12 :style-class-passthrough="styleClassPassthrough">
         <template #right>
-          <InputButtonCore @click.stop.prevent="toggleDisplayPassword" :is-pending="false" button-text="Submit" theme="ghost" size="x-small">
+          <InputButtonCore
+            type="button"
+            @click.stop.prevent="toggleDisplayPassword"
+            :is-pending="false"
+            :buttonText
+            theme="ghost"
+            size="x-small"
+            @focusin="updateFocus(name, true)"
+            @focusout="updateFocus(name, false)"
+          >
             <template #iconOnly>
               <Icon v-if="displayPassword" name="radix-icons:eye-none" class="icon" />
               <Icon v-else name="radix-icons:eye-open" class="icon" />
@@ -75,6 +84,10 @@ const name = computed(() => {
 
 const modelValue = defineModel() as Ref<IFormData>;
 
+const updateFocus = (name: string, isFocused: boolean) => {
+  modelValue.value.focusedField = isFocused ? name : '';
+};
+
 const displayPassword = ref(false);
 
 const type = computed(() => {
@@ -82,7 +95,20 @@ const type = computed(() => {
   return displayPassword.value ? 'text' : 'password';
 });
 
+const buttonText = computed(() => {
+  return displayPassword.value ? 'Hide password' : 'Show password';
+});
+
 const toggleDisplayPassword = () => {
   displayPassword.value = !displayPassword.value;
 };
 </script>
+
+<style lang="css" scoped>
+/* :deep(.input-text-core:not(.active)),
+:deep(.input-text-core:not(.dirty)) {
+  + .right-content {
+    display: none !important;
+  }
+} */
+</style>

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

@@ -1,5 +1,5 @@
 <template>
-  <InputTextMaterialCore :type :id :name :required :c12 :styleClassPassthrough :theme v-model="modelValue">
+  <InputTextMaterialCore type="text" :id :name :required :c12 :styleClassPassthrough :theme v-model="modelValue">
     <template #input>
       <InputTextCore :id :name type="text" :validation :required v-model="modelValue" :c12 :style-class-passthrough="styleClassPassthrough" />
     </template>
@@ -33,13 +33,6 @@ const props = defineProps({
       return propValidators.theme.includes(value);
     },
   },
-  type: {
-    // type: String as PropType<"text" | "password" | "tel" | "number" | "email" | "url">, // This breaks props setup in unit tests
-    type: String,
-    validator(value: string) {
-      return ['text', 'password', 'tel', 'number', 'email', 'url'].includes(value);
-    },
-  },
   id: {
     // type: String as PropType<string>,
     type: String,

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

@@ -1,11 +1,12 @@
 <template>
   <div class="input-text-material" :class="[`theme-${theme}`, { error: fieldHasError }, { compact: compact }]">
-    <label class="label" :class="[{ active: isFocused }, { error: fieldHasError }, { dirty: isDirty }, { compact: compact }]" :for="id">
-      <span>{{ labelText }}</span>
+    <label class="input-text-label" :for="id" :class="[{ active: isFocused }, { error: fieldHasError }, { dirty: fieldIsDirty }, { compact: compact }]">
+      <span>{{ c12.label }}</span>
     </label>
-    <div class="input-text-container" :class="[{ active: isFocused }, { error: fieldHasError }, { dirty: isDirty }, { compact: compact }]">
+    <div class="input-text-container" :class="[{ active: isFocused }, { error: fieldHasError }, { dirty: fieldIsDirty }, { compact: compact }]">
       <slot name="input"></slot>
     </div>
+    <InputError :errorMessaging :fieldHasError :id :isDetached="false" />
   </div>
 </template>
 
@@ -38,8 +39,9 @@ const props = defineProps({
   },
   type: {
     type: String,
+    required: true,
     validator(value: string) {
-      return ['text', 'password', 'tel', 'number', 'email', 'url'].includes(value);
+      return propValidators.inputTypesText.includes(value);
     },
   },
   id: {
@@ -68,8 +70,16 @@ const props = defineProps({
   },
 });
 
-const labelText = computed(() => {
-  return fieldHasError.value ? errorMessage.value : props.c12.label;
+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>;
@@ -78,17 +88,58 @@ const isFocused = computed(() => {
   return modelValue.value.focusedField == props.name;
 });
 
-const isDirty = computed(() => {
-  return modelValue.value.dirtyFields[props.name];
+const fieldIsDirty = computed(() => {
+  if (typeof modelValue.value!.formFieldsC12[props.name] !== 'undefined') {
+    return modelValue.value!.formFieldsC12[props.name].isDirty;
+  } else {
+    return false;
+  }
 });
 
-const { errorMessage, setDefaultError, fieldHasError } = useErrorMessage(props.name, modelValue);
-setDefaultError(props.c12.errorMessage);
+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-text-material {
-  input {
+  --_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);
+  }
+
+  /*
+  &:has(.input-text:invalid),
+  &:has(.input-textarea:invalid) {
+    --_form-theme: green;
+  }
+  */
+
+  /*
+  &:not(:placeholder-shown):invalid {
+    --_form-theme: green;
+  }
+  &:has(.text-input:not(:placeholder-shown):invalid) {
+    --_form-theme: red;
+  }
+
+  */
+
+  .input-text-core {
     background-color: transparent;
     line-height: var(--line-height);
 
@@ -104,43 +155,46 @@ setDefaultError(props.c12.errorMessage);
     }
   }
 
-  label {
+  .input-text-label {
+    color: var(--_form-theme);
     margin: initial;
     line-height: var(--line-height);
     padding: initial;
+    transition: color 0.2s ease-in-out;
   }
 
-  --_gutter: 12px;
-  --_form-theme: var(--theme-form-primary);
-  --_border-width: var(--input-border-width-default);
-
   display: grid;
   border-radius: 2px;
-  border: var(--_border-width) solid var(--_form-theme);
+  border: var(--_border-width) solid var(--_border-color);
 
   margin-bottom: 20px;
   overflow: hidden;
 
-  &.theme-secondary {
-    --_form-theme: var(--theme-form-secondary);
-  }
-
   &:focus-within {
-    border: var(--_border-width) solid var(--_form-theme);
-    outline: var(--_border-width) solid hsl(from var(--_form-theme) h s 50%);
+    --_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-text-core:focus-visible),
+  &:has(.input-button-core:focus-visible) {
+    /* box-shadow: 0 0 2px 3px var(--_focus-colour);
+    outline-color: var(--_focus-colour); */
+
+    outline: var(--focus-visible-outline);
+    box-shadow: var(--focus-visible-box-shadow);
+  }
+
   &.error {
     /* outline: calc(var(--_border-width) * 2) solid var(--theme-error); */
 
     border: var(--_border-width) solid var(--theme-error);
-    outline: var(--_border-width) solid hsl(from var(--theme-error) h s 75%);
+    outline: var(--_outline-width) solid hsl(from var(--theme-error) h s 75%);
 
     background-color: hsl(from var(--theme-error) h s 95%);
   }
 
-  .label {
+  .input-text-label {
     grid-row: 1;
     grid-column: 1;
 
@@ -157,6 +211,7 @@ setDefaultError(props.c12.errorMessage);
     &.dirty,
     &.error {
       font-size: 16px;
+      height: 1.5em;
       transform: translateY(-2px);
       z-index: auto;
     }
@@ -177,7 +232,7 @@ setDefaultError(props.c12.errorMessage);
       opacity: 1;
     }
 
-    .input-text {
+    .input-text-core {
       font-family: var(--font-family);
       border: 0px solid green;
       padding: calc(var(--_gutter) / 2) var(--_gutter);
@@ -223,7 +278,7 @@ setDefaultError(props.c12.errorMessage);
     }
   }
 
-  .label {
+  .input-text-label {
     &.compact {
       align-content: center;
       font-size: 16px;
@@ -239,7 +294,7 @@ setDefaultError(props.c12.errorMessage);
       &.error {
         font-size: 16px;
         font-weight: 500;
-        transform: translateY(-26px);
+        transform: translateY(-14px);
         z-index: auto;
 
         span {

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

@@ -0,0 +1,170 @@
+<template>
+  <div class="input-textarea-wrapper" :class="[{ 'has-left-content': hasLeftContent }, { 'has-right-content': hasRightContent }]">
+    <span v-if="hasLeftContent" class="left-content">
+      <slot name="left"></slot>
+    </span>
+
+    <textarea
+      :id
+      :name
+      :pattern="componentValidation.pattern"
+      :maxlength="componentValidation.maxlength"
+      :required
+      :class="['input-textarea-core', 'text-normal', styleClassPassthrough, { active: isFocused }, { dirty: fieldIsDirty }, { error: fieldHasError }]"
+      v-model="<string>modelValue.data[name]"
+      ref="inputField"
+      :placeholder="c12.placeholder"
+      :aria-invalid="fieldHasError"
+      :aria-describedby="`${id}-error-message`"
+      @focusin="updateFocus(name, true)"
+      @focusout="updateFocus(name, false)"
+    ></textarea>
+
+    <span v-if="hasRightContent" class="right-content">
+      <slot name="right"></slot>
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { InpuTextC12, IFormFieldC12, IFormData } from '@/types/types.forms';
+import { validationConfig } from '@/components/forms/c12/validation-patterns';
+
+const props = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  validation: {
+    type: String,
+    default: null,
+  },
+  required: {
+    type: Boolean,
+    value: false,
+  },
+  c12: {
+    type: Object as PropType<InpuTextC12>,
+    required: true,
+  },
+  styleClassPassthrough: {
+    type: String,
+    default: '',
+  },
+});
+
+const slots = useSlots();
+const hasLeftContent = computed(() => slots.left !== undefined);
+const hasRightContent = computed(() => slots.right !== undefined);
+
+const modelValue = defineModel() as Ref<IFormData>;
+
+const updateFocus = (name: string, isFocused: boolean) => {
+  console.log(`textarea | updateFocus: ${name} ${isFocused}`);
+  modelValue.value.focusedField = isFocused ? name : '';
+};
+
+const isFocused = computed(() => {
+  return modelValue.value.focusedField == name.value;
+});
+
+const name = computed(() => {
+  return props.name !== null ? props.name : props.id;
+});
+
+const validatorLocale = toRef(useRuntimeConfig().public.validatorLocale);
+
+const componentValidation = validationConfig[validatorLocale.value][props.validation];
+const inputField = ref<HTMLInputElement | null>(null);
+
+const fieldIsDirty = computed(() => {
+  return modelValue.value!.formFieldsC12[name.value].isDirty;
+});
+const fieldHasError = computed(() => {
+  return modelValue.value!.submitAttempted && !modelValue.value!.formFieldsC12[name.value].isValid;
+});
+
+// const { fieldHasError } = useFormControl(name.value);
+
+const formFieldC12 = <IFormFieldC12>{
+  label: props.c12.label,
+  placeholder: props.c12.placeholder,
+  errorMessage: props.c12.errorMessage,
+  useCustomError: false,
+  customErrors: {},
+  isValid: false,
+  isDirty: false,
+  type: 'string',
+  previousValue: null,
+};
+modelValue.value!.formFieldsC12[name.value] = formFieldC12;
+
+const { initFormFieldsC12 } = useFormControl();
+initFormFieldsC12(props.name, formFieldC12);
+
+const fieldValue = computed(() => {
+  return modelValue.value.data[name.value];
+});
+
+watch(fieldValue, () => {
+  if (!modelValue.value!.formFieldsC12[name.value].isDirty) {
+    modelValue.value!.formFieldsC12[name.value].isDirty = modelValue.value.data[name.value] !== '';
+  }
+  modelValue.value!.formFieldsC12[name.value].isValid = inputField.value?.validity.valid ?? false;
+  modelValue.value!.validityState[name.value] = inputField.value?.validity.valid ?? false;
+
+  if (modelValue.value!.formFieldsC12[name.value].useCustomError && modelValue.value.data[props.name] === modelValue.value.formFieldsC12[props.name].previousValue) {
+    modelValue.value!.validityState[name.value] = false;
+    modelValue.value!.formFieldsC12[name.value].isValid = false;
+    modelValue.value.displayErrorMessages = true;
+  }
+});
+
+const isValid = () => {
+  setTimeout(() => {
+    modelValue.value!.validityState[name.value] = inputField.value?.validity.valid ?? false;
+    modelValue.value!.formFieldsC12[name.value].isValid = inputField.value?.validity.valid ?? false;
+    if (!modelValue.value!.formFieldsC12[name.value].isDirty) {
+      modelValue.value!.formFieldsC12[name.value].isDirty = modelValue.value.data[name.value] !== '';
+    }
+  }, 0);
+};
+
+onMounted(() => {
+  isValid();
+});
+</script>
+
+<style lang="css">
+.input-textarea-wrapper {
+  align-items: center;
+  display: grid;
+  grid-template-columns: 1fr;
+
+  &.has-left-content {
+    grid-template-columns: auto 1fr;
+    margin-left: var(--_gutter);
+
+    .left-content {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  &.has-right-content {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    /* display: flex; */
+    margin-right: var(--_gutter);
+
+    .right-content {
+      display: flex;
+      align-items: center;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,75 @@
+<template>
+  <InputTextareaMaterialCore :type :id :name :required :c12 :styleClassPassthrough :theme v-model="modelValue">
+    <template #input>
+      <InputTextareaCore :id :name :validation :required v-model="modelValue" :c12 :style-class-passthrough="styleClassPassthrough" />
+    </template>
+  </InputTextareaMaterialCore>
+</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);
+    },
+  },
+  type: {
+    // type: String as PropType<"text" | "password" | "tel" | "number" | "email" | "url">, // This breaks props setup in unit tests
+    type: String,
+    validator(value: string) {
+      return ['text', 'password', 'tel', 'number', 'email', 'url'].includes(value);
+    },
+  },
+  id: {
+    // type: String as PropType<string>,
+    type: String,
+    required: true,
+  },
+  name: {
+    type: String,
+    default: null,
+  },
+  validation: {
+    type: String,
+    default: '',
+  },
+  required: {
+    type: Boolean,
+    value: false,
+  },
+  c12: {
+    type: Object as PropType<InpuTextC12>,
+    required: true,
+  },
+  styleClassPassthrough: {
+    type: String,
+    default: '',
+  },
+});
+
+const name = computed(() => {
+  return props.name !== null ? props.name : props.id;
+});
+
+const modelValue = defineModel() as Ref<IFormData>;
+</script>