@type-dom/ui 0.0.9 → 0.1.0

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

@@ -1,10 +1,11 @@
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
-import { IJsonData, IPrimitive, XProxy } from '@type-dom/framework';
+import { AnyFn, IJsonData, IPrimitive, ITypeConfig, ITypeDiv, XProxy } from '@type-dom/framework';
 import { ISize } from '../../../styles/size';
-export interface ITdSelect extends IUI {
+import { TdIcon } from '../../basic';
+import { CheckboxValueType } from '../td-checkbox/td-checkbox.interface';
+export interface ITdSelect extends ITypeDiv {
     className: 'TdSelect';
 }
-export interface ITdSelectConfig extends IUIConfig {
+export interface ITdSelectConfig extends ITypeConfig {
     /**
      * @description the name attribute of select input
      */
@@ -17,7 +18,7 @@ export interface ITdSelectConfig extends IUIConfig {
      * @description binding value
      *     default: undefined,
      */
-    modelValue?: IPrimitive | XProxy<IJsonData>;
+    modelValue?: IPrimitive | object | CheckboxValueType[] | XProxy<IJsonData>;
     /**
      * @description the autocomplete attribute of select input
      *     default: 'off',
@@ -83,9 +84,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
      */
@@ -136,18 +139,23 @@ export interface ITdSelectConfig extends IUIConfig {
     persistent?: boolean;
     /**
      * @description custom clear icon component
+     *     default: CircleClose,
      */
+    clearIcon?: TdIcon;
     /**
      * @description whether the width of the dropdown is the same as the input
      */
     fitInputWidth?: boolean;
     /**
      * @description custom suffix icon component
+     *   default: ArrowDown,
      */
+    suffixIcon?: TdIcon;
     /**
      * @description tag type
      * default: 'info'
      */
+    tagType?: string;
     /**
      * @description whether to trigger form validation
      *     default: true,

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

@@ -1,3 +1,5 @@
+import { IStyle } from '@type-dom/css-type';
+import { ITdSelectConfig } 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,22 @@ export declare const $selectItemHeight: {
     default: string;
     small: string;
 };
+export declare const $selectStyle: IStyle;
+export declare function mixInputBorder($color: string): {
+    boxShadow: string;
+};
+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: ITdSelectConfig): void;
+export declare function useDisabled(params: ITdSelectConfig): void;
+export declare function useSize(params: ITdSelectConfig): 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;
+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.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");
 exports.$select = {
     // borderColorHover: getCssVar('border-color-hover'),
     borderColorHover: var_1.$borderColorHover,
@@ -17,7 +23,9 @@ 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%'
 };
@@ -74,3 +82,164 @@ exports.$selectItemHeight = {
     default: '24px',
     small: '20px'
 };
+exports.$selectStyle = {
+    display: 'inline-block',
+    position: 'relative',
+    verticalAlign: 'middle',
+    // width: getCssVar('select-width'),
+    width: exports.$select.width
+};
+function mixInputBorder($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)' }, mixInputBorder(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'
+};
+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-switch/td-switch.class.d.ts

@@ -1,7 +1,6 @@
-import { Input } from '@type-dom/framework';
-import { UI } from '../../../ui/ui.abstract';
+import { Input, TypeDiv } from '@type-dom/framework';
 import { ITdSwitch, ITdSwitchConfig } from './td-switch.interface';
-export declare class TdSwitch extends UI implements ITdSwitch {
+export declare class TdSwitch extends TypeDiv implements ITdSwitch {
     className: 'TdSwitch';
     props: ITdSwitchConfig;
     input: Input;

package/src/components/form/td-switch/td-switch.class.js

@@ -3,17 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdSwitch = void 0;
 const utils_1 = require("@type-dom/utils");
 const framework_1 = require("@type-dom/framework");
-const ui_abstract_1 = require("../../../ui/ui.abstract");
 const var_1 = require("../../../styles/var");
 const event_1 = require("../../../constants/event");
 const td_switch_core_1 = require("./widget/td-switch-core");
 const td_switch_left_1 = require("./widget/td-switch-left");
 const td_switch_right_1 = require("./widget/td-switch-right");
 const td_switch_style_1 = require("./td-switch.style");
-class TdSwitch extends ui_abstract_1.UI {
+class TdSwitch extends framework_1.TypeDiv {
     constructor(params = {}) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        super(params);
+        super();
         this.className = 'TdSwitch';
         this.style.addObj({
             display: 'inline-flex',

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

@@ -1,10 +1,9 @@
-import { TypeSvgSvg } from '@type-dom/framework';
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
+import { ITypeConfig, ITypeDiv, TypeSvgSvg } from '@type-dom/framework';
 import { CHANGE_EVENT, INPUT_EVENT, UPDATE_MODEL_EVENT } from '../../../constants/event';
-export interface ITdSwitch extends IUI {
+export interface ITdSwitch extends ITypeDiv {
     className: 'TdSwitch';
 }
-export interface ITdSwitchConfig extends IUIConfig {
+export interface ITdSwitchConfig extends ITypeConfig {
     /**
      * @description binding value, it should be equivalent to either `active-value` or `inactive-value`, by default it's `boolean` type
      * default: false

package/src/components/form/td-switch/widget/td-switch-core.js

@@ -28,9 +28,9 @@ class TdSwitchCore extends framework_1.TypeSpan {
             // transition: border-color var(--el-transition-duration), background-color var(--el-transition-duration);
             transition: var_1.$borderColor.base +
                 ' ' +
-                var_1.$transitionDuration +
+                var_1.$transitionDurationDefault +
                 ', background-color ' +
-                var_1.$transitionDuration,
+                var_1.$transitionDurationDefault,
             // minWidth: map.get($switch-core-width, 'default');
             minWidth: td_switch_style_1.$switchCoreWidth[(params === null || params === void 0 ? void 0 : params.size) || 'default'],
             // height: map.get($switch-core-height, 'default');
@@ -42,7 +42,7 @@ class TdSwitchCore extends framework_1.TypeSpan {
                 styleObj: {
                     width: '100%',
                     // transition: all getCssVar('transition-duration'),
-                    transition: 'all ' + var_1.$transitionDuration,
+                    transition: 'all ' + var_1.$transitionDurationDefault,
                     // height: map.get($switch-button-size, 'default'),
                     height: td_switch_style_1.$switchButtonSize[(params === null || params === void 0 ? void 0 : params.size) || 'default'],
                     display: 'flex',
@@ -108,7 +108,7 @@ class TdSwitchCore extends framework_1.TypeSpan {
                 // borderRadius: var(--el-border-radius-circle),
                 borderRadius: var_1.$borderRadius.circle,
                 // transition: all var(--el-transition-duration),
-                transition: 'all ' + var_1.$transitionDuration,
+                transition: 'all ' + var_1.$transitionDurationDefault,
                 width: td_switch_style_1.$switchButtonSize[(params === null || params === void 0 ? void 0 : params.size) || 'default'],
                 // width: map.get($switch-button-size, 'default');
                 height: td_switch_style_1.$switchButtonSize[(params === null || params === void 0 ? void 0 : params.size) || 'default'],

package/src/components/navigation/td-affix/td-affix.class.d.ts

@@ -1,8 +1,7 @@
-import { TypeNode } from '@type-dom/framework';
-import { UI } from '../../../ui/ui.abstract';
+import { TypeDiv, TypeNode } from '@type-dom/framework';
 import { ITdAffix, ITdAffixConfig } from './td-affix.interface';
 import { IStyle } from '@type-dom/css-type';
-export declare class TdAffix extends UI implements ITdAffix {
+export declare class TdAffix extends TypeDiv implements ITdAffix {
     className: 'TdAffix';
     props: ITdAffixConfig;
     private affix;

package/src/components/navigation/td-affix/td-affix.class.js

@@ -3,10 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdAffix = void 0;
 const utils_1 = require("@type-dom/utils");
 const framework_1 = require("@type-dom/framework");
-const ui_abstract_1 = require("../../../ui/ui.abstract");
-class TdAffix extends ui_abstract_1.UI {
+class TdAffix extends framework_1.TypeDiv {
     constructor(params = {}) {
-        super(params);
+        super();
         this.onScroll = () => {
             console.log('this.scrollContainer scroll . ');
             // if (this.fixed) {

package/src/components/navigation/td-affix/td-affix.interface.d.ts

@@ -1,9 +1,8 @@
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
-import { IJsonData, XProxy } from '@type-dom/framework';
-export interface ITdAffix extends IUI {
+import { IJsonData, ITypeConfig, ITypeDiv, XProxy } from '@type-dom/framework';
+export interface ITdAffix extends ITypeDiv {
     className: 'TdAffix';
 }
-export interface ITdAffixConfig extends IUIConfig {
+export interface ITdAffixConfig extends ITypeConfig {
     /**
      * @description affix element zIndex value
      *     default: 100,

package/src/components/navigation/td-anchor/td-anchor-link/td-anchor-link.class.d.ts

@@ -1,6 +1,6 @@
-import { UI } from '../../../../ui/ui.abstract';
+import { TypeDiv } from '@type-dom/framework';
 import { ITdAnchorLink, ITdAnchorLinkConfig } from './td-anchor-link.interface';
-export declare class TdAnchorLink extends UI implements ITdAnchorLink {
+export declare class TdAnchorLink extends TypeDiv implements ITdAnchorLink {
     className: 'TdAnchorLink';
     private href;
     private list?;

package/src/components/navigation/td-anchor/td-anchor-link/td-anchor-link.class.js

@@ -2,10 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdAnchorLink = void 0;
 const framework_1 = require("@type-dom/framework");
-const ui_abstract_1 = require("../../../../ui/ui.abstract");
-class TdAnchorLink extends ui_abstract_1.UI {
+class TdAnchorLink extends framework_1.TypeDiv {
     constructor(params = {}) {
-        super(params);
+        super();
         this.className = 'TdAnchorLink';
         this.href = new framework_1.A({
             text: (params === null || params === void 0 ? void 0 : params.title) || '',

package/src/components/navigation/td-anchor/td-anchor-link/td-anchor-link.interface.d.ts

@@ -1,9 +1,8 @@
-import { IUI, IUIConfig } from '../../../../ui/ui.interface';
-import { TypeElement } from '@type-dom/framework';
-export interface ITdAnchorLink extends IUI {
+import { ITypeConfig, ITypeDiv, TypeElement } from '@type-dom/framework';
+export interface ITdAnchorLink extends ITypeDiv {
     className: 'TdAnchorLink';
 }
-export interface ITdAnchorLinkConfig extends IUIConfig {
+export interface ITdAnchorLinkConfig extends ITypeConfig {
     /**
      * @description the text content of the anchor link
      */

package/src/components/navigation/td-anchor/td-anchor.class.d.ts

@@ -1,6 +1,6 @@
-import { UI } from '../../../ui/ui.abstract';
+import { TypeDiv } from '@type-dom/framework';
 import { ITdAnchor, ITdAnchorConfig } from './td-anchor.interface';
-export declare class TdAnchor extends UI implements ITdAnchor {
+export declare class TdAnchor extends TypeDiv implements ITdAnchor {
     className: 'TdAnchor';
     props: ITdAnchorConfig;
     private marker?;

package/src/components/navigation/td-anchor/td-anchor.class.js

@@ -2,15 +2,17 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdAnchor = void 0;
 const framework_1 = require("@type-dom/framework");
-const ui_abstract_1 = require("../../../ui/ui.abstract");
 const td_anchor_style_1 = require("./td-anchor.style");
 const td_anchor_function_1 = require("./td-anchor.function");
-class TdAnchor extends ui_abstract_1.UI {
+class TdAnchor extends framework_1.TypeDiv {
     constructor(params = {}) {
         var _a, _b, _c, _d;
-        super(params);
+        super();
         this.className = 'TdAnchor';
-        this.style.addObj({
+        this.attr.setObj({
+            name: 'td-anchor'
+        });
+        this.style.setObj({
             position: 'relative',
             // background-color: getCssVar('anchor-bg-color')
             backgroundColor: td_anchor_style_1.$anchor.bgColor.default

package/src/components/navigation/td-anchor/td-anchor.function.js

@@ -7,7 +7,7 @@ const currentAnchor = (0, framework_1.createProxy)(null);
 const containerEl = (0, framework_1.createProxy)(null); // ref<HTMLElement | Window>()
 const links = {};
 let isScrolling = false;
-let currentScrollTop = 0;
+const currentScrollTop = 0;
 const addLink = (state) => {
     links[state.href] = state.el;
 };

package/src/components/navigation/td-anchor/td-anchor.interface.d.ts

@@ -1,8 +1,8 @@
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
-export interface ITdAnchor extends IUI {
+import { ITypeConfig, ITypeDiv } from '@type-dom/framework';
+export interface ITdAnchor extends ITypeDiv {
     className: 'TdAnchor';
 }
-export interface ITdAnchorConfig extends IUIConfig {
+export interface ITdAnchorConfig extends ITypeConfig {
     /**
      * @description scroll container
      */

package/src/components/navigation/td-backtop/td-backtop.class.d.ts

@@ -1,19 +1,18 @@
-import { TypeNode } from '@type-dom/framework';
-import { UI } from '../../../ui/ui.abstract';
+import { Transition, TypeFragment, TypeNode } from '@type-dom/framework';
 import { ITdBackTop, ITdBackTopConfig } from './td-backtop.interface';
-export declare class TdBackTop extends UI implements ITdBackTop {
+export declare class TdBackTop extends TypeFragment implements ITdBackTop {
     className: 'TdBackTop';
+    content: Transition;
     props: ITdBackTopConfig;
     static initCalled: boolean;
     private container;
-    private el;
+    private target;
     private visible;
-    private transition;
     private division;
     constructor(params?: ITdBackTopConfig);
     mounted(): void;
     destroy(root?: TypeNode): void;
     throttleScroll: () => void;
-    handleScroll: () => void;
+    handleScroll: (target?: any, event?: MouseEvent) => void;
     handleClick(): void;
 }