telpick 1.0.0

package/src/telpick.vanilla.js

@@ -0,0 +1,199 @@
+import { getDefaultCountry, useClickOutside, CountryCode, TelpickProps } from './telpick'
+import './telpick.css'
+
+export class TelpickVanilla {
+  constructor(options = {}) {
+    this.code = options.code || null
+    this.onChange = options.onChange || (() => {})
+    this.styleOverrides = options.styleOverrides || {}
+    this.codes = []
+    this.selectedCode = this.code
+    this.isDropdownOpen = false
+    this.searchQuery = ''
+    this.container = null
+    this.dropdown = null
+    this.searchInput = null
+  }
+
+  async init(container) {
+    this.container = container
+    const res = await fetch('/resources/api/country-codes.json')
+    const data = await res.json()
+    this.codes = data.sort((a, b) => a.country.localeCompare(b.country, 'es'))
+    if (!this.code) {
+      const def = await getDefaultCountry(this.codes)
+      if (def) this.selectedCode = def.country_code
+    }
+    this.render()
+    useClickOutside(this.container, () => {
+      this.closeDropdown()
+    })
+  }
+
+  render() {
+    if (this.isDropdownOpen && this.dropdown && this.searchInput) {
+      const ul = this.dropdown.querySelector('ul')
+      if (ul) {
+        ul.innerHTML = ''
+        const filtered = !this.searchQuery 
+          ? this.codes 
+          : this.codes.filter(c => c.country.toLowerCase().includes(this.searchQuery.toLowerCase()))
+        
+        filtered.forEach((item, index) => {
+          const li = document.createElement('li')
+          const isSelected = item.country_code === this.selectedCode && this.selectedCode !== null && this.selectedCode !== undefined
+          li.className = `telpick-item ${isSelected ? 'telpick-item-selected' : ''}`
+          li.setAttribute('role', 'option')
+          li.setAttribute('aria-selected', isSelected)
+          li.onclick = () => {
+            this.selectedCode = item.country_code
+            this.onChange(item)
+            this.isDropdownOpen = false
+            this.searchQuery = ''
+            this.render()
+          }
+          
+          const flag = document.createElement('div')
+          flag.className = 'telpick-flag'
+          const img = document.createElement('img')
+          img.src = item.flag
+          img.alt = item.country
+          flag.appendChild(img)
+          li.appendChild(flag)
+          
+          const countrySpan = document.createElement('span')
+          countrySpan.textContent = item.country
+          li.appendChild(countrySpan)
+          
+          const codeSpan = document.createElement('span')
+          codeSpan.className = 'ml-auto'
+          codeSpan.textContent = item.code
+          li.appendChild(codeSpan)
+          
+          ul.appendChild(li)
+        })
+      }
+      return
+    }
+
+    this.container.innerHTML = ''
+    this.container.className = 'telpick-wrapper relative'
+    
+    const btn = document.createElement('button')
+    btn.className = 'telpick-btn'
+    btn.setAttribute('aria-expanded', this.isDropdownOpen)
+    btn.setAttribute('aria-haspopup', 'listbox')
+    Object.assign(btn.style, this.styleOverrides)
+    btn.onclick = () => {
+      this.isDropdownOpen = !this.isDropdownOpen
+      this.render()
+    }
+    
+    const flagDiv = document.createElement('div')
+    flagDiv.className = 'telpick-flag'
+    const selectedCountry = this.codes.find(c => c.country_code === this.selectedCode) || { flag: '', code: '', country: '' }
+    if (selectedCountry.flag) {
+      const img = document.createElement('img')
+      img.src = selectedCountry.flag
+      img.alt = selectedCountry.country || 'flag'
+      flagDiv.appendChild(img)
+    }
+    btn.appendChild(flagDiv)
+    
+    const codeSpan = document.createElement('span')
+    codeSpan.textContent = selectedCountry.code
+    btn.appendChild(codeSpan)
+    
+    const arrowSpan = document.createElement('span')
+    arrowSpan.className = 'telpick-arrow ml-auto'
+    arrowSpan.textContent = '▼'
+    btn.appendChild(arrowSpan)
+    this.container.appendChild(btn)
+
+    if (this.isDropdownOpen) {
+      this.dropdown = document.createElement('div')
+      this.dropdown.className = 'telpick-dropdown'
+      this.dropdown.setAttribute('role', 'listbox')
+      this.dropdown.onclick = e => e.stopPropagation()
+      this.dropdown.onmousedown = e => e.stopPropagation()
+      
+      const input = document.createElement('input')
+      input.className = 'telpick-search'
+      input.type = 'text'
+      input.placeholder = 'Buscar país...'
+      input.value = this.searchQuery
+      input.autofocus = true
+      this.searchInput = input
+      input.oninput = e => {
+        e.stopPropagation()
+        const inputEl = e.target
+        const cursorPos = inputEl.selectionStart || 0
+        const newValue = inputEl.value
+        this.searchQuery = newValue
+        this.render()
+        requestAnimationFrame(() => {
+          if (this.searchInput) {
+            this.searchInput.focus()
+            const newCursorPos = Math.min(cursorPos + 1, newValue.length)
+            this.searchInput.setSelectionRange(newCursorPos, newCursorPos)
+          }
+        })
+      }
+      input.onclick = e => e.stopPropagation()
+      input.onmousedown = e => e.stopPropagation()
+      this.dropdown.appendChild(input)
+      
+      const ul = document.createElement('ul')
+      const filtered = !this.searchQuery 
+        ? this.codes 
+        : this.codes.filter(c => c.country.toLowerCase().includes(this.searchQuery.toLowerCase()))
+      
+      filtered.forEach((item, index) => {
+        const li = document.createElement('li')
+        const isSelected = item.country_code === this.selectedCode && this.selectedCode !== null && this.selectedCode !== undefined
+        li.className = `telpick-item ${isSelected ? 'telpick-item-selected' : ''}`
+        li.setAttribute('role', 'option')
+        li.setAttribute('aria-selected', isSelected)
+        li.onclick = () => {
+          this.selectedCode = item.country_code
+          this.onChange(item)
+          this.isDropdownOpen = false
+          this.searchQuery = ''
+          this.render()
+        }
+        
+        const flag = document.createElement('div')
+        flag.className = 'telpick-flag'
+        const img = document.createElement('img')
+        img.src = item.flag
+        img.alt = item.country
+          flag.appendChild(img)
+          li.appendChild(flag)
+          
+          const countrySpan = document.createElement('span')
+          countrySpan.textContent = item.country
+          li.appendChild(countrySpan)
+          
+          const codeSpan = document.createElement('span')
+        codeSpan.className = 'ml-auto'
+        codeSpan.textContent = item.code
+        li.appendChild(codeSpan)
+        
+        ul.appendChild(li)
+      })
+      this.dropdown.appendChild(ul)
+      this.container.appendChild(this.dropdown)
+      
+      requestAnimationFrame(() => {
+        if (this.searchInput) {
+          this.searchInput.focus()
+        }
+      })
+    }
+  }
+
+  closeDropdown() {
+    this.isDropdownOpen = false
+    this.render()
+  }
+}

package/src/telpick.vue.ts

@@ -0,0 +1,144 @@
+import { defineComponent, ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue'
+import { getDefaultCountry, useClickOutside, CountryCode, TelpickProps } from './telpick'
+import './telpick.css'
+
+export const TelpickVue = defineComponent({
+  name: 'TelpickVue',
+  props: {
+    code: { type: String, default: null },
+    styleOverrides: { type: Object, default: () => ({}) }
+  },
+  emits: ['update:code'],
+  setup(props, { emit }) {
+    const codes = ref<CountryCode[]>([])
+    const selectedCode = ref(props.code)
+    const isDropdownOpen = ref(false)
+    const searchQuery = ref('')
+    const dropdownRef = ref<HTMLElement | null>(null)
+    const searchInputRef = ref<HTMLInputElement | null>(null)
+
+    const handleSearchInput = (e: Event) => {
+      const input = e.target as HTMLInputElement
+      const cursorPos = input.selectionStart || 0
+      const newValue = input.value
+      searchQuery.value = newValue
+      requestAnimationFrame(() => {
+        if (searchInputRef.value) {
+          searchInputRef.value.focus()
+          const newCursorPos = Math.min(cursorPos + 1, newValue.length)
+          searchInputRef.value.setSelectionRange(newCursorPos, newCursorPos)
+        }
+      })
+    }
+
+    const selectCode = (item: CountryCode) => {
+      selectedCode.value = item.country_code
+      emit('update:code', item)
+      isDropdownOpen.value = false
+      searchQuery.value = ''
+    }
+
+    const selectedCountry = computed(() => {
+      return (
+        codes.value.find((c) => c.country_code === selectedCode.value) || {
+          country_code: selectedCode.value,
+          flag: '',
+          country: '',
+          code: '',
+        }
+      )
+    })
+
+    const filteredCodes = computed(() => {
+      if (!searchQuery.value) return codes.value
+      return codes.value.filter((c) =>
+        c.country.toLowerCase().includes(searchQuery.value.toLowerCase())
+      )
+    })
+
+    watch(() => props.code, (newCode) => {
+      if (newCode !== undefined && newCode !== null) {
+        selectedCode.value = newCode
+      }
+    })
+
+    watch(isDropdownOpen, async () => {
+      if (isDropdownOpen.value) {
+        await nextTick()
+        if (searchInputRef.value) {
+          searchInputRef.value.focus()
+        }
+      }
+    })
+
+    onMounted(async () => {
+      const response = await fetch('/resources/api/country-codes.json')
+      const data = await response.json()
+      codes.value = data.sort((a, b) => a.country.localeCompare(b.country, 'es'))
+      if (!props.code) {
+        const def = await getDefaultCountry(codes.value)
+        if (def) selectCode(def)
+      }
+      if (dropdownRef.value) {
+        const remove = useClickOutside(dropdownRef.value, () => {
+          isDropdownOpen.value = false
+        })
+        onUnmounted(remove)
+      }
+    })
+
+    return {
+      codes,
+      selectedCode,
+      isDropdownOpen,
+      searchQuery,
+      selectCode,
+      selectedCountry,
+      filteredCodes,
+      dropdownRef,
+      searchInputRef,
+      handleSearchInput
+    }
+  },
+  template: `
+    <div class="telpick-wrapper relative" ref="dropdownRef">
+      <button
+        @click="isDropdownOpen = !isDropdownOpen"
+        class="telpick-btn"
+        :style="styleOverrides"
+        :aria-expanded="isDropdownOpen"
+        aria-haspopup="listbox"
+      >
+        <div class="telpick-flag">
+          <img v-if="selectedCountry.flag" :src="selectedCountry.flag" :alt="selectedCountry.country || 'flag'" />
+        </div>
+        <span>{{ selectedCountry.code }}</span>
+        <span class="telpick-arrow ml-auto">▼</span>
+      </button>
+      <Transition name="telpick-dropdown">
+        <div v-if="isDropdownOpen" class="telpick-dropdown" role="listbox" @click.stop @mousedown.stop>
+          <input 
+            ref="searchInputRef" 
+            v-model="searchQuery" 
+            type="text" 
+            placeholder="Buscar país..." 
+            class="telpick-search" 
+            @input="handleSearchInput"
+            @click.stop
+            @mousedown.stop
+            autofocus 
+          />
+          <ul>
+            <li v-for="(item, index) in filteredCodes" :key="\`\${item.country_code}-\${index}\`" @click="selectCode(item)" :class="['telpick-item', { 'telpick-item-selected': item.country_code === selectedCode && selectedCode !== null && selectedCode !== undefined }]" role="option" :aria-selected="item.country_code === selectedCode && selectedCode !== null && selectedCode !== undefined">
+              <div class="telpick-flag">
+                <img :src="item.flag" :alt="item.country" />
+              </div>
+              <span>{{ item.country }}</span>
+              <span class="ml-auto">{{ item.code }}</span>
+            </li>
+          </ul>
+        </div>
+      </Transition>
+    </div>
+  `
+})

package/src/telpick.wrappers.jsx

@@ -0,0 +1,37 @@
+// Wrapper para Vue, React y CDN usando Vanilla JS
+// Vue y React pueden usar el componente vanilla vía ref
+
+// Vue wrapper
+export function TelpickVue(props, { emit }) {
+	let telpickInstance = null
+	return {
+		mounted() {
+			telpickInstance = new window.Telpick({
+				code: props.code,
+				onChange: country => emit('update:code', country),
+				styleOverrides: props.styleOverrides || {}
+			})
+			telpickInstance.init(this.$el)
+		},
+		beforeUnmount() {
+			telpickInstance && telpickInstance.destroy()
+		},
+		render() {
+			return null // Render handled by vanilla
+		}
+	}
+}
+
+// React wrapper
+import React, { useRef, useEffect } from 'react'
+export function TelpickReact({ code, onChange, styleOverrides }) {
+	const ref = useRef()
+	useEffect(() => {
+		const telpickInstance = new window.Telpick({ code, onChange, styleOverrides })
+		telpickInstance.init(ref.current)
+		return () => telpickInstance.destroy()
+	}, [code, onChange, styleOverrides])
+	return <div ref={ref}></div>
+}
+
+// CDN usage: window.Telpick