@type-dom/ui 0.1.0 → 0.1.2

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,12 @@
-import { TypeDiv } from '@type-dom/framework';
-import { TdScrollbarThumb } from '../thumb/thumb.class';
-import { ITdScrollbarBar, ITdScrollbarBarConfig } from './bar.interface';
-export declare class TdScrollbarBar extends TypeDiv implements ITdScrollbarBar {
-    className: 'TdScrollbarBar';
-    props: ITdScrollbarBarConfig;
-    thumbs: [TdScrollbarThumb, TdScrollbarThumb];
-    constructor(params?: ITdScrollbarBarConfig);
+import { TypeFragment } from '@type-dom/framework';
+import { Thumb } from '../thumb/thumb.class';
+import { IBar, BarProps } from './bar.interface';
+export declare class Bar extends TypeFragment implements IBar {
+    className: 'Bar';
+    props: BarProps;
+    childNodes: Thumb[];
+    handleScroll?: (el?: HTMLDivElement) => void;
+    updateDom?: (el?: HTMLDivElement) => void;
+    constructor(params?: BarProps);
+    setup(): void;
 }

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

@@ -1,32 +1,75 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TdScrollbarBar = void 0;
+exports.Bar = void 0;
 const framework_1 = require("@type-dom/framework");
+const signals_1 = require("@type-dom/signals");
+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 Bar extends framework_1.TypeFragment {
     constructor(params = {}) {
         super();
-        this.className = 'TdScrollbarBar';
-        this.attr.addName('td-scrollbar-bar-slot');
-        this.style.addObj({
-            position: 'absolute',
-            right: '2px',
-            bottom: '2px',
-            zIndex: 1,
-            borderRadius: '4px'
-        });
-        // config?.minSize 20
-        this.thumbs = [
-            new thumb_class_1.TdScrollbarThumb({
-                vertical: false,
-                ratio: 1
-            }),
-            new thumb_class_1.TdScrollbarThumb({
-                vertical: true,
-                ratio: 1
-            })
-        ];
+        this.className = 'Bar';
+        this.childNodes = [];
+        // this.attr.addName('td-scrollbar-bar');
+        this.assignProps(bar_const_1.barProps);
         this.props = this.useParams(params);
     }
+    setup() {
+        const props = this.props;
+        const scrollbar = (0, framework_1.inject)(td_scrollbar_const_1.scrollbarContextKey);
+        const moveX = (0, signals_1.signal)(0);
+        const moveY = (0, signals_1.signal)(0);
+        const sizeWidth = (0, signals_1.signal)('');
+        const sizeHeight = (0, signals_1.signal)('');
+        const ratioY = (0, signals_1.signal)(1);
+        const ratioX = (0, signals_1.signal)(1);
+        const handleScroll = (wrap) => {
+            if (wrap) {
+                const offsetHeight = wrap.offsetHeight - util_1.GAP;
+                const offsetWidth = wrap.offsetWidth - util_1.GAP;
+                moveY.set(((wrap.scrollTop * 100) / offsetHeight) * ratioY.get());
+                moveX.set(((wrap.scrollLeft * 100) / offsetWidth) * ratioX.get());
+            }
+        };
+        const update = () => {
+            const wrap = scrollbar === null || scrollbar === void 0 ? void 0 : scrollbar.wrapElement.get();
+            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, props.minSize);
+            const width = Math.max(originalWidth, props.minSize);
+            ratioY.set(originalHeight /
+                (offsetHeight - originalHeight) /
+                (height / (offsetHeight - height)));
+            ratioX.set(originalWidth /
+                (offsetWidth - originalWidth) /
+                (width / (offsetWidth - width)));
+            sizeHeight.set(height + util_1.GAP < offsetHeight ? `${height}px` : '');
+            // console.warn('sizeHeight is ', sizeHeight);
+            sizeWidth.set(width + util_1.GAP < offsetWidth ? `${width}px` : '');
+            // console.warn('sizeWidth is ', sizeWidth);
+        };
+        (0, framework_1.defineExpose)({
+            handleScroll,
+            updateDom: update,
+        });
+        this.addChildren(new thumb_class_1.Thumb({
+            move: moveX,
+            ratio: ratioX,
+            size: sizeWidth,
+            always: props.always,
+        }), new thumb_class_1.Thumb({
+            move: moveY,
+            ratio: ratioY,
+            size: sizeHeight,
+            vertical: true,
+            always: props.always,
+        }));
+    }
 }
-exports.TdScrollbarBar = TdScrollbarBar;
+exports.Bar = Bar;

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

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

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, // required: true,
+};

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 {
-    className: 'TdScrollbarBar';
+import { ITypeFragment, TypeFragmentProps } from '@type-dom/framework';
+export interface IBar extends ITypeFragment {
+    className: 'Bar';
 }
-export interface ITdScrollbarBarConfig extends ITypeConfig {
+export interface BarProps extends TypeFragmentProps {
     always?: boolean;
     minSize?: number;
 }

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

@@ -0,0 +1,2 @@
+import '../../../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("../../../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");

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

@@ -1,11 +1,18 @@
-import { TypeHtml } from '@type-dom/framework';
-import { ITdScrollbar, ITdScrollbarConfig } from './td-scrollbar.interface';
-export declare class TdScrollbar extends TypeHtml implements ITdScrollbar {
+import { TypeDiv } from '@type-dom/framework';
+import { Arrayable } from '@type-dom/utils';
+import { ITdScrollbar, ScrollbarProps } from './td-scrollbar.interface';
+import './style/index';
+export declare class TdScrollbar extends TypeDiv implements ITdScrollbar {
     className: 'TdScrollbar';
-    nodeName: string;
-    dom: HTMLElement;
-    props: ITdScrollbarConfig;
-    private wrap;
-    private view;
-    constructor(params?: ITdScrollbarConfig);
+    props: ScrollbarProps;
+    updateDom?: () => void;
+    handleScroll?: () => void;
+    stopResizeObserver?: () => void;
+    stopResizeListener?: () => void;
+    scrollTo?: (xCord: number, yCord?: number) => void;
+    setScrollTop?: (value: Arrayable<number>) => void;
+    scrollLeft?: (value: number) => void;
+    private tag;
+    constructor(params?: ScrollbarProps);
+    setup(): void;
 }