@flyanra/vue-core 1.3.9 → 1.4.0

package/dist/types/components/form/index.d.ts

@@ -1,5 +1,3 @@
-export * from './input-renderers/form-item-renderer';
-export * from './input-renderers/input-renderer';
-export type { T_InputRendererBase } from './input-renderers/input-renderer.types';
+export * from './input-renderers';
 export * from './input-validators';
 export * from './form.utils';

package/dist/types/components/form/input-renderers/country-input/FlyCountryCitySelect.vue.d.ts

@@ -0,0 +1,19 @@
+import '../select/FlySelect.scss';
+type __VLS_Props = {
+    modelValue?: string;
+    country?: string;
+    state?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    focus: () => any;
+    "update:modelValue": (value: string | undefined) => any;
+    change: (value: string | undefined) => any;
+    blur: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onFocus?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+    onChange?: ((value: string | undefined) => any) | undefined;
+    onBlur?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/types/components/form/input-renderers/country-input/FlyCountrySelect.types.d.ts

@@ -0,0 +1,4 @@
+export type T_CountryValueLabel = {
+    label: string;
+    value: string;
+};

package/dist/types/components/form/input-renderers/country-input/FlyCountrySelect.vue.d.ts

@@ -0,0 +1,30 @@
+import '../select/FlySelect.scss';
+import type { T_CountryValueLabel } from './FlyCountrySelect.types';
+type __VLS_Props = {
+    modelValue?: string | undefined;
+};
+declare var __VLS_13: {
+    scope: T_CountryValueLabel;
+};
+type __VLS_Slots = {} & {
+    label?: (props: typeof __VLS_13) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    focus: () => any;
+    "update:modelValue": (v?: string | undefined) => any;
+    change: (v: string | undefined) => any;
+    blur: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onFocus?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((v?: string | undefined) => any) | undefined;
+    onChange?: ((v: string | undefined) => any) | undefined;
+    onBlur?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/components/form/input-renderers/country-input/FlyCountryStatesSelect.vue.d.ts

@@ -0,0 +1,18 @@
+import '../select/FlySelect.scss';
+type __VLS_Props = {
+    modelValue?: string;
+    country?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    focus: () => any;
+    "update:modelValue": (value: string | undefined) => any;
+    change: (value: string | undefined) => any;
+    blur: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onFocus?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+    onChange?: ((value: string | undefined) => any) | undefined;
+    onBlur?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/types/components/form/input-renderers/country-input/countries.d.ts

@@ -0,0 +1,49 @@
+interface I_CountryFlags {
+    png: string;
+    svg: string;
+    alt: string;
+}
+interface I_CountryPostalCode {
+    format?: string;
+    regex?: string;
+}
+interface I_CountryNativeName {
+    official: string;
+    common: string;
+}
+interface I_CountryName {
+    common: string;
+    official: string;
+    nativeName: {
+        [key: string]: I_CountryNativeName;
+    };
+}
+interface I_CountryCurrency {
+    name: string;
+    symbol: string;
+}
+interface I_CountryCurrencies {
+    [key: string]: I_CountryCurrency;
+}
+interface I_CountryId {
+    root: string;
+    suffixes: string[];
+}
+export interface I_Country {
+    capital: string[];
+    cca2: string;
+    currencies: I_CountryCurrencies;
+    flags: I_CountryFlags;
+    idd: I_CountryId;
+    latlng: number[];
+    name: I_CountryName;
+    postalCode: I_CountryPostalCode;
+}
+export declare const countryList: I_Country[];
+/**
+ * Map of country codes to country objects.
+ * Generated once to avoid performance issues.
+ */
+export declare const countryListMap: Map<string, I_Country>;
+export declare const getCountryName: (countryCode: string) => string;
+export {};

package/dist/types/components/form/input-renderers/country-input/index.d.ts

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

package/dist/types/components/form/input-renderers/index.d.ts

@@ -0,0 +1,5 @@
+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/dist/types/components/form/input-renderers/phone-number/FlyPhoneNumberInput.types.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/form/input-renderers/phone-number/FlyPhoneNumberInput.vue.d.ts

@@ -0,0 +1,17 @@
+import './FlyPhoneNumberInput.scss';
+type __VLS_Props = {
+    modelValue?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    focus: () => any;
+    "update:modelValue": (value: string | undefined) => any;
+    change: (value: string | undefined) => any;
+    blur: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onFocus?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+    onChange?: ((value: string | undefined) => any) | undefined;
+    onBlur?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/types/components/form/input-renderers/phone-number/index.d.ts

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

package/dist/types/components/form/input-validators.d.ts

@@ -9,4 +9,9 @@ export declare const requiredFieldValueUnit: (label: string | undefined, trigger
     valueType?: "text" | "number";
 }) => FormItemRule;
 export declare const requiredFieldArray: (label?: string, trigger?: InputTriggers, useRequiredMessage?: boolean) => FormItemRule;
+export declare const requiredFieldEmail: (label?: string, trigger?: InputTriggers, useRequiredMessage?: boolean) => FormItemRule;
+export declare const fieldEmail: (languageKey?: string, trigger?: InputTriggers) => FormItemRule;
+export declare const requiredFieldEmailArray: (label?: string, trigger?: InputTriggers, useRequiredMessage?: boolean, required?: boolean) => FormItemRule;
+export declare const requiredFieldE164PhoneNumber: (label?: string, trigger?: InputTriggers, useRequiredMessage?: boolean) => FormItemRule;
+export declare const fieldE164PhoneNumber: (trigger?: InputTriggers) => FormItemRule;
 export {};

package/dist/types/composables/useLocaleInjector/index.d.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/dist/types/composables/useLocaleInjector/useLocaleInjector.d.ts

@@ -0,0 +1,13 @@
+import type { ComputedRef, MaybeRef } from 'vue';
+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>;
+};
+export declare function initLocaleInjector(i18n: T_I18nAdapter): void;
+export declare function useLocaleInjector(): T_LocaleInjector;

package/dist/types/utils/country-utils.d.ts

@@ -0,0 +1,3 @@
+declare function getAdministrativeAreaLabel(countryCode?: string): string;
+declare function getNationalIdLabel(countryCode?: string): string;
+export { getAdministrativeAreaLabel, getNationalIdLabel };

package/dist/types/utils/index.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flyanra/vue-core",
-  "version": "1.3.9",
+  "version": "1.4.0",
   "private": false,
   "description": "Source-distributed Vue component library for Vite and Nuxt consumers.",
   "sideEffects": false,
@@ -96,6 +96,10 @@
       "eslint --fix"
     ]
   },
+  "dependencies": {
+    "country-state-city": "^3.2.1",
+    "libphonenumber-js": "^1.13.10"
+  },
   "devDependencies": {
     "@changesets/cli": "^2.30.0",
     "@eslint/js": "^10.0.1",

package/src/components/basic/typography/FlyCollapseTitleRenderer.vue

@@ -11,13 +11,13 @@
 </template>
 
 <script lang="ts" setup>
-import { UseLocaleInjector } from '../../../composables/useLocaleInjector/UseLocaleInjector'
+import { useLocaleInjector } from '../../../composables/useLocaleInjector/useLocaleInjector'
 
 defineProps<{
   title: string
 }>()
 
-const { t } = UseLocaleInjector()
+const { t } = useLocaleInjector()
 </script>
 
 <style lang="scss" scoped>

package/src/components/form/form.utils.ts

@@ -1,6 +1,6 @@
 import type { FormInstance } from 'element-plus'
 
-import { UseLocaleInjector } from '../../composables/useLocaleInjector/UseLocaleInjector'
+import { useLocaleInjector } from '../../composables/useLocaleInjector/useLocaleInjector'
 
 export type ValidateFieldsError = { [K: string]: { message?: string }[] }
 
@@ -8,7 +8,7 @@ export type ValidateFieldsError = { [K: string]: { message?: string }[] }
  * @returns Translated error message based on active locale
  */
 export function formFieldErrorMessageFormatter(errors: ValidateFieldsError) {
-  const { t, locale } = UseLocaleInjector()
+  const { t, locale } = useLocaleInjector()
   const keys = Object.keys(errors)
 
   if (keys.length) {
@@ -31,7 +31,7 @@ export function formFieldErrorMessageFormatter(errors: ValidateFieldsError) {
     const otherErrorsLength = otherErrors.length
 
     if (requiredFieldsLength >= 1) {
-      const joinedList = new Intl.ListFormat(locale, {
+      const joinedList = new Intl.ListFormat(locale.value, {
         style: 'long',
         type: 'conjunction'
       }).format(requiredFieldNames.filter((item): item is string => Boolean(item)))

package/src/components/form/index.ts

@@ -1,6 +1,3 @@
-export * from './input-renderers/form-item-renderer'
-export * from './input-renderers/input-renderer'
-
-export type { T_InputRendererBase } from './input-renderers/input-renderer.types'
+export * from './input-renderers'
 export * from './input-validators'
 export * from './form.utils'

package/src/components/form/input-renderers/country-input/FlyCountryCitySelect.vue

@@ -0,0 +1,73 @@
+<template>
+  <el-select
+    v-if="options.length"
+    v-model="inputProxy"
+    style="width: 100%"
+    filterable
+    clearable
+    :disabled="!country || !state"
+    @change="(value: string) => emit('change', value)"
+    @blur="emit('blur')"
+    @focus="emit('focus')"
+  >
+    <el-option v-for="city in options" :key="city.name" :value="city.name" :label="city.name" />
+  </el-select>
+
+  <el-input
+    v-else
+    v-model="inputProxy"
+    style="width: 100%"
+    show-word-limit
+    :disabled="!country || !state"
+    @change="(value: string) => emit('change', value)"
+    @blur="emit('blur')"
+    @focus="emit('focus')"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed, watch } from 'vue'
+
+import { ElOption, ElSelect } from 'element-plus'
+
+import { City } from 'country-state-city'
+
+import '../select/FlySelect.scss'
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string | undefined): void
+  (e: 'change', value: string | undefined): void
+  (e: 'blur'): void
+  (e: 'focus'): void
+}>()
+
+const props = defineProps<{
+  modelValue?: string
+  country?: string
+  state?: string
+}>()
+
+const options = computed(() => {
+  if (!props.country || !props.state) return []
+
+  return City.getCitiesOfState(props.country.toUpperCase(), props.state.toUpperCase())
+})
+
+const inputProxy = computed({
+  get: () => props.modelValue,
+  set: (value: string | undefined) => {
+    emit('update:modelValue', value)
+  }
+})
+
+watch([() => props.country, () => props.state], () => {
+  if (!props.modelValue) return
+
+  const cityStillExists = options.value.some((city) => city.name === props.modelValue)
+
+  if (!cityStillExists) {
+    emit('update:modelValue', undefined)
+    emit('change', undefined)
+  }
+})
+</script>

package/src/components/form/input-renderers/country-input/FlyCountrySelect.types.ts

@@ -0,0 +1,4 @@
+export type T_CountryValueLabel = {
+  label: string
+  value: string
+}

package/src/components/form/input-renderers/country-input/FlyCountrySelect.vue

@@ -0,0 +1,76 @@
+<template>
+  <el-select
+    v-model="inputProxy"
+    class="fly-country-select"
+    filterable
+    clearable
+    @change="(val) => emit('change', val)"
+    @blur="() => emit('blur')"
+    @focus="() => emit('focus')"
+  >
+    <template #label="valueObject: T_CountryValueLabel">
+      <slot name="label" :scope="valueObject">
+        <span>{{ valueObject.label }}</span>
+      </slot>
+    </template>
+    <el-option
+      v-for="country in countryList"
+      :key="country.cca2"
+      :label="country.name.common"
+      :value="country.cca2"
+      class="flex items-center justify-between space-x-2"
+    >
+      <div class="fly-country-select-option">
+        <span>{{ country.name.common }}</span>
+        <img :src="country.flags.svg" loading="lazy" />
+      </div>
+      <!-- <span class="text-xs text-gray-500">
+        {{ country.cca2 }}
+      </span> -->
+    </el-option>
+  </el-select>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { ElOption, ElSelect } from 'element-plus'
+
+import '../select/FlySelect.scss'
+
+import type { T_CountryValueLabel } from './FlyCountrySelect.types'
+import { countryList } from './countries'
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v?: string | undefined): void
+  (e: 'change', v: string | undefined): void
+  (e: 'blur'): void
+  (e: 'focus'): void
+}>()
+
+const props = defineProps<{
+  modelValue?: string | undefined
+}>()
+
+const inputProxy = computed({
+  get: (): string | undefined => {
+    return props.modelValue
+  },
+  set: (v) => {
+    emit('update:modelValue', v)
+  }
+})
+</script>
+
+<style scoped>
+.fly-country-select-option {
+  display: flex;
+  flex-grow: 1;
+  justify-content: space-between;
+  align-items: center;
+
+  img {
+    width: 20px;
+  }
+}
+</style>

package/src/components/form/input-renderers/country-input/FlyCountryStatesSelect.vue

@@ -0,0 +1,80 @@
+<template>
+  <el-select
+    v-if="options.length"
+    v-model="inputProxy"
+    style="width: 100%"
+    filterable
+    clearable
+    :disabled="!country"
+    @change="(value) => emit('change', value)"
+    @blur="emit('blur')"
+    @focus="emit('focus')"
+  >
+    <el-option
+      v-for="state in options"
+      :key="state.isoCode"
+      :value="state.isoCode"
+      :label="state.name"
+    />
+  </el-select>
+
+  <el-input
+    v-else
+    v-model="inputProxy"
+    style="width: 100%"
+    show-word-limit
+    :disabled="!country"
+    @change="(value: string) => emit('change', value)"
+    @blur="emit('blur')"
+    @focus="emit('focus')"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed, watch } from 'vue'
+
+import { ElOption, ElSelect } from 'element-plus'
+
+import { State } from 'country-state-city'
+
+import '../select/FlySelect.scss'
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string | undefined): void
+  (e: 'change', value: string | undefined): void
+  (e: 'blur'): void
+  (e: 'focus'): void
+}>()
+
+const props = defineProps<{
+  modelValue?: string
+  country?: string
+}>()
+
+const options = computed(() => {
+  if (!props.country) return []
+
+  return State.getStatesOfCountry(props.country.toUpperCase())
+})
+
+const inputProxy = computed({
+  get: () => props.modelValue,
+  set: (value: string | undefined) => {
+    emit('update:modelValue', value)
+  }
+})
+
+watch(
+  () => props.country,
+  () => {
+    if (!props.modelValue) return
+
+    const stateStillExists = options.value.some((state) => state.isoCode === props.modelValue)
+
+    if (!stateStillExists) {
+      emit('update:modelValue', undefined)
+      emit('change', undefined)
+    }
+  }
+)
+</script>