@flyanra/vue-core 1.3.8 → 1.4.0

package/src/components/form/input-renderers/country-input/index.ts

@@ -0,0 +1,6 @@
+import FlyCountryCitySelect from './FlyCountryCitySelect.vue'
+import FlyCountrySelect from './FlyCountrySelect.vue'
+import FlyCountryStatesSelect from './FlyCountryStatesSelect.vue'
+
+export default FlyCountrySelect
+export { FlyCountrySelect, FlyCountryCitySelect, FlyCountryStatesSelect }

package/src/components/form/input-renderers/form-item-renderer/FlyFormItemRenderer.vue

@@ -20,7 +20,7 @@ import { computed } from 'vue'
 
 import { ElFormItem } from 'element-plus'
 
-import { UseLocaleInjector } from '../../../../composables/useLocaleInjector/UseLocaleInjector'
+import { useLocaleInjector } from '../../../../composables/useLocaleInjector/useLocaleInjector'
 import FlyInfoTooltip from '../../../feedback/tooltip/FlyInfoTooltip.vue'
 import type { T_InputRendererBase } from '../input-renderer.types'
 import FlyInputRenderer from '../input-renderer/FlyInputRenderer.vue'
@@ -39,7 +39,7 @@ const emit = defineEmits<{
   (e: 'focus'): void
 }>()
 
-const { t } = UseLocaleInjector()
+const { t } = useLocaleInjector()
 
 const modelProxy = computed({
   get: () => props.modelValue,

package/src/components/form/input-renderers/index.ts

@@ -0,0 +1,7 @@
+export * from './form-item-renderer'
+export * from './input-renderer'
+
+export * from './country-input'
+export * from './phone-number'
+
+export type { T_InputRendererBase } from './input-renderer.types'

package/src/components/form/input-renderers/phone-number/FlyPhoneNumberInput.scss

@@ -0,0 +1 @@
+@use '../text/FlyText.scss';

package/src/components/form/input-renderers/phone-number/FlyPhoneNumberInput.vue

@@ -0,0 +1,99 @@
+<template>
+  <el-input
+    v-model="localInput"
+    :disabled="!countryCode"
+    :maxlength="phoneMaxLength"
+    clearable
+    @input="updateModel"
+    @change="emit('change', props.modelValue)"
+    @blur="emit('blur')"
+    @focus="emit('focus')"
+  >
+    <template #prepend>
+      <FlyCountrySelect
+        v-model="countryCode"
+        style="width: 115px"
+        @update:model-value="handleCountryChange"
+      >
+        <template #label="{ scope }">
+          <span v-if="scope.value"> +{{ getCountryCallingCode(scope.value as CountryCode) }} </span>
+        </template>
+      </FlyCountrySelect>
+    </template>
+  </el-input>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+
+import { ElInput } from 'element-plus'
+
+import {
+  type CountryCode,
+  getCountryCallingCode,
+  getExampleNumber,
+  parsePhoneNumberFromString
+} from 'libphonenumber-js'
+import examples from 'libphonenumber-js/examples.mobile.json'
+
+import FlyCountrySelect from '../country-input/FlyCountrySelect.vue'
+
+import './FlyPhoneNumberInput.scss'
+
+const props = defineProps<{
+  modelValue?: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string | undefined): void
+  (e: 'change', value: string | undefined): void
+  (e: 'blur'): void
+  (e: 'focus'): void
+}>()
+
+const countryCode = ref<CountryCode>()
+const localInput = ref('')
+
+const phoneMaxLength = computed(() => {
+  if (!countryCode.value) return 15
+
+  return getExampleNumber(countryCode.value, examples)?.nationalNumber.length ?? 15
+})
+
+const updateModel = () => {
+  if (!countryCode.value || !localInput.value.trim()) {
+    emit('update:modelValue', undefined)
+    return
+  }
+
+  const phone = parsePhoneNumberFromString(localInput.value, countryCode.value)
+
+  emit('update:modelValue', phone?.number)
+}
+
+const handleCountryChange = (value?: string) => {
+  countryCode.value = value as CountryCode | undefined
+  localInput.value = ''
+  emit('update:modelValue', undefined)
+  emit('change', undefined)
+}
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    console.log(props.modelValue)
+    if (!value) {
+      localInput.value = ''
+      return
+    }
+
+    const phone = parsePhoneNumberFromString(value)
+
+    if (!phone?.country) return
+
+    countryCode.value = phone.country
+    localInput.value = phone.nationalNumber
+  },
+  { immediate: true }
+)
+</script>

package/src/components/form/input-renderers/phone-number/index.ts

@@ -0,0 +1,4 @@
+import FlyPhoneNumberInput from './FlyPhoneNumberInput.vue'
+
+export default FlyPhoneNumberInput
+export { FlyPhoneNumberInput }

package/src/components/form/input-renderers/regional-tenant-form-renderer/FlyRegionalTenantFormRenderer.vue

@@ -46,7 +46,7 @@ import { type ComponentPublicInstance, reactive, ref } from 'vue'
 
 import { ElCollapse, ElCollapseItem } from 'element-plus'
 
-import { UseLocaleInjector } from '../../../../composables/useLocaleInjector/UseLocaleInjector'
+import { useLocaleInjector } from '../../../../composables/useLocaleInjector/useLocaleInjector'
 import '../../../../styles/element/overrides/collapse.scss'
 import FlyCollapseTitleRenderer from '../../../basic/typography/FlyCollapseTitleRenderer.vue'
 import type { T_FlyFormSchemaRendererInstance } from '../form-schema-renderer/FlyFormSchemaRenderer.types'
@@ -60,7 +60,7 @@ enum E_CollapsibleSections {
 
 defineProps<T_TenantRegionalFormProps>()
 
-const { t } = UseLocaleInjector()
+const { t } = useLocaleInjector()
 
 const activeNames = ref<string | number>(E_CollapsibleSections.mainForm)
 const formRefs = reactive<{ [K: string]: T_FlyFormSchemaRendererInstance }>({})

package/src/components/form/input-validators.ts

@@ -1,8 +1,9 @@
 import type { FormItemRule } from 'element-plus'
 
+import { isValidPhoneNumber } from 'libphonenumber-js'
 import { isNil } from 'lodash-es'
 
-import { UseLocaleInjector } from '../../composables/useLocaleInjector/UseLocaleInjector'
+import { useLocaleInjector } from '../../composables/useLocaleInjector/useLocaleInjector'
 import { type checkInputRange, isRequiredError } from '../../utils/validators'
 
 import type { T_ValueUnitValue } from './input-renderers/value-unit/FlyValueUnit.types'
@@ -33,7 +34,7 @@ export const requiredFieldNumber = (
   languageKey = 'validation.field',
   trigger: InputTriggers = 'change'
 ): FormItemRule => {
-  const { t } = UseLocaleInjector()
+  const { t } = useLocaleInjector()
 
   return {
     type: 'number',
@@ -97,3 +98,109 @@ export const requiredFieldArray = (
   trigger: trigger,
   message: useRequiredMessage ? isRequiredError(label) : label
 })
+
+const emailRegexValidation = (value: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)
+
+export const requiredFieldEmail = (
+  label = 'validation.field',
+  trigger: InputTriggers = 'blur',
+  useRequiredMessage = true
+): FormItemRule => ({
+  required: true,
+  trigger: trigger,
+  message: useRequiredMessage ? isRequiredError(label) : label
+})
+
+export const fieldEmail = (
+  languageKey = 'validation.field',
+  trigger: InputTriggers = 'blur'
+): FormItemRule => {
+  const { t } = useLocaleInjector()
+
+  return {
+    trigger: trigger,
+    validator: (_rule, value, callback) => {
+      // used in element form validator
+      if (!value) return callback()
+
+      if (!emailRegexValidation(value)) {
+        return callback(
+          new Error(
+            t('validation.fieldMustBeValidEmail', {
+              fieldName: t(languageKey)
+            })
+          )
+        )
+      }
+
+      return callback()
+    }
+  }
+}
+
+export const requiredFieldEmailArray = (
+  label = 'validation.field',
+  trigger: InputTriggers = 'blur',
+  useRequiredMessage = true,
+  required = true
+): FormItemRule => {
+  const { t } = useLocaleInjector()
+
+  return {
+    required: required,
+    trigger: trigger,
+    validator: (_rule, value: string[], callback) => {
+      // not required
+      if (value.length === 0 && !required) {
+        return callback()
+      }
+
+      // required but empty data passed
+      if (value.length === 0) {
+        return callback(new Error(useRequiredMessage ? isRequiredError(label) : label))
+      }
+
+      const invalidEmails = value.filter((email) => !emailRegexValidation(email))
+
+      if (invalidEmails.length > 0) {
+        return callback(
+          new Error(
+            t('validation.theseEmailsMustBeValid', {
+              emails: invalidEmails.join(', ')
+            })
+          )
+        )
+      }
+
+      return callback()
+    }
+  }
+}
+
+export const requiredFieldE164PhoneNumber = (
+  label = 'validation.field',
+  trigger: InputTriggers = 'blur',
+  useRequiredMessage = true
+): FormItemRule => ({
+  required: true,
+  trigger: trigger,
+  message: useRequiredMessage ? isRequiredError(label) : label
+})
+
+export const fieldE164PhoneNumber = (trigger: InputTriggers = 'blur'): FormItemRule => {
+  const { t } = useLocaleInjector()
+
+  return {
+    trigger: trigger,
+    validator: (_rule, value: string, callback) => {
+      // used in element form validator
+      if (!value) return callback()
+
+      if (!isValidPhoneNumber(value)) {
+        return callback(new Error(t('validation.phoneNumberInvalid')))
+      }
+
+      return callback()
+    }
+  }
+}

package/src/composables/useLocaleInjector/index.ts

@@ -1,2 +1,2 @@
-export { initLocaleInjector, UseLocaleInjector } from './UseLocaleInjector'
-export type { T_LocaleInjector } from './UseLocaleInjector'
+export { initLocaleInjector, useLocaleInjector } from './useLocaleInjector'
+export type { T_LocaleInjector, T_I18nAdapter as I18nAdapter } from './useLocaleInjector'

package/src/composables/useLocaleInjector/useLocaleInjector.ts

@@ -0,0 +1,34 @@
+import { computed, isRef } from 'vue'
+import type { ComputedRef, MaybeRef } from 'vue'
+
+import { FallbackTranslateFn } from '@flyanra/js-utils/constants'
+import type { Locale } from '@flyanra/js-utils/locales'
+import type { ComposerTranslation } from 'vue-i18n'
+
+export type T_LocaleInjector = {
+  t: ComposerTranslation
+  locale: ComputedRef<Locale>
+}
+
+export type T_I18nAdapter = {
+  t: ComposerTranslation
+  locale: MaybeRef<Locale>
+}
+
+let _t: ComposerTranslation = FallbackTranslateFn
+let _locale: ComputedRef<Locale> = computed(() => 'en')
+let _initialized = false
+
+export function initLocaleInjector(i18n: T_I18nAdapter): void {
+  _t = i18n.t
+  _locale = computed(() => (isRef(i18n.locale) ? i18n.locale.value : i18n.locale))
+  _initialized = true
+}
+
+export function useLocaleInjector(): T_LocaleInjector {
+  if (!_initialized) {
+    console.warn('[vue-core] useLocaleInjector: call initLocaleInjector() before use.')
+  }
+
+  return { t: _t, locale: _locale }
+}

package/src/styles/element/overrides/form.scss

@@ -78,8 +78,6 @@
 }
 
 .el-select__wrapper {
-  --el-fill-color-blank: var(--anra-bg-20);
-
   &.is-disabled {
     background-color: var(--anra-disabled-bg);
   }

package/src/utils/country-utils.ts

@@ -0,0 +1,27 @@
+const AdministrativeAreaLabels: Partial<Record<string, string>> = {
+  AE: 'address.administrativeAreaLabel.emirate',
+  GB: 'address.administrativeAreaLabel.county',
+  JP: 'address.administrativeAreaLabel.prefecture'
+}
+
+function getAdministrativeAreaLabel(countryCode?: string): string {
+  return (
+    AdministrativeAreaLabels[countryCode?.toUpperCase() ?? ''] ??
+    'address.administrativeAreaLabel.stateOrProvince'
+  )
+}
+
+const nationalIdLabels: Partial<Record<string, string>> = {
+  AE: 'user.nationalIdLabels.emiratesId',
+  GB: 'user.nationalIdLabels.nationalInsuranceNumber',
+  US: 'user.nationalIdLabels.socialSecurityNumber',
+  NG: 'user.nationalIdLabels.nationalIdentificationNumber'
+}
+
+function getNationalIdLabel(countryCode?: string) {
+  return countryCode
+    ? (nationalIdLabels[countryCode] ?? 'user.nationalIdLabels.defaultLabel')
+    : 'user.nationalIdLabels.defaultLabel'
+}
+
+export { getAdministrativeAreaLabel, getNationalIdLabel }

package/src/utils/index.ts

@@ -1,2 +1,4 @@
 export { checkRange } from './pure-functions'
 export { checkInputRange, isRequiredError } from './validators'
+
+export * from './country-utils'

package/src/utils/validators.ts

@@ -1,11 +1,11 @@
 import type { FormItemRule } from 'element-plus'
 
-import { UseLocaleInjector } from '../composables/useLocaleInjector/UseLocaleInjector'
+import { useLocaleInjector } from '../composables/useLocaleInjector/useLocaleInjector'
 
 import { checkRange } from './pure-functions'
 
 export const isRequiredError = (languageKey: string) => {
-  const { t } = UseLocaleInjector()
+  const { t } = useLocaleInjector()
 
   return t('validation.fieldIsRequired', {
     fieldName: t(languageKey)
@@ -22,7 +22,7 @@ export const checkInputRange = (
   valueTypeLanguageKey: string = 'validation.valueTypes.characters',
   errorMessage?: string
 ): FormItemRule['validator'] => {
-  const { t } = UseLocaleInjector()
+  const { t } = useLocaleInjector()
 
   // used in element form validator
   return (_rule: unknown, value: unknown, callback: (_?: string | Error | undefined) => void) => {

package/dist/types/composables/useLocaleInjector/UseLocaleInjector.d.ts

@@ -1,14 +0,0 @@
-import type { MaybeRef } from 'vue';
-import type { Locale } from '@flyanra/js-utils/locales';
-import type { ComposerTranslation } from 'vue-i18n';
-export type T_LocaleInjector = {
-    t: ComposerTranslation;
-    locale: Locale;
-};
-type I18nLike = {
-    t: ComposerTranslation;
-    locale: MaybeRef<Locale>;
-};
-export declare function initLocaleInjector(i18n: I18nLike): void;
-export declare function UseLocaleInjector(): T_LocaleInjector;
-export {};

package/src/composables/useLocaleInjector/UseLocaleInjector.ts

@@ -1,37 +0,0 @@
-import { isRef } from 'vue'
-import type { MaybeRef } from 'vue'
-
-import { FallbackTranslateFn } from '@flyanra/js-utils/constants'
-import type { Locale } from '@flyanra/js-utils/locales'
-import type { ComposerTranslation } from 'vue-i18n'
-
-export type T_LocaleInjector = {
-  t: ComposerTranslation
-  locale: Locale
-}
-
-type I18nLike = {
-  t: ComposerTranslation
-  locale: MaybeRef<Locale>
-}
-
-let _t: ComposerTranslation = FallbackTranslateFn
-let _locale: MaybeRef<Locale> = 'en'
-let _initialized = false
-
-export function initLocaleInjector(i18n: I18nLike): void {
-  _t = i18n.t
-  _locale = i18n.locale
-  _initialized = true
-}
-
-export function UseLocaleInjector(): T_LocaleInjector {
-  if (!_initialized) {
-    console.warn('[vue-core] UseLocaleInjector: call initLocaleInjector() before use.')
-  }
-
-  return {
-    t: _t,
-    locale: isRef(_locale) ? _locale.value : _locale
-  }
-}