@type-dom/ui 0.0.4 → 0.0.6

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

@@ -0,0 +1,159 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdTabs = void 0;
+const tslib_1 = require("tslib");
+const framework_1 = require("@type-dom/framework");
+const svgs_1 = require("@type-dom/svgs");
+const utils_1 = require("@type-dom/utils");
+const ui_abstract_1 = require("../../../ui/ui.abstract");
+// import { $colorPrimary, $colors, $textColor } from '../../../styles';
+const event_1 = require("../../../constants/event");
+const td_icon_class_1 = require("../../basic/td-icon/td-icon.class");
+const td_tab_nav_class_1 = require("./td-tab-nav.class");
+const td_tabs_style_1 = require("./td-tabs.style");
+class TdTabs extends ui_abstract_1.UI {
+    constructor(params) {
+        var _a, _b;
+        super(params);
+        this.className = 'TdTabs';
+        this.ctrl.addAttrName('td-tabs');
+        // this.ctrl.addStyleObj($tabsStyle);
+        this.currentName = (params === null || params === void 0 ? void 0 : params.modelValue) || '';
+        this.header = new framework_1.Div({
+            className: 'header',
+            styleObj: td_tabs_style_1.$tabsHeaderStyle
+        });
+        //   isVertical.value && ns.e('header-vertical'),
+        //             ns.is(props.tabPosition),
+        const tabPosition = (params === null || params === void 0 ? void 0 : params.tabPosition) || 'top';
+        const isVertical = ['left', 'right'].includes(tabPosition);
+        if (isVertical) {
+            this.header.ctrl.addStyleObj(td_tabs_style_1.$tabsHeaderVerticalStyle);
+        }
+        if ((params === null || params === void 0 ? void 0 : params.editable) || (params === null || params === void 0 ? void 0 : params.addable)) {
+            this.newBtn = new framework_1.Span({
+                className: 'new-btn'
+            });
+            if ((_a = params === null || params === void 0 ? void 0 : params.slots) === null || _a === void 0 ? void 0 : _a.addIcon) {
+                this.newBtn.slotChild(params.slots.addIcon);
+            }
+            else {
+                this.newBtn.addChild(new td_icon_class_1.TdIcon({
+                    name: 'icon-plus',
+                    // styleObj: $tabsIconPlusStyle,
+                    svgObj: new svgs_1.ElPlusSvg()
+                }));
+            }
+        }
+        const panes = (_b = params === null || params === void 0 ? void 0 : params.slot) === null || _b === void 0 ? void 0 : _b.map((pane, index) => pane.params);
+        this.tabNav = new td_tab_nav_class_1.TdTabNav({
+            rootTabs: this,
+            editable: params === null || params === void 0 ? void 0 : params.editable,
+            type: params === null || params === void 0 ? void 0 : params.type,
+            panes: panes,
+            stretch: params === null || params === void 0 ? void 0 : params.stretch,
+            styleObj: td_tabs_style_1.$tabsNavStyle,
+            emits: {
+                tabClick: (pane, tabName, ev) => {
+                    this.handleTabClick(pane, tabName, ev);
+                },
+                tabRemove: (pane, ev) => {
+                    this.handleTabRemove(pane, ev);
+                },
+            }
+        });
+        this.header.addChild(this.tabNav);
+        if (this.newBtn) {
+            this.header.addChild(this.newBtn);
+        }
+        this.panel = new framework_1.Div({
+            className: 'panels',
+            attrObj: {
+                name: 'td-tabs-content',
+            },
+            styleObj: Object.assign(Object.assign({}, td_tabs_style_1.$tabsContentStyle), params === null || params === void 0 ? void 0 : params.contentStyle),
+        });
+        if (params === null || params === void 0 ? void 0 : params.slot) {
+            params.slot.forEach((pane, index) => {
+                var _a;
+                const tabName = (_a = pane.props.name) !== null && _a !== void 0 ? _a : (index + 1);
+                if (tabName === this.currentName) {
+                    pane.setActive(true);
+                }
+                else {
+                    pane.setActive(false);
+                }
+                this.panel.addChild(pane);
+            });
+        }
+        if ((params === null || params === void 0 ? void 0 : params.tabPosition) !== 'bottom') {
+            this.childNodes = [this.header, this.panel];
+        }
+        else {
+            this.childNodes = [this.panel, this.header];
+        }
+        this.props = this.setParams(params);
+    }
+    setCurrentName(value_1) {
+        return tslib_1.__awaiter(this, arguments, void 0, function* (value, trigger = false) {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+            console.log('setCurrentName .');
+            // should do nothing.
+            if (this.currentName === value || (0, utils_1.isUndefined)(value))
+                return;
+            try {
+                const canLeave = yield ((_b = (_a = this.props).beforeLeave) === null || _b === void 0 ? void 0 : _b.call(_a, value, this.currentName));
+                if (canLeave !== false) {
+                    this.currentName = value;
+                    if (trigger) {
+                        // emit(UPDATE_MODEL_EVENT, value)
+                        (_d = (_c = this.props.emits) === null || _c === void 0 ? void 0 : _c[event_1.UPDATE_MODEL_EVENT]) === null || _d === void 0 ? void 0 : _d.call(_c, value);
+                        // emit('tabChange', value)
+                        (_f = (_e = this.props.emits) === null || _e === void 0 ? void 0 : _e.tabChange) === null || _f === void 0 ? void 0 : _f.call(_e, value);
+                    }
+                    (_g = this.props.slot) === null || _g === void 0 ? void 0 : _g.forEach((pane, index) => {
+                        var _a;
+                        const tabName = (_a = pane.props.name) !== null && _a !== void 0 ? _a : (index + 1);
+                        if (tabName === this.currentName) {
+                            pane.setActive(true);
+                        }
+                        else {
+                            pane.setActive(false);
+                        }
+                    });
+                    (_j = (_h = this.tabNav) === null || _h === void 0 ? void 0 : _h.removeFocus) === null || _j === void 0 ? void 0 : _j.call(_h);
+                }
+            }
+            catch (_k) {
+                console.error('tab change error');
+            }
+        });
+    }
+    handleTabClick(tab, tabName, event) {
+        var _a, _b;
+        console.log('handleTabClick . ');
+        if (tab.disabled)
+            return;
+        this.setCurrentName(tabName, true);
+        // emit('tabClick', tab, event)
+        (_b = (_a = this.props.emits) === null || _a === void 0 ? void 0 : _a.tabClick) === null || _b === void 0 ? void 0 : _b.call(_a, tab, event);
+    }
+    handleTabRemove(pane, ev) {
+        var _a, _b, _c, _d;
+        if (pane.disabled || (0, utils_1.isUndefined)(pane.name))
+            return;
+        ev.stopPropagation();
+        // emit('edit', pane.props.name, 'remove')
+        (_b = (_a = this.props.emits) === null || _a === void 0 ? void 0 : _a.edit) === null || _b === void 0 ? void 0 : _b.call(_a, pane.name, 'remove');
+        // emit('tabRemove', pane.props.name)
+        (_d = (_c = this.props.emits) === null || _c === void 0 ? void 0 : _c.tabRemove) === null || _d === void 0 ? void 0 : _d.call(_c, pane.name);
+    }
+    handleTabAdd() {
+        var _a, _b, _c, _d;
+        // emit('edit', undefined, 'add')
+        (_b = (_a = this.props.emits) === null || _a === void 0 ? void 0 : _a.edit) === null || _b === void 0 ? void 0 : _b.call(_a, undefined, 'add');
+        // emit('tabAdd')
+        (_d = (_c = this.props.emits) === null || _c === void 0 ? void 0 : _c.tabAdd) === null || _d === void 0 ? void 0 : _d.call(_c);
+    }
+}
+exports.TdTabs = TdTabs;

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

@@ -0,0 +1,74 @@
+import { IStyle } from '@type-dom/css-type';
+import { IUI, IUIConfig } from '../../../ui/ui.interface';
+import { UPDATE_MODEL_EVENT } from '../../../constants/event';
+import { TdIcon } from '../../basic/td-icon/td-icon.class';
+import { ITdTabPaneConfig } from './td-tab-pane.interface';
+import { TdTabPane } from './td-tab-pane.class';
+export interface ITdTabs extends IUI {
+    className: 'TdTabs';
+}
+export interface ITdTabsConfig extends IUIConfig {
+    /**
+     * @description type of Tab
+     *     default: '',
+     */
+    type?: 'card' | 'border-card' | '';
+    /**
+     * @description whether Tab is closable
+     */
+    closable?: boolean;
+    /**
+     * @description whether Tab is addable
+     */
+    addable?: boolean;
+    /**
+     * @description binding value, name of the selected tab
+     */
+    modelValue?: string | number;
+    /**
+     * @description whether Tab is addable and closable
+     */
+    editable?: boolean;
+    /**
+     * @description position of tabs
+     *     default: 'top',
+     */
+    tabPosition?: 'top' | 'right' | 'bottom' | 'left';
+    /**
+     * @description hook function before switching tab. If `false` is returned or a `Promise` is returned and then is rejected, switching will be prevented
+     *     default: () => true,
+     */
+    beforeLeave?: (newName: ITabPaneName, oldName: ITabPaneName | undefined) => void | boolean;
+    /**
+     * @description whether width of tab automatically fits its container
+     */
+    stretch?: boolean;
+    contentStyle?: IStyle;
+    emits?: {
+        [UPDATE_MODEL_EVENT]?: (name: ITabPaneName) => void;
+        tabClick?: (pane: ITdTabPaneConfig, ev: Event) => void;
+        tabChange?: (name: ITabPaneName) => void;
+        edit?: (paneName: ITabPaneName | undefined, action: 'remove' | 'add') => void;
+        tabRemove?: (name: ITabPaneName) => void;
+        tabAdd?: () => true;
+    };
+    slot?: TdTabPane[];
+    slots?: {
+        addIcon?: TdIcon;
+    };
+}
+export type ITabPaneName = string | number;
+export type ITabsPaneContext = {
+    uid: number;
+    config: ITdTabsConfig;
+    paneName: ITabPaneName;
+    active: boolean;
+    index: string | undefined;
+    isClosable: boolean;
+};
+export interface ITabsRootContext {
+    config: ITdTabsConfig;
+    currentName: ITabPaneName;
+    registerPane: (pane: ITabsPaneContext) => void;
+    unregisterPane: (uid: number) => void;
+}

package/src/components/navigation/td-tabs/td-tabs.interface.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const utils_1 = require("@type-dom/utils");
+const event_1 = require("../../../constants/event");
+const isPaneName = (value) => (0, utils_1.isString)(value) || (0, utils_1.isNumber)(value);

package/src/components/navigation/td-tabs/td-tabs.style.d.ts

@@ -0,0 +1,19 @@
+import { IStyle } from '@type-dom/css-type';
+import { ITdTabsConfig } from './td-tabs.interface';
+export declare const $tabs: {
+    headerHeight: string;
+};
+export declare const $tabsStyle: IStyle;
+export declare const $tabsHeaderStyle: IStyle;
+export declare const $tabsHeaderVerticalStyle: IStyle;
+export declare const $tabsActiveBarStyle: IStyle;
+export declare const $tabsNewTabStyle: IStyle;
+export declare const $tabsNavWrapStyle: IStyle;
+export declare const $tabsNavScrollStyle: IStyle;
+export declare const $tabsNavWrapAfterStyle: IStyle;
+export declare const $tabNavNextStyle: IStyle;
+export declare const $tabsNavPrevStyle: IStyle;
+export declare const $tabsNavStyle: IStyle;
+export declare const $tabsItemStyle: IStyle;
+export declare const $tabsContentStyle: IStyle;
+export declare function useStyle(config?: ITdTabsConfig): void;

package/src/components/navigation/td-tabs/td-tabs.style.js

@@ -0,0 +1,128 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.$tabsContentStyle = exports.$tabsItemStyle = exports.$tabsNavStyle = exports.$tabsNavPrevStyle = exports.$tabNavNextStyle = exports.$tabsNavWrapAfterStyle = exports.$tabsNavScrollStyle = exports.$tabsNavWrapStyle = exports.$tabsNewTabStyle = exports.$tabsActiveBarStyle = exports.$tabsHeaderVerticalStyle = exports.$tabsHeaderStyle = exports.$tabsStyle = exports.$tabs = void 0;
+exports.useStyle = useStyle;
+const var_1 = require("../../../styles/var");
+const transition_1 = require("../../../styles/transition");
+const utils_1 = require("@type-dom/utils");
+exports.$tabs = {
+    headerHeight: '40px'
+};
+exports.$tabsStyle = {
+    display: 'flex',
+};
+exports.$tabsHeaderStyle = {
+    padding: 0,
+    position: 'relative',
+    margin: '0 0 15px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between'
+};
+exports.$tabsHeaderVerticalStyle = {
+    flexDirection: 'column'
+};
+exports.$tabsActiveBarStyle = {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    height: '2px',
+    // background-color: getCssVar('color-primary'),
+    backgroundColor: var_1.$colorPrimary,
+    zIndex: 1,
+    // transition: width getCssVar('transition-duration',
+    // getCssVar('transition-function-ease-in-out-bezier'),
+    //   transform getCssVar('transition-duration',
+    // getCssVar('transition-function-ease-in-out-bezier'),
+    transition: 'width ' + transition_1.$transitionDuration + ', ' + transition_1.$transitionFunction.easeInOutBezier + ', '
+        + 'transform ' + transition_1.$transitionDuration + ', ' + transition_1.$transitionFunction.easeInOutBezier,
+    listStyle: 'none'
+};
+exports.$tabsNewTabStyle = {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    // border: 1px solid getCssVar('border-color'),
+    border: '1px solid ' + var_1.$borderColor,
+    height: '20px',
+    width: '20px',
+    lineHeight: '20px',
+    margin: '10px 0 10px 10px',
+    borderRadius: '3px',
+    textAlign: 'center',
+    fontSize: '12px',
+    // color: getCssVar('text-color', 'primary'),
+    color: var_1.$textColor.primary,
+    cursor: 'pointer',
+    transition: 'all 0.15s'
+};
+exports.$tabsNavWrapStyle = {
+    overflow: 'hidden',
+    marginBottom: '-1px',
+    position: 'relative',
+    flex: '1 auto'
+};
+exports.$tabsNavScrollStyle = {
+    position: 'absolute',
+    cursor: 'pointer',
+    lineHeight: '44px',
+    fontSize: '12px',
+    // color: getCssVar('text-color', 'secondary'),
+    color: var_1.$textColor.secondary,
+    width: '20px',
+    textAlign: 'center'
+};
+exports.$tabsNavWrapAfterStyle = {
+    // content: '',
+    position: 'absolute',
+    left: 0,
+    bottom: 0,
+    width: '100%',
+    height: '2px',
+    // background-color: getCssVar('border-color-light'),
+    backgroundColor: var_1.$borderColor.light,
+    // zIndex: getCssVar('index-normal'),
+};
+exports.$tabNavNextStyle = {
+    position: 'absolute',
+    cursor: 'pointer',
+    lineHeight: '44px',
+    fontSize: '12px',
+    // color: getCssVar('text-color', 'secondary'),
+    color: var_1.$textColor.secondary,
+    width: '20px',
+    textAlign: 'center'
+};
+exports.$tabsNavPrevStyle = (0, utils_1.deepClone)(exports.$tabNavNextStyle);
+exports.$tabsNavStyle = {
+    display: 'flex',
+    whiteSpace: 'nowrap',
+    position: 'relative',
+    // transition: transform getCssVar('transition-duration'),
+    transition: 'transform ' + transition_1.$transitionDuration,
+    float: 'left',
+    // zIndex: calc(#{getCssVar('index-normal')} + 1),
+    zIndex: 'calc(index-normal + 1)'
+};
+exports.$tabsItemStyle = {
+    padding: '0 20px',
+    // height: getCssVar('tabs', 'header-height'),
+    height: exports.$tabs.headerHeight,
+    boxSizing: 'border-box',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    listStyle: 'none',
+    // font-size: getCssVar('font-size-base'),
+    fontSize: var_1.$fontSizes.base,
+    fontWeight: 500,
+    // color: getCssVar('text-color', 'primary'),
+    color: var_1.$textColor.primary,
+    position: 'relative'
+};
+exports.$tabsContentStyle = {
+    overflow: 'hidden',
+    position: 'relative',
+};
+function useStyle(config) {
+}

package/src/components/others/collapsible-box/collapsible-box.d.ts

@@ -1,12 +1,11 @@
-import { TypeComponent } from '@type-dom/framework';
+import { TypeDiv } from '@type-dom/framework';
 import { CollapsibleBoxContents } from './contents/contents';
 import { ExpandHeading } from './heading/expand-heading';
 /**
  * 可收缩盒子组件
  */
-export declare class CollapsibleBox extends TypeComponent {
+export declare class CollapsibleBox extends TypeDiv {
     className: 'CollapsibleBox' | string;
-    parent?: TypeComponent;
     childNodes: [ExpandHeading, CollapsibleBoxContents];
     heading: ExpandHeading;
     contents: CollapsibleBoxContents;

package/src/components/others/collapsible-box/collapsible-box.js

@@ -7,20 +7,18 @@ const expand_heading_1 = require("./heading/expand-heading");
 /**
  * 可收缩盒子组件
  */
-class CollapsibleBox extends framework_1.TypeComponent {
+class CollapsibleBox extends framework_1.TypeDiv {
     constructor() {
-        super('div');
+        super();
         this.className = 'CollapsibleBox';
-        this.styleObj = {
+        this.ctrl.addStyleObj({
             // borderTop: '1px solid #dddddd',
             // borderBottom: '1px solid #dddddd',
             listStyle: 'none',
             padding: '3px',
             marginBottom: '5px'
-        };
-        this.attrObj = {
-            name: 'collapsible-box'
-        };
+        });
+        this.ctrl.addAttrName('collapsible-box');
         this.heading = new expand_heading_1.ExpandHeading('标题');
         this.heading.parent = this;
         this.contents = new contents_1.CollapsibleBoxContents();

package/src/components/others/collapsible-box/contents/contents.d.ts

@@ -1,6 +1,6 @@
-import { TypeComponent } from '@type-dom/framework';
+import { TypeDiv } from '@type-dom/framework';
 import { CollapsibleBox } from '../collapsible-box';
-export declare class CollapsibleBoxContents extends TypeComponent {
+export declare class CollapsibleBoxContents extends TypeDiv {
     className: 'CollapsibleBoxContents' | string;
     parent?: CollapsibleBox;
     constructor();

package/src/components/others/collapsible-box/contents/contents.js

@@ -2,21 +2,19 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CollapsibleBoxContents = void 0;
 const framework_1 = require("@type-dom/framework");
-class CollapsibleBoxContents extends framework_1.TypeComponent {
+class CollapsibleBoxContents extends framework_1.TypeDiv {
     // childNodes: ControlMenu[];
     constructor() {
-        super('div');
+        super();
         this.className = 'CollapsibleBoxContents';
-        this.styleObj = {
-            display: framework_1.StyleDisplay.flex,
+        this.ctrl.addStyleObj({
+            display: 'flex',
             flexWrap: 'wrap',
             justifyContent: 'flex-start',
             // width: '194px',
             border: '1px solid #a0a0a0'
-        };
-        this.attrObj = {
-            name: 'collapsible-box-contents'
-        };
+        });
+        this.ctrl.addAttrName('collapsible-box-contents');
         this.childNodes = [];
     }
 }

package/src/components/others/collapsible-box/heading/expand-heading.d.ts

@@ -1,8 +1,7 @@
-import { Span, TextNode, TypeComponent } from '@type-dom/framework';
+import { Span, TextNode, TypeDiv } from '@type-dom/framework';
 import { ElCaretBottomSvg } from '@type-dom/svgs';
-export declare class ExpandHeading extends TypeComponent {
+export declare class ExpandHeading extends TypeDiv {
     className: 'ExpandHeading';
-    parent?: TypeComponent;
     childNodes: [ElCaretBottomSvg, Span];
     svg: ElCaretBottomSvg;
     title: TextNode;

package/src/components/others/collapsible-box/heading/expand-heading.js

@@ -4,11 +4,11 @@ exports.ExpandHeading = void 0;
 const rxjs_1 = require("rxjs");
 const framework_1 = require("@type-dom/framework");
 const svgs_1 = require("@type-dom/svgs");
-class ExpandHeading extends framework_1.TypeComponent {
+class ExpandHeading extends framework_1.TypeDiv {
     constructor(title) {
-        super('div');
+        super();
         this.className = 'ExpandHeading';
-        this.styleObj = {
+        this.ctrl.addStyleObj({
             margin: '0',
             paddingLeft: '10px',
             boxSizing: 'border-box',
@@ -20,10 +20,8 @@ class ExpandHeading extends framework_1.TypeComponent {
             display: 'flex',
             alignItems: 'center',
             height: '36px'
-        };
-        this.attrObj = {
-            name: 'expand-heading'
-        };
+        });
+        this.ctrl.addAttrName('expand-heading');
         this.svg = new svgs_1.ElCaretBottomSvg({
             attrObj: {
                 fill: '#FFF'
@@ -42,28 +40,28 @@ class ExpandHeading extends framework_1.TypeComponent {
     }
     initEvents() {
         this.subscriptions.push((0, rxjs_1.fromEvent)(this.svg.dom, 'click').subscribe((e) => {
-            var _a, _b;
+            var _a, _b, _c;
             console.log('expand-heading svg.dom clicked');
             e.stopPropagation();
             // const style = getComputedStyle(this.svg.dom);
             // console.log('style.transform is ', style.transform);
-            if (this.svg.styleObj.transform === 'rotate(-90deg)') {
-                this.svg.setStyleObj({
+            if (((_a = this.svg.props.styleObj) === null || _a === void 0 ? void 0 : _a.transform) === 'rotate(-90deg)') {
+                this.svg.ctrl.setStyleObj({
                     transform: 'rotate(0deg)',
                     transition: 'transform 0.3s'
                 });
                 // console.log('style.transform is ', style.transform);
-                if (((_a = this.parent) === null || _a === void 0 ? void 0 : _a.lastChild) instanceof framework_1.TypeElement) {
-                    this.parent.lastChild.setStyle('display', 'flex'); // flex
+                if (((_b = this.parent) === null || _b === void 0 ? void 0 : _b.lastChild) instanceof framework_1.TypeHtml) {
+                    this.parent.lastChild.ctrl.setStyle('display', 'flex'); // flex
                 }
             }
             else {
-                this.svg.setStyleObj({
+                this.svg.ctrl.setStyleObj({
                     transform: 'rotate(-90deg)',
                     transition: 'transform 0.3s'
                 });
-                if (((_b = this.parent) === null || _b === void 0 ? void 0 : _b.lastChild) instanceof framework_1.TypeElement) {
-                    this.parent.lastChild.setStyle('display', 'none');
+                if (((_c = this.parent) === null || _c === void 0 ? void 0 : _c.lastChild) instanceof framework_1.TypeHtml) {
+                    this.parent.lastChild.ctrl.setStyle('display', 'none');
                 }
             }
         }));

package/src/components/others/td-divider/td-divider.class.d.ts

@@ -1,6 +1,6 @@
-import { ITdDivider, ITdDividerConfig } from './td-divider.interface';
 import { UI } from '../../../ui/ui.abstract';
+import { ITdDivider, ITdDividerConfig } from './td-divider.interface';
 export declare class TdDivider extends UI implements ITdDivider {
     className: 'TdDivider';
-    constructor(config?: ITdDividerConfig);
+    constructor(params?: ITdDividerConfig);
 }

package/src/components/others/td-divider/td-divider.class.js

@@ -5,17 +5,17 @@ const framework_1 = require("@type-dom/framework");
 const var_1 = require("../../../styles/var");
 const ui_abstract_1 = require("../../../ui/ui.abstract");
 class TdDivider extends ui_abstract_1.UI {
-    constructor(config) {
-        super();
+    constructor(params) {
+        super(params);
         this.className = 'TdDivider';
-        this.addStyleObj({
+        this.ctrl.addStyleObj({
             position: 'relative'
         });
-        const direction = (config === null || config === void 0 ? void 0 : config.direction) || 'horizontal';
-        const contentPosition = (config === null || config === void 0 ? void 0 : config.contentPosition) || 'center';
-        const borderStyle = (config === null || config === void 0 ? void 0 : config.borderStyle) || 'solid';
+        const direction = (params === null || params === void 0 ? void 0 : params.direction) || 'horizontal';
+        const contentPosition = (params === null || params === void 0 ? void 0 : params.contentPosition) || 'center';
+        const borderStyle = (params === null || params === void 0 ? void 0 : params.borderStyle) || 'solid';
         if (direction === 'horizontal') {
-            this.addStyleObj({
+            this.ctrl.addStyleObj({
                 display: 'block',
                 height: '1px',
                 width: '100%',
@@ -23,10 +23,11 @@ class TdDivider extends ui_abstract_1.UI {
                 // border-top: 1px getCssVar('border-color') getCssVar('border-style'),
                 borderTop: '1px ' + var_1.$borderColor.base + ' ' + borderStyle
             });
-            if (config === null || config === void 0 ? void 0 : config.text) { // ToDo config.text setConfig中还会处理一次。
+            if (params === null || params === void 0 ? void 0 : params.text) {
+                // ToDo params.text setConfig中还会处理一次。
                 const textDiv = new framework_1.Div({
                     name: 'text',
-                    text: config === null || config === void 0 ? void 0 : config.text,
+                    text: params === null || params === void 0 ? void 0 : params.text,
                     styleObj: {
                         position: 'absolute',
                         // backgroundColor: getCssVar('bg-color'),
@@ -39,19 +40,19 @@ class TdDivider extends ui_abstract_1.UI {
                     }
                 });
                 if (contentPosition === 'left') {
-                    textDiv.addStyleObj({
+                    textDiv.ctrl.addStyleObj({
                         left: '20px',
                         transform: 'translateY(-50%)'
                     });
                 }
                 else if (contentPosition === 'right') {
-                    textDiv.addStyleObj({
+                    textDiv.ctrl.addStyleObj({
                         right: '20px',
                         transform: 'translateY(-50%)'
                     });
                 }
                 else {
-                    textDiv.addStyleObj({
+                    textDiv.ctrl.addStyleObj({
                         left: '50%',
                         transform: 'translateX(-50%) translateY(-50%)'
                     });
@@ -59,11 +60,11 @@ class TdDivider extends ui_abstract_1.UI {
                 this.addChild(textDiv);
             }
             if (contentPosition === 'left') {
-                this.addStyleObj({});
+                this.ctrl.addStyleObj({});
             }
         }
         else {
-            this.addStyleObj({
+            this.ctrl.addStyleObj({
                 display: 'inline-block',
                 width: '1px',
                 height: '1em',
@@ -74,7 +75,7 @@ class TdDivider extends ui_abstract_1.UI {
                 borderLeft: '1px ' + var_1.$borderColor.base + ' ' + borderStyle
             });
         }
-        this.setConfig(config);
+        this.setParams(params);
     }
 }
 exports.TdDivider = TdDivider;

package/src/components/others/td-watermark/td-watermark.class.js

@@ -0,0 +1 @@
+"use strict";

package/src/components/others/td-watermark/td-watermark.interface.js

@@ -0,0 +1 @@
+"use strict";

package/src/constants/event.d.ts

@@ -0,0 +1,3 @@
+export declare const UPDATE_MODEL_EVENT = "update:modelValue";
+export declare const CHANGE_EVENT = "change";
+export declare const INPUT_EVENT = "input";