@bacca2095/webphone 1.0.0 → 1.1.0

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 (2) hide show
  1. package/README.md +87 -49
  2. package/package.json +21 -17
package/README.md CHANGED
@@ -1,73 +1,111 @@
1
- # webphone
1
+ # @bacca2095/webphone
2
2
 
3
- This template should help get you started developing with Vue 3 in Vite.
3
+ A Vue 3 WebPhone component library built on top of JsSIP for SIP/WebRTC communication.
4
4
 
5
- ## Recommended IDE Setup
5
+ [![npm version](https://img.shields.io/npm/v/@bacca2095/webphone)](https://www.npmjs.com/package/@bacca2095/webphone)
6
+ [![license](https://img.shields.io/npm/l/@bacca2095/webphone)](LICENSE)
6
7
 
7
- [VS Code](https://code.visualstudio.com/) + [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
8
+ ## Requirements
8
9
 
9
- ## Recommended Browser Setup
10
+ - Node.js >= 24
11
+ - Vue >= 3.5
12
+ - Pinia >= 3.0
10
13
 
11
- - Chromium-based browsers (Chrome, Edge, Brave, etc.):
12
- - [Vue.js devtools](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
13
- - [Turn on Custom Object Formatter in Chrome DevTools](http://bit.ly/object-formatters)
14
- - Firefox:
15
- - [Vue.js devtools](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)
16
- - [Turn on Custom Object Formatter in Firefox DevTools](https://fxdx.dev/firefox-devtools-custom-object-formatters/)
14
+ ## Installation
17
15
 
18
- ## Type Support for `.vue` Imports in TS
16
+ ```sh
17
+ npm install @bacca2095/webphone
18
+ # or
19
+ pnpm add @bacca2095/webphone
20
+ ```
19
21
 
20
- TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
22
+ ## Setup
21
23
 
22
- ## Customize configuration
24
+ ### 1. Register the plugin
23
25
 
24
- See [Vite Configuration Reference](https://vite.dev/config/).
26
+ The library requires Pinia. Register `WebPhonePlugin` after `createPinia()`.
25
27
 
26
- ## Project Setup
28
+ ```ts
29
+ import { createApp } from 'vue'
30
+ import { createPinia } from 'pinia'
31
+ import { WebPhonePlugin } from '@bacca2095/webphone'
32
+ import '@bacca2095/webphone/style.css'
27
33
 
28
- ```sh
29
- pnpm install
34
+ const app = createApp(App)
35
+ app.use(createPinia())
36
+ app.use(WebPhonePlugin)
37
+ app.mount('#app')
30
38
  ```
31
39
 
32
- ### Compile and Hot-Reload for Development
40
+ ### 2. Use the component
33
41
 
34
- ```sh
35
- pnpm dev
36
- ```
42
+ ```vue
43
+ <script setup lang="ts">
44
+ import { WebPhone } from '@bacca2095/webphone'
45
+ import type { WebPhoneConfig } from '@bacca2095/webphone'
37
46
 
38
- ### Type-Check, Compile and Minify for Production
47
+ const config: WebPhoneConfig = {
48
+ uri: 'sip:user@domain.com',
49
+ password: 'secret',
50
+ servers: ['wss://sip.domain.com'],
51
+ }
52
+ </script>
39
53
 
40
- ```sh
41
- pnpm build
54
+ <template>
55
+ <WebPhone :config="config" />
56
+ </template>
42
57
  ```
43
58
 
44
- ### Run Unit Tests with [Vitest](https://vitest.dev/)
45
-
46
- ```sh
47
- pnpm test:unit
59
+ ## API
60
+
61
+ ### Components
62
+
63
+ | Component | Description |
64
+ |-----------|-------------|
65
+ | `WebPhone` | Main phone interface — dialer, active call controls, and panel navigation |
66
+ | `NotesPanel` | Per-number persistent notes |
67
+ | `HistoryPanel` | Call history with filtering |
68
+ | `ContactsPanel` | Contacts management |
69
+ | `CalendarPanel` | Scheduled calls |
70
+
71
+ ### Composables
72
+
73
+ | Composable | Description |
74
+ |------------|-------------|
75
+ | `useWebPhone` | Core SIP/WebRTC logic — register, call, hold, transfer |
76
+ | `useAudioDevices` | Audio input/output device enumeration and selection |
77
+ | `useContacts` | Contacts CRUD and search |
78
+ | `useWebPhoneStore` | Pinia store — reactive phone state |
79
+
80
+ ### Types
81
+
82
+ ```ts
83
+ import type {
84
+ WebPhoneConfig,
85
+ CallInfo,
86
+ CallStatus,
87
+ CallDirection,
88
+ Contact,
89
+ ContactType,
90
+ PhoneNote,
91
+ NoteColor,
92
+ ScheduledCall,
93
+ MicPermission,
94
+ } from '@bacca2095/webphone'
48
95
  ```
49
96
 
50
- ### Run End-to-End Tests with [Playwright](https://playwright.dev)
97
+ ## Web Component
51
98
 
52
- ```sh
53
- # Install browsers for the first run
54
- npx playwright install
55
-
56
- # When testing on CI, must build the project first
57
- pnpm build
58
-
59
- # Runs the end-to-end tests
60
- pnpm test:e2e
61
- # Runs the tests only on Chromium
62
- pnpm test:e2e --project=chromium
63
- # Runs the tests of a specific file
64
- pnpm test:e2e tests/example.spec.ts
65
- # Runs the tests in debug mode
66
- pnpm test:e2e --debug
99
+ A standalone web component build is available for use outside Vue applications.
100
+
101
+ ```html
102
+ <script type="module" src="@bacca2095/webphone/webcomponent"></script>
67
103
  ```
68
104
 
69
- ### Lint with [ESLint](https://eslint.org/)
105
+ ## Demo
70
106
 
71
- ```sh
72
- pnpm lint
73
- ```
107
+ A live demo is available at [bacca2095.github.io/webphone-libs](https://bacca2095.github.io/webphone-libs).
108
+
109
+ ## License
110
+
111
+ [MIT](LICENSE)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bacca2095/webphone",
3
- "version": "1.0.0",
3
+ "version": "1.1.0",
4
4
  "type": "module",
5
5
  "description": "A Vue 3 webphone component library",
6
6
  "license": "MIT",
@@ -26,6 +26,21 @@
26
26
  "sideEffects": [
27
27
  "*.css"
28
28
  ],
29
+ "scripts": {
30
+ "dev": "vite",
31
+ "build": "run-p type-check \"build-only {@}\" --",
32
+ "build:wc": "vite build --config vite.wc.config.ts",
33
+ "build:all": "run-s build build:wc",
34
+ "build:demo": "vite build --config vite.demo.config.ts",
35
+ "preview": "vite preview",
36
+ "test:unit": "vitest",
37
+ "build-only": "vite build",
38
+ "type-check": "vue-tsc --build",
39
+ "lint": "run-s lint:*",
40
+ "lint:oxlint": "oxlint . --fix",
41
+ "lint:eslint": "eslint . --fix --cache",
42
+ "format": "oxfmt src/"
43
+ },
29
44
  "peerDependencies": {
30
45
  "pinia": "^3.0.0",
31
46
  "vue": "^3.5.0"
@@ -41,6 +56,9 @@
41
56
  "tailwind-merge": "3.6.0"
42
57
  },
43
58
  "devDependencies": {
59
+ "@semantic-release/changelog": "^6.0.3",
60
+ "@semantic-release/git": "^10.0.1",
61
+ "@semantic-release/github": "^12.0.8",
44
62
  "@tailwindcss/vite": "4.3.0",
45
63
  "@tsconfig/node24": "24.0.4",
46
64
  "@types/jsdom": "28.0.3",
@@ -60,6 +78,7 @@
60
78
  "oxfmt": "0.45.0",
61
79
  "oxlint": "1.60.0",
62
80
  "pinia": "3.0.4",
81
+ "semantic-release": "^25.0.3",
63
82
  "tailwindcss": "4.3.0",
64
83
  "tw-animate-css": "1.4.0",
65
84
  "typescript": "6.0.3",
@@ -76,20 +95,5 @@
76
95
  },
77
96
  "engines": {
78
97
  "node": ">=24.0.0"
79
- },
80
- "scripts": {
81
- "dev": "vite",
82
- "build": "run-p type-check \"build-only {@}\" --",
83
- "build:wc": "vite build --config vite.wc.config.ts",
84
- "build:all": "run-s build build:wc",
85
- "build:demo": "vite build --config vite.demo.config.ts",
86
- "preview": "vite preview",
87
- "test:unit": "vitest",
88
- "build-only": "vite build",
89
- "type-check": "vue-tsc --build",
90
- "lint": "run-s lint:*",
91
- "lint:oxlint": "oxlint . --fix",
92
- "lint:eslint": "eslint . --fix --cache",
93
- "format": "oxfmt src/"
94
98
  }
95
- }
99
+ }