@tmsoft/webphone 1.0.24 → 1.0.26
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.
- package/README.md +82 -13
- package/dist/{webphone.cjs.js → webphone-web-component.cjs.js} +51 -51
- package/dist/{webphone.es.js → webphone-web-component.es.js} +2177 -2173
- package/dist/{webphone.umd.js → webphone-web-component.umd.js} +51 -51
- package/package.json +25 -7
- package/dist/index.d.ts +0 -299
- package/dist/webphone.iife.js +0 -1702
package/README.md
CHANGED
|
@@ -17,45 +17,114 @@
|
|
|
17
17
|
|
|
18
18
|
## 🚀 **Instalación**
|
|
19
19
|
|
|
20
|
-
|
|
20
|
+
### 📦 Desde NPM
|
|
21
21
|
|
|
22
|
-
```
|
|
22
|
+
```bash
|
|
23
23
|
npm install @tmsoft/webphone
|
|
24
24
|
```
|
|
25
25
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
```sh
|
|
26
|
+
```bash
|
|
29
27
|
yarn add @tmsoft/webphone
|
|
30
28
|
```
|
|
31
29
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
```sh
|
|
30
|
+
```bash
|
|
35
31
|
pnpm add @tmsoft/webphone
|
|
36
32
|
```
|
|
37
33
|
|
|
34
|
+
### 🌐 Desde CDN (Sin instalación)
|
|
35
|
+
|
|
36
|
+
```html
|
|
37
|
+
<!-- Registro automático del web component -->
|
|
38
|
+
<script src="https://unpkg.com/@tmsoft/webphone@latest/dist/webphone-standalone.umd.js"></script>
|
|
39
|
+
|
|
40
|
+
<!-- O versión específica para producción -->
|
|
41
|
+
<script src="https://unpkg.com/@tmsoft/webphone@1.0.23/dist/webphone-standalone.umd.js"></script>
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
### 📋 Archivos de distribución disponibles
|
|
45
|
+
|
|
46
|
+
| Archivo | Propósito | Formato | Registro automático |
|
|
47
|
+
|---------|-----------|---------|-------------------|
|
|
48
|
+
| `webphone.es.js` | Componente Vue | ES Module | ❌ |
|
|
49
|
+
| `webphone.umd.js` | Componente Vue | UMD | ❌ |
|
|
50
|
+
| `webphone-standalone.umd.js` | Web Component | UMD | ✅ |
|
|
51
|
+
| `webphone-standalone.iife.js` | Web Component | IIFE | ✅ |
|
|
52
|
+
| `webphone-web-component.es.js` | Web Component | ES Module | ❌ |
|
|
53
|
+
|
|
38
54
|
---
|
|
39
55
|
|
|
40
56
|
## 🛠 **Uso**
|
|
41
57
|
|
|
42
|
-
En
|
|
58
|
+
### 🎯 En aplicaciones Vue
|
|
59
|
+
|
|
60
|
+
```typescript
|
|
61
|
+
// main.ts
|
|
62
|
+
import { createApp } from 'vue'
|
|
63
|
+
import { install as installWebPhone } from '@tmsoft/webphone'
|
|
64
|
+
import App from './App.vue'
|
|
65
|
+
|
|
66
|
+
const app = createApp(App)
|
|
67
|
+
app.use(installWebPhone) // Registra el componente globalmente
|
|
68
|
+
app.mount('#app')
|
|
69
|
+
```
|
|
43
70
|
|
|
44
71
|
```vue
|
|
72
|
+
<!-- MyComponent.vue -->
|
|
73
|
+
<template>
|
|
74
|
+
<WebPhone
|
|
75
|
+
:extension="extension"
|
|
76
|
+
:password="password"
|
|
77
|
+
:domain="domain"
|
|
78
|
+
mode="call"
|
|
79
|
+
/>
|
|
80
|
+
</template>
|
|
81
|
+
|
|
45
82
|
<script setup lang="ts">
|
|
46
83
|
import { ref } from 'vue'
|
|
47
|
-
import WebPhone from '@tmsoft/webphone'
|
|
48
84
|
|
|
49
85
|
const extension = ref('1001')
|
|
50
86
|
const password = ref('supersecret')
|
|
51
87
|
const domain = ref('sip.example.com')
|
|
52
88
|
</script>
|
|
89
|
+
```
|
|
53
90
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
91
|
+
### 🌐 Como Web Component (Cualquier framework)
|
|
92
|
+
|
|
93
|
+
```html
|
|
94
|
+
<!DOCTYPE html>
|
|
95
|
+
<html>
|
|
96
|
+
<head>
|
|
97
|
+
<!-- Cargar desde CDN -->
|
|
98
|
+
<script src="https://unpkg.com/@tmsoft/webphone@latest/dist/webphone-standalone.umd.js"></script>
|
|
99
|
+
</head>
|
|
100
|
+
<body>
|
|
101
|
+
<!-- Usar directamente en HTML -->
|
|
102
|
+
<web-phone
|
|
103
|
+
extension="1001"
|
|
104
|
+
password="supersecret"
|
|
105
|
+
domain="sip.example.com"
|
|
106
|
+
mode="call">
|
|
107
|
+
</web-phone>
|
|
108
|
+
</body>
|
|
109
|
+
</html>
|
|
57
110
|
```
|
|
58
111
|
|
|
112
|
+
### 📦 En otros frameworks
|
|
113
|
+
|
|
114
|
+
```javascript
|
|
115
|
+
// React, Angular, Svelte, etc.
|
|
116
|
+
import '@tmsoft/webphone/web-component'
|
|
117
|
+
|
|
118
|
+
// Ahora puedes usar <web-phone> en cualquier template
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
## 📚 **Documentación Detallada**
|
|
122
|
+
|
|
123
|
+
- 📖 [**NPM_USAGE.md**](./NPM_USAGE.md) - Guía completa de uso desde NPM con CDN y diferentes frameworks
|
|
124
|
+
- 🔧 [**USAGE_EXAMPLES.md**](./USAGE_EXAMPLES.md) - Ejemplos prácticos y casos de uso específicos
|
|
125
|
+
- 📋 [**src/lib/webphone/README.md**](./src/lib/webphone/README.md) - Documentación técnica de la librería
|
|
126
|
+
- 🌐 [**example-cdn.html**](./example-cdn.html) - Demo en vivo usando CDN
|
|
127
|
+
|
|
59
128
|
---
|
|
60
129
|
|
|
61
130
|
## 📌 **Props del Componente**
|