From a1feca747ac5cf7de4e2de2408d14b9a033e8afa Mon Sep 17 00:00:00 2001 From: Janosh Riebesell Date: Sat, 25 Mar 2023 18:39:09 -0700 Subject: [PATCH] don't highlight noMatchingOptionsMsg in sms-search-matches drop non-functional --sms-highlight-* CSS variables and explain in readme how to customize highlight styles change default highlight color to mediumaquamarine --- readme.md | 18 +++++++++++------- src/app.css | 3 ++- src/lib/MultiSelect.svelte | 17 ++++++++++------- 3 files changed, 23 insertions(+), 15 deletions(-) diff --git a/readme.md b/readme.md index d08022d..d9b0078 100644 --- a/readme.md +++ b/readme.md @@ -189,7 +189,7 @@ Full list of props/bindable variables for this component. The `Option` type you highlightMatches: boolean = true ``` - Whether to highlight text in the dropdown options that matches the current user-entered search query. Uses the [CSS Custom Highlight API](https://developer.mozilla.org/docs/Web/API/CSS_Custom_Highlight_API) with limited browser support and [styling options](https://developer.mozilla.org/docs/Web/CSS/::highlight). See `::highlight(search-results)` below for available CSS variables. + Whether to highlight text in the dropdown options that matches the current user-entered search query. Uses the [CSS Custom Highlight API](https://developer.mozilla.org/docs/Web/API/CSS_Custom_Highlight_API) with limited browser support and [styling options](https://developer.mozilla.org/docs/Web/CSS/::highlight). See `::highlight(sms-search-matches)` below for available CSS variables. 1. ```ts id: string | null = null @@ -526,7 +526,7 @@ Minimal example that changes the background color of the options dropdown: - `div.multiselect.open` - `z-index: var(--sms-open-z-index, 4)`: Increase this if needed to ensure the dropdown list is displayed atop all other page elements. - `div.multiselect:focus-within` - - `border: var(--sms-focus-border, 1pt solid var(--sms-active-color, cornflowerblue))`: Border when component has focus. Defaults to `--sms-active-color` if not set which defaults to `cornflowerblue`. + - `border: var(--sms-focus-border, 1pt solid var(--sms-active-color, cornflowerblue))`: Border when component has focus. Defaults to `--sms-active-color` which in turn defaults to `cornflowerblue`. - `div.multiselect.disabled` - `background: var(--sms-disabled-bg, lightgray)`: Background when in disabled state. - `div.multiselect input::placeholder` @@ -559,11 +559,15 @@ Minimal example that changes the background color of the options dropdown: - `div.multiselect > ul.options > li.disabled` - `background: var(--sms-li-disabled-bg, #f5f5f6)`: Background of disabled options in the dropdown list. - `color: var(--sms-li-disabled-text, #b8b8b8)`: Text color of disabled option in the dropdown list. -- `::highlight(search-results)`: applies to search results in dropdown list that match the current search query if `highlightMatches=true` - - `color: var(--sms-highlight-color, orange)` - - `background: var(--sms-highlight-bg)` - - `text-decoration: var(--sms-highlight-text-decoration)` - - `text-decoration-color: var(--sms-highlight-text-decoration-color)` +- `::highlight(sms-search-matches)`: applies to search results in dropdown list that match the current search query if `highlightMatches=true`. These styles [cannot be set via CSS variables](https://stackoverflow.com/a/56799215). Instead, use a new rule set. For example: + + ```css + ::highlight(sms-search-matches) { + color: orange; + background: rgba(0, 0, 0, 0.15); + text-decoration: underline; + } + ``` ### With CSS frameworks diff --git a/src/app.css b/src/app.css index 797b3f8..ade69a7 100644 --- a/src/app.css +++ b/src/app.css @@ -3,7 +3,8 @@ --blue: cornflowerblue; --text-color: #ccc; - --sms-active-color: var(--blue); + --sms-active-color: rgba(0, 0, 0, 0.4); + --sms-focus-border: 1pt solid cornflowerblue; --sms-options-bg: rgb(33, 31, 47); --sms-selected-bg: rgba(255, 255, 255, 0.2); --sms-text-color: white; diff --git a/src/lib/MultiSelect.svelte b/src/lib/MultiSelect.svelte index f979af1..110d610 100644 --- a/src/lib/MultiSelect.svelte +++ b/src/lib/MultiSelect.svelte @@ -383,7 +383,13 @@ const query = event?.target?.value.trim().toLowerCase() if (!query) return - const tree_walker = document.createTreeWalker(ul_options, NodeFilter.SHOW_TEXT) + const tree_walker = document.createTreeWalker(ul_options, NodeFilter.SHOW_TEXT, { + acceptNode: (node) => { + // don't highlight text in the "no matching options" message + if (node?.textContent === noMatchingOptionsMsg) return NodeFilter.FILTER_REJECT + return NodeFilter.FILTER_ACCEPT + }, + }) const text_nodes: Node[] = [] let current_node = tree_walker.nextNode() while (current_node) { @@ -414,7 +420,7 @@ // create Highlight object from ranges and add to registry // eslint-disable-next-line no-undef - CSS.highlights.set(`search-results`, new Highlight(...ranges.flat())) + CSS.highlights.set(`sms-search-matches`, new Highlight(...ranges.flat())) } @@ -782,10 +788,7 @@ :where(span.max-select-msg) { padding: 0 3pt; } - ::highlight(search-results) { - color: var(--sms-highlight-color, orange); - background: var(--sms-highlight-bg); - text-decoration: var(--sms-highlight-text-decoration); - text-decoration-color: var(--sms-highlight-text-decoration-color); + ::highlight(sms-search-matches) { + color: mediumaquamarine; }