Adding a right slot wrapper to make styling the right slot easier.

jachin · Mar 27, 2024 · 782975e · 782975e
1 parent 43a4083
commit 782975e
Show file tree

Hide file tree

Showing 4 changed files with 232 additions and 95 deletions.
diff --git a/dist/much-select-elm-debug.js b/dist/much-select-elm-debug.js
@@ -21634,99 +21634,151 @@ var $author$project$MuchSelect$remoteButtonSlot = function (index) {
 };
 var $author$project$MuchSelect$rightSlotHtml = F4(
 	function (rightSlot, interactionState, isDisabled, selectedIndex) {
+		var wrapper = function (content) {
+			return A2(
+				$elm$html$Html$div,
+				_List_fromArray(
+					[
+						$elm$html$Html$Attributes$id('right-slot-wrapper'),
+						A2($elm$html$Html$Attributes$attribute, 'part', 'right-slot-wrapper')
+					]),
+				_List_fromArray(
+					[content]));
+		};
 		switch (rightSlot.$) {
 			case 'ShowNothing':
 				return $elm$html$Html$text('');
 			case 'ShowLoadingIndicator':
-				return A3(
-					$elm$html$Html$node,
-					'slot',
+				return wrapper(
+					A3(
+						$elm$html$Html$node,
+						'slot',
+						_List_fromArray(
+							[
+								$elm$html$Html$Attributes$name('loading-indicator')
+							]),
+						_List_fromArray(
+							[$author$project$MuchSelect$defaultLoadingIndicator])));
+			case 'ShowDropdownIndicator':
+				var transitioning = rightSlot.a;
+				return A2(
+					$elm$html$Html$div,
 					_List_fromArray(
 						[
-							$elm$html$Html$Attributes$name('loading-indicator')
+							$elm$html$Html$Attributes$id('right-slot-wrapper'),
+							A2($elm$html$Html$Attributes$attribute, 'part', 'right-slot-wrapper')
 						]),
 					_List_fromArray(
-						[$author$project$MuchSelect$defaultLoadingIndicator]));
-			case 'ShowDropdownIndicator':
-				var transitioning = rightSlot.a;
-				return A2($author$project$MuchSelect$dropdownIndicator, interactionState, transitioning);
+						[
+							A2($author$project$MuchSelect$dropdownIndicator, interactionState, transitioning)
+						]));
 			case 'ShowClearButton':
 				return isDisabled ? $elm$html$Html$text('') : A2(
 					$elm$html$Html$div,
 					_List_fromArray(
 						[
-							$elm$html$Html$Attributes$id('clear-button-wrapper'),
-							A2($elm$html$Html$Attributes$attribute, 'part', 'clear-button-wrapper'),
-							$author$project$Events$onClickPreventDefaultAndStopPropagation($author$project$MuchSelect$ClearAllSelectedOptions)
+							$elm$html$Html$Attributes$id('right-slot-wrapper'),
+							A2($elm$html$Html$Attributes$attribute, 'part', 'right-slot-wrapper')
 						]),
 					_List_fromArray(
 						[
-							A3(
-							$elm$html$Html$node,
-							'slot',
+							A2(
+							$elm$html$Html$div,
 							_List_fromArray(
 								[
-									$elm$html$Html$Attributes$name('clear-button')
+									$elm$html$Html$Attributes$id('clear-button-wrapper'),
+									A2($elm$html$Html$Attributes$attribute, 'part', 'clear-button-wrapper'),
+									$author$project$Events$onClickPreventDefaultAndStopPropagation($author$project$MuchSelect$ClearAllSelectedOptions)
 								]),
 							_List_fromArray(
 								[
-									$elm$html$Html$text('✕')
+									A3(
+									$elm$html$Html$node,
+									'slot',
+									_List_fromArray(
+										[
+											$elm$html$Html$Attributes$name('clear-button')
+										]),
+									_List_fromArray(
+										[
+											$elm$html$Html$text('✕')
+										]))
 								]))
 						]));
 			case 'ShowAddButton':
 				return isDisabled ? $elm$html$Html$text('') : A2(
 					$elm$html$Html$div,
 					_List_fromArray(
 						[
-							$elm$html$Html$Attributes$class('add-remove-buttons')
+							$elm$html$Html$Attributes$id('right-slot-wrapper'),
+							A2($elm$html$Html$Attributes$attribute, 'part', 'right-slot-wrapper')
 						]),
 					_List_fromArray(
 						[
 							A2(
 							$elm$html$Html$div,
 							_List_fromArray(
 								[
-									$elm$html$Html$Attributes$class('add-button-wrapper'),
-									$elm$html$Html$Events$onClick(
-									$author$project$MuchSelect$AddMultiSelectValue(selectedIndex))
+									$elm$html$Html$Attributes$class('add-remove-buttons')
 								]),
 							_List_fromArray(
 								[
-									$author$project$MuchSelect$addButtonSlot(selectedIndex)
+									A2(
+									$elm$html$Html$div,
+									_List_fromArray(
+										[
+											$elm$html$Html$Attributes$class('add-button-wrapper'),
+											$elm$html$Html$Events$onClick(
+											$author$project$MuchSelect$AddMultiSelectValue(selectedIndex))
+										]),
+									_List_fromArray(
+										[
+											$author$project$MuchSelect$addButtonSlot(selectedIndex)
+										]))
 								]))
 						]));
 			default:
 				return isDisabled ? $elm$html$Html$text('') : A2(
 					$elm$html$Html$div,
 					_List_fromArray(
 						[
-							$elm$html$Html$Attributes$class('add-remove-buttons')
+							$elm$html$Html$Attributes$id('right-slot-wrapper'),
+							A2($elm$html$Html$Attributes$attribute, 'part', 'right-slot-wrapper')
 						]),
 					_List_fromArray(
 						[
 							A2(
 							$elm$html$Html$div,
 							_List_fromArray(
 								[
-									$elm$html$Html$Attributes$class('add-button-wrapper'),
-									$elm$html$Html$Events$onClick(
-									$author$project$MuchSelect$AddMultiSelectValue(selectedIndex))
-								]),
-							_List_fromArray(
-								[
-									$author$project$MuchSelect$addButtonSlot(selectedIndex)
-								])),
-							A2(
-							$elm$html$Html$div,
-							_List_fromArray(
-								[
-									$elm$html$Html$Attributes$class('remove-button-wrapper'),
-									$elm$html$Html$Events$onClick(
-									$author$project$MuchSelect$RemoveMultiSelectValue(selectedIndex))
+									$elm$html$Html$Attributes$class('add-remove-buttons')
 								]),
 							_List_fromArray(
 								[
-									$author$project$MuchSelect$remoteButtonSlot(selectedIndex)
+									A2(
+									$elm$html$Html$div,
+									_List_fromArray(
+										[
+											$elm$html$Html$Attributes$class('add-button-wrapper'),
+											$elm$html$Html$Events$onClick(
+											$author$project$MuchSelect$AddMultiSelectValue(selectedIndex))
+										]),
+									_List_fromArray(
+										[
+											$author$project$MuchSelect$addButtonSlot(selectedIndex)
+										])),
+									A2(
+									$elm$html$Html$div,
+									_List_fromArray(
+										[
+											$elm$html$Html$Attributes$class('remove-button-wrapper'),
+											$elm$html$Html$Events$onClick(
+											$author$project$MuchSelect$RemoveMultiSelectValue(selectedIndex))
+										]),
+									_List_fromArray(
+										[
+											$author$project$MuchSelect$remoteButtonSlot(selectedIndex)
+										]))
 								]))
 						]));
 		}

diff --git a/dist/much-select-elm.js b/dist/much-select-elm.js
@@ -16419,99 +16419,151 @@ var $author$project$MuchSelect$remoteButtonSlot = function (index) {
 };
 var $author$project$MuchSelect$rightSlotHtml = F4(
 	function (rightSlot, interactionState, isDisabled, selectedIndex) {
+		var wrapper = function (content) {
+			return A2(
+				$elm$html$Html$div,
+				_List_fromArray(
+					[
+						$elm$html$Html$Attributes$id('right-slot-wrapper'),
+						A2($elm$html$Html$Attributes$attribute, 'part', 'right-slot-wrapper')
+					]),
+				_List_fromArray(
+					[content]));
+		};
 		switch (rightSlot.$) {
 			case 0:
 				return $elm$html$Html$text('');
 			case 1:
-				return A3(
-					$elm$html$Html$node,
-					'slot',
+				return wrapper(
+					A3(
+						$elm$html$Html$node,
+						'slot',
+						_List_fromArray(
+							[
+								$elm$html$Html$Attributes$name('loading-indicator')
+							]),
+						_List_fromArray(
+							[$author$project$MuchSelect$defaultLoadingIndicator])));
+			case 2:
+				var transitioning = rightSlot.a;
+				return A2(
+					$elm$html$Html$div,
 					_List_fromArray(
 						[
-							$elm$html$Html$Attributes$name('loading-indicator')
+							$elm$html$Html$Attributes$id('right-slot-wrapper'),
+							A2($elm$html$Html$Attributes$attribute, 'part', 'right-slot-wrapper')
 						]),
 					_List_fromArray(
-						[$author$project$MuchSelect$defaultLoadingIndicator]));
-			case 2:
-				var transitioning = rightSlot.a;
-				return A2($author$project$MuchSelect$dropdownIndicator, interactionState, transitioning);
+						[
+							A2($author$project$MuchSelect$dropdownIndicator, interactionState, transitioning)
+						]));
 			case 3:
 				return isDisabled ? $elm$html$Html$text('') : A2(
 					$elm$html$Html$div,
 					_List_fromArray(
 						[
-							$elm$html$Html$Attributes$id('clear-button-wrapper'),
-							A2($elm$html$Html$Attributes$attribute, 'part', 'clear-button-wrapper'),
-							$author$project$Events$onClickPreventDefaultAndStopPropagation($author$project$MuchSelect$ClearAllSelectedOptions)
+							$elm$html$Html$Attributes$id('right-slot-wrapper'),
+							A2($elm$html$Html$Attributes$attribute, 'part', 'right-slot-wrapper')
 						]),
 					_List_fromArray(
 						[
-							A3(
-							$elm$html$Html$node,
-							'slot',
+							A2(
+							$elm$html$Html$div,
 							_List_fromArray(
 								[
-									$elm$html$Html$Attributes$name('clear-button')
+									$elm$html$Html$Attributes$id('clear-button-wrapper'),
+									A2($elm$html$Html$Attributes$attribute, 'part', 'clear-button-wrapper'),
+									$author$project$Events$onClickPreventDefaultAndStopPropagation($author$project$MuchSelect$ClearAllSelectedOptions)
 								]),
 							_List_fromArray(
 								[
-									$elm$html$Html$text('✕')
+									A3(
+									$elm$html$Html$node,
+									'slot',
+									_List_fromArray(
+										[
+											$elm$html$Html$Attributes$name('clear-button')
+										]),
+									_List_fromArray(
+										[
+											$elm$html$Html$text('✕')
+										]))
 								]))
 						]));
 			case 4:
 				return isDisabled ? $elm$html$Html$text('') : A2(
 					$elm$html$Html$div,
 					_List_fromArray(
 						[
-							$elm$html$Html$Attributes$class('add-remove-buttons')
+							$elm$html$Html$Attributes$id('right-slot-wrapper'),
+							A2($elm$html$Html$Attributes$attribute, 'part', 'right-slot-wrapper')
 						]),
 					_List_fromArray(
 						[
 							A2(
 							$elm$html$Html$div,
 							_List_fromArray(
 								[
-									$elm$html$Html$Attributes$class('add-button-wrapper'),
-									$elm$html$Html$Events$onClick(
-									$author$project$MuchSelect$AddMultiSelectValue(selectedIndex))
+									$elm$html$Html$Attributes$class('add-remove-buttons')
 								]),
 							_List_fromArray(
 								[
-									$author$project$MuchSelect$addButtonSlot(selectedIndex)
+									A2(
+									$elm$html$Html$div,
+									_List_fromArray(
+										[
+											$elm$html$Html$Attributes$class('add-button-wrapper'),
+											$elm$html$Html$Events$onClick(
+											$author$project$MuchSelect$AddMultiSelectValue(selectedIndex))
+										]),
+									_List_fromArray(
+										[
+											$author$project$MuchSelect$addButtonSlot(selectedIndex)
+										]))
 								]))
 						]));
 			default:
 				return isDisabled ? $elm$html$Html$text('') : A2(
 					$elm$html$Html$div,
 					_List_fromArray(
 						[
-							$elm$html$Html$Attributes$class('add-remove-buttons')
+							$elm$html$Html$Attributes$id('right-slot-wrapper'),
+							A2($elm$html$Html$Attributes$attribute, 'part', 'right-slot-wrapper')
 						]),
 					_List_fromArray(
 						[
 							A2(
 							$elm$html$Html$div,
 							_List_fromArray(
 								[
-									$elm$html$Html$Attributes$class('add-button-wrapper'),
-									$elm$html$Html$Events$onClick(
-									$author$project$MuchSelect$AddMultiSelectValue(selectedIndex))
-								]),
-							_List_fromArray(
-								[
-									$author$project$MuchSelect$addButtonSlot(selectedIndex)
-								])),
-							A2(
-							$elm$html$Html$div,
-							_List_fromArray(
-								[
-									$elm$html$Html$Attributes$class('remove-button-wrapper'),
-									$elm$html$Html$Events$onClick(
-									$author$project$MuchSelect$RemoveMultiSelectValue(selectedIndex))
+									$elm$html$Html$Attributes$class('add-remove-buttons')
 								]),
 							_List_fromArray(
 								[
-									$author$project$MuchSelect$remoteButtonSlot(selectedIndex)
+									A2(
+									$elm$html$Html$div,
+									_List_fromArray(
+										[
+											$elm$html$Html$Attributes$class('add-button-wrapper'),
+											$elm$html$Html$Events$onClick(
+											$author$project$MuchSelect$AddMultiSelectValue(selectedIndex))
+										]),
+									_List_fromArray(
+										[
+											$author$project$MuchSelect$addButtonSlot(selectedIndex)
+										])),
+									A2(
+									$elm$html$Html$div,
+									_List_fromArray(
+										[
+											$elm$html$Html$Attributes$class('remove-button-wrapper'),
+											$elm$html$Html$Events$onClick(
+											$author$project$MuchSelect$RemoveMultiSelectValue(selectedIndex))
+										]),
+									_List_fromArray(
+										[
+											$author$project$MuchSelect$remoteButtonSlot(selectedIndex)
+										]))
 								]))
 						]));
 		}

diff --git a/site/demo-styles.css b/site/demo-styles.css
@@ -464,6 +464,10 @@ much-select::part(value-casing output-style-datalist) {
     cursor: pointer;
 }
 
+much-select::part(right-slot-wrapper) {
+    border-left: 2px dotted var(--much-select-border-color);
+}
+
 much-select::part(input-value) {
     min-height: var(--much-select-height);
 }
@@ -537,7 +541,7 @@ much-select::part(input-filter) {
 
     /* Keep input filter's text from running over the dropdown indicator. */
     padding: 0 0.8em 0 0;
-    border-right: 2px dotted var(--much-select-border-color);
+
 }
 
 much-select::part(input-filter):hover, much-select::part(input-filter):focus {