@type-dom/ui 0.1.0 → 0.1.1

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

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

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

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

package/src/components/basic/td-space/td-space-item/td-space-item.class.d.ts

@@ -0,0 +1,8 @@
+import { TypeDiv } from '@type-dom/framework';
+import { SpaceItemProps } from './td-space-item.interface';
+export declare class TdSpaceItem extends TypeDiv {
+    className: 'TdSpaceItem';
+    props: SpaceItemProps;
+    constructor(params?: SpaceItemProps);
+    setup(): void;
+}

package/src/components/basic/td-space/td-space-item/td-space-item.class.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdSpaceItem = 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 TdSpaceItem extends framework_1.TypeDiv {
+    constructor(params = {}) {
+        super();
+        this.className = 'TdSpaceItem';
+        this.props = this.useParams(params);
+    }
+    setup() {
+        var _a;
+        const props = this.props;
+        const ns = (0, use_namespace_1.useNamespace)('space');
+        const classes = (0, signals_1.computed)(() => `${(props === null || props === void 0 ? void 0 : props.prefixCls) || ns.b()}__item`);
+        this.attr.addClass(classes);
+        this.slotChildren(props.slot || ((_a = props.slots) === null || _a === void 0 ? void 0 : _a.default));
+    }
+}
+exports.TdSpaceItem = TdSpaceItem;

package/src/components/basic/td-space/td-space-item/td-space-item.interface.d.ts

@@ -0,0 +1,7 @@
+import { ITypeDiv, TypeDivProps } from '@type-dom/framework';
+export interface ITdSpaceItem extends ITypeDiv {
+    className: 'TdSpaceItem';
+}
+export interface SpaceItemProps extends TypeDivProps {
+    prefixCls?: string;
+}

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

@@ -1,12 +1,9 @@
 import { TypeDiv } from '@type-dom/framework';
-import { ITdSpace, ITdSpaceConfig } from './td-space.interface';
+import { ITdSpace, SpaceProps } from './td-space.interface';
+import './style/index';
 export declare class TdSpace extends TypeDiv implements ITdSpace {
     className: 'TdSpace';
-    props: ITdSpaceConfig;
-    horizontalSize?: number;
-    verticalSize?: number;
-    constructor(params?: ITdSpaceConfig);
+    props: SpaceProps;
+    constructor(params?: SpaceProps);
     setup(): void;
-    useSize(size?: number | string | [number, number]): void;
-    setSize(size: number | string | [number, number]): void;
 }

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

@@ -4,97 +4,151 @@ exports.TdSpace = void 0;
 const utils_1 = require("@type-dom/utils");
 const framework_1 = require("@type-dom/framework");
 const td_space_const_1 = require("./td-space.const");
+const td_space_item_class_1 = require("./td-space-item/td-space-item.class");
+const use_space_1 = require("./use-space");
+require("./style/index");
+const signals_1 = require("@type-dom/signals");
 class TdSpace extends framework_1.TypeDiv {
     constructor(params = {}) {
         super();
         this.className = 'TdSpace';
         this.attr.addName('td-space');
-        this.style.addObj({
-            display: 'inline-flex',
-            verticalAlign: 'top'
-        });
-        this.slotChild(params.slot);
+        this.assignProps(td_space_const_1.spaceProps);
         this.props = this.useParams(params);
     }
     setup() {
-        this.children.forEach((item) => {
-            if (item instanceof framework_1.TypeHtml) {
-                item.style.addObj({
-                    display: 'flex',
-                    flexWrap: 'wrap'
-                });
-            }
-            else if (item instanceof framework_1.TypeFragment) {
-                item.addStyleObj({
-                    display: 'flex',
-                    flexWrap: 'wrap'
-                });
-            }
-        });
+        var _a, _b;
+        console.log('td-space setup . ');
         const props = this.props;
-        this.useSize(props === null || props === void 0 ? void 0 : props.size);
-        if (props === null || props === void 0 ? void 0 : props.wrap) {
-            this.style.add('flexWrap', 'wrap');
-        }
-        if (props === null || props === void 0 ? void 0 : props.fill) {
-            this.style.addObj({
-                flexWrap: 'wrap',
-                flexGrow: 1,
-                minWidth: `${(props === null || props === void 0 ? void 0 : props.fillRatio) || 100}%`
-            });
-        }
-        if ((props === null || props === void 0 ? void 0 : props.direction) === 'horizontal') {
-            this.style.add('flexDirection', 'row');
-        }
-        if ((props === null || props === void 0 ? void 0 : props.direction) === 'vertical') {
-            this.style.add('flexDirection', 'column');
-        }
-        if (props === null || props === void 0 ? void 0 : props.alignment) {
-            this.style.add('alignItems', props.alignment);
-        }
-    }
-    useSize(size) {
-        const props = this.props;
-        if ((0, utils_1.isArray)(size)) {
-            this.horizontalSize = size[0];
-            this.verticalSize = size[1];
-        }
-        else {
-            let val;
-            if ((0, utils_1.isNumber)(size)) {
-                val = size;
-            }
-            else {
-                val = td_space_const_1.SIZE_MAP[size || 'small'] || td_space_const_1.SIZE_MAP.small;
-            }
-            if (((props === null || props === void 0 ? void 0 : props.wrap) || (props === null || props === void 0 ? void 0 : props.fill)) &&
-                (props === null || props === void 0 ? void 0 : props.direction) === 'horizontal') {
-                this.horizontalSize = this.verticalSize = val;
-            }
-            else {
-                if ((props === null || props === void 0 ? void 0 : props.direction) === 'vertical') {
-                    this.verticalSize = val;
-                    this.horizontalSize = 0;
+        const { classes, containerStyle, itemStyle } = (0, use_space_1.useSpace)(props);
+        // retrieve the children out via a simple for loop
+        // the edge case here is that when users uses directives like <v-for>, <v-if>
+        // we need to go deeper until the child is not the Fragment type
+        function extractChildren(children, parentKey = '', extractedChildren = []) {
+            console.warn('extractChildren is ', children);
+            // const { prefixCls } = props
+            children.forEach((child, loopKey) => {
+                if ((0, framework_1.isFragment)(child)) {
+                    if (child instanceof framework_1.For) {
+                        // For element should be done here
+                        const data = (0, signals_1.toRaw)(child.props.data);
+                        const getter = child.props.getter;
+                        if (data !== undefined) {
+                            data.forEach((item, index) => {
+                                let slot;
+                                if (getter) {
+                                    slot = getter(item, index);
+                                }
+                                else {
+                                    slot = item;
+                                }
+                                extractedChildren.push(new td_space_item_class_1.TdSpaceItem({
+                                    styleObj: itemStyle,
+                                    prefixCls: props.prefixCls,
+                                    slot: slot,
+                                }));
+                            });
+                        }
+                    }
+                    else if ((0, utils_1.isArray)(child.children)) {
+                        child.children.forEach((nested, key) => {
+                            if ((0, framework_1.isFragment)(nested) && (0, utils_1.isArray)(nested.children)) {
+                                extractChildren(nested.children, `${parentKey + key}-`, extractedChildren);
+                            }
+                            else {
+                                extractedChildren.push(new td_space_item_class_1.TdSpaceItem({
+                                    styleObj: itemStyle,
+                                    prefixCls: props.prefixCls,
+                                    slot: nested,
+                                }));
+                            }
+                        });
+                    }
+                    // if the current child is valid vnode, then append this current vnode
+                    // to item as child node.
                 }
-                else {
-                    // horizontal 默认
-                    this.horizontalSize = val;
-                    this.verticalSize = 0;
+                else if ((0, framework_1.isValidElementNode)(child)) {
+                    extractedChildren.push(new td_space_item_class_1.TdSpaceItem({
+                        styleObj: itemStyle,
+                        prefixCls: props.prefixCls,
+                        slot: child,
+                    }));
                 }
+            });
+            return extractedChildren;
+        }
+        const { spacer, direction } = props;
+        // this.slotChildren(props.slot || props.slots?.default);
+        // this.children.forEach((item) => {
+        //   if (item instanceof TypeHtml) {
+        //     item.style.addObj({
+        //       display: 'flex',
+        //       flexWrap: 'wrap'
+        //     });
+        //   } else if (item instanceof TypeFragment) {
+        //     item.addStyleObj({
+        //       display: 'flex',
+        //       flexWrap: 'wrap'
+        //     })
+        //   }
+        // });
+        // const children = renderSlot(slots, 'default', { key: 0 }, () => [])
+        const children = (0, framework_1.arraySlot)((_a = props.slot) !== null && _a !== void 0 ? _a : (_b = props.slots) === null || _b === void 0 ? void 0 : _b.default);
+        // if ((children.children ?? []).length === 0) return null
+        if ((children !== null && children !== void 0 ? children : []).length === 0)
+            return;
+        // loop the children, if current children is rendered via `renderList` or `<v-for>`
+        if ((0, utils_1.isArray)(children)) {
+            let extractedChildren = extractChildren(children);
+            console.log('extractChildren is ', extractedChildren);
+            if (spacer) {
+                // track the current rendering index, when encounters the last element
+                // then no need to add a spacer after it.
+                const len = extractedChildren.length - 1;
+                extractedChildren = extractedChildren.reduce((acc, child, idx) => {
+                    const children = [...acc, child];
+                    if (idx !== len) {
+                        children.push(
+                        // adding width 100% for vertical alignment,
+                        // when the spacer inherit the width from the
+                        // parent, this span's width was not set, so space
+                        // might disappear
+                        new framework_1.Span({
+                            styleObj: (0, signals_1.computed)(() => [
+                                itemStyle.get(),
+                                { width: direction === 'vertical' ? '100%' : null },
+                            ]),
+                            // if spacer is already a valid node, then append it to the current
+                            // span element.
+                            // otherwise, treat it as string.
+                            slot: spacer,
+                        })
+                        // createVNode(
+                        //   'span',
+                        //   {
+                        //     style: [
+                        //       itemStyle.value,
+                        //       direction === 'vertical' ? 'width: 100%' : null,
+                        //     ],
+                        //     key: idx,
+                        //   },
+                        //   [
+                        //     isVNode(spacer)
+                        //       ? spacer
+                        //       : createTextVNode(spacer as string, PatchFlags.TEXT),
+                        //   ],
+                        //   PatchFlags.STYLE
+                        // )
+                        );
+                    }
+                    return children;
+                }, []);
             }
+            // spacer container.
+            this.attr.addClass(classes);
+            this.style.addObj(containerStyle);
+            this.slotChildren(extractedChildren);
         }
-        this.style.addObj({
-            rowGap: this.verticalSize + 'px',
-            columnGap: this.horizontalSize + 'px'
-        });
-    }
-    setSize(size) {
-        console.log('setSize size is ', size);
-        this.useSize(size);
-        this.style.setObj({
-            rowGap: this.verticalSize + 'px',
-            columnGap: this.horizontalSize + 'px'
-        });
     }
 }
 exports.TdSpace = TdSpace;

package/src/components/basic/td-space/td-space.const.d.ts

@@ -1,3 +1,5 @@
+import { SpaceProps } from './td-space.interface';
 export declare const SIZE_MAP: {
     [propName: string]: number;
 };
+export declare const spaceProps: SpaceProps;

package/src/components/basic/td-space/td-space.const.js

@@ -1,8 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SIZE_MAP = void 0;
+exports.spaceProps = exports.SIZE_MAP = void 0;
 exports.SIZE_MAP = {
     small: 8,
     default: 12,
-    large: 16
+    large: 16,
+};
+exports.spaceProps = {
+    direction: 'horizontal',
+    alignment: 'center', // StyleAlignItems.center,
+    fillRatio: 100,
 };

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

@@ -1,23 +1,34 @@
-import { ITypeConfig, ITypeDiv, StyleAlignItems, TypeSvgSvg } from '@type-dom/framework';
+import { ITypeDiv, TypeDivProps, IClass, TypeNode } from '@type-dom/framework';
+import { Property } from '@type-dom/css-type';
+import { MaybeRef } from '@type-dom/signals';
+import { ComponentSize } from '../../../constants';
 export interface ITdSpace extends ITypeDiv {
     className: 'TdSpace';
     horizontalSize?: number;
     verticalSize?: number;
 }
-export interface ITdSpaceConfig extends ITypeConfig {
+export interface SpaceProps extends TypeDivProps {
     /**
      * @description Placement direction	排列的方向
      */
-    direction?: 'horizontal' | 'vertical';
+    direction?: MaybeRef<'horizontal' | 'vertical'>;
+    /**
+     * @description Classname
+     */
+    class?: IClass;
     /**
      * @description Controls the alignment of items	对齐方式
      * 对应 align-items
      */
-    alignment?: StyleAlignItems;
+    alignment?: Property.AlignItems;
+    /**
+     * @description Prefix for space-items
+     */
+    prefixCls?: string;
     /**
      * @description Spacer	间隔符
      */
-    spacer?: string | number | TypeSvgSvg;
+    spacer?: string | number | TypeNode;
     /**
      * @description Auto wrapping 设置是否自动折行 default: false
      */
@@ -25,15 +36,16 @@ export interface ITdSpaceConfig extends ITypeConfig {
     /**
      * @description Whether to fill the container	是否填充剩余空间 default: false
      */
-    fill?: boolean;
+    fill?: MaybeRef<boolean>;
     /**
      * @description Ratio of fill
+     * 填充比率 default: 100
      */
-    fillRatio?: number;
+    fillRatio?: MaybeRef<number>;
     /**
      * Sets the space between each element.
      * 间隔大小
      * 元组：[水平间隔，垂直间隔]；
      */
-    size?: number | string | [h: number, v: number];
+    size?: MaybeRef<number | ComponentSize | string | [h: number, v: number]>;
 }

package/src/components/basic/td-space/use-space.d.ts

@@ -0,0 +1,7 @@
+import { IStyle } from '@type-dom/css-type';
+import { SpaceProps } from './td-space.interface';
+export declare function useSpace(props: SpaceProps): {
+    classes: import("@type-dom/signals").Computed<import("dist/libs/framework/src").IClass[]>;
+    containerStyle: import("@type-dom/signals").Computed<IStyle<string | 0, string>[]>;
+    itemStyle: import("@type-dom/signals").Computed<IStyle<string | 0, string>>;
+};

package/src/components/basic/td-space/use-space.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSpace = useSpace;
+const signals_1 = require("@type-dom/signals");
+const utils_1 = require("@type-dom/utils");
+const use_namespace_1 = require("../../../hooks/use-namespace");
+const SIZE_MAP = {
+    small: 8,
+    default: 12,
+    large: 16,
+};
+function useSpace(props) {
+    const ns = (0, use_namespace_1.useNamespace)('space');
+    const classes = (0, signals_1.computed)(() => [
+        ns.b(),
+        ns.m((0, signals_1.toRaw)(props.direction)),
+        props.class,
+    ]);
+    const horizontalSize = (0, signals_1.signal)(0);
+    const verticalSize = (0, signals_1.signal)(0);
+    const containerStyle = (0, signals_1.computed)(() => {
+        const wrapKls = props.wrap || (0, signals_1.toRaw)(props.fill) ? { flexWrap: 'wrap' } : {};
+        const alignment = {
+            alignItems: props.alignment,
+        };
+        const gap = {
+            rowGap: `${verticalSize.get()}px`,
+            columnGap: `${horizontalSize.get()}px`,
+        };
+        // return Object.assign({}, wrapKls, alignment, gap, props.styleObj)
+        return [wrapKls, alignment, gap, props.styleObj];
+    });
+    const itemStyle = (0, signals_1.computed)(() => {
+        return (0, signals_1.toRaw)(props.fill)
+            ? { flexGrow: 1, minWidth: `${(0, signals_1.toRaw)(props.fillRatio)}%` }
+            : {};
+    });
+    (0, signals_1.effect)(() => {
+        console.error('TdSpace effect . ');
+        const { wrap, direction: dir, fill } = props;
+        const size = (0, signals_1.unref)(props.size);
+        // when the specified size have been given
+        if ((0, utils_1.isArray)(size)) {
+            const [h = 0, v = 0] = size;
+            horizontalSize.set(h);
+            verticalSize.set(v);
+        }
+        else {
+            let val;
+            if ((0, utils_1.isNumber)(size)) {
+                val = size;
+            }
+            else {
+                val = SIZE_MAP[size || 'small'] || SIZE_MAP.small;
+            }
+            if ((wrap || fill) && dir === 'horizontal') {
+                horizontalSize.set(val);
+                verticalSize.set(val);
+            }
+            else {
+                if (dir === 'horizontal') {
+                    horizontalSize.set(val);
+                    verticalSize.set(0);
+                }
+                else {
+                    verticalSize.set(val);
+                    horizontalSize.set(0);
+                }
+            }
+        }
+    });
+    return {
+        classes,
+        containerStyle,
+        itemStyle,
+    };
+}

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

@@ -0,0 +1,2 @@
+import '../../../base/style/css';
+import '../../../../theme-chalk/td-text.css';

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

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

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

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

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

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

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

@@ -1,12 +1,10 @@
 import { TypeHtml } from '@type-dom/framework';
-import { TdIcon } from '../td-icon/td-icon.class';
 import { ITdText, ITdTextConfig } from './td-text.interface';
+import './style/index';
 export declare class TdText extends TypeHtml implements ITdText {
     className: 'TdText';
-    nodeName: string;
-    dom: HTMLElement;
+    dom?: HTMLElement;
     props: ITdTextConfig;
-    icon?: TdIcon;
     constructor(params?: ITdTextConfig);
     setup(): void;
 }

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

@@ -2,54 +2,39 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdText = void 0;
 const framework_1 = require("@type-dom/framework");
-const td_text_style_1 = require("./td-text.style");
+const signals_1 = require("@type-dom/signals");
+const utils_1 = require("@type-dom/utils");
+const use_namespace_1 = require("../../../hooks/use-namespace");
+const use_form_common_props_1 = require("../../form/td-form/hooks/use-form-common-props");
+const td_text_const_1 = require("./td-text.const");
+require("./style/index");
 class TdText extends framework_1.TypeHtml {
     constructor(params = {}) {
         super();
         this.className = 'TdText';
-        this.nodeName = params.tag || 'span';
-        this.dom = document.createElement(this.nodeName);
-        this.style.addObj(td_text_style_1.$baseText);
-        // this.addChild(this.getSlotNode());
-        if (params.slot) {
-            this.slotChild(params.slot);
-        }
+        this.assignProps(td_text_const_1.textProps);
         this.props = this.useParams(params);
     }
     setup() {
         const props = this.props;
-        if (props === null || props === void 0 ? void 0 : props.type) {
-            this.style.addObj(td_text_style_1.$textStateColors[props.type].default);
-        }
-        else {
-            this.style.addObj(td_text_style_1.$textStateColors.default.default);
-        }
-        if (props === null || props === void 0 ? void 0 : props.size) {
-            this.style.addObj(td_text_style_1.sizeOpts[props === null || props === void 0 ? void 0 : props.size]);
-        }
-        else {
-            this.style.addObj(td_text_style_1.sizeOpts.default);
-        }
-        if ((props === null || props === void 0 ? void 0 : props.truncated) && (props === null || props === void 0 ? void 0 : props.width)) {
-            this.style.addObj({
-                display: 'inline-block',
-                maxWidth: '100%',
-                textOverflow: 'ellipsis',
-                whiteSpace: 'nowrap',
-                overflow: 'hidden',
-                width: props === null || props === void 0 ? void 0 : props.width
-            });
-        }
-        if (props === null || props === void 0 ? void 0 : props.lineClamp) {
+        const textSize = (0, use_form_common_props_1.useFormSize)();
+        const ns = (0, use_namespace_1.useNamespace)('text');
+        const textKls = (0, signals_1.computed)(() => [
+            ns.b(),
+            ns.m(props.type),
+            ns.m(textSize.get()),
+            ns.is('truncated', props.truncated),
+            ns.is('line-clamp', !(0, utils_1.isUndefined)(props.lineClamp)),
+        ]);
+        this.attr.addClass(textKls);
+        if (props.lineClamp) {
+            console.warn('then -webkit-line-clamp . ');
             this.style.addObj({
-                // '-webkit-line-clamp': props?.lineClamp,
-                WebkitLineClamp: props === null || props === void 0 ? void 0 : props.lineClamp,
-                display: '-webkit-inline-box',
-                // '-webkit-box-orient': 'vertical',
-                WebkitBoxOrient: 'vertical',
-                overflow: 'hidden'
+                // color: '#f00',
+                '-webkit-line-clamp': props.lineClamp,
             });
         }
+        this.slotChildren(props.slot);
     }
 }
 exports.TdText = TdText;

package/src/components/basic/td-text/td-text.const.d.ts

@@ -0,0 +1,2 @@
+import { ITdTextConfig } from './td-text.interface';
+export declare const textProps: ITdTextConfig;

package/src/components/basic/td-text/td-text.const.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.textProps = void 0;
+exports.textProps = {
+    tag: 'span',
+};

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

@@ -1,12 +1,12 @@
-import { ITypeConfig, ITypeHtml } from '@type-dom/framework';
+import { TypeProps, ITypeHtml } from '@type-dom/framework';
+import { ComponentSize } from '../../../constants/size';
 import { IType } from '../../../styles';
-import { ISize } from '../../../styles/size';
 export interface ITdText extends ITypeHtml {
     className: 'TdText';
 }
-export interface ITdTextConfig extends ITypeConfig {
+export interface ITdTextConfig extends TypeProps {
     type?: IType;
-    size?: ISize;
+    size?: ComponentSize;
     /**
      * @description render ellipsis
      */