simplesvelte 2.4.0 → 2.4.2
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/Select.svelte +40 -38
- package/package.json +1 -1
package/dist/Select.svelte
CHANGED
|
@@ -126,8 +126,8 @@
|
|
|
126
126
|
// Remove specific item from multi-select
|
|
127
127
|
function toggleItemSelection(itemValue: any) {
|
|
128
128
|
if (!multiple) {
|
|
129
|
-
// Close dropdown and
|
|
130
|
-
filterInput =
|
|
129
|
+
// Close dropdown and clear filter - the derived `filter` will show the label when closed
|
|
130
|
+
filterInput = ''
|
|
131
131
|
closeDropdown()
|
|
132
132
|
value = itemValue
|
|
133
133
|
if (onchange) onchange(value)
|
|
@@ -461,6 +461,8 @@
|
|
|
461
461
|
oninput={(e) => (filterInput = e.currentTarget.value)}
|
|
462
462
|
onclick={(e) => {
|
|
463
463
|
e.stopPropagation()
|
|
464
|
+
// Clear filter when opening dropdown so all options are visible
|
|
465
|
+
filterInput = ''
|
|
464
466
|
openDropdown()
|
|
465
467
|
}}
|
|
466
468
|
{placeholder}
|
|
@@ -493,46 +495,46 @@
|
|
|
493
495
|
id={popoverId}
|
|
494
496
|
popover
|
|
495
497
|
role="listbox"
|
|
496
|
-
class="dropdown menu bg-base-100 rounded-box z-50 mt-2 flex flex-col flex-nowrap gap-1 p-2 shadow outline m-0"
|
|
498
|
+
class="dropdown menu bg-base-100 rounded-box z-50 mt-2 flex flex-col flex-nowrap gap-1 p-2 shadow outline m-0 {!dropdownOpen ? 'pointer-events-none' : ''}"
|
|
497
499
|
style="position-anchor: {anchorName}; position: absolute; top: anchor(bottom); left: anchor(left); width: anchor-size(width)"
|
|
498
500
|
ontoggle={handlePopoverToggle}>
|
|
499
501
|
{#if multiple && filteredItems.length > 1}
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
502
|
+
<!-- Select All / Clear All options for multi-select -->
|
|
503
|
+
<div class="flex gap-2">
|
|
504
|
+
<button
|
|
505
|
+
type="button"
|
|
506
|
+
class="btn btn-sm hover:bg-base-content/10 grow"
|
|
507
|
+
onclick={() => {
|
|
508
|
+
const allValues = filteredItems.map((item) => item.value)
|
|
509
|
+
value = [...allValues]
|
|
510
|
+
if (onchange) onchange(value)
|
|
511
|
+
}}>
|
|
512
|
+
Select All
|
|
513
|
+
</button>
|
|
514
|
+
<button
|
|
515
|
+
type="button"
|
|
516
|
+
class="btn btn-sm hover:bg-base-content/10 grow"
|
|
517
|
+
onclick={() => {
|
|
518
|
+
value = []
|
|
519
|
+
if (onchange) onchange(value)
|
|
520
|
+
}}>
|
|
521
|
+
Clear All
|
|
522
|
+
</button>
|
|
523
|
+
</div>
|
|
524
|
+
{/if}
|
|
525
|
+
{#if isLoading}
|
|
526
|
+
<li class="m-2 flex items-center justify-center gap-2 text-sm text-gray-500">
|
|
527
|
+
<span class="loading loading-spinner loading-sm"></span>
|
|
528
|
+
Loading...
|
|
529
|
+
</li>
|
|
530
|
+
{:else if fetchError}
|
|
531
|
+
<li class="m-2 text-center text-sm text-error">{fetchError}</li>
|
|
532
|
+
{:else if filteredItems.length === 0}
|
|
533
|
+
<li class="m-2 text-center text-sm text-gray-500">No items found</li>
|
|
534
|
+
{/if}
|
|
533
535
|
|
|
534
|
-
|
|
535
|
-
|
|
536
|
+
{#if flatList.length > 0}
|
|
537
|
+
<div class="relative max-h-80 overflow-y-auto pr-2" use:scrollToSelected onscroll={handleScroll}>
|
|
536
538
|
<!-- Virtual spacer for items before visible range -->
|
|
537
539
|
{#if visibleItems.startIndex > 0}
|
|
538
540
|
<div style="height: {visibleItems.startIndex * itemHeight}px;"></div>
|