@juspay/svelte-ui-components 2.131.0 → 2.132.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/dist/Status/Status.svelte +14 -5
- package/dist/Status/properties.d.ts +23 -0
- package/package.json +1 -1
|
@@ -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 = {
|