srcdev-nuxt-forms 0.1.0 → 0.2.0

package/layouts/default.vue

@@ -4,25 +4,15 @@
       <h1><NuxtLink to="/">Home</NuxtLink></h1>
       <ul class="flex-group">
         <li>
-          <NuxtLink to="/forms/examples/material/text-fields"
-            >Material UI text fields</NuxtLink
-          >
+          <NuxtLink to="/forms/examples/material/text-fields">Material UI text fields</NuxtLink>
         </li>
         <li>
-          <NuxtLink to="/forms/examples/material/text-fields-compact"
-            >Material UI text fields (compact)</NuxtLink
-          >
+          <NuxtLink to="/forms/examples/buttons">Buttons</NuxtLink>
         </li>
       </ul>
     </div>
-    <h2>Buttons</h2>
-    <ul class="flex-group">
-      <li>
-        <NuxtLink to="/forms/examples/buttons">Buttons</NuxtLink>
-      </li>
-    </ul>
 
-    <div>
+    <div class="page-layout-content">
       <slot name="layout-content"></slot>
     </div>
 
@@ -47,6 +37,10 @@ useHead({
   grid-template-rows: auto 1fr auto;
 }
 
+.page-layout-content {
+  container: content / inline-size;
+}
+
 .flex-group {
   align-items: flex-start;
   display: flex;

package/nuxt.config.ts

@@ -4,7 +4,26 @@ const { resolve } = createResolver(import.meta.url);
 
 export default defineNuxtConfig({
   devtools: { enabled: true },
+
+  app: {
+    head: {
+      htmlAttrs: {
+        lang: 'en',
+      },
+      titleTemplate: '%s - Website name',
+      meta: [{ charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }],
+    },
+    pageTransition: {
+      name: 'page',
+      mode: 'out-in',
+    },
+    layoutTransition: {
+      name: 'layout',
+      mode: 'out-in',
+    },
+  },
   css: [resolve('./assets/styles/main.css')],
+
   runtimeConfig: {
     public: {
       validatorLocale: 'en-GB',
@@ -12,10 +31,13 @@ export default defineNuxtConfig({
   },
 
   modules: ['@nuxt/icon'],
+
   components: [
     {
       path: './components',
       pathPrefix: false,
     },
   ],
+
+  compatibilityDate: '2024-07-13',
 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-forms",
   "type": "module",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "main": "./nuxt.config.ts",
   "scripts": {
     "reinstall": "rm -rf node_modules && npm install",
@@ -14,12 +14,13 @@
     "release": "release-it"
   },
   "devDependencies": {
-    "@iconify-json/material-symbols": "^1.1.83",
-    "@nuxt/eslint-config": "^0.3.13",
-    "@nuxt/icon": "^1.0.0",
-    "eslint": "^9.5.0",
-    "nuxt": "^3.12.2",
-    "release-it": "^17.4.0",
-    "typescript": "^5.5.2"
+    "@iconify-json/material-symbols": "^1.1.88",
+    "@iconify-json/radix-icons": "^1.1.15",
+    "@nuxt/eslint-config": "^0.5.0",
+    "@nuxt/icon": "^1.4.5",
+    "eslint": "^9.9.0",
+    "nuxt": "^3.12.4",
+    "release-it": "^17.6.0",
+    "typescript": "^5.5.4"
   }
 }

package/pages/forms/examples/buttons/index.vue

@@ -9,25 +9,25 @@
           <p>Themes switcher</p>
           <ul class="flex-group">
             <li>
-              <InputButtonSubmit @click.stop.prevent="swapTheme('primary')" :is-pending="false" button-text="Primary" theme="primary" size="normal" />
+              <InputButtonSubmit type="button" @click.stop.prevent="swapTheme('primary')" :is-pending="false" button-text="Primary" theme="primary" size="normal" />
             </li>
             <li>
-              <InputButtonSubmit @click.stop.prevent="swapTheme('secondary')" :is-pending="false" button-text="Secondary" theme="secondary" size="normal" />
+              <InputButtonSubmit type="button" @click.stop.prevent="swapTheme('secondary')" :is-pending="false" button-text="Secondary" theme="secondary" size="normal" />
             </li>
             <li>
-              <InputButtonSubmit @click.stop.prevent="swapTheme('tertiary')" :is-pending="false" button-text="Tertiary" theme="tertiary" size="normal" />
+              <InputButtonSubmit type="button" @click.stop.prevent="swapTheme('tertiary')" :is-pending="false" button-text="Tertiary" theme="tertiary" size="normal" />
             </li>
             <li>
-              <InputButtonSubmit @click.stop.prevent="swapTheme('warning')" :is-pending="false" button-text="Warning" theme="warning" size="normal" />
+              <InputButtonSubmit type="button" @click.stop.prevent="swapTheme('warning')" :is-pending="false" button-text="Warning" theme="warning" size="normal" />
             </li>
             <li>
-              <InputButtonSubmit @click.stop.prevent="swapTheme('success')" :is-pending="false" button-text="Success" theme="success" size="normal" />
+              <InputButtonSubmit type="button" @click.stop.prevent="swapTheme('success')" :is-pending="false" button-text="Success" theme="success" size="normal" />
             </li>
             <li>
-              <InputButtonSubmit @click.stop.prevent="swapTheme('error')" :is-pending="false" button-text="Error" theme="error" size="normal" />
+              <InputButtonSubmit type="button" @click.stop.prevent="swapTheme('error')" :is-pending="false" button-text="Error" theme="error" size="normal" />
             </li>
             <li>
-              <InputButtonSubmit @click.stop.prevent="swapTheme('ghost')" :is-pending="false" button-text="Ghost" theme="ghost" size="normal" />
+              <InputButtonSubmit type="button" @click.stop.prevent="swapTheme('ghost')" :is-pending="false" button-text="Ghost" theme="ghost" size="normal" />
             </li>
           </ul>
 
@@ -35,13 +35,13 @@
             <template #default>
               <form @submit.prevent="submitForm">
                 <div class="flex-group">
-                  <InputButtonSubmit @click.stop.prevent="submitForm" :is-pending="false" button-text="Submit" :theme size="x-small" />
+                  <InputButtonSubmit type="button" @click.stop.prevent="submitForm" :is-pending="false" button-text="Submit" :theme size="x-small" />
 
-                  <InputButtonSubmit @click.stop.prevent="submitForm" :is-pending="false" button-text="Submit" :theme size="small" />
+                  <InputButtonSubmit type="button" @click.stop.prevent="submitForm" :is-pending="false" button-text="Submit" :theme size="small" />
 
-                  <InputButtonSubmit @click.stop.prevent="submitForm" :is-pending="false" button-text="Submit" :theme size="normal" />
-                  <InputButtonSubmit @click.stop.prevent="submitForm" :is-pending="false" button-text="Submit" :theme size="medium" />
-                  <InputButtonSubmit @click.stop.prevent="submitForm" :is-pending="false" button-text="Submit" :theme size="large" />
+                  <InputButtonSubmit type="button" @click.stop.prevent="submitForm" :is-pending="false" button-text="Submit" :theme size="normal" />
+                  <InputButtonSubmit type="button" @click.stop.prevent="submitForm" :is-pending="false" button-text="Submit" :theme size="medium" />
+                  <InputButtonSubmit type="button" @click.stop.prevent="submitForm" :is-pending="false" button-text="Submit" :theme size="large" />
                 </div>
 
                 <div class="flex-group">
@@ -122,7 +122,8 @@ const fieldsInitialState = ref<IFieldsInitialState>({
 });
 
 // Setup formData
-const { formData, getErrorCount, updateCustomErrors, resetForm, formIsValid, submitDisabled } = useFormControl(fieldsInitialState);
+const { formData, initFormData, getErrorCount, updateErrorMessages, formIsValid, submitDisabled, useApiErrors } = useFormControl();
+await initFormData(fieldsInitialState);
 
 const submitForm = async () => {
   await getErrorCount(true);

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

@@ -3,98 +3,266 @@
     <NuxtLayout name="default">
       <template #layout-content>
         <div>
-          <h1>Material UI text fields (default)</h1>
-          <p>Example test fields in default material UI</p>
+          <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>
 
-          <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>
+          <p>Example test fields in default material UI</p>
+          <p>Use 'test@test.com' to trigger server errors</p>
         </div>
-        <ClientOnly>
-          <p>Client only content</p>
-          <pre>
-            {{ formData }}
-          </pre>
-        </ClientOnly>
+        <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 } from '@/types/types.forms';
+import type { IFieldsInitialState, IOptionsConfig, IFormMultipleOptions } from '@/types/types.forms';
 
 definePageMeta({
   layout: false,
 });
 
 useHead({
-  title: 'Homepage',
+  title: 'Text Field Example',
   meta: [{ name: 'description', content: 'Homepage' }],
   bodyAttrs: {
     class: '',
@@ -102,27 +270,86 @@ useHead({
 });
 
 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, getErrorCount, updateCustomErrors, resetForm, formIsValid, submitDisabled } = useFormControl(fieldsInitialState);
+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 () => {
-  await getErrorCount(true);
+  getErrorCount(true);
 
   if (formIsValid.value) {
     formData.value.isPending = true;
+    formData.value.submitDisabled = true;
     console.log('Form is good - post it!');
-    // await useSleep(2000);
-    // formData.value.isPending = false;
+
+    postFormData();
+
+    // formData.value.errorMessages['emailAddress'] = {
+    //   useCustomError: true,
+    //   message: 'This is a custom error message',
+    // };
+
+    // executePost();
   } else {
     console.warn('Form has errors');
   }
@@ -130,7 +357,16 @@ const submitForm = async () => {
 </script>
 
 <style lang="css">
-p {
-  color: initial;
+.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/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>