selectic 3.0.17 → 3.0.18

package/dist/selectic.common.js

@@ -101,11 +101,12 @@ function assignObject(obj, ...sourceObjects) {
     const result = obj;
     for (const source of sourceObjects) {
         for (const key of Object.keys(source)) {
-            const value = source[key];
+            const typedKey = key;
+            const value = source[typedKey];
             if (value === undefined) {
                 continue;
             }
-            result[key] = value;
+            result[typedKey] = value;
         }
     }
     return result;
@@ -182,6 +183,7 @@ class SelecticStore {
             isOpen: false,
             searchText: '',
             selectionIsExcluded: false,
+            forceSelectAll: 'auto',
             allOptions: [],
             dynOptions: [],
             filteredOptions: [],
@@ -1405,7 +1407,7 @@ let MainInput = class MainInput extends vtyx.Vue {
     }
     /* }}} */
     render() {
-        return (vtyx.h("div", { class: "has-feedback", on: {
+        return (vtyx.h("div", { class: "selectic-container has-feedback", on: {
                 'click.prevent.stop': () => this.toggleFocus(),
             } },
             vtyx.h("div", { id: this.selecticId, class: ['selectic-input form-control',
@@ -1477,14 +1479,31 @@ let FilterPanel = class FilterPanel extends vtyx.Vue {
     get selectionIsExcluded() {
         return this.store.state.selectionIsExcluded;
     }
+    /* {{{ select all */
+    get hasNotAllItems() {
+        return !vue.unref(this.store.hasAllItems);
+    }
+    get disabledPartialData() {
+        const state = this.store.state;
+        const autoDisplay = state.forceSelectAll === 'auto';
+        return this.hasNotAllItems && !this.enableRevert && autoDisplay;
+    }
     get disableSelectAll() {
         const store = this.store;
         const state = store.state;
         const isMultiple = state.multiple;
-        const hasItems = state.filteredOptions.length === 0;
-        const canNotSelect = !!state.searchText && !vue.unref(store.hasAllItems);
-        return !isMultiple || hasItems || canNotSelect;
+        const hasNoItems = state.filteredOptions.length === 0;
+        const canNotSelect = this.hasNotAllItems && !!state.searchText;
+        const partialDataDsbld = this.disabledPartialData;
+        return !isMultiple || hasNoItems || canNotSelect || partialDataDsbld;
     }
+    get titleSelectAll() {
+        if (this.disableSelectAll && this.disabledPartialData) {
+            return this.store.data.labels.cannotSelectAllRevertItems;
+        }
+        return '';
+    }
+    /* }}} */
     get disableRevert() {
         const store = this.store;
         return !store.state.multiple || !vue.unref(store.hasFetchedAllItems);
@@ -1572,7 +1591,7 @@ let FilterPanel = class FilterPanel extends vtyx.Vue {
                     vtyx.h("label", { class: ['control-label', {
                                 'selectic__label-disabled': this.disableSelectAll,
                             }] },
-                        vtyx.h("input", { type: "checkbox", checked: state.status.areAllSelected, disabled: this.disableSelectAll, on: {
+                        vtyx.h("input", { type: "checkbox", checked: state.status.areAllSelected, disabled: this.disableSelectAll, title: this.titleSelectAll, on: {
                                 change: this.onSelectAll,
                             } }),
                         labels.selectAll))),
@@ -2463,6 +2482,7 @@ let Selectic = class Selectic extends vtyx.Vue {
                 pageSize: this.params.pageSize || 100,
                 hideFilter: (_b = this.params.hideFilter) !== null && _b !== void 0 ? _b : 'auto',
                 allowRevert: this.params.allowRevert,
+                forceSelectAll: this.params.forceSelectAll || 'auto',
                 allowClearSelection: this.params.allowClearSelection || false,
                 autoSelect: this.params.autoSelect === undefined
                     ? !this.multiple && !this.params.fetchCallback

package/dist/selectic.esm.js

@@ -97,11 +97,12 @@ function assignObject(obj, ...sourceObjects) {
     const result = obj;
     for (const source of sourceObjects) {
         for (const key of Object.keys(source)) {
-            const value = source[key];
+            const typedKey = key;
+            const value = source[typedKey];
             if (value === undefined) {
                 continue;
             }
-            result[key] = value;
+            result[typedKey] = value;
         }
     }
     return result;
@@ -178,6 +179,7 @@ class SelecticStore {
             isOpen: false,
             searchText: '',
             selectionIsExcluded: false,
+            forceSelectAll: 'auto',
             allOptions: [],
             dynOptions: [],
             filteredOptions: [],
@@ -1401,7 +1403,7 @@ let MainInput = class MainInput extends Vue {
     }
     /* }}} */
     render() {
-        return (h("div", { class: "has-feedback", on: {
+        return (h("div", { class: "selectic-container has-feedback", on: {
                 'click.prevent.stop': () => this.toggleFocus(),
             } },
             h("div", { id: this.selecticId, class: ['selectic-input form-control',
@@ -1473,14 +1475,31 @@ let FilterPanel = class FilterPanel extends Vue {
     get selectionIsExcluded() {
         return this.store.state.selectionIsExcluded;
     }
+    /* {{{ select all */
+    get hasNotAllItems() {
+        return !unref(this.store.hasAllItems);
+    }
+    get disabledPartialData() {
+        const state = this.store.state;
+        const autoDisplay = state.forceSelectAll === 'auto';
+        return this.hasNotAllItems && !this.enableRevert && autoDisplay;
+    }
     get disableSelectAll() {
         const store = this.store;
         const state = store.state;
         const isMultiple = state.multiple;
-        const hasItems = state.filteredOptions.length === 0;
-        const canNotSelect = !!state.searchText && !unref(store.hasAllItems);
-        return !isMultiple || hasItems || canNotSelect;
+        const hasNoItems = state.filteredOptions.length === 0;
+        const canNotSelect = this.hasNotAllItems && !!state.searchText;
+        const partialDataDsbld = this.disabledPartialData;
+        return !isMultiple || hasNoItems || canNotSelect || partialDataDsbld;
     }
+    get titleSelectAll() {
+        if (this.disableSelectAll && this.disabledPartialData) {
+            return this.store.data.labels.cannotSelectAllRevertItems;
+        }
+        return '';
+    }
+    /* }}} */
     get disableRevert() {
         const store = this.store;
         return !store.state.multiple || !unref(store.hasFetchedAllItems);
@@ -1568,7 +1587,7 @@ let FilterPanel = class FilterPanel extends Vue {
                     h("label", { class: ['control-label', {
                                 'selectic__label-disabled': this.disableSelectAll,
                             }] },
-                        h("input", { type: "checkbox", checked: state.status.areAllSelected, disabled: this.disableSelectAll, on: {
+                        h("input", { type: "checkbox", checked: state.status.areAllSelected, disabled: this.disableSelectAll, title: this.titleSelectAll, on: {
                                 change: this.onSelectAll,
                             } }),
                         labels.selectAll))),
@@ -2459,6 +2478,7 @@ let Selectic = class Selectic extends Vue {
                 pageSize: this.params.pageSize || 100,
                 hideFilter: (_b = this.params.hideFilter) !== null && _b !== void 0 ? _b : 'auto',
                 allowRevert: this.params.allowRevert,
+                forceSelectAll: this.params.forceSelectAll || 'auto',
                 allowClearSelection: this.params.allowClearSelection || false,
                 autoSelect: this.params.autoSelect === undefined
                     ? !this.multiple && !this.params.fetchCallback

package/doc/params.md

@@ -278,6 +278,32 @@ Read [the extended properties documentation](extendedProperties.md) for more inf
 />
 ```
 
+## forceSelectAll
+
+Type: `'auto' | 'visible'`
+
+Default value: `'auto'`
+
+In _multiple_ mode, there is a "select all" action.
+If the selection inversion is not available and all data are not fetched (in
+_dynamic_ mode) it will not be possible to select all items. So this action
+will be disabled.
+
+This option allows you to change the behavior.
+
+* `'auto'`: The action is disabled when not possible.
+* `'visible'`: The action is displayed even when all data are not fetched.
+
+```html
+<selectic
+    params={{
+        forceSelectAll: 'auto',
+    }}
+    options={optionList}
+/>
+```
+
+
 ## listPosition
 
 Type: `'auto' | 'bottom' | 'top'`

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "selectic",
-    "version": "3.0.17",
+    "version": "3.0.18",
     "description": "Smart Select for VueJS 3.x",
     "main": "dist/selectic.common.js",
     "module": "dist/selectic.esm.js",
@@ -41,10 +41,10 @@
         "vtyx": "4.0.5"
     },
     "devDependencies": {
-        "@babel/types": "^7.19.4",
+        "@babel/types": "^7.20.7",
         "rollup": "^2.79.1",
-        "rollup-plugin-postcss": "^3.1.8",
-        "tape": "^4.16.1",
-        "typescript": "~4.5"
+        "rollup-plugin-postcss": "^4.0.2",
+        "tape": "^4.16.2",
+        "typescript": "~4.8"
     }
 }

package/src/Filter.tsx

@@ -30,31 +30,53 @@ export default class FilterPanel extends Vue<Props> {
     /* }}} */
     /* {{{ computed */
 
-    get searchPlaceholder() {
+    get searchPlaceholder(): string {
         return this.store.data.labels.searchPlaceholder;
     }
 
-    get selectionIsExcluded() {
+    get selectionIsExcluded(): boolean {
         return this.store.state.selectionIsExcluded;
     }
 
-    get disableSelectAll() {
+    /* {{{ select all */
+
+    get hasNotAllItems(): boolean {
+        return !unref(this.store.hasAllItems);
+    }
+    get disabledPartialData(): boolean {
+        const state = this.store.state;
+        const autoDisplay = state.forceSelectAll === 'auto';
+        return this.hasNotAllItems && !this.enableRevert && autoDisplay;
+    }
+
+    get disableSelectAll(): boolean {
         const store = this.store;
         const state = store.state;
         const isMultiple = state.multiple;
-        const hasItems = state.filteredOptions.length === 0;
-        const canNotSelect = !!state.searchText && !unref(store.hasAllItems);
+        const hasNoItems = state.filteredOptions.length === 0;
+        const canNotSelect = this.hasNotAllItems && !!state.searchText;
+        const partialDataDsbld = this.disabledPartialData;
 
-        return !isMultiple || hasItems || canNotSelect;
+        return !isMultiple || hasNoItems || canNotSelect || partialDataDsbld;
     }
 
-    get disableRevert() {
+    get titleSelectAll(): string {
+        if (this.disableSelectAll && this.disabledPartialData) {
+            return this.store.data.labels.cannotSelectAllRevertItems;
+        }
+
+        return '';
+    }
+
+    /* }}} */
+
+    get disableRevert(): boolean {
         const store = this.store;
 
         return !store.state.multiple || !unref(store.hasFetchedAllItems);
     }
 
-    get enableRevert() {
+    get enableRevert(): boolean {
         const state = this.store.state;
 
         return state.multiple && state.allowRevert !== false;
@@ -178,6 +200,7 @@ export default class FilterPanel extends Vue<Props> {
                                     type="checkbox"
                                     checked={state.status.areAllSelected}
                                     disabled={this.disableSelectAll}
+                                    title={this.titleSelectAll}
                                     on={{
                                         change: this.onSelectAll,
                                     }}

package/src/MainInput.tsx

@@ -281,7 +281,7 @@ export default class MainInput extends Vue<Props> {
     public render() {
         return (
         <div
-            class="has-feedback"
+            class="selectic-container has-feedback"
             on={{
                 'click.prevent.stop': () => this.toggleFocus(),
             }}

package/src/Store.tsx

@@ -83,6 +83,12 @@ export type HideFilter =
     /* The panel filter is always open */
   | 'open';
 
+export type SelectAllOption =
+    /* Display the "select all" only when data are all fetched or allowRevert */
+    'auto'
+    /* Always display the "select all" in mulitple mode. */
+  | 'visible';
+
 export interface SelecticStoreStateParams {
     /* Equivalent of <select>'s "multiple" attribute */
     multiple?: boolean;
@@ -101,6 +107,9 @@ export interface SelecticStoreStateParams {
      */
     allowRevert?: boolean;
 
+    /* Force the availability of the "select all" even if all data is not fetched yet. */
+    forceSelectAll?: SelectAllOption;
+
     /* Allow user to clear current selection */
     allowClearSelection?: boolean;
 
@@ -295,6 +304,9 @@ export interface SelecticStoreState {
     /* Indicate where the list should be deployed */
     listPosition: ListPosition;
 
+    /* If true, the "select All" is still available even if all data are not fetched yet. */
+    forceSelectAll: SelectAllOption;
+
     /* Inner status which should be modified only by store */
     status: {
         /* If true, a search is currently done */
@@ -442,6 +454,7 @@ export default class SelecticStore {
             isOpen: false,
             searchText: '',
             selectionIsExcluded: false,
+            forceSelectAll: 'auto',
             allOptions: [],
             dynOptions: [],
             filteredOptions: [],

package/src/index.tsx

@@ -40,6 +40,7 @@ import Store, {
     SelectionOverflow,
     ListPosition,
     HideFilter,
+    SelectAllOption,
 } from './Store';
 import MainInput from './MainInput';
 import ExtendedList from './ExtendedList';
@@ -98,6 +99,9 @@ export interface ParamProps {
      */
     allowRevert?: boolean;
 
+    /* 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 */
     allowClearSelection?: boolean;
 
@@ -794,6 +798,7 @@ export default class Selectic extends Vue<Props> {
                 pageSize: this.params.pageSize || 100,
                 hideFilter: this.params.hideFilter ?? 'auto',
                 allowRevert: this.params.allowRevert, /* it can be undefined */
+                forceSelectAll: this.params.forceSelectAll || 'auto',
                 allowClearSelection: this.params.allowClearSelection || false,
                 autoSelect: this.params.autoSelect === undefined
                           ? !this.multiple && !this.params.fetchCallback

package/src/tools.ts

@@ -76,11 +76,12 @@ export function assignObject<T>(obj: Partial<T>, ...sourceObjects: Array<Partial
     const result = obj;
     for (const source of sourceObjects) {
         for (const key of Object.keys(source)) {
-            const value = source[key as keyof T];
+            const typedKey = key as keyof T;
+            const value = source[typedKey];
             if (value === undefined) {
                 continue;
             }
-            result[key as keyof T] = value;
+            result[typedKey] = value!;
         }
     }
     return result as T;

package/test/helper.js

@@ -10,6 +10,7 @@ function getInitialState(replacedAttributes) {
         hideFilter: false,
         keepFilterOpen: false,
         allowRevert: undefined,
+        forceSelectAll: 'auto',
         allowClearSelection: false,
         autoSelect: true,
         autoDisabled: true,

package/types/Filter.d.ts

@@ -11,7 +11,10 @@ export default class FilterPanel extends Vue<Props> {
     private closed;
     get searchPlaceholder(): string;
     get selectionIsExcluded(): boolean;
+    get hasNotAllItems(): boolean;
+    get disabledPartialData(): boolean;
     get disableSelectAll(): boolean;
+    get titleSelectAll(): string;
     get disableRevert(): boolean;
     get enableRevert(): boolean;
     get onKeyPressed(): (evt: KeyboardEvent) => void;

package/types/Store.d.ts

@@ -39,11 +39,13 @@ export declare type FormatCallback = (_option: OptionItem) => OptionItem;
 export declare type SelectionOverflow = 'collapsed' | 'multiline';
 export declare type ListPosition = 'bottom' | 'top' | 'auto';
 export declare type HideFilter = boolean | 'auto' | 'open';
+export declare type SelectAllOption = 'auto' | 'visible';
 export interface SelecticStoreStateParams {
     multiple?: boolean;
     placeholder?: string;
     hideFilter?: HideFilter;
     allowRevert?: boolean;
+    forceSelectAll?: SelectAllOption;
     allowClearSelection?: boolean;
     pageSize?: number;
     autoSelect?: boolean;
@@ -110,6 +112,7 @@ export interface SelecticStoreState {
     optionBehaviorOperation: OptionBehaviorOperation;
     optionBehaviorOrder: OptionBehaviorOrder[];
     listPosition: ListPosition;
+    forceSelectAll: SelectAllOption;
     status: {
         searching: boolean;
         errorMessage: string;

package/types/index.d.ts

@@ -1,6 +1,6 @@
 import { Vue, h } from 'vtyx';
 import './css/selectic.css';
-import { OptionProp, OptionId, StrictOptionId, GroupValue, SelectedValue, FetchCallback, GetCallback, PartialMessages, OptionValue, OptionItem, FormatCallback, SelectionOverflow, ListPosition, HideFilter } from './Store';
+import { OptionProp, OptionId, StrictOptionId, GroupValue, SelectedValue, FetchCallback, GetCallback, PartialMessages, OptionValue, OptionItem, FormatCallback, SelectionOverflow, ListPosition, HideFilter, SelectAllOption } from './Store';
 import MainInput from './MainInput';
 import ExtendedList from './ExtendedList';
 export { GroupValue, OptionValue, OptionItem, OptionProp, OptionId, StrictOptionId, SelectedValue, PartialMessages, GetCallback, FetchCallback, FormatCallback, SelectionOverflow, ListPosition, HideFilter, };
@@ -19,6 +19,7 @@ export interface ParamProps {
     pageSize?: number;
     hideFilter?: HideFilter;
     allowRevert?: boolean;
+    forceSelectAll?: SelectAllOption;
     allowClearSelection?: boolean;
     autoSelect?: boolean;
     autoDisabled?: boolean;