@antify/ui 4.1.36 → 4.1.38

package/dist/components/inputs/AntPhoneNumberInput.vue

@@ -0,0 +1,347 @@
+<script lang="ts" setup>
+import {
+  computed, watch,
+} from 'vue';
+import {
+  useVModel,
+} from '@vueuse/core';
+import AntField from '../forms/AntField.vue';
+import AntCountryInput from './AntCountryInput.vue';
+import AntBaseInput from './Elements/AntBaseInput.vue';
+import {
+  Size, InputState, Grouped,
+} from '../../enums';
+import {
+  BaseInputType,
+} from './Elements/__types';
+import {
+  COUNTRIES, CountryValueKey, Locale,
+} from '../../constants/countries';
+import type {
+  Country,
+} from '../../types';
+import {
+  ref, nextTick,
+} from 'vue';
+
+const phoneInputNativeRef = ref<HTMLInputElement | null>(null);
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<{
+  modelValue: string | null;
+  countryValue: string | number | null;
+  countries?: Country[];
+
+  //Common Props
+  size?: Size;
+  state?: InputState;
+  disabled?: boolean;
+  readonly?: boolean;
+  skeleton?: boolean;
+
+  //AntField Props
+  label?: string;
+  description?: string;
+  messages?: string[];
+
+  //AntCountryInput Props
+  countryPlaceholder?: string;
+  searchPlaceholder?: string;
+  searchable?: boolean;
+  countryMaxHeight?: string;
+  countryValueKey?: CountryValueKey;
+  countryErrorMessage?: string;
+  countrySortable?: boolean;
+
+  //AntBaseInput Props
+  placeholder?: string;
+  nullable?: boolean;
+  locale?: Locale;
+}>(), {
+  size: Size.md,
+  state: InputState.base,
+  searchable: true,
+  searchPlaceholder: 'Search country...',
+  countryPlaceholder: 'Select country',
+  placeholder: 'Enter phone number',
+  countryValueKey: CountryValueKey.dialCode,
+  countryErrorMessage: 'Please select a country code or start with "+"',
+  countrySortable: true,
+  messages: () => [],
+  nullable: true,
+  countries: () => COUNTRIES,
+  locale: Locale.en,
+});
+
+const emit = defineEmits([
+  'update:modelValue',
+  'update:countryValue',
+  'select-country',
+  'validate',
+  'blur',
+]);
+
+const _countryValue = useVModel(props, 'countryValue', emit);
+const _phoneNumber = useVModel(props, 'modelValue', emit);
+
+const updateFullValue = (countryId: string | number | null, rawPhone: string | null) => {
+  if (!rawPhone) {
+    _phoneNumber.value = null;
+
+    return;
+  }
+
+  const country = props.countries.find(c => String(c[props.countryValueKey]) === String(countryId));
+
+  if (country && !rawPhone.startsWith('+')) {
+    const digitsOnly = rawPhone.replace(/\D/g, '');
+    _phoneNumber.value = `${country.dialCode}${digitsOnly}`;
+  } else {
+    _phoneNumber.value = rawPhone;
+  }
+};
+
+const showCountryError = computed(() => {
+  const val = props.modelValue || '';
+
+  return props.countryValue == null && val.length > 0 && !val.startsWith('+');
+});
+
+const allMessages = computed(() => {
+  const msgs = [
+    ...(props.messages || []),
+  ];
+
+  if (showCountryError.value) {
+    msgs.push(props.countryErrorMessage);
+  }
+
+  return msgs;
+});
+
+const currentCountry = computed(() => {
+  return props.countries.find(c => String(c[props.countryValueKey]) === String(props.countryValue));
+});
+
+const sortedCountriesByDialCode = computed(() => {
+  return [
+    ...props.countries,
+  ].sort((a, b) => b.dialCode.length - a.dialCode.length);
+});
+
+const findCountryByPhone = (phone: string): Country | undefined => {
+  if (!phone.startsWith('+')) {
+    return undefined;
+  }
+
+  return sortedCountriesByDialCode.value.find(country => phone.startsWith(country.dialCode));
+};
+
+const formattedNumber = computed({
+  get: () => {
+    const fullVal = props.modelValue || '';
+    const country = currentCountry.value;
+
+    if (country && fullVal.startsWith(country.dialCode)) {
+      const shortNumber = fullVal.slice(country.dialCode.length);
+
+      return country.mask ? formatByMask(shortNumber, country.mask) : shortNumber;
+    }
+
+    return fullVal;
+  },
+  set: (val: string | null) => {
+    if (!val) {
+      _phoneNumber.value = null;
+
+      return;
+    }
+
+    if (val.startsWith('+')) {
+      const country = findCountryByPhone(val);
+
+      if (country) {
+        _countryValue.value = country[props.countryValueKey] as string | number;
+      }
+
+      _phoneNumber.value = val;
+
+      return;
+    }
+
+    updateFullValue(_countryValue.value, val);
+  },
+});
+
+const formatByMask = (value: string | null, mask: string): string | null => {
+  if (!value) {
+    return null;
+  }
+
+  const digits = value.replace(/\D/g, '');
+  if (digits.length === 0) {
+    return null;
+  }
+
+  let result = '';
+  let digitIndex = 0;
+
+  for (let i = 0; i < mask.length; i++) {
+    if (mask[i] === '#') {
+      if (digitIndex < digits.length) {
+        result += digits[digitIndex];
+        digitIndex++;
+      } else {
+        break;
+      }
+    } else if (digitIndex < digits.length) {
+      result += mask[i];
+    }
+  }
+
+  if (digitIndex < digits.length) {
+    result += digits.substring(digitIndex);
+  }
+
+  return result || null;
+};
+
+function onCountrySelect(country: Country) {
+  emit('select-country', country);
+
+  nextTick(() => {
+    phoneInputNativeRef.value?.focus();
+  });
+}
+
+function onKeyPress(event: KeyboardEvent) {
+  const charStr = event.key;
+  const target = event.target as HTMLInputElement;
+  const currentRawValue = target.value;
+
+  if (event.ctrlKey || event.metaKey || charStr.length > 1) {
+    return;
+  }
+
+  if (!/[\d+]/.test(charStr)) {
+    event.preventDefault();
+
+    return;
+  }
+
+  if (props.countryValue && charStr === '+') {
+    event.preventDefault();
+
+    return;
+  }
+
+  if (!props.countryValue && charStr === '+' && currentRawValue.length > 0) {
+    event.preventDefault();
+  }
+
+  if (charStr === '+' && currentRawValue.includes('+')) {
+    event.preventDefault();
+  }
+}
+
+function onPaste(event: ClipboardEvent) {
+  event.preventDefault();
+  const pasteData = event.clipboardData?.getData('text') || '';
+
+  if (!pasteData) {
+    return;
+  }
+
+  const cleanInput = pasteData.replace(/[^\d+]/g, '');
+
+  if (cleanInput.startsWith('+')) {
+    const country = findCountryByPhone(cleanInput);
+
+    if (country) {
+      _countryValue.value = country[props.countryValueKey] as string | number;
+    }
+    _phoneNumber.value = cleanInput;
+  } else {
+    updateFullValue(_countryValue.value, cleanInput);
+  }
+}
+
+watch(_countryValue, (newCountryId, oldCountryId) => {
+  if (newCountryId === oldCountryId) {
+    return;
+  }
+
+  const fullVal = props.modelValue || '';
+  const oldCountry = props.countries.find(c => String(c[props.countryValueKey]) === String(oldCountryId));
+  let body = fullVal;
+
+  if (oldCountry && fullVal.startsWith(oldCountry.dialCode)) {
+    body = fullVal.slice(oldCountry.dialCode.length);
+  }
+
+  updateFullValue(newCountryId, body);
+});
+</script>
+
+<template>
+  <AntField
+    :label="label"
+    :messages="allMessages"
+    :state="showCountryError ? InputState.danger : state"
+    :size="size"
+    :skeleton="skeleton"
+    :description="description"
+    data-e2e="phone-input"
+  >
+    <div
+      class="flex relative w-full"
+      @click.prevent
+    >
+      <AntCountryInput
+        v-model="_countryValue"
+        :countries="countries"
+        :size="size"
+        :locale="locale"
+        :state="showCountryError ? InputState.danger : state"
+        :disabled="disabled"
+        :readonly="readonly"
+        :skeleton="skeleton"
+        :searchable="searchable"
+        :placeholder="countryPlaceholder"
+        :search-placeholder="searchPlaceholder"
+        :max-height="countryMaxHeight"
+        :is-grouped="true"
+        :grouped="Grouped.left"
+        class="w-fit flex-shrink-0"
+        :show-dial-code-in-menu="true"
+        :option-value-key="countryValueKey"
+        :sortable="countrySortable"
+        @select="onCountrySelect"
+      />
+
+      <AntBaseInput
+        v-model="formattedNumber"
+        v-model:input-ref="phoneInputNativeRef"
+        :nullable="nullable"
+        :type="BaseInputType.text"
+        :state="showCountryError ? InputState.danger : state"
+        :size="size"
+        :skeleton="skeleton"
+        v-bind="$attrs"
+        :disabled="disabled"
+        :readonly="readonly"
+        :placeholder="placeholder"
+        :grouped="Grouped.right"
+        wrapper-class="flex-grow"
+        class="-ml-px"
+        @validate="val => $emit('validate', val)"
+        @blur="e => $emit('blur', e)"
+        @keydown="onKeyPress"
+        @paste="onPaste"
+      />
+    </div>
+  </AntField>
+</template>

package/dist/components/inputs/Elements/AntSelectMenu.vue

@@ -30,6 +30,7 @@ const emit = defineEmits([
   'update:modelValue',
   'update:focused',
   'selectElement',
+  'clickOutside',
 ]);
 const props = withDefaults(defineProps<{
   modelValue: string | string[] | number | number[] | null;
@@ -76,6 +77,7 @@ onClickOutside(floating, () => {
   }
 
   emit('update:open', false);
+  emit('clickOutside');
 });
 
 const _modelValue = useVModel(props, 'modelValue', emit);

package/dist/components/inputs/__stories/AntCheckbox.stories.js

@@ -55,7 +55,7 @@ const Docs = exports.Docs = {
     },
     template: `
       <div class="m-2">
-        <AntCheckbox v-bind="args" v-model="value"/>
+          <AntCheckbox v-bind="args" v-model="value">Value</AntCheckbox>
         <span class="text-sm text-gray-500">Reactive value: {{ value }}</span>
       </div>
     `

package/dist/components/inputs/__stories/AntCheckbox.stories.mjs

@@ -54,7 +54,7 @@ export const Docs = {
     },
     template: `
       <div class="m-2">
-        <AntCheckbox v-bind="args" v-model="value"/>
+          <AntCheckbox v-bind="args" v-model="value">Value</AntCheckbox>
         <span class="text-sm text-gray-500">Reactive value: {{ value }}</span>
       </div>
     `

package/dist/components/inputs/__stories/AntCheckboxGroup.stories.d.ts

@@ -4,3 +4,4 @@ declare const meta: Meta<typeof AntCheckboxGroup>;
 export default meta;
 type Story = StoryObj<typeof AntCheckboxGroup>;
 export declare const Docs: Story;
+export declare const WithLongContent: Story;

package/dist/components/inputs/__stories/AntCheckboxGroup.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-module.exports = exports.Docs = void 0;
+module.exports = exports.WithLongContent = exports.Docs = void 0;
 var _AntCheckboxGroup = _interopRequireDefault(require("../AntCheckboxGroup.vue"));
 var _enums = require("../../../enums");
 var _Direction = require("../../../enums/Direction.enum");
@@ -55,7 +55,7 @@ const Docs = exports.Docs = {
       };
     },
     template: `
-      <AntCheckboxGroup v-bind="args" v-model="args.modelValue"/>
+        <AntCheckboxGroup v-bind="args" v-model="args.modelValue"/>
     `
   }),
   args: {
@@ -74,4 +74,37 @@ const Docs = exports.Docs = {
       value: "checkbox-4"
     }]
   }
+};
+const WithLongContent = exports.WithLongContent = {
+  render: args => ({
+    components: {
+      AntCheckboxGroup: _AntCheckboxGroup.default
+    },
+    setup() {
+      return {
+        args
+      };
+    },
+    template: `
+        <div class="w-[150px]">
+          <AntCheckboxGroup v-bind="args" v-model="args.modelValue"/>
+        </div>
+    `
+  }),
+  args: {
+    modelValue: [],
+    checkboxes: [{
+      label: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam",
+      value: "checkbox-1"
+    }, {
+      label: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam",
+      value: "checkbox-2"
+    }, {
+      label: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam",
+      value: "checkbox-3"
+    }, {
+      label: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam",
+      value: "checkbox-4"
+    }]
+  }
 };

package/dist/components/inputs/__stories/AntCheckboxGroup.stories.mjs

@@ -53,7 +53,7 @@ export const Docs = {
       };
     },
     template: `
-      <AntCheckboxGroup v-bind="args" v-model="args.modelValue"/>
+        <AntCheckboxGroup v-bind="args" v-model="args.modelValue"/>
     `
   }),
   args: {
@@ -78,3 +78,41 @@ export const Docs = {
     ]
   }
 };
+export const WithLongContent = {
+  render: (args) => ({
+    components: {
+      AntCheckboxGroup
+    },
+    setup() {
+      return {
+        args
+      };
+    },
+    template: `
+        <div class="w-[150px]">
+          <AntCheckboxGroup v-bind="args" v-model="args.modelValue"/>
+        </div>
+    `
+  }),
+  args: {
+    modelValue: [],
+    checkboxes: [
+      {
+        label: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam",
+        value: "checkbox-1"
+      },
+      {
+        label: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam",
+        value: "checkbox-2"
+      },
+      {
+        label: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam",
+        value: "checkbox-3"
+      },
+      {
+        label: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam",
+        value: "checkbox-4"
+      }
+    ]
+  }
+};

package/dist/components/inputs/__stories/AntCountryInput.stories.d.ts

@@ -0,0 +1,16 @@
+import { type Meta, type StoryObj } from '@storybook/vue3';
+import AntCountryInput from '../AntCountryInput.vue';
+declare const meta: Meta<typeof AntCountryInput>;
+export default meta;
+type Story = StoryObj<typeof AntCountryInput>;
+export declare const Docs: Story;
+export declare const ValueKeyNumericCode: Story;
+export declare const DefaultCountry: Story;
+export declare const DefaultByNumericCode: Story;
+export declare const Localization: Story;
+export declare const WithoutSearch: Story;
+export declare const WithoutFlags: Story;
+export declare const GroupedMode: Story;
+export declare const GermanEmptyState: Story;
+export declare const Skeleton: Story;
+export declare const summary: Story;