https://github.com/probablykasper/modal-svelte

https://github.com/probablykasper/modal-svelte

svelte

Last synced: 20 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/probablykasper/modal-svelte
• Owner: probablykasper
• License: mit
• Created: 2022-12-11T14:46:41.000Z (almost 2 years ago)
• Default Branch: master
• Last Pushed: 2024-01-10T03:31:28.000Z (10 months ago)
• Last Synced: 2024-10-10T16:09:43.820Z (28 days 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

[![NPM](https://img.shields.io/npm/v/modal-svelte.svg)](https://npmjs.com/package/modal-svelte)

[![License](https://img.shields.io/npm/l/modal-svelte.svg)](LICENSE)

[![NPM Downloads](https://img.shields.io/npm/dm/modal-svelte.svg)](https://npmjs.com/package/modal-svelte)

[![Test](https://github.com/probablykasper/modal-svelte/actions/workflows/test.yml/badge.svg)](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