@capawesome/capacitor-dialog 0.0.1 → 0.1.1
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.
- package/README.md +69 -2
- package/android/build.gradle +1 -1
- package/package.json +10 -3
package/README.md
CHANGED
|
@@ -20,9 +20,14 @@ Capacitor plugin for native alert, confirm, and prompt dialogs.
|
|
|
20
20
|
|
|
21
21
|
Missing a feature? Just [open an issue](https://github.com/capawesome-team/capacitor-plugins/issues) and we'll take a look!
|
|
22
22
|
|
|
23
|
-
##
|
|
23
|
+
## Use Cases
|
|
24
24
|
|
|
25
|
-
|
|
25
|
+
The Dialog plugin is typically used whenever an app needs a quick native interaction with the user, for example:
|
|
26
|
+
|
|
27
|
+
- **Confirmations**: Ask the user to confirm a destructive action, such as deleting an item, before executing it.
|
|
28
|
+
- **Notices**: Inform the user about the result of an action, such as saved changes or an error, with a simple alert.
|
|
29
|
+
- **Quick text input**: Ask the user for a short text value, such as a name, without building a custom form.
|
|
30
|
+
- **Native look and feel**: Replace the browser's `window.alert`, `window.confirm`, and `window.prompt` with native dialogs on Android and iOS.
|
|
26
31
|
|
|
27
32
|
## Compatibility
|
|
28
33
|
|
|
@@ -66,6 +71,12 @@ No configuration required for this plugin.
|
|
|
66
71
|
|
|
67
72
|
## Usage
|
|
68
73
|
|
|
74
|
+
The following examples show how to display an alert dialog, ask the user for confirmation, and request text input from the user.
|
|
75
|
+
|
|
76
|
+
### Display an alert dialog
|
|
77
|
+
|
|
78
|
+
Show a message with a single button, for example to inform the user about the result of an action:
|
|
79
|
+
|
|
69
80
|
```typescript
|
|
70
81
|
import { Dialog } from '@capawesome/capacitor-dialog';
|
|
71
82
|
|
|
@@ -75,6 +86,14 @@ const alert = async () => {
|
|
|
75
86
|
message: 'Your changes have been saved.',
|
|
76
87
|
});
|
|
77
88
|
};
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
### Ask the user for confirmation
|
|
92
|
+
|
|
93
|
+
Show a confirmation dialog with two buttons. The result tells you whether the user confirmed the dialog:
|
|
94
|
+
|
|
95
|
+
```typescript
|
|
96
|
+
import { Dialog } from '@capawesome/capacitor-dialog';
|
|
78
97
|
|
|
79
98
|
const confirm = async () => {
|
|
80
99
|
const { value } = await Dialog.confirm({
|
|
@@ -83,6 +102,14 @@ const confirm = async () => {
|
|
|
83
102
|
});
|
|
84
103
|
console.log('Confirmed:', value);
|
|
85
104
|
};
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
### Request text input from the user
|
|
108
|
+
|
|
109
|
+
Show a prompt dialog with a text input, a confirm and a cancel button. The result contains the entered value and whether the user canceled the dialog:
|
|
110
|
+
|
|
111
|
+
```typescript
|
|
112
|
+
import { Dialog } from '@capawesome/capacitor-dialog';
|
|
86
113
|
|
|
87
114
|
const prompt = async () => {
|
|
88
115
|
const { value, canceled } = await Dialog.prompt({
|
|
@@ -223,6 +250,46 @@ This plugin is API-compatible with the official [`@capacitor/dialog`](https://gi
|
|
|
223
250
|
| `confirm({ ... }) → { value }` | `confirm({ ... }) → { value }` |
|
|
224
251
|
| `prompt({ ... }) → { value, cancelled }` | `prompt({ ... }) → { value, canceled }` |
|
|
225
252
|
|
|
253
|
+
## FAQ
|
|
254
|
+
|
|
255
|
+
### How is this plugin different from other similar plugins?
|
|
256
|
+
|
|
257
|
+
It brings native alert, confirm, and prompt dialogs to Android, iOS, and the web through a single, fully typed API, using only official platform APIs so it stays safe for App Store and Google Play submissions. It supports both CocoaPods and Swift Package Manager on iOS and is actively maintained against the latest Capacitor and OS versions, with customizable button titles on Android and iOS. If you only need a quick native message, it is refreshingly simple to drop in; if you need consistent alert, confirm, and prompt behavior across every platform, it is built for exactly that.
|
|
258
|
+
|
|
259
|
+
### How is this plugin different from the official `@capacitor/dialog` plugin?
|
|
260
|
+
|
|
261
|
+
This plugin is API-compatible with the official `@capacitor/dialog` plugin, with a single difference: the `prompt(...)` result uses the property `canceled` (one `l`) instead of `cancelled` (two `l`s). See the [migration table](#migrating-from-capacitordialog) above for the complete method mapping.
|
|
262
|
+
|
|
263
|
+
### Can I customize the dialog buttons?
|
|
264
|
+
|
|
265
|
+
Yes, on Android and iOS you can customize the button titles using the `buttonTitle`, `okButtonTitle`, and `cancelButtonTitle` options. On the web, the button titles cannot be customized and are ignored, because the browser's built-in dialogs are used.
|
|
266
|
+
|
|
267
|
+
### How do I know whether the user canceled a prompt?
|
|
268
|
+
|
|
269
|
+
The result of the `prompt(...)` method contains a `canceled` property that is `true` if the user canceled the dialog, in addition to the `value` property with the text input. For confirmation dialogs, the `value` property of the `confirm(...)` result tells you whether the user confirmed the dialog.
|
|
270
|
+
|
|
271
|
+
### Why is the dialog title not displayed on the web?
|
|
272
|
+
|
|
273
|
+
On the web, the title and button titles cannot be customized and are ignored, because the plugin uses the browser's built-in dialogs. Only the message is displayed. On Android and iOS, the title is fully supported.
|
|
274
|
+
|
|
275
|
+
### Is this plugin safe to use for App Store submissions?
|
|
276
|
+
|
|
277
|
+
Yes, the plugin uses only official platform APIs to display the dialogs, so it is safe to use in apps submitted to the Apple App Store and Google Play Store.
|
|
278
|
+
|
|
279
|
+
### Can I use this plugin with Ionic, React, Vue or Angular?
|
|
280
|
+
|
|
281
|
+
Yes, the plugin is framework-agnostic. It works in any Capacitor app regardless of the web framework, including Ionic with Angular, React, or Vue, as well as plain JavaScript projects.
|
|
282
|
+
|
|
283
|
+
## Related Plugins
|
|
284
|
+
|
|
285
|
+
- [Action Sheet](https://capawesome.io/docs/sdks/capacitor/action-sheet/): Show native action sheets.
|
|
286
|
+
- [Toast](https://capawesome.io/docs/sdks/capacitor/toast/): Show native toast notifications.
|
|
287
|
+
- [Datetime Picker](https://capawesome.io/docs/sdks/capacitor/datetime-picker/): Let the user pick a date and time with a native picker.
|
|
288
|
+
|
|
289
|
+
## Newsletter
|
|
290
|
+
|
|
291
|
+
Stay up to date with the latest news and updates about the Capawesome, Capacitor, and Ionic ecosystem by subscribing to our [Capawesome Newsletter](https://cloud.capawesome.io/newsletter/).
|
|
292
|
+
|
|
226
293
|
## Changelog
|
|
227
294
|
|
|
228
295
|
See [CHANGELOG.md](https://github.com/capawesome-team/capacitor-plugins/blob/main/packages/dialog/CHANGELOG.md).
|
package/android/build.gradle
CHANGED
|
@@ -30,7 +30,7 @@ android {
|
|
|
30
30
|
buildTypes {
|
|
31
31
|
release {
|
|
32
32
|
minifyEnabled false
|
|
33
|
-
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
|
|
33
|
+
proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
|
|
34
34
|
}
|
|
35
35
|
}
|
|
36
36
|
lintOptions {
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@capawesome/capacitor-dialog",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"description": "Capacitor plugin for native alert, confirm, and prompt dialogs.",
|
|
3
|
+
"version": "0.1.1",
|
|
4
|
+
"description": "Capacitor plugin for native alert, confirm, and prompt dialogs on Android, iOS, and Web.",
|
|
5
5
|
"main": "dist/plugin.cjs.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
7
7
|
"types": "dist/esm/index.d.ts",
|
|
@@ -41,7 +41,14 @@
|
|
|
41
41
|
"dialog",
|
|
42
42
|
"alert",
|
|
43
43
|
"confirm",
|
|
44
|
-
"prompt"
|
|
44
|
+
"prompt",
|
|
45
|
+
"capacitor-plugin",
|
|
46
|
+
"alert dialog",
|
|
47
|
+
"confirm dialog",
|
|
48
|
+
"prompt dialog",
|
|
49
|
+
"native dialog",
|
|
50
|
+
"modal",
|
|
51
|
+
"popup"
|
|
45
52
|
],
|
|
46
53
|
"scripts": {
|
|
47
54
|
"verify": "npm run verify:ios && npm run verify:android && npm run verify:web",
|