telpick 1.0.0 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Potentially problematic release.
This version of telpick might be problematic. Click here for more details.
- package/README.es.md +223 -0
- package/README.md +49 -41
- package/package.json +6 -2
- package/src/demo-init.js +34 -0
package/README.es.md
ADDED
|
@@ -0,0 +1,223 @@
|
|
|
1
|
+
# Telpick
|
|
2
|
+
|
|
3
|
+
Selector de país y código telefónico multiplataforma con diseño moderno y animaciones suaves.
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/telpick)
|
|
6
|
+
[](https://opensource.org/licenses/MIT)
|
|
7
|
+
[](https://www.npmjs.com/package/telpick)
|
|
8
|
+
|
|
9
|
+
[English](README.md) | **Español**
|
|
10
|
+
|
|
11
|
+
## Probar la demo
|
|
12
|
+
|
|
13
|
+
Puedes probar la demo interactiva en línea:
|
|
14
|
+
|
|
15
|
+
**[→ Abrir demo (GitHub Pages)](https://julioalmirooficial.github.io/telpick/)**
|
|
16
|
+
|
|
17
|
+
## Características
|
|
18
|
+
|
|
19
|
+
- Diseño moderno con animaciones suaves
|
|
20
|
+
- Detección automática del país por IP (múltiples servicios de fallback)
|
|
21
|
+
- Compatible con Vue 3, React y Vanilla JavaScript
|
|
22
|
+
- Personalizable mediante variables CSS
|
|
23
|
+
- Accesible con atributos ARIA
|
|
24
|
+
- Diseño responsive
|
|
25
|
+
- Búsqueda integrada de países
|
|
26
|
+
- Ligero y sin dependencias pesadas
|
|
27
|
+
|
|
28
|
+
## Instalación
|
|
29
|
+
|
|
30
|
+
### npm
|
|
31
|
+
```bash
|
|
32
|
+
npm install telpick
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
### pnpm
|
|
36
|
+
```bash
|
|
37
|
+
pnpm add telpick
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
### yarn
|
|
41
|
+
```bash
|
|
42
|
+
yarn add telpick
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
### CDN
|
|
46
|
+
```html
|
|
47
|
+
<link rel="stylesheet" href="https://unpkg.com/telpick@latest/dist/style.css">
|
|
48
|
+
<script src="https://unpkg.com/telpick@latest/dist/telpick.umd.js"></script>
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
## Uso
|
|
52
|
+
|
|
53
|
+
### React
|
|
54
|
+
|
|
55
|
+
```tsx
|
|
56
|
+
import React, { useState } from 'react'
|
|
57
|
+
import { TelpickReact } from 'telpick/react'
|
|
58
|
+
import 'telpick/dist/style.css'
|
|
59
|
+
|
|
60
|
+
function App() {
|
|
61
|
+
const [selectedCountry, setSelectedCountry] = useState(null)
|
|
62
|
+
|
|
63
|
+
return (
|
|
64
|
+
<TelpickReact
|
|
65
|
+
code={null}
|
|
66
|
+
onChange={(country) => {
|
|
67
|
+
console.log('País seleccionado:', country)
|
|
68
|
+
setSelectedCountry(country)
|
|
69
|
+
}}
|
|
70
|
+
/>
|
|
71
|
+
)
|
|
72
|
+
}
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
### Vue 3
|
|
76
|
+
|
|
77
|
+
```vue
|
|
78
|
+
<template>
|
|
79
|
+
<TelpickVue
|
|
80
|
+
:code="selectedCode"
|
|
81
|
+
@update:code="handleCountryChange"
|
|
82
|
+
/>
|
|
83
|
+
</template>
|
|
84
|
+
|
|
85
|
+
<script setup>
|
|
86
|
+
import { ref } from 'vue'
|
|
87
|
+
import { TelpickVue } from 'telpick/vue'
|
|
88
|
+
import 'telpick/dist/style.css'
|
|
89
|
+
|
|
90
|
+
const selectedCode = ref(null)
|
|
91
|
+
|
|
92
|
+
const handleCountryChange = (country) => {
|
|
93
|
+
console.log('País seleccionado:', country)
|
|
94
|
+
selectedCode.value = country.country_code
|
|
95
|
+
}
|
|
96
|
+
</script>
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
### Vanilla JavaScript
|
|
100
|
+
|
|
101
|
+
```html
|
|
102
|
+
<!DOCTYPE html>
|
|
103
|
+
<html>
|
|
104
|
+
<head>
|
|
105
|
+
<link rel="stylesheet" href="https://unpkg.com/telpick@latest/dist/style.css">
|
|
106
|
+
</head>
|
|
107
|
+
<body>
|
|
108
|
+
<div id="telpick-container"></div>
|
|
109
|
+
|
|
110
|
+
<script src="https://unpkg.com/telpick@latest/dist/telpick.umd.js"></script>
|
|
111
|
+
<script>
|
|
112
|
+
const telpick = new Telpick({
|
|
113
|
+
code: null,
|
|
114
|
+
onChange: (country) => {
|
|
115
|
+
console.log('País seleccionado:', country)
|
|
116
|
+
}
|
|
117
|
+
})
|
|
118
|
+
telpick.init(document.getElementById('telpick-container'))
|
|
119
|
+
</script>
|
|
120
|
+
</body>
|
|
121
|
+
</html>
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
## Props
|
|
125
|
+
|
|
126
|
+
### `code` (opcional)
|
|
127
|
+
Código de país inicial (ISO 3166-1 alpha-2). Si es `null`, se detecta automáticamente por IP.
|
|
128
|
+
|
|
129
|
+
**Tipo:** `string | null`
|
|
130
|
+
**Por defecto:** `null`
|
|
131
|
+
|
|
132
|
+
```tsx
|
|
133
|
+
<TelpickReact code="ES" onChange={handleChange} />
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
### `onChange` (opcional)
|
|
137
|
+
Callback que se ejecuta cuando el usuario selecciona un país.
|
|
138
|
+
|
|
139
|
+
**Tipo:** `(country: CountryCode) => void`
|
|
140
|
+
|
|
141
|
+
```tsx
|
|
142
|
+
<TelpickReact
|
|
143
|
+
onChange={(country) => {
|
|
144
|
+
console.log('Código:', country.code)
|
|
145
|
+
console.log('País:', country.country)
|
|
146
|
+
console.log('Bandera:', country.flag)
|
|
147
|
+
console.log('Código ISO:', country.country_code)
|
|
148
|
+
}}
|
|
149
|
+
/>
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
### `styleOverrides` (opcional)
|
|
153
|
+
Objeto con estilos CSS en línea para personalizar el botón principal.
|
|
154
|
+
|
|
155
|
+
**Tipo:** `Partial<Record<string, string>>`
|
|
156
|
+
|
|
157
|
+
```tsx
|
|
158
|
+
<TelpickReact
|
|
159
|
+
styleOverrides={{
|
|
160
|
+
padding: '12px 16px',
|
|
161
|
+
fontSize: '16px',
|
|
162
|
+
backgroundColor: '#f0f0f0'
|
|
163
|
+
}}
|
|
164
|
+
/>
|
|
165
|
+
```
|
|
166
|
+
|
|
167
|
+
## Personalización
|
|
168
|
+
|
|
169
|
+
Puedes personalizar los estilos usando variables CSS:
|
|
170
|
+
|
|
171
|
+
```css
|
|
172
|
+
:root {
|
|
173
|
+
--telpick-bg: #ffffff;
|
|
174
|
+
--telpick-border: #e5e7eb;
|
|
175
|
+
--telpick-radius: 12px;
|
|
176
|
+
--telpick-flag-size: 24px;
|
|
177
|
+
--telpick-font-size: 14px;
|
|
178
|
+
--telpick-selected-bg: #eff6ff;
|
|
179
|
+
--telpick-selected-border: #3b82f6;
|
|
180
|
+
--telpick-selected-shadow: 2px 0 4px rgba(59, 130, 246, 0.3);
|
|
181
|
+
--telpick-selected-text: #1f2937;
|
|
182
|
+
--telpick-text: #1f2937;
|
|
183
|
+
--telpick-text-secondary: #6b7280;
|
|
184
|
+
--telpick-border-focus: #3b82f6;
|
|
185
|
+
--telpick-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
186
|
+
--telpick-font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
187
|
+
}
|
|
188
|
+
```
|
|
189
|
+
|
|
190
|
+
## Interfaz CountryCode
|
|
191
|
+
|
|
192
|
+
```typescript
|
|
193
|
+
interface CountryCode {
|
|
194
|
+
country_code: string // Código ISO 3166-1 alpha-2 (ej: "ES", "US")
|
|
195
|
+
flag: string // URL de la bandera del país
|
|
196
|
+
country: string // Nombre del país (ej: "España", "United States")
|
|
197
|
+
code: string // Código telefónico (ej: "+34", "+1")
|
|
198
|
+
}
|
|
199
|
+
```
|
|
200
|
+
|
|
201
|
+
## Licencia
|
|
202
|
+
|
|
203
|
+
MIT
|
|
204
|
+
|
|
205
|
+
---
|
|
206
|
+
|
|
207
|
+
## Creado por
|
|
208
|
+
|
|
209
|
+
**Julio Almiro**
|
|
210
|
+
|
|
211
|
+
- Sitio web: [julioalmiro.com](https://julioalmiro.com)
|
|
212
|
+
- GitHub: [@julioalmirooficial](https://github.com/julioalmirooficial)
|
|
213
|
+
- Email: almiror.info@gmail.com
|
|
214
|
+
|
|
215
|
+
## Donaciones
|
|
216
|
+
|
|
217
|
+
Si este proyecto te ha sido útil, considera hacer una donación para apoyar su desarrollo y mantenimiento continuo.
|
|
218
|
+
|
|
219
|
+
<div align="center">
|
|
220
|
+
|
|
221
|
+
[](https://www.paypal.me/almiror)
|
|
222
|
+
|
|
223
|
+
</div>
|
package/README.md
CHANGED
|
@@ -1,23 +1,31 @@
|
|
|
1
1
|
# Telpick
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Multi-platform country and phone code selector with a modern design, smooth animations, and automatic IP detection.
|
|
4
4
|
|
|
5
5
|
[](https://www.npmjs.com/package/telpick)
|
|
6
6
|
[](https://opensource.org/licenses/MIT)
|
|
7
7
|
[](https://www.npmjs.com/package/telpick)
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
**English** | [Español](README.es.md)
|
|
10
10
|
|
|
11
|
-
|
|
12
|
-
- Detección automática del país por IP (múltiples servicios de fallback)
|
|
13
|
-
- Compatible con Vue 3, React y Vanilla JavaScript
|
|
14
|
-
- Personalizable mediante variables CSS
|
|
15
|
-
- Accesible con atributos ARIA
|
|
16
|
-
- Diseño responsive
|
|
17
|
-
- Búsqueda integrada de países
|
|
18
|
-
- Ligero y sin dependencias pesadas
|
|
11
|
+
## Try the demo
|
|
19
12
|
|
|
20
|
-
|
|
13
|
+
You can try the interactive demo online:
|
|
14
|
+
|
|
15
|
+
**[→ Open demo (GitHub Pages)](https://julioalmirooficial.github.io/telpick/)**
|
|
16
|
+
|
|
17
|
+
## Features
|
|
18
|
+
|
|
19
|
+
- Modern design with smooth animations
|
|
20
|
+
- Automatic country detection by IP (multiple fallback services)
|
|
21
|
+
- Compatible with Vue 3, React, and Vanilla JavaScript
|
|
22
|
+
- Customizable via CSS variables
|
|
23
|
+
- Accessible with ARIA attributes
|
|
24
|
+
- Responsive design
|
|
25
|
+
- Built-in country search
|
|
26
|
+
- Lightweight with no heavy dependencies
|
|
27
|
+
|
|
28
|
+
## Installation
|
|
21
29
|
|
|
22
30
|
### npm
|
|
23
31
|
```bash
|
|
@@ -40,7 +48,7 @@ yarn add telpick
|
|
|
40
48
|
<script src="https://unpkg.com/telpick@latest/dist/telpick.umd.js"></script>
|
|
41
49
|
```
|
|
42
50
|
|
|
43
|
-
##
|
|
51
|
+
## Usage
|
|
44
52
|
|
|
45
53
|
### React
|
|
46
54
|
|
|
@@ -56,7 +64,7 @@ function App() {
|
|
|
56
64
|
<TelpickReact
|
|
57
65
|
code={null}
|
|
58
66
|
onChange={(country) => {
|
|
59
|
-
console.log('
|
|
67
|
+
console.log('Selected country:', country)
|
|
60
68
|
setSelectedCountry(country)
|
|
61
69
|
}}
|
|
62
70
|
/>
|
|
@@ -82,7 +90,7 @@ import 'telpick/dist/style.css'
|
|
|
82
90
|
const selectedCode = ref(null)
|
|
83
91
|
|
|
84
92
|
const handleCountryChange = (country) => {
|
|
85
|
-
console.log('
|
|
93
|
+
console.log('Selected country:', country)
|
|
86
94
|
selectedCode.value = country.country_code
|
|
87
95
|
}
|
|
88
96
|
</script>
|
|
@@ -104,7 +112,7 @@ const handleCountryChange = (country) => {
|
|
|
104
112
|
const telpick = new Telpick({
|
|
105
113
|
code: null,
|
|
106
114
|
onChange: (country) => {
|
|
107
|
-
console.log('
|
|
115
|
+
console.log('Selected country:', country)
|
|
108
116
|
}
|
|
109
117
|
})
|
|
110
118
|
telpick.init(document.getElementById('telpick-container'))
|
|
@@ -115,36 +123,36 @@ const handleCountryChange = (country) => {
|
|
|
115
123
|
|
|
116
124
|
## Props
|
|
117
125
|
|
|
118
|
-
### `code` (
|
|
119
|
-
|
|
126
|
+
### `code` (optional)
|
|
127
|
+
Initial country code (ISO 3166-1 alpha-2). If `null`, it is detected automatically by IP.
|
|
120
128
|
|
|
121
|
-
**
|
|
122
|
-
**
|
|
129
|
+
**Type:** `string | null`
|
|
130
|
+
**Default:** `null`
|
|
123
131
|
|
|
124
132
|
```tsx
|
|
125
133
|
<TelpickReact code="ES" onChange={handleChange} />
|
|
126
134
|
```
|
|
127
135
|
|
|
128
|
-
### `onChange` (
|
|
129
|
-
Callback
|
|
136
|
+
### `onChange` (optional)
|
|
137
|
+
Callback fired when the user selects a country.
|
|
130
138
|
|
|
131
|
-
**
|
|
139
|
+
**Type:** `(country: CountryCode) => void`
|
|
132
140
|
|
|
133
141
|
```tsx
|
|
134
142
|
<TelpickReact
|
|
135
143
|
onChange={(country) => {
|
|
136
|
-
console.log('
|
|
137
|
-
console.log('
|
|
138
|
-
console.log('
|
|
139
|
-
console.log('
|
|
144
|
+
console.log('Code:', country.code)
|
|
145
|
+
console.log('Country:', country.country)
|
|
146
|
+
console.log('Flag:', country.flag)
|
|
147
|
+
console.log('ISO code:', country.country_code)
|
|
140
148
|
}}
|
|
141
149
|
/>
|
|
142
150
|
```
|
|
143
151
|
|
|
144
|
-
### `styleOverrides` (
|
|
145
|
-
|
|
152
|
+
### `styleOverrides` (optional)
|
|
153
|
+
Object of inline CSS styles to customize the main button.
|
|
146
154
|
|
|
147
|
-
**
|
|
155
|
+
**Type:** `Partial<Record<string, string>>`
|
|
148
156
|
|
|
149
157
|
```tsx
|
|
150
158
|
<TelpickReact
|
|
@@ -156,9 +164,9 @@ Objeto con estilos CSS en línea para personalizar el botón principal.
|
|
|
156
164
|
/>
|
|
157
165
|
```
|
|
158
166
|
|
|
159
|
-
##
|
|
167
|
+
## Customization
|
|
160
168
|
|
|
161
|
-
|
|
169
|
+
You can customize styles using CSS variables:
|
|
162
170
|
|
|
163
171
|
```css
|
|
164
172
|
:root {
|
|
@@ -179,34 +187,34 @@ Puedes personalizar los estilos usando variables CSS:
|
|
|
179
187
|
}
|
|
180
188
|
```
|
|
181
189
|
|
|
182
|
-
##
|
|
190
|
+
## CountryCode interface
|
|
183
191
|
|
|
184
192
|
```typescript
|
|
185
193
|
interface CountryCode {
|
|
186
|
-
country_code: string //
|
|
187
|
-
flag: string //
|
|
188
|
-
country: string //
|
|
189
|
-
code: string
|
|
194
|
+
country_code: string // ISO 3166-1 alpha-2 code (e.g. "ES", "US")
|
|
195
|
+
flag: string // Country flag URL
|
|
196
|
+
country: string // Country name (e.g. "Spain", "United States")
|
|
197
|
+
code: string // Phone code (e.g. "+34", "+1")
|
|
190
198
|
}
|
|
191
199
|
```
|
|
192
200
|
|
|
193
|
-
##
|
|
201
|
+
## License
|
|
194
202
|
|
|
195
203
|
MIT
|
|
196
204
|
|
|
197
205
|
---
|
|
198
206
|
|
|
199
|
-
##
|
|
207
|
+
## Created by
|
|
200
208
|
|
|
201
209
|
**Julio Almiro**
|
|
202
210
|
|
|
203
|
-
-
|
|
211
|
+
- Website: [julioalmiro.com](https://julioalmiro.com)
|
|
204
212
|
- GitHub: [@julioalmirooficial](https://github.com/julioalmirooficial)
|
|
205
213
|
- Email: almiror.info@gmail.com
|
|
206
214
|
|
|
207
|
-
##
|
|
215
|
+
## Donate
|
|
208
216
|
|
|
209
|
-
|
|
217
|
+
If this project has been useful to you, consider donating to support its development and maintenance.
|
|
210
218
|
|
|
211
219
|
<div align="center">
|
|
212
220
|
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "telpick",
|
|
3
|
-
"version": "1.0.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "1.0.2",
|
|
4
|
+
"description": "Multi-platform country and phone code selector with a modern design, smooth animations, and automatic IP detection.",
|
|
5
5
|
"main": "dist/telpick.umd.js",
|
|
6
6
|
"module": "dist/telpick.esm.js",
|
|
7
7
|
"types": "dist/telpick.d.ts",
|
|
@@ -29,10 +29,13 @@
|
|
|
29
29
|
"dist",
|
|
30
30
|
"src",
|
|
31
31
|
"README.md",
|
|
32
|
+
"README.es.md",
|
|
32
33
|
"LICENSE"
|
|
33
34
|
],
|
|
34
35
|
"scripts": {
|
|
35
36
|
"build": "vite build",
|
|
37
|
+
"build:demo": "vite build --config vite.config.demo.js",
|
|
38
|
+
"deploy:demo": "npm run build:demo && gh-pages -d docs",
|
|
36
39
|
"dev": "vite",
|
|
37
40
|
"prepublishOnly": "npm run build",
|
|
38
41
|
"test": "jest"
|
|
@@ -80,6 +83,7 @@
|
|
|
80
83
|
}
|
|
81
84
|
},
|
|
82
85
|
"devDependencies": {
|
|
86
|
+
"gh-pages": "^6.1.1",
|
|
83
87
|
"vite": "^4.0.0",
|
|
84
88
|
"typescript": "^5.0.0",
|
|
85
89
|
"vue": "^3.0.0",
|
package/src/demo-init.js
ADDED
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Demo init: carga Telpick y monta el Interactive Demo.
|
|
3
|
+
* Así Telpick está disponible cuando se ejecuta el init (evita race con el script inline).
|
|
4
|
+
*/
|
|
5
|
+
import Telpick from './telpick.js'
|
|
6
|
+
|
|
7
|
+
window.Telpick = Telpick
|
|
8
|
+
|
|
9
|
+
function initDemo() {
|
|
10
|
+
const container = document.getElementById('telpick-container')
|
|
11
|
+
if (!container) return
|
|
12
|
+
|
|
13
|
+
const telpick = new Telpick({
|
|
14
|
+
code: null,
|
|
15
|
+
onChange: (country) => {
|
|
16
|
+
const infoEl = document.getElementById('selected-info')
|
|
17
|
+
if (infoEl) {
|
|
18
|
+
document.getElementById('selected-code').textContent = country.code
|
|
19
|
+
document.getElementById('selected-country').textContent = country.country
|
|
20
|
+
document.getElementById('selected-phone').textContent = country.code
|
|
21
|
+
document.getElementById('selected-iso').textContent = country.country_code
|
|
22
|
+
infoEl.classList.add('active')
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
styleOverrides: {}
|
|
26
|
+
})
|
|
27
|
+
telpick.init(container)
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
if (document.readyState === 'loading') {
|
|
31
|
+
document.addEventListener('DOMContentLoaded', initDemo)
|
|
32
|
+
} else {
|
|
33
|
+
initDemo()
|
|
34
|
+
}
|