@type-dom/ui 0.0.10 → 0.1.1

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

@@ -1,10 +1,19 @@
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
-import { IJsonData, IPrimitive, XProxy } from '@type-dom/framework';
-import { ISize } from '../../../styles/size';
-export interface ITdSelect extends IUI {
+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 IUIConfig {
+export interface TdSelectProps extends TypeDivProps {
     /**
      * @description the name attribute of select input
      */
@@ -17,7 +26,7 @@ export interface ITdSelectConfig extends IUIConfig {
      * @description binding value
      *     default: undefined,
      */
-    modelValue?: IPrimitive | XProxy<IJsonData>;
+    modelValue?: IPrimitive | object | CheckboxValueType[];
     /**
      * @description the autocomplete attribute of select input
      *     default: 'off',
@@ -30,7 +39,7 @@ export interface ITdSelectConfig extends IUIConfig {
     /**
      * @description size of Input
      */
-    size?: ISize;
+    size?: ComponentSize;
     /**
      * @description tooltip theme, built-in theme: `dark` / `light`
      *     default: 'light',
@@ -55,7 +64,7 @@ export interface ITdSelectConfig extends IUIConfig {
     /**
      * @description whether Select is loading data from server
      */
-    loading?: boolean;
+    loading?: MaybeRef<boolean>;
     /**
      * @description custom class name for Select's dropdown
      *     default: '',
@@ -64,6 +73,7 @@ export interface ITdSelectConfig extends IUIConfig {
     /**
      * @description [popper.js](https://popper.js.org/docs/v2/) parameters
      */
+    popperOptions?: Partial<ComputePositionConfig>;
     /**
      * @description whether options are loaded from server
      */
@@ -83,9 +93,11 @@ export interface ITdSelectConfig extends IUIConfig {
     /**
      * @description custom remote search method
      */
+    remoteMethod?: AnyFn;
     /**
      * @description custom filter method
      */
+    filterMethod?: AnyFn;
     /**
      * @description whether multiple-select is activated
      */
@@ -129,6 +141,7 @@ export interface ITdSelectConfig extends IUIConfig {
     /**
      * @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,
@@ -136,18 +149,27 @@ export interface ITdSelectConfig extends IUIConfig {
     persistent?: boolean;
     /**
      * @description custom clear icon component
+     *     default: CircleClose,
      */
+    clearIcon?: typeof ElCircleCloseSvg;
     /**
      * @description whether the width of the dropdown is the same as the input
      */
     fitInputWidth?: boolean;
     /**
      * @description custom suffix icon component
+     *   default: ArrowDown,
      */
+    suffixIcon?: typeof ElArrowDownSvg;
     /**
      * @description tag type
      * default: 'info'
      */
+    tagType?: IType;
+    /**
+     * @description tag effect
+     */
+    tagEffect?: 'dark' | 'light' | 'plain';
     /**
      * @description whether to trigger form validation
      *     default: true,
@@ -157,16 +179,79 @@ export interface ITdSelectConfig extends IUIConfig {
      * @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,3 +1,5 @@
+import { IStyle } from '@type-dom/css-type';
+import { TdSelectProps } from './td-select.interface';
 export declare const $select: {
     borderColorHover: string;
     disabledColor: string;
@@ -5,6 +7,8 @@ export declare const $select: {
     fontSize: string;
     closeHoverColor: string;
     inputColor: string;
+    multipleInputColor: string;
+    inputFocusBorderColor: string;
     inputFontSize: string;
     width: string;
 };
@@ -51,3 +55,20 @@ export declare const $selectItemHeight: {
     default: string;
     small: string;
 };
+export declare const $selectStyle: IStyle;
+export declare function mixedInputBorder($color: string): IStyle;
+export declare const $selectWrapperStyle: IStyle;
+export declare const $selectPrefixStyle: IStyle;
+export declare const $selectSuffixStyle: IStyle;
+export declare const $selectCaretStyle: IStyle;
+export declare const $selectSelectionStyle: IStyle;
+export declare const $selectedItemStyle: IStyle;
+export declare const $selectTagTextStyle: IStyle;
+export declare const $selectPlaceholderStyle: IStyle;
+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: 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,8 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.$selectItemHeight = exports.$selectItemGap = exports.$selectNearMarginLeft = exports.$selectWrapperPadding = exports.$selectDropdown = exports.$selectGroup = exports.$selectOption = exports.$select = void 0;
-// Select
+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.mixedInputBorder = mixedInputBorder;
+exports.useSelectStyle = useSelectStyle;
+exports.useDisabled = useDisabled;
+exports.useSize = useSize;
 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,
@@ -17,9 +23,11 @@ exports.$select = {
     // inputColor: getCssVar('text-color-placeholder'),
     inputColor: var_1.$textColor.placeholder,
     // multipleInputColor: getCssVar('text-color-regular'),
+    multipleInputColor: var_1.$textColor.regular,
     // inputFocusBorderColor: getCssVar('color-primary'),
+    inputFocusBorderColor: var_1.$colorPrimary,
     inputFontSize: '14px',
-    width: '100%'
+    width: '100%',
 };
 exports.$selectOption = {
     // textColor: getCssVar('text-color-regular'),
@@ -30,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'),
@@ -51,26 +59,188 @@ 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,
+};
+function mixedInputBorder($color) {
+    return {
+        boxShadow: '0 0 0 1px ' + $color + ' inset',
+    };
+}
+exports.$selectWrapperStyle = Object.assign({ display: 'flex', alignItems: 'center', position: 'relative', boxSizing: 'border-box', cursor: 'pointer', textAlign: 'left', 
+    // font-size: map.get($input-font-size, 'default'),
+    fontSize: td_input_style_1.$inputFontSize.default, 
+    // padding: map.get($select-wrapper-padding, 'default'),
+    padding: exports.$selectWrapperPadding.default, 
+    // gap: map.get($select-item-gap, 'default'),
+    gap: exports.$selectItemGap.default, 
+    // min-height: map.get($input-height, 'default'),
+    minHeight: td_input_style_1.$inputHeight.default, 
+    // line-height: map.get($select-item-height, 'default'),
+    lineHeight: exports.$selectItemHeight.default, 
+    // border-radius: getCssVar('border-radius-base'),
+    borderRadius: var_1.$borderRadius.base, 
+    // 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)' }, mixedInputBorder(var_1.$borderColor.base));
+exports.$selectPrefixStyle = {
+    display: 'flex',
+    alignItems: 'center',
+    flexShrink: 0,
+    // gap: map.get($select-item-gap, 'default'),
+    gap: exports.$selectItemGap.default,
+    // color: var(
+    //   #{getCssVarName('input-icon-color')},
+    //   map.get($input, 'icon-color')
+    // );
+    color: td_input_style_1.$input.iconColor,
+};
+exports.$selectSuffixStyle = {
+    display: 'flex',
+    alignItems: 'center',
+    flexShrink: 0,
+    // gap: map.get($select-item-gap, 'default'),
+    gap: exports.$selectItemGap.default,
+    // color: var(
+    //   #{getCssVarName('input-icon-color')},
+    //   map.get($input, 'icon-color')
+    // );
+    color: td_input_style_1.$input.iconColor,
+};
+exports.$selectCaretStyle = {
+    //   color: getCssVar('select-input-color'),
+    color: exports.$select.inputColor,
+    //   font-size: getCssVar('select-input-font-size'),
+    fontSize: exports.$select.inputFontSize,
+    // transition: getCssVar('transition', 'duration'),
+    transition: transition_1.$transitionDuration.default,
+    transform: 'rotateZ(0deg)',
+    cursor: 'pointer',
+};
+exports.$selectSelectionStyle = {
+    position: 'relative',
+    display: 'flex',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    flex: 1,
+    minWidth: 0,
+    // gap: map.get($select-item-gap, 'default'),
+    gap: exports.$selectItemGap.default,
+};
+exports.$selectedItemStyle = {
+    display: 'flex',
+    flexWrap: 'wrap',
+    userSelect: 'none',
+};
+exports.$selectTagTextStyle = {
+    display: 'block',
+    lineHeight: 'normal',
+    // @include utils-ellipsis,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+};
+exports.$selectPlaceholderStyle = {
+    position: 'absolute',
+    display: 'block',
+    top: '50%',
+    transform: 'translateY(-50%)',
+    width: '100%',
+    //    @include utils-ellipsis;
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    //    color: var(
+    //      #{getCssVarName('input-text-color')},
+    //      map.get($input, 'text-color')
+    // );
+    color: td_input_style_1.$input.textColor,
+};
+exports.$selectPopperStyle = {
+    // @include picker-popper(
+    //   map.get($select-dropdown, 'bg-color'),
+    //   map.get($select-dropdown, 'border'),
+    //   map.get($select-dropdown, 'shadow')
+    // );
+    backgroundColor: exports.$selectDropdown.bgColor,
+    border: exports.$selectDropdown.border,
+    boxShadow: exports.$selectDropdown.shadow,
+};
+exports.$selectInputWrapperStyle = {
+    maxWidth: '100%',
+};
+exports.$selectInputStyle = {
+    border: 'none',
+    outline: 'none',
+    padding: 0,
+    // color: getCssVar('select-multiple-input-color'),
+    color: exports.$select.multipleInputColor,
+    fontSize: 'inherit',
+    fontFamily: 'inherit',
+    appearance: 'none',
+    // height: map.get($select-item-height, 'default'),
+    height: exports.$selectItemHeight.default,
+    maxWidth: '100%',
+    backgroundColor: 'transparent',
+    width: 11, // add by me;
+};
+exports.$selectInputCalculatorStyle = {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    maxWidth: '100%',
+    visibility: 'hidden',
+    whiteSpace: 'pre',
+    overflow: 'hidden',
 };
+function useSelectStyle(params) {
+    useSize(params);
+    useDisabled(params);
+}
+function useDisabled(params) {
+    const disabled = params.disabled;
+    if (disabled) {
+    }
+    else {
+    }
+}
+function useSize(params) {
+    const size = params.size || 'default';
+    exports.$selectWrapperStyle.gap = exports.$selectItemGap[size];
+    exports.$selectWrapperStyle.padding = exports.$selectWrapperPadding[size];
+    exports.$selectWrapperStyle.minHeight = exports.$selectItemHeight[size];
+    exports.$selectWrapperStyle.lineHeight = exports.$selectItemHeight[size];
+    exports.$selectWrapperStyle.fontSize = td_input_style_1.$inputFontSize[size];
+    exports.$selectSelectionStyle.gap = exports.$selectItemGap[size];
+    exports.$selectPrefixStyle.gap = exports.$selectItemGap[size];
+    exports.$selectSuffixStyle.gap = exports.$selectItemGap[size];
+    exports.$selectInputStyle.height = exports.$selectItemHeight[size];
+}

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 {};