@tmsoft/webphone 1.0.27 → 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 (14) hide show
  1. package/README.md +13 -82
  2. package/dist/favicon.ico +0 -0
  3. package/dist/index.d.ts +40 -259
  4. package/dist/webphone.cjs.js +69 -1695
  5. package/dist/webphone.es.js +10339 -23262
  6. package/dist/webphone.umd.js +253 -255
  7. package/package.json +23 -36
  8. package/dist/webphone-standalone.cjs.js +0 -1702
  9. package/dist/webphone-standalone.es.js +0 -24083
  10. package/dist/webphone-standalone.iife.js +0 -1702
  11. package/dist/webphone-standalone.umd.js +0 -1702
  12. package/dist/webphone-web-component.cjs.js +0 -1702
  13. package/dist/webphone-web-component.es.js +0 -24080
  14. 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 CHANGED
@@ -1,274 +1,55 @@
1
1
  import { App } from 'vue';
2
- import { AuraBaseDesignTokens } from '@primeuix/themes/aura/base';
3
- import { ButtonProps } from 'primevue/button';
4
- import { ButtonSlots } from 'primevue/button';
5
2
  import { ComponentOptionsMixin } from 'vue';
6
3
  import { ComponentProvideOptions } from 'vue';
7
- import { ComputedRef } from 'vue';
8
4
  import { DefineComponent } from 'vue';
9
- import { DefineComponent as DefineComponent_2 } from '@primevue/core';
10
- import { defineCustomElement } from 'vue';
11
- import { DialogProps } from 'primevue/dialog';
12
- import { DialogSlots } from 'primevue/dialog';
13
- import { ExtractPropTypes } from 'vue';
14
- import { FunctionalComponent } from 'vue';
15
- import { InputTextProps } from 'primevue/inputtext';
16
- import { InputTextSlots } from 'primevue/inputtext';
17
- import { Preset } from '@primeuix/themes/types';
18
- import { PropType } from 'vue';
19
5
  import { PublicProps } from 'vue';
20
- import { Ref } from 'vue';
21
- import { SelectChangeEvent } from 'primevue/select';
22
- import { SelectFilterEvent } from 'primevue/select';
23
- import { SelectMethods } from 'primevue/select';
24
- import { SelectProps } from 'primevue/select';
25
- import { SelectSlots } from 'primevue/select';
26
- import { SliderProps } from 'primevue/slider';
27
- import { SliderSlideEndEvent } from 'primevue/slider';
28
- import { SliderSlots } from 'primevue/slider';
29
- import { SVGAttributes } from 'vue';
30
- import { VueElementConstructor } from 'vue';
31
6
 
32
- export declare function configurePrimeVue(app: App): void;
33
-
34
- export declare function createWebphoneElement(): ReturnType<typeof defineCustomElement>;
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
+ };
35
31
 
36
- export declare function install(app: App, options?: {
37
- configurePrimeVue?: boolean;
38
- }): void;
32
+ declare type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
39
33
 
40
- export declare const primeVueConfig: {
41
- theme: {
42
- unstyled: boolean;
43
- preset: Preset<AuraBaseDesignTokens>;
44
- options: {
45
- prefix: string;
46
- darkModeSelector: string;
47
- cssLayer: boolean;
48
- };
34
+ declare type __VLS_WithTemplateSlots<T, S> = T & {
35
+ new (): {
36
+ $slots: S;
49
37
  };
50
38
  };
51
39
 
52
- export declare function registerCustomElement(): VueElementConstructor<unknown>;
40
+ declare function install(app: App): void;
41
+ export default install;
53
42
 
54
- export declare const WebPhone: DefineComponent<ExtractPropTypes< {
55
- extension: {
56
- type: StringConstructor;
57
- required: true;
58
- };
59
- password: {
60
- type: StringConstructor;
61
- required: true;
62
- };
63
- domain: {
64
- type: StringConstructor;
65
- required: true;
66
- };
67
- mode: {
68
- type: StringConstructor;
69
- default: string;
70
- validator: (value: string) => boolean;
71
- };
72
- image: {
73
- type: StringConstructor;
74
- required: false;
75
- };
76
- to: {
77
- type: StringConstructor;
78
- required: false;
79
- };
80
- callback: {
81
- type: PropType<(event: MouseEvent) => void>;
82
- required: false;
83
- };
84
- }>, {
85
- setCallVolume: (value: number | number[]) => void;
86
- validateKeydown: (event: KeyboardEvent) => void;
87
- setNotificationVolume: (value: number | number[]) => void;
88
- dtmfKeys: string[];
89
- canCall: ComputedRef<boolean | "" | undefined>;
90
- handleDTMF: (digit: string) => void;
91
- statusClass: ComputedRef<"text-[#03ac7e]" | "text-blue-400" | "text-yellow-400" | "text-red-500">;
92
- showNumpad: Ref<boolean, boolean>;
93
- toggleNumpad: () => void;
94
- audioVolumeRef: Ref<any, any>;
95
- audioDevicesRef: Ref<any, any>;
96
- toggleAudioVolume: (event: MouseEvent) => void;
97
- toggleAudioDevices: (event: MouseEvent) => void;
98
- deleteLastDigit: () => void;
99
- isWebcall: ComputedRef<boolean>;
100
- isCall: ComputedRef<boolean>;
101
- isVideo: ComputedRef<boolean>;
102
- finalPhoneNumber: ComputedRef<string | undefined>;
103
- showSettings: Ref<boolean, boolean>;
104
- microphonePermission: Ref<"granted" | "denied" | "prompt", "granted" | "denied" | "prompt">;
105
- isRequestingPermission: Ref<boolean, boolean>;
106
- requestMicrophonePermission: () => Promise<boolean>;
107
- playerRef: Ref<HTMLAudioElement | null, HTMLAudioElement | null>;
108
- ringerRef: Ref<HTMLAudioElement | null, HTMLAudioElement | null>;
109
- backRingerRef: Ref<HTMLAudioElement | null, HTMLAudioElement | null>;
110
- viewerRef: Ref<HTMLVideoElement | null, HTMLVideoElement | null>;
111
- selfViewerRef: Ref<HTMLVideoElement | null, HTMLVideoElement | null>;
112
- startSIP: () => void;
113
- stopSIP: () => void;
114
- makeCall: (to: string, hasVideo: boolean) => void;
115
- answerCall: () => void | undefined;
116
- endCall: () => void | undefined;
117
- toggleMute: () => void;
118
- microphones: Ref< {
119
- readonly deviceId: string;
120
- readonly groupId: string;
121
- readonly kind: MediaDeviceKind;
122
- readonly label: string;
123
- toJSON: () => any;
124
- }[], MediaDeviceInfo[] | {
125
- readonly deviceId: string;
126
- readonly groupId: string;
127
- readonly kind: MediaDeviceKind;
128
- readonly label: string;
129
- toJSON: () => any;
130
- }[]>;
131
- speakers: Ref< {
132
- readonly deviceId: string;
133
- readonly groupId: string;
134
- readonly kind: MediaDeviceKind;
135
- readonly label: string;
136
- toJSON: () => any;
137
- }[], MediaDeviceInfo[] | {
138
- readonly deviceId: string;
139
- readonly groupId: string;
140
- readonly kind: MediaDeviceKind;
141
- readonly label: string;
142
- toJSON: () => any;
143
- }[]>;
144
- selectedMicId: Ref<string | null, string | null>;
145
- selectedSpeakerId: Ref<string | null, string | null>;
146
- isMuted: Ref<boolean, boolean>;
147
- activeCall: Ref<boolean, boolean>;
148
- isSIPActive: Ref<boolean, boolean>;
149
- canMute: ComputedRef<boolean>;
150
- canAnswer: ComputedRef<boolean>;
151
- canHangup: ComputedRef<boolean>;
152
- canStartSIP: ComputedRef<boolean>;
153
- canStopSIP: ComputedRef<boolean>;
154
- changeMicrophone: (deviceId: string) => Promise<void>;
155
- changeSpeaker: (deviceId: string) => Promise<void>;
156
- callVolume: Ref<number, number>;
157
- notificationVolume: Ref<number, number>;
158
- setVolume: (type: "call" | "notification", volume: number) => void;
159
- isIncomingCall: Ref<boolean, boolean>;
160
- sendDTMF: (digit: string) => void;
161
- resetStates: () => void;
162
- phoneNumber: Ref<string, string>;
163
- callerId: Ref<string | null, string | null>;
164
- isRinging: Ref<boolean, boolean>;
165
- statusMessage: ComputedRef<string>;
166
- formattedCallDuration: ComputedRef<string>;
167
- callDuration: Ref<number, number>;
168
- isOutgoingCall: Ref<boolean, boolean>;
169
- checkMicrophonePermission: () => Promise<"granted" | "denied" | "prompt">;
170
- }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes< {
171
- extension: {
172
- type: StringConstructor;
173
- required: true;
174
- };
175
- password: {
176
- type: StringConstructor;
177
- required: true;
178
- };
179
- domain: {
180
- type: StringConstructor;
181
- required: true;
182
- };
183
- mode: {
184
- type: StringConstructor;
185
- default: string;
186
- validator: (value: string) => boolean;
187
- };
188
- image: {
189
- type: StringConstructor;
190
- required: false;
191
- };
192
- to: {
193
- type: StringConstructor;
194
- required: false;
195
- };
196
- callback: {
197
- type: PropType<(event: MouseEvent) => void>;
198
- required: false;
199
- };
200
- }>> & Readonly<{}>, {
201
- mode: string;
202
- }, {}, {
203
- PrimeButton: DefineComponent_2<ButtonProps, ButtonSlots, (e: string, ...args: any[]) => void>;
204
- PrimeInputText: DefineComponent_2<InputTextProps, InputTextSlots, ((e: "update:modelValue", value: string | undefined) => void) & ((e: "value-change", value: string | undefined) => void)>;
205
- WebphoneSettings: DefineComponent<ExtractPropTypes< {
206
- callVolume: NumberConstructor;
207
- notificationVolume: NumberConstructor;
208
- selectedMicId: StringConstructor;
209
- selectedSpeakerId: StringConstructor;
210
- microphones: PropType<Array<{
211
- label: string;
212
- deviceId: string;
213
- }>>;
214
- speakers: PropType<Array<{
215
- label: string;
216
- deviceId: string;
217
- }>>;
218
- }>, {
219
- showSettings: Ref<boolean, boolean>;
220
- openDialog: () => void;
221
- updateCallVolume: (value: number | number[]) => void;
222
- updateNotificationVolume: (value: number | number[]) => void;
223
- updateSelectedMic: (value: string) => void;
224
- updateSelectedSpeaker: (value: string) => void;
225
- selectedMic: ComputedRef< {
226
- label: string;
227
- deviceId: string;
228
- } | null>;
229
- selectedSpeaker: ComputedRef< {
230
- label: string;
231
- deviceId: string;
232
- } | null>;
233
- version: string;
234
- packageName: string;
235
- }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("update:callVolume" | "update:notificationVolume" | "update:selectedMicId" | "update:selectedSpeakerId")[], "update:callVolume" | "update:notificationVolume" | "update:selectedMicId" | "update:selectedSpeakerId", PublicProps, Readonly<ExtractPropTypes< {
236
- callVolume: NumberConstructor;
237
- notificationVolume: NumberConstructor;
238
- selectedMicId: StringConstructor;
239
- selectedSpeakerId: StringConstructor;
240
- microphones: PropType<Array<{
241
- label: string;
242
- deviceId: string;
243
- }>>;
244
- speakers: PropType<Array<{
245
- label: string;
246
- deviceId: string;
247
- }>>;
248
- }>> & Readonly<{
249
- "onUpdate:callVolume"?: ((...args: any[]) => any) | undefined;
250
- "onUpdate:notificationVolume"?: ((...args: any[]) => any) | undefined;
251
- "onUpdate:selectedMicId"?: ((...args: any[]) => any) | undefined;
252
- "onUpdate:selectedSpeakerId"?: ((...args: any[]) => any) | undefined;
253
- }>, {}, {}, {
254
- PrimeButton: DefineComponent_2<ButtonProps, ButtonSlots, (e: string, ...args: any[]) => void>;
255
- PrimeDialog: DefineComponent_2<DialogProps, DialogSlots, ((e: "dragend", event: Event) => void) & ((e: "dragstart", event: Event) => void) & ((e: "update:visible", value: boolean) => void) & ((e: "hide") => void) & ((e: "after-hide") => void) & ((e: "show") => void) & ((e: "maximize", event: Event) => void) & ((e: "unmaximize", event: Event) => void)>;
256
- PrimeSelect: DefineComponent_2<SelectProps, SelectSlots, ((e: "filter", event: SelectFilterEvent) => void) & ((e: "blur", event: Event) => void) & ((e: "change", event: SelectChangeEvent) => void) & ((e: "focus", event: Event) => void) & ((e: "hide") => void) & ((e: "show") => void) & ((e: "update:modelValue", value: any) => void) & ((e: "value-change", value: any) => void) & ((e: "before-show") => void) & ((e: "before-hide") => void), SelectMethods>;
257
- Slider: DefineComponent_2<SliderProps, SliderSlots, ((e: "change", value: number) => void) & ((e: "update:modelValue", value: number | number[]) => void) & ((e: "value-change", value: number | number[]) => void) & ((e: "slideend", event: SliderSlideEndEvent) => void)>;
258
- SettingsIcon: FunctionalComponent<SVGAttributes, {}, any, {}>;
259
- }, {}, string, ComponentProvideOptions, true, {}, any>;
260
- LogoIcon: FunctionalComponent<SVGAttributes, {}, any, {}>;
261
- ExtensionIcon: FunctionalComponent<SVGAttributes, {}, any, {}>;
262
- NumpadIcon: FunctionalComponent<SVGAttributes, {}, any, {}>;
263
- CallIcon: FunctionalComponent<SVGAttributes, {}, any, {}>;
264
- HangupIcon: FunctionalComponent<SVGAttributes, {}, any, {}>;
265
- MicrophoneIcon: FunctionalComponent<SVGAttributes, {}, any, {}>;
266
- NumpadOffIcon: FunctionalComponent<SVGAttributes, {}, any, {}>;
267
- MicrophoneOffIcon: FunctionalComponent<SVGAttributes, {}, any, {}>;
268
- KeyboardDeleteIcon: FunctionalComponent<SVGAttributes, {}, any, {}>;
269
- NebulaIcon: FunctionalComponent<SVGAttributes, {}, any, {}>;
270
- }, {}, string, ComponentProvideOptions, true, {}, any>;
43
+ export declare const WebPhone: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
271
44
 
272
- export declare const WebphoneElement: ReturnType<typeof defineCustomElement>;
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
+ }
273
54
 
274
55
  export { }