add selection, collapsedSelection and option slots

Author: mskocik

src/lib/Svelecte.svelte

@@ -274,7 +274,6 @@
   $: itemRenderer = typeof renderer === 'function'
     ? renderer
     : (formatterList[renderer] || formatterList.default.bind({ label: currentLabelField}));
-  $: collapseSelectionFn = collapseSelection ? settings.collapseSelectionFn.bind(i18n_actual) : null;
 
   /** ************************************ dropdown-specific */
 
@@ -1156,8 +1155,9 @@
       {#if selectedOptions.length }
       <!-- TODO: re-implement comments -->
       {#if multiple && doCollapse}
-        <span>{@html collapseSelectionFn(selectedOptions.length, selectedOptions) }</span>
+        <slot name="collapsedSelection" {selectedOptions} i18n={i18n_actual}>{i18n_actual.collapsedSelection(selectedOptions.length)}</slot>
       {:else}
+        <slot name="selection" {selectedOptions} {bindItem}>
           {#each selectedOptions as opt (opt[currentValueField])}
           <div class="sv-item--container" animate:flip={{duration: flipDurationMs }}>
             <div class="sv-item--wrap" class:is-multi={multiple}>
@@ -1175,6 +1175,7 @@
             {/if}
           </div>
           {/each}
+        </slot>
         {/if}
       {/if}
 
@@ -1262,9 +1263,11 @@
                     class="sv-item--wrap in-dropdown"
                     class:sv-dd-item-active={dropdown_index === index}
                   >
-                    <div class="sv-item--content">
-                      {@html highlightSearch(opt, false, input_value, itemRenderer, disableHighlight) }
-                    </div>
+                    <slot name="option" item={opt}>
+                      <div class="sv-item--content">
+                        {@html highlightSearch(opt, false, input_value, itemRenderer, disableHighlight) }
+                      </div>
+                    </slot>
                   </div>
                 {/if}
               </div>
@@ -1278,9 +1281,11 @@
                   class="sv-item--wrap in-dropdown"
                   class:sv-dd-item-active={dropdown_index === i}
                 >
-                  <div class="sv-item--content">
-                    {@html highlightSearch(opt, false, input_value, itemRenderer, disableHighlight) }
-                  </div>
+                  <slot name="option" item={opt}>
+                    <div class="sv-item--content">
+                      {@html highlightSearch(opt, false, input_value, itemRenderer, disableHighlight) }
+                    </div>
+                  </slot>
                 </div>
               {/if}
             {/each}

src/lib/settings.js

@@ -29,12 +29,6 @@
  * @callback i18n_aria_inputFocus
  * @returns {string}
  *
- * @callback i18n_collapseSelectionFn
- * @param {number} selectionCount
- * @param {object[]} selection
- * @this {I18nObject}
- * @returns {string}
- *
  * @typedef {object} I18nObject
  * @property {string} empty
  * @property {string} nomatch
@@ -87,7 +81,6 @@
  * @property {number|null} vlItemSize
  * @property {number|null} vlHeight
  * @property {I18nObject} i18n
- * @property {i18n_collapseSelectionFn} collapseSelectionFn
  */
 const /**@type {Settings} */ settings = {
   // html
@@ -147,18 +140,7 @@ const /**@type {Settings} */ settings = {
     fetchEmpty: 'No data related to your search',
     collapsedSelection: count => `${count} selected`,
     createRowLabel: value => `Create '${value}'`
-  },
-  /**
-   * Bound to 'i18n'
-   *
-   * @this {I18nObject}
-   * @param {number} selectionCount
-   * @param {object[]} selection
-   * @returns {string}
-   */
-  collapseSelectionFn: function(selectionCount, selection) {
-    return this.collapsedSelection(selectionCount);
-  },
+  }
 }
 
 export default settings;