@tmsoft/webphone 1.0.5 → 1.0.8

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 (7) hide show
  1. package/README.md +25 -32
  2. package/dist/index.d.ts +245 -0
  3. package/dist/webphone.cjs.js +51 -51
  4. package/dist/webphone.es.js +1215 -1207
  5. package/dist/webphone.iife.js +51 -51
  6. package/dist/webphone.umd.js +51 -51
  7. package/package.json +1 -1
package/README.md CHANGED
@@ -17,19 +17,19 @@
17
17
 
18
18
  ## 🚀 **Instalación**
19
19
 
20
- En **npm**:
20
+ En NPM:
21
21
 
22
22
  ```sh
23
23
  npm install @tmsoft/webphone
24
24
  ```
25
25
 
26
- En **Yarn**:
26
+ En Yarn:
27
27
 
28
28
  ```sh
29
29
  yarn add @tmsoft/webphone
30
30
  ```
31
31
 
32
- En **pnpm**:
32
+ En PNPM:
33
33
 
34
34
  ```sh
35
35
  pnpm add @tmsoft/webphone
@@ -39,7 +39,7 @@ pnpm add @tmsoft/webphone
39
39
 
40
40
  ## 🛠 **Uso**
41
41
 
42
- En una aplicación Vue, importar el componente y agregarlo:
42
+ En una aplicación Vue, se puede importar y utilizar de la siguiente manera:
43
43
 
44
44
  ```vue
45
45
  <script setup lang="ts">
@@ -48,16 +48,30 @@ import WebPhone from '@tmsoft/webphone'
48
48
 
49
49
  const extension = ref('1001')
50
50
  const password = ref('supersecret')
51
+ const domain = ref('sip.example.com')
51
52
  </script>
52
53
 
53
54
  <template>
54
- <WebPhone :extension="extension" :password="password" />
55
+ <WebPhone :extension="extension" :password="password" :domain="domain" />
55
56
  </template>
56
57
  ```
57
58
 
58
59
  ---
59
60
 
60
- ## 🏗 **Construcción del paquete**
61
+ ## 📌 **Props del Componente**
62
+
63
+ | Propiedad | Tipo | Requerida | Descripción |
64
+ | ----------- | -------- | --------- | --------------------------------------------------------------------------------- |
65
+ | `extension` | `String` | ✅ | Número de extensión del usuario. |
66
+ | `password` | `String` | ✅ | Contraseña SIP de la extensión. |
67
+ | `domain` | `String` | ✅ | Dominio del servidor SIP. |
68
+ | `mode` | `String` | ❌ | Tipo de llamada. Valores: `'call'`, `'webcall'`, `'video'`. Por defecto `'call'`. |
69
+ | `image` | `String` | ❌ | Imagen base64 o URL para mostrar en modo `webcall`. |
70
+ | `to` | `String` | ❌ | Número de destino en modo `webcall`. |
71
+
72
+ ---
73
+
74
+ ## 🏗 **Construcción del Paquete**
61
75
 
62
76
  Para compilar el paquete, ejecutar:
63
77
 
@@ -75,9 +89,7 @@ Esto generará los archivos de distribución en `dist/` con los siguientes forma
75
89
 
76
90
  ## 🌎 **Uso en CDN**
77
91
 
78
- Para cargar la librería sin necesidad de instalarla, se puede usar un CDN como [jsDelivr](https://www.jsdelivr.com/):
79
-
80
- ### **Carga en HTML con ES Module**
92
+ Para cargar la librería directamente en una página sin instalar NPM, usar un CDN como [jsDelivr](https://www.jsdelivr.com/):
81
93
 
82
94
  ```html
83
95
  <script type="module">
@@ -85,34 +97,17 @@ Para cargar la librería sin necesidad de instalarla, se puede usar un CDN como
85
97
  </script>
86
98
  ```
87
99
 
88
- ### **Carga en HTML con UMD**
100
+ Para UMD:
89
101
 
90
102
  ```html
91
103
  <script src="https://cdn.jsdelivr.net/npm/@tmsoft/webphone/dist/webphone.umd.js"></script>
92
104
  ```
93
105
 
94
- ### **Uso en HTML**
95
-
96
- ```html
97
- <!DOCTYPE html>
98
- <html lang="es">
99
- <head>
100
- <meta charset="UTF-8" />
101
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
102
- <title>WebPhone Example</title>
103
- <script src="https://cdn.jsdelivr.net/npm/@tmsoft/webphone/dist/webphone.umd.js"></script>
104
- </head>
105
- <body>
106
- <web-phone extension="1001" password="supersecret"></web-phone>
107
- </body>
108
- </html>
109
- ```
110
-
111
106
  ---
112
107
 
113
108
  ## 📤 **Publicación en NPM**
114
109
 
115
- Para publicar una nueva versión en NPM:
110
+ Para publicar una nueva versión del paquete en NPM:
116
111
 
117
112
  1️⃣ **Autenticarse en NPM**
118
113
  Si no se ha iniciado sesión:
@@ -131,15 +126,13 @@ Ejemplo: Incrementar la versión **`1.0.1` → `1.0.2`** en `package.json`:
131
126
  }
132
127
  ```
133
128
 
134
- 3️⃣ **Construcción del paquete**
129
+ 3️⃣ **Construir el paquete**
135
130
 
136
131
  ```sh
137
132
  npm run build
138
133
  ```
139
134
 
140
- 4️⃣ **Publicación del paquete en NPM**
141
-
142
- Para publicar en un registro público:
135
+ 4️⃣ **Publicar el paquete en NPM**
143
136
 
144
137
  ```sh
145
138
  npm run publish:lib
package/dist/index.d.ts CHANGED
@@ -1 +1,246 @@
1
+ import { ButtonProps } from 'primevue/button';
2
+ import { ButtonSlots } from 'primevue/button';
3
+ import { ComponentOptionsMixin } from 'vue';
4
+ import { ComponentProvideOptions } from 'vue';
5
+ import { ComputedRef } from 'vue';
6
+ import { DefineComponent } from 'vue';
7
+ import { DefineComponent as DefineComponent_2 } from '@primevue/core';
8
+ import { DialogProps } from 'primevue/dialog';
9
+ import { DialogSlots } from 'primevue/dialog';
10
+ import { ExtractPropTypes } from 'vue';
11
+ import { FunctionalComponent } from 'vue';
12
+ import { InputTextProps } from 'primevue/inputtext';
13
+ import { InputTextSlots } from 'primevue/inputtext';
14
+ import { PropType } from 'vue';
15
+ import { PublicProps } from 'vue';
16
+ import { Ref } from 'vue';
17
+ import { SelectChangeEvent } from 'primevue/select';
18
+ import { SelectFilterEvent } from 'primevue/select';
19
+ import { SelectProps } from 'primevue/select';
20
+ import { SelectSlots } from 'primevue/select';
21
+ import { SliderProps } from 'primevue/slider';
22
+ import { SliderSlideEndEvent } from 'primevue/slider';
23
+ import { SliderSlots } from 'primevue/slider';
24
+ import { SVGAttributes } from 'vue';
25
+
26
+ export declare const WebPhone: DefineComponent<ExtractPropTypes< {
27
+ extension: {
28
+ type: StringConstructor;
29
+ required: true;
30
+ };
31
+ password: {
32
+ type: StringConstructor;
33
+ required: true;
34
+ };
35
+ domain: {
36
+ type: StringConstructor;
37
+ required: true;
38
+ };
39
+ mode: {
40
+ type: StringConstructor;
41
+ default: string;
42
+ validator: (value: string) => boolean;
43
+ };
44
+ image: {
45
+ type: StringConstructor;
46
+ required: false;
47
+ };
48
+ to: {
49
+ type: StringConstructor;
50
+ required: false;
51
+ };
52
+ }>, {
53
+ setCallVolume: (value: number | number[]) => void;
54
+ validateKeydown: (event: KeyboardEvent) => void;
55
+ setNotificationVolume: (value: number | number[]) => void;
56
+ dtmfKeys: string[];
57
+ canCall: ComputedRef<boolean | "" | undefined>;
58
+ handleDTMF: (digit: string) => void;
59
+ statusClass: ComputedRef<"text-[#03ac7e]" | "text-blue-400" | "text-yellow-400" | "text-red-500">;
60
+ showNumpad: Ref<boolean, boolean>;
61
+ toggleNumpad: () => void;
62
+ audioVolumeRef: Ref<any, any>;
63
+ audioDevicesRef: Ref<any, any>;
64
+ toggleAudioVolume: (event: MouseEvent) => void;
65
+ toggleAudioDevices: (event: MouseEvent) => void;
66
+ deleteLastDigit: () => void;
67
+ isWebcall: ComputedRef<boolean>;
68
+ isCall: ComputedRef<boolean>;
69
+ isVideo: ComputedRef<boolean>;
70
+ finalPhoneNumber: ComputedRef<string | undefined>;
71
+ showSettings: Ref<boolean, boolean>;
72
+ playerRef: Ref<HTMLAudioElement | null, HTMLAudioElement | null>;
73
+ ringerRef: Ref<HTMLAudioElement | null, HTMLAudioElement | null>;
74
+ backRingerRef: Ref<HTMLAudioElement | null, HTMLAudioElement | null>;
75
+ viewerRef: Ref<HTMLVideoElement | null, HTMLVideoElement | null>;
76
+ selfViewerRef: Ref<HTMLVideoElement | null, HTMLVideoElement | null>;
77
+ startSIP: () => void;
78
+ stopSIP: () => void;
79
+ makeCall: (to: string, hasVideo: boolean) => void;
80
+ answerCall: () => void | undefined;
81
+ endCall: () => void | undefined;
82
+ toggleMute: () => void;
83
+ microphones: Ref< {
84
+ readonly deviceId: string;
85
+ readonly groupId: string;
86
+ readonly kind: MediaDeviceKind;
87
+ readonly label: string;
88
+ toJSON: () => any;
89
+ }[], MediaDeviceInfo[] | {
90
+ readonly deviceId: string;
91
+ readonly groupId: string;
92
+ readonly kind: MediaDeviceKind;
93
+ readonly label: string;
94
+ toJSON: () => any;
95
+ }[]>;
96
+ speakers: Ref< {
97
+ readonly deviceId: string;
98
+ readonly groupId: string;
99
+ readonly kind: MediaDeviceKind;
100
+ readonly label: string;
101
+ toJSON: () => any;
102
+ }[], MediaDeviceInfo[] | {
103
+ readonly deviceId: string;
104
+ readonly groupId: string;
105
+ readonly kind: MediaDeviceKind;
106
+ readonly label: string;
107
+ toJSON: () => any;
108
+ }[]>;
109
+ selectedMicId: Ref<string | null, string | null>;
110
+ selectedSpeakerId: Ref<string | null, string | null>;
111
+ selectedMic: ComputedRef< {
112
+ readonly deviceId: string;
113
+ readonly groupId: string;
114
+ readonly kind: MediaDeviceKind;
115
+ readonly label: string;
116
+ toJSON: () => any;
117
+ } | null>;
118
+ selectedSpeaker: ComputedRef< {
119
+ readonly deviceId: string;
120
+ readonly groupId: string;
121
+ readonly kind: MediaDeviceKind;
122
+ readonly label: string;
123
+ toJSON: () => any;
124
+ } | null>;
125
+ isMuted: Ref<boolean, boolean>;
126
+ activeCall: Ref<boolean, boolean>;
127
+ isSIPActive: Ref<boolean, boolean>;
128
+ canMute: ComputedRef<boolean>;
129
+ canAnswer: ComputedRef<boolean>;
130
+ canHangup: ComputedRef<boolean>;
131
+ canStartSIP: ComputedRef<boolean>;
132
+ canStopSIP: ComputedRef<boolean>;
133
+ changeMicrophone: (deviceId: string) => Promise<void>;
134
+ changeSpeaker: (deviceId: string) => Promise<void>;
135
+ callVolume: Ref<number, number>;
136
+ notificationVolume: Ref<number, number>;
137
+ setVolume: (type: "call" | "notification", volume: number) => void;
138
+ isIncomingCall: Ref<boolean, boolean>;
139
+ sendDTMF: (digit: string) => void;
140
+ resetStates: () => void;
141
+ phoneNumber: Ref<string, string>;
142
+ callerId: Ref<string | null, string | null>;
143
+ isRinging: Ref<boolean, boolean>;
144
+ statusMessage: ComputedRef<string>;
145
+ formattedCallDuration: ComputedRef<string>;
146
+ callDuration: Ref<number, number>;
147
+ isOutgoingCall: Ref<boolean, boolean>;
148
+ }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes< {
149
+ extension: {
150
+ type: StringConstructor;
151
+ required: true;
152
+ };
153
+ password: {
154
+ type: StringConstructor;
155
+ required: true;
156
+ };
157
+ domain: {
158
+ type: StringConstructor;
159
+ required: true;
160
+ };
161
+ mode: {
162
+ type: StringConstructor;
163
+ default: string;
164
+ validator: (value: string) => boolean;
165
+ };
166
+ image: {
167
+ type: StringConstructor;
168
+ required: false;
169
+ };
170
+ to: {
171
+ type: StringConstructor;
172
+ required: false;
173
+ };
174
+ }>> & Readonly<{}>, {
175
+ mode: string;
176
+ }, {}, {
177
+ PrimeButton: DefineComponent_2<ButtonProps, ButtonSlots, (e: string, ...args: any[]) => void>;
178
+ PrimeInputText: DefineComponent_2<InputTextProps, InputTextSlots, ((e: "update:modelValue", value: string | undefined) => void) & ((e: "value-change", value: string | undefined) => void)>;
179
+ WebphoneSettings: DefineComponent<ExtractPropTypes< {
180
+ callVolume: NumberConstructor;
181
+ notificationVolume: NumberConstructor;
182
+ selectedMicId: StringConstructor;
183
+ selectedSpeakerId: StringConstructor;
184
+ microphones: PropType<Array<{
185
+ label: string;
186
+ deviceId: string;
187
+ }>>;
188
+ speakers: PropType<Array<{
189
+ label: string;
190
+ deviceId: string;
191
+ }>>;
192
+ }>, {
193
+ showSettings: Ref<boolean, boolean>;
194
+ openDialog: () => void;
195
+ updateCallVolume: (value: number | number[]) => void;
196
+ updateNotificationVolume: (value: number | number[]) => void;
197
+ updateSelectedMic: (value: string) => void;
198
+ updateSelectedSpeaker: (value: string) => void;
199
+ selectedMic: ComputedRef< {
200
+ label: string;
201
+ deviceId: string;
202
+ } | null>;
203
+ selectedSpeaker: ComputedRef< {
204
+ label: string;
205
+ deviceId: string;
206
+ } | null>;
207
+ version: string;
208
+ packageName: string;
209
+ }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("update:callVolume" | "update:notificationVolume" | "update:selectedMicId" | "update:selectedSpeakerId")[], "update:callVolume" | "update:notificationVolume" | "update:selectedMicId" | "update:selectedSpeakerId", PublicProps, Readonly<ExtractPropTypes< {
210
+ callVolume: NumberConstructor;
211
+ notificationVolume: NumberConstructor;
212
+ selectedMicId: StringConstructor;
213
+ selectedSpeakerId: StringConstructor;
214
+ microphones: PropType<Array<{
215
+ label: string;
216
+ deviceId: string;
217
+ }>>;
218
+ speakers: PropType<Array<{
219
+ label: string;
220
+ deviceId: string;
221
+ }>>;
222
+ }>> & Readonly<{
223
+ "onUpdate:callVolume"?: ((...args: any[]) => any) | undefined;
224
+ "onUpdate:notificationVolume"?: ((...args: any[]) => any) | undefined;
225
+ "onUpdate:selectedMicId"?: ((...args: any[]) => any) | undefined;
226
+ "onUpdate:selectedSpeakerId"?: ((...args: any[]) => any) | undefined;
227
+ }>, {}, {}, {
228
+ PrimeButton: DefineComponent_2<ButtonProps, ButtonSlots, (e: string, ...args: any[]) => void>;
229
+ 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)>;
230
+ 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)>;
231
+ 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)>;
232
+ SettingsIcon: FunctionalComponent<SVGAttributes, {}, any, {}>;
233
+ }, {}, string, ComponentProvideOptions, true, {}, any>;
234
+ LogoIcon: FunctionalComponent<SVGAttributes, {}, any, {}>;
235
+ ExtensionIcon: FunctionalComponent<SVGAttributes, {}, any, {}>;
236
+ NumpadIcon: FunctionalComponent<SVGAttributes, {}, any, {}>;
237
+ CallIcon: FunctionalComponent<SVGAttributes, {}, any, {}>;
238
+ HangupIcon: FunctionalComponent<SVGAttributes, {}, any, {}>;
239
+ MicrophoneIcon: FunctionalComponent<SVGAttributes, {}, any, {}>;
240
+ NumpadOffIcon: FunctionalComponent<SVGAttributes, {}, any, {}>;
241
+ MicrophoneOffIcon: FunctionalComponent<SVGAttributes, {}, any, {}>;
242
+ KeyboardDeleteIcon: FunctionalComponent<SVGAttributes, {}, any, {}>;
243
+ NebulaIcon: FunctionalComponent<SVGAttributes, {}, any, {}>;
244
+ }, {}, string, ComponentProvideOptions, true, {}, any>;
245
+
1
246
  export { }