selectic 3.0.0 → 3.0.4

package/doc/breakingChanges.md

@@ -0,0 +1,55 @@
+# Breaking changes
+
+[Back to documentation index](main.md)
+
+This document is mainly for users which had projects with oldest Selectic
+version which want to upgrade them to latest version.
+
+**This is not something you have to read to understand and to use Selectic.**
+
+## 1.3.x → 3.x
+
+### Vue2 → Vue3
+
+Selectic 3.x uses Vue3 instead of Vue2. The library should be changed and may
+impact the whole project.
+
+You should read [Vue3 migration strategy](https://v3.vuejs.org/guide/migration/introduction.html)
+to see all implications.
+
+### Events listener
+
+The argument given when events are emitted have been changed.
+
+For example to listen to a `change` event with Selectic 1.3.x you could write something like:
+
+```
+<Selectic @change="(id, isExcluded, instance) => ..."></Selectic>
+```
+
+With Selectic 3.x you should write:
+
+```
+<Selectic @change="(id, information) => ..."></Selectic>
+```
+
+where `information` contains all options related to the event.
+```
+{
+    instance: selecticInstance,
+    eventType: 'change';
+    automatic: false,
+    isExcluded: false,
+}
+```
+An object rather than severals arguments is much better because it is much
+more robust to further changes.
+
+[Read more about the events in the dedicated section](events.md).
+
+### `<option>` slots
+
+It is currently no more possible to use `<option>` slots in Selectic.
+
+We can hope that a solution will be found soon, but currently only the static
+and dynamic mode are available.

package/doc/events.md

@@ -4,48 +4,99 @@
 
 Selectic component emits some events that can be caught by the parent.
 
+* [input](#input)
+* [change](#change)
+* [item:click](#itemclick)
+* [open](#open)
+* [focus](#focus)
+* [close](#close)
+* [blur](#blur)
+
 ## input
 
-An event _input_ is emited each time user select another option.
+An event _input_ is emitted each time user select another option.
 
-This event is emited even if the list doesn't close (like in _multiple_ mode).
+This event is emitted even if the list doesn't close (like in _multiple_ mode).
 
 Any changes on **value** will also trigger this event.
 
-3 arguments are sent with the event:
-* The selection which is the id of the selected option or an array of id in _multiple_ mode.
-* The current state of `selectionIsExcluded` which can be `true` in _dynamic_ and _multiple_ mode if `allowRevert` is set to `true` [(read more about dynamic mode)](dynamic.md).
-* The reference to the selectic instance which has triggered the event.
+2 arguments are sent with the event:
+* The selection which is the id of the selected option or an array of id in
+_multiple_ mode.
+* Information about the event. This is an
+[`EventChangeOptions` object](#eventchangeoptions). It includes the `isExcluded`
+information ([(read more about isExcluded flag)](dynamic.md#exclude-selection)).
 
 ## change
 
-An event _change_ is emited when list is closing and selection has changed.
+An event _change_ is emitted when list is closing and selection has changed.
 
 If changes are done on **value** and selectic is closed, the event will also be emited.
 
-3 arguments are sent with the event (which are the same as in _input_ event):
-* The selection which is the id of the selected option or an array of id in _multiple_ mode.
-* The current state of `selectionIsExcluded` which can be `true` in _dynamic_ and _multiple_ mode if `allowRevert` is set to `true` [(read more about dynamic mode)](dynamic.md).
-* The reference to the selectic instance which has triggered the event.
+2 arguments are sent with the event:
+* The selection which is the id of the selected option or an array of id in
+_multiple_ mode.
+* Information about the event. This is an
+[`EventChangeOptions` object](#eventchangeoptions). It includes the `isExcluded`
+information ([(read more about isExcluded flag)](dynamic.md#exclude-selection)).
 
 ## item:click
 
-An event _item:click_ is emited when user click on a selected item in _multiple_ mode (which are displayed in the main input).
+An event _item:click_ is emitted when user click on a selected item in _multiple_ mode (which are displayed in the main input).
 
 2 arguments are sent with the event:
 * The id of the selected item.
-* The reference to the selectic instance which has triggered the event.
+* Information about the event. This is an [`EventOptions` object](#eventoptions).
 
 ## open
 
-An event _open_ is emited when list is opening.
+An event _open_ is emitted when list is opening.
 
 1 argument is sent with the event:
-* The reference to the selectic instance which has triggered the event.
+* Information about the event. This is an [`EventOptions` object](#eventoptions).
+
+## focus
+
+Is an alias of the [open](#open) event.
 
 ## close
 
-An event _close_ is emited when list is closing.
+An event _close_ is emitted when list is closing.
 
 1 argument is sent with the event:
-* The reference to the selectic instance which has triggered the event.
+* Information about the event. This is an [`EventOptions` object](#eventoptions).
+
+## blur
+
+Is an alias of the [close](#close) event.
+
+# Types
+
+## EventType
+
+This is a string of an event that can be triggered by Selectic.
+
+Its value can be `'input' | 'change' | 'open' | 'close' | 'focus' | 'blur' | 'item:click'`
+
+## EventOptions
+
+This is an object with the following arguments:
+
+* **eventType** (*[`EventType`](#eventoptions)*): The type of the triggered
+event.
+
+* **instance** (*Selectic*): A reference to the Selectic instance which had
+triggered the event.
+
+* **automatic** (*boolean*): It is worth `true` When the event is
+automatically triggered by Selectic (for example like when value is
+automatically selected at start).
+
+## EventChangeOptions
+
+This is an object with the same argument as [`EventOptions`](#eventoptions)
+and the following arguments:
+
+* **isExcluded** (*boolean*): The current state of `selectionIsExcluded` which
+can be `true` in _dynamic_ and _multiple_ mode if `allowRevert` is set to
+`true` [(read more about dynamic mode)](dynamic.md).

package/doc/main.md

@@ -24,6 +24,9 @@
 * change
 * open
 * close
+* focus
+* blur
+* item:click
 
 ## Methods
 
@@ -35,3 +38,7 @@
 * getSelectedItems
 * isEmpty
 * toggleOpen
+
+## Breaking changes
+
+[Migration strategy](./breakingChanges.md)

package/doc/params.md

@@ -10,13 +10,16 @@ This property is an object with several attributes which are listed below.
 
 ## hideFilter
 
-Type: `boolean` | `'auto'`
+Type: `boolean` | `'auto'` | `'open'`
 
 If `hideFilter` is set to `true`, the handler to open the filter panel is hidden and it will not be possible to search for options.
 
 If `hideFilter` is set to `'auto`, the handler to open the filter panel is hidden only if there is less than 10 options (when there is no scroll), and is displayed otherwise. _This is the default value_.
 
-If `hideFilter` is set to `true`, the handler to open the filter panel is always displayed.
+If `hideFilter` is set to `false`, the handler to open the filter panel is always displayed.
+
+If `hideFilter` is set to `'open'`, the handler to open or close the filter panel
+will not be displayed and the filter panel is always open.
 
 ```html
 <selectic

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "selectic",
-    "version": "3.0.0",
+    "version": "3.0.4",
     "description": "Smart Select for VueJS 3.x",
     "main": "dist/selectic.common.js",
     "module": "dist/selectic.esm.js",
@@ -36,12 +36,13 @@
         "test": "npm run build && tape test/**/*.spec.js"
     },
     "dependencies": {
-        "vtyx": "4.0.0"
+        "vtyx": "4.0.3"
     },
     "devDependencies": {
-        "rollup": "^2.56.3",
+        "@babel/types": "^7.16.7",
+        "rollup": "^2.63.0",
         "rollup-plugin-postcss": "^3.1.8",
-        "tape": "^4.13.3",
-        "typescript": "~4.4"
+        "tape": "^4.14.0",
+        "typescript": "~4.5"
     }
 }

package/src/Filter.tsx

@@ -3,6 +3,7 @@
  */
 
 import {Vue, Component, Prop, Watch, h} from 'vtyx';
+import { unref } from 'vue';
 
 import Store from './Store';
 
@@ -42,7 +43,7 @@ export default class FilterPanel extends Vue<Props> {
         const state = store.state;
         const isMultiple = state.multiple;
         const hasItems = state.filteredOptions.length === 0;
-        const canNotSelect = !!state.searchText && !store.hasAllItems.value;
+        const canNotSelect = !!state.searchText && !unref(store.hasAllItems);
 
         return !isMultiple || hasItems || canNotSelect;
     }
@@ -50,7 +51,7 @@ export default class FilterPanel extends Vue<Props> {
     get disableRevert() {
         const store = this.store;
 
-        return !store.state.multiple || !store.hasFetchedAllItems.value;
+        return !store.state.multiple || !unref(store.hasFetchedAllItems);
     }
 
     get enableRevert() {
@@ -99,6 +100,10 @@ export default class FilterPanel extends Vue<Props> {
     }
 
     private togglePanel() {
+        if (this.store.state.keepFilterOpen === true) {
+            this.closed = false;
+            return;
+        }
         this.closed = !this.closed;
     }
 
@@ -121,7 +126,8 @@ export default class FilterPanel extends Vue<Props> {
     /* {{{ Life cycle */
 
     public mounted() {
-        this.closed = !this.store.state.searchText;
+        const state = this.store.state;
+        this.closed = !state.keepFilterOpen && !state.searchText;
         document.addEventListener('keypress', this.onKeyPressed);
 
         this.getFocus();
@@ -134,6 +140,10 @@ export default class FilterPanel extends Vue<Props> {
     /* }}} */
 
     public render() {
+        const store = this.store;
+        const state = store.state;
+        const labels = store.data.labels;
+
         return (
             <div class="filter-panel">
                 <div
@@ -147,7 +157,7 @@ export default class FilterPanel extends Vue<Props> {
                             type="text"
                             class="form-control filter-input"
                             placeholder={this.searchPlaceholder}
-                            value={this.store.state.searchText}
+                            value={state.searchText}
                             on={{
                                 'input.stop.prevent': this.onInput,
                             }}
@@ -157,7 +167,7 @@ export default class FilterPanel extends Vue<Props> {
                                      form-control-feedback"
                         ></span>
                     </div>
-                    {this.store.state.multiple && (
+                    {state.multiple && (
                         <div class="toggle-selectic">
                             <label
                                 class={['control-label', {
@@ -166,13 +176,13 @@ export default class FilterPanel extends Vue<Props> {
                             >
                                 <input
                                     type="checkbox"
-                                    checked={this.store.state.status.areAllSelected}
+                                    checked={state.status.areAllSelected}
                                     disabled={this.disableSelectAll}
                                     on={{
                                         change: this.onSelectAll,
                                     }}
                                 />
-                                {this.store.data.labels.selectAll}
+                                {labels.selectAll}
                             </label>
                         </div>
                     )}
@@ -191,11 +201,13 @@ export default class FilterPanel extends Vue<Props> {
                                         change: this.onExclude,
                                     }}
                                 />
-                                {this.store.data.labels.excludeResult}
+                                {labels.excludeResult}
                             </label>
                         </div>
                     )}
                 </div>
+
+                {!state.keepFilterOpen && (
                 <div class="curtain-handler"
                      on={{
                          'click.prevent.stop': this.togglePanel,
@@ -208,6 +220,7 @@ export default class FilterPanel extends Vue<Props> {
                         'fa-caret-up': !this.closed,
                     }}></span>
                 </div>
+                )}
            </div>
         );
     }

package/src/List.tsx

@@ -4,6 +4,7 @@
  */
 
 import {Vue, Component, Prop, Watch, h} from 'vtyx';
+import { unref } from 'vue';
 
 import Store, {
     OptionItem,
@@ -49,7 +50,7 @@ export default class List extends Vue<Props> {
 
     get itemsMargin(): number {
         /* XXX: I don't really know when we should use value or not... */
-        return this.store.marginSize.value ?? this.store.marginSize;
+        return unref(this.store.marginSize);
     }
 
     get shortOptions(): OptionItem[] {