[READ-ONLY] Mirror of https://github.com/probablykasper/modal-svelte.
svelte
Format
+82
-82
+29
-29
README.md
+29
-29
README.md
···
26
26
27
27
```svelte
28
28
<script>
29
-
import Modal from 'modal-svelte'
29
+
import Modal from 'modal-svelte'
30
30
</script>
31
31
32
32
<Modal title="Hello world!" onCancel={() => (open = false)}>
33
-
<p>Content</p>
33
+
<p>Content</p>
34
34
</Modal>
35
35
```
36
36
···
40
40
41
41
```svelte
42
42
<Modal
43
-
title="Hello world!"
44
-
onCancel={() => (open = false)}
45
-
form={() => submitMyForm()}
46
-
noEscapeHandling
47
-
noCloseIcon
48
-
class="w-full"
43
+
title="Hello world!"
44
+
onCancel={() => (open = false)}
45
+
form={() => submitMyForm()}
46
+
noEscapeHandling
47
+
noCloseIcon
48
+
class="w-full"
49
49
>
50
-
<p>Content</p>
51
-
<input />
50
+
<p>Content</p>
51
+
<input />
52
52
53
-
<!-- If you want to bring focus to a specific element -->
54
-
<input autofocus />
53
+
<!-- If you want to bring focus to a specific element -->
54
+
<input autofocus />
55
55
56
-
<div slot="buttons">
57
-
<button type="submit">Submit</button>
58
-
</div>
56
+
<div slot="buttons">
57
+
<button type="submit">Submit</button>
58
+
</div>
59
59
60
60
</Modal>
61
61
```
62
62
63
63
```css
64
64
:root {
65
-
--modal-bg: #fff;
66
-
color: #000;
65
+
--modal-bg: #fff;
66
+
color: #000;
67
67
}
68
68
```
69
69
···
85
85
86
86
1. Update `CHANGELOG.md`
87
87
2. Check for errors
88
-
```
89
-
npm run lint
90
-
```
88
+
```
89
+
npm run lint
90
+
```
91
91
3. Bump the version number
92
-
```
93
-
npm version --no-git-tag <version>
94
-
```
92
+
```
93
+
npm version --no-git-tag <version>
94
+
```
95
95
4. Generate the package
96
-
```
97
-
npm run build:package
98
-
```
96
+
```
97
+
npm run build:package
98
+
```
99
99
5. Publish the package
100
-
```
101
-
npm publish
102
-
```
100
+
```
101
+
npm publish
102
+
```
103
103
6. Commit with a tag in format "v#.#.#"
104
104
7. Create GitHub release with release notes
+37
-37
src/routes/+page.svelte
+37
-37
src/routes/+page.svelte
···
45
45
{/if}
46
46
47
47
<style lang="sass">
48
-
:global(html, body)
49
-
margin: 0px
50
-
color: #ffffff
51
-
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
52
-
.center
53
-
display: flex
54
-
flex-direction: column
55
-
align-items: center
56
-
min-height: 100vh
57
-
padding: 20px 0px
58
-
box-sizing: border-box
59
-
font-size: 1rem
60
-
background-color: #111318
61
-
nav
62
-
cursor: default
63
-
a
64
-
padding: 4px 2px
65
-
margin: 0px 2px
66
-
font-size: 16px
67
-
text-decoration: none
68
-
color: hsla(0, 100%, 100%, 0.75)
69
-
&:hover
70
-
color: #ffffff
71
-
button.show
72
-
margin-bottom: 20px
73
-
.row
74
-
margin-top: 8px
75
-
display: flex
76
-
align-items: center
77
-
height: 24px
78
-
width: 100%
79
-
gap: 20px
80
-
input
81
-
margin-left: auto
82
-
p
83
-
max-width: 500px
84
-
margin: 0px
48
+
:global(html, body)
49
+
margin: 0px
50
+
color: #ffffff
51
+
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
52
+
.center
53
+
display: flex
54
+
flex-direction: column
55
+
align-items: center
56
+
min-height: 100vh
57
+
padding: 20px 0px
58
+
box-sizing: border-box
59
+
font-size: 1rem
60
+
background-color: #111318
61
+
nav
62
+
cursor: default
63
+
a
64
+
padding: 4px 2px
65
+
margin: 0px 2px
66
+
font-size: 16px
67
+
text-decoration: none
68
+
color: hsla(0, 100%, 100%, 0.75)
69
+
&:hover
70
+
color: #ffffff
71
+
button.show
72
+
margin-bottom: 20px
73
+
.row
74
+
margin-top: 8px
75
+
display: flex
76
+
align-items: center
77
+
height: 24px
78
+
width: 100%
79
+
gap: 20px
80
+
input
81
+
margin-left: auto
82
+
p
83
+
max-width: 500px
84
+
margin: 0px
85
85
</style>
+15
-15
tsconfig.json
+15
-15
tsconfig.json
···
1
1
{
2
-
"extends": "./.svelte-kit/tsconfig.json",
3
-
"compilerOptions": {
4
-
"allowJs": true,
5
-
"checkJs": true,
6
-
"esModuleInterop": true,
7
-
"forceConsistentCasingInFileNames": true,
8
-
"resolveJsonModule": true,
9
-
"skipLibCheck": true,
10
-
"sourceMap": true,
11
-
"strict": true
12
-
}
13
-
// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
14
-
//
15
-
// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
16
-
// from the referenced tsconfig.json - TypeScript does not merge them in
2
+
"extends": "./.svelte-kit/tsconfig.json",
3
+
"compilerOptions": {
4
+
"allowJs": true,
5
+
"checkJs": true,
6
+
"esModuleInterop": true,
7
+
"forceConsistentCasingInFileNames": true,
8
+
"resolveJsonModule": true,
9
+
"skipLibCheck": true,
10
+
"sourceMap": true,
11
+
"strict": true
12
+
}
13
+
// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
14
+
//
15
+
// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
16
+
// from the referenced tsconfig.json - TypeScript does not merge them in
17
17
}