Nextcloud dialog helpers
npm install @nextcloud/dialogs 
Nextcloud dialog helpers
``
npm i -S @nextcloud/dialogs
| @nextcloud/dialogs | maintained | @nextcloud/vue dependency | Nextcloud server version |
|----------------------|------------|-----------------------------|----------------------------|
| 7.x | ✅ | 9.x (Vue 3)¹ | Nextcloud 31 and newer |
| 6.x | ✅ | 8.x | Nextcloud 29, 30, 31, 32 |
| 5.x | ❌ | 8.x | Nextcloud 28, 29, 30 |
| 4.2+ | ❌ | 7.12² | Nextcloud 25, 26, 27, 27.1 |
| 4.1 | ❌ | any | any up to Nextcloud 30 |
¹: In version 7.x the @nextcloud/vue dependency is moved to dependencies so you can also use this library@nextcloud/vue
with an old version of in your app dependencies if your app still uses Vue 2.@nextcloud/vue
Note that this might increase the bundled app size.
If your app also already uses version 9.x and Vue 3 then the bundle size will not increase.
²: Since version 4.2 this package provides a Vue.js based file picker, so this package depends on @nextcloud/vue.
file.
So make sure that the @nextcloud/dialogs/style.css file is included in your app to make sure that the toasts or FilePicker have a proper styling applied.`js
import '@nextcloud/dialogs/style.css'
`$3
js
import { showMessage, showInfo, showSuccess, showWarning, showError } from '@nextcloud/dialogs'
import '@nextcloud/dialogs/style.css'
`If you using
you don't need any svg or scss loader in you projects anymore.There are different toast styles available, that are exposed in separate functions:
`
showMessage('Message without a specific styling')
showInfo('Information')
showSuccess('Success')
showWarning('Warning')
showError('Error')
There are several options that can be passed in as a second parameter, like the timeout of a toast:
showError('This is an error shown without a timeout', { timeout: -1 })
A full list of available options can be found in the documentation.
$3
To spawn the FilePicker provided by the library you have to use the FilePickerBuilder.
The FilePickerBuilder is included in the main entry point of this library, so you can use it like this:js
import { getFilePickerBuilder } from '@nextcloud/dialogs'
const filepicker = getFilePickerBuilder('Pick plain text files')
.addMimeTypeFilter('text/plain')
.addButton({
label: 'Pick',
callback: (nodes) => console.log('Picked', nodes),
})
.build()// You get the file nodes by the button callback, but also the pick yields the paths of the picked files
const paths = await filepicker.pick()
`Development
$3
For testing all components provide attributes as selectors, so the tests are independent from code or styling changes.$3
data-testid | Intended purpose
----------------------|-----------------
select-all-checkbox | The select all checkbox of the file list
file-list-row | A row in the file list (tr), can be identified by data-filename
| Checkbox for selecting a row
row-name | Name of the row / file$3
- Pull the latest changes from
main or stableX
- Checkout a new branch with the tag name (e.g ): git checkout -b v
- Run (npm version minor --no-git-tag-version if minor).
This will return a new version name, make sure it matches what you expect
- Generate the changelog content from the release page.
Create a draft release, select the previous tag, click generate then paste the content to the CHANGELOG.md file
1. adjust the links to the merged pull requests and authors so that the changelog also works outside of GitHub
by running npm run prerelease:format-changelog.
This will apply this regex: by @([^ ]+) in ((https://github.com/)nextcloud-libraries/nextcloud-dialogs/pull/(\d+))
Which this as the replacement:
2. use the the version as tag AND title (e.g