@juspay/svelte-ui-components 2.46.0 → 2.48.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 +7 -3
- package/dist/Tabs/Tabs.svelte +17 -8
- package/package.json +1 -1
|
@@ -46,12 +46,16 @@
|
|
|
46
46
|
margin-bottom: 25px;
|
|
47
47
|
}
|
|
48
48
|
|
|
49
|
-
.
|
|
50
|
-
|
|
49
|
+
.background {
|
|
50
|
+
min-height: var(--status-min-height, 100vh);
|
|
51
51
|
display: flex;
|
|
52
52
|
justify-content: center;
|
|
53
53
|
align-items: center;
|
|
54
|
-
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.order-status {
|
|
57
|
+
flex-direction: column;
|
|
58
|
+
display: flex;
|
|
55
59
|
font-family: var(--order-font, inherit);
|
|
56
60
|
font-size: var(--order-font-size, 14px);
|
|
57
61
|
text-align: center;
|
package/dist/Tabs/Tabs.svelte
CHANGED
|
@@ -122,7 +122,7 @@
|
|
|
122
122
|
}
|
|
123
123
|
}
|
|
124
124
|
|
|
125
|
-
function initOverflow(node: HTMLDivElement):
|
|
125
|
+
function initOverflow(node: HTMLDivElement): () => void {
|
|
126
126
|
scrollContainer = node;
|
|
127
127
|
updateOverflow();
|
|
128
128
|
updateIndicator();
|
|
@@ -136,15 +136,24 @@
|
|
|
136
136
|
attributes: true,
|
|
137
137
|
attributeFilter: ['class']
|
|
138
138
|
});
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
139
|
+
const resizeObserver = new ResizeObserver(() => {
|
|
140
|
+
updateOverflow();
|
|
141
|
+
updateIndicator();
|
|
142
|
+
});
|
|
143
|
+
resizeObserver.observe(node);
|
|
144
|
+
return () => {
|
|
145
|
+
observer.disconnect();
|
|
146
|
+
resizeObserver.disconnect();
|
|
147
|
+
scrollContainer = null;
|
|
143
148
|
};
|
|
144
149
|
}
|
|
150
|
+
|
|
151
|
+
let rootClass = $derived(
|
|
152
|
+
['tabs-wrapper', classes ?? ''].filter((cls) => cls.length > 0).join(' ')
|
|
153
|
+
);
|
|
145
154
|
</script>
|
|
146
155
|
|
|
147
|
-
<div class=
|
|
156
|
+
<div class={rootClass} class:disabled data-pw={testId}>
|
|
148
157
|
{#if canScrollLeft}
|
|
149
158
|
<button
|
|
150
159
|
class="tabs-arrow tabs-arrow-left"
|
|
@@ -164,7 +173,7 @@
|
|
|
164
173
|
class:fade-left={canScrollLeft}
|
|
165
174
|
class:fade-right={canScrollRight}
|
|
166
175
|
role="tablist"
|
|
167
|
-
|
|
176
|
+
{@attach initOverflow}
|
|
168
177
|
onscroll={updateOverflow}
|
|
169
178
|
>
|
|
170
179
|
{#each items as item, index (isObjectMode ? (toTabItem(item)?.key ?? index) : index)}
|
|
@@ -305,7 +314,7 @@
|
|
|
305
314
|
color: var(--tabs-item-color, #666666);
|
|
306
315
|
cursor: var(--tabs-item-cursor, pointer);
|
|
307
316
|
background: var(--tabs-item-background, transparent);
|
|
308
|
-
border: none;
|
|
317
|
+
border: var(--tabs-item-border, none);
|
|
309
318
|
border-radius: var(--tabs-item-border-radius, 0);
|
|
310
319
|
outline: none;
|
|
311
320
|
white-space: nowrap;
|