selectic 3.0.18 → 3.0.20

package/.tool-versions

@@ -0,0 +1,5 @@
+# ASDF configuration file for mmsx repository.
+#
+# https://asdf-vm.com/manage/configuration.html
+
+nodejs 12.18.4 system

package/README.md

@@ -12,51 +12,66 @@ reverse selection, and many other possibilities.
 
 It integrates well with VueJS and is reactive to option changes.
 
+Typescript types are provided.
+
 There are very few dependencies and code stays very small (~90kB).
 
+![example of a Selectic component](./doc/images/selectic_example.png)
+
 ## Example
 
 ```html
 <Selectic
-  :options="['first choice', 'second choice', 'third choice']"
-  v-model="selection"
+    :options="['first choice', 'second choice', 'third choice']"
+    v-model="selection"
 />
 
 <Selectic
-  value="item2"
-  :options="[{
-      id: 'item1',
-      text: 'The first item',
-      icon: 'fa fa-thumbs-o-up',
-  }, {
-      id: 'item2',
-      text: 'Another item',
-      title: 'second choice',
-  }, {
-      id: 'item3',
-      text: 'Disabled item',
-      disabled: true,
-  }]"
-  multiple
-
-  @input="onChange"
+    multiple
+    value="item2"
+    :options="[{
+        id: 'item1',
+        text: 'The first item',
+        icon: 'fa fa-thumbs-o-up',
+    }, {
+        id: 'item2',
+        text: 'Another item',
+        title: 'second choice',
+    }, {
+        id: 'item3',
+        text: 'Disabled item',
+        disabled: true,
+    }]"
+
+    @input="onChange"
 />
 
-<Selectic>
-  <optgroup label="Animals">
-    <option>Cat</option>
-    <option value="dog">Dog</option>
-    <option :value="42">42 goldfishes</option>
-  </optgroup>
-</Selectic>
+<Selectic
+    :options="[{
+        id: 'animals',
+        text: 'Animals',
+        options: [{
+            id: 'cat',
+            text: 'Cat',
+        }, {
+            id: 'dog',
+            text: 'A dog',
+        }, {
+            id: 42,
+            text: '42 goldfishes',
+        }],
+    }]"
+/>
 ```
 
+[Full documentation](./doc/main.md)
+
 ## Features
 
 * List of items (either string array or object array).
 * Can load dynamically list from a server and the list can be paginate (with a
   cache system to avoid reloading previous requests).
-* Slots: options may be added from Vue template (by writing explicit `<option>` or `<optgroup>`) in a reactive way _(currently disabled in 3.0.0)_.
+* ~~Slots: options may be added from Vue template (by writing explicit `<option>` or `<optgroup>`) in a reactive way~~ _(currently disabled in 3.0.0+)_.
 * Multi-sources: Possibility to combine options from different sources (static, dynamic or slots) or to use the other as fallback (if the list is empty).
 * Supports basic Select properties like `multiple`, `disabled`, `title`
 * Supports group element (equivalent of optGroup), even for dynamic list.

package/dist/selectic.common.js

@@ -32,7 +32,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "/* {{{ Variables */\n\n:root {\n    --selectic-font-size: 14px;\n    --selectic-cursor-disabled: not-allowed;\n\n    /* The main element */\n    --selectic-color: #555555;\n    --selectic-bg: #ffffff;\n\n    /* The main element (when disabled) */\n    --selectic-color-disabled: #787878;\n    --selectic-bg-disabled: #eeeeee;\n\n    /* The list */\n    --selectic-panel-bg: #f0f0f0;\n    --selectic-separator-bordercolor: #cccccc;\n    /* --selectic-item-color: var(--selectic-color); /* Can be set in any CSS configuration */\n\n    /* The current selected item */\n    --selectic-selected-item-color: #428bca;\n\n    /* When mouse is over items or by selecting with key arrows */\n    --selectic-active-item-color: #ffffff;\n    --selectic-active-item-bg: #66afe9;\n\n    /* Selected values in main element */\n    --selectic-value-bg: #f0f0f0;\n    /* --selectic-more-items-bg: var(--selectic-info-bg); /* can be set in any CSS configuration */\n    /* --selectic-more-items-color: var(--selectic-info-color); /* can be set in any CSS configuration */\n    --selectic-more-items-bg-disabled: #cccccc;\n\n    /* Information message */\n    --selectic-info-bg: #5bc0de;\n    --selectic-info-color: #ffffff;\n\n    /* Error message */\n    --selectic-error-bg: #b72c29;\n    --selectic-error-color: #ffffff;\n\n    /* XXX: Currently it is important to keep this size for a correct scroll\n     * height estimation */\n    --selectic-input-height: 30px;\n}\n\n/* }}} */\n/* {{{ Bootstrap equivalent style */\n\n.selectic .form-control {\n    display: block;\n    width: 100%;\n    height: calc(var(--selectic-input-height) - 2px);\n    font-size: var(--selectic-font-size);\n    line-height: 1.42857143;\n    color: var(--selectic-color);\n    background-color: var(--selectic-bg);\n    background-image: none;\n    border: 1px solid var(--selectic-separator-bordercolor); /* should use a better variable */\n    border-radius: 4px;\n    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);\n    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;\n}\n.selectic .has-feedback {\n    position: relative;\n}\n.selectic .has-feedback .form-control {\n    padding-right: calc(var(--selectic-input-height) + 4px);\n}\n\n.selectic .form-control-feedback.fa,\n.selectic .form-control-feedback {\n    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: 2;\n    display: block;\n    width: calc(var(--selectic-input-height) + 4px);\n    height: calc(var(--selectic-input-height) + 4px);\n    line-height: var(--selectic-input-height);\n    text-align: center;\n    pointer-events: none;\n}\n\n.selectic .alert-info {\n    background-color: var(--selectic-info-bg);\n    color: var(--selectic-info-color);\n}\n\n.selectic .alert-danger {\n    background-color: var(--selectic-error-bg);\n    color: var(--selectic-error-color);\n}\n\n/* }}} */\n\n.selectic * {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n}\n\n.selectic.form-control {\n    display: inline-block;\n    padding: 0;\n    cursor: pointer;\n    border: unset;\n}\n\n.has-feedback .selectic__icon-container.form-control-feedback {\n    right: 0;\n}\n\n/* The input which contains the selected value\n * XXX: This input should stay hidden behind other elements, but is \"visible\"\n * (in term of DOM point of view) in order to get and to trigger the `focus`\n * DOM event. */\n.selectic__input-value {\n    position: fixed;\n    opacity: 0;\n    z-index: -1000;\n    top: -100px;\n}\n\n/* XXX: .form-control has been added to this selector to improve priority and\n * override some rules of the original .form-control */\n.selectic-input.form-control {\n    display: inline-flex;\n    justify-content: space-between;\n    overflow: hidden;\n    width: 100%;\n    min-height: var(--selectic-input-height);\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-left: 5px;\n    line-height: calc(var(--selectic-input-height) - 4px);\n    color: var(--selectic-color);\n}\n\n.selectic-input__reverse-icon {\n    align-self: center;\n    margin-right: 3px;\n    cursor: default;\n}\n.selectic-input__clear-icon {\n    align-self: center;\n    margin-left: 3px;\n    cursor: pointer;\n}\n.selectic-input__clear-icon:hover {\n    color: var(--selectic-selected-item-color);\n}\n\n.selectic-input.focused {\n    border-bottom-left-radius: 0px;\n    border-bottom-right-radius: 0px;\n}\n\n.selectic-input.disabled {\n    cursor: var(--selectic-cursor-disabled);\n    background-color: var(--selectic-bg-disabled);\n}\n.selectic-input.disabled .more-items {\n\tbackground-color: var(--selectic-more-items-bg-disabled);\n}\n\n.selectic-input__selected-items {\n    display: inline-flex;\n    flex-wrap: nowrap;\n    align-items: center;\n    white-space: nowrap;\n}\n\n.selectic-input__selected-items__placeholder {\n    font-style: italic;\n    opacity: 0.7;\n    white-space: nowrap;\n}\n\n.selectic-icon {\n    color: var(--selectic-color);\n    text-align: center;\n    vertical-align: middle;\n}\n\n.selectic__extended-list {\n    position: fixed;\n    z-index: 2000;\n    height: auto;\n    background-color: var(--selectic-bg, #ffffff);\n    box-shadow: 2px 5px 12px 0px #888888;\n    border-radius: 0 0 4px 4px;\n    padding: 0;\n    min-width: 200px;\n}\n.selectic__extended-list__list-container{\n    overflow: auto;\n}\n.selectic__extended-list__list-items {\n    max-height: calc(var(--selectic-input-height) * 10);\n    min-width: max-content;\n    padding-left: 0;\n}\n\n.selectic-item {\n    display: block;\n    position: relative;\n    box-sizing: border-box;\n    padding: 2px 8px;\n    color: var(--selectic-item-color, var(--selectic-color));\n    min-height: calc(var(--selectic-input-height) - 3px);\n    list-style-type: none;\n    white-space: nowrap;\n    cursor: pointer;\n}\n\n.selectic-item_text {\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n}\n\n.selectic-item:not(.selected) .selectic-item_icon {\n    opacity: 0;\n}\n\n.selectic-item_text {\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n}\n\n.selectic-item__active {\n    background-color: var(--selectic-active-item-bg);\n    color: var(--selectic-active-item-color);\n}\n.selectic-item__active:not(.selected) .selectic-item_icon {\n    opacity: 0.2;\n}\n\n.selectic-item__disabled {\n    color: var(--selectic-color-disabled);\n    background-color: var(--selectic-bg-disabled);\n}\n\n.selectic-item__is-in-group {\n    padding-left: 2em;\n}\n\n.selectic-item__is-group {\n    font-weight: bold;\n    cursor: default;\n}\n\n.selectic-item.selected {\n    color: var(--selectic-selected-item-color);\n}\n.selectic-search-scope {\n    color: #e0e0e0;\n    left: auto;\n    right: 10px;\n}\n.selectic .form-control-feedback.fa.selectic-search-scope {\n    width: calc(var(--selectic-input-height) * 0.75);\n    height: calc(var(--selectic-input-height) * 0.75);\n    line-height: calc(var(--selectic-input-height) * 0.75);\n}\n\n.selectic__message {\n    text-align: center;\n    padding: 3px;\n}\n\n.selectic .filter-panel {\n    padding: 3px;\n    margin-left: 0px;\n    margin-right: 0px;\n    background-color: var(--selectic-panel-bg);\n    border-bottom: 1px solid var(--selectic-separator-bordercolor);\n}\n\n.selectic .panelclosed {\n    max-height: 0px;\n    transition: max-height 0.3s ease-out;\n    overflow: hidden;\n}\n\n.panelopened {\n    max-height: 200px;\n    transition: max-height 0.3s ease-in;\n    overflow: hidden;\n}\n\n.selectic .filter-panel__input {\n    padding-left: 0px;\n    padding-right: 0px;\n    padding-bottom: 10px;\n    margin-bottom: 0px;\n}\n.selectic .filter-input {\n    height: calc(var(--selectic-input-height) * 0.75);\n}\n\n.selectic .checkbox-filter {\n    padding: 5px;\n    text-align: center;\n}\n\n.selectic .curtain-handler {\n    text-align: center;\n}\n\n.selectic .toggle-selectic {\n    margin: 5px;\n    padding-left: 0px;\n    padding-right: 0px;\n}\n\n.selectic .toggle-boolean-select-all-toggle {\n    display: inline;\n    margin-right: 15px;\n}\n\n.selectic .toggle-boolean-excluding-toggle {\n    display: inline;\n    margin-right: 15px;\n}\n\n.selectic .single-value {\n    display: grid;\n    grid-template: \"value icon\" 1fr / max-content max-content;\n\n    padding: 2px;\n    padding-left: 5px;\n    margin-left: 0;\n    margin-right: 5px;\n    /* margin top/bottom are mainly to create a gutter in multilines */\n    margin-top: 2px;\n    margin-bottom: 2px;\n\n    border-radius: 3px;\n    background-color: var(--selectic-value-bg);\n    max-height: calc(var(--selectic-input-height) - 10px);\n    max-width: 100%;\n    min-width: 30px;\n\n    overflow: hidden;\n    white-space: nowrap;\n    line-height: initial;\n    vertical-align: middle;\n}\n\n.selectic .more-items {\n    display: inline-block;\n\n    padding-left: 5px;\n    padding-right: 5px;\n    border-radius: 10px;\n\n    background-color: var(--selectic-more-items-bg, var(--selectic-info-bg));\n    color: var(--selectic-more-items-color, var(--selectic-info-color));\n    cursor: help;\n}\n.selectic-input__selected-items__value {\n    grid-area: value;\n    align-self: center;\n    justify-self: normal;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n}\n\n.selectic-input__selected-items__icon {\n    grid-area: icon;\n    align-self: center;\n    justify-self: center;\n    margin-left: 5px;\n}\n.selectic-input__selected-items__icon:hover {\n    color: var(--selectic-selected-item-color);\n}\n\n.selectic__label-disabled {\n    opacity: 0.5;\n    transition: opacity 400ms;\n}\n\n/* XXX: override padding of bootstrap input-sm.\n * This padding introduce a line shift. */\n.selectic.input-sm {\n    padding: 0;\n}\n\n/* {{{ overflow multiline */\n\n.selectic--overflow-multiline,\n.selectic--overflow-multiline.form-control,\n.selectic--overflow-multiline .form-control {\n    height: unset;\n}\n\n.selectic--overflow-multiline .selectic-input {\n    overflow: unset;\n}\n\n.selectic--overflow-multiline .selectic-input__selected-items {\n    flex-wrap: wrap;\n}\n\n/* }}} */\n";
+var css_248z = "/* {{{ Variables */\n\n:root {\n    --selectic-font-size: 14px;\n    --selectic-cursor-disabled: not-allowed;\n\n    /* The main element */\n    --selectic-color: #555555;\n    --selectic-bg: #ffffff;\n\n    /* The main element (when disabled) */\n    --selectic-color-disabled: #787878;\n    --selectic-bg-disabled: #eeeeee;\n\n    /* The list */\n    --selectic-panel-bg: #f0f0f0;\n    --selectic-separator-bordercolor: #cccccc;\n    /* --selectic-item-color: var(--selectic-color); /* Can be set in any CSS configuration */\n\n    /* The current selected item */\n    --selectic-selected-item-color: #428bca;\n\n    /* When mouse is over items or by selecting with key arrows */\n    --selectic-active-item-color: #ffffff;\n    --selectic-active-item-bg: #66afe9;\n\n    /* Selected values in main element */\n    --selectic-value-bg: #f0f0f0;\n    /* --selectic-more-items-bg: var(--selectic-info-bg); /* can be set in any CSS configuration */\n    /* --selectic-more-items-color: var(--selectic-info-color); /* can be set in any CSS configuration */\n    --selectic-more-items-bg-disabled: #cccccc;\n\n    /* Information message */\n    --selectic-info-bg: #5bc0de;\n    --selectic-info-color: #ffffff;\n\n    /* Error message */\n    --selectic-error-bg: #b72c29;\n    --selectic-error-color: #ffffff;\n\n    /* XXX: Currently it is important to keep this size for a correct scroll\n     * height estimation */\n    --selectic-input-height: 30px;\n}\n\n/* }}} */\n/* {{{ Bootstrap equivalent style */\n\n.selectic .form-control {\n    display: block;\n    width: 100%;\n    height: calc(var(--selectic-input-height) - 2px);\n    font-size: var(--selectic-font-size);\n    line-height: 1.42857143;\n    color: var(--selectic-color);\n    background-color: var(--selectic-bg);\n    background-image: none;\n    border: 1px solid var(--selectic-separator-bordercolor); /* should use a better variable */\n    border-radius: 4px;\n    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);\n    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;\n}\n.selectic .has-feedback {\n    position: relative;\n}\n.selectic .has-feedback .form-control {\n    padding-right: calc(var(--selectic-input-height) + 4px);\n}\n\n.selectic .form-control-feedback.fa,\n.selectic .form-control-feedback {\n    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: 2;\n    display: block;\n    width: calc(var(--selectic-input-height) + 4px);\n    height: calc(var(--selectic-input-height) + 4px);\n    line-height: var(--selectic-input-height);\n    text-align: center;\n    pointer-events: none;\n}\n\n.selectic .alert-info {\n    background-color: var(--selectic-info-bg);\n    color: var(--selectic-info-color);\n}\n\n.selectic .alert-danger {\n    background-color: var(--selectic-error-bg);\n    color: var(--selectic-error-color);\n}\n\n/* }}} */\n\n.selectic * {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n}\n\n.selectic.form-control {\n    display: inline-block;\n    padding: 0;\n    cursor: pointer;\n    border: unset;\n}\n\n.has-feedback .selectic__icon-container.form-control-feedback {\n    right: 0;\n}\n\n/* The input which contains the selected value\n * XXX: This input should stay hidden behind other elements, but is \"visible\"\n * (in term of DOM point of view) in order to get and to trigger the `focus`\n * DOM event. */\n.selectic__input-value {\n    position: fixed;\n    opacity: 0;\n    z-index: -1000;\n    top: -100px;\n}\n\n/* XXX: .form-control has been added to this selector to improve priority and\n * override some rules of the original .form-control */\n.selectic-input.form-control {\n    display: inline-flex;\n    justify-content: space-between;\n    overflow: hidden;\n    width: 100%;\n    min-height: var(--selectic-input-height);\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-left: 5px;\n    line-height: calc(var(--selectic-input-height) - 4px);\n    color: var(--selectic-color);\n}\n\n.selectic-input__reverse-icon {\n    align-self: center;\n    margin-right: 3px;\n    cursor: default;\n}\n.selectic-input__clear-icon {\n    align-self: center;\n    margin-left: 3px;\n    cursor: pointer;\n}\n.selectic-input__clear-icon:hover {\n    color: var(--selectic-selected-item-color);\n}\n\n.selectic-input.focused {\n    border-bottom-left-radius: 0px;\n    border-bottom-right-radius: 0px;\n}\n\n.selectic-input.disabled {\n    cursor: var(--selectic-cursor-disabled);\n    background-color: var(--selectic-bg-disabled);\n}\n.selectic-input.disabled .more-items {\n\tbackground-color: var(--selectic-more-items-bg-disabled);\n}\n\n.selectic-input__selected-items {\n    display: inline-flex;\n    flex-wrap: nowrap;\n    align-items: center;\n    white-space: nowrap;\n}\n\n.selectic-input__selected-items__placeholder {\n    font-style: italic;\n    opacity: 0.7;\n    white-space: nowrap;\n}\n\n.selectic-icon {\n    color: var(--selectic-color);\n    text-align: center;\n    vertical-align: middle;\n}\n\n.selectic__extended-list {\n    position: fixed;\n    top: var(--top-position, 0);\n    z-index: 2000;\n    height: auto;\n    max-height: var(--availableSpace);\n    background-color: var(--selectic-bg, #ffffff);\n    box-shadow: 2px 5px 12px 0px #888888;\n    border-radius: 0 0 4px 4px;\n    padding: 0;\n    width: var(--list-width, 200px);\n    min-width: 200px;\n    display: grid;\n    grid-template-rows: minmax(0, max-content) 1fr;\n}\n.selectic__extended-list.selectic-position-top {\n    box-shadow: 2px -3px 12px 0px #888888;\n}\n.selectic__extended-list__list-container{\n    overflow: auto;\n}\n.selectic__extended-list__list-items {\n    max-height: calc(var(--selectic-input-height) * 10);\n    min-width: max-content;\n    padding-left: 0;\n}\n\n.selectic-item {\n    display: block;\n    position: relative;\n    box-sizing: border-box;\n    padding: 2px 8px;\n    color: var(--selectic-item-color, var(--selectic-color));\n    min-height: calc(var(--selectic-input-height) - 3px);\n    list-style-type: none;\n    white-space: nowrap;\n    cursor: pointer;\n}\n\n.selectic-item_text {\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n}\n\n.selectic-item:not(.selected) .selectic-item_icon {\n    opacity: 0;\n}\n\n.selectic-item_text {\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n}\n\n.selectic-item__active {\n    background-color: var(--selectic-active-item-bg);\n    color: var(--selectic-active-item-color);\n}\n.selectic-item__active:not(.selected) .selectic-item_icon {\n    opacity: 0.2;\n}\n\n.selectic-item__disabled {\n    color: var(--selectic-color-disabled);\n    background-color: var(--selectic-bg-disabled);\n}\n\n.selectic-item__is-in-group {\n    padding-left: 2em;\n}\n\n.selectic-item__is-group {\n    font-weight: bold;\n    cursor: default;\n}\n\n.selectic-item.selected {\n    color: var(--selectic-selected-item-color);\n}\n.selectic-search-scope {\n    color: #e0e0e0;\n    left: auto;\n    right: 10px;\n}\n.selectic .form-control-feedback.fa.selectic-search-scope {\n    width: calc(var(--selectic-input-height) * 0.75);\n    height: calc(var(--selectic-input-height) * 0.75);\n    line-height: calc(var(--selectic-input-height) * 0.75);\n}\n\n.selectic__message {\n    text-align: center;\n    padding: 3px;\n}\n\n.selectic .filter-panel {\n    padding: 3px;\n    margin-left: 0px;\n    margin-right: 0px;\n    background-color: var(--selectic-panel-bg);\n    border-bottom: 1px solid var(--selectic-separator-bordercolor);\n}\n\n.selectic .panelclosed {\n    max-height: 0px;\n    transition: max-height 0.3s ease-out;\n    overflow: hidden;\n}\n\n.panelopened {\n    max-height: 200px;\n    transition: max-height 0.3s ease-in;\n    overflow: hidden;\n}\n\n.selectic .filter-panel__input {\n    padding-left: 0px;\n    padding-right: 0px;\n    padding-bottom: 10px;\n    margin-bottom: 0px;\n}\n.selectic .filter-input {\n    height: calc(var(--selectic-input-height) * 0.75);\n}\n\n.selectic .checkbox-filter {\n    padding: 5px;\n    text-align: center;\n}\n\n.selectic .curtain-handler {\n    text-align: center;\n}\n\n.selectic .toggle-selectic {\n    margin: 5px;\n    padding-left: 0px;\n    padding-right: 0px;\n}\n\n.selectic .toggle-boolean-select-all-toggle {\n    display: inline;\n    margin-right: 15px;\n}\n\n.selectic .toggle-boolean-excluding-toggle {\n    display: inline;\n    margin-right: 15px;\n}\n\n.selectic .single-value {\n    display: grid;\n    grid-template: \"value icon\" 1fr / max-content max-content;\n\n    padding: 2px;\n    padding-left: 5px;\n    margin-left: 0;\n    margin-right: 5px;\n    /* margin top/bottom are mainly to create a gutter in multilines */\n    margin-top: 2px;\n    margin-bottom: 2px;\n\n    border-radius: 3px;\n    background-color: var(--selectic-value-bg);\n    max-height: calc(var(--selectic-input-height) - 10px);\n    max-width: 100%;\n    min-width: 30px;\n\n    overflow: hidden;\n    white-space: nowrap;\n    line-height: initial;\n    vertical-align: middle;\n}\n\n.selectic .more-items {\n    display: inline-block;\n\n    padding-left: 5px;\n    padding-right: 5px;\n    border-radius: 10px;\n\n    background-color: var(--selectic-more-items-bg, var(--selectic-info-bg));\n    color: var(--selectic-more-items-color, var(--selectic-info-color));\n    cursor: help;\n}\n.selectic-input__selected-items__value {\n    grid-area: value;\n    align-self: center;\n    justify-self: normal;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n}\n\n.selectic-input__selected-items__icon {\n    grid-area: icon;\n    align-self: center;\n    justify-self: center;\n    margin-left: 5px;\n}\n.selectic-input__selected-items__icon:hover {\n    color: var(--selectic-selected-item-color);\n}\n\n.selectic__label-disabled {\n    opacity: 0.5;\n    transition: opacity 400ms;\n}\n\n/* XXX: override padding of bootstrap input-sm.\n * This padding introduce a line shift. */\n.selectic.input-sm {\n    padding: 0;\n}\n\n/* {{{ overflow multiline */\n\n.selectic--overflow-multiline,\n.selectic--overflow-multiline.form-control,\n.selectic--overflow-multiline .form-control {\n    height: unset;\n}\n\n.selectic--overflow-multiline .selectic-input {\n    overflow: unset;\n}\n\n.selectic--overflow-multiline .selectic-input__selected-items {\n    flex-wrap: wrap;\n}\n\n/* }}} */\n";
 styleInject(css_248z);
 
 /**
@@ -111,6 +111,33 @@ function assignObject(obj, ...sourceObjects) {
     }
     return result;
 }
+/** Compare 2 list of options.
+ * @returns true if there are no difference
+ */
+function compareOptions(oldOptions, newOptions) {
+    if (oldOptions.length !== newOptions.length) {
+        return false;
+    }
+    return oldOptions.every((oldOption, idx) => {
+        const newOption = newOptions[idx];
+        const keys = Object.keys(oldOption);
+        if (keys.length !== Object.keys(newOption).length) {
+            return false;
+        }
+        return keys.every((optionKey) => {
+            const key = optionKey;
+            const oldValue = oldOption[key];
+            const newValue = newOption[key];
+            if (key === 'options') {
+                return compareOptions(oldValue, newValue);
+            }
+            if (key === 'data') {
+                return JSON.stringify(oldValue) === JSON.stringify(newValue);
+            }
+            return oldValue === newValue;
+        });
+    });
+}
 
 /* File Purpose:
  * It keeps and computes all states at a single place.
@@ -140,6 +167,7 @@ let messages = {
     moreSelectedItem: '+1 other',
     moreSelectedItems: '+%d others',
     unknownPropertyValue: 'property "%s" has incorrect values.',
+    wrongQueryResult: 'Query did not return all results.',
 };
 let closePreviousSelectic;
 /* }}} */
@@ -767,7 +795,7 @@ class SelecticStore {
         });
         return childOptions;
     }
-    buildAllOptions(keepFetched = false) {
+    buildAllOptions(keepFetched = false, stopFetch = false) {
         const allOptions = [];
         let listOptions = [];
         let elementOptions = [];
@@ -838,12 +866,26 @@ class SelecticStore {
                 this.state.totalAllOptions = allOptions.length;
             }
         }
-        this.state.filteredOptions = [];
-        this.state.totalFilteredOptions = Infinity;
-        this.buildFilteredOptions().then(() => {
-            /* XXX: To recompute for strict mode and auto-select */
-            this.assertCorrectValue();
-        });
+        if (!stopFetch) {
+            this.state.filteredOptions = [];
+            this.state.totalFilteredOptions = Infinity;
+            this.buildFilteredOptions().then(() => {
+                /* XXX: To recompute for strict mode and auto-select */
+                this.assertCorrectValue();
+            });
+        }
+        else {
+            /* Do not fetch again just build filteredOptions */
+            const search = this.state.searchText;
+            if (!search) {
+                this.state.filteredOptions = this.buildGroupItems(allOptions);
+                this.state.totalFilteredOptions = this.state.filteredOptions.length;
+                return;
+            }
+            const options = this.filterOptions(allOptions, search);
+            this.state.filteredOptions = options;
+            this.state.totalFilteredOptions = this.state.filteredOptions.length;
+        }
     }
     async buildFilteredOptions() {
         if (!this.state.isOpen) {
@@ -975,6 +1017,7 @@ class SelecticStore {
             const requestId = ++this.requestId;
             const { total: rTotal, result } = await fetchCallback(search, offset, limit);
             let total = rTotal;
+            let errorMessage = '';
             /* Assert result is correctly formatted */
             if (!Array.isArray(result)) {
                 throw new Error(labels.wrongFormattedData);
@@ -990,8 +1033,17 @@ class SelecticStore {
             if (!search) {
                 /* update cache */
                 state.totalDynOptions = total;
-                state.dynOptions.splice(offset, limit, ...result);
-                setTimeout(() => this.buildAllOptions(true), 0);
+                const old = state.dynOptions.splice(offset, limit, ...result);
+                if (compareOptions(old, result)) {
+                    /* Added options are the same as previous ones.
+                     * Stop fetching to avoid infinite loop
+                     */
+                    errorMessage = labels.wrongQueryResult;
+                    setTimeout(() => this.buildAllOptions(true, true), 0);
+                }
+                else {
+                    setTimeout(() => this.buildAllOptions(true), 0);
+                }
             }
             /* Check request is not obsolete */
             if (requestId !== this.requestId) {
@@ -1014,13 +1066,13 @@ class SelecticStore {
             if (search && state.totalFilteredOptions <= state.filteredOptions.length) {
                 this.addStaticFilteredOptions(true);
             }
-            state.status.errorMessage = '';
+            state.status.errorMessage = errorMessage;
         }
         catch (e) {
             state.status.errorMessage = e.message;
             if (!search) {
                 state.totalDynOptions = 0;
-                this.buildAllOptions(true);
+                this.buildAllOptions(true, true);
             }
         }
         this.state.status.searching = false;
@@ -1220,6 +1272,8 @@ let MainInput = class MainInput extends vtyx.Vue {
         /* }}} */
         /* {{{ data */
         this.nbHiddenItems = 0;
+        /* reactivity non needed */
+        this.domObserver = null;
     }
     /* }}} */
     /* {{{ computed */
@@ -1265,8 +1319,18 @@ let MainInput = class MainInput extends vtyx.Vue {
     get singleSelectedItem() {
         const state = this.store.state;
         const isMultiple = state.multiple;
-        const selected = this.selectedOptions;
-        return !isMultiple && !!selected && selected.text;
+        if (isMultiple) {
+            return;
+        }
+        return this.selectedOptions;
+    }
+    get singleSelectedItemText() {
+        const item = this.singleSelectedItem;
+        return (item === null || item === void 0 ? void 0 : item.text) || '';
+    }
+    get singleSelectedItemTitle() {
+        const item = this.singleSelectedItem;
+        return (item === null || item === void 0 ? void 0 : item.title) || (item === null || item === void 0 ? void 0 : item.text) || '';
     }
     get singleStyle() {
         const selected = this.selectedOptions;
@@ -1364,6 +1428,11 @@ let MainInput = class MainInput extends vtyx.Vue {
          * currently shown */
         const el = this.$refs.selectedItems;
         const parentEl = el.parentElement;
+        if (!document.contains(parentEl)) {
+            /* The element is currently not in DOM */
+            this.createObserver(parentEl);
+            return;
+        }
         const parentPadding = parseInt(getComputedStyle(parentEl).getPropertyValue('padding-right'), 10);
         const clearEl = parentEl.querySelector('.selectic-input__clear-icon');
         const clearWidth = clearEl ? clearEl.offsetWidth : 0;
@@ -1395,6 +1464,33 @@ let MainInput = class MainInput extends vtyx.Vue {
         idx--;
         this.nbHiddenItems = selectedOptions.length - idx;
     }
+    closeObserver() {
+        const observer = this.domObserver;
+        if (observer) {
+            observer.disconnect();
+        }
+        this.domObserver = null;
+    }
+    createObserver(el) {
+        this.closeObserver();
+        const observer = new MutationObserver((mutationsList) => {
+            for (const mutation of mutationsList) {
+                if (mutation.type === 'childList') {
+                    for (const elMutated of Array.from(mutation.addedNodes)) {
+                        /* Check that element has been added to DOM */
+                        if (elMutated.contains(el)) {
+                            this.closeObserver();
+                            this.computeSize();
+                            return;
+                        }
+                    }
+                }
+            }
+        });
+        const config = { childList: true, subtree: true };
+        observer.observe(document, config);
+        this.domObserver = observer;
+    }
     /* }}} */
     /* {{{ watch */
     onInternalChange() {
@@ -1405,6 +1501,9 @@ let MainInput = class MainInput extends vtyx.Vue {
     updated() {
         this.computeSize();
     }
+    beforeUnmount() {
+        this.closeObserver();
+    }
     /* }}} */
     render() {
         return (vtyx.h("div", { class: "selectic-container has-feedback", on: {
@@ -1415,14 +1514,14 @@ let MainInput = class MainInput extends vtyx.Vue {
                         focused: this.store.state.isOpen,
                         disabled: this.store.state.disabled,
                     }] },
-                this.hasValue && !this.store.state.multiple && (vtyx.h("span", { class: "selectic-item_text", style: this.singleStyle, title: this.singleSelectedItem || '' }, this.singleSelectedItem)),
+                this.hasValue && !this.store.state.multiple && (vtyx.h("span", { class: "selectic-item_text", style: this.singleStyle, title: this.singleSelectedItemTitle }, this.singleSelectedItemText)),
                 this.displayPlaceholder && (vtyx.h("span", { class: [
                         'selectic-input__selected-items__placeholder',
                         'selectic-item_text',
                     ], title: this.store.state.placeholder }, this.store.state.placeholder)),
                 this.store.state.multiple && (vtyx.h("div", { class: "selectic-input__selected-items", ref: "selectedItems" },
                     this.isSelectionReversed && (vtyx.h("span", { class: "fa fa-strikethrough selectic-input__reverse-icon", title: this.reverseSelectionLabel })),
-                    this.showSelectedOptions.map((item) => (vtyx.h("div", { class: "single-value", style: item.style, title: item.text, on: {
+                    this.showSelectedOptions.map((item) => (vtyx.h("div", { class: "single-value", style: item.style, title: item.title || item.text, on: {
                             click: () => this.$emit('item:click', item.id),
                         } },
                         vtyx.h("span", { class: "selectic-input__selected-items__value" }, item.text),
@@ -1851,6 +1950,10 @@ var __decorate$1 = (this && this.__decorate) || function (decorators, target, ke
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+/* list estimation height
+ * 30px × 10 + 20px (for panel header)
+ */
+const DEFAULT_LIST_HEIGHT = 320;
 let ExtendedList = class ExtendedList extends vtyx.Vue {
     constructor() {
         /* {{{ props */
@@ -1858,11 +1961,18 @@ let ExtendedList = class ExtendedList extends vtyx.Vue {
         /* }}} */
         /* {{{ data */
         this.topGroup = ' ';
-        this.listHeight = 120;
+        this.listHeight = 0;
         this.listWidth = 200;
+        this.availableSpace = 0;
     }
     /* }}} */
     /* {{{ computed */
+    /** check if the height of the box has been completely estimated. */
+    get isFullyEstimated() {
+        const listHeight = this.listHeight;
+        const availableSpace = this.availableSpace;
+        return listHeight !== 0 && listHeight < availableSpace;
+    }
     get searchingLabel() {
         return this.store.data.labels.searching;
     }
@@ -1923,17 +2033,30 @@ let ExtendedList = class ExtendedList extends vtyx.Vue {
     }
     get bestPosition() {
         const windowHeight = window.innerHeight;
-        const listHeight = this.listHeight;
+        const isFullyEstimated = this.isFullyEstimated;
+        /* XXX: The max() is because if listHeight is greater than default,
+         * it means that the value is more accurate than the default. */
+        const listHeight = isFullyEstimated ? this.listHeight
+            : Math.max(DEFAULT_LIST_HEIGHT, this.listHeight);
         const inputTop = this.elementTop;
         const inputBottom = this.elementBottom;
-        if (inputBottom + listHeight <= windowHeight) {
+        const availableTop = inputTop;
+        const availableBottom = windowHeight - inputBottom;
+        if (listHeight < availableBottom) {
             return 'bottom';
         }
-        if (listHeight < inputTop) {
+        if (listHeight < availableTop) {
             return 'top';
         }
         /* There are not enough space neither at bottom nor at top */
-        return (windowHeight - inputBottom) < inputTop ? 'top' : 'bottom';
+        return availableBottom < availableTop ? 'top' : 'bottom';
+    }
+    get position() {
+        const listPosition = this.store.state.listPosition;
+        if (listPosition === 'auto') {
+            return this.bestPosition;
+        }
+        return listPosition;
     }
     get horizontalStyle() {
         const windowWidth = window.innerWidth;
@@ -1953,26 +2076,32 @@ let ExtendedList = class ExtendedList extends vtyx.Vue {
         return `left: ${inputLeft}px; min-width: unset;`;
     }
     get positionStyle() {
-        let listPosition = this.store.state.listPosition;
+        const listPosition = this.position;
         const horizontalStyle = this.horizontalStyle;
-        if (listPosition === 'auto') {
-            listPosition = this.bestPosition;
-        }
+        const width = this.width;
         if (listPosition === 'top') {
             const transform = horizontalStyle.includes('transform')
                 ? 'transform: translateX(-100%) translateY(-100%);'
                 : 'transform: translateY(-100%);';
+            const elementTop = this.elementTop;
+            const availableSpace = this.elementTop;
+            this.availableSpace = availableSpace;
             return `
-                top: ${this.elementTop}px;
+                --top-position: ${elementTop}px;
                 ${horizontalStyle}
-                width: ${this.width}px;
-                ${transform}
+                --list-width: ${width}px;
+                ${transform};
+                --availableSpace: ${availableSpace}px;
             `;
         }
+        const elementBottom = this.elementBottom;
+        const availableSpace = window.innerHeight - elementBottom;
+        this.availableSpace = availableSpace;
         return `
-            top: ${this.elementBottom}px;
+            --top-position: ${elementBottom}px;
             ${horizontalStyle}
-            width: ${this.width}px;
+            --list-width: ${width}px;
+            --availableSpace: ${availableSpace}px;
         `;
     }
     /* }}} */
@@ -2015,7 +2144,10 @@ let ExtendedList = class ExtendedList extends vtyx.Vue {
         const state = store.state;
         const isGroup = state.groups.size > 0 &&
             state.totalFilteredOptions > store.data.itemsPerPage;
-        return (vtyx.h("div", { style: this.positionStyle, class: "selectic selectic__extended-list" },
+        return (vtyx.h("div", { style: this.positionStyle, class: [
+                'selectic selectic__extended-list',
+                `selectic-position-${this.position}`,
+            ] },
             !state.hideFilter && (vtyx.h(Filter, { store: this.store })),
             isGroup && (vtyx.h("span", { class: "selectic-item selectic-item--header selectic-item__is-group" }, this.topGroup)),
             vtyx.h(List$1, { store: store, on: {