Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vdegenne/mwc-app-dialog
Unofficial material web component wrapper to manage a mwc-dialog in your application
https://github.com/vdegenne/mwc-app-dialog
Last synced: about 2 months ago
JSON representation
Unofficial material web component wrapper to manage a mwc-dialog in your application
- Host: GitHub
- URL: https://github.com/vdegenne/mwc-app-dialog
- Owner: vdegenne
- Created: 2019-10-07T21:08:30.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T22:17:41.000Z (about 2 years ago)
- Last Synced: 2024-10-31T18:58:03.859Z (2 months ago)
- Language: TypeScript
- Homepage:
- Size: 198 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 7
-
Metadata Files:
- Readme: readme.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# mwc-app-dialog
Unofficial material web component wrapper to manage a mwc-dialog in your application.
## Usages
First import the element in your project
```javascript
import 'mwc-app-dialog'
```
Then in your HTML
```html
```
and now using JavaScript
```javascript
const dialog = ....getElementById('dialog')
// see below to see the features
```
### Notice
```javascript
dialog.notice('In progress', 'This part of this website is still under construction, please try coming back later.')
```
or blocking
```javascript
await dialog.notice('In progress', 'This part of this website is still under construction, please try coming back later.')
console.log('you just closed the dialog')
```
### Confirm
```javascript
try {
await dialog.confirm('', 'Are you sure ?')
// or (with a title)
// await dialog.confirm('Please confirm', 'Are you sure ?')
// or (just the title (bolder))
// await dialog.confirm('Are you sure ?')
} catch (e) {
// cancelled
return
}
// accepted, continue the procedure
```
### Choices
```javascript
let fruit
try {
fruit = await dialog.choices(['banana', 'apple', 'grapes'])
} catch (e) {
// cancelled
return
}
alert(`I see you like ${fruit}`)
```
### Custom
```javascript
await dialog.open('this is the title', html`
`,
(dom) => {
alert(`You've typed "${dom.form.foo.value}"`)
},
() => {
alert('cancelled')
}
)
```
If you want to prevent the dialog from closing (e.g. when you need to validate a form but it has an error the user needa fix) returns `-1` from the `onAccept` function.
```javascript
await dialog.open('title', html``, (dom) => {
if (dom.myinput.value === '') {
alert('please enter a value')
return -1 // the dialog will stay open
}
else {
alert('thanks !')
// the dialog will close by default
}
})
```
If you want a custom content without an accept button, just pass `undefined` instead of a function for the third argument :
```javascript
await dialog.open('title', html`
test
`, undefined, onCancel) // only cancellable
```
## Other features
### catch dom
You can also catch the dom (rendered content of the dialog) to make post-manipulation :
```javascript
const dom = await dialog.open('title', html`
hello I am red
`, onAccept, onCancel)
dom.myparagraph.style.color = 'red'
```
### make your own selection dialog (`dialogAction`)
```javascript
await dialog.open('select one', html`
first
second
`,
(dom, choice) => {
console.log(`You choosed ${choice} !`)
}
)
```
## Installation
```npm i mwc-app-dialog```
## Demo
If you want to see a live demo :
- clone this repository
- install dependencies : `npm install`
- type `npm run demo` . This will open the demo in the browser
## Contact
vdegenne (at) gmail (dot) com