srcdev-nuxt-forms 0.1.0 → 0.2.0

package/server/api/places/list.get.ts

@@ -0,0 +1,23 @@
+import cities from '../../data/places/cities.json';
+import countries from '../../data/places/countries.json';
+
+export default defineEventHandler(async (event) => {
+  const sleep = async (ms: number) => {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+  };
+
+  const query = getQuery(event);
+
+  let timeout = 0;
+  if (typeof query.delay !== 'undefined') {
+    timeout = Number(query.delay);
+  }
+
+  await sleep(timeout);
+
+  if (query.category === 'cities') {
+    return cities;
+  } else if (query.category === 'countries') {
+    return countries;
+  }
+});

package/server/api/textFields.post.ts

@@ -0,0 +1,37 @@
+import { createError } from 'h3';
+
+export default defineEventHandler(async (event: any) => {
+  const body = await readBody<{ emailAddress: string; password: string; username: string }>(event);
+
+  const { emailAddress, password, username } = body;
+
+  let throwError = false;
+
+  if (emailAddress === 'test@test.com') {
+    throwError = true;
+  }
+
+  const response = {
+    status: 200,
+    statusText: 'success',
+  };
+
+  // set some other response status cde
+  // setResponseStatus(event, 202)
+
+  // Throw some server side errors
+  if (throwError) {
+    throw createError({
+      statusCode: 400,
+      statusMessage: 'error',
+      data: {
+        errors: {
+          emailAddress: 'Email address already registered',
+          username: 'Username already registered',
+          password: ['Password is too weak', 'Password is too short'],
+        },
+      },
+    });
+  }
+  return response;
+});

package/server/api/utils/index.get.ts

@@ -0,0 +1,20 @@
+import title from '../../data/utils/title.json';
+
+export default defineEventHandler(async (event) => {
+  const sleep = async (ms: number) => {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+  };
+
+  const query = getQuery(event);
+
+  let timeout = 0;
+  if (typeof query.delay !== 'undefined') {
+    timeout = Number(query.delay);
+  }
+
+  await sleep(timeout);
+
+  if (query.category === 'title') {
+    return title;
+  }
+});

package/server/data/places/cities.json

@@ -0,0 +1,37 @@
+{
+  "data": [
+    {
+      "id": "bath",
+      "name": "cities",
+      "value": "cities-12",
+      "label": "Bath"
+    },
+    {
+      "id": "bristol",
+      "name": "cities",
+      "value": "cities-23",
+      "label": "Bristol"
+    },
+    {
+      "id": "london",
+      "name": "cities",
+      "value": "cities-42",
+      "label": "London"
+    },
+    {
+      "id": "sunderland",
+      "name": "cities",
+      "value": "cities-56",
+      "label": "Sunderland"
+    },
+    {
+      "id": "penzance",
+      "name": "cities",
+      "value": "cities-09",
+      "label": "Penzance"
+    }
+  ],
+  "total": 5,
+  "skip": 0,
+  "limit": 10
+}

package/server/data/places/countries.json

@@ -0,0 +1,55 @@
+{
+  "data": [
+    {
+      "id": "uk",
+      "name": "countries",
+      "value": "countries-12",
+      "label": "United Kingdom"
+    },
+    {
+      "id": "france",
+      "name": "countries",
+      "value": "countries-23",
+      "label": "France"
+    },
+    {
+      "id": "spain",
+      "name": "countries",
+      "value": "countries-42",
+      "label": "Spain"
+    },
+    {
+      "id": "italy",
+      "name": "countries",
+      "value": "countries-56",
+      "label": "Italy"
+    },
+    {
+      "id": "greece",
+      "name": "countries",
+      "value": "countries-09",
+      "label": "Greece"
+    },
+    {
+      "id": "turkey",
+      "name": "countries",
+      "value": "countries-13",
+      "label": "Turkey"
+    },
+    {
+      "id": "germany",
+      "name": "countries",
+      "value": "countries-76",
+      "label": "Germany"
+    },
+    {
+      "id": "portugal",
+      "name": "countries",
+      "value": "countries-34",
+      "label": "Portugal"
+    }
+  ],
+  "total": 5,
+  "skip": 0,
+  "limit": 10
+}

package/server/data/utils/title.json

@@ -0,0 +1,49 @@
+{
+  "data": [
+    {
+      "id": "mr",
+      "name": "title",
+      "value": "title-12",
+      "label": "Mr"
+    },
+    {
+      "id": "Mrs",
+      "name": "title",
+      "value": "title-23",
+      "label": "Mrs"
+    },
+    {
+      "id": "ms",
+      "name": "title",
+      "value": "title-42",
+      "label": "Ms"
+    },
+    {
+      "id": "madam",
+      "name": "title",
+      "value": "title-56",
+      "label": "Madam"
+    },
+    {
+      "id": "prof",
+      "name": "title",
+      "value": "title-09",
+      "label": "Professor"
+    },
+    {
+      "id": "sir",
+      "name": "title",
+      "value": "title-11",
+      "label": "Sir"
+    },
+    {
+      "id": "lady",
+      "name": "title",
+      "value": "title-22",
+      "label": "Lady"
+    }
+  ],
+  "total": 5,
+  "skip": 0,
+  "limit": 10
+}

package/types/types.forms.ts

@@ -12,6 +12,13 @@ export interface IOptionsConfig {
   label: string;
 }
 
+export interface IFormMultipleOptions {
+  data: IOptionsConfig[];
+  total: number;
+  skip: number;
+  limit: number;
+}
+
 export interface IOptionsValueArr {
   [key: string]: string | boolean | number | URL | object;
 }
@@ -65,10 +72,26 @@ export interface InpuTextC12 {
   errorMessage: string;
 }
 
-export interface ICustomErrorMessagesArr {
+export interface IErrorMessagesArr {
   [x: string]: ICustomErrorMessage;
 }
 
+export interface IFormFieldC12 {
+  label: string;
+  placeholder: string;
+  errorMessage: string;
+  useCustomError: boolean;
+  customErrors: null | string | string[];
+  isValid: boolean;
+  isDirty: boolean;
+  type: string;
+  previousValue: null | string | boolean | number | URL | object;
+}
+
+export interface IFormFieldsC12 {
+  [x: string]: IFormFieldC12;
+}
+
 export interface IFormData {
   [x: string]: string | boolean | number | URL | object;
   data: IFieldsInitialState;
@@ -77,8 +100,15 @@ export interface IFormData {
   focusedField: string;
   isPending: boolean;
   errorCount: number;
-  customErrorMessages: ICustomErrorMessagesArr;
+  errorMessages: IErrorMessagesArr;
+  formFieldsC12: IFormFieldsC12;
   formIsValid: boolean;
-  submitSuccess: boolean;
+  submitAttempted: boolean;
   submitDisabled: boolean;
+  submitSuccess: boolean;
+  displayErrorMessages: boolean;
+}
+
+export interface IApiErrorMessages {
+  [x: string]: string;
 }

package/types/types.places.ts

@@ -0,0 +1,8 @@
+import type { IOptionsConfig } from '@/types/types.forms';
+
+export interface IFormMultipleOptions {
+  data: IOptionsConfig[];
+  total: number;
+  skip: number;
+  limit: number;
+}

package/pages/forms/examples/material/text-fields-compact.vue

@@ -1,136 +0,0 @@
-<template>
-  <div>
-    <NuxtLayout name="default">
-      <template #layout-content>
-        <div>
-          <h1>Material UI text fields (compact)</h1>
-          <p>Example test fields in "compact" material UI</p>
-
-          <FormWrapper width="medium">
-            <template #default>
-              <form @submit.prevent="submitForm">
-                <FormField width="wide" :has-gutter="true">
-                  <template #default>
-                    <InputEmailMaterial
-                      id="emailAddress"
-                      name="emailAddress"
-                      validation="emailaddress"
-                      :required="true"
-                      :c12="{
-                        label: 'Your Email Address',
-                        placeholder: 'eg. joe@example.com',
-                        errorMessage: 'Please enter a valid email address',
-                      }"
-                      v-model="formData"
-                      theme="secondary"
-                      :compact
-                    />
-                  </template>
-                </FormField>
-
-                <FormField width="wide" :has-gutter="true">
-                  <template #default>
-                    <InputTextMaterial
-                      id="username"
-                      name="username"
-                      validation="username"
-                      :required="true"
-                      :c12="{
-                        label: 'Your Username',
-                        placeholder: 'eg. YourUserName',
-                        errorMessage: 'Please enter a valid username',
-                      }"
-                      v-model="formData"
-                      theme="secondary"
-                      :compact
-                    />
-                  </template>
-                </FormField>
-
-                <FormField width="wide" :has-gutter="true">
-                  <template #default>
-                    <InputPasswordMaterial
-                      id="password"
-                      name="password"
-                      validation="password"
-                      :required="true"
-                      :c12="{
-                        label: 'Password',
-                        placeholder: 'eg. Your5illYPa55w0rd',
-                        errorMessage: 'Please enter a valid password',
-                      }"
-                      v-model="formData"
-                      theme="secondary"
-                      :compact
-                    />
-                  </template>
-                </FormField>
-
-                <FormField width="wide" :has-gutter="true">
-                  <template #default>
-                    <InputButtonSubmit @click.stop.prevent="submitForm" :is-pending="false" :readonly="submitDisabled" button-text="Submit" theme="secondary" size="medium" />
-                  </template>
-                </FormField>
-              </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',
-  meta: [{ name: 'description', content: 'Homepage' }],
-  bodyAttrs: {
-    class: '',
-  },
-});
-
-const compact = ref(true);
-
-/*
- * Setup forms
- */
-const fieldsInitialState = ref<IFieldsInitialState>({
-  emailAddress: '',
-  username: '',
-  password: '',
-});
-
-// Setup formData
-const { formData, getErrorCount, updateCustomErrors, resetForm, formIsValid, submitDisabled } = useFormControl(fieldsInitialState);
-
-const submitForm = async () => {
-  await getErrorCount(true);
-
-  if (formIsValid.value) {
-    formData.value.isPending = true;
-    console.log('Form is good - post it!');
-    // await useSleep(2000);
-    // formData.value.isPending = false;
-  } else {
-    console.warn('Form has errors');
-  }
-};
-</script>
-
-<style lang="css">
-p {
-  color: initial;
-}
-</style>