srcdev-nuxt-forms 0.0.18 → 0.0.20

package/.prettierrc

@@ -1,4 +1,4 @@
 {
-    "semi": false,
-    "singleQuote": true
-  }
+  "semi": true,
+  "singleQuote": true
+}

package/assets/styles/variables/colors/_blue.css

@@ -0,0 +1,15 @@
+:where(html) {
+  --blue-0: #e7f5ff;
+  --blue-1: #d0ebff;
+  --blue-2: #a5d8ff;
+  --blue-3: #74c0fc;
+  --blue-4: #4dabf7;
+  --blue-5: #339af0;
+  --blue-6: #228be6;
+  --blue-7: #1c7ed6;
+  --blue-8: #1971c2;
+  --blue-9: #1864ab;
+  --blue-10: #145591;
+  --blue-11: #114678;
+  --blue-12: #0d375e;
+}

package/assets/styles/variables/colors/_green.css

@@ -0,0 +1,15 @@
+:where(html) {
+  --green-0: #ebfbee;
+  --green-1: #d3f9d8;
+  --green-2: #b2f2bb;
+  --green-3: #8ce99a;
+  --green-4: #69db7c;
+  --green-5: #51cf66;
+  --green-6: #40c057;
+  --green-7: #37b24d;
+  --green-8: #2f9e44;
+  --green-9: #2b8a3e;
+  --green-10: #237032;
+  --green-11: #1b5727;
+  --green-12: #133d1b;
+}

package/assets/styles/variables/colors/_grey.css

@@ -0,0 +1,15 @@
+:where(html) {
+  --gray-0: #f8f9fa;
+  --gray-1: #f1f3f5;
+  --gray-2: #e9ecef;
+  --gray-3: #dee2e6;
+  --gray-4: #ced4da;
+  --gray-5: #adb5bd;
+  --gray-6: #868e96;
+  --gray-7: #495057;
+  --gray-8: #343a40;
+  --gray-9: #212529;
+  --gray-10: #16191d;
+  --gray-11: #0d0f12;
+  --gray-12: #030507;
+}

package/assets/styles/variables/colors/_orange.css

@@ -0,0 +1,15 @@
+:where(html) {
+  --orange-0: #fff4e6;
+  --orange-1: #ffe8cc;
+  --orange-2: #ffd8a8;
+  --orange-3: #ffc078;
+  --orange-4: #ffa94d;
+  --orange-5: #ff922b;
+  --orange-6: #fd7e14;
+  --orange-7: #f76707;
+  --orange-8: #e8590c;
+  --orange-9: #d9480f;
+  --orange-10: #bf400d;
+  --orange-11: #99330b;
+  --orange-12: #802b09;
+}

package/assets/styles/variables/colors/_red.css

@@ -0,0 +1,15 @@
+:where(html) {
+  --red-0: #fff5f5;
+  --red-1: #ffe3e3;
+  --red-2: #ffc9c9;
+  --red-3: #ffa8a8;
+  --red-4: #ff8787;
+  --red-5: #ff6b6b;
+  --red-6: #fa5252;
+  --red-7: #f03e3e;
+  --red-8: #e03131;
+  --red-9: #c92a2a;
+  --red-10: #b02525;
+  --red-11: #962020;
+  --red-12: #7d1a1a;
+}

package/assets/styles/variables/colors/_yellow.css

@@ -0,0 +1,15 @@
+:where(html) {
+  --yellow-0: #fff9db;
+  --yellow-1: #fff3bf;
+  --yellow-2: #ffec99;
+  --yellow-3: #ffe066;
+  --yellow-4: #ffd43b;
+  --yellow-5: #fcc419;
+  --yellow-6: #fab005;
+  --yellow-7: #f59f00;
+  --yellow-8: #f08c00;
+  --yellow-9: #e67700;
+  --yellow-10: #b35c00;
+  --yellow-11: #804200;
+  --yellow-12: #663500;
+}

package/assets/styles/variables/colors/index.css

@@ -0,0 +1,6 @@
+@import './_red.css';
+@import './_green.css';
+@import './_blue.css';
+@import './_orange.css';
+@import './_gray.css';
+@import './_yellow.css';

package/assets/styles/variables/index.css

@@ -1 +1 @@
-@import "./_colours.css";
+@import './_colours/index.css';

package/components/forms/c12/validation-patterns/en.json

@@ -0,0 +1,44 @@
+{
+  "username": {
+    "pattern": "^[a-zA-Z0-9_\\-'.]{8,20}$",
+    "minlength": 8,
+    "maxlength": 20,
+    "hint": "Uppercase letters and numbers, with ,.- and space"
+  },
+  "usernameWeak": {
+    "pattern": "^[a-zA-Z0-9]{6,20}$",
+    "minlength": 6,
+    "maxlength": 20,
+    "hint": "Mixed case letters"
+  },
+  "password": {
+    "pattern": "^(?=.*\\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[^\\w\\d\\s:])([^\\s]){8,16}$",
+    "minlength": 8,
+    "maxlength": 20,
+    "hint": "!Pa55word"
+  },
+  "passwordWeak": {
+    "pattern": "^[a-zA-Z0-9]{6,20}$",
+    "minlength": 6,
+    "maxlength": 20,
+    "hint": "password"
+  },
+  "emailaddress": {
+    "pattern": "^(?!@)((?!([\\.]))([\\w\\.\\-\\+']{1,}))?((@)([\\w\\-]{2,})+((\\.)([\\w]{2,}))+)$",
+    "minlength": 7,
+    "maxlength": 255,
+    "hint": "you@your-email.com"
+  },
+  "url": {
+    "pattern": "^((http|https)://){1}([\\w\\-]{2,}(\\.))+([\\w]{2,})((/))*((/)[\\w\\-]{1,})*((/)[\\w]{1,}(/))*(/)*$",
+    "minlength": 13,
+    "maxlength": 255,
+    "hint": "https://your-website.com"
+  },
+  "telephone": {
+    "pattern": "^(0|\\+44|\\+353)([\\d\\- ]{10})$",
+    "minlength": 11,
+    "maxlength": 14,
+    "hint": "+441632123123"
+  }
+}

package/components/forms/c12/validation-patterns/index.ts

@@ -0,0 +1,6 @@
+import en from './en.json'
+
+export const validationConfig: any = {
+  'en-GB': en,
+}
+export default validationConfig

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

@@ -1,22 +1,124 @@
 <template>
-  <div>
-    <input type="text" class="input-text" v-model="formValue" />
-  </div>
+  <input
+    :type
+    :placeholder="c12.placeholder"
+    :id
+    :name
+    :pattern="componentValidation.pattern"
+    :maxlength="componentValidation.maxlength"
+    :required
+    :class="['input-text', 'text-normal', { error: fieldHasError() }]"
+    v-model="modelValue.data[name]"
+    ref="inputField"
+    @focusin="isFocused = true"
+    @focusout="isFocused = false"
+  />
 </template>
+
 <script setup lang="ts">
-console.log('InputText component loaded')
+import type { InpuTextC12, IFormData } from '@/types/types.forms';
+import { validationConfig } from '@/components/forms/c12/validation-patterns';
+
+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
+      );
+    },
+  },
+  id: {
+    // type: String as PropType<string>,
+    type: String,
+    required: true,
+  },
+  name: {
+    type: String,
+    default: null,
+  },
+  validation: {
+    type: String,
+    default: '',
+  },
+  required: {
+    type: Boolean,
+    value: false,
+  },
+  isPending: {
+    type: Boolean,
+    value: false,
+  },
+  c12: {
+    type: Object as PropType<InpuTextC12>,
+    required: true,
+  },
+});
+
+const modelValue = defineModel() as Ref<IFormData>;
+const isFocused = defineModel('isFocused') as Ref<boolean>;
+
+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 formValue = ref('')
+const { hasCustomError, removeCustomError } = useErrorMessage(
+  name.value,
+  modelValue
+);
+
+const fieldHasError = () => {
+  const hasApiErrorMessage = hasCustomError();
+  const inputBad = !inputField.value?.validity.valid;
+
+  if (modelValue.value.isPending) {
+    modelValue.value!.validityState[name.value] =
+      inputField.value?.validity.valid ?? false;
+    return hasApiErrorMessage ? hasApiErrorMessage : inputBad;
+  }
+  return false;
+};
 
 watchEffect(() => {
-  console.log('Form value changed to: ', formValue.value)
-})
+  console.log(
+    'InputTextCore >> Form value changed to: ',
+    modelValue.value.data[name.value]
+  );
+});
+
+const isValid = () => {
+  setTimeout(() => {
+    modelValue.value!.validityState[name.value] =
+      inputField.value?.validity.valid ?? false;
+  }, 0);
+};
+
+// 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 }
+);
+
+onMounted(() => {
+  isValid();
+});
 </script>
 
 <style lang="css">
-.input-text {
-  border: var(--input-border-width-thin) solid var(--input-border);
-  border-radius: var(--input-border-radius);
-  padding: 10px;
-}
+/* .input-text {
+  transition: all linear 200ms;
+} */
 </style>

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

@@ -0,0 +1,89 @@
+<template>
+  <div class="input-text-material">
+    <label :for="id">{{ c12.label }}</label>
+    <InputTextCore
+      :id
+      :name
+      :type
+      :validation
+      :required
+      v-model="modelValue"
+      v-model:isFocused="isFocused"
+      :c12
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { InpuTextC12, IFormData } from '@/types/types.forms';
+import { validationConfig } from '@/components/forms/c12/validation-patterns';
+
+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
+      );
+    },
+  },
+  id: {
+    // type: String as PropType<string>,
+    type: String,
+    required: true,
+  },
+  name: {
+    type: String,
+    default: null,
+  },
+  validation: {
+    type: String,
+    default: '',
+  },
+  required: {
+    type: Boolean,
+    value: false,
+  },
+  isPending: {
+    type: Boolean,
+    value: false,
+  },
+  c12: {
+    type: Object as PropType<InpuTextC12>,
+    required: true,
+  },
+});
+
+const name = computed(() => {
+  return props.name !== null ? props.name : props.id;
+});
+
+const modelValue = defineModel() as Ref<IFormData>;
+const isFocused = ref(false);
+</script>
+
+<style lang="css">
+.input-text-material {
+  display: flex;
+  flex-direction: column;
+
+  border: 1px solid black;
+  border-radius: 2px;
+
+  margin-bottom: 20px;
+
+  .input-text {
+    border: 1px solid red;
+    margin: 5px;
+
+    /* &::placeholder,
+    &:-ms-input-placeholder,
+    &::-moz-placeholder, */
+    &::-webkit-input-placeholder {
+      color: rgb(128, 0, 117);
+      font-size: 30px;
+    }
+  }
+}
+</style>

package/nuxt.config.ts

@@ -5,6 +5,12 @@ const { resolve } = createResolver(import.meta.url)
 export default defineNuxtConfig({
   devtools: { enabled: true },
   css: [resolve('./assets/styles/main.css')],
+  runtimeConfig: {
+    public: {
+      validatorLocale: 'en-GB',
+    },
+  },
+
   components: [
     {
       path: './components',

package/package.json

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

package/pages/index.vue

@@ -7,27 +7,52 @@
 
           <FormWrapper width="medium">
             <template #default>
-              <form>
+              <form @submit.prevent="isPending">
                 <p>Form content</p>
                 <FormField width="wide" :has-gutter="true">
                   <template #default>
                     <p>Input text</p>
-                    <InputTextCore />
+                    <InputTextMaterial
+                      id="username"
+                      name="username"
+                      type="text"
+                      validation="username"
+                      :required="true"
+                      :c12="{
+                        label: 'Choose Username',
+                        placeholder: 'eg. YourUserName',
+                        errorMessage: 'Please enter a valid username',
+                      }"
+                      v-model="formData"
+                    />
                   </template>
                 </FormField>
+                <input
+                  type="submit"
+                  @click.prevent="isPending"
+                  value="Submit"
+                />
               </form>
             </template>
           </FormWrapper>
         </div>
+        <ClientOnly>
+          <p>Client only content</p>
+          <pre>
+            {{ formData }}
+          </pre>
+        </ClientOnly>
       </template>
     </NuxtLayout>
   </div>
 </template>
 
 <script setup lang="ts">
+import type { IFieldsInitialState, IOptionsConfig } from '@/types/types.forms';
+
 definePageMeta({
   layout: false,
-})
+});
 
 useHead({
   title: 'Homepage',
@@ -35,7 +60,38 @@ useHead({
   bodyAttrs: {
     class: '',
   },
-})
+});
+
+/*
+ * Setup forms
+ */
+const fieldsInitialState = ref<IFieldsInitialState>({
+  username: '',
+});
+
+// Setup formData
+const {
+  formData,
+  initFormData,
+  getErrorCount,
+  updateCustomErrors,
+  resetForm,
+  formIsValid,
+  showErrors,
+} = useFormControl(fieldsInitialState);
+
+await initFormData();
+
+const isPending = async () => {
+  formData.value.isPending = true;
+  await getErrorCount();
+
+  if (formIsValid.value) {
+    console.log('Form is good - post it!');
+  } else {
+    console.warn('Form has errors');
+  }
+};
 </script>
 
 <style lang="css">

package/types/types.forms.ts

@@ -17,7 +17,14 @@ export interface IOptionsValueArr {
 }
 
 export interface IFieldsInitialState {
-  [key: string]: null | string | boolean | number | URL | object | IOptionsValueArr[];
+  [key: string]:
+    | null
+    | string
+    | boolean
+    | number
+    | URL
+    | object
+    | IOptionsValueArr[];
 }
 
 export interface IValidityState {
@@ -59,6 +66,12 @@ export interface ICustomErrorMessage {
   message: string;
 }
 
+export interface InpuTextC12 {
+  label: string;
+  placeholder: string;
+  errorMessage: string;
+}
+
 export interface ICustomErrorMessagesArr {
   [x: string]: ICustomErrorMessage;
 }