@type-dom/ui 0.1.0 → 0.1.2

package/src/components/basic/td-container/td-header/td-header.class.d.ts

@@ -1,9 +1,10 @@
 import { TypeHeader } from '@type-dom/framework';
 import { TdContainer } from '../td-container.class';
-import type { ITdHeader, ITdHeaderConfig } from './td-header.interface';
+import type { ITdHeader, TdHeaderProps } from './td-header.interface';
 export declare class TdHeader extends TypeHeader implements ITdHeader {
     className: 'TdHeader';
-    props: ITdHeaderConfig;
+    props: TdHeaderProps;
     parent?: TdContainer;
-    constructor(params?: ITdHeaderConfig);
+    constructor(params?: TdHeaderProps);
+    setup(): void;
 }

package/src/components/basic/td-container/td-header/td-header.class.js

@@ -2,24 +2,29 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdHeader = void 0;
 const framework_1 = require("@type-dom/framework");
+const signals_1 = require("@type-dom/signals");
+const use_namespace_1 = require("../../../../hooks/use-namespace");
 class TdHeader extends framework_1.TypeHeader {
     constructor(params = {}) {
         super();
         this.className = 'TdHeader';
         this.attr.addName('td-header');
-        this.style.addObj({
-            display: 'flex',
-            alignItems: 'center',
-            padding: '0 20px',
-            boxSizing: 'border-box',
-            flexShrink: 0,
-            height: 60,
-            backgroundColor: '#fff'
-        });
-        if (params === null || params === void 0 ? void 0 : params.slot) {
-            this.slotChild(params.slot);
-        }
         this.props = this.useParams(params);
     }
+    setup() {
+        var _a;
+        const props = this.props;
+        const ns = (0, use_namespace_1.useNamespace)('header');
+        const style = (0, signals_1.computed)(() => {
+            return props.height
+                ? ns.cssVarBlock({
+                    height: props.height.toString(),
+                })
+                : {};
+        });
+        this.attr.addClass(ns.b());
+        this.style.addObj(style);
+        this.slotChildren(props.slot || ((_a = props.slots) === null || _a === void 0 ? void 0 : _a.default));
+    }
 }
 exports.TdHeader = TdHeader;

package/src/components/basic/td-container/td-header/td-header.interface.d.ts

@@ -1,8 +1,8 @@
-import { ITypeConfig, ITypeHeader } from '@type-dom/framework';
+import { ITypeHeader, TypeHeaderProps } from '@type-dom/framework';
 export interface ITdHeader extends ITypeHeader {
     className: 'TdHeader';
 }
-export interface ITdHeaderConfig extends ITypeConfig {
+export interface TdHeaderProps extends TypeHeaderProps {
     height?: string | number;
     backgroundColor?: string;
 }

package/src/components/basic/td-container/td-header/td-header.old.d.ts

@@ -0,0 +1,9 @@
+import { TypeHeader } from '@type-dom/framework';
+import { TdContainer } from '../td-container.class';
+import type { ITdHeader, TdHeaderProps } from './td-header.interface';
+export declare class TdHeader extends TypeHeader implements ITdHeader {
+    className: 'TdHeader';
+    props: TdHeaderProps;
+    parent?: TdContainer;
+    constructor(params?: TdHeaderProps);
+}

package/src/components/basic/td-container/td-header/td-header.old.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdHeader = void 0;
+const framework_1 = require("@type-dom/framework");
+class TdHeader extends framework_1.TypeHeader {
+    constructor(params = {}) {
+        super();
+        this.className = 'TdHeader';
+        this.attr.addName('td-header');
+        this.style.addObj({
+            display: 'flex',
+            alignItems: 'center',
+            padding: '0 20px',
+            boxSizing: 'border-box',
+            flexShrink: 0,
+            height: 60,
+            backgroundColor: '#fff',
+        });
+        this.slotChildren(params.slot);
+        this.props = this.useParams(params);
+    }
+}
+exports.TdHeader = TdHeader;

package/src/components/basic/td-container/td-main/style/css.d.ts

@@ -0,0 +1,2 @@
+import '../../../base/style/css';
+import '@element-plus/theme-chalk/el-main.css';

package/src/components/basic/td-container/td-main/style/css.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("../../../base/style/css");
+require("@element-plus/theme-chalk/el-main.css");

package/src/components/basic/td-container/td-main/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../../../../components/base/style';
+import '../../../../theme-chalk/main.scss';

package/src/components/basic/td-container/td-main/style/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("../../../../../components/base/style");
+require("../../../../theme-chalk/main.scss");

package/src/components/basic/td-container/td-main/td-main.class.d.ts

@@ -1,9 +1,8 @@
-import { TypeHtml } from '@type-dom/framework';
-import { ITdMain, ITdMainConfig } from './td-main.interface';
-export declare class TdMain extends TypeHtml implements ITdMain {
+import { TypeMain } from '@type-dom/framework';
+import { ITdMain, TdMainProps } from './td-main.interface';
+export declare class TdMain extends TypeMain implements ITdMain {
     className: 'TdMain';
-    nodeName: string;
-    dom: HTMLElement;
-    props: ITdMainConfig;
-    constructor(params?: ITdMainConfig);
+    props: TdMainProps;
+    constructor(params?: TdMainProps);
+    setup(): void;
 }

package/src/components/basic/td-container/td-main/td-main.class.js

@@ -2,24 +2,20 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdMain = void 0;
 const framework_1 = require("@type-dom/framework");
-class TdMain extends framework_1.TypeHtml {
+const use_namespace_1 = require("../../../../hooks/use-namespace");
+class TdMain extends framework_1.TypeMain {
     constructor(params = {}) {
         super();
         this.className = 'TdMain';
-        this.nodeName = params.tag || 'main';
-        this.dom = document.createElement(this.nodeName);
         this.attr.addName('td-main');
-        this.style.addObj({
-            display: 'block',
-            flex: 1,
-            flexBasis: 'auto',
-            overflow: 'auto',
-            boxSizing: 'border-box'
-            // padding: '20px',
-        });
-        console.log('then slotChild . params.slot is ', params.slot);
-        this.slotChild(params.slot);
         this.props = this.useParams(params);
     }
+    setup() {
+        var _a;
+        const props = this.props;
+        const ns = (0, use_namespace_1.useNamespace)('main');
+        this.attr.addClass(ns.b());
+        this.slotChildren(props.slot || ((_a = props.slots) === null || _a === void 0 ? void 0 : _a.default));
+    }
 }
 exports.TdMain = TdMain;

package/src/components/basic/td-container/td-main/td-main.interface.d.ts

@@ -1,7 +1,7 @@
-import { ITypeConfig, ITypeHtml } from '@type-dom/framework';
-export interface ITdMain extends ITypeHtml {
+import { TypeMainProps, ITypeMain } from '@type-dom/framework';
+export interface ITdMain extends ITypeMain {
     className: 'TdMain';
 }
-export interface ITdMainConfig extends ITypeConfig {
+export interface TdMainProps extends TypeMainProps {
     tag?: 'main';
 }

package/src/components/basic/td-container/td-main/td-main.old.d.ts

@@ -0,0 +1,8 @@
+import { TypeHtml } from '@type-dom/framework';
+import { ITdMain, TdMainProps } from './td-main.interface';
+export declare class TdMain extends TypeHtml implements ITdMain {
+    className: 'TdMain';
+    dom?: HTMLElement;
+    props: TdMainProps;
+    constructor(params?: TdMainProps);
+}

package/src/components/basic/td-container/td-main/td-main.old.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdMain = void 0;
+const framework_1 = require("@type-dom/framework");
+class TdMain extends framework_1.TypeHtml {
+    constructor(params = {}) {
+        super();
+        this.className = 'TdMain';
+        this.assignProps({
+            nodeName: params.tag || 'main',
+        });
+        this.attr.addName('td-main');
+        this.style.addObj({
+            display: 'block',
+            flex: 1,
+            flexBasis: 'auto',
+            overflow: 'auto',
+            boxSizing: 'border-box',
+            // padding: '20px',
+        });
+        // console.log('then slotChild . params.slot is ', params.slot);
+        this.slotChildren(params.slot);
+        this.props = this.useParams(params);
+    }
+}
+exports.TdMain = TdMain;

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

@@ -0,0 +1 @@
+import '../../../../components/base/style/css';

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

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("../../../../components/base/style/css");

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

@@ -0,0 +1 @@
+import '../../../base/style';

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

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("../../../base/style");

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

@@ -1,25 +1,23 @@
-import { SlotNode, TypeHtml, TypeI, TypeSvgSvg } from '@type-dom/framework';
-import { ITdIcon, ITdIconConfig } from './td-icon.interface';
+import { TypeI, TypeSvgSvg } from '@type-dom/framework';
+import { ITdIcon, IconProps } from './td-icon.interface';
 /**
- * TdIcon 类继承自 UI 类，实现了 ITdIcon 接口。
+ * TdIcon 类继承自 TypeI 类，实现了 ITdIcon 接口。
  * 该类用于创建和管理图标，支持配置不同的图标样式和SVG图形。
  */
 export declare class TdIcon extends TypeI implements ITdIcon {
     className: 'TdIcon';
-    props: ITdIconConfig;
-    svg?: TypeSvgSvg;
-    parent?: TypeHtml | SlotNode;
-    static initCalled: boolean;
+    props: IconProps;
     /**
      * TdIcon 类的构造函数。
      * @param params
      */
-    constructor(params?: ITdIconConfig);
+    constructor(params?: IconProps);
     /**
      * 根据配置更新图标的状态和样式。
      */
     setup(): void;
     /**
+     * todo delete
      * 替换子节点中的SVG元素。
      *
      * 此方法用于查找并替换当前节点中指定的SVG元素。如果找不到指定的SVG元素，则将新SVG元素添加为子节点。
@@ -29,9 +27,4 @@ export declare class TdIcon extends TypeI implements ITdIcon {
      * @param fromSvg 可选参数，指定要替换的SVG元素。如果不提供，则替换所有实例化的SVG元素。
      */
     replaceSvg(toSvg: TypeSvgSvg, fromSvg?: TypeSvgSvg): void;
-    /**
-     * 组件挂载后的钩子函数。
-     * 该函数目前用于处理加载状态的动画效果。
-     */
-    mounted(): void;
 }

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

@@ -2,13 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdIcon = void 0;
 const framework_1 = require("@type-dom/framework");
+const signals_1 = require("@type-dom/signals");
 const utils_1 = require("@type-dom/utils");
-const td_icon_style_1 = require("./td-icon.style");
+const use_namespace_1 = require("../../../hooks/use-namespace");
 /**
- * TdIcon 类继承自 UI 类，实现了 ITdIcon 接口。
+ * TdIcon 类继承自 TypeI 类，实现了 ITdIcon 接口。
  * 该类用于创建和管理图标，支持配置不同的图标样式和SVG图形。
  */
-// @StyleManager
 class TdIcon extends framework_1.TypeI {
     /**
      * TdIcon 类的构造函数。
@@ -17,69 +17,30 @@ class TdIcon extends framework_1.TypeI {
     constructor(params = {}) {
         super();
         this.className = 'TdIcon';
-        // this.addStyleObj($iconLeft);
-        this.attr.addName('td-icon');
-        this.style.addObj(td_icon_style_1.$tdIcon);
-        if (params === null || params === void 0 ? void 0 : params.loading) {
-            this.style.addObj(td_icon_style_1.$iconLoading);
-        }
-        // 首次创建时，添加style标签；避免重复创建
-        if (!TdIcon.initCalled) {
-            TdIcon.initCalled = true;
-            const cssText = `
-/* 选择所有带有 data-v-366071 属性的元素 */
-/* 在这里添加您的样式规则 */
-@keyframes rotating-${framework_1.vHash} {
-  0% {
-    transform: rotateZ(0deg);
-  }
-  100% {
-    transform: rotateZ(360deg);
-  }
-}
-      `;
-            (0, framework_1.createStyle)(cssText);
-            // createClass('td-icon', $tdIcon);
-        }
-        this.slotChild(params.slot);
-        // this.addChild(this.getSlotNode());
         this.props = this.useParams(params);
     }
     /**
      * 根据配置更新图标的状态和样式。
      */
     setup() {
-        var _a;
         const props = this.props;
-        if (props === null || props === void 0 ? void 0 : props.svgObj) {
-            // 直接作为 childNodes的子元素更合理；
-            this.addChild(props.svgObj);
-            this.svg = props.svgObj;
-            this.svg.attr.addObj({
-                height: '1em',
-                width: '1em',
-            });
-        }
-        if (props === null || props === void 0 ? void 0 : props.color) {
-            this.style.addObj({
-                color: props.color,
-            });
-        }
-        if (props === null || props === void 0 ? void 0 : props.size) {
-            this.style.addObj({
-                fontSize: (0, utils_1.addUnit)(props.size),
-            });
-            (_a = this.svg) === null || _a === void 0 ? void 0 : _a.resetSize(props.size, props.size);
-        }
-        if ((props === null || props === void 0 ? void 0 : props.position) === 'right') {
-            // 位置应该是引用的对象中设置，自身应该不需要设置。
-            this.style.addObj(td_icon_style_1.$iconRight);
-        }
-        else if ((props === null || props === void 0 ? void 0 : props.position) === 'left') {
-            this.style.addObj(td_icon_style_1.$iconLeft);
-        }
+        const ns = (0, use_namespace_1.useNamespace)('icon');
+        const style = (0, signals_1.computed)(() => {
+            const { size, color } = props;
+            if (!size && !color) {
+                return {};
+            }
+            return {
+                fontSize: (0, utils_1.isUndefined)(size) ? undefined : (0, utils_1.addUnit)(size),
+                '--color': color,
+            };
+        });
+        this.attr.addClass(ns.b());
+        this.style.addObj(style);
+        this.slotChildren(props.slot);
     }
     /**
+     * todo delete
      * 替换子节点中的SVG元素。
      *
      * 此方法用于查找并替换当前节点中指定的SVG元素。如果找不到指定的SVG元素，则将新SVG元素添加为子节点。
@@ -90,7 +51,7 @@ class TdIcon extends framework_1.TypeI {
      */
     replaceSvg(toSvg, fromSvg) {
         var _a;
-        console.log('replaceSvg ');
+        // console.log('replaceSvg ');
         // 查找要替换的SVG元素的索引。
         const svgIndex = (_a = this.childNodes) === null || _a === void 0 ? void 0 : _a.findIndex((child) => {
             // 如果指定了要替换的SVG元素，则判断当前元素是否是待替换的元素。
@@ -111,45 +72,17 @@ class TdIcon extends framework_1.TypeI {
         else {
             // 替换找到的SVG元素为新SVG元素。
             if (fromSvg) {
-                fromSvg !== toSvg && this.replaceSvg(toSvg, fromSvg);
+                fromSvg !== toSvg && this.replaceChild(toSvg, fromSvg);
             }
             else {
                 this.addChild(toSvg);
             }
         }
         // // 设置新SVG元素的父节点为当前节点。
-        // toSvg.parent = slotNode;
         // 更新渲染，以显示替换或添加的新SVG元素。
         // toSvg?.mount(this.dom);
+        toSvg === null || toSvg === void 0 ? void 0 : toSvg.update();
         // this.mount(this.elementParent?.dom);
     }
-    // getSlotNode(name = 'default') {
-    //   return this.slotNodes[name] = this.slotNodes[name] ?? new SlotNode(name);
-    // }
-    /**
-     * 组件挂载后的钩子函数。
-     * 该函数目前用于处理加载状态的动画效果。
-     */
-    mounted() {
-        /**
-         * loading 效果
-         * todo css 中配置
-         * @keyframes rotating {
-         *   0% {
-         *     transform: rotateZ(0deg);
-         *   }
-         *   100% {
-         *     transform: rotateZ(360deg);
-         *   }
-         * }
-         * 现在配置的不生效 ？？？？  shadowRoot 会隔离了样式。
-         * 而打包时，样式会在最外层的项目中生成，导致样式失效。
-         */
-        // if (this.props.loading) {
-        //   const a = createRotatableElement(this.dom, 0, 60);
-        //   a.start();
-        // }
-    }
 }
 exports.TdIcon = TdIcon;
-TdIcon.initCalled = false;

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

@@ -1,5 +1,4 @@
-import { ITypeConfig, ITypeI, TypeSvgSvg } from '@type-dom/framework';
-import { TdIcon } from './td-icon.class';
+import { ITypeI, TypeIProps } from '@type-dom/framework';
 /**
  * 定义了图标的接口，继承自IUI接口。
  * 此接口用于规范图标的属性和行为。
@@ -9,16 +8,13 @@ export interface ITdIcon extends ITypeI {
      * 类名，固定为'TdIcon'，用于在HTML元素上应用样式。
      */
     className: 'TdIcon';
+    props: IconProps;
 }
 /**
  * 定义了图标配置的接口，扩展了IUIConfig接口。
  * 这些配置用于自定义图标的展示方式。
  */
-export interface ITdIconConfig extends ITypeConfig {
-    /**
-     * 可选。指定一个SVG图形对象，用于显示自定义SVG图标。
-     */
-    svgObj?: TypeSvgSvg;
+export interface IconProps extends TypeIProps {
     /**
      * 可选。指定图标的大小，可以是字符串（如"20px"）或数字。
      */
@@ -27,16 +23,4 @@ export interface ITdIconConfig extends ITypeConfig {
      * 可选。指定图标的颜色，使用字符串表示的颜色值。
      */
     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,5 +1,5 @@
 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;
+export declare const $iconStyle: IStyle;
+export declare const $iconLoadingStyle: IStyle;
+export declare const $iconRightStyle: IStyle;
+export declare const $iconLeftStyle: IStyle;

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

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.$iconLeft = exports.$iconRight = exports.$iconLoading = exports.$tdIcon = void 0;
+exports.$iconLeftStyle = exports.$iconRightStyle = exports.$iconLoadingStyle = exports.$iconStyle = void 0;
 const framework_1 = require("@type-dom/framework");
-exports.$tdIcon = {
+exports.$iconStyle = {
     height: '1em',
     width: '1em',
     lineHeight: '1em',
@@ -12,16 +12,16 @@ exports.$tdIcon = {
     position: 'relative',
     fill: 'currentColor',
     // color: 'var(--color)',
-    fontSize: 'inherit'
+    fontSize: 'inherit',
 };
-exports.$iconLoading = {
-    animation: `rotating-${framework_1.vHash} 2s linear infinite`
+exports.$iconLoadingStyle = {
+    animation: `rotating-${framework_1.vHash} 2s linear infinite`,
 };
-exports.$iconRight = {
+exports.$iconRightStyle = {
     marginLeft: '5px',
-    float: 'right'
+    float: 'right',
 };
-exports.$iconLeft = {
+exports.$iconLeftStyle = {
     marginRight: '5px',
-    float: 'left'
+    float: 'left',
 };

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

@@ -0,0 +1,2 @@
+import '../../../base/style/css';
+import '@element-plus/theme-chalk/el-col.css';

package/src/components/basic/td-layout/td-col/style/css.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("../../../base/style/css");
+require("@element-plus/theme-chalk/el-col.css");

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

@@ -0,0 +1,2 @@
+import '../../../../base/style';
+import '../../../../../theme-chalk/col.scss';

package/src/components/basic/td-layout/td-col/style/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("../../../../base/style");
+require("../../../../../theme-chalk/col.scss");

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

@@ -1,15 +1,11 @@
-import { TypeDiv, TypeNode } from '@type-dom/framework';
+import { TypeDiv } from '@type-dom/framework';
 import { TdRow } from '../td-row/td-row.class';
-import { ITdCol, ITdColConfig } from './td-col.interface';
+import { ColProps, ITdCol } from './td-col.interface';
+import './style/index';
 export declare class TdCol extends TypeDiv implements ITdCol {
     className: 'TdCol';
     parent?: TdRow;
-    props: ITdColConfig;
-    constructor(params?: ITdColConfig);
-    get screenWidth(): number;
+    props: ColProps;
+    constructor(params?: ColProps);
     setup(): void;
-    mounted(): void;
-    destroy(root?: TypeNode): void;
-    debounceResize: () => void;
-    resize: () => void;
 }