From 46b722fa621d458c2793406a70fd956416689ad6 Mon Sep 17 00:00:00 2001 From: Rob Balfre Date: Thu, 18 Mar 2021 08:58:37 +1100 Subject: [PATCH] api change selectedValue -> value and some internal/builds/test updates --- README.md | 18 +- package.json | 5 +- rollup.config.js | 12 +- src/List.svelte | 28 +- src/MultiSelection.svelte | 8 +- src/Select.svelte | 184 +- src/index.d.ts | 2 +- test/public/bundle.css | 26 + test/public/favicon.ico | 0 test/public/index.html | 14 + test/public/index.js | 12609 +++++++++++++++++++++++ test/public/reset.css | 0 test/runner.js | 2 +- test/src/CustomItem.svelte | 3 - test/src/Select/ParentContainer.svelte | 6 +- test/src/index.js | 264 +- yarn.lock | 30 +- 17 files changed, 12915 insertions(+), 296 deletions(-) create mode 100644 test/public/bundle.css create mode 100644 test/public/favicon.ico create mode 100644 test/public/index.html create mode 100644 test/public/index.js create mode 100644 test/public/reset.css diff --git a/README.md b/README.md index d51711e0..ad9a0db3 100644 --- a/README.md +++ b/README.md @@ -31,7 +31,7 @@ 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); @@ -39,14 +39,14 @@ yarn add svelte-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) => `

${option.label}

`, } }); diff --git a/package.json b/package.json index 488ed745..b65e054f 100644 --- a/package.json +++ b/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 was created with unknown prop '${key}'`); + }); + + function input_1_binding($$value) { + binding_callbacks[$$value ? "unshift" : "push"](() => { + input = $$value; + $$invalidate(4, input); + }); + } + + function input_1_input_handler() { + filterText = this.value; + $$invalidate(3, filterText); + } + + function input_1_binding_1($$value) { + binding_callbacks[$$value ? "unshift" : "push"](() => { + input = $$value; + $$invalidate(4, input); + }); + } + + function input_1_input_handler_1() { + filterText = this.value; + $$invalidate(3, filterText); + } + + function div_binding($$value) { + binding_callbacks[$$value ? "unshift" : "push"](() => { + container = $$value; + $$invalidate(0, container); + }); + } + + $$self.$$set = $$props => { + if ("container" in $$props) $$invalidate(0, container = $$props.container); + if ("input" in $$props) $$invalidate(4, input = $$props.input); + if ("Item" in $$props) $$invalidate(39, Item$1 = $$props.Item); + if ("Selection" in $$props) $$invalidate(6, Selection$1 = $$props.Selection); + if ("MultiSelection" in $$props) $$invalidate(7, MultiSelection$1 = $$props.MultiSelection); + if ("isMulti" in $$props) $$invalidate(8, isMulti = $$props.isMulti); + if ("multiFullItemClearable" in $$props) $$invalidate(9, multiFullItemClearable = $$props.multiFullItemClearable); + if ("isDisabled" in $$props) $$invalidate(10, isDisabled = $$props.isDisabled); + if ("isCreatable" in $$props) $$invalidate(40, isCreatable = $$props.isCreatable); + if ("isFocused" in $$props) $$invalidate(1, isFocused = $$props.isFocused); + if ("value" in $$props) $$invalidate(2, value = $$props.value); + if ("filterText" in $$props) $$invalidate(3, filterText = $$props.filterText); + if ("placeholder" in $$props) $$invalidate(41, placeholder = $$props.placeholder); + if ("items" in $$props) $$invalidate(35, items = $$props.items); + if ("itemFilter" in $$props) $$invalidate(42, itemFilter = $$props.itemFilter); + if ("groupBy" in $$props) $$invalidate(43, groupBy = $$props.groupBy); + if ("groupFilter" in $$props) $$invalidate(44, groupFilter = $$props.groupFilter); + if ("isGroupHeaderSelectable" in $$props) $$invalidate(45, isGroupHeaderSelectable = $$props.isGroupHeaderSelectable); + if ("getGroupHeaderLabel" in $$props) $$invalidate(46, getGroupHeaderLabel = $$props.getGroupHeaderLabel); + if ("getOptionLabel" in $$props) $$invalidate(47, getOptionLabel = $$props.getOptionLabel); + if ("optionIdentifier" in $$props) $$invalidate(48, optionIdentifier = $$props.optionIdentifier); + if ("loadOptions" in $$props) $$invalidate(49, loadOptions = $$props.loadOptions); + if ("hasError" in $$props) $$invalidate(11, hasError = $$props.hasError); + if ("containerStyles" in $$props) $$invalidate(12, containerStyles = $$props.containerStyles); + if ("getSelectionLabel" in $$props) $$invalidate(13, getSelectionLabel = $$props.getSelectionLabel); + if ("createGroupHeaderItem" in $$props) $$invalidate(50, createGroupHeaderItem = $$props.createGroupHeaderItem); + if ("createItem" in $$props) $$invalidate(51, createItem = $$props.createItem); + if ("isSearchable" in $$props) $$invalidate(14, isSearchable = $$props.isSearchable); + if ("inputStyles" in $$props) $$invalidate(15, inputStyles = $$props.inputStyles); + if ("isClearable" in $$props) $$invalidate(16, isClearable = $$props.isClearable); + if ("isWaiting" in $$props) $$invalidate(5, isWaiting = $$props.isWaiting); + if ("listPlacement" in $$props) $$invalidate(52, listPlacement = $$props.listPlacement); + if ("listOpen" in $$props) $$invalidate(36, listOpen = $$props.listOpen); + if ("list" in $$props) $$invalidate(37, list = $$props.list); + if ("isVirtualList" in $$props) $$invalidate(53, isVirtualList = $$props.isVirtualList); + if ("loadOptionsInterval" in $$props) $$invalidate(54, loadOptionsInterval = $$props.loadOptionsInterval); + if ("noOptionsMessage" in $$props) $$invalidate(55, noOptionsMessage = $$props.noOptionsMessage); + if ("hideEmptyState" in $$props) $$invalidate(56, hideEmptyState = $$props.hideEmptyState); + if ("filteredItems" in $$props) $$invalidate(38, filteredItems = $$props.filteredItems); + if ("inputAttributes" in $$props) $$invalidate(57, inputAttributes = $$props.inputAttributes); + if ("listAutoWidth" in $$props) $$invalidate(58, listAutoWidth = $$props.listAutoWidth); + if ("itemHeight" in $$props) $$invalidate(59, itemHeight = $$props.itemHeight); + if ("Icon" in $$props) $$invalidate(17, Icon = $$props.Icon); + if ("iconProps" in $$props) $$invalidate(18, iconProps = $$props.iconProps); + if ("showChevron" in $$props) $$invalidate(19, showChevron = $$props.showChevron); + if ("showIndicator" in $$props) $$invalidate(20, showIndicator = $$props.showIndicator); + if ("containerClasses" in $$props) $$invalidate(21, containerClasses = $$props.containerClasses); + if ("indicatorSvg" in $$props) $$invalidate(22, indicatorSvg = $$props.indicatorSvg); + if ("ClearIcon" in $$props) $$invalidate(23, ClearIcon$1 = $$props.ClearIcon); + }; + + $$self.$capture_state = () => ({ + beforeUpdate, + createEventDispatcher, + onDestroy, + onMount, + tick, + List, + ItemComponent: Item, + SelectionComponent: Selection, + MultiSelectionComponent: MultiSelection, + isOutOfViewport, + debounce, + DefaultClearIcon: ClearIcon, + dispatch, + container, + input, + Item: Item$1, + Selection: Selection$1, + MultiSelection: MultiSelection$1, + isMulti, + multiFullItemClearable, + isDisabled, + isCreatable, + isFocused, + value, + filterText, + placeholder, + items, + itemFilter, + groupBy, + groupFilter, + isGroupHeaderSelectable, + getGroupHeaderLabel, + getOptionLabel, + optionIdentifier, + loadOptions, + hasError, + containerStyles, + getSelectionLabel, + createGroupHeaderItem, + createItem, + isSearchable, + inputStyles, + isClearable, + isWaiting, + listPlacement, + listOpen, + list, + isVirtualList, + loadOptionsInterval, + noOptionsMessage, + hideEmptyState, + filteredItems, + inputAttributes, + listAutoWidth, + itemHeight, + Icon, + iconProps, + showChevron, + showIndicator, + containerClasses, + indicatorSvg, + ClearIcon: ClearIcon$1, + target, + activevalue, + originalItemsClone, + VirtualList, + prev_value, + prev_filterText, + prev_isFocused, + prev_filteredItems, + resetFilter, + getItemsHasInvoked, + getItems, + setvalue, + _inputAttributes, + assignInputAttributes, + convertStringItemsToObjects, + resetFilteredItems, + filterItem, + setupFilteredItems, + filterGroupedItems, + dispatchSelectedItem, + setupFilterText, + setupFocus, + VirtualListComponent, + setupVirtualList, + setupFilteredItem, + checkvalueForDuplicates, + findItem, + updatevalueDisplay, + setList, + handleMultiItemClear, + getPosition, + handleKeyDown, + handleFocus, + removeList, + handleWindowClick, + handleClick, + handleClear, + loadList, + showSelectedItem, + placeholderText + }); + + $$self.$inject_state = $$props => { + if ("container" in $$props) $$invalidate(0, container = $$props.container); + if ("input" in $$props) $$invalidate(4, input = $$props.input); + if ("Item" in $$props) $$invalidate(39, Item$1 = $$props.Item); + if ("Selection" in $$props) $$invalidate(6, Selection$1 = $$props.Selection); + if ("MultiSelection" in $$props) $$invalidate(7, MultiSelection$1 = $$props.MultiSelection); + if ("isMulti" in $$props) $$invalidate(8, isMulti = $$props.isMulti); + if ("multiFullItemClearable" in $$props) $$invalidate(9, multiFullItemClearable = $$props.multiFullItemClearable); + if ("isDisabled" in $$props) $$invalidate(10, isDisabled = $$props.isDisabled); + if ("isCreatable" in $$props) $$invalidate(40, isCreatable = $$props.isCreatable); + if ("isFocused" in $$props) $$invalidate(1, isFocused = $$props.isFocused); + if ("value" in $$props) $$invalidate(2, value = $$props.value); + if ("filterText" in $$props) $$invalidate(3, filterText = $$props.filterText); + if ("placeholder" in $$props) $$invalidate(41, placeholder = $$props.placeholder); + if ("items" in $$props) $$invalidate(35, items = $$props.items); + if ("itemFilter" in $$props) $$invalidate(42, itemFilter = $$props.itemFilter); + if ("groupBy" in $$props) $$invalidate(43, groupBy = $$props.groupBy); + if ("groupFilter" in $$props) $$invalidate(44, groupFilter = $$props.groupFilter); + if ("isGroupHeaderSelectable" in $$props) $$invalidate(45, isGroupHeaderSelectable = $$props.isGroupHeaderSelectable); + if ("getGroupHeaderLabel" in $$props) $$invalidate(46, getGroupHeaderLabel = $$props.getGroupHeaderLabel); + if ("getOptionLabel" in $$props) $$invalidate(47, getOptionLabel = $$props.getOptionLabel); + if ("optionIdentifier" in $$props) $$invalidate(48, optionIdentifier = $$props.optionIdentifier); + if ("loadOptions" in $$props) $$invalidate(49, loadOptions = $$props.loadOptions); + if ("hasError" in $$props) $$invalidate(11, hasError = $$props.hasError); + if ("containerStyles" in $$props) $$invalidate(12, containerStyles = $$props.containerStyles); + if ("getSelectionLabel" in $$props) $$invalidate(13, getSelectionLabel = $$props.getSelectionLabel); + if ("createGroupHeaderItem" in $$props) $$invalidate(50, createGroupHeaderItem = $$props.createGroupHeaderItem); + if ("createItem" in $$props) $$invalidate(51, createItem = $$props.createItem); + if ("isSearchable" in $$props) $$invalidate(14, isSearchable = $$props.isSearchable); + if ("inputStyles" in $$props) $$invalidate(15, inputStyles = $$props.inputStyles); + if ("isClearable" in $$props) $$invalidate(16, isClearable = $$props.isClearable); + if ("isWaiting" in $$props) $$invalidate(5, isWaiting = $$props.isWaiting); + if ("listPlacement" in $$props) $$invalidate(52, listPlacement = $$props.listPlacement); + if ("listOpen" in $$props) $$invalidate(36, listOpen = $$props.listOpen); + if ("list" in $$props) $$invalidate(37, list = $$props.list); + if ("isVirtualList" in $$props) $$invalidate(53, isVirtualList = $$props.isVirtualList); + if ("loadOptionsInterval" in $$props) $$invalidate(54, loadOptionsInterval = $$props.loadOptionsInterval); + if ("noOptionsMessage" in $$props) $$invalidate(55, noOptionsMessage = $$props.noOptionsMessage); + if ("hideEmptyState" in $$props) $$invalidate(56, hideEmptyState = $$props.hideEmptyState); + if ("filteredItems" in $$props) $$invalidate(38, filteredItems = $$props.filteredItems); + if ("inputAttributes" in $$props) $$invalidate(57, inputAttributes = $$props.inputAttributes); + if ("listAutoWidth" in $$props) $$invalidate(58, listAutoWidth = $$props.listAutoWidth); + if ("itemHeight" in $$props) $$invalidate(59, itemHeight = $$props.itemHeight); + if ("Icon" in $$props) $$invalidate(17, Icon = $$props.Icon); + if ("iconProps" in $$props) $$invalidate(18, iconProps = $$props.iconProps); + if ("showChevron" in $$props) $$invalidate(19, showChevron = $$props.showChevron); + if ("showIndicator" in $$props) $$invalidate(20, showIndicator = $$props.showIndicator); + if ("containerClasses" in $$props) $$invalidate(21, containerClasses = $$props.containerClasses); + if ("indicatorSvg" in $$props) $$invalidate(22, indicatorSvg = $$props.indicatorSvg); + if ("ClearIcon" in $$props) $$invalidate(23, ClearIcon$1 = $$props.ClearIcon); + if ("target" in $$props) target = $$props.target; + if ("activevalue" in $$props) $$invalidate(25, activevalue = $$props.activevalue); + if ("originalItemsClone" in $$props) $$invalidate(60, originalItemsClone = $$props.originalItemsClone); + if ("VirtualList" in $$props) VirtualList = $$props.VirtualList; + if ("prev_value" in $$props) prev_value = $$props.prev_value; + if ("prev_filterText" in $$props) $$invalidate(61, prev_filterText = $$props.prev_filterText); + if ("prev_isFocused" in $$props) $$invalidate(62, prev_isFocused = $$props.prev_isFocused); + if ("prev_filteredItems" in $$props) $$invalidate(63, prev_filteredItems = $$props.prev_filteredItems); + if ("getItemsHasInvoked" in $$props) getItemsHasInvoked = $$props.getItemsHasInvoked; + if ("_inputAttributes" in $$props) $$invalidate(26, _inputAttributes = $$props._inputAttributes); + if ("VirtualListComponent" in $$props) VirtualListComponent = $$props.VirtualListComponent; + if ("showSelectedItem" in $$props) $$invalidate(27, showSelectedItem = $$props.showSelectedItem); + if ("placeholderText" in $$props) $$invalidate(28, placeholderText = $$props.placeholderText); + }; + + if ($$props && "$$inject" in $$props) { + $$self.$inject_state($$props.$$inject); + } + + $$self.$$.update = () => { + if ($$self.$$.dirty[1] & /*items*/ 16) { + updatevalueDisplay(items); + } + + if ($$self.$$.dirty[0] & /*value*/ 4) { + { + if (value) setvalue(); + } + } + + if ($$self.$$.dirty[1] & /*noOptionsMessage, list*/ 16777280) { + { + if (noOptionsMessage && list) list.$set({ noOptionsMessage }); + } + } + + if ($$self.$$.dirty[0] & /*isSearchable*/ 16384 | $$self.$$.dirty[1] & /*inputAttributes*/ 67108864) { + { + if (inputAttributes || !isSearchable) assignInputAttributes(); + } + } + + if ($$self.$$.dirty[0] & /*filterText*/ 8 | $$self.$$.dirty[1] & /*items, loadOptions, originalItemsClone, groupBy*/ 537137168) { + { + if (items && items.length > 0 && typeof items[0] !== "object") { + convertStringItemsToObjects(); + } + + if (loadOptions && filterText.length === 0 && originalItemsClone) { + resetFilteredItems(); + } else { + setupFilteredItems(); + } + + if (groupBy) { + filterGroupedItems(); + } + } + } + + if ($$self.$$.dirty[0] & /*isMulti, value*/ 260) { + { + if (isMulti && value && value.length > 1) { + checkvalueForDuplicates(); + } + } + } + + if ($$self.$$.dirty[0] & /*value*/ 4) { + { + if (value) { + dispatchSelectedItem(); + } + } + } + + if ($$self.$$.dirty[0] & /*container*/ 1 | $$self.$$.dirty[1] & /*listOpen*/ 32) { + { + if (container) { + if (listOpen) { + loadList(); + } else { + removeList(); + } + } + } + } + + if ($$self.$$.dirty[0] & /*isFocused*/ 2 | $$self.$$.dirty[2] & /*prev_isFocused*/ 1) { + { + if (isFocused !== prev_isFocused) { + setupFocus(); + } + } + } + + if ($$self.$$.dirty[0] & /*filterText*/ 8 | $$self.$$.dirty[1] & /*prev_filterText*/ 1073741824) { + { + if (filterText !== prev_filterText) { + setupFilterText(); + } + } + } + + if ($$self.$$.dirty[1] & /*filteredItems*/ 128 | $$self.$$.dirty[2] & /*prev_filteredItems*/ 2) { + { + if (prev_filteredItems !== filteredItems) { + setupFilteredItem(); + } + } + } + + if ($$self.$$.dirty[0] & /*value, filterText*/ 12) { + $$invalidate(27, showSelectedItem = value && filterText.length === 0); + } + + if ($$self.$$.dirty[0] & /*value*/ 4 | $$self.$$.dirty[1] & /*placeholder*/ 1024) { + $$invalidate(28, placeholderText = value ? "" : placeholder); + } + }; + + return [ + container, + isFocused, + value, + filterText, + input, + isWaiting, + Selection$1, + MultiSelection$1, + isMulti, + multiFullItemClearable, + isDisabled, + hasError, + containerStyles, + getSelectionLabel, + isSearchable, + inputStyles, + isClearable, + Icon, + iconProps, + showChevron, + showIndicator, + containerClasses, + indicatorSvg, + ClearIcon$1, + handleClear, + activevalue, + _inputAttributes, + showSelectedItem, + placeholderText, + handleMultiItemClear, + getPosition, + handleKeyDown, + handleFocus, + handleWindowClick, + handleClick, + items, + listOpen, + list, + filteredItems, + Item$1, + isCreatable, + placeholder, + itemFilter, + groupBy, + groupFilter, + isGroupHeaderSelectable, + getGroupHeaderLabel, + getOptionLabel, + optionIdentifier, + loadOptions, + createGroupHeaderItem, + createItem, + listPlacement, + isVirtualList, + loadOptionsInterval, + noOptionsMessage, + hideEmptyState, + inputAttributes, + listAutoWidth, + itemHeight, + originalItemsClone, + prev_filterText, + prev_isFocused, + prev_filteredItems, + input_1_binding, + input_1_input_handler, + input_1_binding_1, + input_1_input_handler_1, + div_binding + ]; +} + +class Select extends SvelteComponentDev { + constructor(options) { + super(options); + if (!document_1.getElementById("svelte-1ri8kk0-style")) add_css$3(); + + init( + this, + options, + instance$7, + create_fragment$7, + safe_not_equal, + { + container: 0, + input: 4, + Item: 39, + Selection: 6, + MultiSelection: 7, + isMulti: 8, + multiFullItemClearable: 9, + isDisabled: 10, + isCreatable: 40, + isFocused: 1, + value: 2, + filterText: 3, + placeholder: 41, + items: 35, + itemFilter: 42, + groupBy: 43, + groupFilter: 44, + isGroupHeaderSelectable: 45, + getGroupHeaderLabel: 46, + getOptionLabel: 47, + optionIdentifier: 48, + loadOptions: 49, + hasError: 11, + containerStyles: 12, + getSelectionLabel: 13, + createGroupHeaderItem: 50, + createItem: 51, + isSearchable: 14, + inputStyles: 15, + isClearable: 16, + isWaiting: 5, + listPlacement: 52, + listOpen: 36, + list: 37, + isVirtualList: 53, + loadOptionsInterval: 54, + noOptionsMessage: 55, + hideEmptyState: 56, + filteredItems: 38, + inputAttributes: 57, + listAutoWidth: 58, + itemHeight: 59, + Icon: 17, + iconProps: 18, + showChevron: 19, + showIndicator: 20, + containerClasses: 21, + indicatorSvg: 22, + ClearIcon: 23, + handleClear: 24 + }, + [-1, -1, -1, -1] + ); + + dispatch_dev("SvelteRegisterComponent", { + component: this, + tagName: "Select", + options, + id: create_fragment$7.name + }); + } + + get container() { + return this.$$.ctx[0]; + } + + set container(container) { + this.$set({ container }); + flush(); + } + + get input() { + return this.$$.ctx[4]; + } + + set input(input) { + this.$set({ input }); + flush(); + } + + get Item() { + return this.$$.ctx[39]; + } + + set Item(Item) { + this.$set({ Item }); + flush(); + } + + get Selection() { + return this.$$.ctx[6]; + } + + set Selection(Selection) { + this.$set({ Selection }); + flush(); + } + + get MultiSelection() { + return this.$$.ctx[7]; + } + + set MultiSelection(MultiSelection) { + this.$set({ MultiSelection }); + flush(); + } + + get isMulti() { + return this.$$.ctx[8]; + } + + set isMulti(isMulti) { + this.$set({ isMulti }); + flush(); + } + + get multiFullItemClearable() { + return this.$$.ctx[9]; + } + + set multiFullItemClearable(multiFullItemClearable) { + this.$set({ multiFullItemClearable }); + flush(); + } + + get isDisabled() { + return this.$$.ctx[10]; + } + + set isDisabled(isDisabled) { + this.$set({ isDisabled }); + flush(); + } + + get isCreatable() { + return this.$$.ctx[40]; + } + + set isCreatable(isCreatable) { + this.$set({ isCreatable }); + flush(); + } + + get isFocused() { + return this.$$.ctx[1]; + } + + set isFocused(isFocused) { + this.$set({ isFocused }); + flush(); + } + + get value() { + return this.$$.ctx[2]; + } + + set value(value) { + this.$set({ value }); + flush(); + } + + get filterText() { + return this.$$.ctx[3]; + } + + set filterText(filterText) { + this.$set({ filterText }); + flush(); + } + + get placeholder() { + return this.$$.ctx[41]; + } + + set placeholder(placeholder) { + this.$set({ placeholder }); + flush(); + } + + get items() { + return this.$$.ctx[35]; + } + + set items(items) { + this.$set({ items }); + flush(); + } + + get itemFilter() { + return this.$$.ctx[42]; + } + + set itemFilter(itemFilter) { + this.$set({ itemFilter }); + flush(); + } + + get groupBy() { + return this.$$.ctx[43]; + } + + set groupBy(groupBy) { + this.$set({ groupBy }); + flush(); + } + + get groupFilter() { + return this.$$.ctx[44]; + } + + set groupFilter(groupFilter) { + this.$set({ groupFilter }); + flush(); + } + + get isGroupHeaderSelectable() { + return this.$$.ctx[45]; + } + + set isGroupHeaderSelectable(isGroupHeaderSelectable) { + this.$set({ isGroupHeaderSelectable }); + flush(); + } + + get getGroupHeaderLabel() { + return this.$$.ctx[46]; + } + + set getGroupHeaderLabel(getGroupHeaderLabel) { + this.$set({ getGroupHeaderLabel }); + flush(); + } + + get getOptionLabel() { + return this.$$.ctx[47]; + } + + set getOptionLabel(getOptionLabel) { + this.$set({ getOptionLabel }); + flush(); + } + + get optionIdentifier() { + return this.$$.ctx[48]; + } + + set optionIdentifier(optionIdentifier) { + this.$set({ optionIdentifier }); + flush(); + } + + get loadOptions() { + return this.$$.ctx[49]; + } + + set loadOptions(loadOptions) { + this.$set({ loadOptions }); + flush(); + } + + get hasError() { + return this.$$.ctx[11]; + } + + set hasError(hasError) { + this.$set({ hasError }); + flush(); + } + + get containerStyles() { + return this.$$.ctx[12]; + } + + set containerStyles(containerStyles) { + this.$set({ containerStyles }); + flush(); + } + + get getSelectionLabel() { + return this.$$.ctx[13]; + } + + set getSelectionLabel(getSelectionLabel) { + this.$set({ getSelectionLabel }); + flush(); + } + + get createGroupHeaderItem() { + return this.$$.ctx[50]; + } + + set createGroupHeaderItem(createGroupHeaderItem) { + this.$set({ createGroupHeaderItem }); + flush(); + } + + get createItem() { + return this.$$.ctx[51]; + } + + set createItem(createItem) { + this.$set({ createItem }); + flush(); + } + + get isSearchable() { + return this.$$.ctx[14]; + } + + set isSearchable(isSearchable) { + this.$set({ isSearchable }); + flush(); + } + + get inputStyles() { + return this.$$.ctx[15]; + } + + set inputStyles(inputStyles) { + this.$set({ inputStyles }); + flush(); + } + + get isClearable() { + return this.$$.ctx[16]; + } + + set isClearable(isClearable) { + this.$set({ isClearable }); + flush(); + } + + get isWaiting() { + return this.$$.ctx[5]; + } + + set isWaiting(isWaiting) { + this.$set({ isWaiting }); + flush(); + } + + get listPlacement() { + return this.$$.ctx[52]; + } + + set listPlacement(listPlacement) { + this.$set({ listPlacement }); + flush(); + } + + get listOpen() { + return this.$$.ctx[36]; + } + + set listOpen(listOpen) { + this.$set({ listOpen }); + flush(); + } + + get list() { + return this.$$.ctx[37]; + } + + set list(list) { + this.$set({ list }); + flush(); + } + + get isVirtualList() { + return this.$$.ctx[53]; + } + + set isVirtualList(isVirtualList) { + this.$set({ isVirtualList }); + flush(); + } + + get loadOptionsInterval() { + return this.$$.ctx[54]; + } + + set loadOptionsInterval(loadOptionsInterval) { + this.$set({ loadOptionsInterval }); + flush(); + } + + get noOptionsMessage() { + return this.$$.ctx[55]; + } + + set noOptionsMessage(noOptionsMessage) { + this.$set({ noOptionsMessage }); + flush(); + } + + get hideEmptyState() { + return this.$$.ctx[56]; + } + + set hideEmptyState(hideEmptyState) { + this.$set({ hideEmptyState }); + flush(); + } + + get filteredItems() { + return this.$$.ctx[38]; + } + + set filteredItems(filteredItems) { + this.$set({ filteredItems }); + flush(); + } + + get inputAttributes() { + return this.$$.ctx[57]; + } + + set inputAttributes(inputAttributes) { + this.$set({ inputAttributes }); + flush(); + } + + get listAutoWidth() { + return this.$$.ctx[58]; + } + + set listAutoWidth(listAutoWidth) { + this.$set({ listAutoWidth }); + flush(); + } + + get itemHeight() { + return this.$$.ctx[59]; + } + + set itemHeight(itemHeight) { + this.$set({ itemHeight }); + flush(); + } + + get Icon() { + return this.$$.ctx[17]; + } + + set Icon(Icon) { + this.$set({ Icon }); + flush(); + } + + get iconProps() { + return this.$$.ctx[18]; + } + + set iconProps(iconProps) { + this.$set({ iconProps }); + flush(); + } + + get showChevron() { + return this.$$.ctx[19]; + } + + set showChevron(showChevron) { + this.$set({ showChevron }); + flush(); + } + + get showIndicator() { + return this.$$.ctx[20]; + } + + set showIndicator(showIndicator) { + this.$set({ showIndicator }); + flush(); + } + + get containerClasses() { + return this.$$.ctx[21]; + } + + set containerClasses(containerClasses) { + this.$set({ containerClasses }); + flush(); + } + + get indicatorSvg() { + return this.$$.ctx[22]; + } + + set indicatorSvg(indicatorSvg) { + this.$set({ indicatorSvg }); + flush(); + } + + get ClearIcon() { + return this.$$.ctx[23]; + } + + set ClearIcon(ClearIcon) { + this.$set({ ClearIcon }); + flush(); + } + + get handleClear() { + return this.$$.ctx[24]; + } + + set handleClear(value) { + throw new Error(" + -

{selectedValue.label}

+

{value.label}

diff --git a/test/src/index.js b/test/src/index.js index 61345713..b036d030 100644 --- a/test/src/index.js +++ b/test/src/index.js @@ -164,7 +164,7 @@ test('should highlight active list item', async (t) => { target, props: { items: itemsWithIndex, - selectedValue: {value: 'pizza', label: 'Pizza', index: 1} + value: {value: 'pizza', label: 'Pizza', index: 1} } }); @@ -183,7 +183,7 @@ test('list scrolls to active item', async (t) => { target, props: { items: itemsWithIndex.concat(extras), - selectedValue: {value: 'sunday-roast', label: 'Sunday Roast'}, + value: {value: 'sunday-roast', label: 'Sunday Roast'}, } }); @@ -255,15 +255,15 @@ test('on enter active item fires a itemSelected event', async (t) => { } }); - let selectedValue = undefined; + let value = undefined; list.$on('itemSelected', event => { - selectedValue = event; + value = event; }); window.dispatchEvent(new KeyboardEvent('keydown', {'key': 'ArrowDown'})); window.dispatchEvent(new KeyboardEvent('keydown', {'key': 'ArrowDown'})); window.dispatchEvent(new KeyboardEvent('keydown', {'key': 'Enter'})); - t.equal(JSON.stringify(selectedValue.detail), JSON.stringify({value: 'cake', label: 'Cake', index: 2})); + t.equal(JSON.stringify(value.detail), JSON.stringify({value: 'cake', label: 'Cake', index: 2})); list.$destroy(); }); @@ -275,15 +275,15 @@ test('on tab active item fires a itemSelected event', async (t) => { } }); - let selectedValue = undefined; + let value = undefined; list.$on('itemSelected', event => { - selectedValue = event; + value = event; }); window.dispatchEvent(new KeyboardEvent('keydown', {'key': 'ArrowDown'})); window.dispatchEvent(new KeyboardEvent('keydown', {'key': 'ArrowDown'})); window.dispatchEvent(new KeyboardEvent('keydown', {'key': 'Tab'})); - t.equal(JSON.stringify(selectedValue.detail), JSON.stringify({value: 'cake', label: 'Cake', index: 2})); + t.equal(JSON.stringify(value.detail), JSON.stringify({value: 'cake', label: 'Cake', index: 2})); list.$destroy(); }); @@ -292,7 +292,7 @@ test('on selected of current active item does not fire a itemSelected event', as target, props: { items: itemsWithIndex, - selectedValue: { value: 'chocolate', label: 'Chocolate', index: 0 } + value: { value: 'chocolate', label: 'Chocolate', index: 0 } } }); @@ -312,7 +312,7 @@ test('selected item\'s default view', async (t) => { const select = new Select({ target, props: { - selectedValue: {value: 'chips', label: 'Chips'}, + value: {value: 'chips', label: 'Chips'}, } }); @@ -320,27 +320,27 @@ test('selected item\'s default view', async (t) => { select.$destroy(); }); -test('select view updates with selectedValue updates', async (t) => { +test('select view updates with value updates', async (t) => { const select = new Select({ target, }); - await handleSet(select, {selectedValue: {value: 'chips', label: 'Chips'}}); + await handleSet(select, {value: {value: 'chips', label: 'Chips'}}); t.ok(target.querySelector('.selectedItem .selection').innerHTML === 'Chips'); select.$destroy(); }); -test('clear wipes selectedValue and updates view', async (t) => { +test('clear wipes value and updates view', async (t) => { const select = new Select({ target, props: { - selectedValue: {value: 'chips', label: 'Chips'}, + value: {value: 'chips', label: 'Chips'}, } }); await wait(0); - await handleSet(select, {selectedValue: undefined}); + await handleSet(select, {value: undefined}); t.ok(!target.querySelector('.selectedItem .selection')); select.$destroy(); @@ -600,7 +600,7 @@ test('typing in Select filter will hide selected Item', async (t) => { window.dispatchEvent(new KeyboardEvent('keydown', {'key': 'Enter'})); window.dispatchEvent(new KeyboardEvent('keydown', {'key': 'ArrowDown'})); select.$set({filterText: 'potato'}); - t.ok(!document.querySelector('.selectContainer .selectedValue')); + t.ok(!document.querySelector('.selectContainer .value')); select.$destroy(); }); @@ -716,7 +716,7 @@ test('Select input placeholder wipes while item is selected', async (t) => { target, props: { items, - selectedValue: {name: 'Item #2'}, + value: {name: 'Item #2'}, } }); @@ -826,7 +826,7 @@ test('Select container styles can be overridden', async (t) => { target, props: { items, - selectedValue: {name: 'Item #2'}, + value: {name: 'Item #2'}, containerStyles: `padding-left: 40px;` } }); @@ -896,7 +896,7 @@ test(`shouldn't be able to clear a disabled Select`, async (t) => { props: { items, isDisabled: true, - selectedValue: {name: 'Item #4'} + value: {name: 'Item #4'} } }); @@ -911,14 +911,14 @@ test(`two way binding between Select and it's parent component`, async (t) => { target, props: { items, - selectedValue: {value: 'chips', label: 'Chips'}, + value: {value: 'chips', label: 'Chips'}, } }); t.equal(document.querySelector('.selection').innerHTML, document.querySelector('.result').innerHTML); parent.$set({ - selectedValue: {value: 'ice-cream', label: 'Ice Cream'}, + value: {value: 'ice-cream', label: 'Ice Cream'}, }); t.equal(document.querySelector('.selection').innerHTML, document.querySelector('.result').innerHTML); @@ -1034,7 +1034,7 @@ test(`data shouldn't be stripped from item - currently only saves name`, async ( await querySelectorClick('.selectContainer'); await querySelectorClick('.listItem'); - t.equal(JSON.stringify(select.selectedValue), JSON.stringify({value: 'chocolate', label: 'Chocolate'})); + t.equal(JSON.stringify(select.value), JSON.stringify({value: 'chocolate', label: 'Chocolate'})); select.$destroy(); }); @@ -1131,7 +1131,7 @@ test('inputStyles prop applies css to select input', async (t) => { target, props: { items, - selectedValue: {value: 'pizza', label: 'Pizza'}, + value: {value: 'pizza', label: 'Pizza'}, inputStyles: `padding-left: 40px;` } }); @@ -1183,7 +1183,7 @@ test('clicking group header should not make a selected', async (t) => { await wait(0); await querySelectorClick('.listGroupTitle'); - t.equal(select.selectedValue, undefined); + t.equal(select.value, undefined); select.$destroy(); }); @@ -1201,7 +1201,7 @@ test('when groupBy, no active item and keydown enter is fired then list should c await wait(0); await querySelectorClick('.selectContainer'); window.dispatchEvent(new KeyboardEvent('keydown', {'key': 'Enter'})); - t.equal(select.selectedValue, undefined); + t.equal(select.value, undefined); select.$destroy(); }); @@ -1237,8 +1237,8 @@ test('when isGroupHeaderSelectable clicking group header should select createGro await querySelectorClick('.listItem'); - t.ok(select.selectedValue.isGroupHeader); - t.equal(select.selectedValue.label, createGroupHeaderItem(groupBy(groupItem), groupItem).label); + t.ok(select.value.isGroupHeader); + t.equal(select.value.label, createGroupHeaderItem(groupBy(groupItem), groupItem).label); select.$destroy(); }); @@ -1290,13 +1290,13 @@ test('groups should be sorted by expression', async (t) => { select.$destroy(); }); -test('when isMulti is true show each item in selectedValue', async (t) => { +test('when isMulti is true show each item in value', async (t) => { const select = new Select({ target, props: { isMulti: true, items, - selectedValue: [ + value: [ {value: 'pizza', label: 'Pizza'}, {value: 'chips', label: 'Chips'}, ], @@ -1310,13 +1310,13 @@ test('when isMulti is true show each item in selectedValue', async (t) => { select.$destroy(); }); -test('when isMulti is true and selectedValue is undefined show placeholder text', async (t) => { +test('when isMulti is true and value is undefined show placeholder text', async (t) => { const select = new Select({ target, props: { isMulti: true, items, - selectedValue: undefined + value: undefined } }); @@ -1325,31 +1325,31 @@ test('when isMulti is true and selectedValue is undefined show placeholder text' select.$destroy(); }); -test('when isMulti is true clicking item in List will populate selectedValue', async (t) => { +test('when isMulti is true clicking item in List will populate value', async (t) => { const select = new Select({ target, props: { isMulti: true, items, - selectedValue: undefined + value: undefined } }); await querySelectorClick('.selectContainer'); await querySelectorClick('.listItem'); - t.equal(JSON.stringify(select.selectedValue), JSON.stringify([{value: 'chocolate', label: 'Chocolate'}])); + t.equal(JSON.stringify(select.value), JSON.stringify([{value: 'chocolate', label: 'Chocolate'}])); select.$destroy(); }); -test('when isMulti is true items in selectedValue will not appear in List', async (t) => { +test('when isMulti is true items in value will not appear in List', async (t) => { const select = new Select({ target, props: { isMulti: true, items, - selectedValue: [{value: 'chocolate', label: 'Chocolate'}] + value: [{value: 'chocolate', label: 'Chocolate'}] } }); @@ -1363,7 +1363,7 @@ test('when isMulti is true items in selectedValue will not appear in List', asyn select.$destroy(); }); -test('when isMulti is true both selectedValue and filterText filters List', async (t) => { +test('when isMulti is true both value and filterText filters List', async (t) => { const select = new Select({ target, props: { @@ -1371,7 +1371,7 @@ test('when isMulti is true both selectedValue and filterText filters List', asyn isMulti: true, items, filterText: 'Pizza', - selectedValue: [{value: 'chocolate', label: 'Chocolate'}] + value: [{value: 'chocolate', label: 'Chocolate'}] } }); @@ -1382,18 +1382,18 @@ test('when isMulti is true both selectedValue and filterText filters List', asyn select.$destroy(); }); -test('when isMulti is true clicking X on a selected item will remove it from selectedValue', async (t) => { +test('when isMulti is true clicking X on a selected item will remove it from value', async (t) => { const select = new Select({ target, props: { isMulti: true, items, - selectedValue: [{value: 'chocolate', label: 'Chocolate'}, {value: 'pizza', label: 'Pizza'}] + value: [{value: 'chocolate', label: 'Chocolate'}, {value: 'pizza', label: 'Pizza'}] } }); document.querySelector('.multiSelectItem_clear').click(); - t.equal(JSON.stringify(select.selectedValue), JSON.stringify([{value: 'pizza', label: 'Pizza'}])); + t.equal(JSON.stringify(select.value), JSON.stringify([{value: 'pizza', label: 'Pizza'}])); select.$destroy(); }); @@ -1404,7 +1404,7 @@ test('when isMulti is true and all selected items have been removed then placeho props: { isMulti: true, items, - selectedValue: [{value: 'chocolate', label: 'Chocolate'}] + value: [{value: 'chocolate', label: 'Chocolate'}] } }); @@ -1419,12 +1419,12 @@ test('when isMulti is true and items are selected then clear all should wipe all props: { isMulti: true, items, - selectedValue: [{value: 'chocolate', label: 'Chocolate'}, {value: 'pizza', label: 'Pizza'}] + value: [{value: 'chocolate', label: 'Chocolate'}, {value: 'pizza', label: 'Pizza'}] } }); document.querySelector('.clearSelect').click(); - t.equal(select.selectedValue, undefined); + t.equal(select.value, undefined); select.$destroy(); }); @@ -1442,7 +1442,7 @@ test('when isMulti and groupBy is active then items should be selectable', async target.style.maxWidth = '400px'; await querySelectorClick('.selectContainer'); await querySelectorClick('.listItem'); - t.equal(JSON.stringify(select.selectedValue), JSON.stringify([{"isGroupItem":true,"value":"chocolate","label":"Chocolate","group":"Sweet"}])); + t.equal(JSON.stringify(select.value), JSON.stringify([{"isGroupItem":true,"value":"chocolate","label":"Chocolate","group":"Sweet"}])); select.$destroy(); }); @@ -1458,18 +1458,18 @@ test('when isMulti and selected items reach edge of container then Select height target.style.maxWidth = '250px'; t.ok(document.querySelector('.selectContainer').scrollHeight === 42); - await handleSet(select, {selectedValue: [{value: 'chocolate', label: 'Chocolate'}, {value: 'pizza', label: 'Pizza'}]}); + await handleSet(select, {value: [{value: 'chocolate', label: 'Chocolate'}, {value: 'pizza', label: 'Pizza'}]}); t.ok(document.querySelector('.selectContainer').scrollHeight > 44); select.$destroy(); }); -test('when isMulti and selectedValue is populated then navigating with LeftArrow updates activeSelectedValue', async (t) => { +test('when isMulti and value is populated then navigating with LeftArrow updates activevalue', async (t) => { const select = new Select({ target, props: { isMulti: true, items, - selectedValue: [{value: 'chocolate', label: 'Chocolate'}, {value: 'pizza', label: 'Pizza'}, {value: 'chips', label: 'Chips'},], + value: [{value: 'chocolate', label: 'Chocolate'}, {value: 'pizza', label: 'Pizza'}, {value: 'chips', label: 'Chips'},], isFocused: true } }); @@ -1477,18 +1477,18 @@ test('when isMulti and selectedValue is populated then navigating with LeftArrow target.style.maxWidth = '100%'; window.dispatchEvent(new KeyboardEvent('keydown', {'key': 'ArrowLeft'})); window.dispatchEvent(new KeyboardEvent('keydown', {'key': 'ArrowLeft'})); - t.ok(select.$capture_state().activeSelectedValue === 1); + t.ok(select.$capture_state().activevalue === 1); select.$destroy(); }); -test('when isMulti and selectedValue is populated then navigating with ArrowRight updates activeSelectedValue', async (t) => { +test('when isMulti and value is populated then navigating with ArrowRight updates activevalue', async (t) => { const select = new Select({ target, props: { isMulti: true, items, - selectedValue: [{value: 'chocolate', label: 'Chocolate'}, {value: 'pizza', label: 'Pizza'}, {value: 'chips', label: 'Chips'},], + value: [{value: 'chocolate', label: 'Chocolate'}, {value: 'pizza', label: 'Pizza'}, {value: 'chips', label: 'Chips'},], isFocused: true } }); @@ -1497,12 +1497,12 @@ test('when isMulti and selectedValue is populated then navigating with ArrowRigh window.dispatchEvent(new KeyboardEvent('keydown', {'key': 'ArrowLeft'})); window.dispatchEvent(new KeyboardEvent('keydown', {'key': 'ArrowLeft'})); window.dispatchEvent(new KeyboardEvent('keydown', {'key': 'ArrowRight'})); - t.ok(select.$capture_state().activeSelectedValue === 1); + t.ok(select.$capture_state().activevalue === 1); select.$destroy(); }); -test('when isMulti and selectedValue has items and list opens then first item in list should be active', async (t) => { +test('when isMulti and value has items and list opens then first item in list should be active', async (t) => { const select = new Select({ target, props: { @@ -1521,14 +1521,14 @@ test('when isMulti and selectedValue has items and list opens then first item in select.$destroy(); }); -test('when isMulti, isDisabled, and selectedValue has items then items should be locked', async (t) => { +test('when isMulti, isDisabled, and value has items then items should be locked', async (t) => { const select = new Select({ target, props: { isMulti: true, items, isDisabled: true, - selectedValue: [{value: 'chocolate', label: 'Chocolate'}], + value: [{value: 'chocolate', label: 'Chocolate'}], } }); @@ -1537,14 +1537,14 @@ test('when isMulti, isDisabled, and selectedValue has items then items should be select.$destroy(); }); -test('when isMulti is true show each item in selectedValue if simple arrays are used', async (t) => { +test('when isMulti is true show each item in value if simple arrays are used', async (t) => { const select = new Select({ target, props: { isMulti: true, test: true, items: ['pizza', 'chips', 'chocolate'], - selectedValue: ['pizza', 'chocolate'] + value: ['pizza', 'chocolate'] } }); @@ -1555,21 +1555,21 @@ test('when isMulti is true show each item in selectedValue if simple arrays are select.$destroy(); }); -test('when getValue method is set should use that key to update selectedValue', async (t) => { +test('when getValue method is set should use that key to update value', async (t) => { const select = new Select({ target, props: { items: [{id: 0, label: 'ONE'}, {id: 1, label: 'TWO'}], - selectedValue: {id: 0, label: 'ONE'}, + value: {id: 0, label: 'ONE'}, optionIdentifier: 'id' } }); - t.ok(select.selectedValue.id === 0); + t.ok(select.value.id === 0); await querySelectorClick('.selectContainer'); window.dispatchEvent(new KeyboardEvent('keydown', {'key': 'ArrowDown'})); window.dispatchEvent(new KeyboardEvent('keydown', {'key': 'Enter'})); - t.ok(select.selectedValue.id === 1); + t.ok(select.value.id === 1); select.$destroy(); }); @@ -1610,12 +1610,12 @@ test('when noOptionsMessage is set and there are no items then show message', as select.$destroy(); }); -test('when getSelectionLabel method is supplied and selectedValue are no items then display result of getSelectionLabel', async (t) => { +test('when getSelectionLabel method is supplied and value are no items then display result of getSelectionLabel', async (t) => { const select = new Select({ target, props: { getSelectionLabel: (option) => option.notLabel, - selectedValue: {notLabel: 'This is not a label', value: 'not important'}, + value: {notLabel: 'This is not a label', value: 'not important'}, } }); @@ -1725,7 +1725,7 @@ test('when getSelectionLabel contains HTML then render the HTML', async (t) => { const select = new Select({ target, props: { - selectedValue: items[0], + value: items[0], getSelectionLabel: (option) => `

${option.label}

`, } }); @@ -1751,7 +1751,7 @@ test('when getOptionLabel contains HTML then render the HTML', async (t) => { select.$destroy(); }); -test('when isMulti is true, selectedValue populated and arrowLeft is pressed then no items in list should be active', async (t) => { +test('when isMulti is true, value populated and arrowLeft is pressed then no items in list should be active', async (t) => { const selectMultiSelected = new SelectMultiSelected({ target: testTarget, }); @@ -1761,7 +1761,7 @@ test('when isMulti is true, selectedValue populated and arrowLeft is pressed the props: { isMulti: true, items, - selectedValue: [ + value: [ {value: 'pizza', label: 'Pizza'}, {value: 'chips', label: 'Chips'}, ], @@ -1795,7 +1795,7 @@ test('when hideEmptyState true then do not show "no options" div ', async (t) => select.$destroy(); }); -test('when selectedValue changes then select event should fire', async (t) => { +test('when value changes then select event should fire', async (t) => { const select = new Select({ target, props: { @@ -1818,12 +1818,12 @@ test('when selectedValue changes then select event should fire', async (t) => { select.$destroy(); }); -test('when selectedValue is cleared the clear event is fired', async (t) => { +test('when value is cleared the clear event is fired', async (t) => { const select = new Select({ target, props: { items, - selectedValue: items[0], + value: items[0], } }); @@ -1846,7 +1846,7 @@ test('when multi item is cleared the clear event is fired with removed item', as props: { isMulti: true, items, - selectedValue: [itemToRemove] + value: [itemToRemove] } }); @@ -1882,12 +1882,12 @@ test('when items in list filter or update then first item in list should highlig select.$destroy(); }); -test('when item is selected or state changes then check selectedValue[optionIdentifier] has changed before firing "select" event', async (t) => { +test('when item is selected or state changes then check value[optionIdentifier] has changed before firing "select" event', async (t) => { const select = new Select({ target, props: { items, - selectedValue: {value: 'cake', label: 'Cake'} + value: {value: 'cake', label: 'Cake'} } }); @@ -1897,19 +1897,19 @@ test('when item is selected or state changes then check selectedValue[optionIden item = true; }); - await handleSet(select, {selectedValue: {value: 'cake', label: 'Cake'}}); + await handleSet(select, {value: {value: 'cake', label: 'Cake'}}); t.ok(!item) select.$destroy(); }); -test('when isMulti and item is selected or state changes then check selectedValue[optionIdentifier] has changed before firing "select" event', async (t) => { +test('when isMulti and item is selected or state changes then check value[optionIdentifier] has changed before firing "select" event', async (t) => { const select = new Select({ target, props: { isMulti: true, items, - selectedValue: [ + value: [ {value: 'pizza', label: 'Pizza'}, {value: 'chips', label: 'Chips'}, ], @@ -1922,10 +1922,10 @@ test('when isMulti and item is selected or state changes then check selectedValu item = true; }); - await handleSet(select, {selectedValue: [{value: 'pizza', label: 'Pizza'},{value: 'chips', label: 'Chips'}]}); + await handleSet(select, {value: [{value: 'pizza', label: 'Pizza'},{value: 'chips', label: 'Chips'}]}); t.ok(!item); item = false; - await handleSet(select, {selectedValue: [{value: 'pizza', label: 'Pizza'}]}); + await handleSet(select, {value: [{value: 'pizza', label: 'Pizza'}]}); t.ok(item); select.$destroy(); @@ -1960,7 +1960,7 @@ test('when isFocused turns to false then check Select is no longer in focus', as }) }); - await handleSet(select, {selectedValue: {value: 'pizza', label: 'Pizza'}}); + await handleSet(select, {value: {value: 'pizza', label: 'Pizza'}}); await wait(0); @@ -1989,7 +1989,7 @@ test('when items and loadOptions method are both supplied then fallback to items }); select.$on('state', ({current, changed}) => { - if (changed.filterText && current.filterText === '' && !current.selectedValue) { + if (changed.filterText && current.filterText === '' && !current.value) { select.$set({ items }) @@ -2024,14 +2024,14 @@ test('when items is just an array of strings then render list', async (t) => { select.$destroy(); }); -test('when items are just strings then selectedValue should render', async (t) => { +test('when items are just strings then value should render', async (t) => { const items = ['one', 'two', 'three']; const select = new Select({ target, props: { items, - selectedValue: {value: 'one', label: 'one', index: 0} + value: {value: 'one', label: 'one', index: 0} } }); @@ -2114,7 +2114,7 @@ test('when loadOptions method is supplied but filterText is empty then do not ru await wait(500); window.dispatchEvent(new KeyboardEvent('keydown', {'key': 'Enter'})); t.ok(document.querySelector('.customItem_name').innerHTML === 'Juniper Wheat Beer'); - select.$set({selectedValue: undefined, filterText: ''}); + select.$set({value: undefined, filterText: ''}); await wait(0); select.$set({listOpen: true}); await wait(0); @@ -2123,13 +2123,13 @@ test('when loadOptions method is supplied but filterText is empty then do not ru select.$destroy(); }); -test('when isMulti and selectedValue has items then check each item is unique', async (t) => { +test('when isMulti and value has items then check each item is unique', async (t) => { const select = new Select({ target, props: { isMulti: true, items, - selectedValue: [ + value: [ {value: 'pizza', label: 'Pizza'}, {value: 'pizza', label: 'Pizza'}, {value: 'cake', label: 'Cake'}, @@ -2137,7 +2137,7 @@ test('when isMulti and selectedValue has items then check each item is unique', } }); - t.ok(select.selectedValue.length === 2); + t.ok(select.value.length === 2); select.$destroy(); }); @@ -2156,7 +2156,7 @@ test('when isMulti and textFilter has length then enter should select item', asy await wait(0); window.dispatchEvent(new KeyboardEvent('keydown', {'key': 'Enter'})); - t.ok(select.selectedValue[0].value === 'pizza'); + t.ok(select.value[0].value === 'pizza'); select.$destroy(); }); @@ -2174,7 +2174,7 @@ test('when isMulti and textFilter has length and no items in list then enter sho }); window.dispatchEvent(new KeyboardEvent('keydown', {'key': 'Enter'})); - t.ok(select.selectedValue === undefined); + t.ok(select.value === undefined); select.$destroy(); }); @@ -2211,7 +2211,7 @@ test('When list is open, filterText applied and Enter/Tab key pressed should sel await wait(0); window.dispatchEvent(new KeyboardEvent('keydown', {'key': 'ArrowDown'})); window.dispatchEvent(new KeyboardEvent('keydown', {'key': 'Enter'})); - t.equal(select.selectedValue.value, 'A5'); + t.equal(select.value.value, 'A5'); await wait(0); t.ok(target.querySelector('.selectedItem .selection').innerHTML === 'A5'); @@ -2239,12 +2239,12 @@ test('When inputAttributes is supplied each attribute is placed on the Select in select.$destroy(); }); -test('when items and selectedValue supplied as just strings then selectedValue should render correctly', async (t) => { +test('when items and value supplied as just strings then value should render correctly', async (t) => { const select = new Select({ target, props: { items: ['Pizza', 'Chocolate', 'Crisps'], - selectedValue: 'Pizza' + value: 'Pizza' } }); @@ -2253,13 +2253,13 @@ test('when items and selectedValue supplied as just strings then selectedValue s select.$destroy(); }); -test('when isMulti with items and selectedValue supplied as just strings then selectedValue should render correctly', async (t) => { +test('when isMulti with items and value supplied as just strings then value should render correctly', async (t) => { const select = new Select({ target, props: { isMulti: true, items: ['Pizza', 'Chocolate', 'Crisps'], - selectedValue: ['Pizza'] + value: ['Pizza'] } }); @@ -2268,7 +2268,7 @@ test('when isMulti with items and selectedValue supplied as just strings then se select.$destroy(); }); -test('when isMulti, groupBy and selectedValue are supplied then list should be filtered', async (t) => { +test('when isMulti, groupBy and value are supplied then list should be filtered', async (t) => { let _items = [ { id: 1, name: "Foo", group: "first" }, { id: 2, name: "Bar", group: "second" }, @@ -2285,7 +2285,7 @@ test('when isMulti, groupBy and selectedValue are supplied then list should be f optionIdentifier: 'id', getSelectionLabel: (item) => item.name, getOptionLabel: (item) => item.name, - selectedValue: [{ id: 2, name: "Bar", group: "second" }], + value: [{ id: 2, name: "Bar", group: "second" }], listOpen: true } }); @@ -2389,9 +2389,9 @@ test('When creator selected, selected item is set to created item', async (t) => await wait(0); window.dispatchEvent(new KeyboardEvent('keydown', {'key': 'Enter'})); - const { selectedValue } = select; - t.ok(selectedValue.value === 'abc'); - t.ok(selectedValue.label === 'abc'); + const { value } = select; + t.ok(value.value === 'abc'); + t.ok(value.label === 'abc'); select.$destroy(); }); @@ -2415,9 +2415,9 @@ test('When creator is selected, created item it added to multi selection', async await wait(0); window.dispatchEvent(new KeyboardEvent('keydown', {'key': 'Enter'})); - const { selectedValue } = select; - t.ok(selectedValue[0].value === 'abc'); - t.ok(selectedValue[0].label === 'abc'); + const { value } = select; + t.ok(value[0].value === 'abc'); + t.ok(value[0].label === 'abc'); select.$destroy(); }); @@ -2441,24 +2441,24 @@ test('When creator is selected multiple times, items are all added to multi sele await wait(0); window.dispatchEvent(new KeyboardEvent('keydown', {'key': 'Enter'})); await wait(0); - t.ok(select.selectedValue[0].value === 'abc'); + t.ok(select.value[0].value === 'abc'); select.$set({ filterText: filterTextForItem2 }); await wait(0); window.dispatchEvent(new KeyboardEvent('keydown', {'key': 'Enter'})); await wait(0); - t.ok(select.selectedValue[1].value === 'def'); + t.ok(select.value[1].value === 'def'); select.$destroy(); }); -test('When isMulti and an items remove icon is clicked then item should be removed from selectedValue', async (t) => { +test('When isMulti and an items remove icon is clicked then item should be removed from value', async (t) => { const select = new Select({ target, props: { items, isCreatable: true, - selectedValue: [ + value: [ {value: 'pizza', label: 'Pizza'}, {value: 'cake', label: 'Cake'}, ], @@ -2467,9 +2467,9 @@ test('When isMulti and an items remove icon is clicked then item should be remov }); await querySelectorClick('.multiSelectItem_clear'); - t.ok(select.selectedValue[0].value === 'cake') + t.ok(select.value[0].value === 'cake') await querySelectorClick('.multiSelectItem_clear'); - t.ok(select.selectedValue === undefined); + t.ok(select.value === undefined); select.$destroy(); }); @@ -2583,8 +2583,8 @@ test('When isCreatable and isMulti and optionIdentifier is supplied multiple cre window.dispatchEvent(new KeyboardEvent('keydown', {'key': 'Enter'})); await wait(0); - t.ok(select.selectedValue.length === 2); - t.ok(select.selectedValue[0].tag_name); + t.ok(select.value.length === 2); + t.ok(select.value[0].tag_name); select.$destroy(); }); @@ -2618,20 +2618,20 @@ test('When isCreatable and item is created then createItem method should only ru select.$destroy(); }); -test('When items are collection and selectedValue a string then lookup item using optionIdentifier and update value to match', async (t) => { +test('When items are collection and value a string then lookup item using optionIdentifier and update value to match', async (t) => { const select = new Select({ target, props: { items, - selectedValue: 'cake' + value: 'cake' } }); await wait(0); - t.ok(select.selectedValue.value === 'cake'); - select.$set({ selectedValue: 'pizza' }); + t.ok(select.value.value === 'cake'); + select.$set({ value: 'pizza' }); await wait(0); - t.ok(select.selectedValue.value === 'pizza'); + t.ok(select.value.value === 'pizza'); select.$destroy(); }); @@ -2658,14 +2658,14 @@ test('When item is already active and is selected from list then close list', as props: { items, listOpen: true, - selectedValue: 'pizza' + value: 'pizza' } }); await wait(0); await querySelectorClick('.listContainer > .listItem > .item.active'); await wait(0); - t.ok(select.selectedValue.value === 'pizza'); + t.ok(select.value.value === 'pizza'); select.$destroy(); }); @@ -2684,12 +2684,12 @@ test('When Icon prop is supplied then render on Select', async (t) => { select.$destroy(); }); -test('When showChevron prop is true only show chevron when there is no selectedValue on Select', async (t) => { +test('When showChevron prop is true only show chevron when there is no value on Select', async (t) => { const select = new Select({ target, props: { items, - selectedValue: {value: 'chocolate', label: 'Chocolate'}, + value: {value: 'chocolate', label: 'Chocolate'}, showChevron: true } }); @@ -2699,7 +2699,7 @@ test('When showChevron prop is true only show chevron when there is no selectedV select.$destroy(); }); -test('When showChevron prop is true and no selectedValue show chevron on Select', async (t) => { +test('When showChevron prop is true and no value show chevron on Select', async (t) => { const select = new Select({ target, props: { @@ -2718,7 +2718,7 @@ test('When showIndicator prop is true always show chevron on Select', async (t) target, props: { items, - selectedValue: {value: 'chocolate', label: 'Chocolate'}, + value: {value: 'chocolate', label: 'Chocolate'}, showIndicator: true } }); @@ -2754,7 +2754,7 @@ test('Select container classes can be injected', async (t) => { target, props: { items, - selectedValue: { name: 'Item #2' }, + value: { name: 'Item #2' }, containerClasses: 'testclass', }, }); @@ -2856,12 +2856,12 @@ test('When loadOptions promise is rejected then dispatch error', async (t) => { select.$destroy(); }); -test('When items change then selectedValue should also update', async (t) => { +test('When items change then value should also update', async (t) => { const select = new Select({ target, props: { items, - selectedValue: {value: 'chips', label: 'Chips'}, + value: {value: 'chips', label: 'Chips'}, }, }); @@ -2877,7 +2877,7 @@ test('When items change then selectedValue should also update', async (t) => { await wait(0); - t.ok(select.selectedValue.label === 'Loaded Fries'); + t.ok(select.value.label === 'Loaded Fries'); t.ok(target.querySelector('.selectedItem .selection').innerHTML === 'Loaded Fries'); select.$destroy(); @@ -2889,7 +2889,7 @@ test('When items change then selectedValue should also update', async (t) => { props: { isMulti: true, items, - selectedValue: [{value: 'chips', label: 'Chips'}, {value: 'pizza', label: 'Pizza'}], + value: [{value: 'chips', label: 'Chips'}, {value: 'pizza', label: 'Pizza'}], }, }); @@ -2905,18 +2905,18 @@ test('When items change then selectedValue should also update', async (t) => { await wait(0); - t.ok(multiSelect.selectedValue[0].label === 'Loaded Fries'); - t.ok(multiSelect.selectedValue[1].label === 'Cheese Pizza'); + t.ok(multiSelect.value[0].label === 'Loaded Fries'); + t.ok(multiSelect.value[1].label === 'Cheese Pizza'); multiSelect.$destroy(); }); -test('When items change then selectedValue should also update but only if found in items', async (t) => { +test('When items change then value should also update but only if found in items', async (t) => { const select = new Select({ target, props: { items, - selectedValue: {value: 'chips', label: 'Chips'}, + value: {value: 'chips', label: 'Chips'}, }, }); @@ -2932,7 +2932,7 @@ test('When items change then selectedValue should also update but only if found await wait(0); - t.ok(select.selectedValue.label === 'Chips'); + t.ok(select.value.label === 'Chips'); t.ok(target.querySelector('.selectedItem .selection').innerHTML === 'Chips'); select.$destroy(); @@ -2945,14 +2945,14 @@ test('When isMulti and multiFullItemClearable then clicking anywhere on the item isMulti: true, items, multiFullItemClearable: true, - selectedValue: [{value: 'chips', label: 'Chips'}, {value: 'pizza', label: 'Pizza'}], + value: [{value: 'chips', label: 'Chips'}, {value: 'pizza', label: 'Pizza'}], }, }); await wait(0); await querySelectorClick('.multiSelectItem'); await wait(0); - t.ok(multiSelect.selectedValue[0].label === 'Pizza'); + t.ok(multiSelect.value[0].label === 'Pizza'); multiSelect.$destroy(); }); @@ -3039,7 +3039,7 @@ test('when ClearItem replace clear icon', async (t) => { props: { items, ClearIcon: TestClearIcon, - selectedValue: {value: 'chips', label: 'Chips'} + value: {value: 'chips', label: 'Chips'} } }); diff --git a/yarn.lock b/yarn.lock index 8d055b7f..bfa0e23a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -36,11 +36,6 @@ resolved "https://registry.yarnpkg.com/@polka/url/-/url-0.5.0.tgz#b21510597fd601e5d7c95008b76bf0d254ebfd31" integrity sha512-oZLYFEAzUKyi3SKnXvj32ZCEGH6RDnao7COuCVhDydMS9NrCSVXhM79VaKyP5+Zc33m0QXEd2DN3UkU7OsHcfw== -"@rollup/plugin-html@^0.2.3": - version "0.2.3" - resolved "https://registry.yarnpkg.com/@rollup/plugin-html/-/plugin-html-0.2.3.tgz#bed48fc18dbde345c0ef09b0b53a165d7bd3b7cd" - integrity sha512-efx8Ud1FWaHmj3Es5parp6uRt1DPyKq9A8t1GEZoNsYB4UTQQIL8PsjxcJOlH+P3QKRsSv1rIJhiMvuG4+kfwg== - "@rollup/pluginutils@4": version "4.1.0" resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.1.0.tgz#0dcc61c780e39257554feb7f77207dceca13c838" @@ -329,16 +324,6 @@ glob@^7.1.3: once "^1.3.0" path-is-absolute "^1.0.0" -globalyzer@^0.1.0: - version "0.1.0" - resolved "https://registry.yarnpkg.com/globalyzer/-/globalyzer-0.1.0.tgz#cb76da79555669a1519d5a8edf093afaa0bf1465" - integrity sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q== - -globrex@^0.1.1: - version "0.1.1" - resolved "https://registry.yarnpkg.com/globrex/-/globrex-0.1.1.tgz#cfe565cfa910707d0ef98eb0b9d78c3c055ca2ef" - integrity sha512-bqKcPhb+ZtrISivpu6oLmwIyINlPlzueO/BDCdfnzUeu7SYxnHTXmWP7uQI5PnQXc5yGXOscGBEGagloA2hcSw== - has-ansi@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91" @@ -696,13 +681,12 @@ serialize-javascript@^4.0.0: randombytes "^2.1.0" sirv@^0.2.2: - version "0.2.2" - resolved "https://registry.yarnpkg.com/sirv/-/sirv-0.2.2.tgz#334d86074c73008fda60129b2487ae94db1fbc7b" - integrity sha512-X0UjfTc32MeK+rkhgdQK/blQ5ysC0CfLF9OH9d8x2RnpaD2D5BDLMeox79utmhxai4T+/VCahK5pDgAEnG/tNQ== + version "0.2.5" + resolved "https://registry.yarnpkg.com/sirv/-/sirv-0.2.5.tgz#da56a42e5f60b0822456cee7bf53e217305f4c3b" + integrity sha512-q7F1VElkj/WPrXwWsdHK9gqi2rd94oaMQc3VtN8N1TNHrKxlsd7hGsPFiOIodRxre8eHCV1XK1iqC1BDaZ+IKA== dependencies: "@polka/url" "^0.5.0" mime "^2.3.1" - tiny-glob "^0.2.0" source-map-support@~0.5.19: version "0.5.19" @@ -842,14 +826,6 @@ through@2: resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5" integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU= -tiny-glob@^0.2.0: - version "0.2.6" - resolved "https://registry.yarnpkg.com/tiny-glob/-/tiny-glob-0.2.6.tgz#9e056e169d9788fe8a734dfa1ff02e9b92ed7eda" - integrity sha512-A7ewMqPu1B5PWwC3m7KVgAu96Ch5LA0w4SnEN/LbDREj/gAD0nPWboRbn8YoP9ISZXqeNAlMvKSKoEuhcfK3Pw== - dependencies: - globalyzer "^0.1.0" - globrex "^0.1.1" - traverse-chain@~0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/traverse-chain/-/traverse-chain-0.1.0.tgz#61dbc2d53b69ff6091a12a168fd7d433107e40f1"