srcdev-nuxt-forms 0.0.23 → 0.1.0

package/components/forms/input-text/variants/material/InputTextMaterialCore.vue

@@ -0,0 +1,258 @@
+<template>
+  <div class="input-text-material" :class="[`theme-${theme}`, { error: fieldHasError }, { compact: compact }]">
+    <label class="label" :class="[{ active: isFocused }, { error: fieldHasError }, { dirty: isDirty }, { compact: compact }]" :for="id">
+      <span>{{ labelText }}</span>
+    </label>
+    <div class="input-text-container" :class="[{ active: isFocused }, { error: fieldHasError }, { dirty: isDirty }, { compact: compact }]">
+      <slot name="input"></slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { InpuTextC12, IFormData } from '@/types/types.forms';
+
+import propValidators from '../../../c12/prop-validators';
+
+const props = defineProps({
+  size: {
+    type: String as PropType<string>,
+    default: 'normal',
+    validator(value: string) {
+      return propValidators.size.includes(value);
+    },
+  },
+  weight: {
+    type: String as PropType<string>,
+    default: 'wght-400',
+    validator(value: string) {
+      return propValidators.weight.includes(value);
+    },
+  },
+  theme: {
+    type: String as PropType<string>,
+    default: 'primary',
+    validator(value: string) {
+      return propValidators.theme.includes(value);
+    },
+  },
+  type: {
+    type: String,
+    validator(value: string) {
+      return ['text', 'password', 'tel', 'number', 'email', 'url'].includes(value);
+    },
+  },
+  id: {
+    type: String,
+    required: true,
+  },
+  name: {
+    type: String,
+    default: null,
+  },
+  required: {
+    type: Boolean,
+    value: false,
+  },
+  c12: {
+    type: Object as PropType<InpuTextC12>,
+    required: true,
+  },
+  styleClassPassthrough: {
+    type: String,
+    default: '',
+  },
+  compact: {
+    type: Boolean,
+    value: false,
+  },
+});
+
+const labelText = computed(() => {
+  return fieldHasError.value ? errorMessage.value : props.c12.label;
+});
+
+const modelValue = defineModel() as Ref<IFormData>;
+
+const isFocused = computed(() => {
+  return modelValue.value.focusedField == props.name;
+});
+
+const isDirty = computed(() => {
+  return modelValue.value.dirtyFields[props.name];
+});
+
+const { errorMessage, setDefaultError, fieldHasError } = useErrorMessage(props.name, 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;
+    }
+
+    &:-internal-autofill-selected,
+    &:autofill {
+      background-color: transparent !important;
+    }
+  }
+
+  label {
+    margin: initial;
+    line-height: var(--line-height);
+    padding: initial;
+  }
+
+  --_gutter: 12px;
+  --_form-theme: var(--theme-form-primary);
+  --_border-width: var(--input-border-width-default);
+
+  display: grid;
+  border-radius: 2px;
+  border: var(--_border-width) solid var(--_form-theme);
+
+  margin-bottom: 20px;
+  overflow: hidden;
+
+  &.theme-secondary {
+    --_form-theme: var(--theme-form-secondary);
+  }
+
+  &:focus-within {
+    border: var(--_border-width) solid var(--_form-theme);
+    outline: var(--_border-width) solid hsl(from var(--_form-theme) h s 50%);
+    background-color: hsl(from var(--_form-theme) h s 95%);
+  }
+
+  &.error {
+    /* outline: calc(var(--_border-width) * 2) solid var(--theme-error); */
+
+    border: var(--_border-width) solid var(--theme-error);
+    outline: var(--_border-width) solid hsl(from var(--theme-error) h s 75%);
+
+    background-color: hsl(from var(--theme-error) h s 95%);
+  }
+
+  .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;
+    z-index: 2;
+
+    &.active,
+    &.dirty,
+    &.error {
+      font-size: 16px;
+      transform: translateY(-2px);
+      z-index: auto;
+    }
+  }
+
+  .input-text-container {
+    display: grid;
+    grid-row: 1;
+    grid-column: 1;
+    margin-top: 2rem;
+    background-color: transparent;
+    opacity: 0;
+    transition: opacity linear 0.2s;
+
+    &.active,
+    &.dirty,
+    &.error {
+      opacity: 1;
+    }
+
+    .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;
+      }
+    }
+  }
+}
+
+/*
+* Compact UI
+**/
+
+.input-text-material {
+  &.compact {
+    overflow: initial;
+
+    &:focus-within {
+      background-color: initial;
+    }
+
+    &.error {
+      background-color: initial;
+    }
+  }
+
+  .label {
+    &.compact {
+      align-content: center;
+      font-size: 16px;
+      padding: 0 12px;
+      transform: translateY(0);
+
+      span {
+        padding: 0 8px;
+      }
+
+      &.active,
+      &.dirty,
+      &.error {
+        font-size: 16px;
+        font-weight: 500;
+        transform: translateY(-26px);
+        z-index: auto;
+
+        span {
+          background-color: white;
+        }
+      }
+    }
+  }
+
+  .input-text-container {
+    &.compact {
+      margin: 10px 8px 6px 8px;
+    }
+  }
+}
+</style>

package/components/forms/ui/FormField.vue

@@ -1,6 +1,5 @@
 <template>
-  <div class="form-field" :class="[width, { 'has-gutter': hasGutter }]">
-    <h1>FormField.vue</h1>
+  <div class="form-field" :class="[width, styleClassPassthrough, { 'has-gutter': hasGutter }]">
     <slot name="default"></slot>
   </div>
 </template>
@@ -16,6 +15,10 @@ defineProps({
     type: Boolean as PropType<boolean>,
     default: true,
   },
+  styleClassPassthrough: {
+    type: String,
+    default: '',
+  },
 });
 </script>
 
@@ -25,6 +28,8 @@ defineProps({
   --_max-width: 400px;
 
   margin-inline: auto;
+  margin-bottom: 16px;
+
   width: min(100% - calc(2 * var(--_gutter-width)), var(--_max-width));
   outline: 0px solid var(--gray-5);
 

package/components/forms/ui/FormWrapper.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="form-wrapper" :class="width">
-    <h1>FormWrapper.vue</h1>
     <slot name="default"></slot>
   </div>
 </template>
@@ -17,7 +16,8 @@ defineProps({
 
 <style lang="css">
 .form-wrapper {
-  outline: 1px solid var(--gray-12);
+  outline: 0px solid var(--gray-12);
+  padding-bottom: 20px;
 
   &.narrow {
     max-width: 400px;

package/composables/useErrorMessages.ts

@@ -1,7 +1,7 @@
-import type { IFormData } from "@/types/types.forms";
+import type { IFormData } from '@/types/types.forms';
 
 export function useErrorMessage(name: string, formData: Ref<IFormData>) {
-  const defaultError = ref("");
+  const defaultError = ref('');
   const customErrorMessages = ref(toRaw(formData.value.customErrorMessages));
 
   const hasCustomError = () => {
@@ -21,7 +21,7 @@ export function useErrorMessage(name: string, formData: Ref<IFormData>) {
   };
 
   const fieldHasError = computed(() => {
-    if (formData.value.isPending) {
+    if (formData.value.submitDisabled) {
       if (hasCustomError()) {
         return true;
       } else if (Object.keys(formData.value.validityState).length > 0 && formData.value.validityState[name] !== undefined) {
@@ -42,6 +42,6 @@ export function useErrorMessage(name: string, formData: Ref<IFormData>) {
     errorMessage,
     setDefaultError,
     fieldHasError,
-    removeCustomError
+    removeCustomError,
   };
 }

package/composables/useFormControl.ts

@@ -1,4 +1,4 @@
-import type { IFormData, IFieldsInitialState, ICustomErrorMessage, ICustomErrorMessagesArr } from "@/types/types.forms";
+import type { IFormData, IFieldsInitialState, ICustomErrorMessage, ICustomErrorMessagesArr } from '@/types/types.forms';
 
 export function useFormControl(fieldsInitialState: IFieldsInitialState | Ref<IFieldsInitialState | null>) {
   let savedInitialState = {};
@@ -6,13 +6,15 @@ export function useFormControl(fieldsInitialState: IFieldsInitialState | Ref<IFi
   const formData = ref<IFormData>({
     data: {} as IFieldsInitialState,
     validityState: {},
+    dirtyFields: {},
+    focusedField: '',
     isPending: false,
     errorCount: 0,
     customErrorMessages: {},
     hasCustomErrorMessages: false,
     formIsValid: false,
-    showErrors: false,
-    submitSuccess: false
+    submitSuccess: false,
+    submitDisabled: false,
   });
 
   const initValidationState = async () => {
@@ -34,12 +36,21 @@ export function useFormControl(fieldsInitialState: IFieldsInitialState | Ref<IFi
     return;
   };
 
-  const getErrorCount = async () => {
+  const getErrorCount = async (updateState: boolean = false) => {
     await nextTick();
 
     const errorCount = Object.values(formData.value.validityState).filter((value) => !value).length;
     formData.value.errorCount = errorCount;
     formData.value.formIsValid = errorCount === 0;
+
+    if (updateState) {
+      formData.value.submitDisabled = true;
+    }
+
+    if (formData.value.submitDisabled) {
+      formData.value.submitDisabled = !formData.value.formIsValid;
+    }
+
     return formData.value.errorCount;
   };
 
@@ -73,7 +84,7 @@ export function useFormControl(fieldsInitialState: IFieldsInitialState | Ref<IFi
       formData.value.validityState[name] = valid;
       formData.value.customErrorMessages[name] = {
         useCustomError: true,
-        message
+        message,
       };
     }
     formData.value.hasCustomErrorMessages = countItemsWithCustomError(formData.value.customErrorMessages) > 0;
@@ -88,15 +99,20 @@ export function useFormControl(fieldsInitialState: IFieldsInitialState | Ref<IFi
     formData.value.formIsValid = false;
   };
 
-  const showErrors = computed(() => {
-    return formData.value.errorCount > 0 && formData.value.isPending;
-  });
-
   const formIsValid = computed(() => {
     return formData.value.errorCount === 0;
   });
 
+  const submitDisabled = computed(() => {
+    return formData.value.submitDisabled;
+  });
+
   // Keep an eye on this for performance issue
+
+  watchEffect(() => {
+    console.log('watchEffect: formData.value', formData.value.validityState);
+  });
+
   watch(
     () => formData.value.validityState,
     () => {
@@ -105,12 +121,16 @@ export function useFormControl(fieldsInitialState: IFieldsInitialState | Ref<IFi
     { deep: true }
   );
 
-  // watch(
-  //   () => savedInitialState,
-  //   () => {
-  //     console.log("savedInitialState UPDATED", savedInitialState);
-  //   }
-  // );
+  onMounted(() => {
+    initFormData();
+  });
 
-  return { formData, initFormData, getErrorCount, updateCustomErrors, resetForm, showErrors, formIsValid };
+  return {
+    formData,
+    getErrorCount,
+    updateCustomErrors,
+    resetForm,
+    formIsValid,
+    submitDisabled,
+  };
 }

package/layouts/default.vue

@@ -1,8 +1,26 @@
 <template>
   <div class="page-layout">
     <div>
-      <h1>Header</h1>
+      <h1><NuxtLink to="/">Home</NuxtLink></h1>
+      <ul class="flex-group">
+        <li>
+          <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
+          >
+        </li>
+      </ul>
     </div>
+    <h2>Buttons</h2>
+    <ul class="flex-group">
+      <li>
+        <NuxtLink to="/forms/examples/buttons">Buttons</NuxtLink>
+      </li>
+    </ul>
 
     <div>
       <slot name="layout-content"></slot>
@@ -20,7 +38,7 @@ useHead({
     class: 'body-default',
     id: 'body',
   },
-})
+});
 </script>
 
 <style lang="css">
@@ -28,4 +46,17 @@ useHead({
   display: grid;
   grid-template-rows: auto 1fr auto;
 }
+
+.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/nuxt.config.ts

@@ -1,6 +1,6 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
-import { createResolver } from '@nuxt/kit'
-const { resolve } = createResolver(import.meta.url)
+import { createResolver } from '@nuxt/kit';
+const { resolve } = createResolver(import.meta.url);
 
 export default defineNuxtConfig({
   devtools: { enabled: true },
@@ -11,10 +11,11 @@ export default defineNuxtConfig({
     },
   },
 
+  modules: ['@nuxt/icon'],
   components: [
     {
       path: './components',
       pathPrefix: false,
     },
   ],
-})
+});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-forms",
   "type": "module",
-  "version": "0.0.23",
+  "version": "0.1.0",
   "main": "./nuxt.config.ts",
   "scripts": {
     "reinstall": "rm -rf node_modules && npm install",
@@ -14,7 +14,9 @@
     "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",

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>