@inglorious/ui 8.4.2 → 8.5.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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@inglorious/ui",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.5.0",
|
|
4
4
|
"description": "A design system for Inglorious Web with render-function components and customizable themes",
|
|
5
5
|
"author": "Matteo Antony Mistretta <antony.mistretta@gmail.com> (https://ingloriouscoderz.it)",
|
|
6
6
|
"license": "MIT",
|
|
@@ -308,19 +308,19 @@
|
|
|
308
308
|
"peerDependencies": {
|
|
309
309
|
"@inglorious/store": "12.0.0",
|
|
310
310
|
"@inglorious/utils": "5.1.0",
|
|
311
|
-
"@inglorious/web": "6.
|
|
311
|
+
"@inglorious/web": "6.9.0"
|
|
312
312
|
},
|
|
313
313
|
"devDependencies": {
|
|
314
314
|
"@iconify-icons/fa7-brands": "^2.0.0",
|
|
315
315
|
"@iconify-icons/fa7-regular": "^2.0.0",
|
|
316
316
|
"@iconify-icons/fa7-solid": "^2.0.0",
|
|
317
317
|
"@iconify-icons/material-symbols": "^2.0.6",
|
|
318
|
-
"@inglorious/charts": "11.1.
|
|
318
|
+
"@inglorious/charts": "11.1.7",
|
|
319
319
|
"@inglorious/eslint-config": "1.2.0",
|
|
320
320
|
"@inglorious/store": "12.0.0",
|
|
321
321
|
"@inglorious/vite-plugin-jsx": "2.0.5",
|
|
322
322
|
"@inglorious/vite-plugin-vue": "1.0.6",
|
|
323
|
-
"@inglorious/web": "6.
|
|
323
|
+
"@inglorious/web": "6.9.0",
|
|
324
324
|
"@storybook/addon-docs": "^10.6.0",
|
|
325
325
|
"@storybook/web-components-vite": "^10.6.0",
|
|
326
326
|
"happy-dom": "^20.14.0",
|
|
@@ -10,7 +10,14 @@ export default {
|
|
|
10
10
|
message: { control: "text" },
|
|
11
11
|
position: {
|
|
12
12
|
control: "select",
|
|
13
|
-
options: [
|
|
13
|
+
options: [
|
|
14
|
+
"bottom-left",
|
|
15
|
+
"bottom-center",
|
|
16
|
+
"bottom-right",
|
|
17
|
+
"top-left",
|
|
18
|
+
"top-center",
|
|
19
|
+
"top-right",
|
|
20
|
+
],
|
|
14
21
|
},
|
|
15
22
|
onClose: { action: "onClose" },
|
|
16
23
|
},
|
|
@@ -23,3 +30,20 @@ export const Default = {
|
|
|
23
30
|
position: "bottom-left",
|
|
24
31
|
},
|
|
25
32
|
}
|
|
33
|
+
|
|
34
|
+
// A phone app keeps a bar at the bottom: the snackbar rises above it.
|
|
35
|
+
export const AboveBottomNavigation = {
|
|
36
|
+
args: {
|
|
37
|
+
isOpen: true,
|
|
38
|
+
message: "New version available",
|
|
39
|
+
position: "bottom-center",
|
|
40
|
+
},
|
|
41
|
+
decorators: [
|
|
42
|
+
(story) => {
|
|
43
|
+
const container = document.createElement("div")
|
|
44
|
+
container.style.setProperty("--iw-snackbar-offset-bottom", "4.875rem")
|
|
45
|
+
container.append(story())
|
|
46
|
+
return container
|
|
47
|
+
},
|
|
48
|
+
],
|
|
49
|
+
}
|
|
@@ -1,26 +1,47 @@
|
|
|
1
|
+
/* Fixed to the viewport, clear of the system bars. A bottom snackbar also
|
|
2
|
+
clears whatever bar the app keeps at the bottom: the app sets
|
|
3
|
+
--iw-snackbar-offset-bottom to that bar's height while it shows, and the
|
|
4
|
+
offset then stands in for the safe area, which the bar already covers.
|
|
5
|
+
Only the app knows when its bar is on screen, so nothing is guessed here. */
|
|
1
6
|
.iw-snackbar {
|
|
7
|
+
--iw-snackbar-gap: var(--iw-space-4);
|
|
2
8
|
position: fixed;
|
|
3
9
|
z-index: var(--iw-z-popover, 1060);
|
|
10
|
+
max-width: calc(100vw - 2 * var(--iw-snackbar-gap));
|
|
4
11
|
}
|
|
5
12
|
|
|
6
|
-
.iw-snackbar-bottom-left
|
|
7
|
-
|
|
8
|
-
|
|
13
|
+
.iw-snackbar-bottom-left,
|
|
14
|
+
.iw-snackbar-bottom-center,
|
|
15
|
+
.iw-snackbar-bottom-right {
|
|
16
|
+
bottom: calc(
|
|
17
|
+
var(--iw-snackbar-gap) +
|
|
18
|
+
var(--iw-snackbar-offset-bottom, var(--safe-area-bottom, 0px))
|
|
19
|
+
);
|
|
9
20
|
}
|
|
10
21
|
|
|
11
|
-
.iw-snackbar-
|
|
12
|
-
|
|
13
|
-
|
|
22
|
+
.iw-snackbar-top-left,
|
|
23
|
+
.iw-snackbar-top-center,
|
|
24
|
+
.iw-snackbar-top-right {
|
|
25
|
+
top: calc(var(--iw-snackbar-gap) + var(--safe-area-top, 0px));
|
|
14
26
|
}
|
|
15
27
|
|
|
28
|
+
.iw-snackbar-bottom-left,
|
|
16
29
|
.iw-snackbar-top-left {
|
|
17
|
-
left: var(--iw-
|
|
18
|
-
top: var(--iw-space-4);
|
|
30
|
+
left: var(--iw-snackbar-gap);
|
|
19
31
|
}
|
|
20
32
|
|
|
33
|
+
.iw-snackbar-bottom-right,
|
|
21
34
|
.iw-snackbar-top-right {
|
|
22
|
-
right: var(--iw-
|
|
23
|
-
|
|
35
|
+
right: var(--iw-snackbar-gap);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
/* Both insets and auto margins: the snackbar is as wide as its content, up
|
|
39
|
+
to the gutters, and centered within them. */
|
|
40
|
+
.iw-snackbar-bottom-center,
|
|
41
|
+
.iw-snackbar-top-center {
|
|
42
|
+
inset-inline: var(--iw-snackbar-gap);
|
|
43
|
+
width: fit-content;
|
|
44
|
+
margin-inline: auto;
|
|
24
45
|
}
|
|
25
46
|
|
|
26
47
|
.iw-snackbar-content {
|
|
@@ -6,7 +6,13 @@ export interface SnackbarProps {
|
|
|
6
6
|
isOpen?: boolean
|
|
7
7
|
message?: TemplateResult | string | number
|
|
8
8
|
action?: TemplateResult | string | number
|
|
9
|
-
position?:
|
|
9
|
+
position?:
|
|
10
|
+
| "bottom-left"
|
|
11
|
+
| "bottom-center"
|
|
12
|
+
| "bottom-right"
|
|
13
|
+
| "top-left"
|
|
14
|
+
| "top-center"
|
|
15
|
+
| "top-right"
|
|
10
16
|
className?: string
|
|
11
17
|
onClose?: () => void
|
|
12
18
|
[key: string]: unknown
|