@ghostsui/svelte 1.0.0-beta.0 → 1.0.0-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/modal/Modal.svelte +167 -0
- package/dist/modal/Modal.svelte.d.ts +84 -0
- package/dist/modal/index.d.ts +1 -0
- package/dist/modal/index.js +1 -0
- package/package.json +38 -2
|
@@ -0,0 +1,167 @@
|
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
/**
|
|
3
|
+
* Context that can be used to interact with the modal from the snippet.
|
|
4
|
+
*/
|
|
5
|
+
export interface SnippetContext {
|
|
6
|
+
/**
|
|
7
|
+
* Cause the model to open
|
|
8
|
+
*/
|
|
9
|
+
open: () => void;
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
* Cause the model to close
|
|
13
|
+
*/
|
|
14
|
+
close: () => void;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
/**
|
|
18
|
+
* The content of the modal
|
|
19
|
+
*/
|
|
20
|
+
export type ChildrenSnippet = Snippet<[ctx: SnippetContext]>;
|
|
21
|
+
|
|
22
|
+
/**
|
|
23
|
+
* Snippet for the button that opens the modal.
|
|
24
|
+
*
|
|
25
|
+
* @param attrs - These props must be spread on the button to open the modal.
|
|
26
|
+
* @param ctx - {@link SnippetContext}
|
|
27
|
+
*
|
|
28
|
+
* @example
|
|
29
|
+
*
|
|
30
|
+
* ```svelte
|
|
31
|
+
* {#snippet activator(attrs, ctx)}
|
|
32
|
+
* <button {...attrs} title="Open Modal">
|
|
33
|
+
* Open Modal
|
|
34
|
+
* </button>
|
|
35
|
+
* {/snippet}
|
|
36
|
+
* ``
|
|
37
|
+
*/
|
|
38
|
+
export type ActivatorSnippet = Snippet<[attrs: Dialog['trigger'], ctx: SnippetContext]>;
|
|
39
|
+
|
|
40
|
+
/**
|
|
41
|
+
* Modal Props
|
|
42
|
+
*/
|
|
43
|
+
export interface Props {
|
|
44
|
+
/**
|
|
45
|
+
* Controls whether the model is open/closed.
|
|
46
|
+
* @bindable
|
|
47
|
+
*/
|
|
48
|
+
open?: boolean;
|
|
49
|
+
|
|
50
|
+
/**
|
|
51
|
+
* The content of the modal, see @link {ChildrenSnippet};
|
|
52
|
+
*/
|
|
53
|
+
children: ChildrenSnippet;
|
|
54
|
+
|
|
55
|
+
/**
|
|
56
|
+
* The activator of the modal, see @link {ActivatorSnippet};
|
|
57
|
+
*/
|
|
58
|
+
activator?: ActivatorSnippet;
|
|
59
|
+
|
|
60
|
+
/**
|
|
61
|
+
* Callback to run when the modal is opened.
|
|
62
|
+
*/
|
|
63
|
+
onOpen?: () => void;
|
|
64
|
+
|
|
65
|
+
/**
|
|
66
|
+
* Callback to run when the modal is closed.
|
|
67
|
+
*/
|
|
68
|
+
onClose?: () => void;
|
|
69
|
+
}
|
|
70
|
+
</script>
|
|
71
|
+
|
|
72
|
+
<!--
|
|
73
|
+
@component
|
|
74
|
+
A Modal (dialog) that uses Melt's Dialog under the hood.
|
|
75
|
+
|
|
76
|
+
@example
|
|
77
|
+
|
|
78
|
+
```svelte
|
|
79
|
+
<script lang="ts">
|
|
80
|
+
import { Modal } from '@ghostsui/svelte/modal';
|
|
81
|
+
</script>
|
|
82
|
+
|
|
83
|
+
<Modal>
|
|
84
|
+
{#snippet activator(attrs, ctx)}
|
|
85
|
+
<button {...attrs} title="Open Modal"> Open Modal </button>
|
|
86
|
+
{/snippet}
|
|
87
|
+
|
|
88
|
+
<h2>Hello World</h2>
|
|
89
|
+
</Modal>
|
|
90
|
+
```
|
|
91
|
+
-->
|
|
92
|
+
|
|
93
|
+
<script lang="ts">
|
|
94
|
+
import { Dialog } from 'melt/builders';
|
|
95
|
+
import type { Snippet } from 'svelte';
|
|
96
|
+
|
|
97
|
+
let { open = $bindable(false), children, activator, onOpen, onClose }: Props = $props();
|
|
98
|
+
|
|
99
|
+
const dialog = new Dialog({
|
|
100
|
+
onOpenChange(newState) {
|
|
101
|
+
if (newState !== open) {
|
|
102
|
+
open = newState;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
if (newState) {
|
|
106
|
+
onOpen?.();
|
|
107
|
+
} else {
|
|
108
|
+
onClose?.();
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
});
|
|
112
|
+
|
|
113
|
+
// todo patch upstream
|
|
114
|
+
$effect(() => {
|
|
115
|
+
if (dialog.open !== open) {
|
|
116
|
+
dialog.open = open;
|
|
117
|
+
}
|
|
118
|
+
});
|
|
119
|
+
|
|
120
|
+
const context = $derived<SnippetContext>({
|
|
121
|
+
close: () => (dialog.open = false),
|
|
122
|
+
open: () => (dialog.open = true)
|
|
123
|
+
});
|
|
124
|
+
</script>
|
|
125
|
+
|
|
126
|
+
{#if activator}
|
|
127
|
+
{@render activator(dialog.trigger, context)}
|
|
128
|
+
{/if}
|
|
129
|
+
|
|
130
|
+
<div {...dialog.overlay}></div>
|
|
131
|
+
|
|
132
|
+
<dialog {...dialog.content}>
|
|
133
|
+
{@render children(context)}
|
|
134
|
+
</dialog>
|
|
135
|
+
|
|
136
|
+
<style>
|
|
137
|
+
[data-melt-dialog-content] {
|
|
138
|
+
opacity: 0;
|
|
139
|
+
scale: 0.95;
|
|
140
|
+
transition:
|
|
141
|
+
opacity 0.2s ease-in,
|
|
142
|
+
scale 0.2s ease-in;
|
|
143
|
+
|
|
144
|
+
&::backdrop {
|
|
145
|
+
display: none;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
&[data-open] {
|
|
149
|
+
opacity: 1;
|
|
150
|
+
scale: 1;
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
[data-melt-dialog-overlay] {
|
|
155
|
+
position: fixed;
|
|
156
|
+
width: 100%;
|
|
157
|
+
height: 100%;
|
|
158
|
+
|
|
159
|
+
background: rgba(18, 18, 20, 0.8);
|
|
160
|
+
transition: opacity 0.2s ease-in;
|
|
161
|
+
opacity: 0;
|
|
162
|
+
|
|
163
|
+
&[data-open] {
|
|
164
|
+
opacity: 1;
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
</style>
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Context that can be used to interact with the modal from the snippet.
|
|
3
|
+
*/
|
|
4
|
+
export interface SnippetContext {
|
|
5
|
+
/**
|
|
6
|
+
* Cause the model to open
|
|
7
|
+
*/
|
|
8
|
+
open: () => void;
|
|
9
|
+
/**
|
|
10
|
+
* Cause the model to close
|
|
11
|
+
*/
|
|
12
|
+
close: () => void;
|
|
13
|
+
}
|
|
14
|
+
/**
|
|
15
|
+
* The content of the modal
|
|
16
|
+
*/
|
|
17
|
+
export type ChildrenSnippet = Snippet<[ctx: SnippetContext]>;
|
|
18
|
+
/**
|
|
19
|
+
* Snippet for the button that opens the modal.
|
|
20
|
+
*
|
|
21
|
+
* @param attrs - These props must be spread on the button to open the modal.
|
|
22
|
+
* @param ctx - {@link SnippetContext}
|
|
23
|
+
*
|
|
24
|
+
* @example
|
|
25
|
+
*
|
|
26
|
+
* ```svelte
|
|
27
|
+
* {#snippet activator(attrs, ctx)}
|
|
28
|
+
* <button {...attrs} title="Open Modal">
|
|
29
|
+
* Open Modal
|
|
30
|
+
* </button>
|
|
31
|
+
* {/snippet}
|
|
32
|
+
* ``
|
|
33
|
+
*/
|
|
34
|
+
export type ActivatorSnippet = Snippet<[attrs: Dialog['trigger'], ctx: SnippetContext]>;
|
|
35
|
+
/**
|
|
36
|
+
* Modal Props
|
|
37
|
+
*/
|
|
38
|
+
export interface Props {
|
|
39
|
+
/**
|
|
40
|
+
* Controls whether the model is open/closed.
|
|
41
|
+
* @bindable
|
|
42
|
+
*/
|
|
43
|
+
open?: boolean;
|
|
44
|
+
/**
|
|
45
|
+
* The content of the modal, see @link {ChildrenSnippet};
|
|
46
|
+
*/
|
|
47
|
+
children: ChildrenSnippet;
|
|
48
|
+
/**
|
|
49
|
+
* The activator of the modal, see @link {ActivatorSnippet};
|
|
50
|
+
*/
|
|
51
|
+
activator?: ActivatorSnippet;
|
|
52
|
+
/**
|
|
53
|
+
* Callback to run when the modal is opened.
|
|
54
|
+
*/
|
|
55
|
+
onOpen?: () => void;
|
|
56
|
+
/**
|
|
57
|
+
* Callback to run when the modal is closed.
|
|
58
|
+
*/
|
|
59
|
+
onClose?: () => void;
|
|
60
|
+
}
|
|
61
|
+
import { Dialog } from 'melt/builders';
|
|
62
|
+
import type { Snippet } from 'svelte';
|
|
63
|
+
/**
|
|
64
|
+
* A Modal (dialog) that uses Melt's Dialog under the hood.
|
|
65
|
+
*
|
|
66
|
+
* @example
|
|
67
|
+
*
|
|
68
|
+
* ```svelte
|
|
69
|
+
* <script lang="ts">
|
|
70
|
+
* import { Modal } from '@ghostsui/svelte/modal';
|
|
71
|
+
* </script>
|
|
72
|
+
*
|
|
73
|
+
* <Modal>
|
|
74
|
+
* {#snippet activator(attrs, ctx)}
|
|
75
|
+
* <button {...attrs} title="Open Modal"> Open Modal </button>
|
|
76
|
+
* {/snippet}
|
|
77
|
+
*
|
|
78
|
+
* <h2>Hello World</h2>
|
|
79
|
+
* </Modal>
|
|
80
|
+
* ```
|
|
81
|
+
*/
|
|
82
|
+
declare const Modal: import("svelte").Component<Props, {}, "open">;
|
|
83
|
+
type Modal = ReturnType<typeof Modal>;
|
|
84
|
+
export default Modal;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { type Props, default as Modal, type SnippetContext, type ChildrenSnippet, type ActivatorSnippet } from './Modal.svelte';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as Modal } from './Modal.svelte';
|
package/package.json
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ghostsui/svelte",
|
|
3
|
-
"version": "1.0.0-beta.
|
|
3
|
+
"version": "1.0.0-beta.1",
|
|
4
|
+
"type": "module",
|
|
4
5
|
"keywords": [
|
|
5
6
|
"svelte"
|
|
6
7
|
],
|
|
@@ -18,8 +19,43 @@
|
|
|
18
19
|
"url": "https://ghostdev.xyz"
|
|
19
20
|
},
|
|
20
21
|
"license": "MIT",
|
|
21
|
-
"files": [
|
|
22
|
+
"files": [
|
|
23
|
+
"dist",
|
|
24
|
+
"!dist/**/*.test.*",
|
|
25
|
+
"!dist/**/*.spec.*"
|
|
26
|
+
],
|
|
27
|
+
"sideEffects": [
|
|
28
|
+
"**/*.css"
|
|
29
|
+
],
|
|
22
30
|
"publishConfig": {
|
|
23
31
|
"access": "public"
|
|
32
|
+
},
|
|
33
|
+
"exports": {
|
|
34
|
+
"./modal": {
|
|
35
|
+
"types": "./dist/modal/index.d.ts",
|
|
36
|
+
"svelte": "./dist/modal/index.js"
|
|
37
|
+
}
|
|
38
|
+
},
|
|
39
|
+
"peerDependencies": {
|
|
40
|
+
"svelte": "^5.0.0",
|
|
41
|
+
"ghostsui": "^2.0.0-beta.8"
|
|
42
|
+
},
|
|
43
|
+
"devDependencies": {
|
|
44
|
+
"@sveltejs/package": "^2.5.7",
|
|
45
|
+
"prettier": "^3.8.1",
|
|
46
|
+
"prettier-plugin-svelte": "^3.4.1",
|
|
47
|
+
"publint": "^0.3.17",
|
|
48
|
+
"svelte": "^5.51.0",
|
|
49
|
+
"svelte-check": "^4.3.6",
|
|
50
|
+
"typescript": "^5.9.3"
|
|
51
|
+
},
|
|
52
|
+
"dependencies": {
|
|
53
|
+
"melt": "^0.44.0"
|
|
54
|
+
},
|
|
55
|
+
"scripts": {
|
|
56
|
+
"build": "svelte-package --input src",
|
|
57
|
+
"dev": "pnpm build --watch",
|
|
58
|
+
"check": "svelte-check --tsconfig ./tsconfig.json",
|
|
59
|
+
"lint": "publint"
|
|
24
60
|
}
|
|
25
61
|
}
|