@type-dom/ui 0.1.0 → 0.1.2

package/src/theme-chalk/var.scss

@@ -0,0 +1,87 @@
+// CSS3 var
+@use 'common/var' as *;
+@use 'mixins/var' as *;
+@use 'mixins/mixins' as *;
+
+// for better performance do not dynamically change the root variable if you really
+// do not need that, since this could introduce recalculation overhead for rendering.
+// https://lisilinhart.info/posts/css-variables-performance/
+
+// common
+:root {
+  @include set-css-var-value('color-white', $color-white);
+  @include set-css-var-value('color-black', $color-black);
+
+  // get rgb
+  @each $type in (primary, success, warning, danger, error, info) {
+    @include set-css-color-rgb($type);
+  }
+
+  // Typography
+  @include set-component-css-var('font-size', $font-size);
+  @include set-component-css-var('font-family', $font-family);
+
+  @include set-css-var-value('font-weight-primary', 500);
+  @include set-css-var-value('font-line-height-primary', 24px);
+
+  // z-index --el-index-#{$type}
+  @include set-component-css-var('index', $z-index);
+
+  // --el-border-radius-#{$type}
+  @include set-component-css-var('border-radius', $border-radius);
+
+  // Transition
+  // refer to this website to get the bezier motion function detail
+  // https://cubic-bezier.com/#p1,p2,p3,p4 (change px as your function parameter)
+  @include set-component-css-var('transition-duration', $transition-duration);
+
+  @include set-component-css-var('transition-function', $transition-function);
+  @include set-component-css-var('transition', $transition);
+
+  // common component size
+  @include set-component-css-var('component-size', $common-component-size);
+}
+
+// for light
+:root {
+  color-scheme: light;
+
+  // --el-color-#{$type}
+  // --el-color-#{$type}-light-{$i}
+  @each $type in (primary, success, warning, danger, error, info) {
+    @include set-css-color-type($colors, $type);
+  }
+
+  // color-scheme
+  // Background --el-bg-color-#{$type}
+  @include set-component-css-var('bg-color', $bg-color);
+  // --el-text-color-#{$type}
+  @include set-component-css-var('text-color', $text-color);
+  // --el-border-color-#{$type}
+  @include set-component-css-var('border-color', $border-color);
+  // Fill --el-fill-color-#{$type}
+  @include set-component-css-var('fill-color', $fill-color);
+
+  // Box-shadow
+  // --el-box-shadow-#{$type}
+  @include set-component-css-var('box-shadow', $box-shadow);
+  // Disable base
+  @include set-component-css-var('disabled', $disabled);
+
+  // overlay & mask
+  @include set-component-css-var('overlay-color', $overlay-color);
+  @include set-component-css-var('mask-color', $mask-color);
+
+  // Border
+  @include set-css-var-value('border-width', $border-width);
+  @include set-css-var-value('border-style', $border-style);
+  @include set-css-var-value('border-color-hover', $border-color-hover);
+  @include set-css-var-value(
+    'border',
+    getCssVar('border-width') getCssVar('border-style')
+      getCssVar('border-color')
+  );
+
+  // Svg
+  @include css-var-from-global('svg-monochrome-grey', 'border-color');
+}

package/src/theme-chalk/virtual-list.scss

@@ -0,0 +1,40 @@
+@use 'mixins/mixins' as *;
+@use 'common/var' as *;
+
+@mixin showScrollbar {
+  @include b(virtual-scrollbar) {
+    opacity: 1;
+  }
+}
+
+@include b(vl) {
+  @include e(wrapper) {
+    position: relative;
+    &:hover {
+      @include showScrollbar();
+    }
+    &.always-on {
+      @include showScrollbar();
+    }
+  }
+}
+
+.#{$namespace}-vl__window {
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+@include b(virtual-scrollbar) {
+  opacity: 0;
+  transition: opacity 340ms ease-out;
+  &.always-on {
+    opacity: 1;
+  }
+}
+
+@include b(vg) {
+  @include e(wrapper) {
+    position: relative;
+  }
+}

package/src/utils/refs.d.ts

@@ -0,0 +1,4 @@
+import { TypeNode } from '@type-dom/framework';
+import { Ref } from '@type-dom/signals';
+export type RefSetter = (el: Element | TypeNode | undefined) => void;
+export declare const composeRefs: (...refs: (Ref<HTMLElement | undefined> | RefSetter)[]) => (el: Element | TypeNode | null) => void;

package/src/utils/refs.js

@@ -0,0 +1,20 @@
+"use strict";
+// import { isFunction } from '../types'
+//
+// import type { ComponentPublicInstance, Ref } from 'vue'
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.composeRefs = void 0;
+const utils_1 = require("@type-dom/utils");
+const composeRefs = (...refs) => {
+    return (el) => {
+        refs.forEach((ref) => {
+            if ((0, utils_1.isFunction)(ref)) {
+                ref(el);
+            }
+            else {
+                ref.set(el);
+            }
+        });
+    };
+};
+exports.composeRefs = composeRefs;

package/src/aria.d.ts

@@ -1,15 +0,0 @@
-import { ITypeConfig } from '@type-dom/framework';
-export interface IAriaConfig extends ITypeConfig {
-    /**
-     * @description native `aria-label` attribute
-     */
-    ariaLabel?: string;
-    /**
-     * @description native `aria-orientation` attribute
-     */
-    ariaOrientation?: 'horizontal' | 'vertical' | 'undefined';
-    /**
-     * @description native `aria-controls` attribute
-     */
-    ariaControls?: string;
-}

package/src/components/data/td-collapse-transition/td-collapse-transition.util.d.ts

@@ -1,2 +0,0 @@
-import { ITransitionConfig } from '@type-dom/framework';
-export declare const collapseTransitionConfig: ITransitionConfig;

package/src/components/data/td-collapse-transition/td-collapse-transition.util.js

@@ -1,147 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.collapseTransitionConfig = void 0;
-const reset = (element) => {
-    const el = element === null || element === void 0 ? void 0 : element.dom;
-    if (!el) {
-        throw Error('element is not exist . ');
-    }
-    // el.style.maxHeight = '';
-    // el.style.overflow = el.dataset.oldOverflow
-    // el.style.paddingTop = el.dataset.oldPaddingTop
-    // el.style.paddingBottom = el.dataset.oldPaddingBottom
-    element === null || element === void 0 ? void 0 : element.style.setObj({
-        maxHeight: '',
-        overflow: el.dataset.oldOverflow,
-        paddingTop: el.dataset.oldPaddingTop,
-        paddingBottom: el.dataset.oldPaddingBottom
-    });
-};
-exports.collapseTransitionConfig = {
-    onBeforeEnter(element) {
-        console.log('beforeEnter . ');
-        const el = element === null || element === void 0 ? void 0 : element.dom;
-        if (!el) {
-            throw Error('element is not exist . ');
-        }
-        if (!el.dataset) {
-            // el.dataset = {};
-            element.attr.set('dataset', false);
-        }
-        element.attr.setObj({
-            dataOldPaddingTop: el.style.paddingTop,
-            dataOldPaddingBottom: el.style.paddingBottom
-        });
-        // el.dataset.oldPaddingTop = el.style.paddingTop
-        // el.dataset.oldPaddingBottom = el.style.paddingBottom
-        if (el.style.height) {
-            // el.dataset.existsHeight = el.style.height
-            element.attr.setObj({
-                dataExistsHeight: el.style.height
-            });
-        }
-        // el.style.maxHeight = 0
-        // el.style.paddingTop = 0
-        // el.style.paddingBottom = 0
-        element.style.setObj({
-            maxHeight: 0,
-            paddingTop: 0,
-            paddingBottom: 0,
-            transition: 'max-height .3s ease-in-out'
-        });
-    },
-    onEnter(element) {
-        console.log('enter . ');
-        const el = element === null || element === void 0 ? void 0 : element.dom;
-        if (!el) {
-            throw Error('element is not exist . ');
-        }
-        requestAnimationFrame(() => {
-            element.attr.setObj({
-                dataOldOverflow: el.style.overflow
-            });
-            // el.dataset.oldOverflow = el.style.overflow
-            if (el.dataset.existsHeight) {
-                // el.style.maxHeight = el.dataset.existsHeight
-                element.style.setObj({
-                    maxHeight: el.dataset.existsHeight
-                });
-            }
-            else if (el.scrollHeight !== 0) {
-                // el.style.maxHeight = `${el.scrollHeight}px`
-                element.style.setObj({
-                    maxHeight: `${el.scrollHeight}px`
-                });
-            }
-            else {
-                // el.style.maxHeight = 0
-                element.style.setObj({
-                    maxHeight: 0
-                });
-            }
-            // el.style.paddingTop = el.dataset.oldPaddingTop
-            // el.style.paddingBottom = el.dataset.oldPaddingBottom
-            // el.style.overflow = 'hidden'
-            element.style.setObj({
-                paddingTop: el.dataset.oldPaddingTop,
-                paddingBottom: el.dataset.oldPaddingBottom,
-                overflow: 'hidden'
-            });
-        });
-    },
-    onAfterEnter(element) {
-        var _a;
-        // el.style.maxHeight = ''
-        // el.style.overflow = el.dataset.oldOverflow
-        element === null || element === void 0 ? void 0 : element.style.setObj({
-            maxHeight: '',
-            overflow: (_a = element === null || element === void 0 ? void 0 : element.dom) === null || _a === void 0 ? void 0 : _a.dataset.oldOverflow
-        });
-    },
-    onEnterCancelled(element) {
-        reset(element);
-    },
-    onBeforeLeave(element) {
-        const el = element === null || element === void 0 ? void 0 : element.dom;
-        if (!el) {
-            throw Error('element is not exist . ');
-        }
-        // if (!el.dataset) el.dataset = {}
-        // el.dataset.oldPaddingTop = el.style.paddingTop
-        // el.dataset.oldPaddingBottom = el.style.paddingBottom
-        // el.dataset.oldOverflow = el.style.overflow
-        element.attr.setObj({
-            dataOldPaddingTop: el.style.paddingTop,
-            dataOldPaddingBottom: el.style.paddingBottom,
-            dataOldOverflow: el.style.overflow
-        });
-        // el.style.maxHeight = `${el.scrollHeight}px`
-        // el.style.overflow = 'hidden'
-        element.style.setObj({
-            maxHeight: `${el.scrollHeight}px`,
-            overflow: 'hidden'
-        });
-    },
-    onLeave(element) {
-        const el = element === null || element === void 0 ? void 0 : element.dom;
-        if (!el) {
-            throw Error('element is not exist . ');
-        }
-        if (el.scrollHeight !== 0) {
-            // el.style.maxHeight = 0
-            // el.style.paddingTop = 0
-            // el.style.paddingBottom = 0
-            element.style.setObj({
-                maxHeight: 0,
-                paddingTop: 0,
-                paddingBottom: 0
-            });
-        }
-    },
-    onAfterLeave(element) {
-        reset(element);
-    },
-    onLeaveCancelled(element) {
-        reset(element);
-    }
-};

package/src/components/data/td-result/td-result.constant.js

@@ -1,41 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.IconComponentMap = exports.IconMap = void 0;
-const svgs_1 = require("@type-dom/svgs");
-const td_result_style_1 = require("./td-result.style");
-exports.IconMap = {
-    success: 'icon-success',
-    warning: 'icon-warning',
-    error: 'icon-error',
-    info: 'icon-info'
-};
-exports.IconComponentMap = {
-    [exports.IconMap.success]: new svgs_1.ElCircleCheckFilledSvg({
-        styleObj: td_result_style_1.$icon['success'],
-        attrObj: {
-            width: td_result_style_1.$result.iconFontSize,
-            height: td_result_style_1.$result.iconFontSize
-        }
-    }),
-    [exports.IconMap.warning]: new svgs_1.ElWarningFilledSvg({
-        styleObj: td_result_style_1.$icon['warning'],
-        attrObj: {
-            width: td_result_style_1.$result.iconFontSize,
-            height: td_result_style_1.$result.iconFontSize
-        }
-    }),
-    [exports.IconMap.error]: new svgs_1.ElCircleCloseFilledSvg({
-        styleObj: td_result_style_1.$icon['error'],
-        attrObj: {
-            width: td_result_style_1.$result.iconFontSize,
-            height: td_result_style_1.$result.iconFontSize
-        }
-    }),
-    [exports.IconMap.info]: new svgs_1.ElInfoFilledSvg({
-        styleObj: td_result_style_1.$icon['info'],
-        attrObj: {
-            width: td_result_style_1.$result.iconFontSize,
-            height: td_result_style_1.$result.iconFontSize
-        }
-    })
-};

package/src/components/data/td-statistic/td-statistic.abstract.d.ts

@@ -1,14 +0,0 @@
-import { Div, Span, TypeDiv, TypeElement } from '@type-dom/framework';
-import { ITdStatisticConfig, ITdStatisticAbstract } from './td-statistic.interface';
-import { Dayjs } from 'dayjs';
-export declare abstract class TdStatisticAbstract extends TypeDiv implements ITdStatisticAbstract {
-    abstract className: 'TdStatistic' | 'TdCountDown';
-    head?: Div;
-    mainContent: Div;
-    prefix?: TypeElement;
-    number: Span;
-    suffix?: TypeElement;
-    props: ITdStatisticConfig;
-    protected constructor(params?: ITdStatisticConfig);
-    formatValue(value: number | string | Dayjs): string;
-}

package/src/components/data/td-statistic/td-statistic.abstract.js

@@ -1,114 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TdStatisticAbstract = void 0;
-const framework_1 = require("@type-dom/framework");
-const utils_1 = require("@type-dom/utils");
-const td_statistic_style_1 = require("./td-statistic.style");
-class TdStatisticAbstract extends framework_1.TypeDiv {
-    constructor(params = {}) {
-        var _a, _b, _c, _d;
-        super();
-        console.warn('TdStatisticAbstract constructor . ');
-        if ((params === null || params === void 0 ? void 0 : params.title) || ((_a = params.slots) === null || _a === void 0 ? void 0 : _a.title)) {
-            this.head = new framework_1.Div({
-                name: 'head',
-                styleObj: {
-                    // font-weight: getCssVar('statistic-title-font-weight'),
-                    fontWeight: td_statistic_style_1.$statistic.titleFontWeight,
-                    // font-size: getCssVar('statistic-title-font-size'),
-                    fontSize: td_statistic_style_1.$statistic.titleFontSize,
-                    // color: getCssVar('statistic-title-color'),
-                    color: td_statistic_style_1.$statistic.titleColor,
-                    lineHeight: '20px',
-                    marginBottom: '4px'
-                }
-            });
-            if (params === null || params === void 0 ? void 0 : params.title) {
-                this.head.addChild(new framework_1.TextNode(params.title));
-            }
-            else if ((_b = params.slots) === null || _b === void 0 ? void 0 : _b.title) {
-                console.warn('params.slots.title is ', params.slots.title);
-                this.head.addChild(params.slots.title);
-            }
-            this.addChild(this.head);
-        }
-        this.mainContent = new framework_1.Div({
-            name: 'content',
-            styleObj: {
-                // font-weight: getCssVar('statistic-content-font-weight');
-                fontWeight: td_statistic_style_1.$statistic.contentFontWeight,
-                // font-size: getCssVar('statistic-content-font-size');
-                fontSize: td_statistic_style_1.$statistic.contentFontSize,
-                // color: getCssVar('statistic-content-color');
-                color: td_statistic_style_1.$statistic.contentColor
-            }
-        });
-        this.addChild(this.mainContent);
-        if (params === null || params === void 0 ? void 0 : params.valueStyle) {
-            this.mainContent.style.addObj(params.valueStyle);
-        }
-        if (params === null || params === void 0 ? void 0 : params.prefix) {
-            this.prefix = new framework_1.Div({
-                name: 'prefix',
-                styleObj: {
-                    marginRight: '4px',
-                    display: 'inline-block'
-                },
-                childNodes: [
-                    new framework_1.Span({
-                        text: params.prefix
-                    })
-                ]
-            });
-            this.mainContent.addChild(this.prefix);
-        }
-        if ((_c = params === null || params === void 0 ? void 0 : params.slots) === null || _c === void 0 ? void 0 : _c.prefix) {
-            this.prefix = params.slots.prefix;
-            this.mainContent.addChild(params.slots.prefix);
-        }
-        this.number = new framework_1.Span({
-            text: this.formatValue((params === null || params === void 0 ? void 0 : params.value) || 0),
-            styleObj: {
-                display: 'inline-block'
-            }
-        });
-        this.mainContent.addChild(this.number);
-        if (params === null || params === void 0 ? void 0 : params.suffix) {
-            this.suffix = new framework_1.Div({
-                name: 'suffix',
-                styleObj: {
-                    marginLeft: '4px',
-                    display: 'inline-block'
-                },
-                childNodes: [
-                    new framework_1.Span({
-                        text: params.suffix
-                    })
-                ]
-            });
-            this.mainContent.addChild(this.suffix);
-        }
-        if ((_d = params === null || params === void 0 ? void 0 : params.slots) === null || _d === void 0 ? void 0 : _d.suffix) {
-            this.suffix = params.slots.suffix;
-            this.mainContent.addChild(params.slots.suffix);
-        }
-        this.props = this.useParams(params);
-    }
-    formatValue(value) {
-        const { formatter, precision, decimalSeparator, groupSeparator } = this.props;
-        if ((0, utils_1.isFunction)(formatter)) {
-            return formatter(value);
-        }
-        if (!(0, utils_1.isNumber)(value)) {
-            return String(value);
-        }
-        let [integer, decimal = ''] = String(value).split('.');
-        decimal = decimal
-            .padEnd(precision || 0, '0') // precision 默认为 0；
-            .slice(0, (precision || 0) > 0 ? precision : 0);
-        // groupSeparator 默认 ,
-        integer = integer.replace(/\B(?=(\d{3})+(?!\d))/g, groupSeparator || ',');
-        return [integer, decimal].join(decimal ? decimalSeparator : '');
-    }
-}
-exports.TdStatisticAbstract = TdStatisticAbstract;

package/src/components/feedback/td-loading/td-loading.class.d.ts

@@ -1,13 +0,0 @@
-import { TypeTransition } from '@type-dom/framework';
-import { ITdLoading, ITdLoadingConfig } from './td-loading.interface';
-export declare class TdLoading extends TypeTransition implements ITdLoading {
-    className: 'TdLoading';
-    props: ITdLoadingConfig;
-    private mask;
-    private svg;
-    private spinner;
-    private spinnerText?;
-    constructor(params?: ITdLoadingConfig);
-    static service(params: ITdLoadingConfig): TdLoading;
-    close(): void;
-}

package/src/components/feedback/td-loading/td-loading.class.js

@@ -1,75 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TdLoading = void 0;
-const framework_1 = require("@type-dom/framework");
-const svgs_1 = require("@type-dom/svgs");
-class TdLoading extends framework_1.TypeTransition {
-    constructor(params = {}) {
-        super();
-        this.className = 'TdLoading';
-        // this.content = new Transition({
-        //   name: 'td-loading-fade',
-        //   emits: {
-        //     afterLeave: () => {
-        //       console.log('afterLeave');
-        //     }
-        //   }
-        // });
-        this.addEmits({
-            afterLeave: () => {
-                console.log('afterLeave');
-            }
-        });
-        // this.addChild(this.content);
-        this.svg = (params === null || params === void 0 ? void 0 : params.spinner) || (params === null || params === void 0 ? void 0 : params.svg);
-        this.spinner = new svgs_1.SvgSvg({
-            name: 'spinner',
-            attrObj: {
-                viewBox: (params === null || params === void 0 ? void 0 : params.svgViewBox) ? params.svgViewBox : '0 0 50 50'
-            },
-            childNodes: [
-                new framework_1.SvgCircle({
-                    attrObj: {
-                        cx: '25',
-                        cy: '25',
-                        r: '20',
-                        fill: 'none'
-                    }
-                })
-            ]
-        });
-        if (params === null || params === void 0 ? void 0 : params.text) {
-            this.spinnerText = new framework_1.P({
-                text: params.text
-            });
-        }
-        this.mask = new framework_1.Div({
-            name: 'mask',
-            styleObj: {
-                display: (params === null || params === void 0 ? void 0 : params.visible) ? 'block' : 'none'
-            },
-            childNodes: [
-                new framework_1.Div({
-                    name: 'spinner',
-                    init: (element) => {
-                        console.log('element is ', element);
-                        element === null || element === void 0 ? void 0 : element.addChild(this.spinner);
-                        if (this.spinnerText) {
-                            element === null || element === void 0 ? void 0 : element.addChild(this.spinnerText);
-                        }
-                    },
-                })
-            ]
-        });
-        // this.content.addChild(this.mask);
-        this.setContent(this.mask);
-        this.props = this.useParams(params);
-    }
-    static service(params) {
-        return new TdLoading(params);
-    }
-    close() {
-        //   todo close
-    }
-}
-exports.TdLoading = TdLoading;

package/src/components/feedback/td-loading/td-loading.interface.d.ts

@@ -1,36 +0,0 @@
-import { ITypeElement, ITypeTransitionConfig, TypeElement } from '@type-dom/framework';
-export interface ITdLoading extends ITypeElement {
-    className: 'TdLoading';
-}
-export interface ITdLoadingConfig extends ITypeTransitionConfig {
-    parent?: TypeElement;
-    /**
-     * @description background color of the mask
-     */
-    background?: string;
-    svg?: string;
-    svgViewBox?: string;
-    /**
-     * @description class name of the custom spinner
-     */
-    spinner?: boolean | string;
-    /**
-     * @description loading text that displays under the spinner
-     */
-    text?: string;
-    /**
-     * @description same as the `fullscreen` modifier of `v-loading`
-     */
-    fullscreen?: boolean;
-    /**
-     * @description same as the `lock` modifier of `v-loading`
-     */
-    lock?: boolean;
-    /**
-     * @description custom class name for Loading
-     */
-    visible?: boolean;
-    target?: HTMLElement;
-    beforeClose?: () => boolean;
-    closed?: () => void;
-}

package/src/components/form/td-input/widget/prefix.d.ts

@@ -1,10 +0,0 @@
-import { TypeSpan } from '@type-dom/framework';
-import { ITdInputConfig } from '../td-input.interface';
-import { TdInputWrapper } from './td-input-wrapper.class';
-export declare class TdInputPrefix extends TypeSpan {
-    className: 'TdInputPrefix';
-    parent: TdInputWrapper;
-    private prefixInner;
-    private prefixIcon?;
-    constructor(parent: TdInputWrapper, config?: ITdInputConfig);
-}