@tmsoft/webphone 1.0.26 → 1.1.9

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.
Files changed (10) hide show
  1. package/README.md +13 -82
  2. package/dist/favicon.ico +0 -0
  3. package/dist/index.d.ts +55 -0
  4. package/dist/webphone.cjs.js +76 -0
  5. package/dist/webphone.es.js +11166 -0
  6. package/dist/webphone.umd.js +1700 -0
  7. package/package.json +23 -35
  8. package/dist/webphone-web-component.cjs.js +0 -1702
  9. package/dist/webphone-web-component.es.js +0 -24080
  10. package/dist/webphone-web-component.umd.js +0 -1702
package/README.md CHANGED
@@ -17,114 +17,45 @@
17
17
 
18
18
  ## 🚀 **Instalación**
19
19
 
20
- ### 📦 Desde NPM
20
+ En NPM:
21
21
 
22
- ```bash
22
+ ```sh
23
23
  npm install @tmsoft/webphone
24
24
  ```
25
25
 
26
- ```bash
27
- yarn add @tmsoft/webphone
28
- ```
26
+ En Yarn:
29
27
 
30
- ```bash
31
- pnpm add @tmsoft/webphone
28
+ ```sh
29
+ yarn add @tmsoft/webphone
32
30
  ```
33
31
 
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>
32
+ En PNPM:
39
33
 
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>
34
+ ```sh
35
+ pnpm add @tmsoft/webphone
42
36
  ```
43
37
 
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
-
54
38
  ---
55
39
 
56
40
  ## 🛠 **Uso**
57
41
 
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
- ```
42
+ En una aplicación Vue, se puede importar y utilizar de la siguiente manera:
70
43
 
71
44
  ```vue
72
- <!-- MyComponent.vue -->
73
- <template>
74
- <WebPhone
75
- :extension="extension"
76
- :password="password"
77
- :domain="domain"
78
- mode="call"
79
- />
80
- </template>
81
-
82
45
  <script setup lang="ts">
83
46
  import { ref } from 'vue'
47
+ import WebPhone from '@tmsoft/webphone'
84
48
 
85
49
  const extension = ref('1001')
86
50
  const password = ref('supersecret')
87
51
  const domain = ref('sip.example.com')
88
52
  </script>
89
- ```
90
-
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>
110
- ```
111
-
112
- ### 📦 En otros frameworks
113
53
 
114
- ```javascript
115
- // React, Angular, Svelte, etc.
116
- import '@tmsoft/webphone/web-component'
117
-
118
- // Ahora puedes usar <web-phone> en cualquier template
54
+ <template>
55
+ <WebPhone :extension="extension" :password="password" :domain="domain" />
56
+ </template>
119
57
  ```
120
58
 
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
-
128
59
  ---
129
60
 
130
61
  ## 📌 **Props del Componente**
package/dist/favicon.ico CHANGED
Binary file
package/dist/index.d.ts ADDED
@@ -0,0 +1,55 @@
1
+ import { App } from 'vue';
2
+ import { ComponentOptionsMixin } from 'vue';
3
+ import { ComponentProvideOptions } from 'vue';
4
+ import { DefineComponent } from 'vue';
5
+ import { PublicProps } from 'vue';
6
+
7
+ declare const __VLS_component: DefineComponent<WebphoneProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<WebphoneProps> & Readonly<{}>, {
8
+ mode: "webcall" | "call" | "video";
9
+ }, {}, {}, {}, string, ComponentProvideOptions, false, {
10
+ playerRef: HTMLAudioElement;
11
+ ringerRef: HTMLAudioElement;
12
+ backRingerRef: HTMLAudioElement;
13
+ viewerRef: HTMLVideoElement;
14
+ selfViewerRef: HTMLVideoElement;
15
+ }, HTMLDivElement>;
16
+
17
+ declare function __VLS_template(): {
18
+ attrs: Partial<{}>;
19
+ slots: {
20
+ 'back-button'?(_: {}): any;
21
+ };
22
+ refs: {
23
+ playerRef: HTMLAudioElement;
24
+ ringerRef: HTMLAudioElement;
25
+ backRingerRef: HTMLAudioElement;
26
+ viewerRef: HTMLVideoElement;
27
+ selfViewerRef: HTMLVideoElement;
28
+ };
29
+ rootEl: HTMLDivElement;
30
+ };
31
+
32
+ declare type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
33
+
34
+ declare type __VLS_WithTemplateSlots<T, S> = T & {
35
+ new (): {
36
+ $slots: S;
37
+ };
38
+ };
39
+
40
+ declare function install(app: App): void;
41
+ export default install;
42
+
43
+ export declare const WebPhone: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
44
+
45
+ declare interface WebphoneProps {
46
+ extension: string;
47
+ password: string;
48
+ domain: string;
49
+ mode: 'webcall' | 'call' | 'video';
50
+ image?: string;
51
+ to?: string;
52
+ callback?: (event: MouseEvent) => void;
53
+ }
54
+
55
+ export { }