srcdev-nuxt-forms 0.0.23 → 0.1.0

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>

package/components/forms/input-text/variants/InputTextMaterial.vue

@@ -1,192 +0,0 @@
-<template>
-  <div class="input-text-material" :class="[{ error: fieldHasError }]">
-    <label
-      class="label"
-      :class="[{ active: isFocused }, { dirty: isDirty }]"
-      :for="id"
-      >{{ labelText }}</label
-    >
-    <div class="input-text-container">
-      <InputTextCore
-        :id
-        :name
-        :type
-        :validation
-        :required
-        v-model="modelValue"
-        v-model:isFocused="isFocused"
-        v-model:isDirty="isDirty"
-        :c12
-        :style-class-passthrough="styleClassPassthroughRef"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-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,
-  },
-  styleClassPassthrough: {
-    type: String,
-    default: '',
-  },
-});
-
-const name = computed(() => {
-  return props.name !== null ? props.name : props.id;
-});
-
-const labelText = computed(() => {
-  return fieldHasError.value ? errorMessage.value : props.c12.label;
-});
-
-const { styleClassPassthroughRef, updateClasses } =
-  useUpdateStyleClassPassthrough(props.styleClassPassthrough);
-
-const modelValue = defineModel() as Ref<IFormData>;
-const isFocused = ref(false);
-const isDirty = ref(false);
-
-const { errorMessage, setDefaultError, fieldHasError } = useErrorMessage(
-  name.value,
-  modelValue
-);
-setDefaultError(props.c12.errorMessage);
-</script>
-
-<style lang="css">
-.input-text-material {
-  input {
-    background-color: transparent;
-    line-height: var(--line-height);
-
-    &:focus {
-      outline: none;
-      box-shadow: none;
-      border: none;
-    }
-  }
-
-  label {
-    margin: initial;
-    line-height: var(--line-height);
-    padding: initial;
-  }
-
-  --_gutter: 12px;
-  --_form-theme: var(--theme-primary);
-  --_border-width: var(--input-border-width-default);
-
-  display: grid;
-  border-radius: 2px;
-  outline: var(--_border-width) solid var(--_form-theme);
-
-  margin-bottom: 20px;
-  overflow: hidden;
-  /* transition: all linear 0.2s; */
-
-  &:focus-within {
-    outline: calc(var(--_border-width) * 2) solid var(--_form-theme);
-    background-color: hsl(from var(--_form-theme) h s 95%);
-  }
-
-  &.error {
-    outline: calc(var(--_border-width) * 2) solid var(--theme-error);
-    background-color: hsl(from var(--theme-error) h s 95%);
-
-    /* .label {
-      color: var(--theme-error);
-    } */
-  }
-
-  .label {
-    grid-row: 1;
-    grid-column: 1;
-
-    font-family: var(--font-family);
-    font-size: 20px;
-    font-weight: 700;
-    padding: var(--_gutter);
-    transform: translateY(12px);
-    transition: all linear 0.2s;
-    background-color: transparent;
-
-    &.active,
-    &.dirty {
-      font-size: 14px;
-      transform: translateY(0);
-    }
-  }
-
-  .input-text-container {
-    display: grid;
-    grid-row: 1;
-    grid-column: 1;
-    margin-top: 2rem;
-    background-color: transparent;
-
-    .input-text {
-      font-family: var(--font-family);
-      border: 0px solid green;
-      padding: calc(var(--_gutter) / 2) var(--_gutter);
-      font-size: var(--font-size);
-      margin: 0;
-      opacity: 0;
-      transition: opacity linear 0.2s;
-
-      &.active,
-      &.dirty {
-        opacity: 1;
-      }
-      /*
-      &::placeholder,
-      &:-ms-input-placeholder,
-      &::-moz-placeholder, */
-      &::-webkit-input-placeholder {
-        font-family: var(--font-family);
-        /* color: var(--gray-5); */
-        color: hsl(from var(--_form-theme) h s 50%);
-        font-size: var(--font-size);
-        font-style: italic;
-        font-weight: 500;
-      }
-    }
-  }
-}
-</style>