selectic 3.0.21 → 3.1.0

package/src/css/selectic.css

@@ -259,6 +259,10 @@
     cursor: default;
 }
 
+.selectic-item__is-group.selectable {
+    cursor: pointer;
+}
+
 .selectic-item.selected {
     color: var(--selectic-selected-item-color);
 }
@@ -414,4 +418,24 @@
     flex-wrap: wrap;
 }
 
+/* {{{ icons */
+
+@keyframes selectic-animation-spin {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(359deg);
+    }
+}
+
+.selectic__icon {
+    height: 1em;
+    fill: currentColor;
+}
+
+.selectic-spin {
+    animation: selectic-animation-spin 2s infinite linear;
+}
+
 /* }}} */

package/src/icons/caret-down.tsx

@@ -0,0 +1,21 @@
+/* This icon is from <https://github.com/Templarian/MaterialDesign>,
+ * distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license
+ */
+
+import {Vue, Component, h} from 'vtyx';
+
+export interface Props {}
+
+@Component
+export default class IconCaretDown extends Vue<Props> {
+    public render() {
+        return (
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+            >
+                <path d="M7,10L12,15L17,10H7Z" />
+            </svg>
+        );
+    }
+}

package/src/icons/caret-up.tsx

@@ -0,0 +1,21 @@
+/* This icon is from <https://github.com/Templarian/MaterialDesign>,
+ * distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license
+ */
+
+import {Vue, Component, h} from 'vtyx';
+
+export interface Props {}
+
+@Component
+export default class IconCaretUp extends Vue<Props> {
+    public render() {
+        return (
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+            >
+                <path d="M7,15L12,10L17,15H7Z" />
+            </svg>
+        );
+    }
+}

package/src/icons/check.tsx

@@ -0,0 +1,23 @@
+/* This icon is from <https://github.com/Templarian/MaterialDesign>,
+ * distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license
+ */
+
+import {Vue, Component, h} from 'vtyx';
+
+export interface Props {}
+
+@Component
+export default class IconCheck extends Vue<Props> {
+    public render() {
+        return (
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+            >
+                <path
+                    d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"
+                />
+            </svg>
+        );
+    }
+}

package/src/icons/question.tsx

@@ -0,0 +1,21 @@
+/* This icon is from <https://github.com/Templarian/MaterialDesign>,
+ * distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license
+ */
+
+import {Vue, Component, h} from 'vtyx';
+
+export interface Props {}
+
+@Component
+export default class IconQuestion extends Vue<Props> {
+    public render() {
+        return (
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+            >
+                <path d="M10,19H13V22H10V19M12,2C17.35,2.22 19.68,7.62 16.5,11.67C15.67,12.67 14.33,13.33 13.67,14.17C13,15 13,16 13,17H10C10,15.33 10,13.92 10.67,12.92C11.33,11.92 12.67,11.33 13.5,10.67C15.92,8.43 15.32,5.26 12,5A3,3 0 0,0 9,8H6A6,6 0 0,1 12,2Z" />
+            </svg>
+        );
+    }
+}

package/src/icons/search.tsx

@@ -0,0 +1,21 @@
+/* This icon is from <https://github.com/Templarian/MaterialDesign>,
+ * distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license
+ */
+
+import {Vue, Component, h} from 'vtyx';
+
+export interface Props {}
+
+@Component
+export default class IconSearch extends Vue<Props> {
+    public render() {
+        return (
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+            >
+                <path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
+            </svg>
+        );
+    }
+}

package/src/icons/spinner.tsx

@@ -0,0 +1,21 @@
+/* This icon is from <https://github.com/Templarian/MaterialDesign>,
+ * distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license
+ */
+
+import {Vue, Component, h} from 'vtyx';
+
+export interface Props {}
+
+@Component
+export default class IconSpinner extends Vue<Props> {
+    public render() {
+        return (
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+            >
+                <path d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
+            </svg>
+        );
+    }
+}

package/src/icons/strikeThrough.tsx

@@ -0,0 +1,21 @@
+/* This icon is from <https://github.com/Templarian/MaterialDesign>,
+ * distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license
+ */
+
+import {Vue, Component, h} from 'vtyx';
+
+export interface Props {}
+
+@Component
+export default class IconStrikeThrough extends Vue<Props> {
+    public render() {
+        return (
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+            >
+                <path d="M7.2 9.8C6 7.5 7.7 4.8 10.1 4.3C13.2 3.3 17.7 4.7 17.6 8.5H14.6C14.6 8.2 14.5 7.9 14.5 7.7C14.3 7.1 13.9 6.8 13.3 6.6C12.5 6.3 11.2 6.4 10.5 6.9C9 8.2 10.4 9.5 12 10H7.4C7.3 9.9 7.3 9.8 7.2 9.8M21 13V11H3V13H12.6C12.8 13.1 13 13.1 13.2 13.2C13.8 13.5 14.3 13.7 14.5 14.3C14.6 14.7 14.7 15.2 14.5 15.6C14.3 16.1 13.9 16.3 13.4 16.5C11.6 17 9.4 16.3 9.5 14.1H6.5C6.4 16.7 8.6 18.5 11 18.8C14.8 19.6 19.3 17.2 17.3 12.9L21 13Z" />
+            </svg>
+        );
+    }
+}

package/src/icons/times.tsx

@@ -0,0 +1,21 @@
+/* This icon is from <https://github.com/Templarian/MaterialDesign>,
+ * distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license
+ */
+
+import {Vue, Component, h} from 'vtyx';
+
+export interface Props {}
+
+@Component
+export default class IconTimes extends Vue<Props> {
+    public render() {
+        return (
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+            >
+                <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
+            </svg>
+        );
+    }
+}

package/src/index.tsx

@@ -26,6 +26,7 @@ import { deepClone } from './tools';
 
 import Store, {
     changeTexts as storeChangeTexts,
+    changeIcons as storeChangeIcons,
     OptionProp,
     OptionId,
     StrictOptionId,
@@ -41,6 +42,8 @@ import Store, {
     ListPosition,
     HideFilter,
     SelectAllOption,
+    PartialIcons,
+    IconFamily,
 } from './Store';
 import MainInput from './MainInput';
 import ExtendedList from './ExtendedList';
@@ -76,22 +79,22 @@ export interface EventChangeOptions extends EventOptions {
 }
 
 export interface ParamProps {
-    /* Method to call to fetch extra data */
+    /** Method to call to fetch extra data */
     fetchCallback?: FetchCallback;
 
-    /* Method to call to get specific items */
+    /** Method to call to get specific items */
     getItemsCallback?: GetCallback;
 
-    /* Number of elements to fetch.
+    /** Number of elements to fetch.
      * When scrolled too fast, a greater number of elements
      * are going to be requested.
      */
     pageSize?: number;
 
-    /* Hide the search control */
+    /** Hide the search control */
     hideFilter?: HideFilter;
 
-    /* Allow to reverse selection.
+    /** Allow to reverse selection.
      * If true, parent should support the selectionIsExcluded property.
      * If false, the action is never available.
      * If undefined, the action is available only when it is not needed to
@@ -99,22 +102,22 @@ export interface ParamProps {
      */
     allowRevert?: boolean;
 
-    /* If true, the "select All" is still available even if all data are not fetched yet. */
+    /** If true, the "select All" is still available even if all data are not fetched yet. */
     forceSelectAll?: SelectAllOption;
 
-    /* Allow user to clear the current selection */
+    /** Allow user to clear the current selection */
     allowClearSelection?: boolean;
 
-    /* If false, avoid selecting the first available option. */
+    /** If false, avoid selecting the first available option. */
     autoSelect?: boolean;
 
-    /* Disable the select if no or only one option is given and must be selected. */
+    /** Disable the select if no or only one option is given and must be selected. */
     autoDisabled?: boolean;
 
-    /* If true, value can be only in existing options. */
+    /** If true, value can be only in existing options. */
     strictValue?: boolean;
 
-    /* Define how to behave when selected items are too large for container.
+    /** Define how to behave when selected items are too large for container.
      *     collapsed (default): Items are reduced in width and an ellipsis
      *                          is displayed in their name.
      *     multiline: The container extends in height in order to display all
@@ -122,35 +125,39 @@ export interface ParamProps {
      */
     selectionOverflow?: SelectionOverflow;
 
-    /* In single mode, if no selection, this value is returned (default=null). */
+    /** In single mode, if no selection, this value is returned (default=null). */
     emptyValue?: SelectedValue;
 
-    /* Called when item is displayed in the list. */
+    /** Called when item is displayed in the list. */
     formatOption?: FormatCallback;
 
-    /* Called when item is displayed in the selection area. */
+    /** Called when item is displayed in the selection area. */
     formatSelection?: FormatCallback;
 
-    /* Define where the list should be displayed.
+    /** Define where the list should be displayed.
      * With 'auto' it is displayed by default at bottom, but it can be at
      * top if there is not enough space below. */
     listPosition?: ListPosition;
 
-    /* Described behavior when options from several sources are set (static, dynamic, slots)
+    /** Described behavior when options from several sources are set (static, dynamic, slots)
      * It describe what to do (sort or force)
      * and the order (O → static options, D → dynamic options, E → slot elements)
      * Example: "sort-ODE"
      */
     optionBehavior?: string;
 
-    /* Keep this component open if another Selectic component opens */
+    /** Keep this component open if another Selectic component opens */
     keepOpenWithOtherSelectic?: boolean;
+
+    /** Avoid click on group name to select all items in this group. */
+    disableGroupSelection?: boolean;
 }
 
 export type OnCallback = (event: string, ...args: any[]) => void;
 export type GetMethodsCallback = (methods: {
     clearCache: Selectic['clearCache'];
     changeTexts: Selectic['changeTexts'];
+    changeIcons: Selectic['changeIcons'];
     getValue: Selectic['getValue'];
     getSelectedItems: Selectic['getSelectedItems'];
     isEmpty: Selectic['isEmpty'];
@@ -159,47 +166,53 @@ export type GetMethodsCallback = (methods: {
 
 
 export interface Props {
-    /* Selectic's initial value */
+    /** Selectic's initial value */
     value?: SelectedValue;
 
-    /* If true, the effective selection is the opposite */
+    /** If true, the effective selection is the opposite */
     selectionIsExcluded?: boolean;
 
-    /* List of options to display */
+    /** List of options to display */
     options?: OptionProp[];
 
-    /* Define groups of items (similar to optGroup) */
+    /** Define groups of items (similar to optGroup) */
     groups?: GroupValue[];
 
-    /* Equivalent of <select>'s "multiple" attribute */
+    /** Equivalent of <select>'s "multiple" attribute */
     multiple?: boolean;
 
-    /* Equivalent of <select>'s "disabled" attribute */
+    /** Equivalent of <select>'s "disabled" attribute */
     disabled?: boolean;
 
-    /* Equivalent of <input>'s "placeholder" attribute */
+    /** Equivalent of <input>'s "placeholder" attribute */
     placeholder?: string;
 
-    /* id of the HTML element */
+    /** id of the HTML element */
     id?: string;
 
-    /* CSS class of the HTML element */
+    /** CSS class of the HTML element */
     className?: string;
 
-    /* title on the HTML element */
+    /** title on the HTML element */
     title?: string;
 
-    /* Replace the default texts used in Selectic */
+    /** Replace the default texts used in Selectic */
     texts?: PartialMessages;
 
-    /* If enabled, it resets the dynamic cache when selectic opens */
+    /** Replace the default icons used in Selectic */
+    icons?: PartialIcons;
+
+    /** Replace the default icon family used in Selectic */
+    iconFamily?: IconFamily;
+
+    /** If enabled, it resets the dynamic cache when selectic opens */
     noCache?: Boolean;
 
-    /* If true, the component opens (at start or if it is closed).
-     * If false, the components closes (if it is opened). */
+    /** If true, the component opens (at start or if it is closed).
+     *  If false, the components closes (if it is opened). */
     open?: Boolean;
 
-    /* Props which is not expected to change during the life time of the
+    /** Props which is not expected to change during the life time of the
      * component.
      * These parameters modify the component behavior but are not official
      * attributes of select.
@@ -222,6 +235,10 @@ export function changeTexts(texts: PartialMessages) {
     storeChangeTexts(texts);
 }
 
+export function changeIcons(icons: PartialIcons, iconFamily?: IconFamily) {
+    storeChangeIcons(icons, iconFamily);
+}
+
 @Component
 export default class Selectic extends Vue<Props> {
     public $refs: {
@@ -264,6 +281,12 @@ export default class Selectic extends Vue<Props> {
     @Prop()
     public texts?: PartialMessages;
 
+    @Prop()
+    public icons?: PartialIcons;
+
+    @Prop()
+    public iconFamily?: IconFamily;
+
     @Prop({ default: false })
     public noCache: boolean;
 
@@ -391,17 +414,22 @@ export default class Selectic extends Vue<Props> {
     /* {{{ methods */
     /* {{{ public methods */
 
-    /* Reset the inner cache (mainly for dynamic mode if context has changed) */
+    /** Reset the inner cache (mainly for dynamic mode if context has changed) */
     public clearCache(forceReset = false) {
         this.store.clearCache(forceReset);
     }
 
-    /* Allow to change all text of the component */
+    /** Allow to change all text of the component */
     public changeTexts(texts: PartialMessages) {
         this.store.changeTexts(texts);
     }
 
-    /* Return the current selection */
+    /** Allow to change all icons of the component */
+    public changeIcons(icons: PartialIcons, iconFamily?: IconFamily) {
+        this.store.changeIcons(icons, iconFamily);
+    }
+
+    /** Return the current selection */
     public getValue(): SelectedValue {
         const value = this.store.state.internalValue;
         if (value === null && typeof this.params.emptyValue !== 'undefined') {
@@ -410,7 +438,7 @@ export default class Selectic extends Vue<Props> {
         return value;
     }
 
-    /* Return the current selection in Item format */
+    /** Return the current selection in Item format */
     public getSelectedItems(): OptionValue | OptionValue[] {
         const values = this.store.state.internalValue;
 
@@ -428,7 +456,7 @@ export default class Selectic extends Vue<Props> {
         return this.store.getItem(values);
     }
 
-    /* Check if there are Options available in the components */
+    /** Check if there are Options available in the components */
     public isEmpty() {
         const total = this.store.state.totalAllOptions;
 
@@ -577,6 +605,15 @@ export default class Selectic extends Vue<Props> {
         }
     }
 
+    @Watch('iconFamily')
+    @Watch('icons', { deep: true })
+    public onIconsChange() {
+        const icons = this.icons;
+        const iconFamily = this.iconFamily;
+
+        this.changeIcons(icons ?? {}, iconFamily);
+    }
+
     @Watch('disabled')
     public onDisabledChange() {
         this.store.props.disabled = this.disabled;
@@ -791,6 +828,8 @@ export default class Selectic extends Vue<Props> {
             selectionIsExcluded: this.selectionIsExcluded,
             disabled: this.disabled,
             texts: this.texts,
+            icons: this.icons,
+            iconFamily: this.iconFamily,
             groups: deepClone(this.groups),
             keepOpenWithOtherSelectic: !!this.params.keepOpenWithOtherSelectic,
             params: {
@@ -813,6 +852,7 @@ export default class Selectic extends Vue<Props> {
                 listPosition: this.params.listPosition || 'auto',
                 optionBehavior: this.params.optionBehavior, /* it can be undefined */
                 isOpen: (this.open ?? false) !== false,
+                disableGroupSelection: this.params.disableGroupSelection,
             },
             fetchCallback: this.params.fetchCallback,
             getItemsCallback: this.params.getItemsCallback,
@@ -822,6 +862,7 @@ export default class Selectic extends Vue<Props> {
             this._getMethods({
                 clearCache: this.clearCache.bind(this),
                 changeTexts: this.changeTexts.bind(this),
+                changeIcons: this.changeIcons.bind(this),
                 getValue: this.getValue.bind(this),
                 getSelectedItems: this.getSelectedItems.bind(this),
                 isEmpty: this.isEmpty.bind(this),

package/test/Store/Store_computed.spec.js

@@ -0,0 +1,84 @@
+const tape = require('tape');
+const {
+    getOptions,
+    buildFetchCb,
+} = require('../helper.js');
+const _ = require('../tools.js');
+const StoreFile = require('../dist/Store.js');
+const Store = StoreFile.default;
+
+tape.test('computed', (subT) => {
+    subT.test('"allowGroupSelection"', (sTest) => {
+        sTest.test('should be allowed for classic case', async (t) => {
+            const store = new Store({
+                options: getOptions(20),
+                params: {
+                    multiple: true,
+                },
+            });
+
+            await _.nextVueTick(store);
+
+            t.is(store.allowGroupSelection.value, true);
+
+            t.end();
+        });
+
+        sTest.test('should not be allowed with dynamic mode', async (t) => {
+            /* {{{ preparation */
+
+            const store = new Store({
+                groups: [{
+                    id: 'g1',
+                    name: 'Group 1',
+                }],
+                fetchCallback: buildFetchCb({ total: 200, group: [{
+                    name: 'g1',
+                    offset: 0,
+                }] }),
+                params: {
+                    multiple: true,
+                },
+            });
+
+            /* }}} */
+
+            await _.nextVueTick(store);
+
+            t.is(store.allowGroupSelection.value, false);
+
+            t.end();
+        });
+
+        sTest.test('should not be allowed when not in multiple', async (t) => {
+            const store = new Store({
+                options: getOptions(20),
+                params: {
+                    multiple: false,
+                },
+            });
+
+            await _.nextVueTick(store);
+
+            t.is(store.allowGroupSelection.value, false);
+
+            t.end();
+        });
+
+        sTest.test('should not be allowed with option disableGroupSelection', async (t) => {
+            const store = new Store({
+                options: getOptions(20),
+                params: {
+                    multiple: true,
+                    disableGroupSelection: true,
+                },
+            });
+
+            await _.nextVueTick(store);
+
+            t.is(store.allowGroupSelection.value, false);
+
+            t.end();
+        });
+    });
+});