srcdev-nuxt-forms 0.0.22 → 0.1.0

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

@@ -0,0 +1,154 @@
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+        <div>
+          <h1>Example buttons</h1>
+          <p>Primary submit</p>
+
+          <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" />
+            </li>
+            <li>
+              <InputButtonSubmit @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" />
+            </li>
+            <li>
+              <InputButtonSubmit @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" />
+            </li>
+            <li>
+              <InputButtonSubmit @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" />
+            </li>
+          </ul>
+
+          <FormWrapper width="medium">
+            <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 @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" />
+                </div>
+
+                <div class="flex-group">
+                  <InputButtonConfirm @click.stop.prevent="submitForm" :is-pending="false" button-text="Confirm" :theme size="x-small" />
+                  <InputButtonConfirm @click.stop.prevent="submitForm" :is-pending="false" button-text="Confirm" :theme size="small" />
+                  <InputButtonConfirm @click.stop.prevent="submitForm" :is-pending="false" button-text="Confirm" :theme size="normal" />
+                  <InputButtonConfirm @click.stop.prevent="submitForm" :is-pending="false" button-text="Confirm" :theme size="medium" />
+                  <InputButtonConfirm @click.stop.prevent="submitForm" :is-pending="false" button-text="Confirm" :theme size="large" />
+                </div>
+                <div class="flex-group">
+                  <InputButtonCore @click.stop.prevent="submitForm" :is-pending="false" button-text="Submit" :theme size="x-small">
+                    <template #iconOnly>
+                      <Icon name="radix-icons:eye-none" class="icon" />
+                    </template>
+                  </InputButtonCore>
+
+                  <InputButtonCore @click.stop.prevent="submitForm" :is-pending="false" button-text="Submit" :theme size="small">
+                    <template #iconOnly>
+                      <Icon name="radix-icons:eye-none" class="icon" />
+                    </template>
+                  </InputButtonCore>
+
+                  <InputButtonCore @click.stop.prevent="submitForm" :is-pending="false" button-text="Submit" :theme size="normal">
+                    <template #iconOnly>
+                      <Icon name="radix-icons:eye-none" class="icon" />
+                    </template>
+                  </InputButtonCore>
+
+                  <InputButtonCore @click.stop.prevent="submitForm" :is-pending="false" button-text="Submit" :theme size="medium">
+                    <template #iconOnly>
+                      <Icon name="radix-icons:eye-none" class="icon" />
+                    </template>
+                  </InputButtonCore>
+
+                  <InputButtonCore @click.stop.prevent="submitForm" :is-pending="false" button-text="Submit" :theme size="large">
+                    <template #iconOnly>
+                      <Icon name="radix-icons:eye-none" class="icon" />
+                    </template>
+                  </InputButtonCore>
+                </div>
+              </form>
+            </template>
+          </FormWrapper>
+        </div>
+      </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 theme = ref('primary');
+
+const swapTheme = (newTheme: string) => {
+  theme.value = newTheme;
+};
+
+/*
+ * 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">
+.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/forms/examples/material/text-fields-compact.vue

@@ -0,0 +1,136 @@
+<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>

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

@@ -0,0 +1,136 @@
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+        <div>
+          <h1>Material UI text fields (default)</h1>
+          <p>Example test fields in default 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(false);
+
+/*
+ * 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>

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/types/types.forms.ts

@@ -17,14 +17,7 @@ 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 {
@@ -57,7 +50,7 @@ export interface IValidityStateArr {
   };
 }
 
-export interface IValidityStateArrShort {
+export interface IFormFieldsState {
   [key: string]: boolean;
 }
 
@@ -79,11 +72,13 @@ export interface ICustomErrorMessagesArr {
 export interface IFormData {
   [x: string]: string | boolean | number | URL | object;
   data: IFieldsInitialState;
-  validityState: IValidityStateArrShort;
+  validityState: IFormFieldsState;
+  dirtyFields: IFormFieldsState;
+  focusedField: string;
   isPending: boolean;
   errorCount: number;
   customErrorMessages: ICustomErrorMessagesArr;
   formIsValid: boolean;
-  showErrors: boolean;
   submitSuccess: boolean;
+  submitDisabled: boolean;
 }

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

@@ -1,22 +0,0 @@
-<template>
-  <div>
-    <input type="text" class="input-text" v-model="formValue" />
-  </div>
-</template>
-<script setup lang="ts">
-console.log('InputText component loaded')
-
-const formValue = ref('')
-
-watchEffect(() => {
-  console.log('Form value changed to: ', formValue.value)
-})
-</script>
-
-<style lang="css">
-.input-text {
-  border: var(--input-border-width-thin) solid var(--input-border);
-  border-radius: var(--input-border-radius);
-  padding: 10px;
-}
-</style>