selectic 3.2.0 → 3.3.0

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

@@ -2921,6 +2921,17 @@ let Selectic = class Selectic extends vtyx.Vue {
             }
             const target = evt.target;
             if (!extendedListEl.contains(target) && !this.$el.contains(target)) {
+                if (keepOpenWithOtherSelectic) {
+                    let classSelector = '.selectic';
+                    if (typeof keepOpenWithOtherSelectic === 'string') {
+                        classSelector += keepOpenWithOtherSelectic;
+                    }
+                    const parentIsSelectic = target === null || target === void 0 ? void 0 : target.closest(classSelector);
+                    if (parentIsSelectic) {
+                        /* Do not close current Selectic */
+                        return;
+                    }
+                }
                 store.commit('isOpen', false);
             }
         };
@@ -3306,7 +3317,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
@@ -3320,7 +3331,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

@@ -2917,6 +2917,17 @@ let Selectic = class Selectic extends Vue {
             }
             const target = evt.target;
             if (!extendedListEl.contains(target) && !this.$el.contains(target)) {
+                if (keepOpenWithOtherSelectic) {
+                    let classSelector = '.selectic';
+                    if (typeof keepOpenWithOtherSelectic === 'string') {
+                        classSelector += keepOpenWithOtherSelectic;
+                    }
+                    const parentIsSelectic = target === null || target === void 0 ? void 0 : target.closest(classSelector);
+                    if (parentIsSelectic) {
+                        /* Do not close current Selectic */
+                        return;
+                    }
+                }
                 store.commit('isOpen', false);
             }
         };
@@ -3302,7 +3313,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
@@ -3316,7 +3327,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/doc/params.md

@@ -312,12 +312,17 @@ will not be displayed and the filter panel is always open.
 
 ## keepOpenWithOtherSelectic
 
-Type: `boolean`
+Type: `boolean | string`
 
 Default value: `false`
 
-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.
+By default, only one selectic component can be open at the same time. So if another Selectic component is open then any previously open component is closed.
+
+When `keepOpenWithOtherSelectic` is set to `true`, this component stays open when any other Selectic component opens.
+
+When it is set to a `non-empty string`, this component stays open only when another Selectic component that matches the given CSS selector opens.
+
+For falsy values, the component always closes when another Selectic opens.
 
 Note: This attribute does not prevent closing when user clicks outside the component.
 
@@ -330,6 +335,15 @@ Note: This attribute does not prevent closing when user clicks outside the compo
 />
 ```
 
+```html
+<selectic
+    :params="{
+        keepOpenWithOtherSelectic: '.class-name',
+    }"
+    :options="optionList"
+/>
+```
+
 ## listPosition
 
 Type: `'auto' | 'bottom' | 'top'`

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "selectic",
-    "version": "3.2.0",
+    "version": "3.3.0",
     "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.2"
     },
     "devDependencies": {
-        "@babel/types": "^7.28.1",
+        "@babel/types": "^7.28.2",
         "rollup": "^2.79.2",
         "rollup-plugin-postcss": "^4.0.2",
         "tape": "^4.17.0",
-        "typescript": "~4.8"
+        "typescript": "~5.9"
     }
 }

package/src/Store.tsx

@@ -208,8 +208,15 @@ export interface Props {
     /** Overwrite default icon family */
     iconFamily?: IconFamily | null;
 
-    /** Keep this component open if another Selectic component opens */
-    keepOpenWithOtherSelectic?: boolean;
+    /** Keep this component open if another Selectic component opens.
+     *
+     * - `true`  → Keep open for **any** Selectic component.
+     * - `string` → Keep open only when the other Selectic matches the given CSS selector.
+     * - `false` (default) → Always close when another Selectic opens.
+     *
+     * An empty string is treated the same as `false`.
+     */
+    keepOpenWithOtherSelectic?: boolean | string;
 
     /** Selectic configuration */
     params?: SelecticStoreStateParams;

package/src/index.tsx

@@ -146,8 +146,15 @@ export interface ParamProps {
      */
     optionBehavior?: string;
 
-    /** Keep this component open if another Selectic component opens */
-    keepOpenWithOtherSelectic?: boolean;
+    /** Keep this component open if another Selectic component opens.
+     *
+     * - `true`  → Keep open for **any** Selectic component.
+     * - `string` → Keep open only when the other Selectic matches the given CSS selector.
+     * - `false` (default) → Always close when another Selectic opens.
+     *
+     * An empty string is treated the same as `false`.
+     */
+    keepOpenWithOtherSelectic?: boolean | string;
 
     /** Avoid click on group name to select all items in this group. */
     disableGroupSelection?: boolean;
@@ -361,9 +368,24 @@ export default class Selectic extends Vue<Props> {
                 return;
             }
 
-            const target =  evt.target as Node;
+            const target =  evt.target as Element | null;
 
             if (!extendedListEl.contains(target) && !this.$el.contains(target)) {
+                if (keepOpenWithOtherSelectic) {
+                    let classSelector = '.selectic';
+
+                    if (typeof keepOpenWithOtherSelectic === 'string') {
+                        classSelector += keepOpenWithOtherSelectic;
+                    }
+
+                    const parentIsSelectic = target?.closest(classSelector);
+
+                    if (parentIsSelectic) {
+                        /* Do not close current Selectic */
+                        return;
+                    }
+                }
+
                 store.commit('isOpen', false);
             }
         };

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. */
@@ -135,8 +135,15 @@ export interface Props {
     icons?: PartialIcons | null;
     /** Overwrite default icon family */
     iconFamily?: IconFamily | null;
-    /** Keep this component open if another Selectic component opens */
-    keepOpenWithOtherSelectic?: boolean;
+    /** Keep this component open if another Selectic component opens.
+     *
+     * - `true`  → Keep open for **any** Selectic component.
+     * - `string` → Keep open only when the other Selectic matches the given CSS selector.
+     * - `false` (default) → Always close when another Selectic opens.
+     *
+     * An empty string is treated the same as `false`.
+     */
+    keepOpenWithOtherSelectic?: boolean | string;
     /** Selectic configuration */
     params?: SelecticStoreStateParams;
     /** Method to call to fetch extra data */
@@ -144,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;
@@ -246,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 {
@@ -272,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;
@@ -65,13 +65,20 @@ export interface ParamProps {
      * Example: "sort-ODE"
      */
     optionBehavior?: string;
-    /** Keep this component open if another Selectic component opens */
-    keepOpenWithOtherSelectic?: boolean;
+    /** Keep this component open if another Selectic component opens.
+     *
+     * - `true`  → Keep open for **any** Selectic component.
+     * - `string` → Keep open only when the other Selectic matches the given CSS selector.
+     * - `false` (default) → Always close when another Selectic opens.
+     *
+     * An empty string is treated the same as `false`.
+     */
+    keepOpenWithOtherSelectic?: boolean | string;
     /** 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'];