srcdev-nuxt-forms 0.0.22 → 0.0.23

package/assets/styles/forms/themes/_error.css

@@ -0,0 +1,3 @@
+:where(html) {
+  --theme-error: var(--red-7);
+}

package/assets/styles/forms/themes/_primary.css

@@ -1,3 +1,3 @@
 :where(html) {
-  --primary-border-default: var(--blue-8);
+  --theme-primary: var(--blue-8);
 }

package/assets/styles/forms/themes/index.css

@@ -1 +1,2 @@
 @import './_primary.css';
+@import './_error.css';

package/assets/styles/forms/variables/_theme.css

@@ -1,4 +1,7 @@
-:root {
+:where(html) {
+  --font-size: 16px;
+  --line-height: calc((var(--font-size) * 2) - 10px);
+
   --input-border-radius: 4px;
   --input-border-width-thin: 1px;
   --input-border-width-default: 2px;

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

@@ -11,6 +11,8 @@
       'input-text',
       'text-normal',
       styleClassPassthrough,
+      { active: isFocused },
+      { dirty: isDirty },
       { error: fieldHasError() },
     ]"
     v-model="modelValue.data[name]"
@@ -67,10 +69,12 @@ const props = defineProps({
 
 const modelValue = defineModel() as Ref<IFormData>;
 const isFocused = defineModel('isFocused') as Ref<boolean>;
+const isDirty = defineModel('isDirty') as Ref<boolean>;
 
 const name = computed(() => {
   return props.name !== null ? props.name : props.id;
 });
+
 const validatorLocale = toRef(useRuntimeConfig().public.validatorLocale);
 
 const componentValidation =
@@ -99,6 +103,14 @@ watchEffect(() => {
     'InputTextCore >> Form value changed to: ',
     modelValue.value.data[name.value]
   );
+
+  isDirty.value = modelValue.value.data[name.value] !== '';
+
+  modelValue.value!.validityState[name.value] =
+    inputField.value?.validity.valid ?? false;
+  if (hasCustomError()) {
+    removeCustomError(inputField.value?.validity.valid);
+  }
 });
 
 const isValid = () => {
@@ -109,17 +121,17 @@ const isValid = () => {
 };
 
 // Keep an eye on this for performance issue
-watch(
-  () => modelValue.value.data[name.value],
-  () => {
-    modelValue.value!.validityState[name.value] =
-      inputField.value?.validity.valid ?? false;
-    if (hasCustomError()) {
-      removeCustomError(inputField.value?.validity.valid);
-    }
-  },
-  { deep: true }
-);
+// watch(
+//   () => modelValue.value.data[name.value],
+//   () => {
+//     modelValue.value!.validityState[name.value] =
+//       inputField.value?.validity.valid ?? false;
+//     if (hasCustomError()) {
+//       removeCustomError(inputField.value?.validity.valid);
+//     }
+//   },
+//   { deep: true }
+// );
 
 onMounted(() => {
   isValid();

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

@@ -1,10 +1,10 @@
 <template>
-  <div class="input-text-material">
+  <div class="input-text-material" :class="[{ error: fieldHasError }]">
     <label
       class="label"
       :class="[{ active: isFocused }, { dirty: isDirty }]"
       :for="id"
-      >{{ c12.label }}</label
+      >{{ labelText }}</label
     >
     <div class="input-text-container">
       <InputTextCore
@@ -15,8 +15,9 @@
         :required
         v-model="modelValue"
         v-model:isFocused="isFocused"
+        v-model:isDirty="isDirty"
         :c12
-        :style-class-passthrough="styleClassPassthrough"
+        :style-class-passthrough="styleClassPassthroughRef"
       />
     </div>
   </div>
@@ -61,27 +62,40 @@ const props = defineProps({
     type: Object as PropType<InpuTextC12>,
     required: true,
   },
+  styleClassPassthrough: {
+    type: String,
+    default: '',
+  },
 });
 
 const name = computed(() => {
   return props.name !== null ? props.name : props.id;
 });
 
-const styleClassPassthrough = computed(() => {
-  return isFocused.value ? 'is-active' : '';
+const labelText = computed(() => {
+  return fieldHasError.value ? errorMessage.value : props.c12.label;
 });
 
+const { styleClassPassthroughRef, updateClasses } =
+  useUpdateStyleClassPassthrough(props.styleClassPassthrough);
+
 const modelValue = defineModel() as Ref<IFormData>;
 const isFocused = ref(false);
-const isDirty = computed(() => {
-  return modelValue.value.data[name.value] !== '';
-});
+const isDirty = ref(false);
+
+const { errorMessage, setDefaultError, fieldHasError } = useErrorMessage(
+  name.value,
+  modelValue
+);
+setDefaultError(props.c12.errorMessage);
 </script>
 
 <style lang="css">
 .input-text-material {
   input {
     background-color: transparent;
+    line-height: var(--line-height);
+
     &:focus {
       outline: none;
       box-shadow: none;
@@ -89,20 +103,36 @@ const isDirty = computed(() => {
     }
   }
 
+  label {
+    margin: initial;
+    line-height: var(--line-height);
+    padding: initial;
+  }
+
   --_gutter: 12px;
-  --_border-default: var(--primary-border-default);
+  --_form-theme: var(--theme-primary);
   --_border-width: var(--input-border-width-default);
 
   display: grid;
   border-radius: 2px;
-  outline: var(--_border-width) solid var(--_border-default);
+  outline: var(--_border-width) solid var(--_form-theme);
 
   margin-bottom: 20px;
   overflow: hidden;
+  /* transition: all linear 0.2s; */
 
   &:focus-within {
-    outline: calc(var(--_border-width) * 2) solid var(--_border-default);
-    background-color: hsl(from var(--_border-default) h s 95%);
+    outline: calc(var(--_border-width) * 2) solid var(--_form-theme);
+    background-color: hsl(from var(--_form-theme) h s 95%);
+  }
+
+  &.error {
+    outline: calc(var(--_border-width) * 2) solid var(--theme-error);
+    background-color: hsl(from var(--theme-error) h s 95%);
+
+    /* .label {
+      color: var(--theme-error);
+    } */
   }
 
   .label {
@@ -113,7 +143,7 @@ const isDirty = computed(() => {
     font-size: 20px;
     font-weight: 700;
     padding: var(--_gutter);
-    transform: translateY(10px);
+    transform: translateY(12px);
     transition: all linear 0.2s;
     background-color: transparent;
 
@@ -135,23 +165,26 @@ const isDirty = computed(() => {
       font-family: var(--font-family);
       border: 0px solid green;
       padding: calc(var(--_gutter) / 2) var(--_gutter);
-      font-size: 16px;
+      font-size: var(--font-size);
       margin: 0;
+      opacity: 0;
+      transition: opacity linear 0.2s;
 
-      /* &::placeholder,
-    &:-ms-input-placeholder,
-    &::-moz-placeholder, */
+      &.active,
+      &.dirty {
+        opacity: 1;
+      }
+      /*
+      &::placeholder,
+      &:-ms-input-placeholder,
+      &::-moz-placeholder, */
       &::-webkit-input-placeholder {
         font-family: var(--font-family);
-        color: var(--gray-5);
-        font-size: 14px;
+        /* color: var(--gray-5); */
+        color: hsl(from var(--_form-theme) h s 50%);
+        font-size: var(--font-size);
         font-style: italic;
-        font-weight: 700;
-        opacity: 0;
-
-        &.is-active {
-          opacity: 1;
-        }
+        font-weight: 500;
       }
     }
   }

package/composables/useUpdateStyleClassPassthrough.ts

@@ -0,0 +1,29 @@
+export const useUpdateStyleClassPassthrough = (classes: string) => {
+  const styleClassPassthroughRef = ref(classes);
+
+  function updateClasses(add: boolean, cssClass: string) {
+    let classesArray = classes.split(' ');
+
+    if (add && !classesArray.includes(cssClass)) {
+      classesArray.push(cssClass);
+    } else if (!add && classesArray.includes(cssClass)) {
+      classesArray = classesArray.filter((className) => className !== cssClass);
+    }
+
+    // if (classesArray.includes(cssClass)) {
+    //   // Remove the value if it's already in the array
+    //   classesArray = classesArray.filter(className => className !== cssClass);
+    // } else {
+    //   // Add the value if it's not in the array
+    //   classesArray.push(cssClass);
+    // }
+
+    // Join the array back into a string and assign it back
+    styleClassPassthroughRef.value = classesArray.join(' ');
+  }
+
+  return {
+    styleClassPassthroughRef,
+    updateClasses,
+  };
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-forms",
   "type": "module",
-  "version": "0.0.22",
+  "version": "0.0.23",
   "main": "./nuxt.config.ts",
   "scripts": {
     "reinstall": "rm -rf node_modules && npm install",