@type-dom/ui 0.1.0 → 0.1.1

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

@@ -2,102 +2,48 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdRow = void 0;
 const framework_1 = require("@type-dom/framework");
-const td_col_class_1 = require("../td-col/td-col.class");
+const signals_1 = require("@type-dom/signals");
+const use_namespace_1 = require("../../../../hooks/use-namespace");
+const td_row_const_1 = require("./td-row.const");
+require("./style/index");
 class TdRow extends framework_1.TypeDiv {
-    // justify: string = 'start';
-    // align: string = 'top';
-    // tag: string = 'div';
     constructor(params = {}) {
         super();
         this.className = 'TdRow';
         this.attr.addName('td-row');
-        this.style.addObj({
-            display: 'flex',
-            flexWrap: 'wrap',
-            position: 'relative',
-            boxSizing: 'border-box'
-        });
         this.childNodes = [];
-        this.slotChild(params.slot);
+        this.assignProps(td_row_const_1.rowProps);
         this.props = this.useParams(params);
     }
     setup() {
+        var _a;
         const props = this.props;
-        if (props === null || props === void 0 ? void 0 : props.gutter) {
-            this.gutter = props.gutter;
-            this.style.addObj({
-                marginLeft: `-${props.gutter / 2}px`,
-                marginRight: `-${props.gutter / 2}px`
-            });
-            this.children.forEach((child) => {
-                if (child instanceof td_col_class_1.TdCol) {
-                    if (props.gutter) {
-                        child.style.addObj({
-                            boxSizing: 'border-box',
-                            paddingLeft: `${props.gutter / 2}px`,
-                            paddingRight: `${props.gutter / 2}px`
-                        });
-                    }
-                }
-            });
-        }
-        if (props === null || props === void 0 ? void 0 : props.justify) {
-            // this.setJustify(props.justify);
-            switch (props.justify) {
-                case 'center':
-                    this.style.addObj({
-                        justifyContent: 'center'
-                    });
-                    break;
-                case 'end':
-                    this.style.addObj({
-                        justifyContent: 'flex-end'
-                    });
-                    break;
-                case 'space-between':
-                    this.style.addObj({
-                        justifyContent: 'space-between'
-                    });
-                    break;
-                case 'space-around':
-                    this.style.addObj({
-                        justifyContent: 'space-around'
-                    });
-                    break;
-                case 'space-evenly':
-                    this.style.addObj({
-                        justifyContent: 'space-evenly'
-                    });
-                    break;
-                default:
-                    break;
-            }
-        }
-        if (props === null || props === void 0 ? void 0 : props.align) {
-            // this.setAlign(props.align);
-            switch (props.align) {
-                case 'top':
-                    this.style.addObj({
-                        alignItems: 'flex-start'
-                    });
-                    break;
-                case 'middle':
-                    this.style.addObj({
-                        alignItems: 'center'
-                    });
-                    break;
-                case 'bottom':
-                    this.style.addObj({
-                        alignItems: 'flex-end'
-                    });
-                    break;
-                case 'stretch':
-                    this.style.addObj({
-                        alignItems: 'stretch'
-                    });
-                    break;
+        const ns = (0, use_namespace_1.useNamespace)('row');
+        const gutter = (0, signals_1.computed)(() => props.gutter);
+        (0, framework_1.provide)(td_row_const_1.rowContextKey, {
+            gutter,
+        });
+        const style = (0, signals_1.computed)(() => {
+            const styles = {};
+            if (!props.gutter) {
+                return styles;
             }
-        }
+            styles.marginRight = styles.marginLeft = `-${props.gutter / 2}px`;
+            return styles;
+        });
+        const rowKls = (0, signals_1.computed)(() => [
+            ns.b(),
+            ns.is(`justify-${props.justify}`, props.justify !== 'start'),
+            ns.is(`align-${props.align}`, !!props.align),
+        ]);
+        this.assignProps({
+            attrObj: {
+                class: rowKls,
+            },
+        });
+        // this.attr.addClass(rowKls); todo 会不显示
+        this.style.addObj(style);
+        this.slotChildren(props.slot || ((_a = props.slots) === null || _a === void 0 ? void 0 : _a.default));
     }
 }
 exports.TdRow = TdRow;

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

@@ -0,0 +1,9 @@
+import { InjectionKey } from '@type-dom/framework';
+import { Computed } from '@type-dom/signals';
+import { RowProps } from './td-row.interface';
+interface RowContext {
+    gutter: Computed<number | undefined>;
+}
+export declare const rowContextKey: InjectionKey<RowContext>;
+export declare const rowProps: RowProps;
+export {};

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

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.rowProps = exports.rowContextKey = void 0;
+exports.rowContextKey = Symbol('rowContextKey');
+exports.rowProps = {
+    tag: 'div',
+    gutter: 0,
+    justify: 'start',
+};

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

@@ -1,17 +1,27 @@
-import { ITypeConfig, ITypeDiv } from '@type-dom/framework';
+import { ITypeDiv, TypeDivProps } from '@type-dom/framework';
 export interface ITdRow extends ITypeDiv {
     className: 'TdRow';
+    props: RowProps;
 }
-/**
- * gutter: number = 0;
- * justify: string = 'start';
- * align: string = 'top';
- * tag: string = 'div';
- */
-export interface ITdRowConfig extends ITypeConfig {
+export interface RowProps extends TypeDivProps {
+    /**
+     * @description custom element tag
+     *     default: 'div',
+     */
+    tag?: string;
+    /**
+     * @description grid spacing
+     *     default: 0,
+     */
     gutter?: number;
-    justify?: string;
-    align?: string;
+    /**
+     * @description horizontal alignment of flex layout
+     */
+    justify?: RowJustify;
+    /**
+     * @description vertical alignment of flex layout
+     */
+    align?: RowAlign;
 }
-export declare const RowJustify: readonly ["start", "center", "end", "space-around", "space-between", "space-evenly"];
-export declare const RowAlign: readonly ["top", "middle", "bottom"];
+export type RowJustify = 'start' | 'center' | 'end' | 'space-around' | 'space-between' | 'space-evenly';
+export type RowAlign = 'top' | 'middle' | 'bottom';

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

@@ -1,12 +1,2 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RowAlign = exports.RowJustify = void 0;
-exports.RowJustify = [
-    'start',
-    'center',
-    'end',
-    'space-around',
-    'space-between',
-    'space-evenly'
-];
-exports.RowAlign = ['top', 'middle', 'bottom'];

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

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

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

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

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

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

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

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

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

@@ -1,10 +1,9 @@
 import { TypeA } from '@type-dom/framework';
-import { ITdLink, ITdLinkConfig } from './td-link.interface';
+import { ITdLink, LinkProps } from './td-link.interface';
+import './style/index';
 export declare class TdLink extends TypeA implements ITdLink {
     className: 'TdLink';
-    props: ITdLinkConfig;
-    private inner?;
-    constructor(params: ITdLinkConfig);
+    props: LinkProps;
+    constructor(params: LinkProps);
     setup(): void;
-    handleClick(event: MouseEvent): void;
 }

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

@@ -2,96 +2,57 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdLink = void 0;
 const framework_1 = require("@type-dom/framework");
-const td_link_style_1 = require("../td-link/td-link.style");
+const signals_1 = require("@type-dom/signals");
+const use_namespace_1 = require("../../../hooks/use-namespace");
+const td_icon_class_1 = require("../td-icon/td-icon.class");
+const td_link_const_1 = require("./td-link.const");
+require("./style/index");
 class TdLink extends framework_1.TypeA {
     constructor(params) {
         super();
         this.className = 'TdLink';
-        this.style.addObj(td_link_style_1.$linkStyle);
-        (0, td_link_style_1.useType)(params);
+        this.addEmits(td_link_const_1.linkEmits);
+        this.assignProps(td_link_const_1.linkProps);
         this.props = this.useParams(params);
     }
     setup() {
+        var _a, _b, _c;
         const props = this.props;
+        const ns = (0, use_namespace_1.useNamespace)('link');
+        const linkKls = (0, signals_1.computed)(() => [
+            ns.b(),
+            ns.m(props.type),
+            ns.is('disabled', props.disabled),
+            ns.is('underline', props.underline && !props.disabled),
+        ]);
+        const emit = this.emit;
+        function handleClick(event) {
+            if (!props.disabled) {
+                // emit('click', event);
+            }
+        }
         this.attr.addObj({
-            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
+            class: linkKls,
+            href: props.disabled || !props.href ? undefined : props.href,
+            target: props.disabled || !props.href ? undefined : props.target,
         });
-        if (props === null || props === void 0 ? void 0 : props.type) {
-            if (props === null || props === void 0 ? void 0 : props.disabled) {
-                this.style.addObj(td_link_style_1.$linkStateColors[props.type].disabled);
-            }
-            else {
-                this.style.addObj(td_link_style_1.$linkStateColors[props.type].default);
-            }
+        this.addEmits({
+            click: handleClick,
+        });
+        if (props.icon) {
+            this.addChild(new td_icon_class_1.TdIcon({
+                slot: props.icon,
+            }));
         }
-        else {
-            this.style.addObj(td_link_style_1.$linkStateColors.default.default);
+        if (((_a = props.slots) === null || _a === void 0 ? void 0 : _a.default) || props.slot) {
+            this.addChild(new framework_1.Span({
+                class: ns.e('inner'),
+                slot: props.slot || ((_b = props.slots) === null || _b === void 0 ? void 0 : _b.default),
+            }));
         }
-        if (props === null || props === void 0 ? void 0 : props.icon) {
-            this.unshiftChild(props.icon);
+        if ((_c = props.slots) === null || _c === void 0 ? void 0 : _c.icon) {
+            this.slotChildren(props.slots.icon);
         }
-        this.inner = new framework_1.Span({
-            name: 'inner',
-            styleObj: td_link_style_1.$linkInnerStyle
-        });
-        this.inner.slotChild(props.slot);
-        this.addChild(this.inner);
-        this.addEvents({
-            click: (evt) => {
-                this.handleClick(evt);
-            },
-            mouseenter: () => {
-                if (this.props.type) {
-                    if (this.props.disabled) {
-                        this.style.setObj({
-                            cursor: 'not-allowed'
-                        });
-                    }
-                    else {
-                        this.style.setObj(td_link_style_1.$linkStateColors[this.props.type].hover);
-                    }
-                }
-                else {
-                    this.style.setObj(td_link_style_1.$linkStateColors.default.hover);
-                }
-                if (this.props.underline === false) {
-                    // 设置 false 的情况下，不显示下划线
-                    this.style.setObj({
-                        textDecoration: 'none'
-                    });
-                }
-                else {
-                    // 1. 默认显示下划线
-                    // 2. 默认显示下划线，如果设置了 underline 为 true，则显示下划线
-                    this.style.setObj({
-                        textDecoration: 'underline'
-                    });
-                }
-            },
-            mouseleave: (evt) => {
-                this.style.setObj({
-                    textDecoration: 'none'
-                });
-                if (this.props.type) {
-                    this.style.removeObj(td_link_style_1.$linkStateColors[this.props.type].hover);
-                    if (this.props.disabled) {
-                        evt === null || evt === void 0 ? void 0 : evt.preventDefault();
-                        this.style.setObj(td_link_style_1.$linkStateColors[this.props.type].disabled);
-                    }
-                    else {
-                        this.style.setObj(td_link_style_1.$linkStateColors[this.props.type].default);
-                    }
-                }
-                else {
-                    this.style.removeObj(td_link_style_1.$linkStateColors.default.hover);
-                }
-            }
-        });
-    }
-    handleClick(event) {
-        // this.emit('click', event); // 会死循环的
     }
 }
 exports.TdLink = TdLink;

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

@@ -0,0 +1,6 @@
+import { LinkProps } from './td-link.interface';
+export declare const linkProps: LinkProps;
+export declare const linkEmits: {
+    click: (evt: MouseEvent) => boolean;
+};
+export type LinkEmits = typeof linkEmits;

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.linkEmits = exports.linkProps = void 0;
+exports.linkProps = {
+    type: 'default',
+    underline: true,
+    href: '',
+    target: '_self',
+};
+exports.linkEmits = {
+    click: (evt) => evt instanceof MouseEvent,
+};

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

@@ -1,10 +1,11 @@
-import { ITypeA, ITypeConfig } from '@type-dom/framework';
+import { ITypeA, TypeAProps } from '@type-dom/framework';
 import { TdIcon } from '../td-icon/td-icon.class';
 export interface ITdLink extends ITypeA {
     className: 'TdLink';
+    props: LinkProps;
 }
 export type ITdLinkType = 'default' | 'primary' | 'success' | 'warning' | 'info' | 'danger';
-export interface ITdLinkConfig extends ITypeConfig {
+export interface LinkProps extends TypeAProps {
     title?: string;
     /**
      * @description type

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

@@ -1,6 +1,6 @@
 import { IStyle } from '@type-dom/css-type';
 import { IType } from '../../../styles/var';
-import { ITdLinkConfig } from './td-link.interface';
+import { LinkProps } from './td-link.interface';
 export declare const $link: {
     fontSize: string;
     fontWeight: number;
@@ -9,7 +9,7 @@ export declare const $link: {
     disabledTextColor: string;
 };
 export declare let $linkTextColor: string;
-export declare function useType(config?: ITdLinkConfig): void;
+export declare function useType(config?: LinkProps): void;
 export declare const $linkStyle: IStyle;
 export declare const $linkInnerStyle: IStyle;
 export declare const $linkStateColors: Record<IType, Record<string, IStyle>>;

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

@@ -16,7 +16,7 @@ exports.$link = {
     // 'hover-text-color': getCssVar('color-primary'),
     hoverTextColor: var_1.$colors.primary.base,
     // 'disabled-text-color': getCssVar('text-color-placeholder'),
-    disabledTextColor: var_1.$textColor.placeholder
+    disabledTextColor: var_1.$textColor.placeholder,
 };
 function useType(config) {
     exports.$link.textColor = var_1.$colors[(config === null || config === void 0 ? void 0 : config.type) || 'default'].base;
@@ -40,23 +40,23 @@ exports.$linkStyle = {
     // font-weight: getCssVar('link', 'font-weight'),
     fontWeight: exports.$link.fontWeight,
     // color: getCssVar('link', 'text-color'),
-    color: exports.$link.textColor
+    color: exports.$link.textColor,
 };
 exports.$linkInnerStyle = {
     display: 'inline-flex',
     justifyContent: 'center',
-    alignItems: 'center'
+    alignItems: 'center',
 };
 exports.$linkStateColors = {};
 function buttonVariant($type) {
     exports.$linkStateColors[$type] = {
         default: {
-            color: var_1.$colors[$type].base
+            color: var_1.$colors[$type].base,
         },
         hover: {
             color: $type === 'default'
                 ? var_1.$colors['primary'].base
-                : var_1.$colors[$type]['light-3'] // ['color', $type, 'light-3'],
+                : var_1.$colors[$type]['light-3'], // ['color', $type, 'light-3'],
             // content: '',
             // position: 'absolute',
             // left: 0,
@@ -66,10 +66,10 @@ function buttonVariant($type) {
             // borderBottom: '1px solid ' + ($type === 'default' ? $colors['primary'].base : $colors[$type]['light-3']),
         },
         active: {
-            color: var_1.$colors[$type]['dark-2'] // ['color', $type, 'dark-2'],
+            color: var_1.$colors[$type]['dark-2'], // ['color', $type, 'dark-2'],
         },
         disabled: {
-            color: var_1.$colors[$type]['light-5'] // ['color', $type, 'light-5'],
-        }
+            color: var_1.$colors[$type]['light-5'], // ['color', $type, 'light-5'],
+        },
     };
 }

package/src/components/basic/td-scrollbar/bar/bar.class.d.ts

@@ -1,9 +1,19 @@
-import { TypeDiv } from '@type-dom/framework';
+import { TypeFragment } from '@type-dom/framework';
 import { TdScrollbarThumb } from '../thumb/thumb.class';
 import { ITdScrollbarBar, ITdScrollbarBarConfig } from './bar.interface';
-export declare class TdScrollbarBar extends TypeDiv implements ITdScrollbarBar {
+export declare class TdScrollbarBar extends TypeFragment implements ITdScrollbarBar {
     className: 'TdScrollbarBar';
     props: ITdScrollbarBarConfig;
-    thumbs: [TdScrollbarThumb, TdScrollbarThumb];
+    childNodes: TdScrollbarThumb[];
+    private scrollbar?;
+    private moveX;
+    private moveY;
+    private sizeWidth;
+    private sizeHeight;
+    private ratioX;
+    private ratioY;
     constructor(params?: ITdScrollbarBarConfig);
+    setup(): void;
+    handleScroll: (wrap: HTMLDivElement) => void;
+    updateBar: () => void;
 }

package/src/components/basic/td-scrollbar/bar/bar.class.js

@@ -2,31 +2,71 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdScrollbarBar = void 0;
 const framework_1 = require("@type-dom/framework");
+const util_1 = require("../util");
 const thumb_class_1 = require("../thumb/thumb.class");
-class TdScrollbarBar extends framework_1.TypeDiv {
+const td_scrollbar_const_1 = require("../td-scrollbar.const");
+const bar_const_1 = require("./bar.const");
+class TdScrollbarBar extends framework_1.TypeFragment {
     constructor(params = {}) {
         super();
+        this.handleScroll = (wrap) => {
+            if (wrap) {
+                const offsetHeight = wrap.offsetHeight - util_1.GAP;
+                const offsetWidth = wrap.offsetWidth - util_1.GAP;
+                this.moveY = ((wrap.scrollTop * 100) / offsetHeight) * this.ratioY;
+                this.moveX = ((wrap.scrollLeft * 100) / offsetWidth) * this.ratioX;
+            }
+        };
+        this.updateBar = () => {
+            var _a;
+            const wrap = (_a = this.scrollbar) === null || _a === void 0 ? void 0 : _a.wrapElement.dom;
+            if (!wrap) {
+                return;
+            }
+            const offsetHeight = wrap.offsetHeight - util_1.GAP;
+            const offsetWidth = wrap.offsetWidth - util_1.GAP;
+            const originalHeight = Math.pow(offsetHeight, 2) / wrap.scrollHeight;
+            const originalWidth = Math.pow(offsetWidth, 2) / wrap.scrollWidth;
+            const height = Math.max(originalHeight, this.props.minSize);
+            const width = Math.max(originalWidth, this.props.minSize);
+            this.ratioY =
+                originalHeight /
+                    (offsetHeight - originalHeight) /
+                    (height / (offsetHeight - height));
+            this.ratioX =
+                originalWidth /
+                    (offsetWidth - originalWidth) /
+                    (width / (offsetWidth - width));
+            this.sizeHeight = height + util_1.GAP < offsetHeight ? `${height}px` : '';
+            this.sizeWidth = width + util_1.GAP < offsetWidth ? `${width}px` : '';
+        };
         this.className = 'TdScrollbarBar';
-        this.attr.addName('td-scrollbar-bar-slot');
-        this.style.addObj({
-            position: 'absolute',
-            right: '2px',
-            bottom: '2px',
-            zIndex: 1,
-            borderRadius: '4px'
-        });
+        this.childNodes = [];
+        // this.attr.addName('td-scrollbar-bar');
+        // this.style.addObj($scrollbarBarStyle);
         // config?.minSize 20
-        this.thumbs = [
-            new thumb_class_1.TdScrollbarThumb({
-                vertical: false,
-                ratio: 1
-            }),
-            new thumb_class_1.TdScrollbarThumb({
-                vertical: true,
-                ratio: 1
-            })
-        ];
+        this.moveX = 0;
+        this.moveY = 0;
+        this.sizeWidth = '';
+        this.sizeHeight = '';
+        this.ratioY = 1;
+        this.ratioX = 1;
+        this.assignProps(bar_const_1.barProps);
         this.props = this.useParams(params);
+        this.addChildren(new thumb_class_1.TdScrollbarThumb({
+            move: this.moveX,
+            ratio: this.ratioX,
+            size: this.sizeWidth,
+            always: this.props.always,
+        }), new thumb_class_1.TdScrollbarThumb({
+            move: this.moveY,
+            ratio: this.ratioY,
+            always: this.props.always,
+            vertical: true,
+        }));
+    }
+    setup() {
+        this.scrollbar = this.inject(td_scrollbar_const_1.scrollbarContextKey);
     }
 }
 exports.TdScrollbarBar = TdScrollbarBar;

package/src/components/basic/td-scrollbar/bar/bar.const.d.ts

@@ -0,0 +1,2 @@
+import { ITdScrollbarBarConfig } from './bar.interface';
+export declare const barProps: ITdScrollbarBarConfig;

package/src/components/basic/td-scrollbar/bar/bar.const.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.barProps = void 0;
+exports.barProps = {
+    always: true,
+    // minSize: 20,
+};

package/src/components/basic/td-scrollbar/bar/bar.interface.d.ts

@@ -1,8 +1,8 @@
-import { ITypeConfig, ITypeDiv } from '@type-dom/framework';
-export interface ITdScrollbarBar extends ITypeDiv {
+import { ITypeFragment, TypeFragmentProps } from '@type-dom/framework';
+export interface ITdScrollbarBar extends ITypeFragment {
     className: 'TdScrollbarBar';
 }
-export interface ITdScrollbarBarConfig extends ITypeConfig {
+export interface ITdScrollbarBarConfig extends TypeFragmentProps {
     always?: boolean;
     minSize?: number;
 }

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

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

package/src/components/basic/td-scrollbar/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-scrollbar.css");

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

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

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

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