Skip to content

Commit

Permalink
Multi select selected value parts and highlighted parts.
Browse files Browse the repository at this point in the history 
Not so much the styling but putting in place the CSS hooks to hand the
styling on.
  • Loading branch information
@jachin
jachin committed Mar 26, 2024
1 parent 63586fe commit 0769682
Show file tree
Hide file tree
Showing 5 changed files with 81 additions and 45 deletions.
42 changes: 27 additions & 15 deletions dist/much-select-elm-debug.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21160,6 +21160,16 @@ var $author$project$OptionLabel$getLabelString = function (optionLabel) {
var string = optionLabel.a;
return string;
};
var $author$project$OptionPart$toSelectedValueAttribute = F2(
function (isHighlighted, optionPart) {
var highlightedPart = isHighlighted ? 'highlighted-value' : '';
var string = optionPart.a;
if (string === '') {
return A2($elm$html$Html$Attributes$attribute, 'part', 'selected-value ' + highlightedPart);
} else {
return A2($elm$html$Html$Attributes$attribute, 'part', 'selected-value ' + (highlightedPart + (' ' + string)));
}
});
var $author$project$FancyOption$valueLabelHtml = F3(
function (toggleSelectedMsg, labelText, optionValue) {
return A2(
Expand Down Expand Up @@ -21210,10 +21220,15 @@ var $author$project$FancyOption$toMultiSelectValueHtml = F4(
$elm$html$Html$div,
_List_fromArray(
[
$elm$html$Html$Attributes$class('value'),
$elm$html$Html$Attributes$classList(
_List_fromArray(
[
_Utils_Tuple2('value', true),
_Utils_Tuple2('selected-value', true)
])),
A2(
$author$project$OptionPart$toDropdownAttribute,
$author$project$FancyOption$getOptionDisplay(fancyOption),
$author$project$OptionPart$toSelectedValueAttribute,
false,
$author$project$FancyOption$getOptionPart(fancyOption))
]),
_List_fromArray(
Expand All @@ -21238,11 +21253,12 @@ var $author$project$FancyOption$toMultiSelectValueHtml = F4(
_List_fromArray(
[
_Utils_Tuple2('value', true),
_Utils_Tuple2('selected-value', true),
_Utils_Tuple2('highlighted-value', true)
])),
A2(
$author$project$OptionPart$toDropdownAttribute,
$author$project$FancyOption$getOptionDisplay(fancyOption),
$author$project$OptionPart$toSelectedValueAttribute,
true,
$author$project$FancyOption$getOptionPart(fancyOption))
]),
_List_fromArray(
Expand Down Expand Up @@ -22170,14 +22186,6 @@ var $author$project$MuchSelect$singleSelectCustomHtmlInputField = F5(
]),
_List_Nil));
});
var $author$project$OptionPart$toSelectedValueAttribute = function (optionPart) {
var string = optionPart.a;
if (string === '') {
return A2($elm$html$Html$Attributes$attribute, 'part', 'selected-value');
} else {
return A2($elm$html$Html$Attributes$attribute, 'part', 'selected-value ' + string);
}
};
var $author$project$FancyOption$toSingleSelectValueHtml = function (option) {
switch (option.$) {
case 'FancyOption':
Expand All @@ -22186,7 +22194,9 @@ var $author$project$FancyOption$toSingleSelectValueHtml = function (option) {
_List_fromArray(
[
$elm$html$Html$Attributes$id('selected-value'),
$author$project$OptionPart$toSelectedValueAttribute(
A2(
$author$project$OptionPart$toSelectedValueAttribute,
false,
$author$project$FancyOption$getOptionPart(option))
]),
_List_fromArray(
Expand All @@ -22201,7 +22211,9 @@ var $author$project$FancyOption$toSingleSelectValueHtml = function (option) {
_List_fromArray(
[
$elm$html$Html$Attributes$id('selected-value'),
$author$project$OptionPart$toSelectedValueAttribute(
A2(
$author$project$OptionPart$toSelectedValueAttribute,
false,
$author$project$FancyOption$getOptionPart(option))
]),
_List_fromArray(
Expand Down
42 changes: 27 additions & 15 deletions dist/much-select-elm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15938,6 +15938,16 @@ var $author$project$OptionLabel$getLabelString = function (optionLabel) {
var string = optionLabel.a;
return string;
};
var $author$project$OptionPart$toSelectedValueAttribute = F2(
function (isHighlighted, optionPart) {
var highlightedPart = isHighlighted ? 'highlighted-value' : '';
var string = optionPart;
if (string === '') {
return A2($elm$html$Html$Attributes$attribute, 'part', 'selected-value ' + highlightedPart);
} else {
return A2($elm$html$Html$Attributes$attribute, 'part', 'selected-value ' + (highlightedPart + (' ' + string)));
}
});
var $author$project$FancyOption$valueLabelHtml = F3(
function (toggleSelectedMsg, labelText, optionValue) {
return A2(
Expand Down Expand Up @@ -15988,10 +15998,15 @@ var $author$project$FancyOption$toMultiSelectValueHtml = F4(
$elm$html$Html$div,
_List_fromArray(
[
$elm$html$Html$Attributes$class('value'),
$elm$html$Html$Attributes$classList(
_List_fromArray(
[
_Utils_Tuple2('value', true),
_Utils_Tuple2('selected-value', true)
])),
A2(
$author$project$OptionPart$toDropdownAttribute,
$author$project$FancyOption$getOptionDisplay(fancyOption),
$author$project$OptionPart$toSelectedValueAttribute,
false,
$author$project$FancyOption$getOptionPart(fancyOption))
]),
_List_fromArray(
Expand All @@ -16016,11 +16031,12 @@ var $author$project$FancyOption$toMultiSelectValueHtml = F4(
_List_fromArray(
[
_Utils_Tuple2('value', true),
_Utils_Tuple2('selected-value', true),
_Utils_Tuple2('highlighted-value', true)
])),
A2(
$author$project$OptionPart$toDropdownAttribute,
$author$project$FancyOption$getOptionDisplay(fancyOption),
$author$project$OptionPart$toSelectedValueAttribute,
true,
$author$project$FancyOption$getOptionPart(fancyOption))
]),
_List_fromArray(
Expand Down Expand Up @@ -16958,14 +16974,6 @@ var $author$project$MuchSelect$singleSelectCustomHtmlInputField = F5(
]),
_List_Nil));
});
var $author$project$OptionPart$toSelectedValueAttribute = function (optionPart) {
var string = optionPart;
if (string === '') {
return A2($elm$html$Html$Attributes$attribute, 'part', 'selected-value');
} else {
return A2($elm$html$Html$Attributes$attribute, 'part', 'selected-value ' + string);
}
};
var $author$project$FancyOption$toSingleSelectValueHtml = function (option) {
switch (option.$) {
case 0:
Expand All @@ -16974,7 +16982,9 @@ var $author$project$FancyOption$toSingleSelectValueHtml = function (option) {
_List_fromArray(
[
$elm$html$Html$Attributes$id('selected-value'),
$author$project$OptionPart$toSelectedValueAttribute(
A2(
$author$project$OptionPart$toSelectedValueAttribute,
false,
$author$project$FancyOption$getOptionPart(option))
]),
_List_fromArray(
Expand All @@ -16989,7 +16999,9 @@ var $author$project$FancyOption$toSingleSelectValueHtml = function (option) {
_List_fromArray(
[
$elm$html$Html$Attributes$id('selected-value'),
$author$project$OptionPart$toSelectedValueAttribute(
A2(
$author$project$OptionPart$toSelectedValueAttribute,
false,
$author$project$FancyOption$getOptionPart(option))
]),
_List_fromArray(
Expand Down
12 changes: 6 additions & 6 deletions site/demo-styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -536,7 +536,7 @@ much-select::part(input-filter) {
margin: 0;

/* Keep input filter's text from running over the dropdown indicator. */
padding: 0 0.8em 0 0px;
padding: 0 0.8em 0 0;
border-right: 2px dotted var(--much-select-border-color);
}

Expand Down Expand Up @@ -569,16 +569,16 @@ much-select::part(input-filter):hover, much-select::part(input-filter):focus {
background: none;
}

much-select::part(value) {
much-select[multi-select]::part(selected-value) {
padding: 3px;
font-size: 20px;
color: white;
background-image: linear-gradient(to bottom, #4f6a8f, #88a2bc);
background-repeat: repeat-x;
margin: 2px 2px;
border-radius: 5px;
margin: 0.25rem 0.25rem;
border-radius: 0.2rem;
border: 3px solid #d99477;
min-width: 10px;
min-width: 0.5rem;
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
Expand All @@ -595,7 +595,7 @@ much-select::part(selected-value) {
margin-top: 0.7em;
}

much-select::part(value highlighted-value) {
much-select[multi-select]::part(selected-value highlighted-value) {
background-image: linear-gradient(to bottom, #d99477, #efb680);
background-repeat: repeat-x;
}
Expand Down
14 changes: 9 additions & 5 deletions src/FancyOption.elm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -584,14 +584,14 @@ toSingleSelectValueHtml option =
FancyOption _ _ _ _ _ _ _ ->
span
[ id "selected-value"
, OptionPart.toSelectedValueAttribute (getOptionPart option)
, OptionPart.toSelectedValueAttribute False (getOptionPart option)
]
[ text (option |> getOptionLabel |> optionLabelToString) ]

CustomFancyOption _ _ _ _ ->
span
[ id "selected-value"
, OptionPart.toSelectedValueAttribute (getOptionPart option)
, OptionPart.toSelectedValueAttribute False (getOptionPart option)
]
[ text (option |> getOptionLabel |> optionLabelToString) ]

Expand Down Expand Up @@ -626,8 +626,11 @@ toMultiSelectValueHtml toggleSelectedMsg deselectOptionInternal enableSingleItem

OptionSelected _ _ ->
div
[ class "value"
, OptionPart.toDropdownAttribute (getOptionDisplay fancyOption) (getOptionPart fancyOption)
[ classList
[ ( "value", True )
, ( "selected-value", True )
]
, OptionPart.toSelectedValueAttribute False (getOptionPart fancyOption)
]
[ valueLabelHtml
toggleSelectedMsg
Expand All @@ -646,9 +649,10 @@ toMultiSelectValueHtml toggleSelectedMsg deselectOptionInternal enableSingleItem
div
[ classList
[ ( "value", True )
, ( "selected-value", True )
, ( "highlighted-value", True )
]
, OptionPart.toDropdownAttribute (getOptionDisplay fancyOption) (getOptionPart fancyOption)
, OptionPart.toSelectedValueAttribute True (getOptionPart fancyOption)
]
[ valueLabelHtml toggleSelectedMsg (OptionLabel.getLabelString optionLabel) optionValue, removalHtml optionValue ]

Expand Down
16 changes: 12 additions & 4 deletions src/OptionPart.elm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,16 +11,24 @@ type OptionPart
= OptionPart String


toSelectedValueAttribute : OptionPart -> Html.Attribute msg
toSelectedValueAttribute optionPart =
toSelectedValueAttribute : Bool -> OptionPart -> Html.Attribute msg
toSelectedValueAttribute isHighlighted optionPart =
let
highlightedPart =
if isHighlighted then
"highlighted-value"

else
""
in
case optionPart of
OptionPart string ->
case string of
"" ->
Html.Attributes.attribute "part" "selected-value"
Html.Attributes.attribute "part" ("selected-value " ++ highlightedPart)

_ ->
Html.Attributes.attribute "part" ("selected-value " ++ string)
Html.Attributes.attribute "part" ("selected-value " ++ highlightedPart ++ " " ++ string)


toDropdownAttribute : OptionDisplay -> OptionPart -> Html.Attribute msg
Expand Down

0 comments on commit 0769682

Please sign in to comment.