selectic 1.3.11 → 3.0.3

package/types/MainInput.d.ts

@@ -1,10 +1,10 @@
-import { Vue } from 'vtyx';
+import { Vue, h } from 'vtyx';
 import Store, { OptionItem } from './Store';
 export interface Props {
     store: Store;
     id?: string;
 }
-export default class Selectic extends Vue<Props> {
+export default class MainInput extends Vue<Props> {
     $refs: {
         selectedItems: HTMLDivElement;
     };
@@ -31,7 +31,7 @@ export default class Selectic extends Vue<Props> {
     private selectItem;
     private clearSelection;
     private computeSize;
-    protected onInternalChange(): void;
-    protected updated(): void;
-    protected render(): JSX.Element;
+    onInternalChange(): void;
+    updated(): void;
+    render(): h.JSX.Element;
 }

package/types/Store.d.ts

@@ -1,4 +1,7 @@
-import { Vue } from 'vtyx';
+import { ComputedRef } from 'vue';
+declare 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[];
@@ -34,10 +37,11 @@ export declare type GetCallback = (_ids: OptionId[]) => Promise<OptionValue[]>;
 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 interface SelecticStoreStateParams {
     multiple?: boolean;
     placeholder?: string;
-    hideFilter?: boolean | 'auto';
+    hideFilter?: HideFilter;
     allowRevert?: boolean;
     allowClearSelection?: boolean;
     pageSize?: number;
@@ -48,20 +52,30 @@ export interface SelecticStoreStateParams {
     formatOption?: FormatCallback;
     formatSelection?: FormatCallback;
     optionBehavior?: string;
+    listPosition?: ListPosition;
     isOpen?: boolean;
 }
 export interface Props {
-    value?: SelectedValue;
+    value?: SelectedValue | null;
     selectionIsExcluded?: boolean;
     disabled?: boolean;
-    options?: OptionProp[];
-    childOptions?: OptionProp[];
+    options?: OptionProp[] | null;
+    childOptions?: OptionValue[];
     groups?: GroupValue[];
-    texts?: PartialMessages;
+    texts?: PartialMessages | null;
     keepOpenWithOtherSelectic?: boolean;
     params?: SelecticStoreStateParams;
-    fetchCallback?: FetchCallback;
-    getItemsCallback?: GetCallback;
+    fetchCallback?: FetchCallback | null;
+    getItemsCallback?: GetCallback | null;
+}
+declare type InternalProps = MandateProps<Props>;
+export interface Data {
+    itemsPerPage: number;
+    labels: Messages;
+    doNotUpdate: boolean;
+    cacheItem: Map<OptionId, OptionValue>;
+    activeOrder: OptionBehaviorOrder;
+    dynOffset: number;
 }
 export interface SelecticStoreState {
     internalValue: SelectedValue;
@@ -70,6 +84,7 @@ export interface SelecticStoreState {
     disabled: boolean;
     placeholder: string;
     hideFilter: boolean;
+    keepFilterOpen: boolean;
     allowRevert?: boolean;
     allowClearSelection: boolean;
     autoSelect: boolean;
@@ -99,6 +114,8 @@ export interface SelecticStoreState {
         errorMessage: string;
         areAllSelected: boolean;
         hasChanged: boolean;
+        automaticChange: boolean;
+        automaticClose: boolean;
     };
 }
 interface Messages {
@@ -123,33 +140,158 @@ export declare type PartialMessages = {
     [K in keyof Messages]?: Messages[K];
 };
 export declare function changeTexts(texts: PartialMessages): void;
-export default class SelecticStore extends Vue<Props> {
-    value?: SelectedValue;
-    selectionIsExcluded: boolean;
-    disabled: boolean;
-    options?: OptionProp[];
-    childOptions?: OptionValue[];
-    groups: GroupValue[];
-    texts?: PartialMessages;
-    private params?;
-    private fetchCallback?;
-    private getItemsCallback?;
-    private keepOpenWithOtherSelectic;
-    itemsPerPage: number;
-    state: SelecticStoreState;
-    labels: Messages;
-    private doNotUpdate;
-    private cacheItem;
-    private activeOrder;
-    private dynOffset;
+export default class SelecticStore {
+    props: InternalProps;
+    state: {
+        internalValue: OptionId | StrictOptionId[];
+        selectionIsExcluded: boolean;
+        multiple: boolean;
+        disabled: boolean;
+        placeholder: string;
+        hideFilter: boolean;
+        keepFilterOpen: boolean;
+        allowRevert?: boolean | undefined;
+        allowClearSelection: boolean;
+        autoSelect: boolean;
+        autoDisabled: boolean;
+        strictValue: boolean;
+        selectionOverflow: SelectionOverflow;
+        isOpen: boolean;
+        searchText: string;
+        allOptions: {
+            id: OptionId;
+            text: string;
+            title?: string | undefined;
+            disabled?: boolean | undefined;
+            group?: StrictOptionId | undefined;
+            className?: string | undefined;
+            style?: string | undefined;
+            icon?: string | undefined;
+            options?: any[] | undefined;
+            data?: any;
+        }[];
+        dynOptions: {
+            id: OptionId;
+            text: string;
+            title?: string | undefined;
+            disabled?: boolean | undefined;
+            group?: StrictOptionId | undefined;
+            className?: string | undefined;
+            style?: string | undefined;
+            icon?: string | undefined;
+            options?: any[] | undefined;
+            data?: any;
+        }[];
+        filteredOptions: {
+            selected: boolean;
+            disabled: boolean;
+            isGroup: boolean;
+            id: OptionId;
+            text: string;
+            title?: string | undefined;
+            group?: StrictOptionId | undefined;
+            className?: string | undefined;
+            style?: string | undefined;
+            icon?: string | undefined;
+            options?: {
+                id: OptionId;
+                text: string;
+                title?: string | undefined;
+                disabled?: boolean | undefined;
+                group?: StrictOptionId | undefined;
+                className?: string | undefined;
+                style?: string | undefined;
+                icon?: string | undefined;
+                options?: any[] | undefined;
+                data?: any;
+            }[] | undefined;
+            data?: any;
+        }[];
+        selectedOptions: {
+            selected: boolean;
+            disabled: boolean;
+            isGroup: boolean;
+            id: OptionId;
+            text: string;
+            title?: string | undefined;
+            group?: StrictOptionId | undefined;
+            className?: string | undefined;
+            style?: string | undefined;
+            icon?: string | undefined;
+            options?: {
+                id: OptionId;
+                text: string;
+                title?: string | undefined;
+                disabled?: boolean | undefined;
+                group?: StrictOptionId | undefined;
+                className?: string | undefined;
+                style?: string | undefined;
+                icon?: string | undefined;
+                options?: any[] | undefined;
+                data?: any;
+            }[] | undefined;
+            data?: any;
+        } | {
+            selected: boolean;
+            disabled: boolean;
+            isGroup: boolean;
+            id: OptionId;
+            text: string;
+            title?: string | undefined;
+            group?: StrictOptionId | undefined;
+            className?: string | undefined;
+            style?: string | undefined;
+            icon?: string | undefined;
+            options?: {
+                id: OptionId;
+                text: string;
+                title?: string | undefined;
+                disabled?: boolean | undefined;
+                group?: StrictOptionId | undefined;
+                className?: string | undefined;
+                style?: string | undefined;
+                icon?: string | undefined;
+                options?: any[] | undefined;
+                data?: any;
+            }[] | undefined;
+            data?: any;
+        }[] | null;
+        totalAllOptions: number;
+        totalDynOptions: number;
+        totalFilteredOptions: number;
+        groups: Map<OptionId, string>;
+        offsetItem: number;
+        activeItemIdx: number;
+        pageSize: number;
+        formatOption?: FormatCallback | undefined;
+        formatSelection?: FormatCallback | undefined;
+        optionBehaviorOperation: OptionBehaviorOperation;
+        optionBehaviorOrder: OptionBehaviorOrder[];
+        listPosition: ListPosition;
+        status: {
+            searching: boolean;
+            errorMessage: string;
+            areAllSelected: boolean;
+            hasChanged: boolean;
+            automaticChange: boolean;
+            automaticClose: boolean;
+        };
+    };
+    data: Data;
     private requestId;
     private cacheRequest;
-    get marginSize(): number;
-    get isPartial(): boolean;
-    get hasAllItems(): boolean;
-    get hasFetchedAllItems(): boolean;
-    get closeSelectic(): () => void;
+    private closeSelectic;
+    marginSize: ComputedRef<number>;
+    isPartial: ComputedRef<boolean>;
+    hasAllItems: ComputedRef<boolean>;
+    hasFetchedAllItems: ComputedRef<boolean>;
+    private listOptions;
+    private elementOptions;
+    _uid: number;
+    constructor(props?: Props);
     commit<N extends keyof SelecticStoreState, V extends SelecticStoreState[N]>(name: N, value: V): void;
+    setAutomaticChange(): void;
+    setAutomaticClose(): void;
     getItem(id: OptionId): OptionValue;
     getItems(ids: OptionId[]): Promise<OptionItem[]>;
     selectItem(id: OptionId, selected?: boolean, keepOpen?: boolean): void;
@@ -161,6 +303,8 @@ export default class SelecticStore extends Vue<Props> {
     changeTexts(texts: PartialMessages): void;
     private hasValue;
     private getValue;
+    private convertTypeValue;
+    private assertValueType;
     private assertCorrectValue;
     private updateFilteredOptions;
     private addGroups;
@@ -181,15 +325,5 @@ export default class SelecticStore extends Vue<Props> {
     private checkAutoSelect;
     private checkAutoDisabled;
     private checkHideFilter;
-    protected onOptionsChange(options?: OptionValue[], oldOptions?: OptionValue[]): void;
-    protected onChildOptionsChange(childOptions?: OptionValue[], oldChildOptions?: OptionValue[]): void;
-    protected onValueChange(): void;
-    protected onSelectionExcludedChange(): void;
-    protected onDisabledChange(): void;
-    protected onFilteredChange(): void;
-    protected onInternalValueChange(): void;
-    protected onAllOptionChange(): void;
-    protected onTotalAllOptionsChange(): void;
-    protected created(): void;
 }
 export {};

package/types/index.d.ts

@@ -1,14 +1,23 @@
-import { Vue } from 'vtyx';
+import { Vue, h } from 'vtyx';
 import './css/selectic.css';
-import { OptionProp, OptionId, StrictOptionId, GroupValue, SelectedValue, FetchCallback, GetCallback, PartialMessages, OptionValue, OptionItem, FormatCallback, SelectionOverflow, ListPosition } from './Store';
+import { OptionProp, OptionId, StrictOptionId, GroupValue, SelectedValue, FetchCallback, GetCallback, PartialMessages, OptionValue, OptionItem, FormatCallback, SelectionOverflow, ListPosition, HideFilter } from './Store';
 import MainInput from './MainInput';
 import ExtendedList from './ExtendedList';
-export { GroupValue, OptionValue, OptionItem, OptionProp, OptionId, StrictOptionId, SelectedValue, PartialMessages, GetCallback, FetchCallback, FormatCallback, SelectionOverflow, ListPosition, };
+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';
+export interface EventOptions {
+    instance: Selectic;
+    eventType: EventType;
+    automatic: boolean;
+}
+export interface EventChangeOptions extends EventOptions {
+    isExcluded: boolean;
+}
 export interface ParamProps {
     fetchCallback?: FetchCallback;
     getItemsCallback?: GetCallback;
     pageSize?: number;
-    hideFilter?: boolean | 'auto';
+    hideFilter?: HideFilter;
     allowRevert?: boolean;
     allowClearSelection?: boolean;
     autoSelect?: boolean;
@@ -22,6 +31,15 @@ export interface ParamProps {
     optionBehavior?: string;
     keepOpenWithOtherSelectic?: boolean;
 }
+export declare type OnCallback = (event: string, ...args: any[]) => void;
+export declare type GetMethodsCallback = (methods: {
+    clearCache: Selectic['clearCache'];
+    changeTexts: Selectic['changeTexts'];
+    getValue: Selectic['getValue'];
+    getSelectedItems: Selectic['getSelectedItems'];
+    isEmpty: Selectic['isEmpty'];
+    toggleOpen: Selectic['toggleOpen'];
+}) => void;
 export interface Props {
     value?: SelectedValue;
     selectionIsExcluded?: boolean;
@@ -37,6 +55,15 @@ export interface Props {
     noCache?: Boolean;
     open?: Boolean;
     params?: ParamProps;
+    /** _on is used mainly for tests.
+     * Its purpose is to propagate $emit event mainly
+     * for parents which are not in Vue environment.
+     */
+    _on?: OnCallback;
+    /** _getMethods is used mainly for tests.
+     * Its purpose is to provide public methods outside of a Vue environment.
+     */
+    _getMethods?: GetMethodsCallback;
 }
 export declare function changeTexts(texts: PartialMessages): void;
 export default class Selectic extends Vue<Props> {
@@ -58,11 +85,15 @@ export default class Selectic extends Vue<Props> {
     noCache: boolean;
     open?: boolean;
     params: ParamProps;
+    /** For tests */
+    _on?: OnCallback;
+    _getMethods?: GetMethodsCallback;
     elementBottom: number;
     elementTop: number;
     elementLeft: number;
     elementRight: number;
     width: number;
+    private hasBeenRendered;
     private store;
     private _elementsListeners;
     private _oldValue;
@@ -70,14 +101,14 @@ export default class Selectic extends Vue<Props> {
     get scrollListener(): () => void;
     get outsideListener(): (evt: MouseEvent) => void;
     get windowResize(): (_evt: any) => void;
-    get inputValue(): string | number;
+    get inputValue(): StrictOptionId;
     get selecticClass(): (string | {
         disabled: boolean;
         'selectic--overflow-multiline': boolean;
         'selectic--overflow-collapsed': boolean;
     })[];
     get hasGivenValue(): boolean;
-    get defaultValue(): SelectedValue;
+    get defaultValue(): string | number | StrictOptionId[] | null;
     clearCache(forceReset?: boolean): void;
     changeTexts(texts: PartialMessages): void;
     getValue(): SelectedValue;
@@ -89,23 +120,22 @@ export default class Selectic extends Vue<Props> {
     private removeListeners;
     private focusToggled;
     private compareValues;
-    protected onValueChange(): void;
-    protected onExcludedChange(): void;
-    protected onOptionsChange(): void;
-    protected onTextsChange(): void;
-    protected onDisabledChange(): void;
-    protected onGroupsChanged(): void;
-    protected onPlaceholderChanged(): void;
-    protected onOpenChanged(): void;
-    protected onFocusChanged(): void;
-    protected onInternalValueChange(): void;
+    onValueChange(): void;
+    onExcludedChange(): void;
+    onOptionsChange(): void;
+    onTextsChange(): void;
+    onDisabledChange(): void;
+    onGroupsChanged(): void;
+    onPlaceholderChanged(): void;
+    onOpenChanged(): void;
+    onFocusChanged(): void;
+    onInternalValueChange(): void;
     private checkFocus;
-    private extractFromNode;
-    private extractOptionFromNode;
-    private extractOptgroupFromNode;
-    protected created(): void;
-    protected mounted(): void;
-    protected beforeUpdate(): void;
-    protected beforeDestroy(): void;
-    protected render(): JSX.Element;
+    private _emit;
+    private emit;
+    created(): void;
+    mounted(): void;
+    beforeUpdate(): void;
+    beforeDestroy(): void;
+    render(): h.JSX.Element | undefined;
 }

package/types/OldStore.d.ts

@@ -1,195 +0,0 @@
-import { Vue } from 'vtyx';
-export declare type StrictOptionId = string | number;
-export declare type OptionId = StrictOptionId | null;
-export declare type SelectedValue = OptionId | StrictOptionId[];
-export interface OptionValue {
-    id: OptionId;
-    text: string;
-    title?: string;
-    disabled?: boolean;
-    group?: StrictOptionId;
-    className?: string;
-    style?: string;
-    icon?: string;
-    options?: OptionValue[];
-    data?: any;
-}
-declare type OptionBehaviorOperation = 'sort' | 'force';
-declare type OptionBehaviorOrder = 'O' | 'D' | 'E';
-export interface OptionItem extends OptionValue {
-    selected: boolean;
-    disabled: boolean;
-    isGroup: boolean;
-}
-export declare type OptionProp = OptionValue | string;
-export interface GroupValue {
-    id: StrictOptionId;
-    text: string;
-}
-export declare type FetchCallback = (_search: string, _offsetItem: number, _pageSize: number) => Promise<{
-    total: number;
-    result: OptionValue[];
-}>;
-export declare type GetCallback = (_ids: OptionId[]) => Promise<OptionValue[]>;
-export declare type FormatCallback = (_option: OptionItem) => OptionItem;
-export declare type SelectionOverflow = 'collapsed' | 'multiline';
-export declare type ListPosition = 'bottom' | 'top' | 'auto';
-export interface SelecticStoreStateParams {
-    multiple?: boolean;
-    placeholder?: string;
-    hideFilter?: boolean | 'auto';
-    allowRevert?: boolean;
-    allowClearSelection?: boolean;
-    pageSize?: number;
-    autoSelect?: boolean;
-    autoDisabled?: boolean;
-    strictValue?: boolean;
-    selectionOverflow?: SelectionOverflow;
-    formatOption?: FormatCallback;
-    formatSelection?: FormatCallback;
-    optionBehavior?: string;
-    isOpen?: boolean;
-}
-export interface Props {
-    value?: SelectedValue;
-    selectionIsExcluded?: boolean;
-    disabled?: boolean;
-    options?: OptionProp[];
-    childOptions?: OptionProp[];
-    groups?: GroupValue[];
-    texts?: PartialMessages;
-    keepOpenWithOtherSelectic?: boolean;
-    params?: SelecticStoreStateParams;
-    fetchCallback?: FetchCallback;
-    getItemsCallback?: GetCallback;
-}
-export interface SelecticStoreState {
-    internalValue: SelectedValue;
-    selectionIsExcluded: boolean;
-    multiple: boolean;
-    disabled: boolean;
-    placeholder: string;
-    hideFilter: boolean;
-    allowRevert?: boolean;
-    allowClearSelection: boolean;
-    autoSelect: boolean;
-    autoDisabled: boolean;
-    strictValue: boolean;
-    selectionOverflow: SelectionOverflow;
-    isOpen: boolean;
-    searchText: string;
-    allOptions: OptionValue[];
-    dynOptions: OptionValue[];
-    filteredOptions: OptionItem[];
-    selectedOptions: OptionItem | OptionItem[] | null;
-    totalAllOptions: number;
-    totalDynOptions: number;
-    totalFilteredOptions: number;
-    groups: Map<OptionId, string>;
-    offsetItem: number;
-    activeItemIdx: number;
-    pageSize: number;
-    formatOption?: FormatCallback;
-    formatSelection?: FormatCallback;
-    optionBehaviorOperation: OptionBehaviorOperation;
-    optionBehaviorOrder: OptionBehaviorOrder[];
-    listPosition: ListPosition;
-    status: {
-        searching: boolean;
-        errorMessage: string;
-        areAllSelected: boolean;
-        hasChanged: boolean;
-    };
-}
-interface Messages {
-    noFetchMethod: string;
-    searchPlaceholder: string;
-    searching: string;
-    cannotSelectAllSearchedItems: string;
-    cannotSelectAllRevertItems: string;
-    selectAll: string;
-    excludeResult: string;
-    reverseSelection: string;
-    noData: string;
-    noResult: string;
-    clearSelection: string;
-    clearSelections: string;
-    wrongFormattedData: string;
-    moreSelectedItem: string;
-    moreSelectedItems: string;
-    unknownPropertyValue: string;
-}
-export declare type PartialMessages = {
-    [K in keyof Messages]?: Messages[K];
-};
-export declare function changeTexts(texts: PartialMessages): void;
-export default class SelecticStore extends Vue<Props> {
-    value?: SelectedValue;
-    selectionIsExcluded: boolean;
-    disabled: boolean;
-    options?: OptionProp[];
-    childOptions?: OptionValue[];
-    groups: GroupValue[];
-    texts?: PartialMessages;
-    private params?;
-    private fetchCallback?;
-    private getItemsCallback?;
-    private keepOpenWithOtherSelectic;
-    itemsPerPage: number;
-    state: SelecticStoreState;
-    labels: Messages;
-    private doNotUpdate;
-    private cacheItem;
-    private activeOrder;
-    private dynOffset;
-    private requestId;
-    private cacheRequest;
-    get marginSize(): number;
-    get isPartial(): boolean;
-    get hasAllItems(): boolean;
-    get hasFetchedAllItems(): boolean;
-    get closeSelectic(): () => void;
-    commit<N extends keyof SelecticStoreState, V extends SelecticStoreState[N]>(name: N, value: V): void;
-    getItem(id: OptionId): OptionValue;
-    getItems(ids: OptionId[]): Promise<OptionItem[]>;
-    selectItem(id: OptionId, selected?: boolean, keepOpen?: boolean): void;
-    toggleSelectAll(): void;
-    resetChange(): void;
-    resetErrorMessage(): void;
-    clearCache(forceReset?: boolean): void;
-    changeGroups(groups: GroupValue[]): void;
-    changeTexts(texts: PartialMessages): void;
-    private hasValue;
-    private getValue;
-    private assertCorrectValue;
-    private updateFilteredOptions;
-    private addGroups;
-    private getListOptions;
-    private getElementOptions;
-    private buildAllOptions;
-    private buildFilteredOptions;
-    private buildSelectedOptions;
-    private fetchData;
-    private filterOptions;
-    private addStaticFilteredOptions;
-    private buildSelectedItems;
-    private hasItemInStore;
-    private buildItems;
-    private buildGroupItems;
-    private buildOptionBehavior;
-    private nbGroups;
-    private checkAutoSelect;
-    private checkAutoDisabled;
-    private checkHideFilter;
-    onOptionsChange(options?: OptionValue[], oldOptions?: OptionValue[]): void;
-    onChildOptionsChange(childOptions?: OptionValue[], oldChildOptions?: OptionValue[]): void;
-    onValueChange(): void;
-    onSelectionExcludedChange(): void;
-    onDisabledChange(): void;
-    onFilteredChange(): void;
-    onInternalValueChange(): void;
-    onAllOptionChange(): void;
-    onTotalAllOptionsChange(): void;
-    created(): void;
-}
-export {};