srcdev-nuxt-forms 0.0.23 → 0.2.0

package/server/data/utils/title.json

@@ -0,0 +1,49 @@
+{
+  "data": [
+    {
+      "id": "mr",
+      "name": "title",
+      "value": "title-12",
+      "label": "Mr"
+    },
+    {
+      "id": "Mrs",
+      "name": "title",
+      "value": "title-23",
+      "label": "Mrs"
+    },
+    {
+      "id": "ms",
+      "name": "title",
+      "value": "title-42",
+      "label": "Ms"
+    },
+    {
+      "id": "madam",
+      "name": "title",
+      "value": "title-56",
+      "label": "Madam"
+    },
+    {
+      "id": "prof",
+      "name": "title",
+      "value": "title-09",
+      "label": "Professor"
+    },
+    {
+      "id": "sir",
+      "name": "title",
+      "value": "title-11",
+      "label": "Sir"
+    },
+    {
+      "id": "lady",
+      "name": "title",
+      "value": "title-22",
+      "label": "Lady"
+    }
+  ],
+  "total": 5,
+  "skip": 0,
+  "limit": 10
+}

package/types/types.forms.ts

@@ -12,19 +12,19 @@ export interface IOptionsConfig {
   label: string;
 }
 
+export interface IFormMultipleOptions {
+  data: IOptionsConfig[];
+  total: number;
+  skip: number;
+  limit: number;
+}
+
 export interface IOptionsValueArr {
   [key: string]: string | boolean | number | URL | object;
 }
 
 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 +57,7 @@ export interface IValidityStateArr {
   };
 }
 
-export interface IValidityStateArrShort {
+export interface IFormFieldsState {
   [key: string]: boolean;
 }
 
@@ -72,18 +72,43 @@ export interface InpuTextC12 {
   errorMessage: string;
 }
 
-export interface ICustomErrorMessagesArr {
+export interface IErrorMessagesArr {
   [x: string]: ICustomErrorMessage;
 }
 
+export interface IFormFieldC12 {
+  label: string;
+  placeholder: string;
+  errorMessage: string;
+  useCustomError: boolean;
+  customErrors: null | string | string[];
+  isValid: boolean;
+  isDirty: boolean;
+  type: string;
+  previousValue: null | string | boolean | number | URL | object;
+}
+
+export interface IFormFieldsC12 {
+  [x: string]: IFormFieldC12;
+}
+
 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;
+  errorMessages: IErrorMessagesArr;
+  formFieldsC12: IFormFieldsC12;
   formIsValid: boolean;
-  showErrors: boolean;
+  submitAttempted: boolean;
+  submitDisabled: boolean;
   submitSuccess: boolean;
+  displayErrorMessages: boolean;
+}
+
+export interface IApiErrorMessages {
+  [x: string]: string;
 }

package/types/types.places.ts

@@ -0,0 +1,8 @@
+import type { IOptionsConfig } from '@/types/types.forms';
+
+export interface IFormMultipleOptions {
+  data: IOptionsConfig[];
+  total: number;
+  skip: number;
+  limit: number;
+}

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>