srcdev-nuxt-forms 0.0.21 → 0.0.23

package/assets/styles/forms/index.css

@@ -1 +1,2 @@
-@import "./variables/_theme.css";
+@import './variables/_theme.css';
+@import './themes/index.css';

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

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

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

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

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

@@ -1,27 +1,11 @@
-:root {
-  --form-bg-color: #f9f9f9; /* Background color for form */
-  --form-border-color: #cccccc; /* Border color for form elements */
-  --form-text-color: #333333; /* Text color for form elements */
-  --form-placeholder-color: #888888; /* Placeholder text color */
-  --form-focus-border-color: #0076c6; /* Border color on focus */
-  --form-button-bg-color: #0076c6; /* Button background color */
-  --form-button-text-color: #ffffff; /* Button text color */
-  --form-error-color: #ce0606; /* Error message color */
-  --form-success-color: #008000; /* Success message color */
-  --form-warning-color: #ffcc00; /* Warning message color */
-  --form-info-color: #0076c6; /* Info message color */
-  --form-required-color: #ce0606; /* Required field color */
-  --form-disabled-color: #cccccc; /* Disabled field color */
-  --form-disabled-bg-color: #f9f9f9; /* Disabled field background color */
-  --form-disabled-border-color: #cccccc; /* Disabled field border color */
-  --form-disabled-text-color: #999999; /* Disabled field text color */
-
-  --input-border: #121212;
+: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-thick: 2px;
+  --input-border-width-default: 2px;
+  --input-border-width-thick: 3px;
 
   --font-family: futura-pt, Seravek, 'Gill Sans Nova', Ubuntu, Calibri,
     'DejaVu Sans', source-sans-pro, sans-serif;

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,9 +1,12 @@
 <template>
-  <div class="input-text-material">
-    <label class="label" :class="[{ active: isFocused }]" :for="id"
-      >{{ c12.label }} - isFocused({{ isFocused }})</label
+  <div class="input-text-material" :class="[{ error: fieldHasError }]">
+    <label
+      class="label"
+      :class="[{ active: isFocused }, { dirty: isDirty }]"
+      :for="id"
+      >{{ labelText }}</label
     >
-    <div class="input-placeholder">
+    <div class="input-text-container">
       <InputTextCore
         :id
         :name
@@ -12,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>
@@ -58,85 +62,129 @@ 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 = 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;
+      border: none;
+    }
+  }
+
+  label {
+    margin: initial;
+    line-height: var(--line-height);
+    padding: initial;
+  }
+
   --_gutter: 12px;
+  --_form-theme: var(--theme-primary);
+  --_border-width: var(--input-border-width-default);
 
   display: grid;
-  grid-template-columns: 1fr;
-  /* grid-template-rows: var(--_gutter) 1fr var(--_gutter); */
-  grid-template-rows: var(--_gutter) 1fr var(--_gutter);
-  gap: calc(var(--_gutter) / 2);
-
-  border: 1px solid red;
   border-radius: 2px;
+  outline: var(--_border-width) solid var(--_form-theme);
 
   margin-bottom: 20px;
-  /* padding: calc(2 * var(--_gutter)); */
+  overflow: hidden;
+  /* transition: all linear 0.2s; */
+
+  &:focus-within {
+    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 {
-    grid-row: 2;
+    grid-row: 1;
     grid-column: 1;
 
     font-family: var(--font-family);
-    font-size: 16px;
+    font-size: 20px;
     font-weight: 700;
     padding: var(--_gutter);
-    /* transform: translateY(12px); */
-
-    z-index: 2;
-
+    transform: translateY(12px);
     transition: all linear 0.2s;
+    background-color: transparent;
 
-    &.active {
-      grid-row: 1;
-      grid-column: 1;
-      /* padding: 0; */
-      transform: translateY(-10px);
+    &.active,
+    &.dirty {
+      font-size: 14px;
+      transform: translateY(0);
     }
   }
 
-  .input-placeholder {
-    grid-row: 2;
+  .input-text-container {
+    display: grid;
+    grid-row: 1;
     grid-column: 1;
-    align-content: center;
-    padding-inline: var(--_gutter);
-    transform: translateY(12px);
+    margin-top: 2rem;
+    background-color: transparent;
 
     .input-text {
       font-family: var(--font-family);
       border: 0px solid green;
-      padding: var(--_gutter);
-      font-size: 16px;
-
-      /* &::placeholder,
-    &:-ms-input-placeholder,
-    &::-moz-placeholder, */
+      padding: calc(var(--_gutter) / 2) var(--_gutter);
+      font-size: var(--font-size);
+      margin: 0;
+      opacity: 0;
+      transition: opacity linear 0.2s;
+
+      &.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/components/forms/ui/FormField.vue

@@ -26,7 +26,7 @@ defineProps({
 
   margin-inline: auto;
   width: min(100% - calc(2 * var(--_gutter-width)), var(--_max-width));
-  outline: 1px solid var(--gray-5);
+  outline: 0px solid var(--gray-5);
 
   &.has-gutter {
     --_gutter-width: 16px;

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.21",
+  "version": "0.0.23",
   "main": "./nuxt.config.ts",
   "scripts": {
     "reinstall": "rm -rf node_modules && npm install",