telpick 1.0.1 → 1.0.2

package/README.es.md

@@ -8,6 +8,12 @@ Selector de país y código telefónico multiplataforma con diseño moderno y an
 
 [English](README.md) | **Español**
 
+## Probar la demo
+
+Puedes probar la demo interactiva en línea:
+
+**[→ Abrir demo (GitHub Pages)](https://julioalmirooficial.github.io/telpick/)**
+
 ## Características
 
 - Diseño moderno con animaciones suaves

package/README.md

@@ -8,6 +8,12 @@ Multi-platform country and phone code selector with a modern design, smooth anim
 
 **English** | [Español](README.es.md)
 
+## Try the demo
+
+You can try the interactive demo online:
+
+**[→ Open demo (GitHub Pages)](https://julioalmirooficial.github.io/telpick/)**
+
 ## Features
 
 - Modern design with smooth animations

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "telpick",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Multi-platform country and phone code selector with a modern design, smooth animations, and automatic IP detection.",
   "main": "dist/telpick.umd.js",
   "module": "dist/telpick.esm.js",
@@ -34,6 +34,8 @@
   ],
   "scripts": {
     "build": "vite build",
+    "build:demo": "vite build --config vite.config.demo.js",
+    "deploy:demo": "npm run build:demo && gh-pages -d docs",
     "dev": "vite",
     "prepublishOnly": "npm run build",
     "test": "jest"
@@ -81,6 +83,7 @@
     }
   },
   "devDependencies": {
+    "gh-pages": "^6.1.1",
     "vite": "^4.0.0",
     "typescript": "^5.0.0",
     "vue": "^3.0.0",

package/src/demo-init.js

@@ -0,0 +1,34 @@
+/**
+ * Demo init: carga Telpick y monta el Interactive Demo.
+ * Así Telpick está disponible cuando se ejecuta el init (evita race con el script inline).
+ */
+import Telpick from './telpick.js'
+
+window.Telpick = Telpick
+
+function initDemo() {
+  const container = document.getElementById('telpick-container')
+  if (!container) return
+
+  const telpick = new Telpick({
+    code: null,
+    onChange: (country) => {
+      const infoEl = document.getElementById('selected-info')
+      if (infoEl) {
+        document.getElementById('selected-code').textContent = country.code
+        document.getElementById('selected-country').textContent = country.country
+        document.getElementById('selected-phone').textContent = country.code
+        document.getElementById('selected-iso').textContent = country.country_code
+        infoEl.classList.add('active')
+      }
+    },
+    styleOverrides: {}
+  })
+  telpick.init(container)
+}
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', initDemo)
+} else {
+  initDemo()
+}