srcdev-nuxt-forms 0.0.23 → 0.2.0

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

@@ -0,0 +1,372 @@
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+        <div>
+          <h1>Material UI text fields ({{ compact ? 'compact' : 'default' }})</h1>
+          <ul class="flex-group">
+            <li>
+              <InputButtonSubmit type="button" @click.stop.prevent="swapCompact(false)" button-text="Use Default UI" theme="secondary" size="normal" />
+            </li>
+            <li>
+              <InputButtonSubmit type="button" @click.stop.prevent="swapCompact(true)" button-text="Use Compact UI" theme="secondary" size="normal" />
+            </li>
+          </ul>
+
+          <p>Example test fields in default material UI</p>
+          <p>Use 'test@test.com' to trigger server errors</p>
+        </div>
+        <ContentGrid>
+          <template #slot1>
+            <FormWrapper width="medium">
+              <template #default>
+                <ClientOnly>
+                  <form class="form-wrapper" @submit.stop.prevent="submitForm()">
+                    <div aria-live="assertive" id="aria-live-message"></div>
+                    <FormField width="wide" :has-gutter="false">
+                      <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="false">
+                      <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="false">
+                      <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="false">
+                      <template #default>
+                        <InputTextareaMaterial
+                          id="message"
+                          name="message"
+                          validation="message"
+                          :required="true"
+                          :c12="{
+                            label: 'Message',
+                            placeholder: 'eg. Type something here',
+                            errorMessage: 'Bad characters in message',
+                          }"
+                          v-model="formData"
+                          theme="secondary"
+                          :compact
+                        />
+                      </template>
+                    </FormField>
+
+                    <FormField width="wide" :has-gutter="false">
+                      <template #default>
+                        <InputRangeDefault
+                          id="score"
+                          name="score"
+                          :min="0"
+                          :max="100"
+                          :step="1"
+                          :required="true"
+                          validation="positiveNumber0to100"
+                          :c12="{
+                            label: 'Score between 0 & 100',
+                            placeholder: 'eg. What\'s your score?',
+                            errorMessage: 'Score between 0 & 100',
+                          }"
+                          v-model="formData"
+                          theme="secondary"
+                        >
+                          <template #description>
+                            <p class="label-description">This is a description of what the user is required to do</p>
+                          </template>
+                          <template #left>&lt;</template>
+                          <template #right>&gt;</template>
+                        </InputRangeDefault>
+                      </template>
+                    </FormField>
+
+                    <FormField v-if="citiesData !== null" width="wide" :has-gutter="false">
+                      <template #default>
+                        <MultipleCheckboxes
+                          id="cities"
+                          name="cities"
+                          legend="Choose a location"
+                          :required="true"
+                          :c12="{
+                            label: 'Check all Cities you like',
+                            placeholder: 'eg. Type something here',
+                            errorMessage: 'Please choose at least 1 location',
+                          }"
+                          v-model="formData"
+                          v-model:fieldData="citiesData"
+                          theme="secondary"
+                          size="normal"
+                          checkbox-style="check"
+                          checkbox-appearance="with-decorator"
+                        >
+                          <template #description>
+                            <p class="label-description">This is description: optionsLayout = 'equal-widths'</p>
+                          </template>
+                        </MultipleCheckboxes>
+                      </template>
+                    </FormField>
+
+                    <FormField v-if="countriesData !== null" width="wide" :has-gutter="false">
+                      <template #default>
+                        <MultipleCheckboxes
+                          id="countries"
+                          name="countries"
+                          legend="Choose a country"
+                          :required="true"
+                          :c12="{
+                            label: 'Check all countries you like',
+                            placeholder: 'eg. Choose some locations',
+                            errorMessage: 'Please select a country',
+                          }"
+                          v-model="formData"
+                          v-model:fieldData="countriesData"
+                          theme="secondary"
+                          size="normal"
+                          options-layout="inline"
+                          checkbox-style="cross"
+                          checkbox-appearance="with-decorator"
+                        >
+                          <template #description>
+                            <p class="label-description">This is description: optionsLayout = 'inline'</p>
+                          </template>
+                        </MultipleCheckboxes>
+                      </template>
+                    </FormField>
+
+                    <FormField v-if="titleData !== null" width="wide" :has-gutter="false">
+                      <template #default>
+                        <MultipleRadio
+                          id="title"
+                          name="title"
+                          legend="Choose a title"
+                          :required="true"
+                          :c12="{
+                            label: 'Check all title you like',
+                            placeholder: 'eg. Choose some title',
+                            errorMessage: 'Please select a title',
+                          }"
+                          v-model="formData"
+                          v-model:fieldData="titleData"
+                          theme="secondary"
+                          size="normal"
+                          options-layout="equal-widths"
+                          radio-appearance="with-decorator"
+                        >
+                          <template #description>
+                            <p class="label-description">This is description: optionsLayout = 'equal-widths'</p>
+                          </template>
+                        </MultipleRadio>
+                      </template>
+                    </FormField>
+
+                    <FormField width="wide" :has-gutter="false">
+                      <template #default>
+                        <SingleCheckbox
+                          id="terms"
+                          name="terms"
+                          legend="Accept terms and conditions"
+                          :required="true"
+                          :c12="{
+                            label: 'Accept terms and conditions',
+                            placeholder: 'eg. Type something here',
+                            errorMessage: 'Please accept our terms and conditions',
+                          }"
+                          v-model="formData"
+                          theme="secondary"
+                          size="normal"
+                          checkbox-appearance="with-decorator"
+                          checkbox-style="check"
+                        >
+                          <template #description>
+                            <p class="label-description">This is a description of what the user is required to do</p>
+                          </template>
+                        </SingleCheckbox>
+                      </template>
+                    </FormField>
+
+                    <FormField width="wide" :has-gutter="false">
+                      <template #default>
+                        <InputButtonSubmit type="button" @click.stop.prevent="submitForm()" :is-pending="false" :readonly="submitDisabled" button-text="Submit" theme="secondary" size="medium" />
+                      </template>
+                    </FormField>
+                  </form>
+                </ClientOnly>
+              </template>
+            </FormWrapper>
+          </template>
+          <template #slot2>
+            <ClientOnly>
+              <p>Client only content</p>
+              <pre>
+                {{ formData }}
+              </pre>
+            </ClientOnly>
+          </template>
+        </ContentGrid>
+      </template>
+    </NuxtLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { IFieldsInitialState, IOptionsConfig, IFormMultipleOptions } from '@/types/types.forms';
+
+definePageMeta({
+  layout: false,
+});
+
+useHead({
+  title: 'Text Field Example',
+  meta: [{ name: 'description', content: 'Homepage' }],
+  bodyAttrs: {
+    class: '',
+  },
+});
+
+const compact = ref(false);
+const swapCompact = (newStyle: boolean) => {
+  compact.value = newStyle;
+};
+
+/*
+ * Fetch some sample data
+ **/
+const { data: citiesData } = await useFetch<IFormMultipleOptions>('/api/places/list?category=cities');
+const { data: countriesData } = await useFetch<IFormMultipleOptions>('/api/places/list?category=countries');
+const { data: titleData } = await useFetch<IFormMultipleOptions>('/api/utils?category=title');
+
+/*
+ * Setup forms
+ */
+const fieldsInitialState = ref<IFieldsInitialState>({
+  // emailAddress: "simon@simon.com",
+  // emailAddress: "test@test.com",
+  emailAddress: '',
+  // username: "",
+  username: '',
+  // password: "!+Password123",
+  password: '',
+  message: '',
+  // message: 'This is test 1234567890,.<>?@;:',
+  score: 50,
+  cities: [],
+  countries: [],
+  title: [],
+  terms: false,
+});
+
+// Setup formData
+const { formData, initFormData, getErrorCount, updateErrorMessages, formIsValid, submitDisabled, useApiErrors } = useFormControl();
+await initFormData(fieldsInitialState);
+
+async function postFormData() {
+  try {
+    const data = await $fetch('/api/textFields', {
+      method: 'post',
+      body: formData.value.data,
+      onResponse({ response }) {
+        if (response.status === 400) {
+          console.log('onResponse', response);
+          console.log(response.status);
+
+          useApiErrors(response._data.data.errors);
+          // for (const [key, message] of Object.entries(response._data.data.errors)) {
+          //   console.log(`${key}: ${message}`);
+          //   updateErrorMessages(key, message);
+          // }
+        }
+        if (response.status === 200) {
+          formData.value.isPending = false;
+          formData.value.submitSuccess = true;
+        }
+      },
+    });
+    console.log('3: Finished data', data);
+    // return data;
+  } catch (error) {
+    console.warn('2: An error occured posting form data', error);
+  }
+}
+
+const submitForm = async () => {
+  getErrorCount(true);
+
+  if (formIsValid.value) {
+    formData.value.isPending = true;
+    formData.value.submitDisabled = true;
+    console.log('Form is good - post it!');
+
+    postFormData();
+
+    // formData.value.errorMessages['emailAddress'] = {
+    //   useCustomError: true,
+    //   message: 'This is a custom error message',
+    // };
+
+    // executePost();
+  } else {
+    console.warn('Form has errors');
+  }
+};
+</script>
+
+<style lang="css">
+.flex-group {
+  align-items: flex-start;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 24px;
+  margin-bottom: 32px;
+}
+
+ul.flex-group {
+  list-style-type: none;
+  padding: 0;
+}
+</style>

package/pages/index.vue

@@ -3,53 +3,16 @@
     <NuxtLayout name="default">
       <template #layout-content>
         <div>
-          <h1>Sample form page</h1>
+          <h1>Sample form page pages</h1>
 
-          <FormWrapper width="medium">
-            <template #default>
-              <form @submit.prevent="isPending">
-                <p>Form content</p>
-                <FormField width="wide" :has-gutter="true">
-                  <template #default>
-                    <p>Input text</p>
-                    <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>
+          <p>Example test fields in default material UI</p>
         </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,
 });
@@ -61,37 +24,6 @@ useHead({
     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/pages/limit-text.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="wrapper">
+    <div class="text-wrapper">
+      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
+    </div>
+    <div class="text-wrapper">
+      <p>Nisi harum impedit, expedita eius doloremque dicta obcaecati tempora dolorem eum fuga deserunt minus facere error mollitia pariatur cum tempore, reiciendis molestiae?</p>
+    </div>
+    <div class="text-wrapper">
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi harum impedit, expedita eius doloremque dicta obcaecati tempora dolorem eum fuga deserunt minus facere error mollitia pariatur cum
+        tempore, reiciendis molestiae?
+      </p>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+definePageMeta({
+  layout: false,
+});
+</script>
+<style lang="css">
+.wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 20px;
+}
+
+.text-wrapper {
+  max-height: 100px;
+  width: 200px;
+  padding: 20px;
+  outline: 1px solid black;
+
+  p {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    line-clamp: 3;
+    -webkit-line-clamp: 3;
+    overflow: hidden;
+  }
+}
+</style>

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
+}