Merge pull request #184 from perfect-things/multiselect2

Multiselect2

CHANGELOG.md

@@ -1,8 +1,12 @@
 Changelog
 =========
 
+## v9.4.3 *(2024-01-14)*
+- More bugfixes, tests and some optimisations of the `Combobox` component.
+
+
 ## v9.4.2 *(2024-01-10)*
-- Minor bugfixes to `Popover` and `Combobox`.
+- Minor bugfixes for `Popover` and `Combobox`.
 
 
 ## v9.4.1 *(2024-01-07)*

babel.config.json

@@ -1,4 +1,5 @@
 {
+  "env": { "development": { "compact": false } },
   "presets": [
     [ "@babel/preset-env", { "targets": { "node": "current" }} ]
   ]

docs-src/components/input/combobox/Combobox.svelte

@@ -33,7 +33,7 @@
 
 
 <h3>Simple data (just an array of strings)</h3>
-<Combobox items="{dataSimple}" placeholder="Type to filter" allowNew
+<Combobox items="{dataSimple}" placeholder="Type to filter"
 	bind:value="{valueSimple}" />
 
 <h4>Selected value: </h4>
@@ -54,14 +54,14 @@
 
 
 
-<h2>Multiselect</h2>
-<p>This adds checkboxes to the list items, but it disables the auto-lookup functionality,<br>as the input value string becomes a comma-separated list of selected items' names.</p>
+<h2 id="Multiselect"><a href="#Combobox/Multiselect">Multiselect</a></h2>
 
+<p>This adds checkboxes to the list items, but it disables the auto-lookup functionality,<br>as the input value string becomes a comma-separated list of selected items' names.</p>
 <h3>Simple data</h3>
 <Combobox
 	items="{dataSimple}"
 	multiselect
-	placeholder="Type to filter"
+	clearOnEsc
 	bind:value="{multiselectSimpleValue}" />
 <h4>Selected value: </h4>
 <JsonBox value="{multiselectSimpleValue}" />
@@ -71,7 +71,6 @@
 <Combobox
 	{items}
 	multiselect
-	placeholder="Type to filter"
 	bind:value="{multiselectValue}" />
 <h4>Selected value: </h4>
 <JsonBox value="{multiselectValue}" />
@@ -105,18 +104,16 @@ const apiProps = [
 	{ name: 'name', type: 'string', description: 'Assign title to the underlying input.' },
 	{ name: 'multiselect', description: 'This changes the control to a multiselect. The following changes will apply:<ul>' +
 		'<li>dropdown items will receive checkboxes,' +
-		'<li>the input textbox will become read-only,' +
-		'<li>text input will loose the auto-lookup functionality,' +
-		'<li>the control will only allow to change the value by clicking on items (or check them using the `Space` key),' +
+		'<li>and the control will only allow to change the value by clicking on items (or check them using the `Space` key),' +
 		'<li>the value will become an array,' +
-		'<li>arguments `allowNew`, `clearOnEsc` and `placeholder` will have no effect.' +
+		'<li>argument `allowNew` will have no effect.' +
 		'</ul>'
 	},
 	{ name: 'placeholder', type: 'string', description: 'Shows placeholder text.' },
 	{ name: 'required', description: 'Mark the combobox as <i>aria-required</i>.' },
 	{ name: 'showOnFocus', description: 'If present - the popup will be automatically open when the combobox gets focus (as opposed to, when the user starts typing).' },
 	{ name: 'title', type: 'string', description: 'Assign title to the underlying input.' },
-	{ name: 'value', type: ['string', 'number', 'object', 'array'], description: 'Value of the combobox.<br>If combobox is <em>multiselect</em>, the value will be an array. ' },
+	{ name: 'value', type: ['string', 'number', 'object', 'array'], description: 'Value of the combobox.<br>If combobox is <em>multiselect</em>, the value will be an array of strings or objects. ' },
 	{ name: 'bind:element', type: 'element', description: 'Exposes the HTML element of the component.' },
 	{ name: 'bind:inputElement', type: 'element', description: 'Exposes the HTML element of the underlying input.' },
 	{ name: 'on:change', type: 'function', description: 'Triggered when the value changes.' },

docs-src/pages/changelog.svelte

@@ -1,7 +1,11 @@
 <h1>Changelog</h1>
+<h2>v9.4.3 <em>(2024-01-14)</em></h2>
+<ul>
+<li>More bugfixes, tests and some optimisations of the <code>Combobox</code> component.</li>
+</ul>
 <h2>v9.4.2 <em>(2024-01-10)</em></h2>
 <ul>
-<li>Minor bugfixes to <code>Popover</code> and <code>Combobox</code>.</li>
+<li>Minor bugfixes for <code>Popover</code> and <code>Combobox</code>.</li>
 </ul>
 <h2>v9.4.1 <em>(2024-01-07)</em></h2>
 <ul>

jest.config.js

@@ -1,5 +1,7 @@
 export default {
 	rootDir: './',
+	// 10s - tests are interactive and have to wait for animations & rendering
+	slowTestThreshold: 10,
 	transform: {
 		'^.+\\.svelte$': 'svelte-jester',
 		'^.+\\.js$': 'babel-jest',

src/input/combobox/Combobox.css

@@ -31,9 +31,9 @@
 .combobox-list-header,
 .combobox-list-item {
 	height: var(--ui-button-height);
+	line-height: 1;
 	display: flex;
 	align-items: center;
-	line-height: 1;
 	white-space: nowrap;
 	text-overflow: ellipsis;
 	overflow-x: hidden;
@@ -65,6 +65,8 @@
 }
 
 .combobox-list-item svg { margin-right: 0.5rem; }
+.combobox-list-item .tick { display: none; }
+.combobox-list-item.checked .tick { display: block; }
 
 .combobox-list:not(.multiselect) .combobox-list-item.in-group { padding-left: 2rem; }
 
@@ -75,15 +77,9 @@
 	background-color: var(--ui-color-highlight-1);
 }
 
-
-.desktop .combobox-list-item.selected {
-	background-color: var(--ui-color-highlight-1);
-	outline: 1px solid transparent;
-}
-.desktop .combobox-list-item:hover {
-	background-color: var(--ui-color-highlight);
-	outline: 1px solid transparent;
-}
+.desktop .combobox-list-item.checked { background-color: var(--ui-color-highlight-semi); }
+.desktop .combobox-list-item.selected { background-color: var(--ui-color-highlight-1); }
+.desktop .combobox-list-item:hover { background-color: var(--ui-color-highlight); }
 
 .combobox-list-item b { color: var(--ui-color-accent); }