svelte-multiselect 11.4.0 → 11.5.0

package/dist/index.js

@@ -1,42 +0,0 @@
-export * from './attachments';
-export { default as CircleSpinner } from './CircleSpinner.svelte';
-export { default as CmdPalette } from './CmdPalette.svelte';
-export { default as CodeExample } from './CodeExample.svelte';
-export { default as CopyButton } from './CopyButton.svelte';
-export { default as FileDetails } from './FileDetails.svelte';
-export { default as GitHubCorner } from './GitHubCorner.svelte';
-export { default as Icon } from './Icon.svelte';
-export { default, default as MultiSelect } from './MultiSelect.svelte';
-export { default as Nav } from './Nav.svelte';
-export { default as PrevNext } from './PrevNext.svelte';
-export { default as Toggle } from './Toggle.svelte';
-export * from './types';
-export * from './utils';
-export { default as Wiggle } from './Wiggle.svelte';
-// Firefox lacks support for scrollIntoViewIfNeeded (https://caniuse.com/scrollintoviewifneeded).
-// See https://github.com/janosh/svelte-multiselect/issues/87
-// Polyfill copied from
-// https://github.com/nuxodin/lazyfill/blob/a8e63/polyfills/Element/prototype/scrollIntoViewIfNeeded.js
-// exported for testing
-export function scroll_into_view_if_needed_polyfill(element, centerIfNeeded = true) {
-    const observer = new IntersectionObserver(([entry], obs) => {
-        const ratio = entry.intersectionRatio;
-        if (ratio < 1) {
-            const place = ratio <= 0 && centerIfNeeded ? `center` : `nearest`;
-            element.scrollIntoView({
-                block: place,
-                inline: place,
-            });
-        }
-        obs.disconnect();
-    });
-    observer.observe(element);
-    return observer; // return for testing
-}
-if (typeof Element !== `undefined` &&
-    !Element.prototype?.scrollIntoViewIfNeeded &&
-    typeof IntersectionObserver !== `undefined`) {
-    Element.prototype.scrollIntoViewIfNeeded = function scrollIntoViewIfNeeded() {
-        scroll_into_view_if_needed_polyfill(this);
-    };
-}

package/dist/types.d.ts

@@ -1,171 +0,0 @@
-import type { FlipParams } from 'svelte/animate';
-import type { Snippet } from 'svelte';
-import type { HTMLAttributes, HTMLInputAttributes } from 'svelte/elements';
-export type Option = string | number | ObjectOption;
-export type OptionStyle = string | {
-    option: string;
-    selected: string;
-};
-export type ObjectOption = {
-    label: string | number;
-    value?: unknown;
-    title?: string;
-    disabled?: boolean;
-    preselected?: boolean;
-    disabledTitle?: string;
-    selectedTitle?: string;
-    style?: OptionStyle;
-    [key: string]: unknown;
-};
-export type PlaceholderConfig = {
-    text: string;
-    persistent?: boolean;
-};
-export interface MultiSelectEvents<T extends Option = Option> {
-    onadd?: (data: {
-        option: T;
-    }) => unknown;
-    oncreate?: (data: {
-        option: T;
-    }) => unknown;
-    onremove?: (data: {
-        option: T;
-    }) => unknown;
-    onremoveAll?: (data: {
-        options: T[];
-    }) => unknown;
-    onselectAll?: (data: {
-        options: T[];
-    }) => unknown;
-    onchange?: (data: {
-        option?: T;
-        options?: T[];
-        type: `add` | `remove` | `removeAll` | `selectAll`;
-    }) => unknown;
-    onopen?: (data: {
-        event: Event;
-    }) => unknown;
-    onclose?: (data: {
-        event: Event;
-    }) => unknown;
-}
-export interface LoadOptionsParams {
-    search: string;
-    offset: number;
-    limit: number;
-}
-export interface LoadOptionsResult<T extends Option = Option> {
-    options: T[];
-    hasMore: boolean;
-}
-export type LoadOptionsFn<T extends Option = Option> = (params: LoadOptionsParams) => Promise<LoadOptionsResult<T>>;
-export interface LoadOptionsConfig<T extends Option = Option> {
-    fetch: LoadOptionsFn<T>;
-    debounceMs?: number;
-    batchSize?: number;
-    onOpen?: boolean;
-}
-export type LoadOptions<T extends Option = Option> = LoadOptionsFn<T> | LoadOptionsConfig<T>;
-type AfterInputProps = Pick<MultiSelectProps, `selected` | `disabled` | `invalid` | `id` | `placeholder` | `open` | `required`>;
-type UserMsgProps = {
-    searchText: string;
-    msgType: false | `dupe` | `create` | `no-match`;
-    msg: null | string;
-};
-export interface MultiSelectSnippets<T extends Option = Option> {
-    expandIcon?: Snippet<[{
-        open: boolean;
-    }]>;
-    selectedItem?: Snippet<[{
-        option: T;
-        idx: number;
-    }]>;
-    children?: Snippet<[{
-        option: T;
-        idx: number;
-    }]>;
-    removeIcon?: Snippet;
-    afterInput?: Snippet<[AfterInputProps]>;
-    spinner?: Snippet;
-    disabledIcon?: Snippet;
-    option?: Snippet<[{
-        option: T;
-        idx: number;
-    }]>;
-    userMsg?: Snippet<[UserMsgProps]>;
-}
-export interface PortalParams {
-    target_node?: HTMLElement | null;
-    active?: boolean;
-}
-export interface MultiSelectProps<T extends Option = Option> extends MultiSelectEvents<T>, MultiSelectSnippets<T>, Omit<HTMLAttributes<HTMLDivElement>, `children` | `onchange` | `onclose` | `placeholder`> {
-    activeIndex?: number | null;
-    activeOption?: T | null;
-    createOptionMsg?: string | null;
-    allowUserOptions?: boolean | `append`;
-    allowEmpty?: boolean;
-    autocomplete?: HTMLInputAttributes[`autocomplete`];
-    autoScroll?: boolean;
-    breakpoint?: number;
-    defaultDisabledTitle?: string;
-    disabled?: boolean;
-    disabledInputTitle?: string;
-    duplicateOptionMsg?: string;
-    duplicates?: boolean;
-    keepSelectedInDropdown?: false | `plain` | `checkboxes`;
-    key?: (opt: T) => unknown;
-    filterFunc?: (opt: T, searchText: string) => boolean;
-    fuzzy?: boolean;
-    closeDropdownOnSelect?: boolean | `if-mobile` | `retain-focus`;
-    form_input?: HTMLInputElement | null;
-    highlightMatches?: boolean;
-    id?: string | null;
-    input?: HTMLInputElement | null;
-    inputClass?: string;
-    inputStyle?: string | null;
-    inputmode?: HTMLInputAttributes[`inputmode`] | null;
-    invalid?: boolean;
-    liActiveOptionClass?: string;
-    liActiveUserMsgClass?: string;
-    liOptionClass?: string;
-    liOptionStyle?: string | null;
-    liSelectedClass?: string;
-    liSelectedStyle?: string | null;
-    liUserMsgClass?: string;
-    loading?: boolean;
-    matchingOptions?: T[];
-    maxOptions?: number | undefined;
-    maxSelect?: number | null;
-    maxSelectMsg?: ((current: number, max: number) => string) | null;
-    maxSelectMsgClass?: string;
-    name?: string | null;
-    noMatchingOptionsMsg?: string;
-    open?: boolean;
-    options?: T[];
-    outerDiv?: HTMLDivElement | null;
-    outerDivClass?: string;
-    parseLabelsAsHtml?: boolean;
-    pattern?: string | null;
-    placeholder?: string | PlaceholderConfig | null;
-    removeAllTitle?: string;
-    removeBtnTitle?: string;
-    minSelect?: number | null;
-    required?: boolean | number;
-    resetFilterOnAdd?: boolean;
-    searchText?: string;
-    selected?: T[];
-    sortSelected?: boolean | ((op1: T, op2: T) => number);
-    selectedOptionsDraggable?: boolean;
-    style?: string | null;
-    ulOptionsClass?: string;
-    ulSelectedClass?: string;
-    ulSelectedStyle?: string | null;
-    ulOptionsStyle?: string | null;
-    value?: T | T[] | null;
-    portal?: PortalParams;
-    selectAllOption?: boolean | string;
-    liSelectAllClass?: string;
-    loadOptions?: LoadOptions<T>;
-    selectedFlipParams?: FlipParams;
-}
-export {};

package/dist/types.js

@@ -1 +0,0 @@
-export {};

package/dist/utils.d.ts

@@ -1,5 +0,0 @@
-import type { Option } from './types';
-export declare const is_object: (val: unknown) => val is Record<string, unknown>;
-export declare const get_label: (opt: Option) => string | number;
-export declare function get_style(option: Option, key?: `selected` | `option` | null | undefined): string;
-export declare function fuzzy_match(search_text: string, target_text: string): boolean;

package/dist/utils.js

@@ -1,61 +0,0 @@
-// Type guard for checking if a value is a non-null object
-export const is_object = (val) => typeof val === `object` && val !== null;
-// Get the label key from an option object or the option itself
-// if it's a string or number
-export const get_label = (opt) => {
-    if (is_object(opt)) {
-        if (opt.label === undefined) {
-            const opt_str = JSON.stringify(opt);
-            console.error(`MultiSelect: option is an object but has no label key`, opt_str);
-        }
-        return opt.label;
-    }
-    return `${opt}`;
-};
-// This function is used extract CSS strings from a {selected, option} style
-// object to be used in the style attribute of the option.
-// If the style is a string, it will be returned as is
-export function get_style(option, key = null) {
-    if (key === undefined)
-        key = null;
-    let css_str = ``;
-    const valid_key = key === null || key === `selected` || key === `option`;
-    if (!valid_key)
-        console.error(`MultiSelect: Invalid key=${key} for get_style`);
-    if (typeof option === `object` && option.style) {
-        if (typeof option.style === `string`)
-            css_str = option.style;
-        if (typeof option.style === `object`) {
-            if (key && key in option.style)
-                return option.style[key] ?? ``;
-            else {
-                console.error(`MultiSelect: invalid style object for option`, option);
-            }
-        }
-    }
-    // ensure css_str ends with a semicolon
-    if (css_str.trim() && !css_str.trim().endsWith(`;`))
-        css_str += `;`;
-    return css_str;
-}
-// Fuzzy string matching function
-// Returns true if the search string can be found as a subsequence in the target string
-// e.g., "tageoo" matches "tasks/geo-opt" because t-a-g-e-o-o appears in order
-export function fuzzy_match(search_text, target_text) {
-    // Handle null/undefined inputs first
-    if (search_text === null || search_text === undefined || target_text === null ||
-        target_text === undefined)
-        return false;
-    if (!search_text)
-        return true;
-    if (!target_text)
-        return false;
-    const [search, target] = [search_text.toLowerCase(), target_text.toLowerCase()];
-    let [search_idx, target_idx] = [0, 0];
-    while (search_idx < search.length && target_idx < target.length) {
-        if (search[search_idx] === target[target_idx])
-            search_idx++;
-        target_idx++;
-    }
-    return search_idx === search.length;
-}