srcdev-nuxt-forms 0.0.23 → 0.1.0

package/components/forms/input-button/variants/InputButtonSubmit.vue

@@ -0,0 +1,74 @@
+<template>
+  <InputButtonCore
+    type="submit"
+    :use-effect="useEffect"
+    :isPending="isPending"
+    :readonly
+    :effect="effect"
+    :data-test-id="dataTestId"
+    :size
+    :weight
+    :button-text="buttonText"
+    :style-class-passthrough="styleClassPassthrough"
+    :theme
+  />
+</template>
+
+<script setup lang="ts">
+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);
+    },
+  },
+  useEffect: {
+    type: Boolean,
+    default: false,
+  },
+  effect: {
+    type: String as PropType<string>,
+    default: 'fancy',
+    validator(value: string) {
+      return ['fancy', 'pulse'].includes(value);
+    },
+  },
+  buttonText: {
+    type: String,
+    required: true,
+  },
+  dataTestId: {
+    type: String,
+    default: '',
+  },
+  styleClassPassthrough: {
+    type: String,
+    default: '',
+  },
+  isPending: {
+    type: Boolean,
+    default: false,
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>

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

@@ -1,25 +1,33 @@
 <template>
-  <input
-    :type
-    :placeholder="c12.placeholder"
-    :id
-    :name
-    :pattern="componentValidation.pattern"
-    :maxlength="componentValidation.maxlength"
-    :required
-    :class="[
-      'input-text',
-      'text-normal',
-      styleClassPassthrough,
-      { active: isFocused },
-      { dirty: isDirty },
-      { error: fieldHasError() },
-    ]"
-    v-model="modelValue.data[name]"
-    ref="inputField"
-    @focusin="isFocused = true"
-    @focusout="isFocused = false"
-  />
+  <div class="input-text-wrapper" :class="[{ 'has-left-content': hasLeftContent }]">
+    <template v-if="hasLeftContent">
+      <span class="left-content">
+        <slot name="left"></slot>
+      </span>
+    </template>
+
+    <input
+      :type
+      :placeholder="c12.placeholder"
+      :id
+      :name
+      :pattern="componentValidation.pattern"
+      :maxlength="componentValidation.maxlength"
+      :required
+      :class="['input-text', 'text-normal', styleClassPassthrough, { active: isFocused }, { dirty: isDirty }, { error: fieldHasError() }]"
+      v-model="modelValue.data[name]"
+      ref="inputField"
+      :readonly="isPending"
+      @focusin="updateFocus(name, true)"
+      @focusout="updateFocus(name, false)"
+    />
+
+    <template v-if="hasRightContent">
+      <span class="right-content">
+        <slot name="right"></slot>
+      </span>
+    </template>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -31,9 +39,7 @@ const props = defineProps({
     // 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
-      );
+      return ['text', 'password', 'tel', 'number', 'email', 'url'].includes(value);
     },
   },
   id: {
@@ -43,20 +49,16 @@ const props = defineProps({
   },
   name: {
     type: String,
-    default: null,
+    required: true,
   },
   validation: {
     type: String,
-    default: '',
+    default: null,
   },
   required: {
     type: Boolean,
     value: false,
   },
-  isPending: {
-    type: Boolean,
-    value: false,
-  },
   c12: {
     type: Object as PropType<InpuTextC12>,
     required: true,
@@ -67,9 +69,27 @@ const props = defineProps({
   },
 });
 
+const slots = useSlots();
+const hasLeftContent = computed(() => slots.left !== undefined);
+const hasRightContent = computed(() => slots.right !== undefined);
+
 const modelValue = defineModel() as Ref<IFormData>;
-const isFocused = defineModel('isFocused') as Ref<boolean>;
-const isDirty = defineModel('isDirty') as Ref<boolean>;
+
+const updateFocus = (name: string, isFocused: boolean) => {
+  modelValue.value.focusedField = isFocused ? name : '';
+};
+
+const isPending = computed(() => {
+  return modelValue.value.isPending;
+});
+
+const isFocused = computed(() => {
+  return modelValue.value.focusedField == name.value;
+});
+
+const isDirty = computed(() => {
+  return modelValue.value.dirtyFields[name.value];
+});
 
 const name = computed(() => {
   return props.name !== null ? props.name : props.id;
@@ -77,37 +97,27 @@ const name = computed(() => {
 
 const validatorLocale = toRef(useRuntimeConfig().public.validatorLocale);
 
-const componentValidation =
-  validationConfig[validatorLocale.value][props.validation];
+const componentValidation = validationConfig[validatorLocale.value][props.validation];
 const inputField = ref<HTMLInputElement | null>(null);
 
-const { hasCustomError, removeCustomError } = useErrorMessage(
-  name.value,
-  modelValue
-);
+const { hasCustomError, removeCustomError } = useErrorMessage(name.value, modelValue);
 
 const fieldHasError = () => {
   const hasApiErrorMessage = hasCustomError();
   const inputBad = !inputField.value?.validity.valid;
 
   if (modelValue.value.isPending) {
-    modelValue.value!.validityState[name.value] =
-      inputField.value?.validity.valid ?? false;
+    modelValue.value!.validityState[name.value] = inputField.value?.validity.valid ?? false;
     return hasApiErrorMessage ? hasApiErrorMessage : inputBad;
   }
   return false;
 };
 
 watchEffect(() => {
-  console.log(
-    'InputTextCore >> Form value changed to: ',
-    modelValue.value.data[name.value]
-  );
+  console.log('watchEffect()');
+  modelValue.value.dirtyFields[name.value] = modelValue.value.data[name.value] !== '';
 
-  isDirty.value = modelValue.value.data[name.value] !== '';
-
-  modelValue.value!.validityState[name.value] =
-    inputField.value?.validity.valid ?? false;
+  modelValue.value!.validityState[name.value] = inputField.value?.validity.valid ?? false;
   if (hasCustomError()) {
     removeCustomError(inputField.value?.validity.valid);
   }
@@ -115,31 +125,27 @@ watchEffect(() => {
 
 const isValid = () => {
   setTimeout(() => {
-    modelValue.value!.validityState[name.value] =
-      inputField.value?.validity.valid ?? false;
+    modelValue.value!.validityState[name.value] = inputField.value?.validity.valid ?? false;
   }, 0);
 };
 
-// Keep an eye on this for performance issue
-// watch(
-//   () => modelValue.value.data[name.value],
-//   () => {
-//     modelValue.value!.validityState[name.value] =
-//       inputField.value?.validity.valid ?? false;
-//     if (hasCustomError()) {
-//       removeCustomError(inputField.value?.validity.valid);
-//     }
-//   },
-//   { deep: true }
-// );
-
 onMounted(() => {
   isValid();
 });
 </script>
 
 <style lang="css">
-/* .input-text {
-  transition: all linear 200ms;
-} */
+.input-text-wrapper {
+  display: flex;
+  align-items: center;
+
+  &.has-left-content {
+    margin-left: var(--_gutter);
+
+    .left-content {
+      display: flex;
+      align-items: center;
+    }
+  }
+}
 </style>

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

@@ -0,0 +1,72 @@
+<template>
+  <InputTextMaterialCore type="email" :id :name :required :c12 :styleClassPassthrough :theme v-model="modelValue">
+    <template #input>
+      <InputTextCore :id :name type="email" :validation :required v-model="modelValue" :c12 :style-class-passthrough="styleClassPassthrough">
+        <template #left>
+          <Icon name="radix-icons:envelope-closed" class="icon" />
+        </template>
+      </InputTextCore>
+    </template>
+  </InputTextMaterialCore>
+</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);
+    },
+  },
+  id: {
+    // type: String as PropType<string>,
+    type: String,
+    required: true,
+  },
+  name: {
+    type: String,
+    default: null,
+  },
+  validation: {
+    type: String,
+    default: '',
+  },
+  required: {
+    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 modelValue = defineModel() as Ref<IFormData>;
+</script>

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

@@ -0,0 +1,88 @@
+<template>
+  <InputTextMaterialCore :type :id :name :required :c12 :styleClassPassthrough :theme v-model="modelValue">
+    <template #input>
+      <InputTextCore :id :name :type :validation :required v-model="modelValue" :c12 :style-class-passthrough="styleClassPassthrough">
+        <template #right>
+          <InputButtonCore @click.stop.prevent="toggleDisplayPassword" :is-pending="false" button-text="Submit" theme="ghost" size="x-small">
+            <template #iconOnly>
+              <Icon v-if="displayPassword" name="radix-icons:eye-none" class="icon" />
+              <Icon v-else name="radix-icons:eye-open" class="icon" />
+            </template>
+          </InputButtonCore>
+        </template>
+      </InputTextCore>
+    </template>
+  </InputTextMaterialCore>
+</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);
+    },
+  },
+  id: {
+    // type: String as PropType<string>,
+    type: String,
+    required: true,
+  },
+  name: {
+    type: String,
+    default: null,
+  },
+  validation: {
+    type: String,
+    default: '',
+  },
+  required: {
+    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 modelValue = defineModel() as Ref<IFormData>;
+
+const displayPassword = ref(false);
+
+const type = computed(() => {
+  // return displayPassword.value && !modelValue.value.isPending ? "text" : "password";
+  return displayPassword.value ? 'text' : 'password';
+});
+
+const toggleDisplayPassword = () => {
+  displayPassword.value = !displayPassword.value;
+};
+</script>

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

@@ -0,0 +1,75 @@
+<template>
+  <InputTextMaterialCore :type :id :name :required :c12 :styleClassPassthrough :theme v-model="modelValue">
+    <template #input>
+      <InputTextCore :id :name type="text" :validation :required v-model="modelValue" :c12 :style-class-passthrough="styleClassPassthrough" />
+    </template>
+  </InputTextMaterialCore>
+</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 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,
+  },
+  c12: {
+    type: Object as PropType<InpuTextC12>,
+    required: true,
+  },
+  styleClassPassthrough: {
+    type: String,
+    default: '',
+  },
+});
+
+const name = computed(() => {
+  return props.name !== null ? props.name : props.id;
+});
+
+const modelValue = defineModel() as Ref<IFormData>;
+</script>