@juspay/svelte-ui-components 1.8.0 → 1.9.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/InputButton/InputButton.svelte +5 -0
- package/dist/InputButton/InputButton.svelte.d.ts +1 -0
- package/dist/InputButton/properties.d.ts +1 -1
- package/dist/Modal/Modal.svelte +3 -0
- package/dist/Select/Select.svelte +110 -71
- package/dist/Select/Select.svelte.d.ts +3 -2
- package/dist/Select/properties.d.ts +1 -3
- package/package.json +1 -1
|
@@ -37,6 +37,9 @@ function handleState(event) {
|
|
|
37
37
|
}
|
|
38
38
|
dispatch("stateChange", event);
|
|
39
39
|
}
|
|
40
|
+
function onFocusOut(event) {
|
|
41
|
+
dispatch("focusout", event);
|
|
42
|
+
}
|
|
40
43
|
</script>
|
|
41
44
|
|
|
42
45
|
{#if properties.inputProperties.label && properties.inputProperties.label !== ''}
|
|
@@ -60,6 +63,7 @@ function handleState(event) {
|
|
|
60
63
|
on:keyup={triggerRightClickIfValid}
|
|
61
64
|
on:stateChange={handleState}
|
|
62
65
|
on:input={(event) => dispatch('input', event)}
|
|
66
|
+
on:focusout={onFocusOut}
|
|
63
67
|
on:focus
|
|
64
68
|
--input-width="auto"
|
|
65
69
|
/>
|
|
@@ -97,6 +101,7 @@ function handleState(event) {
|
|
|
97
101
|
--button-width: 100%;
|
|
98
102
|
--input-border: none;
|
|
99
103
|
--input-focus-border: none;
|
|
104
|
+
border: var(--input-button-container-border);
|
|
100
105
|
}
|
|
101
106
|
|
|
102
107
|
.input-button {
|
|
@@ -4,6 +4,6 @@ export type InputButtonProperties = {
|
|
|
4
4
|
inputProperties: InputProperties;
|
|
5
5
|
rightButtonProperties: ButtonProperties | null;
|
|
6
6
|
leftButtonProperties: ButtonProperties | null;
|
|
7
|
-
bottomButtonProperties
|
|
7
|
+
bottomButtonProperties?: ButtonProperties | null;
|
|
8
8
|
};
|
|
9
9
|
export declare const defaultInputButtonProperties: InputButtonProperties;
|
package/dist/Modal/Modal.svelte
CHANGED
|
@@ -154,14 +154,17 @@ onDestroy(() => {
|
|
|
154
154
|
|
|
155
155
|
.small {
|
|
156
156
|
height: var(--modal-small-height, 20vh);
|
|
157
|
+
width: var(--modal-small-width);
|
|
157
158
|
}
|
|
158
159
|
|
|
159
160
|
.medium {
|
|
160
161
|
height: var(--modal-medium-height, 50vh);
|
|
162
|
+
width: var(--modal-medium-width);
|
|
161
163
|
}
|
|
162
164
|
|
|
163
165
|
.large {
|
|
164
166
|
height: var(--modal-large-height, 80vh);
|
|
167
|
+
width: var(--modal-large-width);
|
|
165
168
|
}
|
|
166
169
|
|
|
167
170
|
.fit-content {
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
<script>import { createEventDispatcher, onDestroy, onMount } from "svelte";
|
|
2
2
|
import Img from "../Img/Img.svelte";
|
|
3
3
|
import Button from "../Button/Button.svelte";
|
|
4
|
-
import { InputButton, defaultInputButtonProperties } from "..";
|
|
5
4
|
let selectedElementDiv = null;
|
|
6
5
|
export let dropDownIconAlt = "";
|
|
7
6
|
export let properties = {
|
|
@@ -15,13 +14,15 @@ export let properties = {
|
|
|
15
14
|
leftIcon: null
|
|
16
15
|
};
|
|
17
16
|
const dropDownIcon = properties.dropDownIcon ?? "https://sdk.breeze.in/gallery/icons/down-arrow.svg";
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
17
|
+
let applyButtonProps;
|
|
18
|
+
$:
|
|
19
|
+
applyButtonProps = {
|
|
20
|
+
text: `Select (${properties.selectedItem.length})`,
|
|
21
|
+
enable: properties.selectedItem.length > 0,
|
|
22
|
+
showLoader: false,
|
|
23
|
+
loaderType: null,
|
|
24
|
+
type: "submit"
|
|
25
|
+
};
|
|
25
26
|
const selectAllButtonProps = {
|
|
26
27
|
text: "Select All",
|
|
27
28
|
enable: true,
|
|
@@ -37,7 +38,6 @@ const clearAllButtonProps = {
|
|
|
37
38
|
type: "submit"
|
|
38
39
|
};
|
|
39
40
|
let isSelectOpen = false;
|
|
40
|
-
let isInput = false;
|
|
41
41
|
const dispatch = createEventDispatcher();
|
|
42
42
|
$:
|
|
43
43
|
nonSelectedItems = properties.allItems.filter(
|
|
@@ -74,6 +74,7 @@ function selectItem(item) {
|
|
|
74
74
|
}
|
|
75
75
|
function dispatchEvent() {
|
|
76
76
|
dispatch("message", { selectedItems: properties.selectedItem });
|
|
77
|
+
isSelectOpen = false;
|
|
77
78
|
}
|
|
78
79
|
function toggleSelect() {
|
|
79
80
|
isSelectOpen = !isSelectOpen;
|
|
@@ -94,24 +95,11 @@ function closeSelect(event) {
|
|
|
94
95
|
const isApplyButtonClicked = clickedElement.classList.contains("apply-btn");
|
|
95
96
|
const isClearAllButtonClicked = clickedElement.innerText === "Clear All";
|
|
96
97
|
const isSelectAllButtonClicked = clickedElement.innerText === "Select All";
|
|
97
|
-
|
|
98
|
-
if (!isItemClicked && !isApplyButtonClicked && !isClearAllButtonClicked && !isSelectAllButtonClicked && isInputSelected) {
|
|
98
|
+
if (!isItemClicked && !isApplyButtonClicked && !isClearAllButtonClicked && !isSelectAllButtonClicked) {
|
|
99
99
|
isSelectOpen = false;
|
|
100
100
|
}
|
|
101
101
|
}
|
|
102
102
|
}
|
|
103
|
-
function handleSelectInput(event) {
|
|
104
|
-
if (event && event.detail) {
|
|
105
|
-
properties.selectedItem = event.detail.value;
|
|
106
|
-
properties.selectedItemLabel = event.detail.value;
|
|
107
|
-
}
|
|
108
|
-
dispatch("selectInput", event.detail.value);
|
|
109
|
-
isInput = false;
|
|
110
|
-
isSelectOpen = false;
|
|
111
|
-
}
|
|
112
|
-
function toggleIsInput() {
|
|
113
|
-
isInput = true;
|
|
114
|
-
}
|
|
115
103
|
onMount(() => {
|
|
116
104
|
document.addEventListener("click", closeSelect);
|
|
117
105
|
});
|
|
@@ -143,21 +131,23 @@ onDestroy(() => {
|
|
|
143
131
|
<Img {...properties.leftIcon} />
|
|
144
132
|
</div>
|
|
145
133
|
{/if}
|
|
146
|
-
|
|
147
|
-
{#if properties.
|
|
134
|
+
<div class="selected-content">
|
|
135
|
+
{#if properties.selectMultipleItems && Array.isArray(properties.selectedItemLabel) && Array.isArray(properties.selectedItem)}
|
|
136
|
+
{#if properties.selectedItem.length === 0}
|
|
137
|
+
{properties.placeholder}
|
|
138
|
+
{:else if properties.selectedItemLabel?.length === 0 || properties.showSelectedItemInDropdown}
|
|
139
|
+
{properties.selectedItem.join(', ')}
|
|
140
|
+
{:else}
|
|
141
|
+
{properties.selectedItemLabel.join(', ')}
|
|
142
|
+
{/if}
|
|
143
|
+
{:else if properties.selectedItem === ''}
|
|
148
144
|
{properties.placeholder}
|
|
149
|
-
{:else if properties.selectedItemLabel
|
|
150
|
-
{properties.selectedItem
|
|
145
|
+
{:else if properties.selectedItemLabel === null || properties.selectedItemLabel === ''}
|
|
146
|
+
{properties.selectedItem}
|
|
151
147
|
{:else}
|
|
152
|
-
{properties.selectedItemLabel
|
|
148
|
+
{properties.selectedItemLabel}
|
|
153
149
|
{/if}
|
|
154
|
-
|
|
155
|
-
{properties.placeholder}
|
|
156
|
-
{:else if properties.selectedItemLabel === null || properties.selectedItemLabel === ''}
|
|
157
|
-
{properties.selectedItem}
|
|
158
|
-
{:else}
|
|
159
|
-
{properties.selectedItemLabel}
|
|
160
|
-
{/if}
|
|
150
|
+
</div>
|
|
161
151
|
<div class="filler" />
|
|
162
152
|
{#if !properties.hideDropDownIcon}
|
|
163
153
|
<img
|
|
@@ -171,9 +161,8 @@ onDestroy(() => {
|
|
|
171
161
|
class="non-selected-items"
|
|
172
162
|
style="--non-selected-display:{isSelectOpen ? 'inline-block' : 'none'};"
|
|
173
163
|
>
|
|
174
|
-
{#if properties.selectMultipleItems}
|
|
164
|
+
{#if properties.selectMultipleItems && !properties.showSingleSelectButton}
|
|
175
165
|
<div class="multipleSelect-btn">
|
|
176
|
-
<Button properties={applyButtonProps} on:click={dispatchEvent} />
|
|
177
166
|
<Button properties={selectAllButtonProps} on:click={selectAllItems} />
|
|
178
167
|
<Button properties={clearAllButtonProps} on:click={clearAllItems} />
|
|
179
168
|
</div>
|
|
@@ -185,7 +174,7 @@ onDestroy(() => {
|
|
|
185
174
|
on:click={() => {
|
|
186
175
|
selectItem(item);
|
|
187
176
|
}}
|
|
188
|
-
class="item {isSelected(properties.selectedItem, item) ? '
|
|
177
|
+
class="item {isSelected(properties.selectedItem, item) ? ' item-selected' : ''}"
|
|
189
178
|
role="button"
|
|
190
179
|
tabindex="0"
|
|
191
180
|
>
|
|
@@ -193,9 +182,12 @@ onDestroy(() => {
|
|
|
193
182
|
</div>
|
|
194
183
|
{/each}
|
|
195
184
|
</div>
|
|
196
|
-
{#if
|
|
197
|
-
<
|
|
198
|
-
|
|
185
|
+
{#if $$slots.bottomContent}
|
|
186
|
+
<slot name="bottomContent" />
|
|
187
|
+
{/if}
|
|
188
|
+
{#if properties.selectMultipleItems}
|
|
189
|
+
<div class="apply-btn-container">
|
|
190
|
+
<Button properties={applyButtonProps} on:click={dispatchEvent} />
|
|
199
191
|
</div>
|
|
200
192
|
{/if}
|
|
201
193
|
</div>
|
|
@@ -214,17 +206,16 @@ onDestroy(() => {
|
|
|
214
206
|
min-width: var(--select-min-width);
|
|
215
207
|
box-shadow: var(--select-box-shadow, 0px 1px 8px #2f537733);
|
|
216
208
|
-webkit-appearance: none !important; /* For Safari MWeb */
|
|
217
|
-
outline: none;
|
|
218
|
-
cursor: pointer;
|
|
219
|
-
border: var(--select-border);
|
|
220
|
-
word-break: var(--select-word-break, break-word);
|
|
209
|
+
outline: var(--select-outline, none);
|
|
221
210
|
resize: none;
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
--
|
|
226
|
-
--
|
|
227
|
-
--
|
|
211
|
+
cursor: pointer;
|
|
212
|
+
border: var(--select-border, 1px solid #ccc);
|
|
213
|
+
position: var(--select-position, relative);
|
|
214
|
+
color: var(--select-color, #333);
|
|
215
|
+
display: var(--select-display, inline-block);
|
|
216
|
+
--button-margin: var(--select-btn-margin, 1px);
|
|
217
|
+
--button-border-radius: var(--select-btn-border-radius, 2px);
|
|
218
|
+
--input-button-margin: var(--select-input-button-margin, 10px);
|
|
228
219
|
}
|
|
229
220
|
|
|
230
221
|
.select:hover {
|
|
@@ -235,6 +226,8 @@ onDestroy(() => {
|
|
|
235
226
|
height: var(--dropdown-arrow-icon-height, 16px);
|
|
236
227
|
width: var(--dropdown-arrow-icon-width, 16px);
|
|
237
228
|
transition: transform 0.1s;
|
|
229
|
+
position: absolute;
|
|
230
|
+
right: 10px;
|
|
238
231
|
}
|
|
239
232
|
|
|
240
233
|
.active {
|
|
@@ -242,8 +235,11 @@ onDestroy(() => {
|
|
|
242
235
|
}
|
|
243
236
|
|
|
244
237
|
.item {
|
|
245
|
-
padding: var(--item-padding, 8px);
|
|
246
|
-
|
|
238
|
+
padding: var(--item-padding, 8px 16px);
|
|
239
|
+
background-color: var(--item-background-color, #fff);
|
|
240
|
+
border-radius: var(--item-border-radius);
|
|
241
|
+
cursor: pointer;
|
|
242
|
+
position: relative;
|
|
247
243
|
}
|
|
248
244
|
|
|
249
245
|
.filler {
|
|
@@ -251,15 +247,27 @@ onDestroy(() => {
|
|
|
251
247
|
}
|
|
252
248
|
|
|
253
249
|
.item:hover {
|
|
254
|
-
background-color: var(--non-selected-hover-bg, #
|
|
250
|
+
background-color: var(--non-selected-hover-bg, #f0f0f0);
|
|
255
251
|
color: var(--non-selected-hover-color);
|
|
256
252
|
}
|
|
257
253
|
|
|
258
254
|
.selected {
|
|
259
|
-
margin: 0px;
|
|
260
255
|
display: flex;
|
|
261
|
-
|
|
262
|
-
|
|
256
|
+
align-items: var(--selected-align-items, center);
|
|
257
|
+
margin: var(--selected-margin, 0px 0px 0px 0px);
|
|
258
|
+
justify-content: var(--selected-justify-content, flex-start);
|
|
259
|
+
background-color: var(--selected-item-background-color, #f9f9f9);
|
|
260
|
+
white-space: var(--selected-item-white-space, nowrap);
|
|
261
|
+
overflow: var(--selected-item-overflow, hidden);
|
|
262
|
+
text-overflow: var(--selected-item-text-overflow, ellipsis);
|
|
263
|
+
max-width: var(--selected-item-max-widhh, 100%);
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
.selected-content {
|
|
267
|
+
white-space: nowrap;
|
|
268
|
+
overflow: hidden;
|
|
269
|
+
text-overflow: ellipsis;
|
|
270
|
+
max-width: calc(100% - 20px);
|
|
263
271
|
}
|
|
264
272
|
|
|
265
273
|
.selected:hover {
|
|
@@ -272,50 +280,81 @@ onDestroy(() => {
|
|
|
272
280
|
background-color: var(--non-selected-item-bgcolor, #ffffff);
|
|
273
281
|
color: var(--non-selected-item-color);
|
|
274
282
|
box-shadow: 0px 1px 8px #2f537733;
|
|
275
|
-
width: var(--non-selected-width,
|
|
283
|
+
width: var(--non-selected-width, 100%);
|
|
276
284
|
min-width: var(--non-selected-min-width, 100%);
|
|
277
|
-
position: absolute;
|
|
278
|
-
border-radius: var(--non-selected-border-radius, 4px);
|
|
279
|
-
margin: var(--non-selected-margin, 4px 0px 0px 0px);
|
|
280
|
-
z-index: 10;
|
|
281
285
|
word-wrap: var(--non-selected-word-break, break-word);
|
|
282
|
-
|
|
286
|
+
position: var(--non-selected-items-position, absolute);
|
|
287
|
+
border-radius: var(--non-selected-items-border-radius, 4px);
|
|
288
|
+
margin: var(--non-selected-margin, 4px 0px 0px 0px);
|
|
283
289
|
font-weight: var(--non-select-font-weight, 500);
|
|
284
290
|
left: var(--non-selected-left);
|
|
285
291
|
right: var(--non-selected-right);
|
|
286
292
|
top: var(--non-selected-top);
|
|
287
293
|
bottom: var(--non-selected-bottom);
|
|
294
|
+
z-index: 10;
|
|
295
|
+
overflow-y: auto;
|
|
288
296
|
}
|
|
289
297
|
|
|
290
298
|
::-webkit-scrollbar {
|
|
291
|
-
width: 0;
|
|
299
|
+
width: var(--scrollbar-width, 0);
|
|
292
300
|
}
|
|
293
301
|
|
|
294
302
|
.item-list {
|
|
295
|
-
max-height: var(--non-selected-max-height,
|
|
303
|
+
max-height: var(--non-selected-max-height, 165px);
|
|
296
304
|
overflow-y: auto;
|
|
297
|
-
position: relative;
|
|
298
305
|
}
|
|
299
306
|
|
|
300
307
|
.item-selected::after {
|
|
301
308
|
content: var(--selected-option-icon, '✔');
|
|
302
309
|
position: absolute;
|
|
303
310
|
right: 7px;
|
|
311
|
+
color: var(--item-selected-icon-color);
|
|
304
312
|
}
|
|
305
313
|
|
|
306
314
|
.label-container {
|
|
307
315
|
font-weight: var(--label-text-weight, 400);
|
|
308
316
|
font-size: var(--label-text-size, 12px);
|
|
309
|
-
color: var(--label-text-color, #
|
|
310
|
-
margin-bottom: 4px;
|
|
311
|
-
display: inline-block;
|
|
317
|
+
color: var(--label-text-color, #333);
|
|
318
|
+
margin-bottom: var(--label-container-margin-bottom, 4px);
|
|
319
|
+
display: var(--label-container-display, inline-block);
|
|
312
320
|
}
|
|
313
321
|
|
|
314
322
|
.multipleSelect-btn {
|
|
315
323
|
display: flex;
|
|
316
|
-
width: var(--multipleSelect-btn-width,
|
|
324
|
+
width: var(--multipleSelect-btn-width, 99%);
|
|
317
325
|
white-space: var(--multipleSelect-btn-white-space, nowrap);
|
|
318
|
-
padding: var(--multipleSelect-btn-padding,
|
|
326
|
+
padding: var(--multipleSelect-btn-padding, 1px);
|
|
327
|
+
--button-border: var(--multipleSelect-btn-border, 1px solid white);
|
|
328
|
+
--button-font-size: var(--multipleSelect-btn-font-size, 12px);
|
|
329
|
+
--button-width: var(--multipleSelect-btn-width, 100%);
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
.icon-container {
|
|
333
|
+
width: var(--select-icon-container-width, fit-content);
|
|
334
|
+
height: var(--select-icon-container-height, fit-content);
|
|
335
|
+
border-radius: var(--select-icon-container-border-radius);
|
|
336
|
+
opacity: var(--select-icon-container-opacity);
|
|
337
|
+
background: var(--select-icon-container-background);
|
|
338
|
+
display: flex;
|
|
339
|
+
align-items: center;
|
|
340
|
+
justify-content: center;
|
|
341
|
+
margin: var(--select-icon-container-margin, 0px 8px 0px 0px);
|
|
342
|
+
padding: var(--select-icon-container-padding);
|
|
343
|
+
--image-height: var(--select-icon-height);
|
|
344
|
+
--image-width: var(--select-icon-height);
|
|
345
|
+
}
|
|
346
|
+
|
|
347
|
+
.apply-btn-container {
|
|
348
|
+
padding: var(--apply-btn-container-padding, 5px);
|
|
349
|
+
border-top: var(--apply-btn-container-border-top, 1px solid #ddd);
|
|
350
|
+
background-color: var(--apply-btn-container-background-color, #f9f9f9);
|
|
351
|
+
position: var(--apply-btn-container-position, sticky);
|
|
352
|
+
width: var(--apply-btn-container-width, 94%);
|
|
353
|
+
display: var(--apply-btn-display, flex);
|
|
354
|
+
flex-direction: var(--apply-btn-flex-direction, column);
|
|
355
|
+
--button-width: var(--apply-btn-width, 100%);
|
|
356
|
+
--button-padding: var(--apply-btn-padding, 10px);
|
|
357
|
+
--button-font-size: var(--apply-btn-font-size, 14px);
|
|
319
358
|
}
|
|
320
359
|
|
|
321
360
|
.icon-container {
|
|
@@ -9,11 +9,12 @@ declare const __propDef: {
|
|
|
9
9
|
keydown: KeyboardEvent;
|
|
10
10
|
message: CustomEvent<any>;
|
|
11
11
|
dropdownClick: CustomEvent<any>;
|
|
12
|
-
selectInput: CustomEvent<any>;
|
|
13
12
|
} & {
|
|
14
13
|
[evt: string]: CustomEvent<any>;
|
|
15
14
|
};
|
|
16
|
-
slots: {
|
|
15
|
+
slots: {
|
|
16
|
+
bottomContent: {};
|
|
17
|
+
};
|
|
17
18
|
};
|
|
18
19
|
export type SelectProps = typeof __propDef.props;
|
|
19
20
|
export type SelectEvents = typeof __propDef.events;
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import type { ButtonProperties } from '../Button/properties';
|
|
2
1
|
import type { ImgProps } from '../Img/properties';
|
|
3
2
|
export type SelectProperties = {
|
|
4
3
|
placeholder: string;
|
|
@@ -11,6 +10,5 @@ export type SelectProperties = {
|
|
|
11
10
|
hideDropDownIcon?: boolean;
|
|
12
11
|
dropDownIcon?: string;
|
|
13
12
|
leftIcon: ImgProps | null;
|
|
14
|
-
|
|
15
|
-
addInputButtonProps?: ButtonProperties;
|
|
13
|
+
showSingleSelectButton?: boolean | null;
|
|
16
14
|
};
|