@bacca2095/webphone 1.1.0 → 1.2.0

package/README.md

@@ -28,12 +28,12 @@ The library requires Pinia. Register `WebPhonePlugin` after `createPinia()`.
 ```ts
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
-import { WebPhonePlugin } from '@bacca2095/webphone'
+import { WebPhone } from '@bacca2095/webphone'
 import '@bacca2095/webphone/style.css'
 
 const app = createApp(App)
 app.use(createPinia())
-app.use(WebPhonePlugin)
+app.use(WebPhone)
 app.mount('#app')
 ```
 
@@ -42,20 +42,62 @@ app.mount('#app')
 ```vue
 <script setup lang="ts">
 import { WebPhone } from '@bacca2095/webphone'
-import type { WebPhoneConfig } from '@bacca2095/webphone'
+import type { WebPhoneConfig, Contact } from '@bacca2095/webphone'
 
 const config: WebPhoneConfig = {
   uri: 'sip:user@domain.com',
   password: 'secret',
-  servers: ['wss://sip.domain.com'],
+  server: 'wss://sip.domain.com',
 }
+
+const contacts: Contact[] = [
+  { id: '1', name: 'Alice', phone: 'sip:alice@domain.com', type: 'internal' },
+]
 </script>
 
 <template>
-  <WebPhone :config="config" />
+  <WebPhone :config="config" :contacts="contacts" />
 </template>
 ```
 
+## WebPhone Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `config` | `WebPhoneConfig` | No | SIP connection configuration. If omitted, the phone renders without connecting. |
+| `floating` | `boolean` | No | Renders the phone as a fixed, draggable overlay. |
+| `contacts` | `Contact[]` | No | External contact list surfaced in the contacts panel. |
+
+## WebPhone Emits
+
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `open-history` | — | Fired when the user navigates to the history panel. |
+| `open-notes` | `remoteUri?: string` | Fired when the user navigates to the notes panel. |
+| `open-contacts` | — | Fired when the user navigates to the contacts panel. |
+| `open-calendar` | — | Fired when the user navigates to the calendar panel. |
+
+## Types
+
+### `WebPhoneConfig`
+
+| Field | Type | Required | Description |
+|-------|------|----------|-------------|
+| `server` | `string` | Yes | WebSocket server URL — e.g. `wss://sip.domain.com` |
+| `uri` | `string` | Yes | SIP URI — e.g. `sip:user@domain.com` |
+| `password` | `string` | Yes | SIP account password |
+| `displayName` | `string` | No | Caller ID display name |
+| `iceServers` | `RTCIceServer[]` | No | STUN/TURN servers for ICE negotiation |
+
+### `Contact`
+
+| Field | Type | Required | Description |
+|-------|------|----------|-------------|
+| `id` | `string` | Yes | Unique identifier |
+| `name` | `string` | Yes | Display name |
+| `phone` | `string` | Yes | Extension, phone number, or SIP URI |
+| `type` | `'internal' \| 'external' \| 'service' \| 'emergency'` | No | Contact category |
+
 ## API
 
 ### Components
@@ -77,34 +119,50 @@ const config: WebPhoneConfig = {
 | `useContacts` | Contacts CRUD and search |
 | `useWebPhoneStore` | Pinia store — reactive phone state |
 
-### Types
+### Additional Types
 
-```ts
-import type {
-  WebPhoneConfig,
-  CallInfo,
-  CallStatus,
-  CallDirection,
-  Contact,
-  ContactType,
-  PhoneNote,
-  NoteColor,
-  ScheduledCall,
-  MicPermission,
-} from '@bacca2095/webphone'
+`CallInfo`, `CallStatus`, `CallDirection`, `PhoneNote`, `NoteColor`, `ScheduledCall`, `MicPermission`
+
+## CDN Usage (Web Component)
+
+The library ships a self-contained web component build that works without Vue or any bundler.
+
+**ES module (recommended):**
+
+```html
+<script type="module" src="https://unpkg.com/@bacca2095/webphone/dist/webphone.es.js"></script>
+
+<web-phone></web-phone>
 ```
 
-## Web Component
+**IIFE (no module support required):**
 
-A standalone web component build is available for use outside Vue applications.
+```html
+<script src="https://unpkg.com/@bacca2095/webphone/dist/webphone.iife.js"></script>
+
+<web-phone></web-phone>
+```
+
+**Passing config via attribute:**
 
 ```html
-<script type="module" src="@bacca2095/webphone/webcomponent"></script>
+<web-phone id="phone"></web-phone>
+
+<script type="module">
+  const phone = document.getElementById('phone')
+  phone.config = {
+    uri: 'sip:user@domain.com',
+    password: 'secret',
+    server: 'wss://sip.domain.com',
+  }
+</script>
 ```
 
+> The web component bundles all dependencies including styles. No additional CSS import is needed.
+
 ## Demo
 
-A live demo is available at [bacca2095.github.io/webphone-libs](https://bacca2095.github.io/webphone-libs).
+A live demo is available at [bacca2095.github.io/webphone](https://bacca2095.github.io/webphone).
 
 ## License