selectic 3.2.1 → 3.3.1

package/.tool-versions

@@ -1,5 +1,5 @@
-# ASDF configuration file for mmsx repository.
+# ASDF configuration file for Selectic repository.
 #
 # https://asdf-vm.com/manage/configuration.html
 
-nodejs 12.18.4 system
+nodejs 20.11.1 system

package/dist/selectic.common.js

@@ -1456,13 +1456,26 @@ class SelecticStore {
             : false;
         const hasOnlyValidValue = hasValue && !hasDisabledSelected && (Array.isArray(value) ? value.every((val) => this.hasValue(val)) :
             this.hasValue(value));
+        /* Whether at least one option, that is not disabled, is not selected. */
+        const hasAvailableNonSelectedOptions = state.allOptions.some((opt) => {
+            const isOptionSelected = (Array.isArray(selectedOptions)
+                ? selectedOptions.some((selectedOpt) => selectedOpt.id === opt.id)
+                : selectedOptions && selectedOptions.id === opt.id);
+            return !isOptionSelected && !opt.disabled;
+        });
         const isEmpty = nbEnabled === 0;
-        const hasOnlyOneOption = nbEnabled === 1 && hasOnlyValidValue && !state.allowClearSelection;
+        const hasOnlyOneOption = (nbEnabled === 1 && hasOnlyValidValue && !state.allowClearSelection);
+        /* In most cases if `hasOnlyOneOption` is true, we disable selection.
+         * However, if we are not in multi-select mode and if the only option available is not the selected one then
+         * we do not disable selection (to let the user switch from its current disabled selection,
+         * and a valid one).
+         */
+        const cannotSelectAnyOption = hasOnlyOneOption && (Array.isArray(selectedOptions) || !hasAvailableNonSelectedOptions);
         const isExclusiveDisabledItem = Array.isArray(selectedOptions) /* which means "multiple" mode */
             && selectedOptions.length === 1
             && selectedOptions[0].exclusive
             && selectedOptions[0].disabled;
-        if (hasOnlyOneOption || isEmpty || isExclusiveDisabledItem) {
+        if (cannotSelectAnyOption || isEmpty || isExclusiveDisabledItem) {
             if (state.isOpen) {
                 this.setAutomaticClose();
                 this.commit('isOpen', false);
@@ -3317,7 +3330,7 @@ let Selectic = class Selectic extends vtyx.Vue {
                 multiple: ((_a = this.multiple) !== null && _a !== void 0 ? _a : false) !== false,
                 pageSize: this.params.pageSize || 100,
                 hideFilter: (_b = this.params.hideFilter) !== null && _b !== void 0 ? _b : 'auto',
-                allowRevert: this.params.allowRevert,
+                allowRevert: this.params.allowRevert, /* it can be undefined */
                 forceSelectAll: this.params.forceSelectAll || 'auto',
                 allowClearSelection: this.params.allowClearSelection || false,
                 autoSelect: this.params.autoSelect === undefined
@@ -3331,7 +3344,7 @@ let Selectic = class Selectic extends vtyx.Vue {
                 formatOption: this.params.formatOption,
                 formatSelection: this.params.formatSelection,
                 listPosition: this.params.listPosition || 'auto',
-                optionBehavior: this.params.optionBehavior,
+                optionBehavior: this.params.optionBehavior, /* it can be undefined */
                 isOpen: ((_c = this.open) !== null && _c !== void 0 ? _c : false) !== false,
                 disableGroupSelection: this.params.disableGroupSelection,
             },

package/dist/selectic.esm.js

@@ -1452,13 +1452,26 @@ class SelecticStore {
             : false;
         const hasOnlyValidValue = hasValue && !hasDisabledSelected && (Array.isArray(value) ? value.every((val) => this.hasValue(val)) :
             this.hasValue(value));
+        /* Whether at least one option, that is not disabled, is not selected. */
+        const hasAvailableNonSelectedOptions = state.allOptions.some((opt) => {
+            const isOptionSelected = (Array.isArray(selectedOptions)
+                ? selectedOptions.some((selectedOpt) => selectedOpt.id === opt.id)
+                : selectedOptions && selectedOptions.id === opt.id);
+            return !isOptionSelected && !opt.disabled;
+        });
         const isEmpty = nbEnabled === 0;
-        const hasOnlyOneOption = nbEnabled === 1 && hasOnlyValidValue && !state.allowClearSelection;
+        const hasOnlyOneOption = (nbEnabled === 1 && hasOnlyValidValue && !state.allowClearSelection);
+        /* In most cases if `hasOnlyOneOption` is true, we disable selection.
+         * However, if we are not in multi-select mode and if the only option available is not the selected one then
+         * we do not disable selection (to let the user switch from its current disabled selection,
+         * and a valid one).
+         */
+        const cannotSelectAnyOption = hasOnlyOneOption && (Array.isArray(selectedOptions) || !hasAvailableNonSelectedOptions);
         const isExclusiveDisabledItem = Array.isArray(selectedOptions) /* which means "multiple" mode */
             && selectedOptions.length === 1
             && selectedOptions[0].exclusive
             && selectedOptions[0].disabled;
-        if (hasOnlyOneOption || isEmpty || isExclusiveDisabledItem) {
+        if (cannotSelectAnyOption || isEmpty || isExclusiveDisabledItem) {
             if (state.isOpen) {
                 this.setAutomaticClose();
                 this.commit('isOpen', false);
@@ -3313,7 +3326,7 @@ let Selectic = class Selectic extends Vue {
                 multiple: ((_a = this.multiple) !== null && _a !== void 0 ? _a : false) !== false,
                 pageSize: this.params.pageSize || 100,
                 hideFilter: (_b = this.params.hideFilter) !== null && _b !== void 0 ? _b : 'auto',
-                allowRevert: this.params.allowRevert,
+                allowRevert: this.params.allowRevert, /* it can be undefined */
                 forceSelectAll: this.params.forceSelectAll || 'auto',
                 allowClearSelection: this.params.allowClearSelection || false,
                 autoSelect: this.params.autoSelect === undefined
@@ -3327,7 +3340,7 @@ let Selectic = class Selectic extends Vue {
                 formatOption: this.params.formatOption,
                 formatSelection: this.params.formatSelection,
                 listPosition: this.params.listPosition || 'auto',
-                optionBehavior: this.params.optionBehavior,
+                optionBehavior: this.params.optionBehavior, /* it can be undefined */
                 isOpen: ((_c = this.open) !== null && _c !== void 0 ? _c : false) !== false,
                 disableGroupSelection: this.params.disableGroupSelection,
             },

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "selectic",
-    "version": "3.2.1",
+    "version": "3.3.1",
     "description": "Smart Select for VueJS 3.x",
     "main": "dist/selectic.common.js",
     "module": "dist/selectic.esm.js",
@@ -39,13 +39,13 @@
         "test": "npm run build && tape test/**/*.spec.js"
     },
     "dependencies": {
-        "vtyx": "4.2.1"
+        "vtyx": "4.4.3"
     },
     "devDependencies": {
-        "@babel/types": "^7.28.1",
-        "rollup": "^2.79.2",
+        "@babel/types": "^7.29.0",
+        "rollup": "^2.80.0",
         "rollup-plugin-postcss": "^4.0.2",
         "tape": "^4.17.0",
-        "typescript": "~4.8"
+        "typescript": "~5.9"
     }
 }

package/src/Store.tsx

@@ -1988,14 +1988,37 @@ export default class SelecticStore {
             this.hasValue(value)
         );
 
+        /* Whether at least one option, that is not disabled, is not selected. */
+        const hasAvailableNonSelectedOptions = state.allOptions.some((opt) => {
+            const isOptionSelected = (
+                Array.isArray(selectedOptions)
+                    ? selectedOptions.some((selectedOpt) => selectedOpt.id === opt.id)
+                    : selectedOptions && selectedOptions.id === opt.id
+            );
+
+            return !isOptionSelected && !opt.disabled;
+        });
+
         const isEmpty = nbEnabled === 0;
-        const hasOnlyOneOption = nbEnabled === 1 && hasOnlyValidValue && !state.allowClearSelection;
+        const hasOnlyOneOption = (
+            nbEnabled === 1 && hasOnlyValidValue && !state.allowClearSelection
+        );
+
+        /* In most cases if `hasOnlyOneOption` is true, we disable selection.
+         * However, if we are not in multi-select mode and if the only option available is not the selected one then
+         * we do not disable selection (to let the user switch from its current disabled selection,
+         * and a valid one).
+         */
+        const cannotSelectAnyOption = hasOnlyOneOption && (
+            Array.isArray(selectedOptions) || !hasAvailableNonSelectedOptions
+        );
+
         const isExclusiveDisabledItem = Array.isArray(selectedOptions) /* which means "multiple" mode */
             && selectedOptions.length === 1
             && selectedOptions[0].exclusive
             && selectedOptions[0].disabled;
 
-        if (hasOnlyOneOption || isEmpty || isExclusiveDisabledItem) {
+        if (cannotSelectAnyOption || isEmpty || isExclusiveDisabledItem) {
             if (state.isOpen) {
                 this.setAutomaticClose();
                 this.commit('isOpen', false);

package/test/Store/Store_props.spec.js

@@ -229,6 +229,62 @@ tape.test('change props', (subT) => {
                 t.end();
             });
 
+            sTest.test('should not disable the select, if selected item is disabled but there is another option',
+                async (t) => {
+                    const options = getOptions(2, 'alpha');
+                    options[1].disabled = true;
+
+                    const store = new Store({
+                        value: 1,
+                        options: options,
+                        disabled: false,
+                        params: {
+                            autoDisabled: true,
+                        },
+                    });
+
+                    store.commit('isOpen', true);
+                    await _.nextVueTick(store);
+
+                    t.is(store.state.selectedOptions.text, 'alpha1');
+                    t.is(store.state.internalValue, 1);
+                    t.is(store.state.disabled, false);
+
+                    /* Once we choose the only valid option, disable the selection */
+                    store.props.value = 0;
+                    await _.nextVueTick(store);
+
+                    t.is(store.state.selectedOptions.text, 'alpha0');
+                    t.is(store.state.internalValue, 0);
+                    t.is(store.state.disabled, true);
+
+                    t.end();
+                });
+
+            sTest.test('multi select should not be disabled, even if only disabled options are left',
+                async (t) => {
+                    const options = getOptions(3, 'alpha');
+                    options[1].disabled = true;
+                    options[2].disabled = true;
+
+                    const store = new Store({
+                        value: [0, 1],
+                        options: options,
+                        disabled: false,
+                        params: {
+                            autoDisabled: true,
+                            multiple: true,
+                        },
+                    });
+
+                    store.commit('isOpen', true);
+                    await _.nextVueTick(store);
+
+                    t.deepEqual(store.state.internalValue, [0, 1]);
+                    t.is(store.state.disabled, false);
+                    t.end();
+                });
+
             sTest.test('should not disable the select with an invalid value', async (t) => {
                 const store = new Store({
                     value: 2,

package/types/Store.d.ts

@@ -1,10 +1,10 @@
 import { ComputedRef } from 'vue';
-declare type MandateProps<T extends {}> = {
+type MandateProps<T extends {}> = {
     [TK in keyof T]-?: T[TK];
 };
-export declare type StrictOptionId = string | number;
-export declare type OptionId = StrictOptionId | null;
-export declare type SelectedValue = OptionId | StrictOptionId[];
+export type StrictOptionId = string | number;
+export type OptionId = StrictOptionId | null;
+export type SelectedValue = OptionId | StrictOptionId[];
 export interface OptionValue {
     id: OptionId;
     text: string;
@@ -18,19 +18,19 @@ export interface OptionValue {
     exclusive?: boolean;
     data?: any;
 }
-declare type OptionBehaviorOperation = 'sort' | 'force';
-declare type OptionBehaviorOrder = 'O' | 'D' | 'E';
+type OptionBehaviorOperation = 'sort' | 'force';
+type OptionBehaviorOrder = 'O' | 'D' | 'E';
 export interface OptionItem extends OptionValue {
     selected: boolean;
     disabled: boolean;
     isGroup: boolean;
 }
-export declare type OptionProp = OptionValue | string;
+export type OptionProp = OptionValue | string;
 export interface GroupValue {
     id: StrictOptionId;
     text: string;
 }
-export declare type RequestResult = {
+export type RequestResult = {
     /** The total number of expecting options.
      * Needed to know if there are more items to fetch, and to size the scrollbar.
      */
@@ -38,20 +38,20 @@ export declare type RequestResult = {
     /** The list of the options. */
     result: OptionValue[];
 };
-export declare type FetchCallback = (_search: string, _offsetItem: number, _pageSize: number) => Promise<RequestResult>;
-export declare type GetCallback = (_ids: OptionId[]) => Promise<OptionValue[]>;
-export declare type FormatCallback = (_option: OptionItem) => OptionItem;
-export declare type SelectionOverflow = 
+export type FetchCallback = (_search: string, _offsetItem: number, _pageSize: number) => Promise<RequestResult>;
+export type GetCallback = (_ids: OptionId[]) => Promise<OptionValue[]>;
+export type FormatCallback = (_option: OptionItem) => OptionItem;
+export type SelectionOverflow = 
 /** Items are reduced in width and an ellipsis is displayed in their name. */
 'collapsed' | 'multiline';
-export declare type ListPosition = 
+export type ListPosition = 
 /** Display the list at bottom */
 'bottom'
 /** Display the list at bottom */
  | 'top'
 /** Display the list at bottom but if there is not enough space, display it at top */
  | 'auto';
-export declare type HideFilter = 
+export type HideFilter = 
 /** Display or hide the filter panel */
 boolean
 /** The handler to open the filter panel is hidden only if there is less
@@ -59,7 +59,7 @@ boolean
  | 'auto'
 /** The panel filter is always open */
  | 'open';
-export declare type SelectAllOption = 
+export type SelectAllOption = 
 /** Display the "select all" only when data are all fetched or allowRevert */
 'auto'
 /** Always display the "select all" in mulitple mode. */
@@ -151,7 +151,7 @@ export interface Props {
     /** Method to call to get specific item */
     getItemsCallback?: GetCallback | null;
 }
-declare type InternalProps = MandateProps<Props>;
+type InternalProps = MandateProps<Props>;
 export interface Data {
     /** Number of items displayed in a page (before scrolling) */
     itemsPerPage: number;
@@ -253,11 +253,11 @@ export interface SelecticStoreState {
         automaticClose: boolean;
     };
 }
-export declare type IconFamily = '' | 'selectic' | 'font-awesome-4' | 'font-awesome-5' | 'font-awesome-6' | 'raw' | `prefix:${string}`;
-export declare type IconKey = 'caret-down' | 'caret-up' | 'check' | 'dot' | 'search' | 'spinner' | 'strikethrough' | 'times' | 'question' | 'spin';
-export declare type IconValue = `selectic:${IconKey}${'' | ':spin'}` | `raw:${string}` | `current:${IconKey}${'' | ':spin'}` | string;
-export declare type Icons = Record<IconKey, IconValue>;
-export declare type PartialIcons = {
+export type IconFamily = '' | 'selectic' | 'font-awesome-4' | 'font-awesome-5' | 'font-awesome-6' | 'raw' | `prefix:${string}`;
+export type IconKey = 'caret-down' | 'caret-up' | 'check' | 'dot' | 'search' | 'spinner' | 'strikethrough' | 'times' | 'question' | 'spin';
+export type IconValue = `selectic:${IconKey}${'' | ':spin'}` | `raw:${string}` | `current:${IconKey}${'' | ':spin'}` | string;
+export type Icons = Record<IconKey, IconValue>;
+export type PartialIcons = {
     [K in IconKey]?: Icons[K];
 };
 interface Messages {
@@ -279,7 +279,7 @@ interface Messages {
     unknownPropertyValue: string;
     wrongQueryResult: string;
 }
-export declare type PartialMessages = {
+export type PartialMessages = {
     [K in keyof Messages]?: Messages[K];
 };
 export declare function changeTexts(texts: PartialMessages): void;

package/types/index.d.ts

@@ -4,7 +4,7 @@ import { OptionProp, OptionId, StrictOptionId, GroupValue, SelectedValue, FetchC
 import MainInput from './MainInput';
 import ExtendedList from './ExtendedList';
 export { GroupValue, OptionValue, OptionItem, OptionProp, OptionId, StrictOptionId, SelectedValue, PartialMessages, GetCallback, FetchCallback, FormatCallback, SelectionOverflow, ListPosition, HideFilter, };
-declare type EventType = 'input' | 'change' | 'open' | 'close' | 'focus' | 'blur' | 'item:click';
+type EventType = 'input' | 'change' | 'open' | 'close' | 'focus' | 'blur' | 'item:click';
 export interface EventOptions {
     instance: Selectic;
     eventType: EventType;
@@ -77,8 +77,8 @@ export interface ParamProps {
     /** Avoid click on group name to select all items in this group. */
     disableGroupSelection?: boolean;
 }
-export declare type OnCallback = (event: string, ...args: any[]) => void;
-export declare type GetMethodsCallback = (methods: {
+export type OnCallback = (event: string, ...args: any[]) => void;
+export type GetMethodsCallback = (methods: {
     clearCache: Selectic['clearCache'];
     changeTexts: Selectic['changeTexts'];
     changeIcons: Selectic['changeIcons'];