svelte-select - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

CHANGELOG.md

 # svelte-select changelog
 
+## 1.2.0
+
+* Updated README
+* Added Async (getOptions)
+* Added noOptionsMessage  
+* Bug fixes
+* Updated examples
+
 ## 1.1.0
@@ -4,0 +12,0 @@

index.js

@@ -202,16 +202,18 @@ (function (global, factory) {
 	function create_main_fragment(component, ctx) {
-		var text_value = ctx.getOptionLabel(ctx.item), text;
+		var div, raw_value = ctx.getOptionLabel(ctx.item);
 
 		return {
 			c() {
-				text = createText(text_value);
+				div = createElement("div");
+				div.className = "item";
 			},
 
 			m(target, anchor) {
-				insert(target, text, anchor);
+				insert(target, div, anchor);
+				div.innerHTML = raw_value;
 			},
 
 			p(changed, ctx) {
-				if ((changed.getOptionLabel || changed.item) && text_value !== (text_value = ctx.getOptionLabel(ctx.item))) {
-					setData(text, text_value);
+				if ((changed.getOptionLabel || changed.item) && raw_value !== (raw_value = ctx.getOptionLabel(ctx.item))) {
+					div.innerHTML = raw_value;
 				}
@@ -222,3 +224,3 @@ },
 				if (detach) {
-					detachNode(text);
+					detachNode(div);
 				}
@@ -249,10 +251,12 @@ }
 	    hoverItemIndex: 0,
+	    optionIdentifier: 'value',
 	    items: [],
 	    Item,
 	    selectedValue: undefined,
-	    getOptionLabel: (option) => option.label
+	    getOptionLabel: (option) => option.label,
+	    noOptionsMessage: 'No options'
 	  }
 	}
-	function itemClasses(hoverItemIndex, item, itemIndex, items, selectedValue) {
-	  return `${selectedValue && (selectedValue.value === item.value) ? 'active ' : ''}${hoverItemIndex === itemIndex || items.length === 1 ? 'hover' : ''}`;
+	function itemClasses(hoverItemIndex, item, itemIndex, items, selectedValue, optionIdentifier) {
+	  return `${selectedValue && (selectedValue[optionIdentifier] === item[optionIdentifier]) ? 'active ' : ''}${hoverItemIndex === itemIndex || items.length === 1 ? 'hover' : ''}`;
 	}
@@ -264,2 +268,3 @@ var methods = {
 	  handleHover(i) {
+	    if(this.get().isScrolling) return;
 	    this.set({hoverItemIndex: i});
@@ -294,7 +299,7 @@ },
 	        e.preventDefault();
-	        this.updateHoverItem(1);
+	        items.length && this.updateHoverItem(1);
 	        break;
 	      case 'ArrowUp':
 	        e.preventDefault();
-	        this.updateHoverItem(-1);
+	        items.length && this.updateHoverItem(-1);
 	        break;
@@ -326,2 +331,22 @@ case 'Enter':
 
+	function oncreate() {
+	  this.isScrollingTimer = 0;
+
+	  this.refs.container.addEventListener('scroll', () => {
+	    clearTimeout(this.isScrollingTimer);
+
+	    this.set({
+	      isScrolling: true
+	    });
+
+	    this.isScrollingTimer = setTimeout(() => {
+	      this.set({
+	        isScrolling: false
+	      });
+	    }, 100);
+	  }, false);
+	}
+	function ondestroy() {
+	  clearTimeout(this.isScrollingTimer);
+	}
 	function onupdate({changed, current}) {
@@ -344,4 +369,6 @@ if (changed.items && current.items.length > 0) {
 	    this.scrollToActiveItem('active');
+
 	    if (current.items && !current.isMulti) {
-	      const hoverItemIndex = current.items.findIndex((item) => item.value === current.selectedValue.value);
+	      const hoverItemIndex = current.items.findIndex((item) => item[current.optionIdentifier] === current.selectedValue[current.optionIdentifier]);
+
 	      if (hoverItemIndex) {
@@ -355,4 +382,4 @@ this.set({hoverItemIndex});
 		var style = createElement("style");
-		style.id = 'svelte-1h82xdc-style';
-		style.textContent = ".listContainer.svelte-1h82xdc{box-shadow:0 2px 3px 0 rgba(44, 62, 80, 0.24);border-radius:4px;max-height:250px;overflow-y:auto;background:#fff}.listGroupTitle.svelte-1h82xdc{color:#8f8f8f;cursor:default;font-size:12px;height:40px;line-height:40px;padding:0 20px;text-overflow:ellipsis;overflow-x:hidden;white-space:nowrap;text-transform:uppercase}.listItem.svelte-1h82xdc{cursor:default;height:40px;line-height:40px;padding:0 20px;text-overflow:ellipsis;overflow-x:hidden;white-space:nowrap}.listItem.hover.svelte-1h82xdc{background:#e7f2ff}.listItem.svelte-1h82xdc:active{background:#b9daff}.listItem.svelte-1h82xdc:first-child{border-radius:4px 4px 0 0}.listItem.active.svelte-1h82xdc{background:#007aff;color:#fff}.empty.svelte-1h82xdc{text-align:center;padding:20px 0;color:#78848F}";
+		style.id = 'svelte-1q7fygl-style';
+		style.textContent = ".listContainer.svelte-1q7fygl{box-shadow:0 2px 3px 0 rgba(44, 62, 80, 0.24);border-radius:4px;max-height:250px;overflow-y:auto;background:#fff}.listGroupTitle.svelte-1q7fygl{color:#8f8f8f;cursor:default;font-size:12px;height:40px;line-height:40px;padding:0 20px;text-overflow:ellipsis;overflow-x:hidden;white-space:nowrap;text-transform:uppercase}.listItem.svelte-1q7fygl{cursor:default;height:40px;line-height:40px;padding:0 20px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.listItem.hover.svelte-1q7fygl{background:#e7f2ff}.listItem.svelte-1q7fygl:active{background:#b9daff}.listItem.svelte-1q7fygl:first-child{border-radius:4px 4px 0 0}.listItem.active.svelte-1q7fygl{background:#007aff;color:#fff}.empty.svelte-1q7fygl{text-align:center;padding:20px 0;color:#78848F}";
 		append(document.head, style);
@@ -409,3 +436,3 @@ }
 				}
-				div.className = "listContainer svelte-1h82xdc";
+				div.className = "listContainer svelte-1q7fygl";
 			},
@@ -428,3 +455,3 @@
 			p(changed, ctx) {
-				if (changed.hoverItemIndex || changed.items || changed.selectedValue || changed.Item || changed.getOptionLabel) {
+				if (changed.hoverItemIndex || changed.items || changed.selectedValue || changed.optionIdentifier || changed.Item || changed.getOptionLabel || changed.noOptionsMessage) {
 					each_value = ctx.items;
@@ -450,11 +477,11 @@
 
-				if (each_value.length) {
-					if (each_else) {
-						each_else.d(1);
-						each_else = null;
-					}
-				} else if (!each_else) {
+				if (!each_value.length && each_else) {
+					each_else.p(changed, ctx);
+				} else if (!each_value.length) {
 					each_else = create_else_block(component, ctx);
 					each_else.c();
 					each_else.m(div, null);
+				} else if (each_else) {
+					each_else.d(1);
+					each_else = null;
 				}
@@ -481,3 +508,3 @@ },
 	function create_else_block(component, ctx) {
-		var div;
+		var div, text;
 
@@ -487,4 +514,4 @@ return {
 				div = createElement("div");
-				div.textContent = "No options";
-				div.className = "empty svelte-1h82xdc";
+				text = createText(ctx.noOptionsMessage);
+				div.className = "empty svelte-1q7fygl";
 			},
@@ -494,4 +521,11 @@
 				insert(target, div, anchor);
+				append(div, text);
 			},
 
+			p(changed, ctx) {
+				if (changed.noOptionsMessage) {
+					setData(text, ctx.noOptionsMessage);
+				}
+			},
+
 			d(detach) {
@@ -513,3 +547,3 @@ if (detach) {
 				text = createText(text_value);
-				div.className = "listGroupTitle svelte-1h82xdc";
+				div.className = "listGroupTitle svelte-1q7fygl";
 			},
@@ -571,3 +605,3 @@
 				addListener(div, "click", click_handler);
-				div.className = div_class_value = "listItem " + itemClasses(ctx.hoverItemIndex, ctx.item, ctx.i, ctx.items, ctx.selectedValue) + " svelte-1h82xdc";
+				div.className = div_class_value = "listItem " + itemClasses(ctx.hoverItemIndex, ctx.item, ctx.i, ctx.items, ctx.selectedValue, ctx.optionIdentifier) + " svelte-1q7fygl";
 			},
@@ -625,3 +659,3 @@
 				div._svelte.ctx = ctx;
-				if ((changed.hoverItemIndex || changed.items || changed.selectedValue) && div_class_value !== (div_class_value = "listItem " + itemClasses(ctx.hoverItemIndex, ctx.item, ctx.i, ctx.items, ctx.selectedValue) + " svelte-1h82xdc")) {
+				if ((changed.hoverItemIndex || changed.items || changed.selectedValue || changed.optionIdentifier) && div_class_value !== (div_class_value = "listItem " + itemClasses(ctx.hoverItemIndex, ctx.item, ctx.i, ctx.items, ctx.selectedValue, ctx.optionIdentifier) + " svelte-1q7fygl")) {
 					div.className = div_class_value;
@@ -652,7 +686,10 @@ }
 
-		if (!document.getElementById("svelte-1h82xdc-style")) add_css();
+		this._handlers.destroy = [ondestroy];
 
+		if (!document.getElementById("svelte-1q7fygl-style")) add_css();
+
 		this._fragment = create_main_fragment$1(this, this._state);
 
 		this.root._oncreate.push(() => {
+			oncreate.call(this);
 			this.fire("update", { changed: assignTrue({}, this._state), current: this._state });
@@ -675,16 +712,18 @@ });
 	function create_main_fragment$2(component, ctx) {
-		var text_value = ctx.getSelectionLabel(ctx.selectedValue), text;
+		var div, raw_value = ctx.getSelectionLabel(ctx.item);
 
 		return {
 			c() {
-				text = createText(text_value);
+				div = createElement("div");
+				div.className = "selection";
 			},
 
 			m(target, anchor) {
-				insert(target, text, anchor);
+				insert(target, div, anchor);
+				div.innerHTML = raw_value;
 			},
 
 			p(changed, ctx) {
-				if ((changed.getSelectionLabel || changed.selectedValue) && text_value !== (text_value = ctx.getSelectionLabel(ctx.selectedValue))) {
-					setData(text, text_value);
+				if ((changed.getSelectionLabel || changed.item) && raw_value !== (raw_value = ctx.getSelectionLabel(ctx.item))) {
+					div.innerHTML = raw_value;
 				}
@@ -695,3 +734,3 @@ },
 				if (detach) {
-					detachNode(text);
+					detachNode(div);
 				}
@@ -722,3 +761,3 @@ }
 	    event.stopPropagation();
-	    this.fire('multiItemClear', { i });
+	    this.fire('multiItemClear', {i});
 	  }
@@ -729,4 +768,4 @@ };
 		var style = createElement("style");
-		style.id = 'svelte-9z9fu7-style';
-		style.textContent = ".multiSelectItem.svelte-9z9fu7{background:#EBEDEF;margin-right:5px;border-radius:16px;line-height:32px;display:flex;cursor:default;height:32px;margin-top:6px;padding:0 10px 0 15px}.multiSelectItem_label.svelte-9z9fu7{margin-right:5px}.multiSelectItem_clear.svelte-9z9fu7{border-radius:0 4px 4px 0;width:20px;text-align:center}.multiSelectItem.svelte-9z9fu7:hover,.multiSelectItem.active.svelte-9z9fu7{background-color:#006FFF;color:#fff}.multiSelectItem_clear.svelte-9z9fu7{border-radius:50%;background:#52616F;width:16px;height:16px;position:relative;top:8px;text-align:center;padding:1px}.multiSelectItem_clear.svelte-9z9fu7:hover,.active.svelte-9z9fu7 .multiSelectItem_clear.svelte-9z9fu7{background:#fff}.multiSelectItem_clear.svelte-9z9fu7:hover svg.svelte-9z9fu7,.active.svelte-9z9fu7 .multiSelectItem_clear svg.svelte-9z9fu7{fill:#006FFF}.multiSelectItem_clear.svelte-9z9fu7 svg.svelte-9z9fu7{fill:#EBEDEF;vertical-align:top}";
+		style.id = 'svelte-10o3np5-style';
+		style.textContent = ".multiSelectItem.svelte-10o3np5{background:#EBEDEF;margin-right:5px;border-radius:16px;line-height:32px;display:flex;cursor:default;height:32px;margin-top:5px;padding:0 10px 0 15px}.multiSelectItem_label.svelte-10o3np5{margin-right:5px}.multiSelectItem_clear.svelte-10o3np5{border-radius:0 4px 4px 0;width:20px;text-align:center}.multiSelectItem.svelte-10o3np5:hover,.multiSelectItem.active.svelte-10o3np5{background-color:#006FFF;color:#fff}.multiSelectItem.disabled.svelte-10o3np5:hover{background:#EBEDEF;color:#C1C6CC}.multiSelectItem_clear.svelte-10o3np5{border-radius:50%;background:#52616F;width:16px;height:16px;position:relative;top:8px;text-align:center;padding:1px}.multiSelectItem_clear.svelte-10o3np5:hover,.active.svelte-10o3np5 .multiSelectItem_clear.svelte-10o3np5{background:#fff}.multiSelectItem_clear.svelte-10o3np5:hover svg.svelte-10o3np5,.active.svelte-10o3np5 .multiSelectItem_clear svg.svelte-10o3np5{fill:#006FFF}.multiSelectItem_clear.svelte-10o3np5 svg.svelte-10o3np5{fill:#EBEDEF;vertical-align:top}";
 		append(document.head, style);
@@ -777,3 +816,3 @@ }
 			p(changed, ctx) {
-				if (changed.activeSelectedValue || changed.selectedValue) {
+				if (changed.activeSelectedValue || changed.isDisabled || changed.getSelectionLabel || changed.selectedValue) {
 					each_value = ctx.selectedValue;
@@ -810,43 +849,81 @@
 
+	// (6:2) {#if !isDisabled}
+	function create_if_block$1(component, ctx) {
+		var div;
+
+		return {
+			c() {
+				div = createElement("div");
+				div.innerHTML = `<svg width="100%" height="100%" viewBox="-2 -2 50 50" focusable="false" role="presentation" class="svelte-10o3np5"><path d="M34.923,37.251L24,26.328L13.077,37.251L9.436,33.61l10.923-10.923L9.436,11.765l3.641-3.641L24,19.047L34.923,8.124 l3.641,3.641L27.641,22.688L38.564,33.61L34.923,37.251z"></path></svg>`;
+				div._svelte = { component, ctx };
+
+				addListener(div, "click", click_handler$1);
+				div.className = "multiSelectItem_clear svelte-10o3np5";
+			},
+
+			m(target, anchor) {
+				insert(target, div, anchor);
+			},
+
+			p(changed, _ctx) {
+				ctx = _ctx;
+				div._svelte.ctx = ctx;
+			},
+
+			d(detach) {
+				if (detach) {
+					detachNode(div);
+				}
+
+				removeListener(div, "click", click_handler$1);
+			}
+		};
+	}
+
 	// (1:0) {#each selectedValue as value, i}
 	function create_each_block$1(component, ctx) {
-		var div2, div0, text0_value = ctx.value.label, text0, text1, div1, text2, div2_class_value;
+		var div1, div0, text0_value = ctx.getSelectionLabel(ctx.value), text0, text1, text2, div1_class_value;
 
+		var if_block = (!ctx.isDisabled) && create_if_block$1(component, ctx);
+
 		return {
 			c() {
-				div2 = createElement("div");
+				div1 = createElement("div");
 				div0 = createElement("div");
 				text0 = createText(text0_value);
 				text1 = createText("\n  ");
-				div1 = createElement("div");
-				div1.innerHTML = `<svg width="100%" height="100%" viewBox="-2 -2 50 50" focusable="false" role="presentation" class="svelte-9z9fu7"><path d="M34.923,37.251L24,26.328L13.077,37.251L9.436,33.61l10.923-10.923L9.436,11.765l3.641-3.641L24,19.047L34.923,8.124 l3.641,3.641L27.641,22.688L38.564,33.61L34.923,37.251z"></path></svg>`;
+				if (if_block) if_block.c();
 				text2 = createText("\n");
-				div0.className = "multiSelectItem_label svelte-9z9fu7";
-
-				div1._svelte = { component, ctx };
-
-				addListener(div1, "click", click_handler$1);
-				div1.className = "multiSelectItem_clear svelte-9z9fu7";
-				div2.className = div2_class_value = "multiSelectItem " + (ctx.activeSelectedValue === ctx.i ? 'active' : '') + " svelte-9z9fu7";
+				div0.className = "multiSelectItem_label svelte-10o3np5";
+				div1.className = div1_class_value = "multiSelectItem " + (ctx.activeSelectedValue === ctx.i ? 'active' : '') + " " + (ctx.isDisabled ? 'disabled' : '') + " svelte-10o3np5";
 			},
 
 			m(target, anchor) {
-				insert(target, div2, anchor);
-				append(div2, div0);
+				insert(target, div1, anchor);
+				append(div1, div0);
 				append(div0, text0);
-				append(div2, text1);
-				append(div2, div1);
-				append(div2, text2);
+				append(div1, text1);
+				if (if_block) if_block.m(div1, null);
+				append(div1, text2);
 			},
 
-			p(changed, _ctx) {
-				ctx = _ctx;
-				if ((changed.selectedValue) && text0_value !== (text0_value = ctx.value.label)) {
+			p(changed, ctx) {
+				if ((changed.getSelectionLabel || changed.selectedValue) && text0_value !== (text0_value = ctx.getSelectionLabel(ctx.value))) {
 					setData(text0, text0_value);
 				}
 
-				div1._svelte.ctx = ctx;
-				if ((changed.activeSelectedValue) && div2_class_value !== (div2_class_value = "multiSelectItem " + (ctx.activeSelectedValue === ctx.i ? 'active' : '') + " svelte-9z9fu7")) {
-					div2.className = div2_class_value;
+				if (!ctx.isDisabled) {
+					if (!if_block) {
+						if_block = create_if_block$1(component, ctx);
+						if_block.c();
+						if_block.m(div1, text2);
+					}
+				} else if (if_block) {
+					if_block.d(1);
+					if_block = null;
 				}
+
+				if ((changed.activeSelectedValue || changed.isDisabled) && div1_class_value !== (div1_class_value = "multiSelectItem " + (ctx.activeSelectedValue === ctx.i ? 'active' : '') + " " + (ctx.isDisabled ? 'disabled' : '') + " svelte-10o3np5")) {
+					div1.className = div1_class_value;
+				}
 			},
@@ -856,6 +933,6 @@
 				if (detach) {
-					detachNode(div2);
+					detachNode(div1);
 				}
 
-				removeListener(div1, "click", click_handler$1);
+				if (if_block) if_block.d();
 			}
@@ -870,3 +947,3 @@ };
 
-		if (!document.getElementById("svelte-9z9fu7-style")) add_css$1();
+		if (!document.getElementById("svelte-10o3np5-style")) add_css$1();
 
@@ -902,3 +979,3 @@ this._fragment = create_main_fragment$3(this, this._state);
 	}
-	function filteredItems({items, filterText, groupBy, groupFilter, getOptionLabel, isMulti, selectedValue}) {
+	function filteredItems({items, filterText, groupBy, groupFilter, getOptionLabel, isMulti, selectedValue, optionIdentifier}) {
 	  const filteredItems = items.filter(item => {
@@ -909,3 +986,3 @@ let keepItem = true;
 	      keepItem = !selectedValue.find(({value}) => {
-	        return value === item.value
+	        return value === item[optionIdentifier]
 	      });
@@ -949,2 +1026,3 @@ }
 	  return {
+	    containerStyles: undefined,
 	    Item,
@@ -957,7 +1035,5 @@ Selection,
 	    listOpen: false,
-	    containerStyles: undefined,
 	    list: undefined,
 	    target: undefined,
 	    selectedValue: undefined,
-	    groupBy: undefined,
 	    activeSelectedValue: undefined,
@@ -967,2 +1043,7 @@ isClearable: true,
 	    isSearchable: true,
+	    optionIdentifier: 'value',
+	    groupBy: undefined,
+	    getOptions: undefined,
+	    loadOptionsInterval: 200,
+	    noOptionsMessage: 'No options',
 	    groupFilter: (groups) => groups,
@@ -985,3 +1066,3 @@ getOptionLabel: (option) => option.label,
 	    target.style.top = `${height + 5}px`;
-	    target.style.minWidth = `${width}px`;
+	    target.style.width = `${width}px`;
 	    target.style.left = '0';
@@ -1067,6 +1148,11 @@ this.set({target});
 	  loadList() {
-	    let {target, list, Item: Item$$1, getOptionLabel, items, selectedValue, filteredItems, isMulti} = this.get();
+	    let {target, list, Item: Item$$1, getOptionLabel, optionIdentifier, noOptionsMessage, items, selectedValue, filteredItems, isMulti} = this.get();
 	    if (target && list) return;
 
-	    const data = {Item: Item$$1};
+	    const data = {Item: Item$$1, optionIdentifier, noOptionsMessage};
+
+	    if (getOptionLabel) {
+	      data.getOptionLabel = getOptionLabel;
+	    }
+
 	    target = document.createElement('div');
@@ -1083,6 +1169,2 @@
 
-	    if (getOptionLabel) {
-	      data.getOptionLabel = getOptionLabel;
-	    }
-
 	    list = new List({
@@ -1099,3 +1181,4 @@ target,
 	      if (newSelection) {
-	        const item = Object.assign({}, items.find(item => item.value === newSelection.value));
+	        const item = Object.assign({}, newSelection);
+
 	        if (isMulti) {
@@ -1119,7 +1202,10 @@ selectedValue = selectedValue ? selectedValue.concat([item]) : [item];
 
-	function oncreate() {
-	  const {listOpen} = this.get();
+	function oncreate$1() {
+	  const {isFocused,listOpen} = this.get();
+	  this.loadOptionsTimeout = undefined;
+
+	  if (isFocused) this.refs.input.focus();
 	  if (listOpen) this.loadList();
 	}
-	function ondestroy() {
+	function ondestroy$1() {
 	  this.removeList();
@@ -1139,6 +1225,25 @@ }
 	  if (changed.filterText) {
-	    this.loadList();
-	    this.set({listOpen: true});
-	    if (current.isMulti) {
-	      this.set({activeSelectedValue: undefined});
+	    if(current.loadOptions) {
+	      clearTimeout(this.loadOptionsTimeout);
+	      this.set({isWaiting:true});
+
+	      this.loadOptionsTimeout = setTimeout(() => {
+	        if(current.filterText) {
+	          current.loadOptions(current.filterText).then((response) => {
+	            this.set({ items: response });
+	          });
+	        } else {
+	          this.set({ items: [] });
+	        }
+
+	        this.set({isWaiting:false});
+	        this.set({listOpen: true});
+	      }, current.loadOptionsInterval);
+	    } else {
+	      this.loadList();
+	      this.set({listOpen: true});
+
+	      if (current.isMulti) {
+	        this.set({activeSelectedValue: undefined});
+	      }
 	    }
@@ -1200,3 +1305,3 @@ }
 
-		var if_block4 = (ctx.isWaiting) && create_if_block$1(component, ctx);
+		var if_block4 = (ctx.isWaiting) && create_if_block$2(component, ctx);
 
@@ -1324,3 +1429,3 @@ function click_handler(event) {
 					if (!if_block4) {
-						if_block4 = create_if_block$1(component, ctx);
+						if_block4 = create_if_block$2(component, ctx);
 						if_block4.c();
@@ -1378,3 +1483,4 @@ if_block4.m(div, null);
 			 	getSelectionLabel: ctx.getSelectionLabel,
-			 	activeSelectedValue: ctx.activeSelectedValue
+			 	activeSelectedValue: ctx.activeSelectedValue,
+			 	isDisabled: ctx.isDisabled
 			 };
@@ -1422,2 +1528,3 @@ return {
 				if (changed.activeSelectedValue) switch_instance_changes.activeSelectedValue = ctx.activeSelectedValue;
+				if (changed.isDisabled) switch_instance_changes.isDisabled = ctx.isDisabled;
 
@@ -1456,3 +1563,3 @@ if (switch_value !== (switch_value = ctx.MultiSelection)) {
 
-	// (37:2) {#if !isMulti && showSelectedItem }
+	// (38:2) {#if !isMulti && showSelectedItem }
 	function create_if_block_3(component, ctx) {
@@ -1465,3 +1572,3 @@ var div;
 			var switch_instance_initial_data = {
-			 	selectedValue: ctx.selectedValue,
+			 	item: ctx.selectedValue,
 			 	getSelectionLabel: ctx.getSelectionLabel
@@ -1502,3 +1609,3 @@ };
 				var switch_instance_changes = {};
-				if (changed.selectedValue) switch_instance_changes.selectedValue = ctx.selectedValue;
+				if (changed.selectedValue) switch_instance_changes.item = ctx.selectedValue;
 				if (changed.getSelectionLabel) switch_instance_changes.getSelectionLabel = ctx.getSelectionLabel;
@@ -1536,3 +1643,3 @@
 
-	// (43:2) {#if showSelectedItem && isClearable && !isDisabled && !isWaiting}
+	// (44:2) {#if showSelectedItem && isClearable && !isDisabled && !isWaiting}
 	function create_if_block_2(component, ctx) {
@@ -1567,3 +1674,3 @@ var div;
 
-	// (53:2) {#if !isSearchable && !isDisabled && !isWaiting && (showSelectedItem && !isClearable || !showSelectedItem)}
+	// (54:2) {#if !isSearchable && !isDisabled && !isWaiting && (showSelectedItem && !isClearable || !showSelectedItem)}
 	function create_if_block_1(component, ctx) {
@@ -1591,4 +1698,4 @@ var div;
 
-	// (62:2) {#if isWaiting}
-	function create_if_block$1(component, ctx) {
+	// (63:2) {#if isWaiting}
+	function create_if_block$2(component, ctx) {
 		var div;
@@ -1620,3 +1727,3 @@
 
-		this._recompute({ isMulti: 1, isDisabled: 1, isFocused: 1, selectedValue: 1, filterText: 1, placeholder: 1, items: 1, groupBy: 1, groupFilter: 1, getOptionLabel: 1 }, this._state);
+		this._recompute({ isMulti: 1, isDisabled: 1, isFocused: 1, selectedValue: 1, filterText: 1, placeholder: 1, items: 1, groupBy: 1, groupFilter: 1, getOptionLabel: 1, optionIdentifier: 1 }, this._state);
 		this._intro = true;
@@ -1626,3 +1733,3 @@
 
-		this._handlers.destroy = [ondestroy];
+		this._handlers.destroy = [ondestroy$1];
 
@@ -1636,3 +1743,3 @@ if (!document.getElementById("svelte-84hful-style")) add_css$2();
 		this.root._oncreate.push(() => {
-			oncreate.call(this);
+			oncreate$1.call(this);
 			this.fire("update", { changed: assignTrue({}, this._state), current: this._state });
@@ -1665,3 +1772,3 @@ });
 
-		if (changed.items || changed.filterText || changed.groupBy || changed.groupFilter || changed.getOptionLabel || changed.isMulti || changed.selectedValue) {
+		if (changed.items || changed.filterText || changed.groupBy || changed.groupFilter || changed.getOptionLabel || changed.isMulti || changed.selectedValue || changed.optionIdentifier) {
 			if (this._differs(state.filteredItems, (state.filteredItems = filteredItems(state)))) changed.filteredItems = true;
@@ -1668,0 +1775,0 @@ }

package.json

 {
   "name": "svelte-select",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "repository": "https://[e-mail]/bob-bea-fre/svelte-select.git",
@@ -5,0 +5,0 @@ "description": "A <Select> component for Svelte apps",

README.md

 # svelte-select ([demo](https://stackblitz.com/edit/svelte-rhbzxj))
 
-A select component for Svelte apps.
+A select/autocomplete component for Svelte apps.  With support for grouping, filtering, async and more.
 
@@ -39,8 +39,8 @@ ## Installation
 
-## Select API options (props)
+## API
 
-Common props you may want to specify include:
-
+* `items` - array of items
 * `filterText` - text to filter list labels by
 * `placeholder` - placeholder text
+* `optionIdentifier` - Override default identifier ('value')
 * `listOpen` - open/close list
@@ -51,2 +51,3 @@ * `containerStyles` - add/override container styles
 * `isClearable` - Defaults true set to false to disable clear all
+* `isDisabled` - Disable select
 * `isMulti` - Enable multi select
@@ -56,6 +57,9 @@ * `isSearchable` - Defaults true set to false to disable search/filtering
 * `getOptionLabel` - Override default getOptionLabel function
-* `getSelectionLabel` - Override default getSelectionLabel function
+* `Item` - Override default item component
+* `Selection` - Override default selection component
+* `MultiSelection` - Override default multi selection component
+* `getOptions` - Methods that returns a Promise that updates items  
+* `noOptionsMessage` - Message to display when there are no items  
 
 
-
 ## Development
@@ -62,0 +66,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

123691

increased by7.22%

Lines of code

2868

increased by6.54%

Number of lines in readme file

83

increased by5.06%

No dependency changes