selectic 3.0.19 → 3.0.21

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"
 />

package/doc/dynamic.md

@@ -2,9 +2,9 @@
 
 [Back to documentation index](main.md)
 
-The dynamic mode allows to load options dynamically (from a server or from anything else asynchrously).
+The dynamic mode allows to load options dynamically (from a server or from anything else asynchronously).
 The list of options will be built when selectic is open. It fetches the first options and fetch the following ones when it is needed.
-It keeps result in cache to avoid refetching when selectic is open another time.
+It keeps result in cache to avoid re-fetching when selectic is open another time.
 
 ## Basic usage
 
@@ -75,11 +75,11 @@ function buildItem(id) {
 
 ```html
 <selectic
-    value={5}
-    params={{
+    :value="5"
+    :params="{
         fetchCallback: listItems,
         getItemsCallback: getItems,
-    }}
+    }"
 />
 ```
 
@@ -115,11 +115,11 @@ If you don't want to activate this feature, then you could set the `allowRevert`
 ```html
 <selectic
     multiple
-    params={{
+    :params="{
         fetchCallback: fetchCallback,
         getItemsCallback: getItemsCallback,
         allowRevert: false,
-    }}
+    }"
 />
 ```
 
@@ -130,17 +130,17 @@ The list of all groups should be provided in the `groups` property and child opt
 
 ```html
 <selectic
-    groups={[{
+    :groups="[{
         id: 'group 1',
         text: 'This is the first group',
     }, {
         id: 'group 2',
         text: 'This is the second group',
-    }]}
-    params={{
+    }]"
+    :params="{
         fetchCallback: fetchCallback,
         getItemsCallback: getItemsCallback,
-    }}
+    }"
 />
 ```
 

package/doc/extendedProperties.md

@@ -16,7 +16,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"
 />
 ```
@@ -37,7 +37,7 @@ This value can be changed automatically by selectic if all options are fetched.
 
 ```html
 <selectic
-    options={['item1', 'item2']}
+    :options="['item1', 'item2']"
     value="item2"
     selectionIsExcluded
 />
@@ -51,7 +51,7 @@ Default: `[]`
 
 This property is to list all options available ([read how to build a list](list.md)).
 
-This property can be ommited in dynamic mode ([read how to build dynamic list](dynamic.md)).
+This property can be omitted in dynamic mode ([read how to build dynamic list](dynamic.md)).
 
 ## groups
 
@@ -65,13 +65,13 @@ It is required to fill this property only in _dynamic_ mode in order to know to
 
 ```html
 <selectic
-    groups={[{
+    :groups="[{
         id: 'g1',
         text: 'The first group',
     }, {
         id: 'g2',
         text: 'The second group',
-    }]}
+    }]"
 />
 ```
 
@@ -91,12 +91,12 @@ It changes the texts only for this component. To change texts for all selectic c
 
 ```html
 <selectic
-    options={['Goldfish', 'Salmon', 'Trout', 'Tuna']}
+    :options="['Goldfish', 'Salmon', 'Trout', 'Tuna']"
     value="Tuna"
-    texts={{
+    :texts="{
         searchPlaceholder: 'Search for fish',
         noResult: 'No fish matched your search',
-    }}
+    }"
 />
 ```
 
@@ -114,9 +114,9 @@ This attribute has effects only in ([dynamic mode](dynamic.md)).
 
 ```html
 <selectic
-    params={{
+    :params="{
         fetchCallback: fetchData,
-    }}
+    }"
     noCache
 />
 ```
@@ -134,14 +134,14 @@ This allows to force the selectic to a given state. The state may be changed due
 
 It also allows to start in an open state.
 
-This attribute purpose is to change the state programatically. To keep state unchanged there are several other attributes ([disabled](extendedProperties.md#disabled), [keepOpenWithOtherSelectic](params.md#keepOpenWithOtherSelectic), ...).
+This attribute purpose is to change the state programmatically. To keep state unchanged there are several other attributes ([disabled](extendedProperties.md#disabled), [keepOpenWithOtherSelectic](params.md#keepOpenWithOtherSelectic), ...).
 The current state can be updated with the [open](events.md#open) and [close](events.md#close) events.
 
 It is also possible to change the "open" state with the method [toggleOpen](methods.md#toggleOpen).
 
 ```html
 <selectic
-    options={optionList}
+    :options="optionList"
     open
 />
 ```

package/doc/list.md

@@ -15,9 +15,11 @@ const items = ['item1', 'second Item'];
 
 ```html
 <selectic
-    options={items}
+    :options="items"
 />
 ```
+![example with simple list](./images/example1.png)
+
 ## object[]
 
 It is possible to define the `option` more precisely.
@@ -36,8 +38,8 @@ It is possible to define the `option` more precisely.
 
 ```javascript
 const items = [{
-    id; 1,
-    text: 'item1',
+    id: 1,
+    text: 'a value',
 }, {
     id: 2,
     text: 'not available yet',
@@ -45,11 +47,13 @@ const items = [{
 }, {
     id: 3,
     text: 'the red option',
-    style: 'background-color: red',
-}];,
-{
+    style: 'color: red',
+}, {
+    id: 4,
+    text: 'another value',
+}, {
     id: 'group1',
-    text: 'some amount',
+    text: 'a "group" for some amounts',
     options: [{
         id: 'amount1',
         text: '1',
@@ -60,16 +64,20 @@ const items = [{
         id: 'amount3',
         text: '100',
     }],
-};
+}];
 ```
 
 ```html
 <selectic
-    options={items}
+    :options="items"
 />
 ```
+![example with object list](./images/example2.png)
 
-# Inner elements
+# Inner elements _(deprecated)_
+
+**:warning: This part has been deprecated with Selectic 3 +.**
+_The main reason is that VueJS 3 does not allowed to read slots as easily as in VueJS 2._
 
 Another way to create a list is to write elements as child of Selectic.
 
@@ -84,22 +92,25 @@ Element properties:
 * **disabled**: will set the **disabled** attribute.
 * **class**: will set the **className** attribute.
 * **style**: will set the **style** attribute.
-* any **data-**: will set the **data** atribute.
+* any **data-**: will set the **data** attribute.
 * Inner text will set the **text** attribute.
 * **label** _(only for optgroup)_: will set the **text** attribute.
 
 ```html
 <selectic>
     <option value="1">
-        item1
+        a value
     </option>
     <option value="2" disabled>
         not available yet
     </option>
-    <option value="3" style="background-color: red">
+    <option value="3" style="color: red">
         the red option
     </option>
-    <optgroup id="group1" label="some amount">
+    <option value="4">
+        another value
+    </option>
+    <optgroup id="group1" label="a &quotes;group&quotes; for some amounts">
         <option value="amount1">
             1
         </option>
@@ -112,8 +123,10 @@ Element properties:
     </optgroup>
 </selectic>
 ```
+![example with slot elements](./images/example2.png)
+
 If options are set both by options attribute and by inner elements,
 the inner elements are added first and then the one described in
 options attribute.
 
-To change this behavior wath the **optionBehavior** property of the [params](params.md) attribute.
+To change this behavior watch the **optionBehavior** property of the [params](params.md) attribute.

package/doc/methods.md

@@ -10,7 +10,7 @@ All these methods should be called directly on the component instance.
 
 `clearCache(forceReset: boolean = false) => void`
 
-Whole cache in selectic are cleared, and so all options are refetched.
+Whole cache in selectic are cleared, and so all options are re-fetched.
 This method is mainly useful in _dynamic_ mode when data should be completely changed (due to some context change).
 
 If `forceReset` is set to `true`, the current selection is also cleared. Otherwise it keeps previous selection.
@@ -54,4 +54,4 @@ This methods force the "open" state of the component.
 if `open` is not set, it toggles the current state.
 
 It returns the final state.
-Keep in mind that the state can be changed immediatley afterward by automatic settings (like [autoDisabled](params.md#autoDisabled)).
+Keep in mind that the state can be changed immediately afterward by automatic settings (like [autoDisabled](params.md#autoDisabled)).

package/doc/params.md

@@ -23,10 +23,10 @@ will not be displayed and the filter panel is always open.
 
 ```html
 <selectic
-    params={{
+    :params="{
         hideFilter: false,
-    }}
-    options={optionList}
+    }"
+    :options="optionList"
 />
 ```
 
@@ -40,10 +40,10 @@ If `allowClearSelection` is set to `false`, it won't be possible to have nothing
 
 ```html
 <selectic
-    params={{
+    :params="{
         allowClearSelection: true,
-    }}
-    options={optionList}
+    }"
+    :options="optionList"
 />
 ```
 
@@ -59,10 +59,10 @@ By default, it is set to `true` if `multiple` is not set, to `false` otherwise.
 
 ```html
 <selectic
-    params={{
+    :params="{
         autoSelect: false,
-    }}
-    options={optionList}
+    }"
+    :options="optionList"
 />
 ```
 
@@ -72,16 +72,16 @@ Type: `boolean`
 
 If `autoDisabled` is set to `true`, it will disable automatically the component if the list of options is empty or if there is only one which must be selected (`allowClearSelection` is not set).
 
-It doesn't apply for dynamic list ([see dymanic configuration](dynamic.md)).
+It doesn't apply for dynamic list ([see dynamic configuration](dynamic.md)).
 
 By default, it is set to `true`.
 
 ```html
 <selectic
-    params={{
+    :params="{
         autoDisabled: true,
-    }}
-    options={optionList}
+    }"
+    :options="optionList"
 />
 ```
 
@@ -89,16 +89,16 @@ By default, it is set to `true`.
 
 Type: `boolean`
 
-If `stricValue` is set to `true`, it will consider value as `undefined` if its value is not an id of `options`.
+If `strictValue` is set to `true`, it will consider value as `undefined` if its value is not an id of `options`.
 
 By default, it is set to `false`.
 
 ```html
 <selectic
-    params={{
+    :params="{
         strictValue: true,
-    }}
-    options={optionList}
+    }"
+    :options="optionList"
 />
 ```
 
@@ -106,7 +106,7 @@ By default, it is set to `false`.
 
 Type: `'collapsed'` | `'multiline'`
 
-`selectOverflow` is to describe how selected options should be displayed when theyr are not enough space to display them all (in _multiple_ mode).
+`selectOverflow` is to describe how selected options should be displayed when they are not enough space to display them all (in _multiple_ mode).
 
 Currently there are two supported behavior:
 * `'collapsed'`: the size of selectic input is not changed. If there is not enough space to display all selected options then it displays the possible ones then displays a _"+x others"_ in a badge (_x_ is the number of not displayed options). It is possible to watch these options with `title` or by opening selectic and see which options are selected. _This is the default value_.
@@ -114,10 +114,10 @@ Currently there are two supported behavior:
 
 ```html
 <selectic
-    params={{
+    :params="{
         selectionOverflow: 'multiple',
-    }}
-    options={optionList}
+    }"
+    :options="optionList"
 />
 ```
 
@@ -131,10 +131,10 @@ By default, if there is no selected options, the result given by `getValue()` re
 
 ```html
 <selectic
-    params={{
+    :params="{
         emptyValue: '',
-    }}
-    options={optionList}
+    }"
+    :options="optionList"
 />
 ```
 
@@ -148,7 +148,7 @@ As argument, it receives an option item and should also return an option item.
 
 ```html
 <selectic
-    params={{
+    :params="{
         formatOption: (option) => {
             if (option.id === 2) {
                 return Object.assign({}, option, {
@@ -158,8 +158,8 @@ As argument, it receives an option item and should also return an option item.
             }
             return option;
         },
-    }}
-    options={optionList}
+    }"
+    :options="optionList"
 />
 ```
 
@@ -173,14 +173,14 @@ As argument, it receives an option item and should also return an option item.
 
 ```html
 <selectic
-    params={{
+    :params="{
         formatSelection: (option) => {
             return Object.assign({}, option, {
                 style: 'background-color: rgb(250, 250, 20 * option.id)',
             });
         },
-    }}
-    options={optionList}
+    }"
+    :options="optionList"
 />
 ```
 
@@ -196,10 +196,10 @@ It should return a promise which resolves with an object which contains the tota
 
 ```html
 <selectic
-    params={{
+    :params="{
         fetchCallback: (search, offset, limit) => fetch(`list?search=${search}&offset=${offset}&limit=${limit}`),
-    }}
-    options={optionList}
+    }"
+    :options="optionList"
 />
 ```
 
@@ -216,12 +216,12 @@ It should return a promise which resolves with an array of options corresponding
 
 ```html
 <selectic
-    params={{
+    :params="{
         getItemsCallback: (ids) => Promise.all(
             ids.map(id => fetch(`getItem?id=${id}`))
         ),
-    }}
-    options={optionList}
+    }"
+    :options="optionList"
 />
 ```
 
@@ -241,10 +241,10 @@ _`pageSize` default value is `100`._
 
 ```html
 <selectic
-    params={{
+    :params="{
         pageSize: 500,
-    }}
-    options={optionList}
+    }"
+    :options="optionList"
 />
 ```
 
@@ -271,10 +271,10 @@ Read [the extended properties documentation](extendedProperties.md) for more inf
 
 ```html
 <selectic
-    params={{
+    :params="{
         allowRevert: true,
-    }}
-    options={optionList}
+    }"
+    :options="optionList"
 />
 ```
 
@@ -296,10 +296,10 @@ This option allows you to change the behavior.
 
 ```html
 <selectic
-    params={{
+    :params="{
         forceSelectAll: 'auto',
-    }}
-    options={optionList}
+    }"
+    :options="optionList"
 />
 ```
 
@@ -312,14 +312,14 @@ Default value: `'auto'`
 
 `listPosition` defines where the list should be displayed (at top or at bottom of the select button).
 
-With the `'auto'` value it displays the list at bottom, but if there is not enought space (the select is at bottom of the page). It displays the list at top instead.
+With the `'auto'` value it displays the list at bottom, but if there is not enough space (the select is at bottom of the page). It displays the list at top instead.
 
 ```html
 <selectic
-    params={{
+    :params={
         listPosition: 'top',
-    }}
-    options={optionList}
+    }"
+    :options="optionList"
 />
 ```
 
@@ -356,10 +356,10 @@ Display only one source (the first which is not empty).
 
 ```html
 <selectic
-    params={{
+    :params="{
         optionBehavior: 'sort-DOE',
-    }}
-    options={optionList}
+    }"
+    :options="optionList"
 />
 ```
 
@@ -369,16 +369,16 @@ Type: `boolean`
 
 Default value: `false`
 
-By default, only one selectic component can be open at the same time. So if another Selectic component is open (mainly programmtically) then any previously open component is closed.
+By default, only one selectic component can be open at the same time. So if another Selectic component is open (mainly programmatically) then any previously open component is closed.
 If `keepOpenWithOtherSelectic` is set to `true`, this component stays open when another Selectic component opens.
 
 Note: This attribute does not prevent closing when user clicks outside the component.
 
 ```html
 <selectic
-    params={{
+    :params="{
         keepOpenWithOtherSelectic: true,
-    }}
-    options={optionList}
+    }"
+    :options="optionList"
 />
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "selectic",
-    "version": "3.0.19",
+    "version": "3.0.21",
     "description": "Smart Select for VueJS 3.x",
     "main": "dist/selectic.common.js",
     "module": "dist/selectic.esm.js",