From 663672e76d393c7a212b650b3f79a8e4a272370d Mon Sep 17 00:00:00 2001 From: Fernando Terra <79578735+fterra-encora@users.noreply.github.com> Date: Tue, 2 Jan 2024 09:45:52 -0300 Subject: [PATCH] Feat/input type tel (#701) * feat: set phone number input type as tel * feat: improve code readability --- .../forms/DateInputComponent/index.vue | 2 +- .../components/forms/TextInputComponent.vue | 34 ++++++++++++------- .../grouping/AddressGroupComponent.vue | 11 ++++++ .../grouping/ContactGroupComponent.vue | 1 + frontend/src/components/types.ts | 3 ++ 5 files changed, 37 insertions(+), 14 deletions(-) create mode 100644 frontend/src/components/types.ts diff --git a/frontend/src/components/forms/DateInputComponent/index.vue b/frontend/src/components/forms/DateInputComponent/index.vue index 020f319857..d336f889cc 100644 --- a/frontend/src/components/forms/DateInputComponent/index.vue +++ b/frontend/src/components/forms/DateInputComponent/index.vue @@ -170,7 +170,7 @@ const focusedPart = ref(null); const getPartsExcept = (datePart: DatePart) => Object.values(DatePart) - .filter((current) => typeof current === typeof DatePart.year) // get the type from any enum value + .filter((current) => typeof current === typeof datePart) // filter out key names from the enum reverse mapping .filter((current) => current !== datePart) as DatePart[]; // This function emits the events on update diff --git a/frontend/src/components/forms/TextInputComponent.vue b/frontend/src/components/forms/TextInputComponent.vue index e929677b7b..e6c1afde9e 100644 --- a/frontend/src/components/forms/TextInputComponent.vue +++ b/frontend/src/components/forms/TextInputComponent.vue @@ -6,20 +6,27 @@ import "@carbon/web-components/es/components/text-input/index"; import { useEventBus } from "@vueuse/core"; // Types import { isEmpty } from "@/dto/CommonTypesDto"; +import type { TextInputType } from "@/components/types"; //Define the input properties for this component -const props = defineProps<{ - id: string; - label: string; - tip?: string; - enabled?: boolean; - placeholder: string; - modelValue: string; - validations: Array; - errorMessage?: string; - mask?: string; - requiredLabel?: boolean; -}>(); +const props = withDefaults( + defineProps<{ + id: string; + label: string; + tip?: string; + enabled?: boolean; + placeholder: string; + modelValue: string; + validations: Array; + errorMessage?: string; + mask?: string; + requiredLabel?: boolean; + type?: TextInputType; + }>(), + { + type: "text", + }, +); //Events we emit during component lifecycle const emit = defineEmits<{ @@ -129,6 +136,7 @@ const selectValue = (event: any) => { { @input="selectValue" :data-focus="id" :data-scroll="id" - :data-id="'input-' + id" + :data-id="'input-' + id" /> diff --git a/frontend/src/components/grouping/AddressGroupComponent.vue b/frontend/src/components/grouping/AddressGroupComponent.vue index 3a11d24a2b..20ea69322d 100644 --- a/frontend/src/components/grouping/AddressGroupComponent.vue +++ b/frontend/src/components/grouping/AddressGroupComponent.vue @@ -9,6 +9,7 @@ import { useFocus } from "@/composables/useFocus"; // Types import type { CodeNameType, BusinessSearchResult } from "@/dto/CommonTypesDto"; import type { Address } from "@/dto/ApplyClientNumberDto"; +import type { TextInputType} from "@/components/types" // Validators import { getValidations } from "@/helpers/validators/GlobalValidators"; import { submissionValidation } from "@/helpers/validators/SubmissionValidators"; @@ -165,6 +166,15 @@ const postalCodePlaceholder = computed(() => { } }); +const postalCodeInputType = computed(() => { + switch (selectedValue.country.value) { + case "CA": + return "text"; + default: + return "tel"; + } +}); + const provinceNaming = computed(() => { switch (selectedValue.country.value) { case "CA": @@ -343,6 +353,7 @@ onMounted(() => { {