@tmsoft/webphone 1.0.24 → 1.0.27

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 (13) hide show
  1. package/README.md +82 -13
  2. package/dist/index.d.ts +6 -31
  3. package/dist/webphone-standalone.cjs.js +1702 -0
  4. package/dist/webphone-standalone.es.js +24083 -0
  5. package/dist/{webphone.iife.js → webphone-standalone.iife.js} +44 -44
  6. package/dist/webphone-standalone.umd.js +1702 -0
  7. package/dist/webphone-web-component.cjs.js +1702 -0
  8. package/dist/webphone-web-component.es.js +24080 -0
  9. package/dist/webphone-web-component.umd.js +1702 -0
  10. package/dist/webphone.cjs.js +52 -52
  11. package/dist/webphone.es.js +2906 -2893
  12. package/dist/webphone.umd.js +52 -52
  13. package/package.json +26 -7
package/README.md CHANGED
@@ -17,45 +17,114 @@
17
17
 
18
18
  ## 🚀 **Instalación**
19
19
 
20
- En NPM:
20
+ ### 📦 Desde NPM
21
21
 
22
- ```sh
22
+ ```bash
23
23
  npm install @tmsoft/webphone
24
24
  ```
25
25
 
26
- En Yarn:
27
-
28
- ```sh
26
+ ```bash
29
27
  yarn add @tmsoft/webphone
30
28
  ```
31
29
 
32
- En PNPM:
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 una aplicación Vue, se puede importar y utilizar de la siguiente manera:
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
- <template>
55
- <WebPhone :extension="extension" :password="password" :domain="domain" />
56
- </template>
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**
package/dist/index.d.ts CHANGED
@@ -7,6 +7,7 @@ import { ComponentProvideOptions } from 'vue';
7
7
  import { ComputedRef } from 'vue';
8
8
  import { DefineComponent } from 'vue';
9
9
  import { DefineComponent as DefineComponent_2 } from '@primevue/core';
10
+ import { defineCustomElement } from 'vue';
10
11
  import { DialogProps } from 'primevue/dialog';
11
12
  import { DialogSlots } from 'primevue/dialog';
12
13
  import { ExtractPropTypes } from 'vue';
@@ -30,6 +31,8 @@ import { VueElementConstructor } from 'vue';
30
31
 
31
32
  export declare function configurePrimeVue(app: App): void;
32
33
 
34
+ export declare function createWebphoneElement(): ReturnType<typeof defineCustomElement>;
35
+
33
36
  export declare function install(app: App, options?: {
34
37
  configurePrimeVue?: boolean;
35
38
  }): void;
@@ -46,6 +49,8 @@ export declare const primeVueConfig: {
46
49
  };
47
50
  };
48
51
 
52
+ export declare function registerCustomElement(): VueElementConstructor<unknown>;
53
+
49
54
  export declare const WebPhone: DefineComponent<ExtractPropTypes< {
50
55
  extension: {
51
56
  type: StringConstructor;
@@ -264,36 +269,6 @@ KeyboardDeleteIcon: FunctionalComponent<SVGAttributes, {}, any, {}>;
264
269
  NebulaIcon: FunctionalComponent<SVGAttributes, {}, any, {}>;
265
270
  }, {}, string, ComponentProvideOptions, true, {}, any>;
266
271
 
267
- export declare const WebphoneElement: VueElementConstructor<ExtractPropTypes< {
268
- extension: {
269
- type: StringConstructor;
270
- required: true;
271
- };
272
- password: {
273
- type: StringConstructor;
274
- required: true;
275
- };
276
- domain: {
277
- type: StringConstructor;
278
- required: true;
279
- };
280
- mode: {
281
- type: StringConstructor;
282
- default: string;
283
- validator: (value: string) => boolean;
284
- };
285
- image: {
286
- type: StringConstructor;
287
- required: false;
288
- };
289
- to: {
290
- type: StringConstructor;
291
- required: false;
292
- };
293
- callback: {
294
- type: PropType<(event: MouseEvent) => void>;
295
- required: false;
296
- };
297
- }>>;
272
+ export declare const WebphoneElement: ReturnType<typeof defineCustomElement>;
298
273
 
299
274
  export { }