@antify/ui 4.1.37 → 4.1.38

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

@@ -0,0 +1,305 @@
+import AntPhoneNumberInput from "../AntPhoneNumberInput.vue";
+import {
+  Size,
+  InputState
+} from "../../../enums/index.mjs";
+import {
+  ref
+} from "vue";
+import {
+  COUNTRIES,
+  CountryValueKey,
+  Locale
+} from "../../../constants/countries.mjs";
+const meta = {
+  title: "Inputs/Phone Number Input",
+  component: AntPhoneNumberInput,
+  parameters: {
+    docs: {
+      description: {
+        component: "Komponente zur Eingabe der Telefonnummer mit Auswahl von Land und L\xE4ndervorwahl."
+      }
+    }
+  },
+  argTypes: {
+    size: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(Size)
+    },
+    state: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(InputState)
+    },
+    onValidate: {
+      action: "validate"
+    },
+    nullable: {
+      control: "boolean",
+      description: "Shows the clear icon in the input field."
+    },
+    locale: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(Locale),
+      description: "Language for country names translation"
+    },
+    countryValueKey: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(CountryValueKey)
+    },
+    countries: {
+      table: {
+        disable: true
+      }
+    }
+  }
+};
+export default meta;
+export const Default = {
+  render: (args) => ({
+    components: {
+      AntPhoneNumberInput
+    },
+    setup() {
+      const phoneDefault = ref(null);
+      const countryDefault = ref("DE");
+      const phoneNumericDefault = ref(null);
+      const countryNumericDefault = ref(49);
+      const phone1 = ref(null);
+      const country1 = ref(null);
+      const phone2 = ref(null);
+      const country2 = ref(null);
+      const phone3 = ref(null);
+      const country3 = ref(null);
+      const phone4 = ref("123456");
+      const country4 = ref("DE");
+      const phonePaste = ref(null);
+      const countryPaste = ref(null);
+      const copyToClipboard = async (text) => {
+        await navigator.clipboard?.writeText(text).catch((err) => {
+          console.warn("Copy failed", err);
+        });
+      };
+      return {
+        args,
+        phoneDefault,
+        countryDefault,
+        phoneNumericDefault,
+        countryNumericDefault,
+        phone1,
+        country1,
+        phone2,
+        country2,
+        phone3,
+        country3,
+        phone4,
+        country4,
+        phonePaste,
+        countryPaste,
+        copyToClipboard
+      };
+    },
+    template: `
+      <div class="grid grid-cols-2 gap-x-12 gap-y-12">
+        <div>
+          <h3 class="mb-2 text-sm font-bold text-for-white-bg-font uppercase tracking-wider">Default Country Prop</h3>
+          <p class="mb-2 text-xs text-base-400 italic text-wrap">
+            Initial values are null. Component selects Germany via <b>default-country-value="DE"</b> using the default "value" key.
+          </p>
+          <AntPhoneNumberInput
+            v-bind="args"
+            v-model="phoneDefault"
+            :locale="args.locale"
+            country-value-key="value"
+            v-model:country-value="countryDefault"
+            placeholder="Initialized with DE"
+          />
+          <div class="mt-2 text-md text-for-white-bg-font">
+            Data: {{ countryDefault || 'null' }} | {{ phoneDefault || 'null' }}
+          </div>
+        </div>
+
+        <div>
+          <h3 class="mb-2 text-sm font-bold text-for-white-bg-font uppercase tracking-wider">Default by Numeric Code (49)</h3>
+          <p class="mb-2 text-xs text-base-400 italic text-wrap">
+            Initial values are null. Component selects Germany via <b>numericCode: 49</b>. We tell the component to use "numericCode" as the value key.
+          </p>
+          <AntPhoneNumberInput
+            v-bind="args"
+            v-model="phoneNumericDefault"
+            v-model:country-value="countryNumericDefault"
+            country-value-key="numericCode"
+            placeholder="Initialized with 49"
+          />
+          <div class="mt-2 text-md text-for-white-bg-font">
+            Data: {{ countryNumericDefault || 'null' }} | {{ phoneNumericDefault || 'null' }}
+          </div>
+        </div>
+
+        <div>
+          <h3 class="mb-2 text-sm font-bold text-for-white-bg-font uppercase tracking-wider">Auto-detect Country on Paste</h3>
+          <p class="mb-2 text-xs text-base-400 italic text-wrap">
+            Click a number to copy, then paste it (Ctrl+V) into the input to see auto-detection in action.
+          </p>
+
+          <div class="flex gap-2 mb-4">
+            <button
+              v-for="num in ['+4915211111111', '+3715211111111', '+3725211111111']"
+              @click="copyToClipboard(num)"
+              class="px-2 py-1 text-xs bg-white border border-base-300 rounded hover:bg-base-100 transition-colors text-for-white-bg-font"
+              title="Click to copy"
+            >
+              {{ num }}
+            </button>
+          </div>
+
+          <AntPhoneNumberInput
+            v-bind="args"
+            v-model="phonePaste"
+            v-model:country-value="countryPaste"
+            placeholder="Paste a number starting with +..."
+          />
+
+          <div class="mt-2 text-md text-for-white-bg-font">
+            Data: {{ countryPaste || 'null' }} | {{ phonePaste || 'null' }}
+          </div>
+        </div>
+
+        <div>
+          <h3 class="mb-2 text-sm font-bold text-for-white-bg-font uppercase tracking-wider">Keep Country on Clear</h3>
+          <p class="mb-2 text-xs text-base-400 italic text-wrap">
+            Try clicking the "X" icon. The phone number will be null, but the country (DE) will remain selected.
+          </p>
+          <AntPhoneNumberInput
+            v-bind="args"
+            v-model="phone4"
+            v-model:country-value="country4"
+            :nullable="true"
+            country-value-key="value"
+          />
+          <div class="mt-2 text-md text-for-white-bg-font">
+            Data: {{ country4 || 'null' }} | {{ phone4 || 'null' }}
+          </div>
+        </div>
+
+        <div>
+          <h3 class="mb-2 text-sm font-bold text-for-white-bg-font uppercase tracking-wider">With Search (Default)</h3>
+          <AntPhoneNumberInput
+            v-bind="args"
+            v-model="phone1"
+            v-model:country-value="country1"
+          />
+          <div class="mt-2 text-md text-for-white-bg-font">
+            Data: {{ country1 || 'null' }} | {{ phone1 || 'null' }}
+          </div>
+        </div>
+
+        <div>
+          <h3 class="mb-2 text-sm font-bold text-for-white-bg-font uppercase tracking-wider">Without Search</h3>
+          <AntPhoneNumberInput
+            v-bind="args"
+            v-model="phone2"
+            v-model:country-value="country2"
+            :searchable="false"
+          />
+          <div class="mt-2 text-md text-for-white-bg-font">
+            Data: {{ country2 || 'null' }} | {{ phone2 || 'null' }}
+          </div>
+        </div>
+
+        <div>
+          <h3 class="mb-2 text-sm font-bold text-for-white-bg-font uppercase tracking-wider">Numeric Code Output</h3>
+          <AntPhoneNumberInput
+            v-bind="args"
+            v-model="phone3"
+            v-model:country-value="country3"
+            country-value-key="numericCode"
+            country-placeholder="Select for numeric output"
+          />
+          <div class="mt-2 text-md text-for-white-bg-font">
+            Data: {{ country3 || 'null' }} | {{ phone3 || 'null' }}
+          </div>
+        </div>
+      </div>
+    `
+  }),
+  args: {
+    label: "Phone Number",
+    description: "Enter your mobile phone number",
+    placeholder: "Enter digits",
+    countryPlaceholder: "Select your country",
+    countries: COUNTRIES,
+    size: Size.md,
+    state: InputState.base,
+    nullable: true,
+    locale: Locale.de
+  }
+};
+export const summary = {
+  parameters: {
+    chromatic: {
+      disableSnapshot: false
+    }
+  },
+  render: (args) => ({
+    components: {
+      AntPhoneNumberInput
+    },
+    setup() {
+      const phone = ref(null);
+      const country = ref("+49");
+      return {
+        args,
+        phone,
+        country,
+        InputState,
+        Size,
+        COUNTRIES
+      };
+    },
+    template: `
+      <div class="flex flex-col gap-4">
+        <div class="flex flex-col gap-4">
+          <h2 class="text-xl font-bold border-b pb-2 text-base-700">Phone Number Input States</h2>
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <AntPhoneNumberInput v-bind="args" v-model="phone" v-model:country-value="country" :state="InputState.base" label="Base State" />
+            <AntPhoneNumberInput v-bind="args" v-model="phone" v-model:country-value="country" :state="InputState.info" label="Info State" :messages="['Bitte geben Sie Ihre Mobilnummer ein']" />
+            <AntPhoneNumberInput v-bind="args" v-model="phone" v-model:country-value="country" :state="InputState.success" label="Success State" />
+            <AntPhoneNumberInput v-bind="args" v-model="phone" v-model:country-value="country" :state="InputState.warning" label="Warning State" :messages="['Pr\xFCfen Sie die Vorwahl']" />
+            <AntPhoneNumberInput v-bind="args" v-model="phone" v-model:country-value="country" :state="InputState.danger" label="Danger State" :messages="['Ung\xFCltige Telefonnummer']" />
+          </div>
+        </div>
+
+        <div class="flex flex-col gap-4">
+          <h2 class="text-xl font-bold border-b pb-2 text-base-700">Sizes</h2>
+          <div class="flex flex-col gap-4">
+            <AntPhoneNumberInput v-bind="args" v-model="phone" v-model:country-value="country" :size="Size.sm" label="Small (sm)" />
+            <AntPhoneNumberInput v-bind="args" v-model="phone" v-model:country-value="country" :size="Size.md" label="Medium (md)" />
+            <AntPhoneNumberInput v-bind="args" v-model="phone" v-model:country-value="country" :size="Size.lg" label="Large (lg)" />
+          </div>
+        </div>
+
+        <div class="flex flex-col gap-4">
+          <h2 class="text-xl font-bold border-b pb-2 text-base-700">Special Modes</h2>
+          <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+            <AntPhoneNumberInput v-bind="args" v-model="phone" country-value="DE" model-value="1512345678" disabled label="Disabled" />
+            <AntPhoneNumberInput v-bind="args" v-model="phone" country-value="DE" model-value="1512345678" readonly label="Readonly" />
+            <AntPhoneNumberInput v-bind="args" v-model="phone" country-value="DE" skeleton label="Skeleton" />
+          </div>
+        </div>
+      </div>
+    `
+  }),
+  args: {
+    countries: COUNTRIES,
+    countryPlaceholder: "Land w\xE4hlen",
+    searchPlaceholder: "Suchen..."
+  }
+};

package/dist/components/inputs/__types/AntCountryInput.types.d.ts

@@ -0,0 +1,11 @@
+export interface Country {
+    value: string;
+    isoCode: string;
+    label: Record<string, string>;
+    dialCode: string;
+    numericCode: number;
+    flag?: string;
+    phoneLength?: number | number[];
+    mask?: string;
+    isDefault?: boolean;
+}

package/dist/components/inputs/__types/AntCountryInput.types.js

@@ -0,0 +1 @@
+"use strict";

package/dist/components/inputs/__types/index.d.ts

@@ -1,4 +1,5 @@
 export * from './AntCheckbox.types';
+export * from './AntCountryInput.types';
 export * from './AntDateInput.types';
 export * from './AntRadio.types';
 export * from './AntSelect.types';

package/dist/components/inputs/__types/index.js

@@ -14,6 +14,17 @@ Object.keys(_AntCheckbox).forEach(function (key) {
     }
   });
 });
+var _AntCountryInput = require("./AntCountryInput.types");
+Object.keys(_AntCountryInput).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _AntCountryInput[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _AntCountryInput[key];
+    }
+  });
+});
 var _AntDateInput = require("./AntDateInput.types");
 Object.keys(_AntDateInput).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/dist/components/inputs/__types/index.mjs

@@ -1,4 +1,5 @@
 export * from "./AntCheckbox.types.mjs";
+export * from "./AntCountryInput.types.mjs";
 export * from "./AntDateInput.types.mjs";
 export * from "./AntRadio.types.mjs";
 export * from "./AntSelect.types.mjs";

package/dist/constants/countries.d.ts

@@ -0,0 +1,22 @@
+import type { Country } from '../types';
+export declare enum CountryValueKey {
+    value = "value",
+    dialCode = "dialCode",
+    numericCode = "numericCode"
+}
+export declare enum Locale {
+    en = "en",
+    de = "de"
+}
+/**
+ * TODO: Detailed verification and data enrichment required.
+ * * ATTENTION:
+ * 1. The physical order of this array is pre-sorted by English labels (label.en).
+ * 2. Country ISO codes (isoCode) are NOT the same as phone dial codes (dialCode).
+ * Verify each dialCode and numericCode against official ITU-T standards.
+ * 3. Some territories share the same dialCode (e.g., US, CA, and various islands use +1),
+ * ensure the 'findCountryByPhone' logic in components handles these overlaps.
+ * 4. Phone masks need to be validated for each region to ensure correct formatting.
+ * 5. Kazakhstan was removed because he had the same dialCode of number as Russia
+ */
+export declare const COUNTRIES: Country[];