@sveltia/ui 0.1.5 → 0.2.0
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/package.json +22 -11
- package/package/components/composite/calendar.svelte +0 -240
- package/package/components/composite/calendar.svelte.d.ts +0 -20
- package/package/components/composite/checkbox-group.svelte +0 -43
- package/package/components/composite/checkbox-group.svelte.d.ts +0 -24
- package/package/components/composite/combobox.svelte +0 -206
- package/package/components/composite/combobox.svelte.d.ts +0 -32
- package/package/components/composite/disclosure.svelte +0 -60
- package/package/components/composite/disclosure.svelte.d.ts +0 -26
- package/package/components/composite/grid.svelte +0 -24
- package/package/components/composite/grid.svelte.d.ts +0 -22
- package/package/components/composite/listbox.svelte +0 -63
- package/package/components/composite/listbox.svelte.d.ts +0 -39
- package/package/components/composite/menu-item-group.svelte +0 -31
- package/package/components/composite/menu-item-group.svelte.d.ts +0 -23
- package/package/components/composite/menu.svelte +0 -44
- package/package/components/composite/menu.svelte.d.ts +0 -32
- package/package/components/composite/radio-button-group.svelte +0 -45
- package/package/components/composite/radio-button-group.svelte.d.ts +0 -27
- package/package/components/composite/select-button-group.svelte +0 -71
- package/package/components/composite/select-button-group.svelte.d.ts +0 -31
- package/package/components/composite/select.svelte +0 -34
- package/package/components/composite/select.svelte.d.ts +0 -26
- package/package/components/composite/tab-list.svelte +0 -76
- package/package/components/composite/tab-list.svelte.d.ts +0 -42
- package/package/components/core/button.svelte +0 -205
- package/package/components/core/button.svelte.d.ts +0 -78
- package/package/components/core/checkbox.svelte +0 -104
- package/package/components/core/checkbox.svelte.d.ts +0 -30
- package/package/components/core/dialog.svelte +0 -274
- package/package/components/core/dialog.svelte.d.ts +0 -45
- package/package/components/core/grid-cell.svelte +0 -14
- package/package/components/core/grid-cell.svelte.d.ts +0 -21
- package/package/components/core/group.svelte +0 -31
- package/package/components/core/group.svelte.d.ts +0 -23
- package/package/components/core/icon.svelte +0 -21
- package/package/components/core/icon.svelte.d.ts +0 -20
- package/package/components/core/menu-button.svelte +0 -57
- package/package/components/core/menu-button.svelte.d.ts +0 -30
- package/package/components/core/menu-item-checkbox.svelte +0 -24
- package/package/components/core/menu-item-checkbox.svelte.d.ts +0 -24
- package/package/components/core/menu-item-radio.svelte +0 -19
- package/package/components/core/menu-item-radio.svelte.d.ts +0 -24
- package/package/components/core/menu-item.svelte +0 -113
- package/package/components/core/menu-item.svelte.d.ts +0 -29
- package/package/components/core/number-input.svelte +0 -112
- package/package/components/core/number-input.svelte.d.ts +0 -28
- package/package/components/core/option.svelte +0 -59
- package/package/components/core/option.svelte.d.ts +0 -35
- package/package/components/core/password-input.svelte +0 -81
- package/package/components/core/password-input.svelte.d.ts +0 -25
- package/package/components/core/radio-button.svelte +0 -93
- package/package/components/core/radio-button.svelte.d.ts +0 -27
- package/package/components/core/row-group.svelte +0 -14
- package/package/components/core/row-group.svelte.d.ts +0 -21
- package/package/components/core/row.svelte +0 -14
- package/package/components/core/row.svelte.d.ts +0 -23
- package/package/components/core/search-bar.svelte +0 -90
- package/package/components/core/search-bar.svelte.d.ts +0 -35
- package/package/components/core/select-button.svelte +0 -31
- package/package/components/core/select-button.svelte.d.ts +0 -35
- package/package/components/core/separator.svelte +0 -28
- package/package/components/core/separator.svelte.d.ts +0 -20
- package/package/components/core/slider.svelte +0 -270
- package/package/components/core/slider.svelte.d.ts +0 -35
- package/package/components/core/spacer.svelte +0 -22
- package/package/components/core/spacer.svelte.d.ts +0 -19
- package/package/components/core/switch.svelte +0 -80
- package/package/components/core/switch.svelte.d.ts +0 -27
- package/package/components/core/tab-panel.svelte +0 -23
- package/package/components/core/tab-panel.svelte.d.ts +0 -25
- package/package/components/core/tab.svelte +0 -22
- package/package/components/core/tab.svelte.d.ts +0 -31
- package/package/components/core/text-area.svelte +0 -90
- package/package/components/core/text-area.svelte.d.ts +0 -43
- package/package/components/core/text-input.svelte +0 -145
- package/package/components/core/text-input.svelte.d.ts +0 -53
- package/package/components/core/toolbar.svelte +0 -74
- package/package/components/core/toolbar.svelte.d.ts +0 -26
- package/package/components/editor/markdown.svelte +0 -78
- package/package/components/editor/markdown.svelte.d.ts +0 -19
- package/package/components/helpers/group.d.ts +0 -37
- package/package/components/helpers/group.js +0 -246
- package/package/components/helpers/popup.d.ts +0 -26
- package/package/components/helpers/popup.js +0 -154
- package/package/components/helpers/util.d.ts +0 -1
- package/package/components/helpers/util.js +0 -8
- package/package/components/util/app-shell.svelte +0 -284
- package/package/components/util/app-shell.svelte.d.ts +0 -28
- package/package/components/util/misc.d.ts +0 -2
- package/package/components/util/misc.js +0 -22
- package/package/components/util/popup.svelte +0 -145
- package/package/components/util/popup.svelte.d.ts +0 -37
- package/package/components/util/portal.svelte +0 -34
- package/package/components/util/portal.svelte.d.ts +0 -21
- package/package/index.d.ts +0 -41
- package/package/index.js +0 -66
- package/package/locales/en.d.ts +0 -42
- package/package/locales/en.js +0 -41
- package/package/locales/ja.d.ts +0 -42
- package/package/locales/ja.js +0 -41
- package/package/styles/core.scss +0 -134
- package/package/styles/variables.scss +0 -114
- package/package/typedef.d.ts +0 -0
- package/package/typedef.js +0 -0
|
@@ -1,284 +0,0 @@
|
|
|
1
|
-
<!--
|
|
2
|
-
@component
|
|
3
|
-
Provide an application’s shell that makes the web app more like a native app. It also handles the
|
|
4
|
-
dark/light mode switching. This component has to be placed directly under `<body>` (or
|
|
5
|
-
`<div style="display:contents">` in a SvelteKit app).
|
|
6
|
-
-->
|
|
7
|
-
<script>
|
|
8
|
-
import { onMount } from 'svelte';
|
|
9
|
-
|
|
10
|
-
onMount(() => {
|
|
11
|
-
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
|
12
|
-
const { dataset } = document.documentElement;
|
|
13
|
-
|
|
14
|
-
const applyTheme = () => {
|
|
15
|
-
if (dataset.autoTheming !== 'false') {
|
|
16
|
-
dataset.theme = mediaQuery.matches ? 'dark' : 'light';
|
|
17
|
-
}
|
|
18
|
-
};
|
|
19
|
-
|
|
20
|
-
applyTheme();
|
|
21
|
-
|
|
22
|
-
mediaQuery.onchange = () => {
|
|
23
|
-
applyTheme();
|
|
24
|
-
};
|
|
25
|
-
});
|
|
26
|
-
</script>
|
|
27
|
-
|
|
28
|
-
<div
|
|
29
|
-
class="sui app-shell"
|
|
30
|
-
on:dragover|preventDefault
|
|
31
|
-
on:drop|preventDefault
|
|
32
|
-
on:contextmenu={(event) => {
|
|
33
|
-
// Disable the native context menu
|
|
34
|
-
if (!event.target?.matches('input[type="text"], textarea')) {
|
|
35
|
-
event.preventDefault();
|
|
36
|
-
}
|
|
37
|
-
}}
|
|
38
|
-
>
|
|
39
|
-
<slot />
|
|
40
|
-
</div>
|
|
41
|
-
|
|
42
|
-
<style global>@import url("https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300;0,600;1,300&family=Noto+Sans+Mono&display=swap");
|
|
43
|
-
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block");
|
|
44
|
-
:global(:root) {
|
|
45
|
-
--hue: 210;
|
|
46
|
-
--highlight-foreground-color: hsl(var(--foreground-color-1-hsl));
|
|
47
|
-
--primary-foreground-color: hsl(var(--foreground-color-2-hsl));
|
|
48
|
-
--secondary-foreground-color: hsl(var(--foreground-color-3-hsl));
|
|
49
|
-
--ternary-foreground-color: hsl(var(--foreground-color-3-hsl));
|
|
50
|
-
--disabled-foreground-color: hsl(var(--foreground-color-4-hsl));
|
|
51
|
-
--danger-foreground-color: hsl(var(--danger-color));
|
|
52
|
-
--highlight-background-color: hsl(var(--background-color-5-hsl));
|
|
53
|
-
--content-background-color: hsl(var(--background-color-1-hsl));
|
|
54
|
-
--primary-background-color: hsl(var(--background-color-2-hsl));
|
|
55
|
-
--secondary-background-color: hsl(var(--background-color-3-hsl));
|
|
56
|
-
--secondary-background-color-translucent: hsl(var(--background-color-3-hsl) / 88%);
|
|
57
|
-
--ternary-background-color: hsl(var(--background-color-4-hsl));
|
|
58
|
-
--control-background-color: hsl(var(--background-color-1-hsl));
|
|
59
|
-
--disabled-background-color: hsl(var(--background-color-4-hsl));
|
|
60
|
-
--danger-background-color: hsl(var(--danger-color));
|
|
61
|
-
--primary-border-color: hsl(var(--border-color-1-hsl));
|
|
62
|
-
--secondary-border-color: hsl(var(--border-color-2-hsl));
|
|
63
|
-
--control-border-color: hsl(var(--border-color-2-hsl));
|
|
64
|
-
--popup-shadow-color: hsl(var(--shadow-color) / 40%);
|
|
65
|
-
--popup-backdrop-color: hsl(var(--shadow-color) / 40%);
|
|
66
|
-
--default-font-family: "Merriweather Sans", sans-serif;
|
|
67
|
-
--default-font-size: 13px;
|
|
68
|
-
--default-font-weight-regular: 300;
|
|
69
|
-
--default-font-weight-bold: 600;
|
|
70
|
-
--monospace-font-family: "Noto Sans Mono", monospace;
|
|
71
|
-
--monospace-font-size: 13px;
|
|
72
|
-
--control--small--border-width: 1px;
|
|
73
|
-
--control--small--border-radius: 2px;
|
|
74
|
-
--control--small--height: 24px;
|
|
75
|
-
--control--medium--border-width: 1px;
|
|
76
|
-
--control--medium--border-radius: 4px;
|
|
77
|
-
--control--medium--height: 32px;
|
|
78
|
-
--control--large--border-width: 1px;
|
|
79
|
-
--control--large--border-radius: 8px;
|
|
80
|
-
--control--large--height: 40px;
|
|
81
|
-
--button--small--border-radius: var(--control--small--border-radius);
|
|
82
|
-
--button--small--height: var(--control--small--height);
|
|
83
|
-
--button--medium--border-radius: var(--control--medium--border-radius);
|
|
84
|
-
--button--medium--height: var(--control--medium--height);
|
|
85
|
-
--button--large--border-radius: var(--control--large--border-radius);
|
|
86
|
-
--button--large--height: var(--control--large--height);
|
|
87
|
-
--option--small--border-radius: var(--control--small--border-radius);
|
|
88
|
-
--option--small--height: var(--control--small--height);
|
|
89
|
-
--option--medium--border-radius: var(--control--medium--border-radius);
|
|
90
|
-
--option--medium--height: var(--control--medium--height);
|
|
91
|
-
--option--large--border-radius: var(--control--large--border-radius);
|
|
92
|
-
--option--large--height: var(--control--large--height);
|
|
93
|
-
--input--small--border-radius: var(--control--small--border-radius);
|
|
94
|
-
--input--small--height: var(--control--small--height);
|
|
95
|
-
--input--medium--border-radius: var(--control--medium--border-radius);
|
|
96
|
-
--input--medium--height: var(--control--medium--height);
|
|
97
|
-
--input--large--border-radius: var(--control--large--border-radius);
|
|
98
|
-
--input--large--height: var(--control--large--height);
|
|
99
|
-
--tab--small--height: var(--control--small--height);
|
|
100
|
-
--tab--medium--height: var(--control--medium--height);
|
|
101
|
-
--tab--large--height: var(--control--large--height);
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
:global(:root[data-theme=light]) {
|
|
105
|
-
--foreground-color-1-hsl: var(--hue) 5% 0%;
|
|
106
|
-
--foreground-color-2-hsl: var(--hue) 5% 20%;
|
|
107
|
-
--foreground-color-3-hsl: var(--hue) 5% 40%;
|
|
108
|
-
--foreground-color-4-hsl: var(--hue) 5% 60%;
|
|
109
|
-
--border-color-1-hsl: var(--hue) 5% 75%;
|
|
110
|
-
--border-color-2-hsl: var(--hue) 5% 80%;
|
|
111
|
-
--background-color-1-hsl: var(--hue) 5% 100%;
|
|
112
|
-
--background-color-2-hsl: var(--hue) 5% 98%;
|
|
113
|
-
--background-color-3-hsl: var(--hue) 5% 96%;
|
|
114
|
-
--background-color-4-hsl: var(--hue) 5% 94%;
|
|
115
|
-
--background-color-5-hsl: var(--hue) 5% 80%;
|
|
116
|
-
--shadow-color: var(--hue) 10% 0%;
|
|
117
|
-
--primary-accent-color: hsl(var(--hue) 80% 45%);
|
|
118
|
-
--primary-accent-color-lighter: hsl(var(--hue) 80% 40%);
|
|
119
|
-
--primary-accent-color-darker: hsl(var(--hue) 80% 50%);
|
|
120
|
-
--primary-accent-color-foreground: hsl(var(--hue) 10% 100%);
|
|
121
|
-
--danger-color: 0 68% 42%;
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
:global(:root[data-theme=dark]) {
|
|
125
|
-
--foreground-color-1-hsl: var(--hue) 10% 100%;
|
|
126
|
-
--foreground-color-2-hsl: var(--hue) 10% 80%;
|
|
127
|
-
--foreground-color-3-hsl: var(--hue) 10% 60%;
|
|
128
|
-
--foreground-color-4-hsl: var(--hue) 10% 40%;
|
|
129
|
-
--border-color-1-hsl: var(--hue) 10% 25%;
|
|
130
|
-
--border-color-2-hsl: var(--hue) 10% 20%;
|
|
131
|
-
--background-color-1-hsl: var(--hue) 10% 8%;
|
|
132
|
-
--background-color-2-hsl: var(--hue) 10% 10%;
|
|
133
|
-
--background-color-3-hsl: var(--hue) 10% 12%;
|
|
134
|
-
--background-color-4-hsl: var(--hue) 10% 14%;
|
|
135
|
-
--background-color-5-hsl: var(--hue) 10% 18%;
|
|
136
|
-
--shadow-color: var(--hue) 10% 0%;
|
|
137
|
-
--primary-accent-color: hsl(var(--hue) 100% 45%);
|
|
138
|
-
--primary-accent-color-lighter: hsl(var(--hue) 100% 50%);
|
|
139
|
-
--primary-accent-color-darker: hsl(var(--hue) 100% 40%);
|
|
140
|
-
--primary-accent-color-foreground: hsl(var(--hue) 10% 100%);
|
|
141
|
-
--danger-color: 0 68% 42%;
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
:global(.material-symbols-outlined) {
|
|
145
|
-
font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
|
|
146
|
-
}
|
|
147
|
-
|
|
148
|
-
:global(*) {
|
|
149
|
-
scroll-behavior: smooth;
|
|
150
|
-
box-sizing: border-box;
|
|
151
|
-
border-width: 0;
|
|
152
|
-
border-style: solid;
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
:global(:focus) {
|
|
156
|
-
z-index: 1;
|
|
157
|
-
outline-width: 0;
|
|
158
|
-
}
|
|
159
|
-
|
|
160
|
-
:global(:focus-visible) {
|
|
161
|
-
outline-offset: -2px;
|
|
162
|
-
outline-width: 2px !important;
|
|
163
|
-
outline-style: solid;
|
|
164
|
-
outline-color: hsl(var(--hue), 100%, 50%, 25%);
|
|
165
|
-
}
|
|
166
|
-
|
|
167
|
-
:global(h1),
|
|
168
|
-
:global(h2),
|
|
169
|
-
:global(h3),
|
|
170
|
-
:global(h4),
|
|
171
|
-
:global(h5),
|
|
172
|
-
:global(h6) {
|
|
173
|
-
margin: 0;
|
|
174
|
-
font-weight: var(--default-font-weight-bold);
|
|
175
|
-
}
|
|
176
|
-
|
|
177
|
-
:global(strong) {
|
|
178
|
-
font-weight: var(--default-font-weight-bold);
|
|
179
|
-
}
|
|
180
|
-
|
|
181
|
-
:global(a) {
|
|
182
|
-
color: var(--primary-accent-color-lighter);
|
|
183
|
-
text-decoration: none;
|
|
184
|
-
}
|
|
185
|
-
|
|
186
|
-
:global(img),
|
|
187
|
-
:global(svg),
|
|
188
|
-
:global(iframe) {
|
|
189
|
-
vertical-align: top;
|
|
190
|
-
}
|
|
191
|
-
|
|
192
|
-
:global(button),
|
|
193
|
-
:global(input),
|
|
194
|
-
:global(textarea),
|
|
195
|
-
:global(select),
|
|
196
|
-
:global(option) {
|
|
197
|
-
font-family: inherit;
|
|
198
|
-
font-size: inherit;
|
|
199
|
-
color: inherit;
|
|
200
|
-
}
|
|
201
|
-
|
|
202
|
-
:global(p),
|
|
203
|
-
:global(li) {
|
|
204
|
-
line-height: 1.75;
|
|
205
|
-
}
|
|
206
|
-
|
|
207
|
-
:global([role=grid]) {
|
|
208
|
-
display: table;
|
|
209
|
-
width: 100%;
|
|
210
|
-
}
|
|
211
|
-
:global([role=grid]) :global(.colgroup) {
|
|
212
|
-
display: table-column-group;
|
|
213
|
-
}
|
|
214
|
-
:global([role=grid]) :global(.colgroup) :global(.col) {
|
|
215
|
-
display: table-column;
|
|
216
|
-
}
|
|
217
|
-
|
|
218
|
-
:global(code),
|
|
219
|
-
:global(pre) {
|
|
220
|
-
font-family: var(--monospace-font-family);
|
|
221
|
-
}
|
|
222
|
-
|
|
223
|
-
:global(pre) {
|
|
224
|
-
line-height: 1.5;
|
|
225
|
-
-webkit-user-select: text;
|
|
226
|
-
user-select: text;
|
|
227
|
-
}
|
|
228
|
-
|
|
229
|
-
:global(dialog) {
|
|
230
|
-
position: fixed;
|
|
231
|
-
inset: 0;
|
|
232
|
-
outline: 0;
|
|
233
|
-
margin: 0;
|
|
234
|
-
border: 0;
|
|
235
|
-
padding: 0;
|
|
236
|
-
width: 100%;
|
|
237
|
-
max-width: 100%;
|
|
238
|
-
height: 100%;
|
|
239
|
-
max-height: 100%;
|
|
240
|
-
color: inherit;
|
|
241
|
-
background: transparent;
|
|
242
|
-
-webkit-user-select: none;
|
|
243
|
-
user-select: none;
|
|
244
|
-
touch-action: none;
|
|
245
|
-
cursor: default;
|
|
246
|
-
}
|
|
247
|
-
:global(dialog::backdrop) {
|
|
248
|
-
background: transparent;
|
|
249
|
-
}
|
|
250
|
-
|
|
251
|
-
:global(.thead[role=rowgroup]) {
|
|
252
|
-
display: table-header-group;
|
|
253
|
-
}
|
|
254
|
-
|
|
255
|
-
:global(.tbody[role=rowgroup]) {
|
|
256
|
-
display: table-row-group;
|
|
257
|
-
}
|
|
258
|
-
|
|
259
|
-
:global([role=row]) {
|
|
260
|
-
display: table-row;
|
|
261
|
-
}
|
|
262
|
-
|
|
263
|
-
:global([role=columnheader]),
|
|
264
|
-
:global([role=gridcell]) {
|
|
265
|
-
display: table-cell;
|
|
266
|
-
}
|
|
267
|
-
|
|
268
|
-
:global(.app-shell) {
|
|
269
|
-
position: fixed;
|
|
270
|
-
inset: 0;
|
|
271
|
-
overflow: hidden;
|
|
272
|
-
width: 100%;
|
|
273
|
-
height: 100%;
|
|
274
|
-
color: var(--primary-foreground-color);
|
|
275
|
-
background-color: var(--primary-background-color);
|
|
276
|
-
font-family: var(--default-font-family);
|
|
277
|
-
font-size: var(--default-font-size);
|
|
278
|
-
font-weight: var(--default-font-weight-regular);
|
|
279
|
-
-webkit-user-select: none;
|
|
280
|
-
user-select: none;
|
|
281
|
-
touch-action: none;
|
|
282
|
-
overflow-anchor: none;
|
|
283
|
-
cursor: default;
|
|
284
|
-
}</style>
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
/** @typedef {typeof __propDef.props} AppShellProps */
|
|
2
|
-
/** @typedef {typeof __propDef.events} AppShellEvents */
|
|
3
|
-
/** @typedef {typeof __propDef.slots} AppShellSlots */
|
|
4
|
-
/**
|
|
5
|
-
* Provide an application’s shell that makes the web app more like a native app. It also handles the
|
|
6
|
-
* dark/light mode switching. This component has to be placed directly under `<body>` (or
|
|
7
|
-
* `<div style="display:contents">` in a SvelteKit app).
|
|
8
|
-
*/
|
|
9
|
-
export default class AppShell {
|
|
10
|
-
}
|
|
11
|
-
export type AppShellProps = typeof __propDef.props;
|
|
12
|
-
export type AppShellEvents = typeof __propDef.events;
|
|
13
|
-
export type AppShellSlots = typeof __propDef.slots;
|
|
14
|
-
declare const __propDef: {
|
|
15
|
-
props: {
|
|
16
|
-
[x: string]: never;
|
|
17
|
-
};
|
|
18
|
-
events: {
|
|
19
|
-
dragover: DragEvent;
|
|
20
|
-
drop: DragEvent;
|
|
21
|
-
} & {
|
|
22
|
-
[evt: string]: CustomEvent<any>;
|
|
23
|
-
};
|
|
24
|
-
slots: {
|
|
25
|
-
default: {};
|
|
26
|
-
};
|
|
27
|
-
};
|
|
28
|
-
export {};
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Check if the given input is a simple object.
|
|
3
|
-
*
|
|
4
|
-
* @param {*} input Input, probably an object.
|
|
5
|
-
* @returns {boolean} Result.
|
|
6
|
-
*/
|
|
7
|
-
export const isObject = (input) =>
|
|
8
|
-
input !== null && typeof input === 'object' && !Array.isArray(input);
|
|
9
|
-
|
|
10
|
-
/**
|
|
11
|
-
* Return a simple `Promise` to resolve in the given time, making it easier to wait for a bit in the
|
|
12
|
-
* code, particularly while making sequential HTTP requests.
|
|
13
|
-
*
|
|
14
|
-
* @param {number} [ms] Milliseconds to wait.
|
|
15
|
-
* @returns {Promise} Nothing.
|
|
16
|
-
*/
|
|
17
|
-
export const sleep = (ms = 1000) =>
|
|
18
|
-
new Promise((resolve) => {
|
|
19
|
-
window.setTimeout(() => {
|
|
20
|
-
resolve();
|
|
21
|
-
}, ms);
|
|
22
|
-
});
|
|
@@ -1,145 +0,0 @@
|
|
|
1
|
-
<!--
|
|
2
|
-
@component
|
|
3
|
-
Generic popup helper.
|
|
4
|
-
-->
|
|
5
|
-
<svelte:options accessors={true} />
|
|
6
|
-
|
|
7
|
-
<script>
|
|
8
|
-
import { onMount } from 'svelte';
|
|
9
|
-
import { writable } from 'svelte/store';
|
|
10
|
-
import { activatePopup } from '../helpers/popup';
|
|
11
|
-
|
|
12
|
-
/** @type {(HTMLElement|undefined)} */
|
|
13
|
-
export let anchor = undefined;
|
|
14
|
-
|
|
15
|
-
/**
|
|
16
|
-
* Reference to the popup element.
|
|
17
|
-
* @type {(HTMLElement|undefined)}
|
|
18
|
-
*/
|
|
19
|
-
export let dialog = undefined;
|
|
20
|
-
|
|
21
|
-
/**
|
|
22
|
-
* Where to show the dropdown menu.
|
|
23
|
-
* @type {PopupPosition}
|
|
24
|
-
*/
|
|
25
|
-
export let position = 'bottom-left';
|
|
26
|
-
|
|
27
|
-
export let open = writable(false);
|
|
28
|
-
|
|
29
|
-
let showDialog = false;
|
|
30
|
-
let showContent = false;
|
|
31
|
-
let contentType;
|
|
32
|
-
let closeDialogTimer = 0;
|
|
33
|
-
|
|
34
|
-
let style = writable({
|
|
35
|
-
inset: undefined,
|
|
36
|
-
zIndex: undefined,
|
|
37
|
-
width: undefined,
|
|
38
|
-
height: undefined,
|
|
39
|
-
});
|
|
40
|
-
|
|
41
|
-
$: {
|
|
42
|
-
if (anchor && dialog) {
|
|
43
|
-
({ open, style } = activatePopup(anchor, dialog, position));
|
|
44
|
-
contentType = anchor.getAttribute('aria-haspopup');
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
const openDialog = () => {
|
|
49
|
-
window.clearTimeout(closeDialogTimer);
|
|
50
|
-
(document.querySelector('.sui.app-shell') || document.body).appendChild(dialog);
|
|
51
|
-
showContent = true;
|
|
52
|
-
dialog.showModal();
|
|
53
|
-
|
|
54
|
-
window.requestAnimationFrame(() => {
|
|
55
|
-
showDialog = true;
|
|
56
|
-
});
|
|
57
|
-
};
|
|
58
|
-
|
|
59
|
-
const closeDialog = () => {
|
|
60
|
-
showDialog = false;
|
|
61
|
-
|
|
62
|
-
closeDialogTimer = window.setTimeout(() => {
|
|
63
|
-
showContent = false;
|
|
64
|
-
dialog?.close();
|
|
65
|
-
dialog?.remove();
|
|
66
|
-
}, 500);
|
|
67
|
-
};
|
|
68
|
-
|
|
69
|
-
$: {
|
|
70
|
-
if (dialog) {
|
|
71
|
-
if ($open) {
|
|
72
|
-
openDialog();
|
|
73
|
-
} else {
|
|
74
|
-
closeDialog();
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
onMount(() => {
|
|
80
|
-
dialog.remove();
|
|
81
|
-
|
|
82
|
-
// onUnmount
|
|
83
|
-
return () => {
|
|
84
|
-
dialog?.close();
|
|
85
|
-
dialog?.remove();
|
|
86
|
-
};
|
|
87
|
-
});
|
|
88
|
-
</script>
|
|
89
|
-
|
|
90
|
-
<dialog class="sui popup" bind:this={dialog} class:open={showDialog} {...$$restProps}>
|
|
91
|
-
<!-- Prevent the first item in the slot, e.g. a menu item, from being focused by adding `tabindex`
|
|
92
|
-
to the container -->
|
|
93
|
-
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
|
|
94
|
-
<div
|
|
95
|
-
tabindex="0"
|
|
96
|
-
class="content {contentType}"
|
|
97
|
-
style:inset={$style.inset}
|
|
98
|
-
style:z-index={$style.zIndex}
|
|
99
|
-
style:min-width={$style.width}
|
|
100
|
-
style:max-height={$style.height}
|
|
101
|
-
>
|
|
102
|
-
{#if showContent}
|
|
103
|
-
<slot />
|
|
104
|
-
{/if}
|
|
105
|
-
</div>
|
|
106
|
-
</dialog>
|
|
107
|
-
|
|
108
|
-
<style>.popup.open .content {
|
|
109
|
-
opacity: 1;
|
|
110
|
-
transform: translateY(2px);
|
|
111
|
-
transition-duration: 100ms;
|
|
112
|
-
}
|
|
113
|
-
.popup:not(.open) {
|
|
114
|
-
pointer-events: none;
|
|
115
|
-
}
|
|
116
|
-
.popup:not(.open) .content {
|
|
117
|
-
opacity: 0;
|
|
118
|
-
transform: translateY(-8px);
|
|
119
|
-
pointer-events: none;
|
|
120
|
-
transition-duration: 200ms;
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
.content {
|
|
124
|
-
position: fixed;
|
|
125
|
-
overflow-y: auto;
|
|
126
|
-
outline-width: 0 !important;
|
|
127
|
-
color: var(--primary-foreground-color);
|
|
128
|
-
background-color: var(--secondary-background-color-translucent);
|
|
129
|
-
backdrop-filter: blur(16px);
|
|
130
|
-
box-shadow: 0 8px 16px var(--popup-shadow-color);
|
|
131
|
-
will-change: opacity, transform;
|
|
132
|
-
transition-property: opacity, transform;
|
|
133
|
-
}
|
|
134
|
-
.content.listbox, .content.menu {
|
|
135
|
-
border-width: 1px;
|
|
136
|
-
border-style: solid;
|
|
137
|
-
border-color: var(--secondary-border-color);
|
|
138
|
-
border-radius: 4px;
|
|
139
|
-
}
|
|
140
|
-
.content.listbox :global(.sui.listbox),
|
|
141
|
-
.content.listbox :global(.sui.menu), .content.menu :global(.sui.listbox),
|
|
142
|
-
.content.menu :global(.sui.menu) {
|
|
143
|
-
border-width: 0;
|
|
144
|
-
border-radius: 0;
|
|
145
|
-
}</style>
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
/** @typedef {typeof __propDef.props} PopupProps */
|
|
2
|
-
/** @typedef {typeof __propDef.events} PopupEvents */
|
|
3
|
-
/** @typedef {typeof __propDef.slots} PopupSlots */
|
|
4
|
-
/** Generic popup helper. */
|
|
5
|
-
export default class Popup {
|
|
6
|
-
/**accessor*/
|
|
7
|
-
set anchor(arg: any);
|
|
8
|
-
get anchor(): any;
|
|
9
|
-
/**accessor*/
|
|
10
|
-
set dialog(arg: any);
|
|
11
|
-
get dialog(): any;
|
|
12
|
-
/**accessor*/
|
|
13
|
-
set position(arg: any);
|
|
14
|
-
get position(): any;
|
|
15
|
-
/**accessor*/
|
|
16
|
-
set open(arg: any);
|
|
17
|
-
get open(): any;
|
|
18
|
-
}
|
|
19
|
-
export type PopupProps = typeof __propDef.props;
|
|
20
|
-
export type PopupEvents = typeof __propDef.events;
|
|
21
|
-
export type PopupSlots = typeof __propDef.slots;
|
|
22
|
-
declare const __propDef: {
|
|
23
|
-
props: {
|
|
24
|
-
[x: string]: any;
|
|
25
|
-
dialog?: (HTMLElement | undefined);
|
|
26
|
-
position?: any;
|
|
27
|
-
anchor?: (HTMLElement | undefined);
|
|
28
|
-
open?: any;
|
|
29
|
-
};
|
|
30
|
-
events: {
|
|
31
|
-
[evt: string]: CustomEvent<any>;
|
|
32
|
-
};
|
|
33
|
-
slots: {
|
|
34
|
-
default: {};
|
|
35
|
-
};
|
|
36
|
-
};
|
|
37
|
-
export {};
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
<!--
|
|
2
|
-
@component
|
|
3
|
-
@see https://github.com/sveltejs/svelte/issues/3088
|
|
4
|
-
-->
|
|
5
|
-
<script>
|
|
6
|
-
import { onDestroy, onMount } from 'svelte';
|
|
7
|
-
|
|
8
|
-
/**
|
|
9
|
-
* CSS class name on the button.
|
|
10
|
-
* @type {String}
|
|
11
|
-
*/
|
|
12
|
-
let className = '';
|
|
13
|
-
|
|
14
|
-
export { className as class };
|
|
15
|
-
|
|
16
|
-
/** @type {HTMLElement} */
|
|
17
|
-
let ref;
|
|
18
|
-
|
|
19
|
-
onMount(() => {
|
|
20
|
-
document.body.appendChild(ref);
|
|
21
|
-
});
|
|
22
|
-
|
|
23
|
-
onDestroy(() => {
|
|
24
|
-
ref.remove();
|
|
25
|
-
});
|
|
26
|
-
</script>
|
|
27
|
-
|
|
28
|
-
<div class="sui portal {className}" bind:this={ref}>
|
|
29
|
-
<slot />
|
|
30
|
-
</div>
|
|
31
|
-
|
|
32
|
-
<style>.portal {
|
|
33
|
-
display: contents;
|
|
34
|
-
}</style>
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
/** @typedef {typeof __propDef.props} PortalProps */
|
|
2
|
-
/** @typedef {typeof __propDef.events} PortalEvents */
|
|
3
|
-
/** @typedef {typeof __propDef.slots} PortalSlots */
|
|
4
|
-
/** @see https://github.com/sveltejs/svelte/issues/3088 */
|
|
5
|
-
export default class Portal {
|
|
6
|
-
}
|
|
7
|
-
export type PortalProps = typeof __propDef.props;
|
|
8
|
-
export type PortalEvents = typeof __propDef.events;
|
|
9
|
-
export type PortalSlots = typeof __propDef.slots;
|
|
10
|
-
declare const __propDef: {
|
|
11
|
-
props: {
|
|
12
|
-
class?: string;
|
|
13
|
-
};
|
|
14
|
-
events: {
|
|
15
|
-
[evt: string]: CustomEvent<any>;
|
|
16
|
-
};
|
|
17
|
-
slots: {
|
|
18
|
-
default: {};
|
|
19
|
-
};
|
|
20
|
-
};
|
|
21
|
-
export {};
|
package/package/index.d.ts
DELETED
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
export { default as Calendar } from "./components/composite/calendar.svelte";
|
|
2
|
-
export { default as CheckboxGroup } from "./components/composite/checkbox-group.svelte";
|
|
3
|
-
export { default as Combobox } from "./components/composite/combobox.svelte";
|
|
4
|
-
export { default as Disclosure } from "./components/composite/disclosure.svelte";
|
|
5
|
-
export { default as Grid } from "./components/composite/grid.svelte";
|
|
6
|
-
export { default as Listbox } from "./components/composite/listbox.svelte";
|
|
7
|
-
export { default as MenuItemGroup } from "./components/composite/menu-item-group.svelte";
|
|
8
|
-
export { default as Menu } from "./components/composite/menu.svelte";
|
|
9
|
-
export { default as RadioButtonGroup } from "./components/composite/radio-button-group.svelte";
|
|
10
|
-
export { default as SelectButtonGroup } from "./components/composite/select-button-group.svelte";
|
|
11
|
-
export { default as Select } from "./components/composite/select.svelte";
|
|
12
|
-
export { default as TabList } from "./components/composite/tab-list.svelte";
|
|
13
|
-
export { default as Button } from "./components/core/button.svelte";
|
|
14
|
-
export { default as Checkbox } from "./components/core/checkbox.svelte";
|
|
15
|
-
export { default as Dialog } from "./components/core/dialog.svelte";
|
|
16
|
-
export { default as GridCell } from "./components/core/grid-cell.svelte";
|
|
17
|
-
export { default as Group } from "./components/core/group.svelte";
|
|
18
|
-
export { default as Icon } from "./components/core/icon.svelte";
|
|
19
|
-
export { default as MenuButton } from "./components/core/menu-button.svelte";
|
|
20
|
-
export { default as MenuItemCheckbox } from "./components/core/menu-item-checkbox.svelte";
|
|
21
|
-
export { default as MenuItemRadio } from "./components/core/menu-item-radio.svelte";
|
|
22
|
-
export { default as MenuItem } from "./components/core/menu-item.svelte";
|
|
23
|
-
export { default as NumberInput } from "./components/core/number-input.svelte";
|
|
24
|
-
export { default as Option } from "./components/core/option.svelte";
|
|
25
|
-
export { default as PasswordInput } from "./components/core/password-input.svelte";
|
|
26
|
-
export { default as RadioButton } from "./components/core/radio-button.svelte";
|
|
27
|
-
export { default as RowGroup } from "./components/core/row-group.svelte";
|
|
28
|
-
export { default as Row } from "./components/core/row.svelte";
|
|
29
|
-
export { default as SearchBar } from "./components/core/search-bar.svelte";
|
|
30
|
-
export { default as SelectButton } from "./components/core/select-button.svelte";
|
|
31
|
-
export { default as Separator } from "./components/core/separator.svelte";
|
|
32
|
-
export { default as Slider } from "./components/core/slider.svelte";
|
|
33
|
-
export { default as Spacer } from "./components/core/spacer.svelte";
|
|
34
|
-
export { default as Switch } from "./components/core/switch.svelte";
|
|
35
|
-
export { default as TabPanel } from "./components/core/tab-panel.svelte";
|
|
36
|
-
export { default as Tab } from "./components/core/tab.svelte";
|
|
37
|
-
export { default as TextArea } from "./components/core/text-area.svelte";
|
|
38
|
-
export { default as TextInput } from "./components/core/text-input.svelte";
|
|
39
|
-
export { default as Toolbar } from "./components/core/toolbar.svelte";
|
|
40
|
-
export { default as MarkdownEditor } from "./components/editor/markdown.svelte";
|
|
41
|
-
export { default as AppShell } from "./components/util/app-shell.svelte";
|
package/package/index.js
DELETED
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
import { addMessages, init } from 'svelte-i18n';
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* Load strings and initialize the locales.
|
|
5
|
-
* @see https://github.com/kaisermann/svelte-i18n/blob/main/docs/Getting%20Started.md
|
|
6
|
-
* @see https://vitejs.dev/guide/features.html#glob-import
|
|
7
|
-
*/
|
|
8
|
-
const initLocales = () => {
|
|
9
|
-
const modules = import.meta.glob('./locales/*.js', { eager: true });
|
|
10
|
-
|
|
11
|
-
Object.entries(modules).forEach(([path, { strings }]) => {
|
|
12
|
-
const [, locale] = path.match(/([a-zA-Z-]+)\.js/);
|
|
13
|
-
|
|
14
|
-
// Add `sui` suffix to avoid collision with app localization
|
|
15
|
-
addMessages(locale, { sui: strings });
|
|
16
|
-
});
|
|
17
|
-
|
|
18
|
-
init({
|
|
19
|
-
fallbackLocale: 'en',
|
|
20
|
-
initialLocale: 'en',
|
|
21
|
-
});
|
|
22
|
-
};
|
|
23
|
-
|
|
24
|
-
initLocales();
|
|
25
|
-
|
|
26
|
-
export { default as Calendar } from './components/composite/calendar.svelte';
|
|
27
|
-
export { default as CheckboxGroup } from './components/composite/checkbox-group.svelte';
|
|
28
|
-
export { default as Combobox } from './components/composite/combobox.svelte';
|
|
29
|
-
export { default as Disclosure } from './components/composite/disclosure.svelte';
|
|
30
|
-
export { default as Grid } from './components/composite/grid.svelte';
|
|
31
|
-
export { default as Listbox } from './components/composite/listbox.svelte';
|
|
32
|
-
export { default as MenuItemGroup } from './components/composite/menu-item-group.svelte';
|
|
33
|
-
export { default as Menu } from './components/composite/menu.svelte';
|
|
34
|
-
export { default as RadioButtonGroup } from './components/composite/radio-button-group.svelte';
|
|
35
|
-
export { default as SelectButtonGroup } from './components/composite/select-button-group.svelte';
|
|
36
|
-
export { default as Select } from './components/composite/select.svelte';
|
|
37
|
-
export { default as TabList } from './components/composite/tab-list.svelte';
|
|
38
|
-
export { default as Button } from './components/core/button.svelte';
|
|
39
|
-
export { default as Checkbox } from './components/core/checkbox.svelte';
|
|
40
|
-
export { default as Dialog } from './components/core/dialog.svelte';
|
|
41
|
-
export { default as GridCell } from './components/core/grid-cell.svelte';
|
|
42
|
-
export { default as Group } from './components/core/group.svelte';
|
|
43
|
-
export { default as Icon } from './components/core/icon.svelte';
|
|
44
|
-
export { default as MenuButton } from './components/core/menu-button.svelte';
|
|
45
|
-
export { default as MenuItemCheckbox } from './components/core/menu-item-checkbox.svelte';
|
|
46
|
-
export { default as MenuItemRadio } from './components/core/menu-item-radio.svelte';
|
|
47
|
-
export { default as MenuItem } from './components/core/menu-item.svelte';
|
|
48
|
-
export { default as NumberInput } from './components/core/number-input.svelte';
|
|
49
|
-
export { default as Option } from './components/core/option.svelte';
|
|
50
|
-
export { default as PasswordInput } from './components/core/password-input.svelte';
|
|
51
|
-
export { default as RadioButton } from './components/core/radio-button.svelte';
|
|
52
|
-
export { default as RowGroup } from './components/core/row-group.svelte';
|
|
53
|
-
export { default as Row } from './components/core/row.svelte';
|
|
54
|
-
export { default as SearchBar } from './components/core/search-bar.svelte';
|
|
55
|
-
export { default as SelectButton } from './components/core/select-button.svelte';
|
|
56
|
-
export { default as Separator } from './components/core/separator.svelte';
|
|
57
|
-
export { default as Slider } from './components/core/slider.svelte';
|
|
58
|
-
export { default as Spacer } from './components/core/spacer.svelte';
|
|
59
|
-
export { default as Switch } from './components/core/switch.svelte';
|
|
60
|
-
export { default as TabPanel } from './components/core/tab-panel.svelte';
|
|
61
|
-
export { default as Tab } from './components/core/tab.svelte';
|
|
62
|
-
export { default as TextArea } from './components/core/text-area.svelte';
|
|
63
|
-
export { default as TextInput } from './components/core/text-input.svelte';
|
|
64
|
-
export { default as Toolbar } from './components/core/toolbar.svelte';
|
|
65
|
-
export { default as MarkdownEditor } from './components/editor/markdown.svelte';
|
|
66
|
-
export { default as AppShell } from './components/util/app-shell.svelte';
|