@type-dom/ui 0.0.10 → 0.1.1

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

@@ -1,32 +1,72 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdScrollbarBar = void 0;
-const ui_abstract_1 = require("../../../../ui/ui.abstract");
+const framework_1 = require("@type-dom/framework");
+const util_1 = require("../util");
 const thumb_class_1 = require("../thumb/thumb.class");
-class TdScrollbarBar extends ui_abstract_1.UI {
+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(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');
-        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 { IUI, IUIConfig } from '../../../../ui/ui.interface';
-export interface ITdScrollbarBar extends IUI {
+import { ITypeFragment, TypeFragmentProps } from '@type-dom/framework';
+export interface ITdScrollbarBar extends ITypeFragment {
     className: 'TdScrollbarBar';
 }
-export interface ITdScrollbarBarConfig extends IUIConfig {
+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");

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

@@ -1,9 +1,20 @@
-import { UI } from '../../../ui/ui.abstract';
+import { TypeDiv } from '@type-dom/framework';
 import { ITdScrollbar, ITdScrollbarConfig } from './td-scrollbar.interface';
-export declare class TdScrollbar extends UI implements ITdScrollbar {
+export declare class TdScrollbar extends TypeDiv implements ITdScrollbar {
     className: 'TdScrollbar';
     props: ITdScrollbarConfig;
     private wrap;
-    private view;
+    private bar?;
+    handleScroll?: () => void;
+    stopResizeObserver?: () => void;
+    stopResizeListener?: () => void;
+    scrollTo?: (xCord: number, yCord?: number) => void;
+    setScrollTop?: (value: number) => void;
+    scrollLeft?: (value: number) => void;
     constructor(params?: ITdScrollbarConfig);
+    setup(): void;
+    mounted(): void;
+    updateScroll: () => void;
+    setResize(noresize?: boolean): void;
+    beforeUnmount(): void;
 }

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

@@ -2,48 +2,154 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdScrollbar = void 0;
 const framework_1 = require("@type-dom/framework");
-const ui_abstract_1 = require("../../../ui/ui.abstract");
 const bar_class_1 = require("./bar/bar.class");
-class TdScrollbar extends ui_abstract_1.UI {
+const td_scrollbar_const_1 = require("./td-scrollbar.const");
+const td_scrollbar_style_1 = require("./td-scrollbar.style");
+const utils_1 = require("@type-dom/utils");
+class TdScrollbar extends framework_1.TypeDiv {
     constructor(params = {}) {
-        super(params, params === null || params === void 0 ? void 0 : params.tag);
+        var _a, _b, _c;
+        super();
+        this.updateScroll = () => {
+            var _a;
+            (_a = this.bar) === null || _a === void 0 ? void 0 : _a.updateBar();
+        };
         this.className = 'TdScrollbar';
         this.attr.addName('td-scrollbar');
-        this.style.addObj({
-            overflow: 'hidden',
-            position: 'relative',
-            height: '100%'
-        });
+        this.style.addObj(td_scrollbar_style_1.$scrollbarStyle);
+        this.assignProps(td_scrollbar_const_1.scrollbarProps);
+        this.props = this.useParams(params);
         this.wrap = new framework_1.Div({
             name: 'td-scrollbar-wrap',
-            styleObj: {
-                overflow: 'auto',
-                height: (params === null || params === void 0 ? void 0 : params.height) || '100%'
-            }
+            styleObj: Object.assign({}, td_scrollbar_style_1.$scrollbarWrapStyle, params.wrapStyle),
+            slot: [
+                new framework_1.XElement({
+                    tag: this.props.tag,
+                    name: 'td-scrollbar-resize',
+                    attrObj: {
+                        role: 'role',
+                        ariaLabel: params.ariaLabel,
+                        ariaOrientation: params.ariaOrientation,
+                    },
+                    styleObj: params.viewStyle,
+                    init: (element) => {
+                        element.slotChildren(params.slot);
+                    },
+                }),
+            ],
         });
-        this.view = new framework_1.Div({
-            // params?.tag 默认是div，简化处理，不加其它的tag标签了；
-            name: 'td-scrollbar-view'
-        });
-        if (params === null || params === void 0 ? void 0 : params.viewStyle) {
-            this.view.style.addObj(params.viewStyle);
+        const wrapStyle = {};
+        if (params.height) {
+            wrapStyle.height = (0, utils_1.addUnit)(params.height);
+        }
+        if (params.maxHeight) {
+            wrapStyle.maxHeight = (0, utils_1.addUnit)(params.maxHeight);
         }
-        this.wrap.addChild(this.view);
-        if (params === null || params === void 0 ? void 0 : params.wrapStyle) {
-            this.wrap.style.addObj(params.wrapStyle);
+        this.wrap.style.addObj(wrapStyle);
+        if (!this.props.native) {
+            this.wrap.style.addObj(td_scrollbar_style_1.$scrollbarWrapHiddenDefaultStyle);
         }
         this.addChild(this.wrap);
-        if (!(params === null || params === void 0 ? void 0 : params.native)) {
-            const bar = new bar_class_1.TdScrollbarBar({
-                always: (params === null || params === void 0 ? void 0 : params.always) || true,
-                minSize: (params === null || params === void 0 ? void 0 : params.minSize) || 20
+        this.addEmits(td_scrollbar_const_1.scrollbarEmits);
+        if (!((_a = this.props) === null || _a === void 0 ? void 0 : _a.native)) {
+            this.bar = new bar_class_1.TdScrollbarBar({
+                always: (_b = this.props) === null || _b === void 0 ? void 0 : _b.always,
+                minSize: (_c = this.props) === null || _c === void 0 ? void 0 : _c.minSize,
             });
-            this.addChildren(...bar.thumbs);
+            this.addChild(this.bar);
         }
-        if (params === null || params === void 0 ? void 0 : params.contents) {
-            this.view.addChildren(...params.contents);
+        this.provide(td_scrollbar_const_1.scrollbarContextKey, {
+            scrollbarElement: this,
+            wrapElement: this.wrap,
+        });
+    }
+    setup() {
+        const COMPONENT_NAME = 'TdScrollbar';
+        let wrapScrollTop = 0;
+        let wrapScrollLeft = 0;
+        const handleScroll = () => {
+            var _a;
+            if (this.wrap.dom) {
+                (_a = this.bar) === null || _a === void 0 ? void 0 : _a.handleScroll(this.wrap.dom);
+                wrapScrollTop = this.wrap.dom.scrollTop;
+                wrapScrollLeft = this.wrap.dom.scrollLeft;
+                this.emit('scroll', {
+                    scrollTop: this.wrap.dom.scrollTop,
+                    scrollLeft: this.wrap.dom.scrollLeft,
+                });
+            }
+        };
+        this.handleScroll = handleScroll;
+        this.wrap.addEvents({
+            scroll: handleScroll,
+        });
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        const self = this;
+        function scrollTo(arg1, arg2) {
+            var _a, _b;
+            if ((0, utils_1.isObject)(arg1)) {
+                (_a = self.wrap.dom) === null || _a === void 0 ? void 0 : _a.scrollTo(arg1);
+            }
+            else if ((0, utils_1.isNumber)(arg1) && (0, utils_1.isNumber)(arg2)) {
+                (_b = self.wrap.dom) === null || _b === void 0 ? void 0 : _b.scrollTo(arg1, arg2);
+            }
         }
-        this.props = this.useParams(params);
+        this.scrollTo = scrollTo;
+        const setScrollTop = (value) => {
+            if (!(0, utils_1.isNumber)(value)) {
+                (0, utils_1.debugWarn)(COMPONENT_NAME, 'value must be a number');
+                return;
+            }
+            this.wrap.dom.scrollTop = value;
+        };
+        this.setScrollTop = setScrollTop;
+        const setScrollLeft = (value) => {
+            if (!(0, utils_1.isNumber)(value)) {
+                (0, utils_1.debugWarn)(COMPONENT_NAME, 'value must be a number');
+                return;
+            }
+            this.wrap.dom.scrollLeft = value;
+        };
+        this.scrollLeft = setScrollLeft;
+        this.onUpdated(() => this.updateScroll);
+        this.setResize(this.props.noresize);
+        if (!this.props.native) {
+            (0, framework_1.nextTick)(() => {
+                var _a;
+                this.updateScroll();
+                if (this.wrap.dom) {
+                    (_a = this.bar) === null || _a === void 0 ? void 0 : _a.handleScroll(this.wrap.dom);
+                }
+            });
+        }
+        // onActivated(() => {
+        //   if (wrapRef.value) {
+        //     wrapRef.value.scrollTop = wrapScrollTop
+        //     wrapRef.value.scrollLeft = wrapScrollLeft
+        //   }
+        // })
+    }
+    mounted() {
+        if (!this.props.native) {
+            (0, framework_1.nextTick)(() => {
+                this.updateScroll();
+            });
+        }
+    }
+    setResize(noresize) {
+        var _a, _b;
+        if (noresize) {
+            (_a = this.stopResizeObserver) === null || _a === void 0 ? void 0 : _a.call(this);
+            (_b = this.stopResizeListener) === null || _b === void 0 ? void 0 : _b.call(this);
+        }
+        else {
+            // ({ stop: stopResizeObserver } = useResizeObserver(resizeRef, update))
+            // this.stopResizeListener = useEventListener('resize', update)
+            window.addEventListener('resize', this.updateScroll);
+        }
+    }
+    beforeUnmount() {
+        window.removeEventListener('resize', this.updateScroll);
     }
 }
 exports.TdScrollbar = TdScrollbar;

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

@@ -0,0 +1,10 @@
+import { InjectionKey } from '@type-dom/framework';
+import { ITdScrollbarConfig, ScrollbarContext } from './td-scrollbar.interface';
+export declare const scrollbarProps: ITdScrollbarConfig;
+export declare const scrollbarEmits: {
+    scroll: ({ scrollTop, scrollLeft, }: {
+        scrollTop: number;
+        scrollLeft: number;
+    }) => boolean;
+};
+export declare const scrollbarContextKey: InjectionKey<ScrollbarContext>;

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.scrollbarContextKey = exports.scrollbarEmits = exports.scrollbarProps = void 0;
+const utils_1 = require("@type-dom/utils");
+exports.scrollbarProps = {
+    native: false,
+    tag: 'div',
+    minSize: 20,
+    // ...useAriaProps(['ariaLabel', 'ariaOrientation']),
+};
+exports.scrollbarEmits = {
+    scroll: ({ scrollTop, scrollLeft, }) => [scrollTop, scrollLeft].every(utils_1.isNumber),
+};
+exports.scrollbarContextKey = Symbol('scrollbarContextKey');

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

@@ -1,10 +1,10 @@
-import { TypeElement } from '@type-dom/framework';
 import { IStyle } from '@type-dom/css-type';
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
-export interface ITdScrollbar extends IUI {
+import { ITypeDiv, TypeDivProps, TypeDiv } from '@type-dom/framework';
+import { TdScrollbar } from './td-scrollbar.class';
+export interface ITdScrollbar extends ITypeDiv {
     className: 'TdScrollbar';
 }
-export interface ITdScrollbarConfig extends IUIConfig {
+export interface ITdScrollbarConfig extends TypeDivProps {
     /**
      * @description height of scrollbar
      */
@@ -15,6 +15,7 @@ export interface ITdScrollbarConfig extends IUIConfig {
     maxHeight?: number | string;
     /**
      * @description whether to use the native scrollbar
+     *     default: false,
      */
     native?: boolean;
     /**
@@ -24,6 +25,7 @@ export interface ITdScrollbarConfig extends IUIConfig {
     /**
      * @description class of view
      */
+    viewClass?: string;
     /**
      * @description style of view
      */
@@ -32,6 +34,7 @@ export interface ITdScrollbarConfig extends IUIConfig {
      * @description element tag of the view
      * default: div
      */
+    tag?: string;
     /**
      * @description do not respond to container size changes, if the container size does not change, it is better to set it to optimize performance
      */
@@ -60,5 +63,8 @@ export interface ITdScrollbarConfig extends IUIConfig {
      * @description aria-orientation of view
      */
     ariaOrientation?: 'horizontal' | 'vertical';
-    contents?: TypeElement[];
+}
+export interface ScrollbarContext {
+    scrollbarElement: TdScrollbar;
+    wrapElement: TypeDiv;
 }

package/src/components/basic/td-scrollbar/td-scrollbar.interface.js

@@ -1,5 +1,2 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-// export const scrollbarProps = buildProps({
-//
-// } as const)

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

@@ -0,0 +1,13 @@
+import { IStyle } from '@type-dom/css-type';
+export declare const $scrollbar: {
+    opacity: number;
+    bgColor: string;
+    hoverOpacity: number;
+    hoverBgColor: string;
+};
+export declare const $scrollbarStyle: IStyle;
+export declare const $scrollbarWrapStyle: IStyle;
+export declare const $scrollbarWrapHiddenDefaultStyle: IStyle;
+export declare const $scrollbarThumbStyle: IStyle;
+export declare const $scrollbarThumbHoverStyle: IStyle;
+export declare const $scrollbarBarStyle: IStyle;

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

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.$scrollbarBarStyle = exports.$scrollbarThumbHoverStyle = exports.$scrollbarThumbStyle = exports.$scrollbarWrapHiddenDefaultStyle = exports.$scrollbarWrapStyle = exports.$scrollbarStyle = exports.$scrollbar = void 0;
+const transition_1 = require("../../../styles/transition");
+const var_1 = require("../../../styles/var");
+// Scrollbar
+// css3 var in packages/theme-chalk/src/scrollbar.scss
+exports.$scrollbar = {
+    opacity: 0.3,
+    // bg-color: getCssVar('text-color-secondary'),
+    bgColor: var_1.$textColor.secondary,
+    hoverOpacity: 0.5,
+    // hover-bg-color: getCssVar('text-color-secondary'),
+    hoverBgColor: var_1.$textColor.secondary,
+};
+exports.$scrollbarStyle = {
+    overflow: 'hidden',
+    position: 'relative',
+    height: '100%',
+};
+exports.$scrollbarWrapStyle = {
+    overflow: 'auto',
+    height: '100%',
+};
+exports.$scrollbarWrapHiddenDefaultStyle = {
+    scrollbarWidth: 'none',
+    // &::-webkit-scrollbar {
+    //   display: none,
+    // }
+};
+exports.$scrollbarThumbStyle = {
+    position: 'relative',
+    display: 'block',
+    width: 0,
+    height: 0,
+    cursor: 'pointer',
+    borderRadius: 'inherit',
+    // background-color: var(
+    //   #{getCssVarName('scrollbar-bg-color')},
+    //   map.get($scrollbar, 'bg-color')
+    // );
+    backgroundColor: exports.$scrollbar.bgColor,
+    // transition: getCssVar('transition-duration') background-color;
+    transition: transition_1.$transitionDuration.default + 'background-color',
+    // opacity: var(
+    //   #{getCssVarName('scrollbar-opacity')},
+    //   map.get($scrollbar, 'opacity')
+    // );
+    opacity: exports.$scrollbar.opacity,
+};
+exports.$scrollbarThumbHoverStyle = {
+    //   background-color: var(
+    //     #{getCssVarName('scrollbar-hover-bg-color')},
+    //     map.get($scrollbar, 'hover-bg-color')
+    //   );
+    backgroundColor: exports.$scrollbar.hoverBgColor,
+    //   opacity: var(
+    //     #{getCssVarName('scrollbar-hover-opacity')},
+    //     map.get($scrollbar, 'hover-opacity')
+    //   );
+    opacity: exports.$scrollbar.hoverOpacity,
+};
+exports.$scrollbarBarStyle = {
+    position: 'absolute',
+    right: '2px',
+    bottom: '2px',
+    zIndex: 1,
+    borderRadius: '4px',
+};

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

@@ -1,8 +1,10 @@
-import { UI } from '../../../../ui/ui.abstract';
+import { TypeFragment } from '@type-dom/framework';
 import { ITdScrollbarThumb, ITdScrollbarThumbConfig } from './thumb.interface';
-export declare class TdScrollbarThumb extends UI implements ITdScrollbarThumb {
+export declare class TdScrollbarThumb extends TypeFragment implements ITdScrollbarThumb {
     className: 'TdScrollbarThumb';
     props: ITdScrollbarThumbConfig;
+    private instance;
     private thumb;
     constructor(params?: ITdScrollbarThumbConfig);
+    setup(): void;
 }