simplesvelte 2.2.19 → 2.2.21

package/dist/Modal.svelte

@@ -21,7 +21,7 @@
 	})
 </script>
 
-<dialog bind:this={dialogEl} onclose={() => (open = false)} class="modal modal-middle overflow-auto">
+<dialog bind:this={dialogEl} onclose={() => (open = false)} {open} class="modal modal-middle overflow-auto">
 	<div class="modal-box pt-12 md:min-w-[32rem]">
 		<form method="dialog">
 			<button

package/dist/Select.svelte

@@ -135,6 +135,7 @@
 		const result: FlatListItem[] = []
 		const groups: Record<string, Option[]> = {}
 		const ungrouped: Option[] = []
+
 		for (const item of filteredItems) {
 			if (item.group) {
 				if (!groups[item.group]) groups[item.group] = []
@@ -143,17 +144,56 @@
 				ungrouped.push(item)
 			}
 		}
-		// Add ungrouped items first
-		for (const item of ungrouped) {
-			result.push({ type: 'option', item })
-		}
-		// Add grouped items with headers
-		for (const groupName of Object.keys(groups)) {
-			result.push({ type: 'header', group: groupName })
-			for (const item of groups[groupName]) {
+
+		// In multiple mode, separate selected and unselected items
+		if (multiple && Array.isArray(normalizedValue) && normalizedValue.length > 0) {
+			const selectedUngrouped: Option[] = []
+			const unselectedUngrouped: Option[] = []
+
+			for (const item of ungrouped) {
+				if (normalizedValue.includes(item.value)) {
+					selectedUngrouped.push(item)
+				} else {
+					unselectedUngrouped.push(item)
+				}
+			}
+
+			// Add selected ungrouped items first
+			for (const item of selectedUngrouped) {
+				result.push({ type: 'option', item })
+			}
+			// Then unselected ungrouped items
+			for (const item of unselectedUngrouped) {
+				result.push({ type: 'option', item })
+			}
+
+			// Add grouped items with headers, also with selected first within each group
+			for (const groupName of Object.keys(groups)) {
+				const groupItems = groups[groupName]
+				const selectedGroupItems = groupItems.filter((item) => normalizedValue.includes(item.value))
+				const unselectedGroupItems = groupItems.filter((item) => !normalizedValue.includes(item.value))
+
+				result.push({ type: 'header', group: groupName })
+				for (const item of selectedGroupItems) {
+					result.push({ type: 'option', item })
+				}
+				for (const item of unselectedGroupItems) {
+					result.push({ type: 'option', item })
+				}
+			}
+		} else {
+			// Normal ordering when not in multiple mode or no selections
+			for (const item of ungrouped) {
 				result.push({ type: 'option', item })
 			}
+			for (const groupName of Object.keys(groups)) {
+				result.push({ type: 'header', group: groupName })
+				for (const item of groups[groupName]) {
+					result.push({ type: 'option', item })
+				}
+			}
 		}
+
 		return result
 	})
 
@@ -259,32 +299,40 @@
 				detailsOpen = false
 			}}>
 			<summary
-				class="select h-max min-h-10 w-full min-w-12 cursor-pointer !bg-none pr-1"
+				class="select h-max min-h-10 w-full min-w-12 cursor-pointer bg-none! pr-1"
 				onclick={() => {
 					searchEL?.focus()
 					filterInput = ''
 				}}>
 				{#if multiple}
-					<!-- Multi-select display with chips -->
+					<!-- Multi-select display with condensed chips -->
 					<div class="flex min-h-8 flex-wrap gap-1 p-1">
-						{#each selectedItems as item (item.value)}
-							<div class="badge !badge-primary gap-1">
-								<span class="truncate">{item.label}</span>
+						{#if selectedItems.length > 0}
+							<!-- Show first selected item -->
+							<div class="badge badge-neutral bg-base-200 text-base-content gap-1">
+								<span class="max-w-[200px] truncate">{selectedItems[0].label}</span>
 								<button
 									type="button"
-									class="btn btn-xs btn-circle btn-ghost"
+									class="btn btn-xs btn-circle btn-ghost hover:bg-base-300"
 									onclick={(e) => {
 										e.stopPropagation()
-										removeSelectedItem(item.value)
+										removeSelectedItem(selectedItems[0].value)
 									}}>
 									✕
 								</button>
 							</div>
-						{/each}
+
+							{#if selectedItems.length > 1}
+								<!-- Show count indicator for remaining items -->
+								<div class="badge badge-ghost text-base-content/70">
+									(+{selectedItems.length - 1} more)
+								</div>
+							{/if}
+						{/if}
 						<!-- Search input for filtering in multi-select -->
 						<input
 							type="text"
-							class="h-full outline-0 {detailsOpen ? 'cursor-text' : 'cursor-pointer'}"
+							class="h-full min-w-[120px] flex-1 outline-0 {detailsOpen ? 'cursor-text' : 'cursor-pointer'}"
 							bind:this={searchEL}
 							bind:value={filterInput}
 							onclick={() => {
@@ -373,7 +421,7 @@
 								<li style="height: {itemHeight}px;">
 									<button
 										class="flex h-full w-full items-center gap-2 {isSelected
-											? ' bg-primary text-primary-content hover:!bg-primary/70'
+											? ' bg-primary text-primary-content hover:bg-primary/70!'
 											: ''}"
 										type="button"
 										onclick={() => {
@@ -383,7 +431,7 @@
 										{#if multiple}
 											<input
 												type="checkbox"
-												class="checkbox checkbox-sm !text-primary-content pointer-events-none"
+												class="checkbox checkbox-sm text-primary-content! pointer-events-none"
 												checked={isSelected}
 												readonly />
 										{/if}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "simplesvelte",
-	"version": "2.2.19",
+	"version": "2.2.21",
 	"scripts": {
 		"dev": "bun vite dev",
 		"build": "bun vite build && bun run prepack",