api change selectedValue -> value and some internal/builds/test updates

README.md

@@ -31,22 +31,22 @@ yarn add svelte-select
     {value: 'ice-cream', label: 'Ice Cream'},
   ];
 
-  let selectedValue = {value: 'cake', label: 'Cake'};
+  let value = {value: 'cake', label: 'Cake'};
 
   function handleSelect(event) {
     console.log('selected item': event.detail);
     // .. do something here 🙂
   }
 </script>
 
-<Select {items} {selectedValue} on:select={handleSelect}></Select>
+<Select {items} {value} on:select={handleSelect}></Select>
 ```
 
 
 ## API
 
 - `items: Array` Default: `[]`. List of selectable items that appear in the dropdown.
-- `selectedValue: Any` Default: `undefined`. Selected item or items
+- `value: Any` Default: `undefined`. Selected item or items
 - `filterText: String` Default: `''`. Text to filter `items` by.
 - `placeholder: String` Default: `'Select...'`. Placeholder text.
 - `noOptionsMessage: String` Default: `'No options'`. Message to display in list when there are no `items`.
@@ -56,9 +56,9 @@ yarn add svelte-select
 - `containerClasses: String` Default: `''`. Add extra container classes, for example 'global-x local-y'.
 - `containerStyles: String` Default: `''`. Add inline styles to container.
 - `isClearable: Boolean` Default: `true`. Enable clearing of selected items.
-- `isCreatable: Boolean` Default: `false`. Can create new item(s) to be added to `selectedValue`.
+- `isCreatable: Boolean` Default: `false`. Can create new item(s) to be added to `value`.
 - `isDisabled: Boolean` Default: `false`. Disable select.
-- `isMulti: Boolean` Default: `false`. Enable multi-select, `selectedValue` becomes an array of selected items.
+- `isMulti: Boolean` Default: `false`. Enable multi-select, `value` becomes an array of selected items.
 - `isSearchable: Boolean` Default: `true`. Enable search/filtering of `items` via `filterText`.
 - `isGroupHeaderSelectable: Boolean` Default: `false`. Enable selectable group headers in `items` (see adv demo).
 - `listPlacement: String` Default: `'auto'`. When `'auto'` displays either `'top'` or `'bottom'` depending on viewport.
@@ -129,9 +129,9 @@ export let getGroupHeaderLabel = option => {
 
 ```js
 export function handleClear() {
-  selectedValue = undefined;
+  value = undefined;
   listOpen = false;
-  dispatch("clear", selectedValue);
+  dispatch("clear", value);
   handleFocus();
 }
 ```
@@ -182,7 +182,7 @@ You can also use the `inputStyles` prop to write in any override styles needed f
 
 | Event Name | Callback | Description |
 |------|------|----------|
-| select | { detail } | fires when selectedValue changes
+| select | { detail } | fires when value changes
 | clear | - | fires when clear all is invoked
 | loaded | { items } | fires when `loadOptions` resolves
 | error | { type, details } | fires when error is caught
@@ -222,7 +222,7 @@ test.only('when getSelectionLabel contains HTML then render the HTML', async (t)
   const select = new Select({
     target,
     props: {
-      selectedValue: items[0],
+      value: items[0],
       getSelectionLabel: (option) => `<p>${option.label}</p>`,
     }
   });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-select",
-  "version": "4.0.0-beta.3",
+  "version": "4.0.0-beta.4",
   "repository": "https://rob-balfre@github.com/rob-balfre/svelte-select.git",
   "description": "A <Select> component for Svelte apps",
   "svelte": "src/index.js",
@@ -11,13 +11,12 @@
     "dev": "rollup -cw",
     "prepublishOnly": "npm test",
     "test": "node test/runner.js",
-    "test:browser": "npm run build && serve test/build",
+    "test:browser": "npm run build && serve test/public",
     "gen:docs": "node docs/generate_theming_variables_md.js",
     "pretest": "npm run build"
   },
   "devDependencies": {
     "@babel/polyfill": "7.12.1",
-    "@rollup/plugin-html": "^0.2.3",
     "find-in-files": "^0.5.0",
     "port-authority": "^1.0.5",
     "puppeteer": "^1.9.0",

rollup.config.js

@@ -3,7 +3,7 @@ import resolve from 'rollup-plugin-node-resolve';
 import css from 'rollup-plugin-css-only';
 import cleaner from 'rollup-plugin-cleaner';
 import { terser } from 'rollup-plugin-terser';
-import html from '@rollup/plugin-html';
+
 
 export default [
     {
@@ -26,22 +26,18 @@ export default [
     {
         input: 'test/src/index.js',
         output: {
-            dir: './test/build',
+            dir: './test/public',
+            inlineDynamicImports: true,
         },
         plugins: [
-            cleaner({
-                targets: ['./dist/build'],
-            }),
             svelte({
                 emitCss: false,
-                accessors: true,
                 compilerOptions: {
                     accessors: true,
                     dev: true,
                 },
             }),
-            css({ output: { dir: './test/build' } }),
-            html(),
+            css({ output: { dir: './test/public' } }),
             resolve(),
         ],
     },

src/List.svelte

@@ -18,7 +18,7 @@
     };
     export let itemHeight = 40;
     export let hoverItemIndex = 0;
-    export let selectedValue = undefined;
+    export let value = undefined;
     export let optionIdentifier = 'value';
     export let hideEmptyState = false;
     export let noOptionsMessage = 'No options';
@@ -31,10 +31,10 @@
     let prev_items;
 
     onMount(() => {
-        if (items.length > 0 && !isMulti && selectedValue) {
+        if (items.length > 0 && !isMulti && value) {
             const _hoverItemIndex = items.findIndex(
                 (item) =>
-                    item[optionIdentifier] === selectedValue[optionIdentifier]
+                    item[optionIdentifier] === value[optionIdentifier]
             );
 
             if (_hoverItemIndex) {
@@ -80,9 +80,9 @@
         event.stopPropagation();
 
         if (
-            selectedValue &&
+            value &&
             !isMulti &&
-            selectedValue[optionIdentifier] === item[optionIdentifier]
+            value[optionIdentifier] === item[optionIdentifier]
         )
             return closeList();
 
@@ -138,9 +138,9 @@
                 if (items.length === 0) break;
                 const hoverItem = items[hoverItemIndex];
                 if (
-                    selectedValue &&
+                    value &&
                     !isMulti &&
-                    selectedValue[optionIdentifier] ===
+                    value[optionIdentifier] ===
                         hoverItem[optionIdentifier]
                 ) {
                     closeList();
@@ -158,8 +158,8 @@
                 e.preventDefault();
                 if (items.length === 0) break;
                 if (
-                    selectedValue &&
-                    selectedValue[optionIdentifier] ===
+                    value &&
+                    value[optionIdentifier] ===
                         items[hoverItemIndex][optionIdentifier]
                 )
                     return closeList();
@@ -186,10 +186,10 @@
         container.scrollTop -= offsetBounding;
     }
 
-    function isItemActive(item, selectedValue, optionIdentifier) {
+    function isItemActive(item, value, optionIdentifier) {
         return (
-            selectedValue &&
-            selectedValue[optionIdentifier] === item[optionIdentifier]
+            value &&
+            value[optionIdentifier] === item[optionIdentifier]
         );
     }
 
@@ -260,7 +260,7 @@
                     isFirst={isItemFirst(i)}
                     isActive={isItemActive(
                         item,
-                        selectedValue,
+                        value,
                         optionIdentifier
                     )}
                     isHover={isItemHover(hoverItemIndex, item, i, items)}
@@ -289,7 +289,7 @@
                         isFirst={isItemFirst(i)}
                         isActive={isItemActive(
                             item,
-                            selectedValue,
+                            value,
                             optionIdentifier
                         )}
                         isHover={isItemHover(hoverItemIndex, item, i, items)}

src/MultiSelection.svelte

@@ -3,8 +3,8 @@
 
     const dispatch = createEventDispatcher();
 
-    export let selectedValue = [];
-    export let activeSelectedValue = undefined;
+    export let value = [];
+    export let activeValue = undefined;
     export let isDisabled = false;
     export let multiFullItemClearable = false;
     export let getSelectionLabel = undefined;
@@ -74,9 +74,9 @@
     }
 </style>
 
-{#each selectedValue as value, i}
+{#each value as value, i}
     <div
-        class="multiSelectItem {activeSelectedValue === i
+        class="multiSelectItem {activeValue === i
             ? 'active'
             : ''} {isDisabled ? 'disabled' : ''}"
         on:click={(event) =>