srcdev-nuxt-forms 0.0.18 → 0.0.19

package/.prettierrc

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

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,123 @@
 <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 { 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: ', modelValue.value.data[name.value]);
+// });
+
+const isValid = () => {
+  setTimeout(() => {
+    modelValue.value!.validityState[name.value] =
+      inputField.value?.validity.valid ?? false;
+  }, 0);
+};
 
-const formValue = ref('')
+// 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 }
+);
 
-watchEffect(() => {
-  console.log('Form value changed to: ', formValue.value)
-})
+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;
+  transition: all linear 200ms;
+  padding-left: 4px;
+  width: 100%;
 }
 </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.19",
   "main": "./nuxt.config.ts",
   "scripts": {
     "reinstall": "rm -rf node_modules && npm install",

package/pages/index.vue

@@ -7,27 +7,51 @@
 
           <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 />
+                    <InputTextCore
+                      id="username"
+                      type="text"
+                      validation="username"
+                      :required="true"
+                      v-model="formData"
+                      :c12="{
+                        label: 'Choose Username',
+                        placeholder: 'eg. YourUserName',
+                        errorMessage: 'Please enter a valid username',
+                      }"
+                    />
                   </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 +59,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;
 }