selectic 3.0.19 → 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

@@ -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),

package/dist/selectic.esm.js

@@ -107,6 +107,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.
@@ -136,6 +163,7 @@ let messages = {
     moreSelectedItem: '+1 other',
     moreSelectedItems: '+%d others',
     unknownPropertyValue: 'property "%s" has incorrect values.',
+    wrongQueryResult: 'Query did not return all results.',
 };
 let closePreviousSelectic;
 /* }}} */
@@ -763,7 +791,7 @@ class SelecticStore {
         });
         return childOptions;
     }
-    buildAllOptions(keepFetched = false) {
+    buildAllOptions(keepFetched = false, stopFetch = false) {
         const allOptions = [];
         let listOptions = [];
         let elementOptions = [];
@@ -834,12 +862,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) {
@@ -971,6 +1013,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);
@@ -986,8 +1029,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) {
@@ -1010,13 +1062,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;
@@ -1216,6 +1268,8 @@ let MainInput = class MainInput extends Vue {
         /* }}} */
         /* {{{ data */
         this.nbHiddenItems = 0;
+        /* reactivity non needed */
+        this.domObserver = null;
     }
     /* }}} */
     /* {{{ computed */
@@ -1261,8 +1315,18 @@ let MainInput = class MainInput extends 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;
@@ -1360,6 +1424,11 @@ let MainInput = class MainInput extends 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;
@@ -1391,6 +1460,33 @@ let MainInput = class MainInput extends 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() {
@@ -1401,6 +1497,9 @@ let MainInput = class MainInput extends Vue {
     updated() {
         this.computeSize();
     }
+    beforeUnmount() {
+        this.closeObserver();
+    }
     /* }}} */
     render() {
         return (h("div", { class: "selectic-container has-feedback", on: {
@@ -1411,14 +1510,14 @@ let MainInput = class MainInput extends Vue {
                         focused: this.store.state.isOpen,
                         disabled: this.store.state.disabled,
                     }] },
-                this.hasValue && !this.store.state.multiple && (h("span", { class: "selectic-item_text", style: this.singleStyle, title: this.singleSelectedItem || '' }, this.singleSelectedItem)),
+                this.hasValue && !this.store.state.multiple && (h("span", { class: "selectic-item_text", style: this.singleStyle, title: this.singleSelectedItemTitle }, this.singleSelectedItemText)),
                 this.displayPlaceholder && (h("span", { class: [
                         'selectic-input__selected-items__placeholder',
                         'selectic-item_text',
                     ], title: this.store.state.placeholder }, this.store.state.placeholder)),
                 this.store.state.multiple && (h("div", { class: "selectic-input__selected-items", ref: "selectedItems" },
                     this.isSelectionReversed && (h("span", { class: "fa fa-strikethrough selectic-input__reverse-icon", title: this.reverseSelectionLabel })),
-                    this.showSelectedOptions.map((item) => (h("div", { class: "single-value", style: item.style, title: item.text, on: {
+                    this.showSelectedOptions.map((item) => (h("div", { class: "single-value", style: item.style, title: item.title || item.text, on: {
                             click: () => this.$emit('item:click', item.id),
                         } },
                         h("span", { class: "selectic-input__selected-items__value" }, item.text),

package/doc/changeText.md

@@ -5,13 +5,13 @@
 There are some texts in selectic. But sometimes it is useful to change them (because you want to translate them or to be more precise for the context usage).
 
 There are 3 ways to changes these texts:
-* Call the static `changetexts()` method. It changes texts for all selectic components.
+* Call the static `changeTexts()` method. It changes texts for all selectic components.
 * Change the `texts` property. It changes texts only for the component.
-* Call the `changetexts()` method on the component. It changes texts only for the component.
+* Call the `changeTexts()` method on the component. It changes texts only for the component.
 
 _Changes done locally are prioritary on changes done globally_.
 
-Changing texts on the component with property or with `changetexts()` are equivalent.
+Changing texts on the component with property or with `changeTexts()` are equivalent.
 
 They accept the same argument: an object which contains keys of sentences.
 
@@ -19,7 +19,7 @@ It is possible to replace only some sentences.
 
 ## Keys
 
-* **noFetchMethod**: This is an error message which is displayed if some options are missing and `fetchcallback` is not defined. _Default value is `'Fetch callback is missing: it is not possible to retrieve data.'`_.
+* **noFetchMethod**: This is an error message which is displayed if some options are missing and `fetchCallback` is not defined. _Default value is `'Fetch callback is missing: it is not possible to retrieve data.'`_.
 
 * **searchPlaceholder**: This is the message in the input placeholder to search for options. _Default value is `'Search'`_.
 
@@ -47,6 +47,8 @@ It is possible to replace only some sentences.
 
 * **moreSelectedItems**: This is a message displayed in a badge if there are more selected options than the size of the component. _Default value is `'+%d others'`_.
 
+* **wrongQueryResult**: This is an error message displayed when result from the `fetchCallback` don't return all expected values. _Default value is `'Query did not return all results.'`_.
+
 
 ## Example
 
@@ -64,11 +66,11 @@ this.$refs.selectic.changeTexts({
 ```
 
 ```html
-<selectic
-    texts: {{
+<Selectic
+    :texts="{
         searchPlaceholder: 'Search for specific options?',
         searching: 'Loading information about this option',
-        noData: 'oups, I forgot to fill this select',
-    }}
+        noData: 'ouch, I forgot to fill this select',
+    }"
 />
 ```

package/doc/css.md

@@ -74,7 +74,7 @@ body {
 * **--selectic-active-item-bg** _(default: `#66afe9`)_: Background color of items where cursor is over or the active by the arrow keys.
 
 * **--selectic-input-height** _(default: `30px`)_: The height of each items.<br>
-**⚠ Currently this value is also hard-coded in javascript, so it can break the scoll height estimation if this value is changed.**
+**:warning: Currently this value is also hard-coded in javascript, so it can break the scroll height estimation if this value is changed.**
 
 ### Messages
 

package/doc/domProperties.md

@@ -10,7 +10,7 @@ It defines a unique identifier (ID) which must be unique in the whole document.
 
 ```html
 <selectic
-    options={['item1', 'item2']}
+    :options="['item1', 'item2']"
     value="item2"
     id="example"
 />
@@ -28,7 +28,7 @@ This is the id of the selected option or an array of id (if `multiple` is set).
 
 ```html
 <selectic
-    options={['item1', 'item2']}
+    :options="['item1', 'item2']"
     value="item2"
 />
 ```
@@ -39,7 +39,7 @@ When disabled is set, `selectic` cannot be open nor changed.
 
 ```html
 <selectic
-    options={['item1', 'item2']}
+    :options="['item1', 'item2']"
     disabled
 />
 ```
@@ -52,7 +52,7 @@ The `value` will be an array.
 
 ```html
 <selectic
-    options={['item1', 'item2', 'item3']}
+    :options="['item1', 'item2', 'item3']"
     multiple
 />
 ```
@@ -65,7 +65,7 @@ It displays the given text if no option is selected.
 
 ```html
 <selectic
-    options={['item1', 'item2', 'item3']}
+    :options="['item1', 'item2', 'item3']"
     placeholder="choose an item"
 />
 ```
@@ -76,7 +76,7 @@ It is added to the main element, and it behaves like `title` attribute of any HT
 
 ```html
 <selectic
-    options={['item1', 'item2', 'item3']}
+    :options="['item1', 'item2', 'item3']"
     title="An information about this component"
 />
 ```
@@ -91,7 +91,7 @@ Note that it will be applied to the inner list element too.
 
 ```html
 <selectic
-    options={['item1', 'item2']}
+    :options="['item1', 'item2']"
     value="item2"
     className="my-custom-class another-class"
 />