@type-dom/ui 0.1.0 → 0.1.1

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元素添加为子节点。
@@ -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 '@element-plus/components/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("@element-plus/components/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;
 }

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

@@ -2,130 +2,69 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdCol = void 0;
 const utils_1 = require("@type-dom/utils");
+const signals_1 = require("@type-dom/signals");
 const framework_1 = require("@type-dom/framework");
+const use_namespace_1 = require("../../../../hooks/use-namespace");
+const td_row_const_1 = require("../td-row/td-row.const");
+const td_col_const_1 = require("./td-col.const");
+require("./style/index");
 class TdCol extends framework_1.TypeDiv {
     constructor(params = {}) {
         super();
-        // 使用防抖函数包装处理函数
-        this.debounceResize = () => (0, utils_1.debounce)(this.resize, 250)();
-        this.resize = () => {
-            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）
-                    // 当前屏幕尺寸小于768px，执行xs断点下的操作
-                    const proportion = (0, utils_1.formatFloat)(props.xs / 24) * 100 + '%';
-                    this.style.setObj({
-                        maxWidth: proportion,
-                        flex: '0 0 ' + proportion
-                    });
-                }
-            }
-            if (props === null || props === void 0 ? void 0 : props.sm) {
-                if (this.screenWidth >= 768) {
-                    // && this.screenWidth < 992
-                    // 小屏幕（sm）
-                    // 当前屏幕尺寸在768px至991px之间，执行md断点下的操作
-                    // 设置你的值或执行相应JS代码
-                    const proportion = (0, utils_1.formatFloat)(props.sm / 24) * 100 + '%';
-                    this.style.setObj({
-                        maxWidth: proportion,
-                        flex: '0 0 ' + proportion
-                    });
-                }
-            }
-            if (props === null || props === void 0 ? void 0 : props.md) {
-                if (this.screenWidth >= 992) {
-                    // && this.screenWidth < 1200
-                    // 中屏幕（md）
-                    // 当前屏幕尺寸在992px至1199px之间，执行lg断点下的操作
-                    // 设置你的值或执行相应JS代码
-                    const proportion = (0, utils_1.formatFloat)(props.md / 24) * 100 + '%';
-                    this.style.setObj({
-                        maxWidth: proportion,
-                        flex: '0 0 ' + proportion
-                    });
-                }
-            }
-            if (props === null || props === void 0 ? void 0 : props.lg) {
-                if (this.screenWidth >= 1200) {
-                    // && this.screenWidth < 1920
-                    // 大屏幕（lg）
-                    // 当前屏幕尺寸在1200px至1920px之间，执行lg断点下的操作
-                    // 设置你的值或执行相应JS代码
-                    const proportion = (0, utils_1.formatFloat)(props.lg / 24) * 100 + '%';
-                    this.style.setObj({
-                        maxWidth: proportion,
-                        flex: '0 0 ' + proportion
-                    });
-                }
-            }
-            if (props === null || props === void 0 ? void 0 : props.xl) {
-                if (this.screenWidth >= 1920) {
-                    // 超大屏幕（xl及以上）
-                    // 当前屏幕尺寸等于或大于1920px，执行xl断点下的操作
-                    // 设置你的值或执行相应JS代码
-                    const proportion = (0, utils_1.formatFloat)(props.xl / 24) * 100 + '%';
-                    this.style.setObj({
-                        maxWidth: proportion,
-                        flex: '0 0 ' + proportion
-                    });
-                }
-            }
-        };
         this.className = 'TdCol';
-        this.slotChild(params.slot);
+        this.attr.addName('td-col');
+        this.assignProps(td_col_const_1.colProps);
         this.props = this.useParams(params);
     }
-    get screenWidth() {
-        return window.innerWidth || document.documentElement.clientWidth;
-    }
     setup() {
+        var _a;
         const props = this.props;
-        if (props === null || props === void 0 ? void 0 : props.span) {
-            if (props.span === 0) {
-                this.style.addObj({
-                    display: 'none'
-                });
+        const { gutter } = (0, framework_1.inject)(td_row_const_1.rowContextKey, {
+            gutter: (0, signals_1.computed)(() => 0),
+        });
+        const ns = (0, use_namespace_1.useNamespace)('col');
+        const style = (0, signals_1.computed)(() => {
+            const styles = {};
+            if (gutter.get()) {
+                styles.paddingLeft = styles.paddingRight = `${gutter.get() / 2}px`;
             }
-            else {
-                const proportion = (0, utils_1.formatFloat)(props.span / 24) * 100 + '%';
-                this.style.addObj({
-                    maxWidth: proportion,
-                    flex: '0 0 ' + proportion
-                });
-            }
-        }
-        if (props === null || props === void 0 ? void 0 : props.offset) {
-            const proportion = (0, utils_1.formatFloat)(props.offset / 24) * 100 + '%';
-            this.style.addObj({
-                marginLeft: proportion
-            });
-        }
-        if (props === null || props === void 0 ? void 0 : props.pull) {
-            const proportion = (0, utils_1.formatFloat)(props.pull / 24) * 100 + '%';
-            this.style.addObj({
-                position: 'relative',
-                right: proportion
+            return styles;
+        });
+        const colKls = (0, signals_1.computed)(() => {
+            const classes = [];
+            const pos = ['span', 'offset', 'pull', 'push'];
+            pos.forEach((prop) => {
+                const size = props[prop];
+                if ((0, utils_1.isNumber)(size)) {
+                    if (prop === 'span')
+                        classes.push(ns.b(`${props[prop]}`));
+                    else if (size > 0)
+                        classes.push(ns.b(`${prop}-${props[prop]}`));
+                }
             });
-        }
-        if (props === null || props === void 0 ? void 0 : props.push) {
-            const proportion = (0, utils_1.formatFloat)(props.push / 24) * 100 + '%';
-            this.style.addObj({
-                position: 'relative',
-                left: proportion
+            const sizes = ['xs', 'sm', 'md', 'lg', 'xl'];
+            sizes.forEach((size) => {
+                if ((0, utils_1.isNumber)(props[size])) {
+                    classes.push(ns.b(`${size}-${props[size]}`));
+                }
+                else if ((0, utils_1.isObject)(props[size])) {
+                    Object.entries(props[size]).forEach(([prop, sizeProp]) => {
+                        classes.push(prop !== 'span'
+                            ? ns.b(`${size}-${prop}-${sizeProp}`)
+                            : ns.b(`${size}-${sizeProp}`));
+                    });
+                }
             });
-        }
-        this.resize();
-    }
-    mounted() {
-        // 监听窗口大小改变事件
-        window.addEventListener('resize', this.debounceResize);
-    }
-    destroy(root) {
-        window.removeEventListener('resize', this.debounceResize);
-        super.destroy(root);
+            // this is for the fix
+            if (gutter.get()) {
+                classes.push(ns.is('guttered'));
+            }
+            console.error('classes is ', classes);
+            return [ns.b(), classes];
+        });
+        this.attr.addClass(colKls);
+        this.style.addObj(style);
+        this.slotChildren(props.slot || ((_a = props.slots) === null || _a === void 0 ? void 0 : _a.default));
     }
 }
 exports.TdCol = TdCol;

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

@@ -0,0 +1,2 @@
+import { ColProps } from './td-col.interface';
+export declare const colProps: ColProps;

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.colProps = void 0;
+exports.colProps = {
+    tag: 'div',
+    span: 24,
+    offset: 0,
+    pull: 0,
+    push: 0,
+};

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

@@ -1,8 +1,16 @@
-import { ITypeConfig, ITypeDiv } from '@type-dom/framework';
+import { ITypeDiv, TypeDivProps } from '@type-dom/framework';
 export interface ITdCol extends ITypeDiv {
     className: 'TdCol';
+    props: ColProps;
 }
-export interface ITdColConfig extends ITypeConfig {
+export type ColSizeObject = {
+    span?: number;
+    offset?: number;
+    pull?: number;
+    push?: number;
+};
+export type ColSize = number | ColSizeObject;
+export interface ColProps extends TypeDivProps {
     /**
      * @description number of column the grid spans
      */
@@ -22,21 +30,21 @@ export interface ITdColConfig extends ITypeConfig {
     /**
      * @description `<768px` Responsive columns or column props object
      */
-    xs?: number;
+    xs?: ColSize;
     /**
      * @description `≥768px` Responsive columns or column props object
      */
-    sm?: number;
+    sm?: ColSize;
     /**
      * @description `≥992px` Responsive columns or column props object
      */
-    md?: number;
+    md?: ColSize;
     /**
      * @description `≥1200px` Responsive columns or column props object
      */
-    lg?: number;
+    lg?: ColSize;
     /**
      * @description `≥1920px` Responsive columns or column props object
      */
-    xl?: number;
+    xl?: ColSize;
 }

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

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

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

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

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

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

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

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

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

@@ -1,11 +1,11 @@
 import { TypeDiv } from '@type-dom/framework';
 import { TdCol } from '../td-col/td-col.class';
-import { ITdRow, ITdRowConfig } from './td-row.interface';
+import { ITdRow, RowProps } from './td-row.interface';
+import './style/index';
 export declare class TdRow extends TypeDiv implements ITdRow {
     className: 'TdRow';
-    props: ITdRowConfig;
+    props: RowProps;
     childNodes: TdCol[];
-    gutter?: number;
-    constructor(params?: ITdRowConfig);
+    constructor(params?: RowProps);
     setup(): void;
 }