@type-dom/ui 0.0.3 → 0.0.5

package/src/components/basic/td-icon/td-icon.interface.d.ts

@@ -1,13 +1,43 @@
 import { TypeSvgSvg } from '@type-dom/framework';
 import { IUI, IUIConfig } from '../../../ui/ui.interface';
+import { TdIcon } from './td-icon.class';
+/**
+ * 定义了图标的接口，继承自IUI接口。
+ * 此接口用于规范图标的属性和行为。
+ */
 export interface ITdIcon extends IUI {
+    /**
+     * 类名，固定为'TdIcon'，用于在HTML元素上应用样式。
+     */
     className: 'TdIcon';
 }
+/**
+ * 定义了图标配置的接口，扩展了IUIConfig接口。
+ * 这些配置用于自定义图标的展示方式。
+ */
 export interface ITdIconConfig extends IUIConfig {
-    SvgClass: any;
-    svgObj: TypeSvgSvg;
-    size: string;
-    color: string;
-    loading: boolean;
-    position: 'left' | 'right';
+    /**
+     * 可选。指定一个SVG图形对象，用于显示自定义SVG图标。
+     */
+    svgObj?: TypeSvgSvg;
+    /**
+     * 可选。指定图标的大小，可以是字符串（如"20px"）或数字。
+     */
+    size?: string | number;
+    /**
+     * 可选。指定图标的颜色，使用字符串表示的颜色值。
+     */
+    color?: string;
+    /**
+     * 可选。指定图标是否处于加载状态，用于显示加载中的动画效果。
+     */
+    loading?: boolean;
+    /**
+     * 可选。指定图标的对齐方式，可以是"left"（左对齐）或"right"（右对齐）。
+     */
+    position?: 'left' | 'right';
+    /**
+     * 可选。用于插槽的SVG图形对象，可以替换默认的图标展示。
+     */
+    slot?: TypeSvgSvg | TdIcon;
 }

package/src/components/basic/td-icon/td-icon.style.d.ts

@@ -1,14 +1,5 @@
-import { IStyle } from '@type-dom/framework';
-import './icon.scss';
-export declare const $tdIcon: Partial<IStyle>;
-export declare const $iconLoading: {
-    animation: string;
-};
-export declare const $iconRight: {
-    marginLeft: string;
-    float: string;
-};
-export declare const $iconLeft: {
-    marginRight: string;
-    float: string;
-};
+import { IStyle } from '@type-dom/css-type';
+export declare const $tdIcon: IStyle;
+export declare const $iconLoading: IStyle;
+export declare const $iconRight: IStyle;
+export declare const $iconLeft: IStyle;

package/src/components/basic/td-icon/td-icon.style.js

@@ -2,21 +2,20 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.$iconLeft = exports.$iconRight = exports.$iconLoading = exports.$tdIcon = void 0;
 const framework_1 = require("@type-dom/framework");
-require("./icon.scss");
 exports.$tdIcon = {
-    // height: '1em',
+    height: '1em',
     width: '1em',
     lineHeight: '1em',
-    display: framework_1.StyleDisplay.inlineFlex,
+    display: 'inline-flex',
     justifyContent: 'center',
     alignItems: 'center',
-    position: framework_1.StylePosition.relative,
+    position: 'relative',
     fill: 'currentColor',
-    // color: var(--color),
+    // color: 'var(--color)',
     fontSize: 'inherit'
 };
 exports.$iconLoading = {
-    animation: 'rotating 2s linear infinite'
+    animation: `rotating-${framework_1.vHash} 2s linear infinite`
 };
 exports.$iconRight = {
     marginLeft: '5px',

package/src/components/basic/td-layout/td-col/td-col.class.d.ts

@@ -1,13 +1,13 @@
+import { UI } from '../../../../ui/ui.abstract';
 import { TdRow } from '../td-row/td-row.class';
 import { ITdCol, ITdColConfig } from './td-col.interface';
-import { UI } from '../../../../ui/ui.abstract';
 export declare class TdCol extends UI implements ITdCol {
     className: 'TdCol';
-    config?: ITdColConfig;
     parent?: TdRow;
-    constructor(config?: ITdColConfig);
+    props: ITdColConfig;
+    constructor(params?: ITdColConfig);
     get screenWidth(): number;
-    setConfig(config?: ITdColConfig): void;
+    setup(): void;
     resize(): void;
     initEvents(): void;
 }

package/src/components/basic/td-layout/td-col/td-col.class.js

@@ -5,47 +5,47 @@ const rxjs_1 = require("rxjs");
 const utils_1 = require("@type-dom/utils");
 const ui_abstract_1 = require("../../../../ui/ui.abstract");
 class TdCol extends ui_abstract_1.UI {
-    constructor(config) {
-        super();
+    constructor(params) {
+        super(params);
         this.className = 'TdCol';
-        this.config = config;
-        this.setConfig(config);
+        this.addChild(this.getSlotNode());
+        this.props = this.setParams(params);
     }
     get screenWidth() {
         return window.innerWidth || document.documentElement.clientWidth;
     }
-    setConfig(config) {
-        super.setConfig(config);
-        if (config === null || config === void 0 ? void 0 : config.span) {
-            if (config.span === 0) {
-                this.addStyleObj({
+    setup() {
+        const props = this.props;
+        if (props === null || props === void 0 ? void 0 : props.span) {
+            if (props.span === 0) {
+                this.ctrl.addStyleObj({
                     display: 'none'
                 });
             }
             else {
-                const proportion = (0, utils_1.formatFloat)(config.span / 24) * 100 + '%';
-                this.addStyleObj({
+                const proportion = (0, utils_1.formatFloat)(props.span / 24) * 100 + '%';
+                this.ctrl.addStyleObj({
                     maxWidth: proportion,
                     flex: '0 0 ' + proportion
                 });
             }
         }
-        if (config === null || config === void 0 ? void 0 : config.offset) {
-            const proportion = (0, utils_1.formatFloat)(config.offset / 24) * 100 + '%';
-            this.addStyleObj({
+        if (props === null || props === void 0 ? void 0 : props.offset) {
+            const proportion = (0, utils_1.formatFloat)(props.offset / 24) * 100 + '%';
+            this.ctrl.addStyleObj({
                 marginLeft: proportion
             });
         }
-        if (config === null || config === void 0 ? void 0 : config.pull) {
-            const proportion = (0, utils_1.formatFloat)(config.pull / 24) * 100 + '%';
-            this.addStyleObj({
+        if (props === null || props === void 0 ? void 0 : props.pull) {
+            const proportion = (0, utils_1.formatFloat)(props.pull / 24) * 100 + '%';
+            this.ctrl.addStyleObj({
                 position: 'relative',
                 right: proportion
             });
         }
-        if (config === null || config === void 0 ? void 0 : config.push) {
-            const proportion = (0, utils_1.formatFloat)(config.push / 24) * 100 + '%';
-            this.addStyleObj({
+        if (props === null || props === void 0 ? void 0 : props.push) {
+            const proportion = (0, utils_1.formatFloat)(props.push / 24) * 100 + '%';
+            this.ctrl.addStyleObj({
                 position: 'relative',
                 left: proportion
             });
@@ -53,62 +53,65 @@ class TdCol extends ui_abstract_1.UI {
         this.resize();
     }
     resize() {
-        // console.log('this.screenWidth is ', this.screenWidth);
-        const config = this.config;
-        if (config === null || config === void 0 ? void 0 : config.xs) {
+        console.log('this.screenWidth is ', this.screenWidth);
+        const props = this.props;
+        if (props === null || props === void 0 ? void 0 : props.xs) {
             if (this.screenWidth < 768) {
                 // 超小屏幕（xs）
-                // console.log('当前屏幕尺寸小于768px，执行xs断点下的操作');
-                const proportion = (0, utils_1.formatFloat)(config.xs / 24) * 100 + '%';
-                this.setStyleObj({
+                // 当前屏幕尺寸小于768px，执行xs断点下的操作
+                const proportion = (0, utils_1.formatFloat)(props.xs / 24) * 100 + '%';
+                this.ctrl.setStyleObj({
                     maxWidth: proportion,
                     flex: '0 0 ' + proportion
                 });
             }
         }
-        if (config === null || config === void 0 ? void 0 : config.sm) {
-            if (this.screenWidth >= 768 && this.screenWidth < 992) {
+        if (props === null || props === void 0 ? void 0 : props.sm) {
+            if (this.screenWidth >= 768) {
+                // && this.screenWidth < 992
                 // 小屏幕（sm）
-                // console.log('当前屏幕尺寸在768px至991px之间，执行md断点下的操作');
+                // 当前屏幕尺寸在768px至991px之间，执行md断点下的操作
                 // 设置你的值或执行相应JS代码
-                const proportion = (0, utils_1.formatFloat)(config.sm / 24) * 100 + '%';
-                this.setStyleObj({
+                const proportion = (0, utils_1.formatFloat)(props.sm / 24) * 100 + '%';
+                this.ctrl.setStyleObj({
                     maxWidth: proportion,
                     flex: '0 0 ' + proportion
                 });
             }
         }
-        if (config === null || config === void 0 ? void 0 : config.md) {
-            if (this.screenWidth >= 992 && this.screenWidth < 1200) {
+        if (props === null || props === void 0 ? void 0 : props.md) {
+            if (this.screenWidth >= 992) {
+                // && this.screenWidth < 1200
                 // 中屏幕（md）
-                // console.log('当前屏幕尺寸在992px至1199px之间，执行lg断点下的操作');
+                // 当前屏幕尺寸在992px至1199px之间，执行lg断点下的操作
                 // 设置你的值或执行相应JS代码
-                const proportion = (0, utils_1.formatFloat)(config.md / 24) * 100 + '%';
-                this.setStyleObj({
+                const proportion = (0, utils_1.formatFloat)(props.md / 24) * 100 + '%';
+                this.ctrl.setStyleObj({
                     maxWidth: proportion,
                     flex: '0 0 ' + proportion
                 });
             }
         }
-        if (config === null || config === void 0 ? void 0 : config.lg) {
-            if (this.screenWidth >= 1200 && this.screenWidth < 1920) {
+        if (props === null || props === void 0 ? void 0 : props.lg) {
+            if (this.screenWidth >= 1200) {
+                // && this.screenWidth < 1920
                 // 大屏幕（lg）
-                // console.log('当前屏幕尺寸在1200px至1920px之间，执行lg断点下的操作');
+                // 当前屏幕尺寸在1200px至1920px之间，执行lg断点下的操作
                 // 设置你的值或执行相应JS代码
-                const proportion = (0, utils_1.formatFloat)(config.lg / 24) * 100 + '%';
-                this.setStyleObj({
+                const proportion = (0, utils_1.formatFloat)(props.lg / 24) * 100 + '%';
+                this.ctrl.setStyleObj({
                     maxWidth: proportion,
                     flex: '0 0 ' + proportion
                 });
             }
         }
-        if (config === null || config === void 0 ? void 0 : config.xl) {
+        if (props === null || props === void 0 ? void 0 : props.xl) {
             if (this.screenWidth >= 1920) {
                 // 超大屏幕（xl及以上）
-                // console.log('当前屏幕尺寸等于或大于1920px，执行xl断点下的操作');
+                // 当前屏幕尺寸等于或大于1920px，执行xl断点下的操作
                 // 设置你的值或执行相应JS代码
-                const proportion = (0, utils_1.formatFloat)(config.xl / 24) * 100 + '%';
-                this.setStyleObj({
+                const proportion = (0, utils_1.formatFloat)(props.xl / 24) * 100 + '%';
+                this.ctrl.setStyleObj({
                     maxWidth: proportion,
                     flex: '0 0 ' + proportion
                 });

package/src/components/basic/td-layout/td-col/td-col.interface.d.ts

@@ -3,10 +3,6 @@ export interface ITdCol extends IUI {
     className: 'TdCol';
 }
 export interface ITdColConfig extends IUIConfig {
-    /**
-     * @description custom element tag
-     */
-    tag?: string;
     /**
      * @description number of column the grid spans
      */

package/src/components/basic/td-layout/td-row/td-row.class.d.ts

@@ -1,10 +1,11 @@
-import { ITdRow, ITdRowConfig } from './td-row.interface';
 import { UI } from '../../../../ui/ui.abstract';
 import { TdCol } from '../td-col/td-col.class';
+import { ITdRow, ITdRowConfig } from './td-row.interface';
 export declare class TdRow extends UI implements ITdRow {
     className: 'TdRow';
+    props: ITdRowConfig;
     childNodes: TdCol[];
     gutter?: number;
-    constructor(config?: ITdRowConfig);
-    setConfig(config?: ITdRowConfig): void;
+    constructor(params?: ITdRowConfig);
+    setup(): void;
 }

package/src/components/basic/td-layout/td-row/td-row.class.js

@@ -7,63 +7,64 @@ class TdRow extends ui_abstract_1.UI {
     // justify: string = 'start';
     // align: string = 'top';
     // tag: string = 'div';
-    constructor(config) {
-        super();
+    constructor(params) {
+        super(params);
         this.className = 'TdRow';
-        this.addStyleObj({
+        this.ctrl.addStyleObj({
             display: 'flex',
             flexWrap: 'wrap',
             position: 'relative',
             boxSizing: 'border-box'
         });
         this.childNodes = [];
-        this.setConfig(config);
+        this.addChild(this.getSlotNode());
+        this.props = this.setParams(params);
     }
-    setConfig(config) {
-        super.setConfig(config);
-        if (config === null || config === void 0 ? void 0 : config.gutter) {
-            this.gutter = config.gutter;
-            this.addStyleObj({
-                marginLeft: `-${config.gutter / 2}px`,
-                marginRight: `-${config.gutter / 2}px`
+    setup() {
+        const props = this.props;
+        if (props === null || props === void 0 ? void 0 : props.gutter) {
+            this.gutter = props.gutter;
+            this.ctrl.addStyleObj({
+                marginLeft: `-${props.gutter / 2}px`,
+                marginRight: `-${props.gutter / 2}px`
             });
             this.children.forEach((child) => {
                 if (child instanceof td_col_class_1.TdCol) {
-                    if (config.gutter) {
-                        child.addStyleObj({
+                    if (props.gutter) {
+                        child.ctrl.addStyleObj({
                             boxSizing: 'border-box',
-                            paddingLeft: `${config.gutter / 2}px`,
-                            paddingRight: `${config.gutter / 2}px`
+                            paddingLeft: `${props.gutter / 2}px`,
+                            paddingRight: `${props.gutter / 2}px`
                         });
                     }
                 }
             });
         }
-        if (config === null || config === void 0 ? void 0 : config.justify) {
-            // this.setJustify(config.justify);
-            switch (config.justify) {
+        if (props === null || props === void 0 ? void 0 : props.justify) {
+            // this.setJustify(props.justify);
+            switch (props.justify) {
                 case 'center':
-                    this.addStyleObj({
+                    this.ctrl.addStyleObj({
                         justifyContent: 'center'
                     });
                     break;
                 case 'end':
-                    this.addStyleObj({
+                    this.ctrl.addStyleObj({
                         justifyContent: 'flex-end'
                     });
                     break;
                 case 'space-between':
-                    this.addStyleObj({
+                    this.ctrl.addStyleObj({
                         justifyContent: 'space-between'
                     });
                     break;
                 case 'space-around':
-                    this.addStyleObj({
+                    this.ctrl.addStyleObj({
                         justifyContent: 'space-around'
                     });
                     break;
                 case 'space-evenly':
-                    this.addStyleObj({
+                    this.ctrl.addStyleObj({
                         justifyContent: 'space-evenly'
                     });
                     break;
@@ -71,26 +72,26 @@ class TdRow extends ui_abstract_1.UI {
                     break;
             }
         }
-        if (config === null || config === void 0 ? void 0 : config.align) {
-            // this.setAlign(config.align);
-            switch (config.align) {
+        if (props === null || props === void 0 ? void 0 : props.align) {
+            // this.setAlign(props.align);
+            switch (props.align) {
                 case 'top':
-                    this.addStyleObj({
+                    this.ctrl.addStyleObj({
                         alignItems: 'flex-start'
                     });
                     break;
                 case 'middle':
-                    this.addStyleObj({
+                    this.ctrl.addStyleObj({
                         alignItems: 'center'
                     });
                     break;
                 case 'bottom':
-                    this.addStyleObj({
+                    this.ctrl.addStyleObj({
                         alignItems: 'flex-end'
                     });
                     break;
                 case 'stretch':
-                    this.addStyleObj({
+                    this.ctrl.addStyleObj({
                         alignItems: 'stretch'
                     });
                     break;

package/src/components/basic/td-layout/td-row/td-row.interface.d.ts

@@ -12,7 +12,6 @@ export interface ITdRowConfig extends IUIConfig {
     gutter?: number;
     justify?: string;
     align?: string;
-    tag?: string;
 }
 export declare const RowJustify: readonly ["start", "center", "end", "space-around", "space-between", "space-evenly"];
 export declare const RowAlign: readonly ["top", "middle", "bottom"];

package/src/components/basic/td-link/td-link.class.d.ts

@@ -1,11 +1,11 @@
 import { UI } from '../../../ui/ui.abstract';
-import { TdIcon } from '../td-icon/td-icon.class';
 import { ITdLink, ITdLinkConfig } from './td-link.interface';
 export declare class TdLink extends UI implements ITdLink {
     className: 'TdLink';
-    config?: ITdLinkConfig;
-    icon?: TdIcon;
-    constructor(configs: ITdLinkConfig);
-    setConfig(config?: Partial<ITdLinkConfig>): void;
+    props: ITdLinkConfig;
+    private inner?;
+    constructor(params: ITdLinkConfig);
+    setup(): void;
     initEvents(): void;
+    handleClick(event: MouseEvent): void;
 }

package/src/components/basic/td-link/td-link.class.js

@@ -5,101 +5,99 @@ const framework_1 = require("@type-dom/framework");
 const ui_abstract_1 = require("../../../ui/ui.abstract");
 const td_link_style_1 = require("../td-link/td-link.style");
 class TdLink extends ui_abstract_1.UI {
-    constructor(configs) {
-        super({ tag: 'a' });
+    constructor(params) {
+        super(params, 'a');
         this.className = 'TdLink';
-        this.addStyleObj(td_link_style_1.$baseLink);
-        this.setConfig(configs);
+        (0, td_link_style_1.useType)(params);
+        this.ctrl.addStyleObj(td_link_style_1.$linkStyle);
+        this.props = this.setParams(params);
     }
-    setConfig(config) {
-        super.setConfig(config);
-        this.config = config;
-        if (config === null || config === void 0 ? void 0 : config.href) {
-            this.addAttrObj({
-                href: config.href
-            });
-        }
-        if (config === null || config === void 0 ? void 0 : config.target) {
-            this.addAttrObj({
-                target: config.target
-            });
-        }
-        if (config === null || config === void 0 ? void 0 : config.disabled) {
-            this.addAttrObj({
-                disabled: config.disabled
-            });
-        }
-        if (config === null || config === void 0 ? void 0 : config.type) {
-            if (config === null || config === void 0 ? void 0 : config.disabled) {
-                this.addStyleObj(td_link_style_1.$linkStateColors[config.type].disabled);
+    // override beforeCreate() {
+    //   this.ctrl.addStyleObj($linkStyle);
+    // }
+    setup() {
+        const props = this.props;
+        this.ctrl.addAttrObj({
+            href: props === null || props === void 0 ? void 0 : props.href,
+            target: props === null || props === void 0 ? void 0 : props.target,
+            disabled: props === null || props === void 0 ? void 0 : props.disabled
+        });
+        if (props === null || props === void 0 ? void 0 : props.type) {
+            if (props === null || props === void 0 ? void 0 : props.disabled) {
+                this.ctrl.addStyleObj(td_link_style_1.$linkStateColors[props.type].disabled);
             }
             else {
-                this.addStyleObj(td_link_style_1.$linkStateColors[config.type].default);
+                this.ctrl.addStyleObj(td_link_style_1.$linkStateColors[props.type].default);
             }
         }
         else {
-            this.addStyleObj(td_link_style_1.$linkStateColors.default.default);
+            this.ctrl.addStyleObj(td_link_style_1.$linkStateColors.default.default);
         }
-        if (config === null || config === void 0 ? void 0 : config.icon) {
-            if ((config === null || config === void 0 ? void 0 : config.iconPosition) === 'left') {
-                // 插入到前面
-                this.unshiftChild(config.icon);
-            }
-            else {
-                this.addChild(config.icon);
-            }
+        if (props === null || props === void 0 ? void 0 : props.icon) {
+            this.unshiftChild(props.icon);
         }
+        this.inner = new framework_1.Span({
+            name: 'inner',
+            styleObj: td_link_style_1.$linkInnerStyle
+        });
+        this.inner.addChild(this.getSlotNode());
+        this.addChild(this.inner);
     }
     initEvents() {
         this.addEvents({
-            mouseover: () => {
-                var _a, _b, _c, _d;
-                if ((_a = this.config) === null || _a === void 0 ? void 0 : _a.type) {
-                    if ((_b = this.config) === null || _b === void 0 ? void 0 : _b.disabled) {
-                        this.setStyleObj({
-                            cursor: framework_1.StyleCursor.notAllowed
+            click: (evt) => {
+                this.handleClick(evt);
+            },
+            mouseenter: () => {
+                if (this.props.type) {
+                    if (this.props.disabled) {
+                        this.ctrl.setStyleObj({
+                            cursor: 'notAllowed'
                         });
                     }
                     else {
-                        this.setStyleObj(td_link_style_1.$linkStateColors[(_c = this.config) === null || _c === void 0 ? void 0 : _c.type].hover);
+                        this.ctrl.setStyleObj(td_link_style_1.$linkStateColors[this.props.type].hover);
                     }
                 }
                 else {
-                    this.setStyleObj(td_link_style_1.$linkStateColors.default.hover);
+                    this.ctrl.setStyleObj(td_link_style_1.$linkStateColors.default.hover);
                 }
-                if (((_d = this.config) === null || _d === void 0 ? void 0 : _d.underline) === false) { // 设置 false 的情况下，不显示下划线
-                    this.setStyleObj({
+                if (this.props.underline === false) {
+                    // 设置 false 的情况下，不显示下划线
+                    this.ctrl.setStyleObj({
                         textDecoration: 'none'
                     });
                 }
                 else {
                     // 1. 默认显示下划线
                     // 2. 默认显示下划线，如果设置了 underline 为 true，则显示下划线
-                    this.setStyleObj({
+                    this.ctrl.setStyleObj({
                         textDecoration: 'underline'
                     });
                 }
             },
-            mouseout: (evt) => {
-                var _a, _b, _c, _d, _e;
-                this.setStyleObj({
+            mouseleave: (evt) => {
+                this.ctrl.setStyleObj({
                     textDecoration: 'none'
                 });
-                if ((_a = this.config) === null || _a === void 0 ? void 0 : _a.type) {
-                    this.removeStyleObj(td_link_style_1.$linkStateColors[(_b = this.config) === null || _b === void 0 ? void 0 : _b.type].hover);
-                    if ((_c = this.config) === null || _c === void 0 ? void 0 : _c.disabled) {
+                if (this.props.type) {
+                    this.ctrl.removeStyleObj(td_link_style_1.$linkStateColors[this.props.type].hover);
+                    if (this.props.disabled) {
                         evt === null || evt === void 0 ? void 0 : evt.preventDefault();
-                        this.setStyleObj(td_link_style_1.$linkStateColors[(_d = this.config) === null || _d === void 0 ? void 0 : _d.type].disabled);
+                        this.ctrl.setStyleObj(td_link_style_1.$linkStateColors[this.props.type].disabled);
                     }
                     else {
-                        this.setStyleObj(td_link_style_1.$linkStateColors[(_e = this.config) === null || _e === void 0 ? void 0 : _e.type].default);
+                        this.ctrl.setStyleObj(td_link_style_1.$linkStateColors[this.props.type].default);
                     }
                 }
                 else {
-                    this.removeStyleObj(td_link_style_1.$linkStateColors.default.hover);
+                    this.ctrl.removeStyleObj(td_link_style_1.$linkStateColors.default.hover);
                 }
             }
         });
     }
+    handleClick(event) {
+        this.emit('click', event);
+    }
 }
 exports.TdLink = TdLink;