@type-dom/ui 0.1.0 → 0.1.1

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

@@ -1,11 +1,19 @@
-import { AnyFn, IJsonData, IPrimitive, ITypeConfig, ITypeDiv, XProxy } from '@type-dom/framework';
-import { ISize } from '../../../styles/size';
-import { TdIcon } from '../../basic';
+import { ComputePositionConfig, Placement } from '@type-dom/popper';
+import { AnyFn, ISlotItem, ITypeDiv, TypeDivProps } from '@type-dom/framework';
+import { MaybeRef, Ref } from '@type-dom/signals';
+import { ElArrowDownSvg, ElCircleCloseSvg } from '@type-dom/svgs';
+import { IPrimitive } 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';
 export interface ITdSelect extends ITypeDiv {
     className: 'TdSelect';
 }
-export interface ITdSelectConfig extends ITypeConfig {
+export interface TdSelectProps extends TypeDivProps {
     /**
      * @description the name attribute of select input
      */
@@ -18,7 +26,7 @@ export interface ITdSelectConfig extends ITypeConfig {
      * @description binding value
      *     default: undefined,
      */
-    modelValue?: IPrimitive | object | CheckboxValueType[] | XProxy<IJsonData>;
+    modelValue?: IPrimitive | object | CheckboxValueType[];
     /**
      * @description the autocomplete attribute of select input
      *     default: 'off',
@@ -31,7 +39,7 @@ export interface ITdSelectConfig extends ITypeConfig {
     /**
      * @description size of Input
      */
-    size?: ISize;
+    size?: ComponentSize;
     /**
      * @description tooltip theme, built-in theme: `dark` / `light`
      *     default: 'light',
@@ -56,7 +64,7 @@ export interface ITdSelectConfig extends ITypeConfig {
     /**
      * @description whether Select is loading data from server
      */
-    loading?: boolean;
+    loading?: MaybeRef<boolean>;
     /**
      * @description custom class name for Select's dropdown
      *     default: '',
@@ -65,6 +73,7 @@ export interface ITdSelectConfig extends ITypeConfig {
     /**
      * @description [popper.js](https://popper.js.org/docs/v2/) parameters
      */
+    popperOptions?: Partial<ComputePositionConfig>;
     /**
      * @description whether options are loaded from server
      */
@@ -132,6 +141,7 @@ export interface ITdSelectConfig extends ITypeConfig {
     /**
      * @description whether select dropdown is teleported to the body
      */
+    teleported?: TooltipContentProps['teleported'];
     /**
      * @description when select dropdown is inactive and `persistent` is `false`, select dropdown will be destroyed
      *     default: true,
@@ -141,7 +151,7 @@ export interface ITdSelectConfig extends ITypeConfig {
      * @description custom clear icon component
      *     default: CircleClose,
      */
-    clearIcon?: TdIcon;
+    clearIcon?: typeof ElCircleCloseSvg;
     /**
      * @description whether the width of the dropdown is the same as the input
      */
@@ -150,12 +160,16 @@ export interface ITdSelectConfig extends ITypeConfig {
      * @description custom suffix icon component
      *   default: ArrowDown,
      */
-    suffixIcon?: TdIcon;
+    suffixIcon?: typeof ElArrowDownSvg;
     /**
      * @description tag type
      * default: 'info'
      */
-    tagType?: string;
+    tagType?: IType;
+    /**
+     * @description tag effect
+     */
+    tagEffect?: 'dark' | 'light' | 'plain';
     /**
      * @description whether to trigger form validation
      *     default: true,
@@ -165,16 +179,79 @@ export interface ITdSelectConfig extends ITypeConfig {
      * @description in remote search method show suffix icon
      */
     remoteShowSuffix?: boolean;
+    /**
+     * @description determines whether the arrow is displayed
+     */
+    showArrow?: boolean;
+    /**
+     * @description offset of the dropdown
+     */
+    offset?: number;
     /**
      * @description position of dropdown
      *     default: 'bottom-start',
      */
+    placement?: Placement;
     /**
      * @description list of possible positions for dropdown
      */
+    fallbackPlacements?: Placement[];
+    /**
+     * @description tabindex for input
+     */
+    tabindex?: string | number;
+    /**
+     * @description which element the selection dropdown appends to
+     */
+    appendTo?: string;
     /**
      * @description native input aria-label
      *     default: undefined,
      */
     ariaLabel?: string;
+    /**
+     * @description empty values supported by the component
+     */
+    /**
+     * @description return value when cleared, if you want to set `undefined`, use `() => undefined`
+     */
+    slot?: (TdOption | TdOptionGroup)[];
+    slots?: {
+        tag?: ISlotItem;
+        empty?: ISlotItem;
+        loading?: ISlotItem;
+        prefix?: ISlotItem;
+        header?: ISlotItem;
+        footer?: ISlotItem;
+        label?: (label?: string, value?: string) => string;
+    };
+}
+export interface SelectGroupContext extends OptionGroupProps {
+    disabled?: boolean;
+}
+export interface SelectContext {
+    props: TdSelectProps;
+    states: any;
+    expanded: boolean;
+    selectRef: Ref<HTMLElement | undefined>;
+    optionsArray: any[];
+    setSelected(): void;
+    onOptionCreate(vm: SelectOptionProxy): void;
+    onOptionDestroy(key: number | string | Record<string, string>, vm: SelectOptionProxy): void;
+    handleOptionSelect(vm: SelectOptionProxy): void;
+}
+export interface SelectOptionProxy {
+    value: string | number | Record<string, string>;
+    label: string | number;
+    created: boolean;
+    disabled: boolean;
+    currentLabel: string;
+    itemSelected: boolean;
+    isDisabled: boolean;
+    select: SelectContext;
+    hoverItem: () => void;
+    updateOption: (query: string) => void;
+    visible: boolean;
+    hover: boolean;
+    selectOptionClick: () => void;
 }

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

@@ -1,5 +1,5 @@
 import { IStyle } from '@type-dom/css-type';
-import { ITdSelectConfig } from './td-select.interface';
+import { TdSelectProps } from './td-select.interface';
 export declare const $select: {
     borderColorHover: string;
     disabledColor: string;
@@ -56,9 +56,7 @@ export declare const $selectItemHeight: {
     small: string;
 };
 export declare const $selectStyle: IStyle;
-export declare function mixInputBorder($color: string): {
-    boxShadow: string;
-};
+export declare function mixedInputBorder($color: string): IStyle;
 export declare const $selectWrapperStyle: IStyle;
 export declare const $selectPrefixStyle: IStyle;
 export declare const $selectSuffixStyle: IStyle;
@@ -71,6 +69,6 @@ export declare const $selectPopperStyle: IStyle;
 export declare const $selectInputWrapperStyle: IStyle;
 export declare const $selectInputStyle: IStyle;
 export declare const $selectInputCalculatorStyle: IStyle;
-export declare function useSelectStyle(params: ITdSelectConfig): void;
-export declare function useDisabled(params: ITdSelectConfig): void;
-export declare function useSize(params: ITdSelectConfig): void;
+export declare function useSelectStyle(params: TdSelectProps): void;
+export declare function useDisabled(params: TdSelectProps): void;
+export declare function useSize(params: TdSelectProps): void;

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

@@ -1,14 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.$selectInputCalculatorStyle = exports.$selectInputStyle = exports.$selectInputWrapperStyle = exports.$selectPopperStyle = exports.$selectPlaceholderStyle = exports.$selectTagTextStyle = exports.$selectedItemStyle = exports.$selectSelectionStyle = exports.$selectCaretStyle = exports.$selectSuffixStyle = exports.$selectPrefixStyle = exports.$selectWrapperStyle = exports.$selectStyle = exports.$selectItemHeight = exports.$selectItemGap = exports.$selectNearMarginLeft = exports.$selectWrapperPadding = exports.$selectDropdown = exports.$selectGroup = exports.$selectOption = exports.$select = void 0;
-exports.mixInputBorder = mixInputBorder;
+exports.mixedInputBorder = mixedInputBorder;
 exports.useSelectStyle = useSelectStyle;
 exports.useDisabled = useDisabled;
 exports.useSize = useSize;
-// Select
 const var_1 = require("../../../styles/var");
 const td_input_style_1 = require("../td-input/td-input.style");
 const transition_1 = require("../../../styles/transition");
+// Select
 exports.$select = {
     // borderColorHover: getCssVar('border-color-hover'),
     borderColorHover: var_1.$borderColorHover,
@@ -27,7 +27,7 @@ exports.$select = {
     // inputFocusBorderColor: getCssVar('color-primary'),
     inputFocusBorderColor: var_1.$colorPrimary,
     inputFontSize: '14px',
-    width: '100%'
+    width: '100%',
 };
 exports.$selectOption = {
     // textColor: getCssVar('text-color-regular'),
@@ -38,13 +38,13 @@ exports.$selectOption = {
     // hoverBackground: getCssVar('fill-color', 'light'),
     hoverBackground: var_1.$fillColor.light,
     // selectedTextColor': getCssVar('color-primary'),
-    selectedTextColor: var_1.$colorPrimary
+    selectedTextColor: var_1.$colorPrimary,
 };
 exports.$selectGroup = {
     // 'text-color': getCssVar('color-info'),
     textColor: var_1.$colors.info.base,
     height: '30px',
-    fontSize: '12px'
+    fontSize: '12px',
 };
 exports.$selectDropdown = {
     // bgColor: getCssVar('bg-color', 'overlay'),
@@ -59,39 +59,39 @@ exports.$selectDropdown = {
     headerPadding: '10px',
     footerPadding: '10px',
     // border: 1px solid getCssVar('border-color-light'),
-    border: '1px solid ' + var_1.$borderColor.light
+    border: '1px solid ' + var_1.$borderColor.light,
 };
 exports.$selectWrapperPadding = {
     large: '8px 16px',
     default: '4px 12px',
-    small: '2px 8px'
+    small: '2px 8px',
 };
 exports.$selectNearMarginLeft = {
     large: '-8px',
     default: '-8px',
-    small: '-6px'
+    small: '-6px',
 };
 exports.$selectItemGap = {
     large: '6px',
     default: '6px',
-    small: '4px'
+    small: '4px',
 };
 // the same height of el-tag
 exports.$selectItemHeight = {
     large: '24px',
     default: '24px',
-    small: '20px'
+    small: '20px',
 };
 exports.$selectStyle = {
     display: 'inline-block',
     position: 'relative',
     verticalAlign: 'middle',
     // width: getCssVar('select-width'),
-    width: exports.$select.width
+    width: exports.$select.width,
 };
-function mixInputBorder($color) {
+function mixedInputBorder($color) {
     return {
-        boxShadow: '0 0 0 1px ' + $color + 'inset'
+        boxShadow: '0 0 0 1px ' + $color + ' inset',
     };
 }
 exports.$selectWrapperStyle = Object.assign({ display: 'flex', alignItems: 'center', position: 'relative', boxSizing: 'border-box', cursor: 'pointer', textAlign: 'left', 
@@ -110,7 +110,7 @@ exports.$selectWrapperStyle = Object.assign({ display: 'flex', alignItems: 'cent
     // background-color: getCssVar('fill-color', 'blank'),
     backgroundColor: var_1.$fillColor.blank, 
     // transition: getCssVar('transition', 'duration'),
-    transition: transition_1.$transitionDuration.default, transform: 'translate3d(0, 0, 0)' }, mixInputBorder(var_1.$borderColor.base));
+    transition: transition_1.$transitionDuration.default, transform: 'translate3d(0, 0, 0)' }, mixedInputBorder(var_1.$borderColor.base));
 exports.$selectPrefixStyle = {
     display: 'flex',
     alignItems: 'center',
@@ -121,7 +121,7 @@ exports.$selectPrefixStyle = {
     //   #{getCssVarName('input-icon-color')},
     //   map.get($input, 'icon-color')
     // );
-    color: td_input_style_1.$input.iconColor
+    color: td_input_style_1.$input.iconColor,
 };
 exports.$selectSuffixStyle = {
     display: 'flex',
@@ -133,7 +133,7 @@ exports.$selectSuffixStyle = {
     //   #{getCssVarName('input-icon-color')},
     //   map.get($input, 'icon-color')
     // );
-    color: td_input_style_1.$input.iconColor
+    color: td_input_style_1.$input.iconColor,
 };
 exports.$selectCaretStyle = {
     //   color: getCssVar('select-input-color'),
@@ -143,7 +143,7 @@ exports.$selectCaretStyle = {
     // transition: getCssVar('transition', 'duration'),
     transition: transition_1.$transitionDuration.default,
     transform: 'rotateZ(0deg)',
-    cursor: 'pointer'
+    cursor: 'pointer',
 };
 exports.$selectSelectionStyle = {
     position: 'relative',
@@ -153,12 +153,12 @@ exports.$selectSelectionStyle = {
     flex: 1,
     minWidth: 0,
     // gap: map.get($select-item-gap, 'default'),
-    gap: exports.$selectItemGap.default
+    gap: exports.$selectItemGap.default,
 };
 exports.$selectedItemStyle = {
     display: 'flex',
     flexWrap: 'wrap',
-    userSelect: 'none'
+    userSelect: 'none',
 };
 exports.$selectTagTextStyle = {
     display: 'block',
@@ -166,7 +166,7 @@ exports.$selectTagTextStyle = {
     // @include utils-ellipsis,
     overflow: 'hidden',
     textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap'
+    whiteSpace: 'nowrap',
 };
 exports.$selectPlaceholderStyle = {
     position: 'absolute',
@@ -182,7 +182,7 @@ exports.$selectPlaceholderStyle = {
     //      #{getCssVarName('input-text-color')},
     //      map.get($input, 'text-color')
     // );
-    color: td_input_style_1.$input.textColor
+    color: td_input_style_1.$input.textColor,
 };
 exports.$selectPopperStyle = {
     // @include picker-popper(
@@ -192,10 +192,10 @@ exports.$selectPopperStyle = {
     // );
     backgroundColor: exports.$selectDropdown.bgColor,
     border: exports.$selectDropdown.border,
-    boxShadow: exports.$selectDropdown.shadow
+    boxShadow: exports.$selectDropdown.shadow,
 };
 exports.$selectInputWrapperStyle = {
-    maxWidth: '100%'
+    maxWidth: '100%',
 };
 exports.$selectInputStyle = {
     border: 'none',
@@ -209,7 +209,8 @@ exports.$selectInputStyle = {
     // height: map.get($select-item-height, 'default'),
     height: exports.$selectItemHeight.default,
     maxWidth: '100%',
-    backgroundColor: 'transparent'
+    backgroundColor: 'transparent',
+    width: 11, // add by me;
 };
 exports.$selectInputCalculatorStyle = {
     position: 'absolute',
@@ -218,7 +219,7 @@ exports.$selectInputCalculatorStyle = {
     maxWidth: '100%',
     visibility: 'hidden',
     whiteSpace: 'pre',
-    overflow: 'hidden'
+    overflow: 'hidden',
 };
 function useSelectStyle(params) {
     useSize(params);

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

@@ -0,0 +1,4 @@
+import { InjectionKey } from '@type-dom/framework';
+import { SelectContext, SelectGroupContext } from './td-select.interface';
+export declare const selectGroupKey: InjectionKey<SelectGroupContext>;
+export declare const selectKey: InjectionKey<SelectContext>;

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

@@ -0,0 +1,9 @@
+"use strict";
+// import type { ExtractPropTypes, InjectionKey } from 'vue'
+// import type { SelectProps } from './select'
+Object.defineProperty(exports, "__esModule", { value: true });
+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>

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

@@ -0,0 +1,87 @@
+import { Ref, Computed } from '@type-dom/signals';
+import { IStyle } from '@type-dom/css-type';
+import { UseNamespaceReturn } from '../../../hooks';
+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'>;
+    filteredOptionsCount: Computed<number>;
+    resetCalculatorWidth: () => void;
+    updateTooltip: () => void;
+    updateTagTooltip: () => void;
+    debouncedOnInputChange: DebouncedFunc<() => void>;
+    onInput: (event?: Event) => void;
+    deletePrevTag: (event?: Event) => void;
+    deleteTag: (event?: Event, tag: any) => void;
+    deleteSelected: (event?: Event) => void;
+    handleOptionSelect: (option: any) => void;
+    scrollToOption: (option: any) => void;
+    hasModelValue: Computed<boolean>;
+    shouldShowPlaceholder: Computed<boolean>;
+    currentPlaceholder: Computed<string>;
+    mouseEnterEventName: Ref<string | 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>;
+    updateOptions: () => void;
+    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;
+    handleMenuEnter: () => void;
+    focus: () => void;
+    blur: () => void;
+    handleClearClick: (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>;
+};
+export declare const useSelect: useSelectType;
+export {};