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