@juspay/svelte-ui-components 2.79.0 → 2.80.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.
|
@@ -13,6 +13,7 @@
|
|
|
13
13
|
footer,
|
|
14
14
|
valueSnippet,
|
|
15
15
|
rows,
|
|
16
|
+
rowsDirection = 'column',
|
|
16
17
|
tooltip,
|
|
17
18
|
checkbox,
|
|
18
19
|
headerRight,
|
|
@@ -127,7 +128,7 @@
|
|
|
127
128
|
{/if}
|
|
128
129
|
|
|
129
130
|
{#if hasRows && rows}
|
|
130
|
-
<div class="statcard-rows">
|
|
131
|
+
<div class="statcard-rows" class:statcard-rows-horizontal={rowsDirection === 'row'}>
|
|
131
132
|
{#each rows as row, rowIndex (rowIndex)}
|
|
132
133
|
{#if rowIndex > 0}
|
|
133
134
|
<div class="statcard-row-divider"></div>
|
|
@@ -332,6 +333,25 @@
|
|
|
332
333
|
margin: var(--statcard-row-divider-margin, 8px 0);
|
|
333
334
|
}
|
|
334
335
|
|
|
336
|
+
/* Horizontal layout: lay the metric sections side by side with vertical
|
|
337
|
+
dividers. Each section flexes to share the available width equally. */
|
|
338
|
+
.statcard-rows-horizontal {
|
|
339
|
+
flex-direction: row;
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
.statcard-rows-horizontal .statcard-row {
|
|
343
|
+
flex: 1;
|
|
344
|
+
min-width: 0;
|
|
345
|
+
}
|
|
346
|
+
|
|
347
|
+
.statcard-rows-horizontal .statcard-row-divider {
|
|
348
|
+
align-self: stretch;
|
|
349
|
+
flex-shrink: 0;
|
|
350
|
+
width: var(--statcard-row-divider-height, 1px);
|
|
351
|
+
height: auto;
|
|
352
|
+
margin: var(--statcard-row-divider-margin-horizontal, 0 16px);
|
|
353
|
+
}
|
|
354
|
+
|
|
335
355
|
.statcard-row {
|
|
336
356
|
display: flex;
|
|
337
357
|
flex-direction: column;
|
|
@@ -65,6 +65,12 @@ export type OptionalStatCardProperties = {
|
|
|
65
65
|
* a column of rows separated by dividers.
|
|
66
66
|
*/
|
|
67
67
|
rows?: StatCardRow[];
|
|
68
|
+
/**
|
|
69
|
+
* Layout direction for `rows`. `'column'` (default) stacks rows vertically with
|
|
70
|
+
* horizontal dividers; `'row'` lays the sections side by side with vertical
|
|
71
|
+
* dividers, each section flexing to share the width equally.
|
|
72
|
+
*/
|
|
73
|
+
rowsDirection?: 'column' | 'row';
|
|
68
74
|
/** Tooltip shown on the card title. */
|
|
69
75
|
tooltip?: StatCardTooltip;
|
|
70
76
|
/** Checkbox rendered next to the title. */
|