@juspay/svelte-ui-components 2.131.0 → 2.133.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.
|
@@ -11,6 +11,8 @@
|
|
|
11
11
|
classes,
|
|
12
12
|
onbuttonClick,
|
|
13
13
|
icon,
|
|
14
|
+
descriptionSnippet,
|
|
15
|
+
children,
|
|
14
16
|
testId
|
|
15
17
|
}: StatusProperties = $props();
|
|
16
18
|
</script>
|
|
@@ -30,12 +32,19 @@
|
|
|
30
32
|
</div>
|
|
31
33
|
<div class="status-text">{statusText}</div>
|
|
32
34
|
<div class="status-description">
|
|
33
|
-
|
|
34
|
-
|
|
35
|
+
{#if typeof descriptionSnippet === 'function'}
|
|
36
|
+
{@render descriptionSnippet()}
|
|
37
|
+
{:else}
|
|
38
|
+
<!-- eslint-disable-next-line -->
|
|
39
|
+
{@html statusDescription}
|
|
40
|
+
{/if}
|
|
35
41
|
</div>
|
|
36
42
|
{#if typeof buttonProperties === 'object'}
|
|
37
43
|
<Button {...buttonProperties} onclick={onbuttonClick} />
|
|
38
44
|
{/if}
|
|
45
|
+
{#if typeof children === 'function'}
|
|
46
|
+
{@render children()}
|
|
47
|
+
{/if}
|
|
39
48
|
</div>
|
|
40
49
|
</div>
|
|
41
50
|
|
|
@@ -75,9 +84,9 @@
|
|
|
75
84
|
}
|
|
76
85
|
@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
|
|
77
86
|
.order-status {
|
|
78
|
-
background-color: rgba(255, 255, 255, 0.6);
|
|
79
|
-
-webkit-backdrop-filter: blur(60px);
|
|
80
|
-
backdrop-filter: blur(60px);
|
|
87
|
+
background-color: var(--status-panel-background, rgba(255, 255, 255, 0.6));
|
|
88
|
+
-webkit-backdrop-filter: var(--status-panel-backdrop-filter, blur(60px));
|
|
89
|
+
backdrop-filter: var(--status-panel-backdrop-filter, blur(60px));
|
|
81
90
|
}
|
|
82
91
|
}
|
|
83
92
|
</style>
|
|
@@ -12,6 +12,29 @@ export type StatusProperties = StatusEventProperties & {
|
|
|
12
12
|
* priority over `statusIcon` when provided.
|
|
13
13
|
*/
|
|
14
14
|
icon?: Snippet;
|
|
15
|
+
/**
|
|
16
|
+
* Optional snippet that replaces the `statusDescription` string at render
|
|
17
|
+
* time. When provided, `statusDescription` is not rendered — only the snippet
|
|
18
|
+
* is. Mirrors `EmptyState`'s `descriptionSnippet`.
|
|
19
|
+
*
|
|
20
|
+
* `statusDescription` is interpolated with `{@html}`, which is what a caller
|
|
21
|
+
* supplying its own trusted markup wants, but is the wrong tool for a message
|
|
22
|
+
* that originates from an API, a user, or any other source the caller does not
|
|
23
|
+
* control. There was previously no way to render such a message as text. Use
|
|
24
|
+
* this snippet for that: `{#snippet descriptionSnippet()}{message}{/snippet}`
|
|
25
|
+
* escapes it the way ordinary Svelte interpolation does.
|
|
26
|
+
*/
|
|
27
|
+
descriptionSnippet?: Snippet;
|
|
28
|
+
/**
|
|
29
|
+
* Action area rendered below the description, alongside the optional
|
|
30
|
+
* `buttonProperties` button. Mirrors `EmptyState`'s `children`.
|
|
31
|
+
*
|
|
32
|
+
* `descriptionSnippet` sits inside `.status-description`, which carries the
|
|
33
|
+
* component's own horizontal padding and bottom margin. Content that is not
|
|
34
|
+
* part of the description — a button, a link, a countdown — belongs here
|
|
35
|
+
* instead, outside that box, where `buttonProperties` already renders.
|
|
36
|
+
*/
|
|
37
|
+
children?: Snippet;
|
|
15
38
|
testId?: string;
|
|
16
39
|
};
|
|
17
40
|
export type StatusEventProperties = {
|
|
@@ -72,7 +72,7 @@
|
|
|
72
72
|
.content {
|
|
73
73
|
display: flex;
|
|
74
74
|
flex-direction: row;
|
|
75
|
-
align-items: center;
|
|
75
|
+
align-items: var(--toolbar-content-align-items, center);
|
|
76
76
|
padding: var(--toolbar-content-padding, 0px);
|
|
77
77
|
justify-content: var(--toolbar-justify-content, normal);
|
|
78
78
|
visibility: var(--toolbar-content-visibility, visible);
|
|
@@ -83,8 +83,15 @@
|
|
|
83
83
|
defaults reproduce the previous rendering exactly. */
|
|
84
84
|
width: var(--toolbar-content-width, auto);
|
|
85
85
|
height: var(--toolbar-content-height, auto);
|
|
86
|
+
min-height: var(--toolbar-content-min-height, auto);
|
|
86
87
|
max-width: var(--toolbar-content-max-width, none);
|
|
87
88
|
margin: var(--toolbar-content-margin, 0);
|
|
89
|
+
|
|
90
|
+
/* Row wrapping and gaps. An in-flow page header lets its action side drop to its own
|
|
91
|
+
line on a narrow viewport; the fixed bar never wraps, which is the default. */
|
|
92
|
+
flex-wrap: var(--toolbar-content-flex-wrap, nowrap);
|
|
93
|
+
row-gap: var(--toolbar-content-row-gap, 0);
|
|
94
|
+
column-gap: var(--toolbar-content-column-gap, 0);
|
|
88
95
|
}
|
|
89
96
|
|
|
90
97
|
.additional-content {
|
|
@@ -118,7 +125,22 @@
|
|
|
118
125
|
|
|
119
126
|
.center-content {
|
|
120
127
|
display: flex;
|
|
121
|
-
|
|
128
|
+
/* `1 1 auto` rather than the default `1` (`1 1 0%`) lets a title region grow from its
|
|
129
|
+
CONTENT width, so a row deficit is shared with the action side instead of collapsing
|
|
130
|
+
the title to nothing. `min-width: 0` is what actually permits the shrink. */
|
|
131
|
+
flex: var(--toolbar-center-flex, 1);
|
|
132
|
+
min-width: var(--toolbar-center-min-width, auto);
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
/* The action region as a flex ITEM of the row. Its inner layout stays the consumer's —
|
|
136
|
+
the snippet's own markup — so there is no gap/justify/align token here. Every default
|
|
137
|
+
below is the property's initial value, i.e. what a bare div already rendered. */
|
|
138
|
+
.right-content {
|
|
139
|
+
display: var(--toolbar-right-display, block);
|
|
140
|
+
flex-shrink: var(--toolbar-right-flex-shrink, 1);
|
|
141
|
+
min-width: var(--toolbar-right-min-width, auto);
|
|
142
|
+
max-width: var(--toolbar-right-max-width, none);
|
|
143
|
+
width: var(--toolbar-right-width, auto);
|
|
122
144
|
}
|
|
123
145
|
|
|
124
146
|
.text {
|