selectic 3.1.4 → 3.2.0

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    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.selectic-item__active.selectic-item__disabled:not(.selected) .selectic-item_icon {\n    opacity: 0;\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__is-group.selectable {\n    cursor: pointer;\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/* {{{ icons */\n\n@keyframes selectic-animation-spin {\n    0% {\n        transform: rotate(0deg);\n    }\n    100% {\n        transform: rotate(359deg);\n    }\n}\n\n.selectic__icon {\n    height: 1em;\n    fill: currentColor;\n}\n\n.selectic-spin {\n    animation: selectic-animation-spin 2s infinite linear;\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\n.selectic .has-feedback {\n    position: relative;\n}\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\n.selectic-input__clear-icon {\n    align-self: center;\n    margin-left: 3px;\n    cursor: pointer;\n}\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\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\n.selectic__extended-list.selectic-position-top {\n    box-shadow: 2px -3px 12px 0px #888888;\n}\n\n.selectic__extended-list__list-container{\n    overflow: auto;\n}\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\n.selectic-item__active:not(.selected) .selectic-item_icon {\n    opacity: 0.2;\n}\n\n.selectic-item__active:not(.selected) .single-select_icon {\n    opacity: 0;\n}\n\n.selectic-item__active.selectic-item__disabled:not(.selected) .selectic-item_icon {\n    opacity: 0;\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__is-group.selectable {\n    cursor: pointer;\n}\n\n.selectic-item.selected {\n    color: var(--selectic-selected-item-color);\n}\n\n.selectic-search-scope {\n    color: #e0e0e0;\n    left: auto;\n    right: 10px;\n}\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\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\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\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/* {{{ icons */\n\n@keyframes selectic-animation-spin {\n    0% {\n        transform: rotate(0deg);\n    }\n    100% {\n        transform: rotate(359deg);\n    }\n}\n\n.selectic__icon {\n    height: 1em;\n    fill: currentColor;\n}\n\n.selectic-spin {\n    animation: selectic-animation-spin 2s infinite linear;\n}\n\n/* }}} */\n";
 styleInject(css_248z);
 
 /**
@@ -111,32 +111,76 @@ function assignObject(obj, ...sourceObjects) {
     }
     return result;
 }
-/** Compare 2 list of options.
- * @returns true if there are no difference
+/**
+ * Ckeck whether a value is primitive.
+ * @returns true if val is primitive and false otherwise.
  */
-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) {
+function isPrimitive(val) {
+    /* The value null is treated explicitly because in JavaScript
+     * `typeof null === 'object'` is evaluated to `true`.
+     */
+    return val === null || (typeof val !== 'object' && typeof val !== 'function');
+}
+/**
+ * Performs a deep comparison between two objects to determine if they
+ * should be considered equal.
+ *
+ * @param objA object to compare to objB.
+ * @param objB object to compare to objA.
+ * @param attributes list of attributes to not compare.
+ * @param refs internal reference to object to avoid cyclic references
+ * @returns true if objA should be considered equal to objB.
+ */
+function isDeepEqual(objA, objB, ignoreAttributes = [], refs = new WeakMap()) {
+    objA = vue.unref(objA);
+    objB = vue.unref(objB);
+    /* For primitive types */
+    if (isPrimitive(objA)) {
+        return isPrimitive(objB) && Object.is(objA, objB);
+    }
+    /* For functions (follow the behavior of _.isEqual and compare functions
+     * by reference). */
+    if (typeof objA === 'function') {
+        return typeof objB === 'function' && objA === objB;
+    }
+    /* For circular references */
+    if (refs.has(objA)) {
+        return refs.get(objA) === objB;
+    }
+    refs.set(objA, objB);
+    /* For objects */
+    if (typeof objA === 'object') {
+        if (typeof objB !== 'object') {
             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;
+        /* For arrays */
+        if (Array.isArray(objA)) {
+            return Array.isArray(objB) &&
+                objA.length === objB.length &&
+                !objA.some((val, idx) => !isDeepEqual(val, objB[idx], ignoreAttributes, refs));
+        }
+        /* For RegExp */
+        if (objA instanceof RegExp) {
+            return objB instanceof RegExp &&
+                objA.source === objB.source &&
+                objA.flags === objB.flags;
+        }
+        /* For Date */
+        if (objA instanceof Date) {
+            return objB instanceof Date && objA.getTime() === objB.getTime();
+        }
+        /* This should be an object */
+        const aRec = objA;
+        const bRec = objB;
+        const aKeys = Object.keys(aRec).filter((key) => !ignoreAttributes.includes(key));
+        const bKeys = Object.keys(bRec).filter((key) => !ignoreAttributes.includes(key));
+        const differentKeyFound = aKeys.some((key) => {
+            return !bKeys.includes(key) ||
+                !isDeepEqual(aRec[key], bRec[key], ignoreAttributes, refs);
         });
-    });
+        return aKeys.length === bKeys.length && !differentKeyFound;
+    }
+    return true;
 }
 let displayLog = false;
 function debug(fName, step, ...args) {
@@ -1190,7 +1234,7 @@ class SelecticStore {
                 /* update cache */
                 state.totalDynOptions = total;
                 const old = state.dynOptions.splice(offset, result.length, ...result);
-                if (compareOptions(old, result)) {
+                if (isDeepEqual(old, result)) {
                     /* Added options are the same as previous ones.
                      * Stop fetching to avoid infinite loop
                      */
@@ -1493,7 +1537,7 @@ class SelecticStore {
 /* This icon is from <https://github.com/Templarian/MaterialDesign>,
  * distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license
  */
-var __decorate$d = (this && this.__decorate) || function (decorators, target, key, desc) {
+var __decorate$e = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     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;
@@ -1505,7 +1549,7 @@ let IconCaretDown = class IconCaretDown extends vtyx.Vue {
             vtyx.h("path", { d: "M7,10L12,15L17,10H7Z" })));
     }
 };
-IconCaretDown = __decorate$d([
+IconCaretDown = __decorate$e([
     vtyx.Component
 ], IconCaretDown);
 var IconCaretDown$1 = IconCaretDown;
@@ -1513,7 +1557,7 @@ var IconCaretDown$1 = IconCaretDown;
 /* This icon is from <https://github.com/Templarian/MaterialDesign>,
  * distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license
  */
-var __decorate$c = (this && this.__decorate) || function (decorators, target, key, desc) {
+var __decorate$d = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     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;
@@ -1525,7 +1569,7 @@ let IconCaretUp = class IconCaretUp extends vtyx.Vue {
             vtyx.h("path", { d: "M7,15L12,10L17,15H7Z" })));
     }
 };
-IconCaretUp = __decorate$c([
+IconCaretUp = __decorate$d([
     vtyx.Component
 ], IconCaretUp);
 var IconCaretUp$1 = IconCaretUp;
@@ -1533,7 +1577,7 @@ var IconCaretUp$1 = IconCaretUp;
 /* This icon is from <https://github.com/Templarian/MaterialDesign>,
  * distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license
  */
-var __decorate$b = (this && this.__decorate) || function (decorators, target, key, desc) {
+var __decorate$c = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     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;
@@ -1545,11 +1589,28 @@ let IconCheck = class IconCheck extends vtyx.Vue {
             vtyx.h("path", { d: "M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z" })));
     }
 };
-IconCheck = __decorate$b([
+IconCheck = __decorate$c([
     vtyx.Component
 ], IconCheck);
 var IconCheck$1 = IconCheck;
 
+var __decorate$b = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+};
+let IconDot = class IconDot extends vtyx.Vue {
+    render() {
+        return (vtyx.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
+            vtyx.h("circle", { cx: "8", cy: "16", r: "3.5" })));
+    }
+};
+IconDot = __decorate$b([
+    vtyx.Component
+], IconDot);
+var IconDot$1 = IconDot;
+
 /* This icon is from <https://github.com/Templarian/MaterialDesign>,
  * distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license
  */
@@ -1698,6 +1759,8 @@ let Icon = class Icon extends vtyx.Vue {
                 return IconCaretUp$1;
             case 'check':
                 return IconCheck$1;
+            case 'dot':
+                return IconDot$1;
             case 'search':
                 return IconSearch$1;
             case 'spinner':
@@ -2452,8 +2515,10 @@ let List = class List extends vtyx.Vue {
     onOffsetChange() {
         this.checkOffset();
     }
-    onFilteredOptionsChange() {
-        this.checkOffset();
+    onFilteredOptionsChange(oldVal, newVal) {
+        if (!isDeepEqual(oldVal, newVal)) {
+            this.checkOffset();
+        }
     }
     onGroupIdChange() {
         this.$emit('groupId', this.groupId);
@@ -2483,6 +2548,7 @@ let List = class List extends vtyx.Vue {
                             'selectic-item__is-group': option.isGroup,
                         }], style: option.style, title: option.title, key: 'selectic-item-' + (idx + this.startIndex) },
                     this.isMultiple && (vtyx.h(Icon$1, { icon: "check", store: this.store, class: "selectic-item_icon" })),
+                    !this.isMultiple && (vtyx.h(Icon$1, { icon: "dot", store: this.store, class: "selectic-item_icon single-select_icon" })),
                     option.icon && (option.icon.includes(':')
                         ? vtyx.h(Icon$1, { icon: option.icon, store: this.store })
                         : vtyx.h(Icon$1, { icon: `raw:${option.icon}`, store: this.store })),
@@ -3013,7 +3079,7 @@ let Selectic = class Selectic extends vtyx.Vue {
         else {
             this.removeListeners();
             if (state.status.hasChanged) {
-                this.$emit('change', this.getValue(), state.selectionIsExcluded, this);
+                this.emit('change', this.getValue(), state.selectionIsExcluded);
                 this.store.resetChange();
             }
             this.emit('close');

package/dist/selectic.esm.js

@@ -28,7 +28,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    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.selectic-item__active.selectic-item__disabled:not(.selected) .selectic-item_icon {\n    opacity: 0;\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__is-group.selectable {\n    cursor: pointer;\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/* {{{ icons */\n\n@keyframes selectic-animation-spin {\n    0% {\n        transform: rotate(0deg);\n    }\n    100% {\n        transform: rotate(359deg);\n    }\n}\n\n.selectic__icon {\n    height: 1em;\n    fill: currentColor;\n}\n\n.selectic-spin {\n    animation: selectic-animation-spin 2s infinite linear;\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\n.selectic .has-feedback {\n    position: relative;\n}\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\n.selectic-input__clear-icon {\n    align-self: center;\n    margin-left: 3px;\n    cursor: pointer;\n}\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\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\n.selectic__extended-list.selectic-position-top {\n    box-shadow: 2px -3px 12px 0px #888888;\n}\n\n.selectic__extended-list__list-container{\n    overflow: auto;\n}\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\n.selectic-item__active:not(.selected) .selectic-item_icon {\n    opacity: 0.2;\n}\n\n.selectic-item__active:not(.selected) .single-select_icon {\n    opacity: 0;\n}\n\n.selectic-item__active.selectic-item__disabled:not(.selected) .selectic-item_icon {\n    opacity: 0;\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__is-group.selectable {\n    cursor: pointer;\n}\n\n.selectic-item.selected {\n    color: var(--selectic-selected-item-color);\n}\n\n.selectic-search-scope {\n    color: #e0e0e0;\n    left: auto;\n    right: 10px;\n}\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\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\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\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/* {{{ icons */\n\n@keyframes selectic-animation-spin {\n    0% {\n        transform: rotate(0deg);\n    }\n    100% {\n        transform: rotate(359deg);\n    }\n}\n\n.selectic__icon {\n    height: 1em;\n    fill: currentColor;\n}\n\n.selectic-spin {\n    animation: selectic-animation-spin 2s infinite linear;\n}\n\n/* }}} */\n";
 styleInject(css_248z);
 
 /**
@@ -107,32 +107,76 @@ function assignObject(obj, ...sourceObjects) {
     }
     return result;
 }
-/** Compare 2 list of options.
- * @returns true if there are no difference
+/**
+ * Ckeck whether a value is primitive.
+ * @returns true if val is primitive and false otherwise.
  */
-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) {
+function isPrimitive(val) {
+    /* The value null is treated explicitly because in JavaScript
+     * `typeof null === 'object'` is evaluated to `true`.
+     */
+    return val === null || (typeof val !== 'object' && typeof val !== 'function');
+}
+/**
+ * Performs a deep comparison between two objects to determine if they
+ * should be considered equal.
+ *
+ * @param objA object to compare to objB.
+ * @param objB object to compare to objA.
+ * @param attributes list of attributes to not compare.
+ * @param refs internal reference to object to avoid cyclic references
+ * @returns true if objA should be considered equal to objB.
+ */
+function isDeepEqual(objA, objB, ignoreAttributes = [], refs = new WeakMap()) {
+    objA = unref(objA);
+    objB = unref(objB);
+    /* For primitive types */
+    if (isPrimitive(objA)) {
+        return isPrimitive(objB) && Object.is(objA, objB);
+    }
+    /* For functions (follow the behavior of _.isEqual and compare functions
+     * by reference). */
+    if (typeof objA === 'function') {
+        return typeof objB === 'function' && objA === objB;
+    }
+    /* For circular references */
+    if (refs.has(objA)) {
+        return refs.get(objA) === objB;
+    }
+    refs.set(objA, objB);
+    /* For objects */
+    if (typeof objA === 'object') {
+        if (typeof objB !== 'object') {
             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;
+        /* For arrays */
+        if (Array.isArray(objA)) {
+            return Array.isArray(objB) &&
+                objA.length === objB.length &&
+                !objA.some((val, idx) => !isDeepEqual(val, objB[idx], ignoreAttributes, refs));
+        }
+        /* For RegExp */
+        if (objA instanceof RegExp) {
+            return objB instanceof RegExp &&
+                objA.source === objB.source &&
+                objA.flags === objB.flags;
+        }
+        /* For Date */
+        if (objA instanceof Date) {
+            return objB instanceof Date && objA.getTime() === objB.getTime();
+        }
+        /* This should be an object */
+        const aRec = objA;
+        const bRec = objB;
+        const aKeys = Object.keys(aRec).filter((key) => !ignoreAttributes.includes(key));
+        const bKeys = Object.keys(bRec).filter((key) => !ignoreAttributes.includes(key));
+        const differentKeyFound = aKeys.some((key) => {
+            return !bKeys.includes(key) ||
+                !isDeepEqual(aRec[key], bRec[key], ignoreAttributes, refs);
         });
-    });
+        return aKeys.length === bKeys.length && !differentKeyFound;
+    }
+    return true;
 }
 let displayLog = false;
 function debug(fName, step, ...args) {
@@ -1186,7 +1230,7 @@ class SelecticStore {
                 /* update cache */
                 state.totalDynOptions = total;
                 const old = state.dynOptions.splice(offset, result.length, ...result);
-                if (compareOptions(old, result)) {
+                if (isDeepEqual(old, result)) {
                     /* Added options are the same as previous ones.
                      * Stop fetching to avoid infinite loop
                      */
@@ -1489,7 +1533,7 @@ class SelecticStore {
 /* This icon is from <https://github.com/Templarian/MaterialDesign>,
  * distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license
  */
-var __decorate$d = (this && this.__decorate) || function (decorators, target, key, desc) {
+var __decorate$e = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     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;
@@ -1501,7 +1545,7 @@ let IconCaretDown = class IconCaretDown extends Vue {
             h("path", { d: "M7,10L12,15L17,10H7Z" })));
     }
 };
-IconCaretDown = __decorate$d([
+IconCaretDown = __decorate$e([
     Component
 ], IconCaretDown);
 var IconCaretDown$1 = IconCaretDown;
@@ -1509,7 +1553,7 @@ var IconCaretDown$1 = IconCaretDown;
 /* This icon is from <https://github.com/Templarian/MaterialDesign>,
  * distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license
  */
-var __decorate$c = (this && this.__decorate) || function (decorators, target, key, desc) {
+var __decorate$d = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     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;
@@ -1521,7 +1565,7 @@ let IconCaretUp = class IconCaretUp extends Vue {
             h("path", { d: "M7,15L12,10L17,15H7Z" })));
     }
 };
-IconCaretUp = __decorate$c([
+IconCaretUp = __decorate$d([
     Component
 ], IconCaretUp);
 var IconCaretUp$1 = IconCaretUp;
@@ -1529,7 +1573,7 @@ var IconCaretUp$1 = IconCaretUp;
 /* This icon is from <https://github.com/Templarian/MaterialDesign>,
  * distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license
  */
-var __decorate$b = (this && this.__decorate) || function (decorators, target, key, desc) {
+var __decorate$c = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     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;
@@ -1541,11 +1585,28 @@ let IconCheck = class IconCheck extends Vue {
             h("path", { d: "M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z" })));
     }
 };
-IconCheck = __decorate$b([
+IconCheck = __decorate$c([
     Component
 ], IconCheck);
 var IconCheck$1 = IconCheck;
 
+var __decorate$b = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+};
+let IconDot = class IconDot extends Vue {
+    render() {
+        return (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
+            h("circle", { cx: "8", cy: "16", r: "3.5" })));
+    }
+};
+IconDot = __decorate$b([
+    Component
+], IconDot);
+var IconDot$1 = IconDot;
+
 /* This icon is from <https://github.com/Templarian/MaterialDesign>,
  * distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license
  */
@@ -1694,6 +1755,8 @@ let Icon = class Icon extends Vue {
                 return IconCaretUp$1;
             case 'check':
                 return IconCheck$1;
+            case 'dot':
+                return IconDot$1;
             case 'search':
                 return IconSearch$1;
             case 'spinner':
@@ -2448,8 +2511,10 @@ let List = class List extends Vue {
     onOffsetChange() {
         this.checkOffset();
     }
-    onFilteredOptionsChange() {
-        this.checkOffset();
+    onFilteredOptionsChange(oldVal, newVal) {
+        if (!isDeepEqual(oldVal, newVal)) {
+            this.checkOffset();
+        }
     }
     onGroupIdChange() {
         this.$emit('groupId', this.groupId);
@@ -2479,6 +2544,7 @@ let List = class List extends Vue {
                             'selectic-item__is-group': option.isGroup,
                         }], style: option.style, title: option.title, key: 'selectic-item-' + (idx + this.startIndex) },
                     this.isMultiple && (h(Icon$1, { icon: "check", store: this.store, class: "selectic-item_icon" })),
+                    !this.isMultiple && (h(Icon$1, { icon: "dot", store: this.store, class: "selectic-item_icon single-select_icon" })),
                     option.icon && (option.icon.includes(':')
                         ? h(Icon$1, { icon: option.icon, store: this.store })
                         : h(Icon$1, { icon: `raw:${option.icon}`, store: this.store })),
@@ -3009,7 +3075,7 @@ let Selectic = class Selectic extends Vue {
         else {
             this.removeListeners();
             if (state.status.hasChanged) {
-                this.$emit('change', this.getValue(), state.selectionIsExcluded, this);
+                this.emit('change', this.getValue(), state.selectionIsExcluded);
                 this.store.resetChange();
             }
             this.emit('close');

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "selectic",
-    "version": "3.1.4",
+    "version": "3.2.0",
     "description": "Smart Select for VueJS 3.x",
     "main": "dist/selectic.common.js",
     "module": "dist/selectic.esm.js",
@@ -42,8 +42,8 @@
         "vtyx": "4.2.1"
     },
     "devDependencies": {
-        "@babel/types": "^7.23.6",
-        "rollup": "^2.79.1",
+        "@babel/types": "^7.28.1",
+        "rollup": "^2.79.2",
         "rollup-plugin-postcss": "^4.0.2",
         "tape": "^4.17.0",
         "typescript": "~4.8"

package/src/Icon.tsx

@@ -8,6 +8,7 @@ import Store, { IconFamily, IconKey, IconValue } from './Store';
 import IconCaretDown from './icons/caret-down';
 import IconCaretUp from './icons/caret-up';
 import IconCheck from './icons/check';
+import IconDot from './icons/dot';
 import IconQuestion from './icons/question';
 import IconSearch from './icons/search';
 import IconSpinner from './icons/spinner';
@@ -87,6 +88,8 @@ export default class Icon extends Vue<Props> {
                 return IconCaretUp;
             case 'check':
                 return IconCheck;
+            case 'dot':
+                return IconDot;
             case 'search':
                 return IconSearch;
             case 'spinner':

package/src/List.tsx

@@ -3,7 +3,7 @@
  * It handles interactions with these items.
  */
 
-import {Vue, Component, Prop, Watch, h} from 'vtyx';
+import { Vue, Component, Prop, Watch, h } from 'vtyx';
 import { unref } from 'vue';
 
 import Store, {
@@ -11,6 +11,7 @@ import Store, {
     OptionId,
 } from './Store';
 import Icon from './Icon';
+import { isDeepEqual } from './tools';
 
 export interface Props {
     store: Store;
@@ -222,8 +223,10 @@ export default class List extends Vue<Props> {
     }
 
     @Watch('filteredOptions', { deep: true })
-    public onFilteredOptionsChange() {
-        this.checkOffset();
+    public onFilteredOptionsChange(oldVal: OptionItem[], newVal: OptionItem[]) {
+        if (!isDeepEqual(oldVal, newVal)) {
+            this.checkOffset();
+        }
     }
 
     @Watch('groupId')
@@ -280,6 +283,9 @@ export default class List extends Vue<Props> {
                     {this.isMultiple && (
                         <Icon icon="check" store={this.store} class="selectic-item_icon" />
                     )}
+                    {!this.isMultiple && (
+                        <Icon icon="dot" store={this.store} class="selectic-item_icon single-select_icon" />
+                    )}
                     {option.icon && (
                         option.icon.includes(':')
                             ? <Icon icon={option.icon} store={this.store} />

package/src/Store.tsx

@@ -7,7 +7,7 @@
 import { reactive, watch, unref, computed, ComputedRef } from 'vue';
 import {
     assignObject,
-    compareOptions,
+    isDeepEqual,
     convertToRegExp,
     debug,
     deepClone,
@@ -378,6 +378,7 @@ export type IconKey =
     | 'caret-down'
     | 'caret-up'
     | 'check'
+    | 'dot'
     | 'search'
     | 'spinner'
     | 'strikethrough'
@@ -1704,7 +1705,7 @@ export default class SelecticStore {
                 state.totalDynOptions = total;
                 const old = state.dynOptions.splice(offset, result.length, ...result);
 
-                if (compareOptions(old, result)) {
+                if (isDeepEqual(old, result)) {
                     /* Added options are the same as previous ones.
                      * Stop fetching to avoid infinite loop
                      */

package/src/css/selectic.css

@@ -60,9 +60,11 @@
     box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
 }
+
 .selectic .has-feedback {
     position: relative;
 }
+
 .selectic .has-feedback .form-control {
     padding-right: calc(var(--selectic-input-height) + 4px);
 }
@@ -141,11 +143,13 @@
     margin-right: 3px;
     cursor: default;
 }
+
 .selectic-input__clear-icon {
     align-self: center;
     margin-left: 3px;
     cursor: pointer;
 }
+
 .selectic-input__clear-icon:hover {
     color: var(--selectic-selected-item-color);
 }
@@ -159,6 +163,7 @@
     cursor: var(--selectic-cursor-disabled);
     background-color: var(--selectic-bg-disabled);
 }
+
 .selectic-input.disabled .more-items {
 	background-color: var(--selectic-more-items-bg-disabled);
 }
@@ -197,12 +202,15 @@
     display: grid;
     grid-template-rows: minmax(0, max-content) 1fr;
 }
+
 .selectic__extended-list.selectic-position-top {
     box-shadow: 2px -3px 12px 0px #888888;
 }
+
 .selectic__extended-list__list-container{
     overflow: auto;
 }
+
 .selectic__extended-list__list-items {
     max-height: calc(var(--selectic-input-height) * 10);
     min-width: max-content;
@@ -241,9 +249,15 @@
     background-color: var(--selectic-active-item-bg);
     color: var(--selectic-active-item-color);
 }
+
 .selectic-item__active:not(.selected) .selectic-item_icon {
     opacity: 0.2;
 }
+
+.selectic-item__active:not(.selected) .single-select_icon {
+    opacity: 0;
+}
+
 .selectic-item__active.selectic-item__disabled:not(.selected) .selectic-item_icon {
     opacity: 0;
 }
@@ -269,11 +283,13 @@
 .selectic-item.selected {
     color: var(--selectic-selected-item-color);
 }
+
 .selectic-search-scope {
     color: #e0e0e0;
     left: auto;
     right: 10px;
 }
+
 .selectic .form-control-feedback.fa.selectic-search-scope {
     width: calc(var(--selectic-input-height) * 0.75);
     height: calc(var(--selectic-input-height) * 0.75);
@@ -311,6 +327,7 @@
     padding-bottom: 10px;
     margin-bottom: 0px;
 }
+
 .selectic .filter-input {
     height: calc(var(--selectic-input-height) * 0.75);
 }
@@ -375,6 +392,7 @@
     color: var(--selectic-more-items-color, var(--selectic-info-color));
     cursor: help;
 }
+
 .selectic-input__selected-items__value {
     grid-area: value;
     align-self: center;
@@ -390,6 +408,7 @@
     justify-self: center;
     margin-left: 5px;
 }
+
 .selectic-input__selected-items__icon:hover {
     color: var(--selectic-selected-item-color);
 }

package/src/icons/dot.tsx

@@ -0,0 +1,17 @@
+import {Vue, Component, h} from 'vtyx';
+
+export interface Props {}
+
+@Component
+export default class IconDot extends Vue<Props> {
+    public render() {
+        return (
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+            >
+                <circle cx="8" cy="16" r="3.5" />
+            </svg>
+        );
+    }
+}

package/src/index.tsx

@@ -560,7 +560,7 @@ export default class Selectic extends Vue<Props> {
         } else {
             this.removeListeners();
             if (state.status.hasChanged) {
-                this.$emit('change', this.getValue(), state.selectionIsExcluded, this);
+                this.emit('change', this.getValue(), state.selectionIsExcluded);
                 this.store.resetChange();
             }
             this.emit('close');

package/src/tools.ts

@@ -1,5 +1,4 @@
 import { unref } from 'vue';
-import { OptionValue } from './Store';
 
 /**
  * Clone the object and its inner properties.
@@ -8,7 +7,11 @@ import { OptionValue } from './Store';
  * @param refs internal reference to object to avoid cyclic references
  * @returns a copy of obj
  */
-export function deepClone<T = any>(origObject: T, ignoreAttributes: string[] = [], refs: WeakMap<any, any> = new WeakMap()): T {
+export function deepClone<T = any>(
+    origObject: T,
+    ignoreAttributes: string[] = [],
+    refs: WeakMap<any, any> = new WeakMap()
+): T {
     const obj = unref(origObject);
 
     /* For circular references */
@@ -88,34 +91,93 @@ export function assignObject<T>(obj: Partial<T>, ...sourceObjects: Array<Partial
     return result as T;
 }
 
-/** Compare 2 list of options.
- * @returns true if there are no difference
+/**
+ * Ckeck whether a value is primitive.
+ * @returns true if val is primitive and false otherwise.
+ */
+function isPrimitive<T = any>(val: T): boolean {
+    /* The value null is treated explicitly because in JavaScript
+     * `typeof null === 'object'` is evaluated to `true`.
+     */
+    return val === null || (typeof val !== 'object' && typeof val !== 'function');
+}
+
+/**
+ * Performs a deep comparison between two objects to determine if they
+ * should be considered equal.
+ *
+ * @param objA object to compare to objB.
+ * @param objB object to compare to objA.
+ * @param attributes list of attributes to not compare.
+ * @param refs internal reference to object to avoid cyclic references
+ * @returns true if objA should be considered equal to objB.
  */
-export function compareOptions(oldOptions: OptionValue[], newOptions: OptionValue[]): boolean {
-    if (oldOptions.length !== newOptions.length) {
-        return false;
+export function isDeepEqual<T = any>(
+    objA: T,
+    objB: T,
+    ignoreAttributes: string[] = [],
+    refs: WeakMap<any, any> = new WeakMap()
+): boolean {
+    objA = unref(objA);
+    objB = unref(objB);
+
+    /* For primitive types */
+    if (isPrimitive(objA)) {
+        return isPrimitive(objB) && Object.is(objA, objB);
+    }
+
+    /* For functions (follow the behavior of _.isEqual and compare functions
+     * by reference). */
+    if (typeof objA === 'function') {
+        return typeof objB === 'function' && objA === objB;
+    }
+
+    /* For circular references */
+    if (refs.has(objA)) {
+        return refs.get(objA) === objB;
     }
+    refs.set(objA, objB);
 
-    return oldOptions.every((oldOption, idx) => {
-        const newOption = newOptions[idx];
-        const keys = Object.keys(oldOption);
-        if (keys.length !== Object.keys(newOption).length) {
+    /* For objects */
+    if (typeof objA === 'object') {
+        if (typeof objB !== 'object') {
             return false;
         }
-        return keys.every((optionKey) => {
-            const key = optionKey as keyof OptionValue;
-            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;
+        /* For arrays */
+        if (Array.isArray(objA)) {
+            return Array.isArray(objB) &&
+                   objA.length === objB.length &&
+                   !objA.some((val, idx) => !isDeepEqual(val, (objB as unknown[])[idx], ignoreAttributes, refs));
+        }
+
+        /* For RegExp */
+        if (objA instanceof RegExp) {
+            return objB instanceof RegExp &&
+                   objA.source === objB.source &&
+                   objA.flags === objB.flags;
+        }
+
+        /* For Date */
+        if (objA instanceof Date) {
+            return objB instanceof Date && objA.getTime() === objB.getTime();
+        }
+
+        /* This should be an object */
+        const aRec = objA as Record<string, any>;
+        const bRec = objB as Record<string, any>;
+        const aKeys = Object.keys(aRec).filter((key) => !ignoreAttributes.includes(key));
+        const bKeys = Object.keys(bRec).filter((key) => !ignoreAttributes.includes(key));
+
+        const differentKeyFound = aKeys.some((key) => {
+            return !bKeys.includes(key) ||
+                   !isDeepEqual(aRec[key], bRec[key], ignoreAttributes, refs);
         });
-    });
+
+        return aKeys.length === bKeys.length && !differentKeyFound;
+    }
+
+    return true;
 }
 
 let displayLog = false;

package/test/Tools/tools.spec.js

@@ -5,6 +5,7 @@ const {
     assignObject,
     convertToRegExp,
     deepClone,
+    isDeepEqual,
 } = toolFile;
 
 tape.test('assignObject()', (st) => {
@@ -402,3 +403,153 @@ tape.test('deepClone()', (st) => {
         tst.end();
     });
 });
+
+tape.test('isDeepEqual()', (st) => {
+    const fn = () => {};
+    const obj = {
+        a: 1,
+        b: 'b',
+        c: false,
+        d: undefined,
+        e: null,
+        f: {},
+        g: fn,
+        spe1: NaN,
+        spe2: Infinity,
+        spe3: '',
+        spe4: [],
+    };
+
+    st.test('should compare simple objects', (tst) => {
+        const objA = obj;
+        const objB = deepClone(obj);
+
+        tst.is(isDeepEqual(objB, objA), true, 'should be equal');
+
+        objB.a = objB.a.toString();
+        tst.is(isDeepEqual(objA, objB), false, 'should not be equal');
+        tst.end();
+    });
+
+    st.test('should compare nested objects', (tst) => {
+        const deep1 = obj;
+        const deep2 = {
+            deep: deep1,
+            added: 'a value',
+        };
+        const objA = {
+            d: deep2,
+        }
+        const objB = deepClone(objA);
+
+        tst.is(isDeepEqual(objA, objB), true, 'should be equal');
+        tst.end();
+    });
+
+    st.test('with arrays', (tst) => {
+        const nestedArray1 = [
+            obj,
+            { a: 'value' },
+            null,
+            undefined,
+            42,
+            'value',
+        ];
+        const nestedArray2 = deepClone(nestedArray1);
+        const arrayA = [
+            {
+                deep: nestedArray1,
+            },
+            nestedArray2,
+            42, 'value', null, undefined, [[]],
+        ];
+        const arrayB = deepClone(arrayA);
+
+        tst.is(isDeepEqual(arrayA, arrayB), true, 'should be equal');
+        tst.end();
+    });
+
+    st.test('with RegExp', (tst) => {
+        const regA1 = /hello?/gi;
+        const regA2 = /.* [aA]+?/;
+
+        const regB1 = deepClone(regA1);
+        const regB2 = {rgx: regA2};
+
+        tst.is(isDeepEqual(regA1, regB1), true, 'should be equal');
+        tst.is(isDeepEqual(regA2, regB2), false, 'should not be equal');
+        tst.end();
+    });
+
+    st.test('with Date', (tst) => {
+        const dateA = new Date('1996-06-27');
+        const dateB = new Date('1996-06-27');
+
+        tst.is(isDeepEqual(dateA, dateB), true, 'should be equal');
+        tst.end();
+    });
+
+    st.test('with functions', (tst) => {
+        const fn1 = fn;
+        const fn2 = () => {};
+
+        tst.is(isDeepEqual(fn1, fn), true, 'should be equal');
+        tst.is(isDeepEqual(fn2, fn), false, 'should not be equal');
+        tst.end();
+    });
+
+    st.test('with primitives', (tst) => {
+        tst.is(isDeepEqual(10%3, 1), true, 'should be equal');
+        tst.is(isDeepEqual('Bingo'[0], 'B'), true, 'should be equal');
+        tst.is(isDeepEqual(!true, false), true, 'should be equal');
+        tst.is(isDeepEqual(obj.e, null), true, 'should be equal');
+        tst.is(isDeepEqual(obj.d, undefined), true, 'should be equal');
+        tst.end();
+    });
+
+    st.test('with circular references', (tst) => {
+        const obj1 = {
+            a: 'a',
+        }
+        const obj2 = {
+            b: 'b',
+        }
+        obj1.child = obj1;
+        obj1.sibling = obj2;
+        obj2.sibling = obj1;
+
+        const objA = [obj1, obj2];
+        const objB = deepClone(objA);
+
+        tst.is(isDeepEqual(objA, objB), true, 'should be equal');
+        tst.end();
+    });
+
+    st.test('can ignore some attributes', (tst) => {
+        const noCompare1 = {
+            ref: 1,
+        };
+        const noCompare2 = new Set(['alpha', 'omega']);
+        const noCompare3 = new Map([[1, 'alpha'], [22, 'omega']]);
+        const deep1 = {
+            a: 'alpha',
+            noCompare: noCompare3,
+        };
+        const objA = {
+            id: 'ref',
+            noCopy: noCompare1,
+            nop: noCompare2,
+            not: 42,
+            deep: deep1,
+        };
+        const objB = deepClone(objA);
+        objB.not = 24;
+
+        const result1 = isDeepEqual(objA, objB, ['noCopy', 'nothing', 'nop', 'not']);
+        const result2 = isDeepEqual(objA, objB, ['noCopy', 'nothing', 'nop']);
+
+        tst.is(result1, true, 'should be equal');
+        tst.is(result2, false, 'should not be equal');
+        tst.end();
+    });
+});

package/types/List.d.ts

@@ -30,7 +30,7 @@ export default class List extends Vue<Props> {
     private onMouseOver;
     onIndexChange(): void;
     onOffsetChange(): void;
-    onFilteredOptionsChange(): void;
+    onFilteredOptionsChange(oldVal: OptionItem[], newVal: OptionItem[]): void;
     onGroupIdChange(): void;
     mounted(): void;
     render(): h.JSX.Element;

package/types/Store.d.ts

@@ -247,7 +247,7 @@ export interface SelecticStoreState {
     };
 }
 export declare type IconFamily = '' | 'selectic' | 'font-awesome-4' | 'font-awesome-5' | 'font-awesome-6' | 'raw' | `prefix:${string}`;
-export declare type IconKey = 'caret-down' | 'caret-up' | 'check' | 'search' | 'spinner' | 'strikethrough' | 'times' | 'question' | 'spin';
+export declare type IconKey = 'caret-down' | 'caret-up' | 'check' | 'dot' | 'search' | 'spinner' | 'strikethrough' | 'times' | 'question' | 'spin';
 export declare type IconValue = `selectic:${IconKey}${'' | ':spin'}` | `raw:${string}` | `current:${IconKey}${'' | ':spin'}` | string;
 export declare type Icons = Record<IconKey, IconValue>;
 export declare type PartialIcons = {

package/types/icons/dot.d.ts

@@ -0,0 +1,6 @@
+import { Vue, h } from 'vtyx';
+export interface Props {
+}
+export default class IconDot extends Vue<Props> {
+    render(): h.JSX.Element;
+}

package/types/tools.d.ts

@@ -1,4 +1,3 @@
-import { OptionValue } from './Store';
 /**
  * Clone the object and its inner properties.
  * @param obj The object to be clone.
@@ -21,10 +20,17 @@ export declare function deepClone<T = any>(origObject: T, ignoreAttributes?: str
 export declare function convertToRegExp(name: string, flag?: string): RegExp;
 /** Does the same as Object.assign but does not replace if value is undefined */
 export declare function assignObject<T>(obj: Partial<T>, ...sourceObjects: Array<Partial<T>>): T;
-/** Compare 2 list of options.
- * @returns true if there are no difference
+/**
+ * Performs a deep comparison between two objects to determine if they
+ * should be considered equal.
+ *
+ * @param objA object to compare to objB.
+ * @param objB object to compare to objA.
+ * @param attributes list of attributes to not compare.
+ * @param refs internal reference to object to avoid cyclic references
+ * @returns true if objA should be considered equal to objB.
  */
-export declare function compareOptions(oldOptions: OptionValue[], newOptions: OptionValue[]): boolean;
+export declare function isDeepEqual<T = any>(objA: T, objB: T, ignoreAttributes?: string[], refs?: WeakMap<any, any>): boolean;
 export declare function debug(fName: string, step: string, ...args: any[]): void;
 export declare namespace debug {
     var enable: (display: boolean) => void;