@type-dom/ui 0.0.10 → 0.1.1

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

@@ -2,44 +2,162 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdScrollbarThumb = void 0;
 const framework_1 = require("@type-dom/framework");
-const ui_abstract_1 = require("../../../../ui/ui.abstract");
-const var_1 = require("../../../../styles/var");
-class TdScrollbarThumb extends ui_abstract_1.UI {
+const utils_1 = require("@type-dom/utils");
+const util_1 = require("../util");
+const td_scrollbar_style_1 = require("../td-scrollbar.style");
+const td_scrollbar_const_1 = require("../td-scrollbar.const");
+class TdScrollbarThumb extends framework_1.TypeFragment {
     constructor(params = {}) {
-        super(params);
+        super();
         this.className = 'TdScrollbarThumb';
-        this.attr.addName('td-scrollbar-thumb');
-        this.style.addObj({
-            position: 'absolute',
-            right: '2px',
-            bottom: '2px',
-            zIndex: 1,
-            borderRadius: '4px'
-        });
         this.thumb = new framework_1.Div({
-            styleObj: {
-                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: var_1.$scrollbar.bgColor,
-                // transition: getCssVar('transition-duration') background-color,
-                // transition: $transitionDuration + ' ' + $bgColor.default,
-                // opacity: var(
-                //   #{getCssVarName('scrollbar-opacity')},
-                //   map.get($scrollbar, 'opacity')
-                // ),
-                opacity: var_1.$scrollbar.opacity
-            }
+            name: 'thumb',
+            styleObj: td_scrollbar_style_1.$scrollbarThumbStyle,
+        });
+        this.instance = new framework_1.Div({
+            styleObj: td_scrollbar_style_1.$scrollbarBarStyle,
+            slot: [this.thumb],
         });
-        this.addChild(this.thumb);
+        this.addChild(new framework_1.Transition({
+            name: 'fade',
+            slot: this.instance,
+        }));
         this.props = this.useParams(params);
     }
+    setup() {
+        const props = this.props;
+        const COMPONENT_NAME = 'Thumb';
+        const scrollbar = this.inject(td_scrollbar_const_1.scrollbarContextKey);
+        if (!scrollbar) {
+            (0, utils_1.throwError)(COMPONENT_NAME, 'can not inject scrollbar context');
+        }
+        const thumbState = {};
+        let visible = false;
+        let cursorDown = false;
+        let cursorLeave = false;
+        let originalOnSelectStart = utils_1.isClient ? document.onselectstart : null;
+        const bar = util_1.BAR_MAP[props.vertical ? 'vertical' : 'horizontal'];
+        const thumbStyle = (0, util_1.renderThumbStyle)({
+            size: props.size,
+            move: props.move,
+            bar: bar,
+        });
+        const offsetRatio = 
+        // offsetRatioX = original width of thumb / current width of thumb / ratioX
+        // offsetRatioY = original height of thumb / current height of thumb / ratioY
+        // instance height = wrap height - GAP
+        this.instance.dom
+            ? Math.pow(this.instance.dom[bar.offset], 2) /
+                scrollbar.wrapElement.dom[bar.scrollSize] /
+                props.ratio /
+                this.thumb.dom[bar.offset]
+            : 1;
+        const clickThumbHandler = (e) => {
+            var _a;
+            // prevent click event of middle and right button
+            e === null || e === void 0 ? void 0 : e.stopPropagation();
+            if ((e === null || e === void 0 ? void 0 : e.ctrlKey) || [1, 2].includes(e.button)) {
+                return;
+            }
+            (_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.removeAllRanges();
+            startDrag(e);
+            const el = e === null || e === void 0 ? void 0 : e.currentTarget;
+            if (!el) {
+                return;
+            }
+            thumbState[bar.axis] =
+                el[bar.offset] -
+                    (e[bar.client] - el.getBoundingClientRect()[bar.direction]);
+        };
+        this.thumb.addEvents({
+            mousedown: clickThumbHandler,
+        });
+        const clickTrackHandler = (e) => {
+            if (!this.thumb.dom || !this.instance.dom || !scrollbar.wrapElement.dom) {
+                return;
+            }
+            const offset = Math.abs((e === null || e === void 0 ? void 0 : e.target).getBoundingClientRect()[bar.direction] -
+                e[bar.client]);
+            const thumbHalf = this.thumb.dom[bar.offset] / 2;
+            const thumbPositionPercentage = ((offset - thumbHalf) * 100 * offsetRatio) /
+                this.instance.dom[bar.offset];
+            scrollbar.wrapElement.dom[bar.scroll] =
+                (thumbPositionPercentage * scrollbar.wrapElement.dom[bar.scrollSize]) /
+                    100;
+        };
+        this.instance.addEvents({
+            mousedown: clickTrackHandler,
+        });
+        const startDrag = (e) => {
+            e === null || e === void 0 ? void 0 : e.stopImmediatePropagation();
+            cursorDown = true;
+            document.addEventListener('mousemove', mouseMoveDocumentHandler);
+            document.addEventListener('mouseup', mouseUpDocumentHandler);
+            originalOnSelectStart = document.onselectstart;
+            document.onselectstart = () => false;
+        };
+        const mouseMoveDocumentHandler = (e) => {
+            if (!this.instance.dom || !this.thumb.dom) {
+                return;
+            }
+            if (cursorDown === false) {
+                return;
+            }
+            const prevPage = thumbState[bar.axis];
+            if (!prevPage) {
+                return;
+            }
+            const offset = (this.instance.dom.getBoundingClientRect()[bar.direction] -
+                e[bar.client]) *
+                -1;
+            const thumbClickPosition = this.thumb.dom[bar.offset] - prevPage;
+            const thumbPositionPercentage = ((offset - thumbClickPosition) * 100 * offsetRatio) /
+                this.instance.dom[bar.offset];
+            scrollbar.wrapElement.dom[bar.scroll] =
+                (thumbPositionPercentage * scrollbar.wrapElement.dom[bar.scrollSize]) /
+                    100;
+        };
+        const mouseUpDocumentHandler = () => {
+            cursorDown = false;
+            thumbState[bar.axis] = 0;
+            document.removeEventListener('mousemove', mouseMoveDocumentHandler);
+            document.removeEventListener('mouseup', mouseUpDocumentHandler);
+            restoreOnselectstart();
+            if (cursorLeave) {
+                visible = false;
+            }
+        };
+        const mouseMoveScrollbarHandler = () => {
+            cursorLeave = false;
+            visible = !!props.size;
+        };
+        const mouseLeaveScrollbarHandler = () => {
+            cursorLeave = true;
+            visible = cursorDown;
+        };
+        this.onBeforeUnmount(() => {
+            restoreOnselectstart();
+            document.removeEventListener('mouseup', mouseUpDocumentHandler);
+        });
+        const restoreOnselectstart = () => {
+            if (document.onselectstart !== originalOnSelectStart) {
+                document.onselectstart = originalOnSelectStart;
+            }
+        };
+        scrollbar.scrollbarElement.addEvents({
+            mousemove: mouseMoveScrollbarHandler,
+            mouseleave: mouseLeaveScrollbarHandler,
+        });
+        // useEventListener(
+        //   toRef(scrollbar, 'scrollbarElement'),
+        //   'mousemove',
+        //   mouseMoveScrollbarHandler
+        // )
+        // useEventListener(
+        //   toRef(scrollbar, 'scrollbarElement'),
+        //   'mouseleave',
+        //   mouseLeaveScrollbarHandler
+        // )
+    }
 }
 exports.TdScrollbarThumb = TdScrollbarThumb;

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

@@ -1,8 +1,8 @@
-import { IUI, IUIConfig } from '../../../../ui/ui.interface';
-export interface ITdScrollbarThumb extends IUI {
+import { ITypeFragment, TypeFragmentProps } from '@type-dom/framework';
+export interface ITdScrollbarThumb extends ITypeFragment {
     className: 'TdScrollbarThumb';
 }
-export interface ITdScrollbarThumbConfig extends IUIConfig {
+export interface ITdScrollbarThumbConfig extends TypeFragmentProps {
     vertical?: boolean;
     size?: string;
     move?: number;

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

@@ -0,0 +1,28 @@
+import { IStyle } from '@type-dom/css-type';
+import { ITdScrollbarThumbConfig } from './thumb/thumb.interface';
+export declare const GAP = 4;
+export declare const BAR_MAP: {
+    readonly vertical: {
+        readonly offset: "offsetHeight";
+        readonly scroll: "scrollTop";
+        readonly scrollSize: "scrollHeight";
+        readonly size: "height";
+        readonly key: "vertical";
+        readonly axis: "Y";
+        readonly client: "clientY";
+        readonly direction: "top";
+    };
+    readonly horizontal: {
+        readonly offset: "offsetWidth";
+        readonly scroll: "scrollLeft";
+        readonly scrollSize: "scrollWidth";
+        readonly size: "width";
+        readonly key: "horizontal";
+        readonly axis: "X";
+        readonly client: "clientX";
+        readonly direction: "left";
+    };
+};
+export declare const renderThumbStyle: ({ move, size, bar, }: Pick<ITdScrollbarThumbConfig, "move" | "size"> & {
+    bar: (typeof BAR_MAP)[keyof typeof BAR_MAP];
+}) => IStyle;

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

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderThumbStyle = exports.BAR_MAP = exports.GAP = void 0;
+exports.GAP = 4; // top 2 + bottom 2 of bar instance
+exports.BAR_MAP = {
+    vertical: {
+        offset: 'offsetHeight',
+        scroll: 'scrollTop',
+        scrollSize: 'scrollHeight',
+        size: 'height',
+        key: 'vertical',
+        axis: 'Y',
+        client: 'clientY',
+        direction: 'top',
+    },
+    horizontal: {
+        offset: 'offsetWidth',
+        scroll: 'scrollLeft',
+        scrollSize: 'scrollWidth',
+        size: 'width',
+        key: 'horizontal',
+        axis: 'X',
+        client: 'clientX',
+        direction: 'left',
+    },
+};
+const renderThumbStyle = ({ move, size, bar, }) => ({
+    [bar.size]: size,
+    transform: `translate${bar.axis}(${move}%)`,
+});
+exports.renderThumbStyle = renderThumbStyle;

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

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

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

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 { UI } from '../../../ui/ui.abstract';
-import { ITdSpace, ITdSpaceConfig } from './td-space.interface';
-export declare class TdSpace extends UI implements ITdSpace {
+import { TypeDiv } from '@type-dom/framework';
+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

@@ -3,92 +3,152 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdSpace = void 0;
 const utils_1 = require("@type-dom/utils");
 const framework_1 = require("@type-dom/framework");
-const ui_abstract_1 = require("../../../ui/ui.abstract");
 const td_space_const_1 = require("./td-space.const");
-class TdSpace extends ui_abstract_1.UI {
+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(params);
+        super();
         this.className = 'TdSpace';
-        this.style.addObj({
-            display: 'inline-flex',
-            verticalAlign: 'top'
-        });
-        this.addChild(this.getSlotNode());
+        this.attr.addName('td-space');
+        this.assignProps(td_space_const_1.spaceProps);
         this.props = this.useParams(params);
     }
     setup() {
-        this.children.forEach((item) => {
-            if (item instanceof framework_1.TypeElement) {
-                item.style.addObj({
-                    display: 'flex',
-                    flexWrap: 'wrap'
-                });
-            }
-        });
-        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) {
+        var _a, _b;
+        console.log('td-space setup . ');
         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,
 };