@umbra.ui/core 0.1.0

package/src/components/inputs/InputPhone/InputPhone.vue

@@ -0,0 +1,645 @@
+<script setup lang="ts">
+import { ref, watch, computed } from "vue";
+import "../theme.css";
+import {
+  PhoneIcon,
+  TriangleWarningIcon,
+  CircleCheckIcon,
+} from "@umbra-ui/icons";
+
+export interface Props {
+  value?: string;
+  placeholder?: string;
+  defaultCountry?: string; // ISO country code (e.g., 'US', 'GB')
+  allowInternational?: boolean;
+  showCountryCode?: boolean; // Whether to show country code when detected
+  state?: "normal" | "active" | "disabled" | "readonly" | "error";
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  value: "",
+  placeholder: "Enter phone number",
+  defaultCountry: "US",
+  allowInternational: true,
+  showCountryCode: true,
+  state: "normal",
+});
+
+const emit = defineEmits<{
+  "update:value": [value: string];
+  "update:formatted": [value: string];
+  "update:valid": [value: boolean];
+}>();
+
+const internalValue = ref(props.value);
+const cursorPosition = ref<number | null>(null);
+const inputRef = ref<HTMLInputElement | null>(null);
+
+// Add this computed property to track current digit count
+const currentDigitCount = computed(() => {
+  return internalValue.value.replace(/\D/g, "").length;
+});
+
+// Add this computed property for max allowed digits
+const maxAllowedDigits = computed(() => {
+  const cleaned = internalValue.value.replace(/\D/g, "");
+  const country = detectCountry(cleaned);
+
+  if (country === "US") {
+    return cleaned.startsWith("1") ? 11 : 10;
+  } else if (country === "GB") {
+    return cleaned.startsWith("44") ? 12 : 11;
+  }
+  return 15; // International max
+});
+
+// Country code patterns and formatting rules
+const countryFormats = {
+  US: {
+    pattern: /^(\+?1)?[\s.-]?\(?(\d{3})\)?[\s.-]?(\d{3})[\s.-]?(\d{4})$/,
+    format: (match: RegExpMatchArray) => {
+      const countryCode = match[1];
+      const areaCode = match[2];
+      const prefix = match[3];
+      const lineNumber = match[4];
+      if (countryCode) {
+        return `+1 (${areaCode}) ${prefix}-${lineNumber}`;
+      }
+      return `(${areaCode}) ${prefix}-${lineNumber}`;
+    },
+    placeholder: "(555) 123-4567",
+    maxLength: 14,
+    countryCode: "1",
+  },
+  GB: {
+    pattern: /^(\+?44)?[\s.-]?(\d{4,5})[\s.-]?(\d{6})$/,
+    format: (match: RegExpMatchArray) => {
+      const countryCode = match[1];
+      const prefix = match[2];
+      const number = match[3];
+      if (countryCode) {
+        return `+44 ${prefix} ${number}`;
+      }
+      return `${prefix} ${number}`;
+    },
+    placeholder: "20 1234 5678",
+    maxLength: 13,
+    countryCode: "44",
+  },
+  // Add more country formats as needed
+};
+
+// Detect country from number
+const detectCountry = (number: string): string => {
+  const cleaned = number.replace(/\D/g, "");
+
+  // Check for country codes at the beginning
+  if (
+    cleaned.startsWith("1") &&
+    (cleaned.length === 11 || cleaned.length > 10)
+  ) {
+    return "US"; // US with country code
+  }
+  if (cleaned.startsWith("44")) {
+    return "GB";
+  }
+
+  // Default to US for 10-digit numbers or shorter
+  if (cleaned.length <= 10) {
+    return "US"; // US without country code
+  }
+
+  return props.defaultCountry;
+};
+
+// Format phone number based on country
+const formatPhoneNumber = (
+  value: string
+): { formatted: string; cursorPos: number } => {
+  // Ensure we only work with digits
+  let cleaned = value.replace(/\D/g, "");
+
+  if (cleaned.length === 0) return { formatted: "", cursorPos: 0 };
+
+  const country = detectCountry(cleaned);
+  let formatted = "";
+
+  // For US numbers
+  if (country === "US") {
+    // Check if number starts with country code 1
+    if (cleaned.startsWith("1") && cleaned.length > 10) {
+      // Has country code - strictly limit to 11 digits total
+      const validDigits = cleaned.slice(0, 11);
+      const withoutCountryCode = validDigits.slice(1);
+
+      formatted = "+1 ";
+      for (let i = 0; i < withoutCountryCode.length && i < 10; i++) {
+        if (i === 0) formatted += "(";
+        if (i === 3) formatted += ") ";
+        if (i === 6) formatted += "-";
+        formatted += withoutCountryCode[i];
+      }
+    } else {
+      // No country code - strictly limit to 10 digits
+      const validDigits = cleaned.slice(0, 10);
+
+      for (let i = 0; i < validDigits.length; i++) {
+        if (i === 0) formatted += "(";
+        if (i === 3) formatted += ") ";
+        if (i === 6) formatted += "-";
+        formatted += validDigits[i];
+      }
+    }
+  } else if (country === "GB") {
+    // UK formatting - limit digits appropriately
+    if (cleaned.startsWith("44")) {
+      const validDigits = cleaned.slice(0, 12); // 44 + 10 digits
+      formatted = "+44 ";
+      const withoutCountryCode = validDigits.slice(2);
+
+      // Format UK number (various formats exist, this is simplified)
+      for (let i = 0; i < withoutCountryCode.length; i++) {
+        if (i === 4) formatted += " ";
+        formatted += withoutCountryCode[i];
+      }
+    } else {
+      const validDigits = cleaned.slice(0, 11);
+
+      for (let i = 0; i < validDigits.length; i++) {
+        if (i === 5) formatted += " ";
+        formatted += validDigits[i];
+      }
+    }
+  } else {
+    // Generic international formatting - respect E.164 max length
+    const validDigits = cleaned.slice(0, 15);
+
+    if (validDigits.length > 10) {
+      // Assume first 1-3 digits are country code
+      const possibleCountryCodeLength = validDigits.startsWith("1")
+        ? 1
+        : validDigits.startsWith("44")
+        ? 2
+        : validDigits.startsWith("86")
+        ? 2
+        : 3;
+      formatted = `+${validDigits.slice(
+        0,
+        possibleCountryCodeLength
+      )} ${validDigits.slice(possibleCountryCodeLength)}`;
+    } else {
+      formatted = validDigits;
+    }
+  }
+
+  // Calculate cursor position
+  const cursorPos = formatted.length;
+
+  return { formatted, cursorPos };
+};
+
+// Validate phone number
+const isValidPhoneNumber = (value: string): boolean => {
+  const cleaned = value.replace(/\D/g, "");
+  if (cleaned.length === 0) return true; // Empty is valid
+
+  const country = detectCountry(cleaned);
+
+  if (country === "US") {
+    // Valid US numbers: EXACTLY 10 digits or EXACTLY 11 digits starting with 1
+    if (cleaned.length === 10) {
+      return true;
+    }
+    if (cleaned.length === 11 && cleaned.startsWith("1")) {
+      return true;
+    }
+    return false; // Any other length is invalid
+  }
+
+  if (country === "GB") {
+    // Valid UK numbers: typically 11 digits (including country code 44)
+    if (cleaned.startsWith("44")) {
+      return cleaned.length === 12; // 44 + 10 digits
+    }
+    return cleaned.length === 11; // Without country code
+  }
+
+  // General international validation
+  return cleaned.length >= 7 && cleaned.length <= 15; // ITU-T E.164 standard
+};
+
+// Computed properties
+const isValid = computed(() => isValidPhoneNumber(internalValue.value));
+const currentPlaceholder = computed(() => {
+  const country = detectCountry(internalValue.value);
+  const format = countryFormats[country as keyof typeof countryFormats];
+  return format?.placeholder || props.placeholder;
+});
+
+// Override state to show error when phone number is invalid
+const effectiveState = computed(() => {
+  if (!isValid.value && internalValue.value.length > 0) {
+    return "error";
+  }
+  return props.state;
+});
+
+// Get the appropriate text color for icons based on state
+const getIconColor = () => {
+  return "var(--input-text-filled)";
+};
+
+// Watch for changes to value prop
+watch(
+  () => props.value,
+  (newValue) => {
+    if (newValue !== internalValue.value) {
+      const { formatted } = formatPhoneNumber(newValue);
+      internalValue.value = formatted;
+    }
+  }
+);
+
+// Update handleBeforeInput to prevent typing when at max digits
+const handleBeforeInput = (event: Event) => {
+  const inputEvent = event as InputEvent;
+  const data = inputEvent.data;
+
+  // Allow deletion operations
+  if (!data) return;
+
+  // Check if we're at max digits
+  if (currentDigitCount.value >= maxAllowedDigits.value) {
+    event.preventDefault();
+    return;
+  }
+
+  // Only allow digits - NO other characters
+  const isDigit = /^[0-9]+$/;
+  if (!isDigit.test(data)) {
+    event.preventDefault();
+  }
+};
+
+// Also update the handleInput function to prevent extra digits
+const handleInput = (event: Event) => {
+  const target = event.target as HTMLInputElement;
+  const rawValue = target.value;
+  const caretPos = target.selectionStart || 0;
+
+  // Strip out any non-allowed characters
+  let digitsOnly = rawValue.replace(/[^\d]/g, "");
+
+  // Determine maximum allowed digits based on country
+  const country = detectCountry(digitsOnly);
+  let maxDigits = 15; // Default international max
+
+  if (country === "US") {
+    // For US: 10 digits without country code, 11 with country code
+    if (digitsOnly.startsWith("1")) {
+      maxDigits = 11;
+    } else {
+      maxDigits = 10;
+    }
+  } else if (country === "GB") {
+    // For UK: 11 without country code, 12 with country code
+    if (digitsOnly.startsWith("44")) {
+      maxDigits = 12;
+    } else {
+      maxDigits = 11;
+    }
+  }
+
+  // Enforce the digit limit
+  digitsOnly = digitsOnly.slice(0, maxDigits);
+
+  // Format the number
+  const { formatted, cursorPos } = formatPhoneNumber(digitsOnly);
+  internalValue.value = formatted;
+
+  // Update cursor position after formatting
+  cursorPosition.value = cursorPos;
+
+  // Emit events
+  emit("update:value", formatted);
+  emit("update:formatted", formatted);
+  emit("update:valid", isValidPhoneNumber(formatted));
+
+  // Set cursor position after Vue updates the DOM
+  requestAnimationFrame(() => {
+    if (inputRef.value && cursorPosition.value !== null) {
+      inputRef.value.setSelectionRange(
+        cursorPosition.value,
+        cursorPosition.value
+      );
+    }
+  });
+};
+
+// Handle paste
+const handlePaste = (event: ClipboardEvent) => {
+  event.preventDefault();
+  const pastedText = event.clipboardData?.getData("text") || "";
+  let cleanedNumber = pastedText.replace(/\D/g, "");
+
+  if (cleanedNumber) {
+    // Determine maximum allowed digits based on country
+    const country = detectCountry(cleanedNumber);
+    let maxDigits = 15; // Default international max
+
+    if (country === "US") {
+      // For US: 10 digits without country code, 11 with country code
+      if (cleanedNumber.startsWith("1")) {
+        maxDigits = 11;
+      } else {
+        maxDigits = 10;
+      }
+    } else if (country === "GB") {
+      // For UK: 11 without country code, 12 with country code
+      if (cleanedNumber.startsWith("44")) {
+        maxDigits = 12;
+      } else {
+        maxDigits = 11;
+      }
+    }
+
+    // Enforce the digit limit BEFORE formatting
+    cleanedNumber = cleanedNumber.slice(0, maxDigits);
+
+    const { formatted } = formatPhoneNumber(cleanedNumber);
+    internalValue.value = formatted;
+    emit("update:value", formatted);
+    emit("update:formatted", formatted);
+    emit("update:valid", isValidPhoneNumber(formatted));
+  }
+};
+
+// Update handleKeyDown to also check digit limit
+const handleKeyDown = (event: KeyboardEvent) => {
+  const target = event.target as HTMLInputElement;
+  const key = event.key;
+  const caretPos = target.selectionStart || 0;
+
+  // Block any non-digit keys except control keys
+  const isControlKey = [
+    "Backspace",
+    "Delete",
+    "Tab",
+    "Escape",
+    "Enter",
+    "ArrowLeft",
+    "ArrowRight",
+    "ArrowUp",
+    "ArrowDown",
+  ].includes(key);
+  const isModifierKey = event.ctrlKey || event.metaKey || event.altKey;
+
+  // If it's a digit and we're at max, prevent it
+  if (
+    /^[0-9]$/.test(key) &&
+    !isModifierKey &&
+    currentDigitCount.value >= maxAllowedDigits.value
+  ) {
+    event.preventDefault();
+    return;
+  }
+
+  if (!isControlKey && !isModifierKey && !/^[0-9]$/.test(key)) {
+    event.preventDefault();
+    return;
+  }
+
+  // Allow backspace to delete formatting characters
+  if (key === "Backspace" && caretPos > 0) {
+    const charToDelete = internalValue.value[caretPos - 1];
+    if (["(", ")", " ", "-"].includes(charToDelete)) {
+      event.preventDefault();
+      target.setSelectionRange(caretPos - 1, caretPos - 1);
+    }
+  }
+};
+const getPlaceholder = computed(() => {
+  if (props.state === "readonly") {
+    return "Field Cannot Be Edited";
+  }
+  return currentPlaceholder.value;
+});
+</script>
+
+<template>
+  <div :class="$style.container">
+    <div :class="[$style.input_container, $style[effectiveState]]">
+      <input
+        ref="inputRef"
+        class="body"
+        type="tel"
+        :placeholder="getPlaceholder"
+        :value="internalValue"
+        @beforeinput="handleBeforeInput"
+        @input="handleInput"
+        @paste="handlePaste"
+        @keydown="handleKeyDown"
+        :maxlength="20"
+        :disabled="state === 'disabled'"
+        :readonly="state === 'readonly'"
+      />
+      <PhoneIcon v-if="!internalValue" :size="16" />
+      <transition name="fade">
+        <div
+          v-if="!isValid && internalValue.length > 0"
+          :class="$style.error_icon"
+        >
+          <TriangleWarningIcon size="16" />
+        </div>
+      </transition>
+    </div>
+    <transition name="slide-fade">
+      <p
+        v-if="!isValid && internalValue.length > 0"
+        :class="[$style.error_message, 'footnote']"
+      >
+        Please enter a valid phone number
+      </p>
+    </transition>
+  </div>
+</template>
+
+<style module>
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.588rem;
+}
+
+.input_container {
+  width: 100%;
+  padding-left: 0.882rem;
+  padding-right: 0.882rem;
+  padding-top: 0.588rem;
+  padding-bottom: 0.588rem;
+  border: var(--input-border);
+  border-radius: var(--input-border-radius);
+  transition: background-color 0.3s ease, border 0.3s ease;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+}
+
+.input_container:focus-within {
+  border: 1px solid var(--input-focus-border);
+}
+
+.input_container input {
+  border: none;
+  background: transparent;
+  outline: none;
+  width: 100%;
+  font-family: inherit;
+}
+
+/* State-based styling using CSS variables */
+.input_container.normal:has(input:placeholder-shown),
+.input_container.active:has(input:placeholder-shown) {
+  background-color: var(--input-background-normal);
+  color: var(--input-text-empty);
+}
+
+.input_container.normal:has(input:not(:placeholder-shown)),
+.input_container.active:has(input:not(:placeholder-shown)) {
+  background-color: var(--input-background-filled);
+  color: var(--input-text-filled);
+  border-color: var(--input-border-filled);
+}
+
+.input_container.normal input:placeholder-shown,
+.input_container.active input:placeholder-shown {
+  color: var(--input-text-empty);
+  opacity: 0.6;
+}
+
+.input_container.normal input:not(:placeholder-shown),
+.input_container.active input:not(:placeholder-shown) {
+  color: var(--input-text-filled);
+}
+
+.input_container.disabled:has(input:placeholder-shown),
+.input_container.disabled:has(input:not(:placeholder-shown)) {
+  background-color: var(--input-disabled-bg);
+  color: var(--input-disabled-text);
+  border-color: var(--input-disabled-border);
+  cursor: not-allowed;
+}
+
+.input_container.disabled input:placeholder-shown,
+.input_container.disabled input:not(:placeholder-shown) {
+  color: var(--input-disabled-text);
+  cursor: not-allowed;
+}
+
+.input_container.readonly:has(input:placeholder-shown),
+.input_container.readonly:has(input:not(:placeholder-shown)) {
+  background-color: var(--input-readonly-bg);
+  color: var(--input-readonly-text);
+  border-color: var(--input-readonly-border);
+  cursor: not-allowed;
+}
+
+.input_container.readonly input:placeholder-shown,
+.input_container.readonly input:not(:placeholder-shown) {
+  color: var(--input-readonly-text);
+  cursor: not-allowed;
+}
+
+.input_container.error:has(input:placeholder-shown),
+.input_container.error:has(input:not(:placeholder-shown)) {
+  background-color: var(--input-error-bg);
+  color: var(--input-error-text);
+  border-color: var(--input-error-border);
+}
+
+.input_container.error input:placeholder-shown,
+.input_container.error input:not(:placeholder-shown) {
+  color: var(--input-error-text);
+}
+
+.input_container.active {
+  pointer-events: none;
+}
+
+.error_icon {
+  color: var(--input-text-error);
+  display: flex;
+  align-items: center;
+  animation: shake 0.3s ease-in-out;
+}
+
+.error_message {
+  color: var(--input-text-error);
+}
+
+/* Animations */
+@keyframes shake {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(-5px);
+  }
+  75% {
+    transform: translateX(5px);
+  }
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.slide-fade-enter-active {
+  transition: all 0.3s ease;
+}
+
+.slide-fade-leave-active {
+  transition: all 0.2s ease;
+}
+
+.slide-fade-enter-from {
+  transform: translateY(-10px);
+  opacity: 0;
+}
+
+.slide-fade-leave-to {
+  transform: translateY(-10px);
+  opacity: 0;
+}
+
+.input_container input::placeholder {
+  color: var(--input-placeholder);
+}
+
+.input_container:has(input:not(:placeholder-shown)) input::placeholder {
+  color: var(--input-placeholder-filled);
+}
+
+.input_container.readonly input::placeholder {
+  color: var(--input-readonly-placeholder);
+}
+
+.input_container.disabled input::placeholder {
+  color: var(--input-disabled-placeholder);
+}
+
+/* Responsive adjustments */
+@media (max-width: 480px) {
+  .input_container input {
+    font-size: 16px; /* Prevents zoom on iOS */
+  }
+}
+</style>