@umbra.ui/core 0.1.0

package/src/components/inputs/InputEmail/InputEmail.vue

@@ -0,0 +1,698 @@
+<script setup lang="ts">
+import { ref, watch, computed } from "vue";
+import "../theme.css";
+import {
+  EnvelopeIcon,
+  TriangleWarningIcon,
+  CircleCheckIcon,
+} from "@umbra-ui/icons";
+
+export interface Props {
+  value?: string;
+  placeholder?: string;
+  showSuggestions?: boolean;
+  validateOnType?: boolean;
+  allowSubdomains?: boolean;
+  state?: "normal" | "active" | "disabled" | "readonly" | "error";
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  value: "",
+  placeholder: "name@example.com",
+  showSuggestions: true,
+  validateOnType: true,
+  allowSubdomains: true,
+  state: "normal",
+});
+
+const emit = defineEmits<{
+  "update:value": [value: string];
+  "update:valid": [value: boolean];
+  "update:suggestion": [value: string];
+}>();
+
+const internalValue = ref(props.value);
+const showSuggestionsList = ref(false);
+const selectedSuggestionIndex = ref(-1);
+const inputRef = ref<HTMLInputElement | null>(null);
+const hasInteracted = ref(false);
+
+// Common email domains for suggestions
+const commonDomains = [
+  "gmail.com",
+  "yahoo.com",
+  "hotmail.com",
+  "outlook.com",
+  "icloud.com",
+  "aol.com",
+  "protonmail.com",
+  "mail.com",
+  "ymail.com",
+  "live.com",
+];
+
+// Common TLDs for validation
+const commonTLDs = [
+  "com",
+  "org",
+  "net",
+  "edu",
+  "gov",
+  "mil",
+  "int",
+  "co",
+  "uk",
+  "de",
+  "fr",
+  "it",
+  "es",
+  "ca",
+  "au",
+  "jp",
+  "cn",
+  "in",
+  "io",
+  "dev",
+  "app",
+  "me",
+  "tv",
+  "info",
+  "biz",
+  "name",
+  "pro",
+];
+
+// Updated email regex patterns with stricter domain validation
+const emailRegex = props.allowSubdomains
+  ? /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9]([a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(\.[a-zA-Z0-9]([a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*\.[a-zA-Z]{2,}$/
+  : /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9]([a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?\.[a-zA-Z]{2,}$/;
+
+// Validate email format
+// Updated email validation function
+const isValidEmail = (email: string): boolean => {
+  if (!email) return true; // Empty is valid
+
+  // Basic format check
+  if (!emailRegex.test(email)) return false;
+
+  // Additional checks
+  const [localPart, domain] = email.split("@");
+
+  // Check local part
+  if (localPart.length > 64) return false;
+  if (localPart.startsWith(".") || localPart.endsWith(".")) return false;
+  if (localPart.includes("..")) return false;
+
+  // Check domain
+  if (domain.length > 253) return false;
+  if (domain.startsWith("-") || domain.endsWith("-")) return false;
+
+  // NEW: Check if domain ends with a dot
+  if (domain.endsWith(".")) return false;
+
+  // NEW: Check if domain starts with a dot
+  if (domain.startsWith(".")) return false;
+
+  // NEW: Check for consecutive dots in domain
+  if (domain.includes("..")) return false;
+
+  // NEW: Ensure domain has at least one dot and proper TLD
+  const domainParts = domain.split(".");
+  if (domainParts.length < 2) return false;
+
+  // Check that each domain part is valid
+  for (const part of domainParts) {
+    if (part.length === 0) return false; // Empty part (consecutive dots)
+    if (part.length > 63) return false; // Domain label too long
+    if (!/^[a-zA-Z0-9-]+$/.test(part)) return false; // Invalid characters
+    if (part.startsWith("-") || part.endsWith("-")) return false; // Hyphens at start/end
+  }
+
+  // Check TLD (last part) - should be at least 2 characters and only letters
+  const tld = domainParts[domainParts.length - 1];
+  if (tld.length < 2) return false;
+  if (!/^[a-zA-Z]+$/.test(tld)) return false;
+
+  return true;
+};
+
+// Check for common typos in domain
+const checkForTypos = (domain: string): string | null => {
+  const commonTypos: Record<string, string> = {
+    "gmial.com": "gmail.com",
+    "gmai.com": "gmail.com",
+    "gmil.com": "gmail.com",
+    "gmal.com": "gmail.com",
+    "gamil.com": "gmail.com",
+    "yahooo.com": "yahoo.com",
+    "yaho.com": "yahoo.com",
+    "yahou.com": "yahoo.com",
+    "hotmial.com": "hotmail.com",
+    "hotmai.com": "hotmail.com",
+    "hotmil.com": "hotmail.com",
+    "outloook.com": "outlook.com",
+    "outlok.com": "outlook.com",
+  };
+
+  return commonTypos[domain.toLowerCase()] || null;
+};
+
+// Generate email suggestions
+const generateSuggestions = computed(() => {
+  if (!props.showSuggestions || !internalValue.value.includes("@")) {
+    return [];
+  }
+
+  const [localPart, domainPart] = internalValue.value.split("@");
+  if (!localPart || !domainPart) return [];
+
+  // Check for typos first
+  const typoSuggestion = checkForTypos(domainPart);
+  if (typoSuggestion) {
+    return [`${localPart}@${typoSuggestion}`];
+  }
+
+  // Filter common domains based on input
+  if (domainPart.length > 0) {
+    return commonDomains
+      .filter((domain) => domain.startsWith(domainPart.toLowerCase()))
+      .map((domain) => `${localPart}@${domain}`)
+      .slice(0, 5);
+  }
+
+  return commonDomains.map((domain) => `${localPart}@${domain}`).slice(0, 5);
+});
+
+// Computed properties
+const isValid = computed(() => isValidEmail(internalValue.value));
+const hasTypo = computed(() => {
+  if (!internalValue.value.includes("@")) return false;
+  const [, domain] = internalValue.value.split("@");
+  return !!checkForTypos(domain);
+});
+
+const showError = computed(() => {
+  return (
+    hasInteracted.value &&
+    !isValid.value &&
+    internalValue.value.length > 0 &&
+    (!props.validateOnType || internalValue.value.includes("@"))
+  );
+});
+
+// Override state to show error when email is invalid
+const effectiveState = computed(() => {
+  if (showError.value) {
+    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) {
+      internalValue.value = newValue;
+    }
+  }
+);
+
+// Handle input
+const handleInput = (event: Event) => {
+  const target = event.target as HTMLInputElement;
+  let value = target.value;
+
+  // Convert to lowercase
+  value = value.toLowerCase();
+
+  // Remove spaces
+  value = value.replace(/\s/g, "");
+
+  // Prevent multiple @ symbols
+  const atCount = (value.match(/@/g) || []).length;
+  if (atCount > 1) {
+    // Keep only the first @
+    const firstAtIndex = value.indexOf("@");
+    const beforeAt = value.substring(0, firstAtIndex);
+    const afterAt = value.substring(firstAtIndex + 1).replace(/@/g, "");
+    value = beforeAt + "@" + afterAt;
+  }
+
+  internalValue.value = value;
+  hasInteracted.value = true;
+
+  // Show suggestions when @ is typed
+  if (value.includes("@") && props.showSuggestions) {
+    showSuggestionsList.value = true;
+  } else {
+    showSuggestionsList.value = false;
+  }
+
+  // Reset suggestion selection
+  selectedSuggestionIndex.value = -1;
+
+  // Emit events
+  emit("update:value", value);
+  emit("update:valid", isValid.value);
+};
+
+// Handle blur
+const handleBlur = () => {
+  hasInteracted.value = true;
+  // Delay hiding suggestions to allow click
+  setTimeout(() => {
+    showSuggestionsList.value = false;
+  }, 200);
+};
+
+// Handle focus
+const handleFocus = () => {
+  if (
+    internalValue.value.includes("@") &&
+    generateSuggestions.value.length > 0
+  ) {
+    showSuggestionsList.value = true;
+  }
+};
+
+// Handle keyboard navigation
+const handleKeyDown = (event: KeyboardEvent) => {
+  if (!showSuggestionsList.value || generateSuggestions.value.length === 0) {
+    return;
+  }
+
+  switch (event.key) {
+    case "ArrowDown":
+      event.preventDefault();
+      selectedSuggestionIndex.value = Math.min(
+        selectedSuggestionIndex.value + 1,
+        generateSuggestions.value.length - 1
+      );
+      break;
+
+    case "ArrowUp":
+      event.preventDefault();
+      selectedSuggestionIndex.value = Math.max(
+        selectedSuggestionIndex.value - 1,
+        -1
+      );
+      break;
+
+    case "Enter":
+      if (selectedSuggestionIndex.value >= 0) {
+        event.preventDefault();
+        selectSuggestion(
+          generateSuggestions.value[selectedSuggestionIndex.value]
+        );
+      }
+      break;
+
+    case "Escape":
+      showSuggestionsList.value = false;
+      selectedSuggestionIndex.value = -1;
+      break;
+  }
+};
+
+// Select suggestion
+const selectSuggestion = (suggestion: string) => {
+  internalValue.value = suggestion;
+  showSuggestionsList.value = false;
+  selectedSuggestionIndex.value = -1;
+
+  emit("update:value", suggestion);
+  emit("update:valid", true);
+  emit("update:suggestion", suggestion);
+
+  // Focus back on input
+  inputRef.value?.focus();
+};
+
+// Handle paste
+const handlePaste = (event: ClipboardEvent) => {
+  event.preventDefault();
+  const pastedText = event.clipboardData?.getData("text") || "";
+
+  // Clean pasted email
+  let cleaned = pastedText.toLowerCase().trim().replace(/\s/g, "");
+
+  // Extract email from common formats like "John Doe <john@example.com>"
+  const emailMatch =
+    cleaned.match(/<([^>]+)>/) || cleaned.match(/([^\s]+@[^\s]+)/);
+  if (emailMatch) {
+    cleaned = emailMatch[1];
+  }
+
+  internalValue.value = cleaned;
+  hasInteracted.value = true;
+
+  emit("update:value", cleaned);
+  emit("update:valid", isValidEmail(cleaned));
+};
+
+const getPlaceholder = computed(() => {
+  if (props.state === "readonly") {
+    return "Field Cannot Be Edited";
+  }
+  return props.placeholder;
+});
+</script>
+
+<template>
+  <div :class="$style.container">
+    <div :class="[$style.input_container, $style[effectiveState]]">
+      <input
+        ref="inputRef"
+        class="body"
+        type="email"
+        autocomplete="email"
+        autocapitalize="off"
+        autocorrect="off"
+        spellcheck="false"
+        :placeholder="getPlaceholder"
+        :value="internalValue"
+        @input="handleInput"
+        @blur="handleBlur"
+        @focus="handleFocus"
+        @keydown="handleKeyDown"
+        @paste="handlePaste"
+        :disabled="state === 'disabled'"
+        :readonly="state === 'readonly'"
+      />
+      <transition name="fade">
+        <div v-if="showError" :class="$style.error_icon">
+          <TriangleWarningIcon size="16" />
+        </div>
+      </transition>
+      <transition name="fade">
+        <div
+          v-if="isValid && internalValue.includes('@') && !showError"
+          :class="$style.valid_icon"
+        >
+          <CircleCheckIcon size="16" />
+        </div>
+      </transition>
+      <EnvelopeIcon v-if="!internalValue" :size="16" />
+    </div>
+
+    <!-- Suggestions dropdown -->
+    <transition name="dropdown">
+      <div
+        v-if="showSuggestionsList && generateSuggestions.length > 0"
+        :class="$style.suggestions"
+      >
+        <div v-if="hasTypo" :class="$style.typo_warning">Did you mean:</div>
+        <button
+          v-for="(suggestion, index) in generateSuggestions"
+          :key="suggestion"
+          :class="[
+            $style.suggestion,
+            { [$style.selected]: index === selectedSuggestionIndex },
+          ]"
+          @click="selectSuggestion(suggestion)"
+          @mouseenter="selectedSuggestionIndex = index"
+          type="button"
+        >
+          <span :class="$style.suggestion_local">{{
+            suggestion.split("@")[0]
+          }}</span>
+          <span :class="$style.suggestion_domain"
+            >@{{ suggestion.split("@")[1] }}</span
+          >
+        </button>
+      </div>
+    </transition>
+
+    <!-- Error message -->
+    <transition name="slide-fade">
+      <p v-if="showError" :class="[$style.error_message, 'footnote']">
+        {{
+          hasTypo
+            ? "This email might have a typo"
+            : "Please enter a valid email address"
+        }}
+      </p>
+    </transition>
+  </div>
+</template>
+
+<style module>
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.588rem;
+  position: relative;
+}
+
+.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;
+  gap: 0.588rem;
+  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;
+}
+
+.valid_icon {
+  color: var(--input-text-filled);
+  display: flex;
+  align-items: center;
+}
+
+.error_message {
+  color: var(--input-text-error);
+}
+
+/* Suggestions dropdown */
+.suggestions {
+  position: absolute;
+  top: calc(100% + 0.25rem);
+  left: 0;
+  right: 0;
+  background: black;
+  border: 1px solid #484848;
+  border-radius: var(--input-border-radius);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  z-index: 1000;
+}
+
+.typo_warning {
+  padding: 0.5rem 0.882rem;
+  font-size: 0.875rem;
+  color: #ffe629;
+  background-color: rgba(255, 193, 7, 0.1);
+  border-bottom: 1px solid #484848;
+}
+
+.suggestion {
+  display: block;
+  width: 100%;
+  padding: 0.5rem 0.882rem;
+  text-align: left;
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  font-size: 1rem;
+  font-family: inherit;
+  color: var(--text-1);
+}
+
+.suggestion:hover,
+.suggestion.selected {
+  background-color: #484848;
+}
+
+.suggestion_local {
+  color: #eeeeee;
+}
+
+.suggestion_domain {
+  color: #b4b4b4;
+}
+
+/* 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;
+}
+
+.dropdown-enter-active {
+  transition: all 0.2s ease;
+}
+
+.dropdown-leave-active {
+  transition: all 0.15s ease;
+}
+
+.dropdown-enter-from {
+  transform: translateY(-10px);
+  opacity: 0;
+}
+
+.dropdown-leave-to {
+  transform: translateY(-5px);
+  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>