@type-dom/ui 0.1.1 → 0.1.2

package/src/components/form/td-select/td-select.interface.d.ts

@@ -1,15 +1,15 @@
 import { ComputePositionConfig, Placement } from '@type-dom/popper';
-import { AnyFn, ISlotItem, ITypeDiv, TypeDivProps } from '@type-dom/framework';
-import { MaybeRef, Ref } from '@type-dom/signals';
+import { ISlotItem, ITypeDiv, TypeDivProps } from '@type-dom/framework';
+import { MaybeRef, Ref, ToRefs } from '@type-dom/signals';
 import { ElArrowDownSvg, ElCircleCloseSvg } from '@type-dom/svgs';
-import { IPrimitive } from '@type-dom/utils';
+import { AnyFn } from '@type-dom/utils';
 import { ComponentSize } from '../../../constants/size';
 import { IType } from '../../../styles';
 import { TooltipContentProps } from '../../feedback/td-tooltip/content/content.interface';
-import { CheckboxValueType } from '../td-checkbox/td-checkbox.interface';
 import { TdOption } from '../td-option/td-option.class';
 import { TdOptionGroup } from '../td-option-group/td-option-group.class';
 import { OptionGroupProps } from '../td-option-group/td-option-group.interface';
+import { OptionBasic, OptionValue } from '../td-option/td-option.interface';
 export interface ITdSelect extends ITypeDiv {
     className: 'TdSelect';
 }
@@ -26,7 +26,7 @@ export interface TdSelectProps extends TypeDivProps {
      * @description binding value
      *     default: undefined,
      */
-    modelValue?: IPrimitive | object | CheckboxValueType[];
+    modelValue?: OptionValue | OptionValue[];
     /**
      * @description the autocomplete attribute of select input
      *     default: 'off',
@@ -168,6 +168,7 @@ export interface TdSelectProps extends TypeDivProps {
     tagType?: IType;
     /**
      * @description tag effect
+     * default: 'light'
      */
     tagEffect?: 'dark' | 'light' | 'plain';
     /**
@@ -181,10 +182,12 @@ export interface TdSelectProps extends TypeDivProps {
     remoteShowSuffix?: boolean;
     /**
      * @description determines whether the arrow is displayed
+     *     default: true,
      */
     showArrow?: boolean;
     /**
      * @description offset of the dropdown
+     *     default: 12,
      */
     offset?: number;
     /**
@@ -198,6 +201,7 @@ export interface TdSelectProps extends TypeDivProps {
     fallbackPlacements?: Placement[];
     /**
      * @description tabindex for input
+     *     default: 0,
      */
     tabindex?: string | number;
     /**
@@ -212,9 +216,11 @@ export interface TdSelectProps extends TypeDivProps {
     /**
      * @description empty values supported by the component
      */
+    emptyValues?: any[];
     /**
      * @description return value when cleared, if you want to set `undefined`, use `() => undefined`
      */
+    valueOnClear?: string | number | boolean | AnyFn;
     slot?: (TdOption | TdOptionGroup)[];
     slots?: {
         tag?: ISlotItem;
@@ -223,23 +229,38 @@ export interface TdSelectProps extends TypeDivProps {
         prefix?: ISlotItem;
         header?: ISlotItem;
         footer?: ISlotItem;
-        label?: (label?: string, value?: string) => string;
+        label?: (label?: string | number | boolean | undefined, value?: string) => string;
     };
 }
 export interface SelectGroupContext extends OptionGroupProps {
     disabled?: boolean;
 }
 export interface SelectContext {
-    props: TdSelectProps;
+    props: ToRefs<TdSelectProps>;
     states: any;
-    expanded: boolean;
+    expanded?: boolean;
     selectRef: Ref<HTMLElement | undefined>;
-    optionsArray: any[];
+    optionsArray?: any[];
     setSelected(): void;
-    onOptionCreate(vm: SelectOptionProxy): void;
-    onOptionDestroy(key: number | string | Record<string, string>, vm: SelectOptionProxy): void;
-    handleOptionSelect(vm: SelectOptionProxy): void;
+    onOptionCreate(vm?: TdOption): void;
+    onOptionDestroy(key: string | number | boolean | object | undefined, vm: TdOption): void;
+    handleOptionSelect(vm?: TdOption): void;
 }
+export type SelectStates = {
+    inputValue: string;
+    options: Map<OptionValue, TdOption>;
+    cachedOptions: Map<OptionValue, TdOption>;
+    optionValues: OptionValue[];
+    selected: OptionBasic[];
+    hoveringIndex: number;
+    inputHovering: boolean;
+    selectionWidth: number;
+    collapseItemWidth: number;
+    previousQuery: string | null;
+    selectedLabel: string;
+    menuVisibleOnFocus: boolean;
+    isBeforeHide: boolean;
+};
 export interface SelectOptionProxy {
     value: string | number | Record<string, string>;
     label: string | number;

package/src/components/form/td-select/token.js

@@ -6,4 +6,4 @@ exports.selectKey = exports.selectGroupKey = void 0;
 // For individual build sharing injection key, we had to make `Symbol` to string
 exports.selectGroupKey = Symbol('TdSelectGroup');
 exports.selectKey = Symbol('TdSelect');
-// export type ISelectProps = ExtractPropTypes<typeof SelectProps>
+// export type ISelectProps = ExtractPropTypes<TdSelectProps>

package/src/components/form/td-select/useSelect.d.ts

@@ -1,87 +1,134 @@
-import { Ref, Computed } from '@type-dom/signals';
-import { IStyle } from '@type-dom/css-type';
-import { UseNamespaceReturn } from '../../../hooks';
+import { Ref, Computed, ToRefs, Signal } from '@type-dom/signals';
+import { AnyFn } from '@type-dom/utils';
 import { TdTooltip } from '../../feedback/td-tooltip/td-tooltip.class';
-import type { ISelectProps, SelectOptionProxy } from './token';
-type useSelectType = (props: ISelectProps, emit: any) => {
-    inputId: Ref<string | undefined>;
-    contentId: Ref<string | undefined>;
-    nsSelect: UseNamespaceReturn;
-    nsInput: UseNamespaceReturn;
-    states: Record<string, any>;
-    isFocused: Ref<boolean>;
-    expanded: Ref<boolean>;
-    optionsArray: Computed<any[]>;
-    hoverOption: Ref<unknown>;
-    selectSize: Computed<'' | 'default' | 'small' | 'large'>;
+import { TdScrollbar } from '../../basic/td-scrollbar/td-scrollbar.class';
+import { TdOption } from '../td-option/td-option.class';
+import { OptionBasic, TdOptionProps } from '../td-option/td-option.interface';
+import { TdSelectProps } from './td-select.interface';
+export declare const useSelect: (props: ToRefs<TdSelectProps>, emit: AnyFn) => {
+    inputId: Signal<string | undefined>;
+    contentId: Computed<string>;
+    nsSelect: {
+        namespace: Computed<string>;
+        b: (blockSuffix?: string) => string;
+        e: (element?: string) => string;
+        m: (modifier?: string) => string;
+        be: (blockSuffix?: string, element?: string) => string;
+        em: (element?: string, modifier?: string) => string;
+        bm: (blockSuffix?: string, modifier?: string) => string;
+        bem: (blockSuffix?: string, element?: string, modifier?: string) => string;
+        is: {
+            (name: string, state: boolean | "" | undefined): string;
+            (name: string): string;
+        };
+        cssVar: (object: Record<string, string>) => Record<string, string>;
+        cssVarName: (name: string) => string;
+        cssVarBlock: (object: Record<string, string>) => Record<string, string>;
+        cssVarBlockName: (name: string) => string;
+    };
+    nsInput: {
+        namespace: Computed<string>;
+        b: (blockSuffix?: string) => string;
+        e: (element?: string) => string;
+        m: (modifier?: string) => string;
+        be: (blockSuffix?: string, element?: string) => string;
+        em: (element?: string, modifier?: string) => string;
+        bm: (blockSuffix?: string, modifier?: string) => string;
+        bem: (blockSuffix?: string, element?: string, modifier?: string) => string;
+        is: {
+            (name: string, state: boolean | "" | undefined): string;
+            (name: string): string;
+        };
+        cssVar: (object: Record<string, string>) => Record<string, string>;
+        cssVarName: (name: string) => string;
+        cssVarBlock: (object: Record<string, string>) => Record<string, string>;
+        cssVarBlockName: (name: string) => string;
+    };
+    states: {
+        inputValue: Signal<string>;
+        options: Signal<Map<string | number | boolean | object | undefined, TdOption>>;
+        cachedOptions: Map<string | number | boolean | object | undefined, TdOption>;
+        optionValues: TdOptionProps[];
+        selected: OptionBasic[];
+        selectionWidth: number;
+        collapseItemWidth: number | undefined;
+        selectedLabel: Signal<string | number | boolean>;
+        hoveringIndex: number;
+        previousQuery: string | null;
+        inputHovering: boolean;
+        menuVisibleOnFocus: boolean;
+        isBeforeHide: boolean;
+    };
+    isFocused: Signal<boolean>;
+    expanded: Signal<boolean>;
+    optionsArray: Computed<TdOption[]>;
+    hoverOption: Signal<unknown>;
+    selectSize: Computed<"" | "default" | "small" | "large">;
     filteredOptionsCount: Computed<number>;
-    resetCalculatorWidth: () => void;
     updateTooltip: () => void;
     updateTagTooltip: () => void;
-    debouncedOnInputChange: DebouncedFunc<() => void>;
+    debouncedOnInputChange: import("lodash").DebouncedFunc<() => void>;
     onInput: (event?: Event) => void;
-    deletePrevTag: (event?: Event) => void;
-    deleteTag: (event?: Event, tag: any) => void;
+    deletePrevTag: (e: KeyboardEvent) => void;
+    deleteTag: (event?: Event, tag?: any) => void;
     deleteSelected: (event?: Event) => void;
-    handleOptionSelect: (option: any) => void;
+    handleOptionSelect: (option: TdOption) => void;
     scrollToOption: (option: any) => void;
     hasModelValue: Computed<boolean>;
     shouldShowPlaceholder: Computed<boolean>;
-    currentPlaceholder: Computed<string>;
-    mouseEnterEventName: Ref<string | null>;
+    currentPlaceholder: Computed<string | number | boolean>;
+    mouseEnterEventName: Computed<"mouseenter" | null>;
     needStatusIcon: Computed<boolean>;
-    showClose: Computed<boolean>;
-    iconComponent: Computed<string>;
-    iconReverse: Computed<boolean>;
-    validateState: Computed<string>;
-    popupScroll: (data: {
-        scrollTop: number;
-        scrollLeft: number;
-    }) => void;
-    validateIcon: Computed<unknown>;
-    showNewOption: Computed<boolean>;
+    showClose: Computed<boolean | undefined>;
+    iconComponent: Computed<"" | typeof import("@type-dom/svgs").ElArrowDownSvg | undefined>;
+    iconReverse: Computed<string>;
+    validateState: Computed<"success" | "error" | "" | "validating" | Ref<"" | "success" | "error" | "validating">>;
+    validateIcon: Computed<typeof import("@type-dom/svgs").ElLoadingSvg | typeof import("@type-dom/svgs").ElCircleCheckSvg | typeof import("@type-dom/svgs").ElCircleCloseSvg>;
+    showNewOption: Computed<boolean | undefined>;
     updateOptions: () => void;
-    collapseTagSize: Computed<'default' | 'small'>;
+    collapseTagSize: Computed<"default" | "small">;
     setSelected: () => void;
-    selectDisabled: Computed<boolean>;
-    emptyText: Computed<string | null>;
-    handleCompositionStart: (e?: Event) => void;
-    handleCompositionUpdate: (e?: Event) => void;
-    handleCompositionEnd: (e?: Event) => void;
-    onOptionCreate: (vm: SelectOptionProxy) => void;
-    onOptionDestroy: (key: any, vm: SelectOptionProxy) => void;
+    selectDisabled: Computed<boolean | undefined>;
+    emptyText: Computed<string | undefined>;
+    handleCompositionStart: (event?: CompositionEvent) => void;
+    handleCompositionUpdate: (event?: CompositionEvent) => void;
+    handleCompositionEnd: (event?: CompositionEvent) => void;
+    onOptionCreate: (vm: TdOption) => void;
+    onOptionDestroy: (key: any, vm: TdOption) => void;
     handleMenuEnter: () => void;
     focus: () => void;
     blur: () => void;
     handleClearClick: (event?: Event) => void;
-    handleClickOutside: (event?: Event) => void;
+    handleClickOutside: (event: Event) => void;
     handleEsc: () => void;
     toggleMenu: () => void;
     selectOption: () => void;
     getValueKey: (item: any) => any;
     navigateOptions: (direction: string) => void;
     dropdownMenuVisible: Computed<boolean>;
-    showTagList: Computed<unknown[]>;
-    collapseTagList: Computed<unknown[]>;
-    tagStyle: Computed<unknown>;
-    collapseTagStyle: Computed<IStyle>;
-    inputStyle: Computed<unknown>;
-    popperRef: Computed<unknown>;
-    inputRef: Ref<HTMLInputElement | undefined>;
-    tooltipRef: Ref<TdTooltip | undefined>;
-    tagTooltipRef: Ref<TdTooltip | undefined>;
-    calculatorRef: Ref<HTMLElement>;
-    prefixRef: Ref<HTMLElement>;
-    suffixRef: Ref<HTMLElement>;
-    selectRef: Ref<HTMLElement>;
-    wrapperRef: Ref<HTMLElement>;
-    selectionRef: Ref<HTMLElement>;
-    scrollbarRef: Ref<{
-        handleScroll: () => void;
-    } | undefined>;
-    menuRef: Ref<HTMLElement>;
-    tagMenuRef: Ref<HTMLElement>;
-    collapseItemRef: Ref<HTMLElement>;
+    showTagList: Computed<OptionBasic[]>;
+    collapseTagList: Computed<OptionBasic[]>;
+    popupScroll: (data: {
+        scrollTop: number;
+        scrollLeft: number;
+    }) => void;
+    tagStyle: Computed<{
+        maxWidth: string;
+    }>;
+    collapseTagStyle: Computed<{
+        maxWidth: string;
+    }>;
+    popperRef: Computed<HTMLElement | undefined>;
+    inputRef: Signal<HTMLInputElement | undefined>;
+    tooltipRef: Signal<TdTooltip | undefined>;
+    tagTooltipRef: Signal<TdTooltip | undefined>;
+    prefixRef: Signal<HTMLElement | undefined>;
+    suffixRef: Signal<HTMLElement | undefined>;
+    selectRef: Signal<HTMLElement | undefined>;
+    wrapperRef: Signal<HTMLElement>;
+    selectionRef: Signal<HTMLElement | undefined>;
+    scrollbarRef: Signal<TdScrollbar | undefined>;
+    menuRef: Signal<HTMLElement | undefined>;
+    tagMenuRef: Signal<HTMLElement | undefined>;
+    collapseItemRef: Signal<HTMLElement | undefined>;
 };
-export declare const useSelect: useSelectType;
-export {};