Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/probablykasper/modal-svelte
https://github.com/probablykasper/modal-svelte
svelte
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/probablykasper/modal-svelte
- Owner: probablykasper
- License: mit
- Created: 2022-12-11T14:46:41.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2024-01-10T03:31:28.000Z (about 1 year ago)
- Last Synced: 2024-10-10T16:09:43.820Z (4 months ago)
- Topics: svelte
- Language: Svelte
- Homepage:
- Size: 810 KB
- Stars: 9
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Modal Svelte
Modal component for Svelte
[](https://npmjs.com/package/modal-svelte)
[](LICENSE)
[](https://npmjs.com/package/modal-svelte)
[](https://github.com/probablykasper/modal-svelte/actions/workflows/test.yml)Features:
- Autofocus
- Focus trapping
- Returns focus after closing
- Form mode[Demo](https://modal-svelte.kasper.space/)
## Install
```
npm install modal-svelte
```## Usage
```svelte
import Modal from 'modal-svelte'
(open = false)}>
Content
```
### Functionality
This shows all available functionality
```svelte
(open = false)}
form={() => submitMyForm()}
noEscapeHandling
noCloseIcon
class="w-full"
>
Content
Submit
```
```css
:root {
--modal-bg: #fff;
color: #000;
}
```## Dev instructions
### Get started
1. Install Node.js
2. Run `npm install`### Commands
- `npm run dev`: Start in dev mode
- `npm run build`: Build
- `npm run lint`: Lint
- `npm run format`: Format### Publish new version
1. Update `CHANGELOG.md`
2. Check for errors
```
npm run lint
```
3. Bump the version number
```
npm version --no-git-tag
```
4. Generate the package
```
npm run build:package
```
5. Publish the package
```
npm publish
```
6. Commit with a tag in format "v#.#.#"
7. Create GitHub release with release notes