@type-dom/ui 0.0.10 → 0.1.1

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

@@ -1,113 +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 ui_abstract_1 = require("../../../ui/ui.abstract");
-const td_statistic_style_1 = require("./td-statistic.style");
-class TdStatisticAbstract extends ui_abstract_1.UI {
-    constructor(params = {}) {
-        var _a, _b, _c, _d;
-        super(params);
-        if (params === null || params === void 0 ? void 0 : params.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));
-            }
-            if ((_a = params.slots) === null || _a === void 0 ? void 0 : _a.title) {
-                this.head.addChild((_b = params.slots) === null || _b === void 0 ? void 0 : _b.title);
-            }
-            this.addChild(this.head);
-        }
-        this.content = 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
-            }
-        });
-        if (params === null || params === void 0 ? void 0 : params.valueStyle) {
-            this.content.style.addObj(params.valueStyle);
-        }
-        this.addChild(this.content);
-        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.content.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.content.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.content.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.content.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.content.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,14 +0,0 @@
-import { UI } from '../../../ui/ui.abstract';
-import { ITdLoading, ITdLoadingConfig } from './td-loading.interface';
-export declare class TdLoading extends UI<undefined> implements ITdLoading {
-    className: 'TdLoading';
-    props: ITdLoadingConfig;
-    private transition;
-    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,71 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TdLoading = void 0;
-const ui_abstract_1 = require("../../../ui/ui.abstract");
-const framework_1 = require("@type-dom/framework");
-const svgs_1 = require("@type-dom/svgs");
-class TdLoading extends ui_abstract_1.UI {
-    constructor(params = {}) {
-        super(params, 'fragment');
-        this.className = 'TdLoading';
-        this.transition = new framework_1.Transition({
-            name: 'td-loading-fade',
-            emits: {
-                afterLeave: () => {
-                    console.log('afterLeave');
-                }
-            }
-        });
-        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',
-                    childNodes: (() => {
-                        if (this.spinnerText) {
-                            return [this.spinner, this.spinnerText];
-                        }
-                        else {
-                            return [this.spinner];
-                        }
-                    })()
-                })
-            ]
-        });
-        this.transition.addChild(this.mask);
-        this.addChild(this.transition);
-        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,37 +0,0 @@
-import { TypeElement } from '@type-dom/framework';
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
-export interface ITdLoading extends IUI {
-    className: 'TdLoading';
-}
-export interface ITdLoadingConfig extends IUIConfig {
-    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-select/dropdown/dropdown.class.d.ts

@@ -1,10 +0,0 @@
-import { UI } from '../../../../ui/ui.abstract';
-import { ITdSelectDropdown, ITdSelectDropdownConfig } from './dropdown.interface';
-export declare class TdSelectDropDown extends UI implements ITdSelectDropdown {
-    className: 'TdSelectDropdown';
-    props: ITdSelectDropdownConfig;
-    private header?;
-    private footer?;
-    constructor(params?: ITdSelectDropdownConfig);
-    setup(): void;
-}

package/src/components/form/td-select/dropdown/dropdown.class.js

@@ -1,48 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TdSelectDropDown = void 0;
-const var_1 = require("../../../../styles/var");
-const ui_abstract_1 = require("../../../../ui/ui.abstract");
-const framework_1 = require("@type-dom/framework");
-const td_select_style_1 = require("../td-select.style");
-class TdSelectDropDown extends ui_abstract_1.UI {
-    constructor(params = {}) {
-        super(params);
-        this.className = 'TdSelectDropdown';
-        this.style.addObj({
-            // z-index: calc(#{getCssVar('index-top')} + 1);
-            // border-radius: getCssVar('border-radius-base');
-            borderRadius: var_1.$borderRadius.base,
-            boxSizing: 'border-box'
-        });
-        this.props = this.useParams(params);
-    }
-    setup() {
-        const props = this.props;
-        if (props === null || props === void 0 ? void 0 : props.header) {
-            this.header = new framework_1.Div({
-                styleObj: {
-                    // padding: map.get($select-dropdown, 'header-padding');
-                    padding: td_select_style_1.$selectDropdown.headerPadding,
-                    // border-bottom: map.get($select-dropdown, 'border');
-                    borderBottom: td_select_style_1.$selectDropdown.border
-                }
-            });
-            this.header.addChild(props.header);
-            this.unshiftChild(this.header);
-        }
-        if (props === null || props === void 0 ? void 0 : props.footer) {
-            this.footer = new framework_1.Div({
-                styleObj: {
-                    // padding: map.get($select-dropdown, 'footer-padding');
-                    padding: td_select_style_1.$selectDropdown.footerPadding,
-                    // border-top: map.get($select-dropdown, 'border');
-                    borderTop: td_select_style_1.$selectDropdown.border
-                }
-            });
-            this.footer.addChild(props.footer);
-            this.addChild(this.footer);
-        }
-    }
-}
-exports.TdSelectDropDown = TdSelectDropDown;

package/src/components/form/td-select/dropdown/dropdown.interface.d.ts

@@ -1,9 +0,0 @@
-import { IUI, IUIConfig } from '../../../../ui/ui.interface';
-import { TypeElement } from '@type-dom/framework';
-export interface ITdSelectDropdown extends IUI {
-    className: 'TdSelectDropdown';
-}
-export interface ITdSelectDropdownConfig extends IUIConfig {
-    header?: TypeElement;
-    footer?: TypeElement;
-}

package/src/components/navigation/td-anchor/td-anchor-link/td-anchor-link.class.d.ts

@@ -1,8 +0,0 @@
-import { UI } from '../../../../ui/ui.abstract';
-import { ITdAnchorLink, ITdAnchorLinkConfig } from './td-anchor-link.interface';
-export declare class TdAnchorLink extends UI implements ITdAnchorLink {
-    className: 'TdAnchorLink';
-    private href;
-    private list?;
-    constructor(params?: ITdAnchorLinkConfig);
-}

package/src/components/navigation/td-anchor/td-anchor-link/td-anchor-link.interface.d.ts

@@ -1,16 +0,0 @@
-import { IUI, IUIConfig } from '../../../../ui/ui.interface';
-import { TypeElement } from '@type-dom/framework';
-export interface ITdAnchorLink extends IUI {
-    className: 'TdAnchorLink';
-}
-export interface ITdAnchorLinkConfig extends IUIConfig {
-    /**
-     * @description the text content of the anchor link
-     */
-    title?: string;
-    /**
-     * @description The address of the anchor link
-     */
-    href?: string;
-    contents?: TypeElement[];
-}

package/src/components/navigation/td-tabs/td-tab-pane.class.d.ts

@@ -1,13 +0,0 @@
-import { UI } from '../../../ui/ui.abstract';
-import { ITdTabPane, ITdTabPaneConfig } from './td-tab-pane.interface';
-export declare class TdTabPane extends UI<undefined> implements ITdTabPane {
-    className: 'TdTabPane';
-    props: ITdTabPaneConfig;
-    isClosable?: boolean;
-    active: boolean;
-    shouldBeRender: boolean;
-    private panel?;
-    private loaded;
-    constructor(params?: ITdTabPaneConfig);
-    setActive(active: boolean): void;
-}

package/src/components/navigation/td-tabs/td-tab-pane.class.js

@@ -1,41 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TdTabPane = void 0;
-const framework_1 = require("@type-dom/framework");
-const ui_abstract_1 = require("../../../ui/ui.abstract");
-class TdTabPane extends ui_abstract_1.UI {
-    constructor(params = {}) {
-        super(params, 'fragment');
-        this.className = 'TdTabPane';
-        this.isClosable = params === null || params === void 0 ? void 0 : params.closable;
-        this.active = false;
-        this.loaded = false; // params?.loaded;
-        this.shouldBeRender = !(params === null || params === void 0 ? void 0 : params.lazy) || this.loaded || this.active;
-        if (this.shouldBeRender) {
-            this.panel = new framework_1.Div({
-                className: 'tab-pane',
-                attrObj: {
-                    role: 'tab-panel',
-                },
-                styleObj: {
-                    display: !this.active ? 'block' : 'none',
-                },
-            });
-            if (params === null || params === void 0 ? void 0 : params.slot) {
-                this.panel.slotChild(params.slot);
-            }
-            this.addChild(this.panel);
-        }
-        this.props = this.useParams(params);
-    }
-    setActive(active) {
-        var _a, _b;
-        if (active) {
-            (_a = this.panel) === null || _a === void 0 ? void 0 : _a.style.show();
-        }
-        else {
-            (_b = this.panel) === null || _b === void 0 ? void 0 : _b.style.hide();
-        }
-    }
-}
-exports.TdTabPane = TdTabPane;

package/src/hooks/use-cursor.d.ts

@@ -1 +0,0 @@
-export declare function useCursor(input: HTMLInputElement | undefined): [() => void, () => void];

package/src/hooks/use-escape-keydown.d.ts

@@ -1,4 +0,0 @@
-export declare const useEscapeKeydown: (handler: (e: KeyboardEvent) => void) => {
-    mounted: () => void;
-    beforeDestroy: () => void;
-};

package/src/styles/size.d.ts

@@ -1,2 +0,0 @@
-export declare const componentSizes: readonly ["", "default", "small", "large"];
-export type ISize = /*'' | */ 'default' | 'small' | 'large';

package/src/ui/ui.abstract.d.ts

@@ -1,18 +0,0 @@
-import { ITypeConfig, SlotNode, TypeElement } from '@type-dom/framework';
-import { IUI, IUISlotNodes } from './ui.interface';
-export declare let componentId: number;
-export declare abstract class UI<T extends HTMLElement | undefined = HTMLElement> extends TypeElement implements IUI {
-    nodeName: 'fragment' | string;
-    dom: T;
-    componentId: number;
-    slotNodes: IUISlotNodes;
-    protected constructor(params: ITypeConfig | undefined, tag?: string);
-    /**
-     * 确保slot存在，不存在则创建；
-     * 要在useSlots之后调用
-     *
-     * @param name
-     */
-    getSlotNode(name?: string): SlotNode;
-    useSlots<T extends IUISlotNodes>(params?: ITypeConfig): T;
-}

package/src/ui/ui.abstract.js

@@ -1,50 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.UI = exports.componentId = void 0;
-const framework_1 = require("@type-dom/framework");
-exports.componentId = 0;
-class UI extends framework_1.TypeElement {
-    // 手动的方式设置 fragment; 实现类似 TypeFragment 类
-    constructor(params, tag = 'div') {
-        super();
-        this.params = Object.assign(this.params, params);
-        this.componentId = exports.componentId++;
-        this.attr.addObj({
-            componentId: this.componentId,
-        });
-        this.nodeName = tag;
-        if (this.nodeName === 'fragment') {
-            this.dom = undefined;
-        }
-        else {
-            this.dom = document.createElement(this.nodeName.trim());
-        }
-        this.slotNodes = {
-        // default: new SlotNode('default'),
-        };
-        // todo 统一处理，还是在各个类中处理
-        this.useSlots(params);
-    }
-    /**
-     * 确保slot存在，不存在则创建；
-     * 要在useSlots之后调用
-     *
-     * @param name
-     */
-    getSlotNode(name = 'default') {
-        var _a;
-        return this.slotNodes[name] = (_a = this.slotNodes[name]) !== null && _a !== void 0 ? _a : new framework_1.SlotNode(name);
-    }
-    useSlots(params) {
-        if (params === null || params === void 0 ? void 0 : params.slot) {
-            this.getSlotNode().resetSlot(params.slot);
-        }
-        (params === null || params === void 0 ? void 0 : params.slots) &&
-            Object.keys(params.slots).forEach((key) => {
-                var _a;
-                this.getSlotNode(key).resetSlot((_a = params.slots) === null || _a === void 0 ? void 0 : _a[key]);
-            });
-        return this.slotNodes;
-    }
-}
-exports.UI = UI;

package/src/ui/ui.interface.d.ts

@@ -1,12 +0,0 @@
-import { ISlotNodes, ITypeConfig, ITypeElement, SlotNode, TypeElement } from '@type-dom/framework';
-export interface IUI extends ITypeElement {
-    componentId?: string | number;
-}
-export interface IUIConfig extends ITypeConfig {
-    tag?: string;
-    items?: ITypeConfig[];
-    childNodes?: TypeElement[] | undefined;
-}
-export interface IUISlotNodes extends ISlotNodes {
-    default?: SlotNode;
-}

package/src/utils/types.d.ts

@@ -1,8 +0,0 @@
-export declare const isUndefined: (val: any) => val is undefined;
-export declare const isBoolean: (val: any) => val is boolean;
-export declare const isNumber: (val: any) => val is number;
-export declare const isEmpty: (val: unknown) => boolean;
-export declare const isElement: (e: unknown) => e is Element;
-export declare const isPropAbsent: (prop: unknown) => prop is null | undefined;
-export declare const isStringNumber: (val: string) => boolean;
-export declare const isWindow: (val: unknown) => val is Window;

package/src/utils/types.js

@@ -1,35 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.isWindow = exports.isStringNumber = exports.isPropAbsent = exports.isElement = exports.isEmpty = exports.isNumber = exports.isBoolean = exports.isUndefined = void 0;
-const utils_1 = require("@type-dom/utils");
-const isUndefined = (val) => val === undefined;
-exports.isUndefined = isUndefined;
-const isBoolean = (val) => typeof val === 'boolean';
-exports.isBoolean = isBoolean;
-const isNumber = (val) => typeof val === 'number';
-exports.isNumber = isNumber;
-const isEmpty = (val) => (!val && val !== 0) ||
-    ((0, utils_1.isArray)(val) && val.length === 0) ||
-    ((0, utils_1.isObject)(val) && !Object.keys(val).length);
-exports.isEmpty = isEmpty;
-const isElement = (e) => {
-    if (typeof Element === 'undefined')
-        return false;
-    return e instanceof Element;
-};
-exports.isElement = isElement;
-const isPropAbsent = (prop) => {
-    return (0, utils_1.isNil)(prop);
-};
-exports.isPropAbsent = isPropAbsent;
-const isStringNumber = (val) => {
-    if (!(0, utils_1.isString)(val)) {
-        return false;
-    }
-    return !Number.isNaN(Number(val));
-};
-exports.isStringNumber = isStringNumber;
-const isWindow = (val) => {
-    return val === window;
-};
-exports.isWindow = isWindow;