@flyanra/vue-core 1.3.9 → 1.5.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,19 @@
+export * from './form-item-renderer'
+export * from './input-renderer'
+
+export * from './country-input'
+export * from './phone-number'
+export * from './otp-input'
+export * from './regional-tenant-form-renderer'
+
+export type { T_InputRendererBase } from './input-renderer.types'
+export type {
+  T_FormSchemaLookupData,
+  T_InputSchema,
+  T_InputSchemaText,
+  T_InputSchemaNumber,
+  T_InputSchemaBoolean,
+  T_InputSchemaSelect,
+  T_InputSchemaValueUnit,
+  T_InputSchemaDateTime
+} from './form-schema.types'

package/src/components/form/input-renderers/otp-input/FlyOTPInput.scss

@@ -0,0 +1,27 @@
+@use 'element-plus/theme-chalk/src/input.scss';
+
+.fly-otp-input-group {
+  display: flex;
+  justify-content: center;
+  align-self: center;
+  flex-wrap: wrap;
+  gap: 1rem; // tw:gap-4
+}
+
+.fly-otp-input-slot {
+  width: 3rem; // tw:w-12
+}
+
+.fly-otp-input {
+  .el-input__wrapper {
+    aspect-ratio: 1 / 1; // tw:aspect-square
+    padding: 0;
+  }
+
+  .el-input__inner {
+    text-align: center; // tw:text-center
+    font-weight: 700; // tw:font-bold
+    font-size: 1.5rem; // tw:text-2xl
+    line-height: 2rem;
+  }
+}

package/src/components/form/input-renderers/otp-input/FlyOTPInput.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="fly-otp-input-group">
+    <div v-for="(_, index) in slots" :key="index" class="fly-otp-input-slot">
+      <el-input
+        :ref="(el) => (inputRefs[index] = el as InstanceType<typeof ElInput> | null)"
+        v-model="slots[index]"
+        :disabled="disabled"
+        :maxlength="1"
+        class="fly-otp-input"
+        @input="handleInput(index)"
+        @keydown="(e: KeyboardEvent | Event) => handleKeydown(e, index)"
+        @paste.prevent="handlePaste"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+import { ElInput } from 'element-plus'
+
+import './FlyOTPInput.scss'
+
+const props = defineProps<{
+  modelValue: string
+  length?: number
+  disabled?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+  (e: 'complete', value: string): void
+}>()
+
+const resolvedLength = props.length ?? 4
+
+const slots = ref<string[]>(Array(resolvedLength).fill(''))
+const inputRefs = ref<(InstanceType<typeof ElInput> | null)[]>([])
+
+const emitValue = () => {
+  const joined = slots.value.join('')
+  emit('update:modelValue', joined)
+  if (joined.length === resolvedLength && slots.value.every((s) => s.length === 1)) {
+    emit('complete', joined)
+  }
+}
+
+const handleInput = (index: number) => {
+  const val = slots.value[index]
+  if (!val) return
+  // Only keep the last character in case browser allows more than 1
+  slots.value[index] = val.slice(-1).replace(/\D/, '')
+  if (!slots.value[index]) return
+  inputRefs.value[index + 1]?.focus()
+  emitValue()
+}
+
+const handleKeydown = (event: KeyboardEvent | Event, index: number) => {
+  if (!(event instanceof KeyboardEvent)) return
+  if (event.key === 'Backspace') {
+    if (slots.value[index]) {
+      slots.value[index] = ''
+      emitValue()
+    } else {
+      inputRefs.value[index - 1]?.focus()
+    }
+  } else if (event.key === 'ArrowLeft') {
+    inputRefs.value[index - 1]?.focus()
+  } else if (event.key === 'ArrowRight') {
+    inputRefs.value[index + 1]?.focus()
+  } else if (event.key === 'Enter') {
+    emit('complete', slots.value.join(''))
+  }
+}
+
+const handlePaste = (event: ClipboardEvent) => {
+  const pasted = event.clipboardData?.getData('text') ?? ''
+  const digits = pasted.replace(/\D/g, '').slice(0, resolvedLength).split('')
+  digits.forEach((d, i) => {
+    slots.value[i] = d
+  })
+  const lastFilled = Math.min(digits.length, resolvedLength - 1)
+  inputRefs.value[lastFilled]?.focus()
+  emitValue()
+}
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    const incoming = (value ?? '').slice(0, resolvedLength).split('')
+    slots.value = Array(resolvedLength)
+      .fill('')
+      .map((_, i) => incoming[i] ?? '')
+  },
+  { immediate: true }
+)
+</script>

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

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

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,98 @@
+<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) => {
+    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.types.ts

@@ -1,5 +1,16 @@
 import type { T_FormSchemaLookupData, T_InputSchema } from '../form-schema.types'
 
+import type FlyRegionalTenantFormRenderer from './FlyRegionalTenantFormRenderer.vue'
+
+export type T_FlyRegionalTenantFormRendererInstance = InstanceType<
+  typeof FlyRegionalTenantFormRenderer
+> | null
+
+export type T_TenantRegionalFormMainSection = {
+  key: string
+  title: string
+}
+
 export type T_TenantRegionalFormSection = {
   key: string
   fields: T_InputSchema[]
@@ -10,6 +21,7 @@ export type T_TenantRegionalFormSection = {
 }
 
 export type T_TenantRegionalFormProps = {
-  mainFormTitle: string
+  mainSections: T_TenantRegionalFormMainSection[]
   sections?: T_TenantRegionalFormSection[]
+  activeSection?: string | number
 }

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

@@ -1,15 +1,17 @@
 <template>
   <div class="fly-regional-tenant-form-renderer">
     <el-collapse v-if="sections?.length" v-model="activeNames" accordion>
-      <el-collapse-item :name="E_CollapsibleSections.mainForm">
-        <template #title>
-          <FlyCollapseTitleRenderer :title="mainFormTitle" />
-        </template>
+      <template v-for="mainSection in mainSections" :key="mainSection.key">
+        <el-collapse-item :name="mainSection.key">
+          <template #title>
+            <FlyCollapseTitleRenderer :title="mainSection.title" />
+          </template>
 
-        <div style="padding: 1rem">
-          <slot></slot>
-        </div>
-      </el-collapse-item>
+          <div style="padding: 1rem">
+            <slot :name="mainSection.key"></slot>
+          </div>
+        </el-collapse-item>
+      </template>
 
       <template v-for="section in sections">
         <el-collapse-item v-if="section.fields?.length" :key="section.key" :name="section.key">
@@ -19,7 +21,7 @@
           <div style="padding: 1rem">
             <div v-if="section.description" style="margin-bottom: 1.25rem">
               <p style="font-size: 0.875; line-height: 1.25rem">
-                {{ t(section.description) }}
+                {{ section.description }}
               </p>
             </div>
 
@@ -42,11 +44,10 @@
 </template>
 
 <script setup lang="ts">
-import { type ComponentPublicInstance, reactive, ref } from 'vue'
+import { type ComponentPublicInstance, computed, reactive } from 'vue'
 
 import { ElCollapse, ElCollapseItem } from 'element-plus'
 
-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'
@@ -54,15 +55,13 @@ import FlyFormSchemaRenderer from '../form-schema-renderer/FlyFormSchemaRenderer
 
 import type { T_TenantRegionalFormProps } from './FlyRegionalTenantFormRenderer.types'
 
-enum E_CollapsibleSections {
-  mainForm
-}
-
-defineProps<T_TenantRegionalFormProps>()
+const props = defineProps<T_TenantRegionalFormProps>()
+const emit = defineEmits<{ 'update:activeSection': [value: string | number] }>()
 
-const { t } = UseLocaleInjector()
-
-const activeNames = ref<string | number>(E_CollapsibleSections.mainForm)
+const activeNames = computed<string | number>({
+  get: () => props.activeSection ?? props.mainSections[0]?.key ?? '',
+  set: (val) => emit('update:activeSection', val)
+})
 const formRefs = reactive<{ [K: string]: T_FlyFormSchemaRendererInstance }>({})
 
 function setFormRef(formRef: Element | ComponentPublicInstance | null, key: string) {

package/src/components/form/input-renderers/regional-tenant-form-renderer/index.ts

@@ -0,0 +1,10 @@
+import FlyRegionalTenantFormRenderer from './FlyRegionalTenantFormRenderer.vue'
+
+export default FlyRegionalTenantFormRenderer
+export { FlyRegionalTenantFormRenderer }
+export type {
+  T_TenantRegionalFormMainSection,
+  T_TenantRegionalFormSection,
+  T_TenantRegionalFormProps,
+  T_FlyRegionalTenantFormRendererInstance
+} from './FlyRegionalTenantFormRenderer.types'

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/date-time.scss

@@ -9,3 +9,7 @@
 
 @use 'element-plus/theme-chalk/src/popper.scss';
 @use 'element-plus/theme-chalk/src/scrollbar.scss';
+
+.el-date-editor.el-input {
+  --el-date-editor-width: 100%;
+}

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);
   }
@@ -119,3 +117,16 @@
   line-height: 1px;
   font-weight: bolder;
 }
+
+.el-input-group--prepend .el-input-group__prepend .el-select .el-select__wrapper.is-disabled {
+  --el-input-border-color: var(--el-disabled-border-color);
+}
+
+.el-tag {
+  &.el-tag--info {
+    &.el-tag--light {
+      --el-tag-text-color: var(--default-text-color);
+      --el-tag-bg-color: var(--el-color-info-light-7);
+    }
+  }
+}

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 {};