@tmsoft/webphone 1.1.9 → 1.1.10

package/README.md

@@ -1,54 +1,82 @@
-# **📞 WebPhone Library (`@tmsoft/webphone`)**
+# WebPhone Library (`@tmsoft/webphone`)
 
 [![NPM Version](https://img.shields.io/npm/v/@tmsoft/webphone)](https://www.npmjs.com/package/@tmsoft/webphone)
-[![License](https://img.shields.io/npm/l/@tmsoft/webphone)](LICENSE)
 
-**`@tmsoft/webphone`** es una librería Vue 3 que proporciona un componente de teléfono web basado en SIP con soporte para llamadas WebRTC.
+Librería para Vue 3 con un componente `WebPhone` (softphone) basado en SIP y WebRTC. Incluye teclado DTMF, selección de dispositivos de audio, control de volúmenes y estado de conexión.
 
-## 📌 **Características**
 
-- 📡 Soporte para SIP y WebRTC
-- 🎨 Integrado con PrimeVue y TailwindCSS
-- 📞 Gestión de dispositivos de audio (micrófono y altavoz)
-- 🔄 Mecanismo de reconexión SIP
-- 🛠 Fácil integración en cualquier proyecto Vue 3
+### Características
+- Integración SIP sobre WebSocket (basado en JsSIP)
+- Audio WebRTC con manejo de permisos de micrófono
+- Teclado DTMF y estado de llamada (entrante/saliente/en curso)
+- Gestión de dispositivos de audio (micrófonos y altavoces)
+- Reconexión y manejo de estado SIP
+- Diseño compacto y dependencias UI mínimas (PrimeVue para botones/inputs)
 
----
 
-## 🚀 **Instalación**
+### Requisitos
+- Vue 3.5+
+- PrimeVue 4.x y PrimeIcons 7.x (peer dependencies)
+- @vueuse/core 13.x (peer dependency)
+- Servidor SIP con WebSocket habilitado (por ejemplo, Asterisk en `/asterisk/ws`, puerto 8089 por defecto)
+- Navegador con HTTPS y permisos de micrófono
 
-En NPM:
 
-```sh
-npm install @tmsoft/webphone
-```
+## Instalación
 
-En Yarn:
+Instale el paquete y los peer dependencies:
 
 ```sh
-yarn add @tmsoft/webphone
+npm install @tmsoft/webphone primevue primeicons @vueuse/core
+# o
+yarn add @tmsoft/webphone primevue primeicons @vueuse/core
+# o
+pnpm add @tmsoft/webphone primevue primeicons @vueuse/core
 ```
 
-En PNPM:
+Los estilos del componente se inyectan automáticamente en tiempo de ejecución. No es necesario configurar Tailwind en su proyecto para usar esta librería.
 
-```sh
-pnpm add @tmsoft/webphone
+
+## Uso
+
+Puede utilizar la librería como plugin global o importar el componente localmente.
+
+### Opción A: Plugin global
+`main.ts`:
+
+```ts
+import { createApp } from 'vue'
+import App from './App.vue'
+import WebphonePlugin from '@tmsoft/webphone'
+
+const app = createApp(App)
+app.use(WebphonePlugin)
+app.mount('#app')
 ```
 
----
+Luego, en cualquier componente:
 
-## 🛠 **Uso**
+```vue
+<script setup lang="ts">
+const extension = '1001'
+const password = 'supersecret'
+const domain = 'sip.example.com' // ver normalización de dominio más abajo
+</script>
+
+<template>
+  <WebPhone :extension="extension" :password="password" :domain="domain" />
+</template>
+```
 
-En una aplicación Vue, se puede importar y utilizar de la siguiente manera:
+### Opción B: Importación local del componente
 
 ```vue
 <script setup lang="ts">
-import { ref } from 'vue'
-import WebPhone from '@tmsoft/webphone'
+import { WebPhone } from '@tmsoft/webphone'
 
-const extension = ref('1001')
-const password = ref('supersecret')
-const domain = ref('sip.example.com')
+const extension = '1001'
+const password = 'supersecret'
+const domain = 'sip.example.com'
 </script>
 
 <template>
@@ -56,91 +84,132 @@ const domain = ref('sip.example.com')
 </template>
 ```
 
----
 
-## 📌 **Props del Componente**
+## API del componente
 
-| Propiedad   | Tipo       | Requerida | Descripción                                                                       |
-| ----------- | ---------- | --------- | --------------------------------------------------------------------------------- |
-| `extension` | `String`   | ✅        | Número de extensión del usuario.                                                  |
-| `password`  | `String`   | ✅        | Contraseña SIP de la extensión.                                                   |
-| `domain`    | `String`   | ✅        | Dominio del servidor SIP.                                                         |
-| `mode`      | `String`   | ❌        | Tipo de llamada. Valores: `'call'`, `'webcall'`, `'video'`. Por defecto `'call'`. |
-| `image`     | `String`   | ❌        | Imagen base64 o URL para mostrar en modo `webcall`.                               |
-| `to`        | `String`   | ❌        | Número de destino en modo `webcall`.                                              |
-| `callback`  | `Function` | ❌        | Función de volver atrás en modo `webcall`.                                        |
+### Props
 
----
+| Propiedad   | Tipo                                 | Requerida | Default   | Descripción |
+|------------|--------------------------------------|-----------|-----------|-------------|
+| `extension`| `string`                              | Sí        | —         | Extensión del usuario para registrar y originar llamadas SIP. |
+| `password` | `string`                              | Sí        | —         | Contraseña SIP de la extensión. |
+| `domain`   | `string`                              | Sí        | —         | Dominio o URL del servidor SIP. Se normaliza automáticamente (ver detalle). |
+| `mode`     | `'webcall' \| 'call' \| 'video'`     | No        | `'webcall'` | Modo de uso. Nota: `video` aún no inicia video de forma automática. |
+| `image`    | `string`                              | No        | —         | URL o base64 para mostrar un logotipo en modo `webcall`. |
+| `to`       | `string`                              | No        | —         | Número destino en modo `webcall`. Si se define, se origina la llamada automáticamente cuando el registro SIP está activo (≈ 2 s). |
+| `callback` | `(event: MouseEvent) => void`         | No        | —         | Reservado. Actualmente no se utiliza en el componente. |
 
-## 🏗 **Construcción del Paquete**
 
-Para compilar el paquete, ejecutar:
+### Normalización de `domain`
+El componente acepta distintos formatos y construye automáticamente la URL WebSocket para SIP:
+- Si recibe solo host (por ejemplo, `pbx.midominio.com`), se asume `wss://pbx.midominio.com:8089/asterisk/ws`.
+- Si recibe `http://host[:puerto]` se usa `ws://host[:puerto]/asterisk/ws`.
+- Si recibe `https://host[:puerto]` se usa `wss://host[:puerto]/asterisk/ws`.
+- Si indica explícitamente un puerto, se respeta (de lo contrario, se usa 8089 por defecto para Asterisk).
 
-```sh
-npm run build
-```
+Además, el URI SIP se compone como `sip:<extension>@<host[:puerto]>`.
 
-Esto generará los archivos de distribución en `dist/` con los siguientes formatos:
 
-- **UMD** (`webphone.umd.js`) → Para navegadores y CDNs.
-- **ES Module** (`webphone.es.js`) → Para importación moderna.
-- **CommonJS** (`webphone.cjs.js`) → Para entornos Node.js.
+### Slots
+- `back-button`: slot para renderizar un control de navegación en la cabecera cuando `mode === 'webcall'`.
 
----
 
-## 🌎 **Uso en CDN**
+## Uso via CDN
 
-Para cargar la librería directamente en una página sin instalar NPM, usar un CDN como [jsDelivr](https://www.jsdelivr.com/):
+### ES Module (recomendado)
 
 ```html
 <script type="module">
-  import WebPhone from 'https://cdn.jsdelivr.net/npm/@tmsoft/webphone/dist/webphone.es.js'
+  import { createApp } from 'vue'
+  import WebphonePlugin from 'https://cdn.jsdelivr.net/npm/@tmsoft/webphone/dist/webphone.es.js'
+
+  const App = {
+    template: '<WebPhone extension="1001" password="supersecret" domain="sip.example.com" />'
+  }
+
+  createApp(App).use(WebphonePlugin).mount('#app')
 </script>
 ```
 
-Para UMD:
+### UMD
 
 ```html
+<!-- Vue 3 UMD -->
+<script src="https://unpkg.com/vue@3"></script>
+<!-- WebPhone UMD -->
 <script src="https://cdn.jsdelivr.net/npm/@tmsoft/webphone/dist/webphone.umd.js"></script>
+<script>
+  const app = Vue.createApp({
+    template: '<WebPhone extension="1001" password="supersecret" domain="sip.example.com" />'
+  })
+  // El paquete UMD expone 'WebPhone' como global; la función por defecto es el plugin
+  app.use(WebPhone.default)
+  app.mount('#app')
+</script>
 ```
 
----
+### Sin frameworks: Web Component (`<web-phone />`)
 
-## 📤 **Publicación en NPM**
+Para incrustar el softphone en una página HTML sin inicializar Vue ni otros frameworks, use el build UMD específico del Web Component:
 
-Para publicar una nueva versión del paquete en NPM:
-
-1️⃣ **Autenticarse en NPM**  
-Si no se ha iniciado sesión:
+```html
+<!-- Carga el Web Component listo para usar -->
+<script src="https://cdn.jsdelivr.net/npm/@tmsoft/webphone/dist/webphone-element.umd.js"></script>
 
-```sh
-npm login
+<!-- Úselo directamente en el DOM -->
+<web-phone extension="1001" password="supersecret" domain="sip.example.com" mode="webcall" to="099999999" image="https://example.com/logo.png"></web-phone>
 ```
 
-2️⃣ **Actualizar la versión en `package.json`**  
-Ejemplo: Incrementar la versión **`1.0.1` → `1.0.2`** en `package.json`:
+Notas:
+- Los atributos del elemento corresponden a las props del componente (`extension`, `password`, `domain`, `mode`, `image`, `to`).
+- El build del Web Component incluye internamente Vue, PrimeVue y estilos necesarios; no requiere inicialización adicional.
 
-```json
-{
-  "name": "@tmsoft/webphone",
-  "version": "1.0.2"
-}
-```
 
-3️⃣ **Construir el paquete**
+## Desarrollo
+
+Scripts principales:
 
 ```sh
-npm run build
+npm run dev        # entorno de desarrollo
+npm run build      # compila ESM/CJS y UMD
+npm run preview    # vista previa local de la build
+npm run test:unit  # pruebas unitarias (Vitest)
+npm run test:e2e   # pruebas E2E (Playwright)
+npm run lint       # lint con ESLint
+npm run format     # formateo con Prettier
 ```
 
-4️⃣ **Publicar el paquete en NPM**
+La salida de distribución se genera en `dist/`:
+- `webphone.es.js` (ES Module)
+- `webphone.cjs.js` (CommonJS)
+- `webphone.umd.js` (UMD)
+- `index.d.ts` (tipos TypeScript)
 
-```sh
-npm run publish:lib
-```
 
-Para publicar en un registro privado como Verdaccio:
+## Publicación en NPM
+
+Pasos sugeridos para publicar una versión:
 
+1. Autentíquese en NPM (una vez por entorno):
+   ```sh
+   npm login
+   ```
+2. Compile el paquete:
+   ```sh
+   npm run build
+   ```
+3. Publique con incremento de patch automático:
+   ```sh
+   npm run publish:lib
+   ```
+   Este script ejecuta `npm version patch` y `npm publish --access public`.
+
+Para publicar en un registro local (por ejemplo, Verdaccio):
 ```sh
 npm run publish:local
 ```
+
+
+## Licencia
+
+MIT.

package/dist/index.d.ts

@@ -1,4 +1,3 @@
-import { App } from 'vue';
 import { ComponentOptionsMixin } from 'vue';
 import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
@@ -37,9 +36,6 @@ declare type __VLS_WithTemplateSlots<T, S> = T & {
     };
 };
 
-declare function install(app: App): void;
-export default install;
-
 export declare const WebPhone: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 
 declare interface WebphoneProps {