ranui/dist/components/select/index.d.ts

A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.

import { RanElement } from '@/utils/index';
import '@/components/select/option';
import '@/components/dropdown';
import '@/components/select/dropdown-item';
import '@/components/input';
import type { Input } from '@/components/input';
import { EventManager } from '@/utils/builder';
interface Option {
    label: string | number;
    value: string | number;
    disabled?: boolean;
}
export declare class Select extends RanElement {
    static formAssociated: boolean;
    _internals?: ElementInternals;
    _events: EventManager;
    _searchEvents: EventManager;
    removeTimeId?: NodeJS.Timeout;
    _listboxId: string;
    _activeIndex: number;
    _slot: HTMLSlotElement;
    _shadowDom: ShadowRoot;
    _select: HTMLDivElement;
    _selection: HTMLDivElement;
    _search: Input;
    _icon: HTMLElement;
    _selectDropdown?: HTMLDivElement;
    _selectionDropdown?: HTMLElement;
    _selectDropDownInTimeId?: NodeJS.Timeout;
    _selectDropDownOutTimeId?: NodeJS.Timeout;
    _optionList: Option[];
    _optionLabelMapValue: Map<string, string>;
    _optionValueMapLabel: Map<string, string>;
    _activeOption?: HTMLElement;
    _text: HTMLSpanElement;
    _selector: HTMLDivElement;
    onSearch?: (this: HTMLElement, ev: Event) => unknown;
    static get observedAttributes(): string[];
    constructor();
    get value(): string;
    set value(value: string);
    syncFormValue: () => void;
    get defaultValue(): string;
    set defaultValue(value: string);
    get showSearch(): string;
    set showSearch(value: string);
    get type(): string;
    set type(value: string);
    get placement(): string;
    set placement(value: string);
    get sheet(): string;
    set sheet(value: string);
    get getPopupContainerId(): string;
    set getPopupContainerId(value: string);
    get dropdownclass(): string;
    set dropdownclass(value: string);
    get trigger(): string;
    set trigger(value: string);
    get disabled(): boolean;
    set disabled(value: boolean | string | undefined | null);
    initAria: () => void;
    updateAriaExpanded: (isExpanded: boolean) => void;
    getDropdownOptions: () => HTMLElement[];
    syncActiveState: () => void;
    setActiveOptionByIndex: (targetIndex: number) => void;
    selectOptionElement: (optionElement: HTMLElement | null, shouldDispatch?: boolean) => void;
    isDropdownOpen: () => boolean;
    /**
     * Walk from `from` in the direction of `step` (clamped to the list bounds)
     * and return the first non-disabled option index, or -1 if none exists.
     * Keeps keyboard navigation from ever landing on a disabled option.
     */
    _nextEnabledIndex: (from: number, step: number) => number;
    keydownSelect: (e: KeyboardEvent) => void;
    handlerExternalCss(): void;
    /**
     * @description: 移除 select dropdown
     * @return {*}
     */
    setSelectDropdownDisplayNone: () => void;
    /**
     * @description: 添加 select dropdown
     * @return {*}
     */
    setSelectDropdownDisplayBlock: () => void;
    placementPosition: () => void;
    /**
     * The dropdown is mounted on document.body and positioned once on open, so it
     * detaches from the trigger when the page (or any scroll container) scrolls —
     * e.g. a select inside a sticky header. Re-run placement on scroll/resize
     * while it is open. Capture-phase scroll catches nested scroll containers too.
     */
    _repositionBound: boolean;
    _repositionDropdown: () => void;
    _attachReposition: () => void;
    _detachReposition: () => void;
    /**
     * @description: 设置下拉框
     * @return {*}
     */
    selectMouseDown: (e: Event) => void;
    removeDropDownTimeId: (e: Event) => void;
    /**
     * @description: 焦点移除的情况，需要移除 select 下拉框
     * @return {*}
     */
    selectBlur: (e: Event) => void;
    /**
     * @description: 选中一个选项的情况
     * @param {MouseEvent} e
     * @return {*}
     */
    clickOption: (e: MouseEvent) => void;
    /**
     * @description: 初始化创建选项下拉框
     * @return {*}
     */
    createOption: () => void;
    /**
     * @description: 移除选项下拉框
     * @return {*}
     */
    removeSelectDropdown: () => void;
    /**
     * @description: 当 select 中有 option 元素的时候，给 dropdown 添加元素
     * @return {*}
     */
    addOptionToSlot: () => void;
    createSelectDropdownContent: (options?: Option[]) => void;
    setDefaultValue: () => void;
    changeSearch: (e: Event) => void;
    clickRemoveSelect: (e: Event) => void;
    connectedCallback(): void;
    /**
     * (Re)wire the search-box listeners to match the current `showSearch` value.
     * Reactive: abort any previously-registered search listeners first, then
     * re-register only while `showSearch` is truthy. Safe to call on connect and
     * on every `showSearch` attribute change.
     */
    _applyShowSearch: () => void;
    disconnectedCallback(): void;
    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
    /**
     * Reflect a programmatic `value` change to the closed-state label. Lets
     * `select.value = 'x'` (or setAttribute('value', 'x')) update the displayed
     * selection without the consumer having to "nudge" the active option.
     */
    syncSelectedFromValue: (value: string) => void;
}
export default Select;