@antify/ui 4.1.37 → 4.2.0

package/dist/components/index.d.ts

@@ -17,6 +17,8 @@ import AntPasswordInput from './inputs/AntPasswordInput.vue';
 import AntRadio from './inputs/AntRadio.vue';
 import AntRadioGroup from './inputs/AntRadioGroup.vue';
 import AntRangeSlider from './inputs/AntRangeSlider.vue';
+import AntCountryInput from './inputs/AntCountryInput.vue';
+import AntPhoneNumberInput from './inputs/AntPhoneNumberInput.vue';
 import AntSearch from './inputs/AntSearch.vue';
 import AntSelect from './inputs/AntSelect.vue';
 import AntSwitch from './inputs/AntSwitch.vue';
@@ -54,4 +56,4 @@ import AntTag from './AntTag.vue';
 import AntToast from './AntToast.vue';
 import AntToaster from './AntToaster.vue';
 import AntTooltip from './AntTooltip.vue';
-export { AntButton, AntDatePicker, AntDialog, AntField, AntFormGroup, AntFormGroupLabel, AntBaseInput, AntSelectMenu, AntInputDescription, AntInputLabel, AntInputLimiter, AntCheckbox, AntCheckboxGroup, AntDateInput, AntNumberInput, AntPasswordInput, AntRadio, AntRadioGroup, AntRangeSlider, AntSearch, AntSelect, AntSwitch, AntSwitcher, AntTagInput, AntTextarea, AntTextInput, AntUnitInput, AntImageInput, AntNavLeftLayout, AntNavbar, AntNavbarItem, AntTable, AntTabs, AntTransitionCollapseHeight, AntAccordion, AntAccordionItem, AntAlert, AntCard, AntContent, AntDropdown, AntIcon, AntKeycap, AntListGroup, AntListGroupItem, AntModal, AntPagination, AntItemsPerPage, AntPopover, AntSkeleton, AntSpinner, AntTag, AntToast, AntToaster, AntTooltip, AntColorInput, AntMultiSelect, };
+export { AntButton, AntDatePicker, AntDialog, AntField, AntFormGroup, AntFormGroupLabel, AntBaseInput, AntSelectMenu, AntInputDescription, AntInputLabel, AntInputLimiter, AntCheckbox, AntCheckboxGroup, AntDateInput, AntNumberInput, AntPasswordInput, AntRadio, AntRadioGroup, AntRangeSlider, AntCountryInput, AntPhoneNumberInput, AntSearch, AntSelect, AntSwitch, AntSwitcher, AntTagInput, AntTextarea, AntTextInput, AntUnitInput, AntImageInput, AntNavLeftLayout, AntNavbar, AntNavbarItem, AntTable, AntTabs, AntTransitionCollapseHeight, AntAccordion, AntAccordionItem, AntAlert, AntCard, AntContent, AntDropdown, AntIcon, AntKeycap, AntListGroup, AntListGroupItem, AntModal, AntPagination, AntItemsPerPage, AntPopover, AntSkeleton, AntSpinner, AntTag, AntToast, AntToaster, AntTooltip, AntColorInput, AntMultiSelect, };

package/dist/components/index.js

@@ -63,6 +63,12 @@ Object.defineProperty(exports, "AntContent", {
     return _AntContent.default;
   }
 });
+Object.defineProperty(exports, "AntCountryInput", {
+  enumerable: true,
+  get: function () {
+    return _AntCountryInput.default;
+  }
+});
 Object.defineProperty(exports, "AntDateInput", {
   enumerable: true,
   get: function () {
@@ -207,6 +213,12 @@ Object.defineProperty(exports, "AntPasswordInput", {
     return _AntPasswordInput.default;
   }
 });
+Object.defineProperty(exports, "AntPhoneNumberInput", {
+  enumerable: true,
+  get: function () {
+    return _AntPhoneNumberInput.default;
+  }
+});
 Object.defineProperty(exports, "AntPopover", {
   enumerable: true,
   get: function () {
@@ -358,6 +370,8 @@ var _AntPasswordInput = _interopRequireDefault(require("./inputs/AntPasswordInpu
 var _AntRadio = _interopRequireDefault(require("./inputs/AntRadio.vue"));
 var _AntRadioGroup = _interopRequireDefault(require("./inputs/AntRadioGroup.vue"));
 var _AntRangeSlider = _interopRequireDefault(require("./inputs/AntRangeSlider.vue"));
+var _AntCountryInput = _interopRequireDefault(require("./inputs/AntCountryInput.vue"));
+var _AntPhoneNumberInput = _interopRequireDefault(require("./inputs/AntPhoneNumberInput.vue"));
 var _AntSearch = _interopRequireDefault(require("./inputs/AntSearch.vue"));
 var _AntSelect = _interopRequireDefault(require("./inputs/AntSelect.vue"));
 var _AntSwitch = _interopRequireDefault(require("./inputs/AntSwitch.vue"));

package/dist/components/index.mjs

@@ -17,6 +17,8 @@ import AntPasswordInput from "./inputs/AntPasswordInput.vue";
 import AntRadio from "./inputs/AntRadio.vue";
 import AntRadioGroup from "./inputs/AntRadioGroup.vue";
 import AntRangeSlider from "./inputs/AntRangeSlider.vue";
+import AntCountryInput from "./inputs/AntCountryInput.vue";
+import AntPhoneNumberInput from "./inputs/AntPhoneNumberInput.vue";
 import AntSearch from "./inputs/AntSearch.vue";
 import AntSelect from "./inputs/AntSelect.vue";
 import AntSwitch from "./inputs/AntSwitch.vue";
@@ -74,6 +76,8 @@ export {
   AntRadio,
   AntRadioGroup,
   AntRangeSlider,
+  AntCountryInput,
+  AntPhoneNumberInput,
   AntSearch,
   AntSelect,
   AntSwitch,

package/dist/components/inputs/AntCountryInput.vue

@@ -0,0 +1,366 @@
+<script lang="ts" setup>
+import {
+  computed, ref, nextTick,
+} from 'vue';
+import {
+  faChevronDown, faChevronUp,
+} from '@fortawesome/free-solid-svg-icons';
+import {
+  Size, InputState, Grouped,
+} from '../../enums';
+import {
+  IconSize,
+} from '../__types';
+import {
+  COUNTRIES, CountryValueKey, Locale,
+} from '../../constants/countries';
+import type {
+  Country,
+} from '../../types';
+import AntField from '../forms/AntField.vue';
+import AntSelectMenu from './Elements/AntSelectMenu.vue';
+import AntSearch from './AntSearch.vue';
+import AntIcon from '../AntIcon.vue';
+import AntSkeleton from '../AntSkeleton.vue';
+
+const props = withDefaults(defineProps<{
+  modelValue: string | number | null;
+  countries?: Country[];
+  label?: string;
+  description?: string;
+  placeholder?: string;
+  size?: Size;
+  state?: InputState;
+  disabled?: boolean;
+  readonly?: boolean;
+  skeleton?: boolean;
+  maxHeight?: string;
+  searchPlaceholder?: string;
+  searchable?: boolean;
+  grouped?: Grouped;
+  showFlags?: boolean;
+  isGrouped?: boolean;
+  emptyStateMessage?: string;
+  /**
+   * Key from the Country object used as the value for modelValue.
+   * Useful when you need to bind the select to dialCode, numericCode or ISO value.
+   * @default 'value'
+   */
+  optionValueKey?: CountryValueKey;
+  showDialCodeInMenu?: boolean;
+  showIsoCode?: boolean;
+  locale?: Locale;
+  sortable?: boolean;
+}>(), {
+  size: Size.md,
+  state: InputState.base,
+  maxHeight: '350px',
+  placeholder: 'Select country',
+  searchable: true,
+  grouped: Grouped.none,
+  showFlags: true,
+  isGrouped: false,
+  emptyStateMessage: 'No countries found',
+  optionValueKey: CountryValueKey.value,
+  showDialCodeInMenu: false,
+  showIsoCode: false,
+  countries: () => COUNTRIES,
+  locale: Locale.en,
+  sortable: true,
+});
+
+const emit = defineEmits([
+  'update:modelValue',
+  'select',
+]);
+
+const isOpen = ref(false);
+const searchQuery = ref<string | null>(null);
+const inputRef = ref<HTMLElement | null>(null);
+const focusedItem = ref<string | number | null>(null);
+const selectMenuRef = ref<InstanceType<typeof AntSelectMenu> | null>(null);
+const searchInputRef = ref<HTMLInputElement | null>(null);
+const hasInputState = computed(() => props.skeleton || props.readonly || props.disabled);
+
+const filteredOptions = computed(() => {
+  const query = searchQuery.value?.trim().toLowerCase();
+  const currentLocale = (props.locale || Locale.en).toLowerCase();
+
+  const filtered = !props.searchable || !query
+    ? [
+      ...props.countries,
+    ]
+    : props.countries.filter(country => {
+      const labelValue = country.label[currentLocale] || country.label[Locale.en] || '';
+      const labelText = labelValue.toLowerCase();
+      const isoCode = country.isoCode.toLowerCase();
+      const dialCode = country.dialCode;
+
+      return labelText.includes(query) ||
+        isoCode.includes(query) ||
+        dialCode.includes(query);
+    });
+
+  if (props.sortable && currentLocale !== Locale.en) {
+    filtered.sort((a, b) => {
+      const labelA = a.label[currentLocale] || a.label[Locale.en];
+      const labelB = b.label[currentLocale] || b.label[Locale.en];
+
+      return labelA.localeCompare(labelB, currentLocale);
+    });
+  }
+
+  return filtered.map(country => ({
+    ...country,
+    label: country.label[currentLocale] || country.label[Locale.en],
+    value: country[props.optionValueKey] as string | number,
+  }));
+});
+const rootComponent = computed(() => (props.isGrouped ? 'div' : AntField));
+const inputClasses = computed(() => {
+  const variants: Record<InputState, string> = {
+    [InputState.base]: 'outline-base-300 bg-white focus:ring-primary-200',
+    [InputState.success]: 'outline-success-500 bg-success-100 focus:ring-success-200',
+    [InputState.info]: 'outline-info-500 bg-info-100 focus:ring-info-200',
+    [InputState.warning]: 'outline-warning-500 bg-warning-100 focus:ring-warning-200',
+    [InputState.danger]: 'outline-danger-500 bg-danger-100 focus:ring-danger-200',
+  };
+
+  return {
+    'flex items-center justify-between transition-colors border-none outline relative w-full cursor-pointer': true,
+    'outline-offset-[-1px] outline-1 focus:outline-offset-[-1px] focus:outline-1': true,
+    [variants[props.state]]: true,
+    'opacity-50 cursor-not-allowed': props.disabled,
+    'read-only:cursor-default': props.readonly,
+    'p-1 text-xs': props.size === Size.xs2,
+    'p-1.5 text-xs': props.size === Size.xs,
+    'p-1.5 text-sm': props.size === Size.sm,
+    'p-2 text-sm': props.size === Size.md,
+    'p-2.5 text-sm': props.size === Size.lg,
+    'focus:ring-2': !hasInputState.value && (props.size === Size.sm || props.size === Size.xs || props.size === Size.xs2),
+    'focus:ring-4': !hasInputState.value && (props.size === Size.lg || props.size === Size.md),
+    'rounded-md': props.grouped === Grouped.none,
+    'rounded-tl-md rounded-bl-md rounded-tr-none rounded-br-none': props.grouped === Grouped.left,
+    'rounded-none': props.grouped === Grouped.center,
+    'rounded-tr-md rounded-br-md rounded-tl-none rounded-bl-none': props.grouped === Grouped.right,
+  };
+});
+const placeholderClasses = computed(() => {
+  const variants: Record<InputState, string> = {
+    [InputState.base]: 'text-base-500',
+    [InputState.success]: 'text-success-700',
+    [InputState.info]: 'text-info-700',
+    [InputState.warning]: 'text-warning-700',
+    [InputState.danger]: 'text-danger-700',
+  };
+
+  return {
+    'select-none text-ellipsis overflow-hidden whitespace-nowrap w-full': true,
+    [variants[props.state]]: true,
+  };
+});
+const arrowClasses = computed(() => {
+  const variants: Record<InputState, string> = {
+    [InputState.base]: 'text-for-white-bg-font',
+    [InputState.success]: 'text-success-100-font',
+    [InputState.info]: 'text-info-100-font',
+    [InputState.warning]: 'text-warning-100-font',
+    [InputState.danger]: 'text-danger-100-font',
+  };
+
+  return variants[props.state];
+});
+const selectedCountry = computed(() => {
+  if (props.modelValue === null || props.modelValue === undefined) {
+    return null;
+  }
+
+  const country = props.countries.find((c) => String(c[props.optionValueKey]) === String(props.modelValue));
+
+  if (!country) {
+    return null;
+  }
+
+  const currentLocale = props.locale || Locale.en;
+
+  return {
+    ...country,
+    label: country.label[currentLocale] || country.label[Locale.en],
+    value: country[props.optionValueKey] as string | number,
+  };
+});
+const skeletonGrouped = computed(() => props.grouped || Grouped.none);
+const iconSize = computed(() => (props.size === Size.lg || props.size === Size.md || props.size === Size.sm ? IconSize.sm : IconSize.xs));
+const fieldProps = computed(() => {
+  if (props.isGrouped) {
+    return {};
+  }
+
+  return {
+    label: props.label,
+    description: props.description,
+    state: props.state,
+    size: props.size,
+    skeleton: props.skeleton,
+  };
+});
+
+function onSelect(val: string | number | null) {
+  const country = filteredOptions.value.find(c => String(c[props.optionValueKey]) === String(val));
+
+  emit('update:modelValue', val);
+  emit('select', country || null);
+
+  isOpen.value = false;
+  searchQuery.value = null;
+  inputRef.value?.focus();
+}
+
+async function toggleMenu(e: MouseEvent) {
+  if (props.disabled || props.readonly) {
+    return;
+  }
+
+  e.preventDefault();
+  e.stopPropagation();
+
+  isOpen.value = !isOpen.value;
+
+  if (isOpen.value) {
+    if (props.searchable) {
+      await nextTick();
+
+      searchInputRef.value?.focus();
+    }
+  } else {
+    searchQuery.value = null;
+    inputRef.value?.focus();
+  }
+}
+
+function closeMenu() {
+  isOpen.value = false;
+  searchQuery.value = null;
+}
+
+</script>
+
+<template>
+  <component
+    :is="rootComponent"
+    v-bind="fieldProps"
+  >
+    <div
+      class="relative w-full"
+    >
+      <AntSelectMenu
+        ref="selectMenuRef"
+        v-model:open="isOpen"
+        v-model:focused="focusedItem"
+        :options="filteredOptions"
+        :model-value="modelValue"
+        :input-ref="inputRef"
+        :max-height="maxHeight"
+        :size="size"
+        @select-element="onSelect"
+        @click-outside="closeMenu"
+      >
+        <template #contentBefore>
+          <div
+            v-if="searchable"
+            class="p-2 border-b border-base-300 bg-white"
+            @keydown.esc.stop="closeMenu"
+          >
+            <AntSearch
+              v-model:input-ref="searchInputRef"
+              v-model="searchQuery"
+              :size="Size.lg"
+              :placeholder="searchPlaceholder"
+              class="w-full"
+            />
+          </div>
+        </template>
+
+        <AntSkeleton
+          :visible="skeleton"
+          rounded
+          :grouped="skeletonGrouped"
+          class="w-full"
+        >
+          <div
+            ref="inputRef"
+            :class="inputClasses"
+            :tabindex="disabled || readonly || skeleton ? -1 : 0"
+            @mousedown="toggleMenu"
+          >
+            <div class="flex items-center gap-2 overflow-hidden">
+              <template v-if="selectedCountry">
+                <span
+                  v-if="showFlags"
+                  class="text-lg leading-none"
+                >{{ selectedCountry.flag }}</span>
+
+                <span class="truncate font-medium">{{ selectedCountry.dialCode }}</span>
+
+                <span
+                  v-if="!isGrouped"
+                  class="truncate"
+                >{{ selectedCountry.label }}</span>
+              </template>
+
+              <div
+                v-else
+                :class="placeholderClasses"
+              >
+                {{ placeholder }}
+              </div>
+            </div>
+
+            <AntIcon
+              :icon="isOpen ? faChevronUp : faChevronDown"
+              class="ml-2 flex-shrink-0"
+              :class="arrowClasses"
+              :size="iconSize"
+            />
+          </div>
+        </AntSkeleton>
+
+        <template #contentLeft="option">
+          <span
+            v-if="showFlags"
+            class="text-lg"
+          >{{ (option as any).flag }}</span>
+        </template>
+
+        <template #contentRight="option">
+          <slot
+            name="right"
+            :option="(option as any)"
+          >
+            <div class="ml-auto flex items-center gap-2">
+              <span
+                v-if="showIsoCode"
+                class="text-md uppercase text-for-white-bg-font"
+              >
+                {{ (option as any).isoCode }}
+              </span>
+
+              <span
+                v-if="showDialCodeInMenu"
+                class="text-md text-for-white-bg-font"
+              >
+                {{ (option as any).dialCode }}
+              </span>
+            </div>
+          </slot>
+        </template>
+
+        <template #empty>
+          <div class="p-2 text-center text-sm text-for-white-bg-font">
+            {{ emptyStateMessage }}
+          </div>
+        </template>
+      </AntSelectMenu>
+    </div>
+  </component>
+</template>