@type-dom/ui 0.0.4 → 0.0.6

package/src/components/feedback/td-message-box/td-message-box.style.d.ts

@@ -0,0 +1,36 @@
+import { IStyle } from '@type-dom/css-type';
+import { ITdMessageBoxConfig } from './td-message-box.interface';
+export declare const $messageBox: {
+    titleColor: string;
+    width: string;
+    borderRadius: string;
+    boxShadow: {
+        '': string;
+        default: string;
+        light: string;
+        lighter: string;
+        dark: string;
+    };
+    fontSize: string;
+    contentFontSize: string;
+    contentColor: string;
+    errorFontSize: string;
+    paddingPrimary: string;
+    fontLineHeight: string;
+};
+export declare const $messageBoxStyle: IStyle;
+export declare const $messageBoxOverlayStyle: IStyle;
+export declare const $messageBoxHeaderStyle: IStyle;
+export declare const $messageBoxHeaderCloseStyle: IStyle;
+export declare const $messageBoxTitleStyle: IStyle;
+export declare const $messageBoxHeaderBtnStyle: IStyle;
+export declare const $messageBoxContentStyle: IStyle;
+export declare const $messageBoxContainerStyle: IStyle;
+export declare const $messageBoxInputStyle: IStyle;
+export declare const $messageBoxStatusStyle: IStyle;
+export declare const $messageBoxMessageStyle: IStyle;
+export declare const $messageBoxMessagePStyle: IStyle;
+export declare const $messageBoxErrorMsgStyle: IStyle;
+export declare const $messageBoxBtnsStyle: IStyle;
+export declare function useStyle(config?: ITdMessageBoxConfig): void;
+export declare function useType(config?: ITdMessageBoxConfig): void;

package/src/components/feedback/td-message-box/td-message-box.style.js

@@ -0,0 +1,182 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.$messageBoxBtnsStyle = exports.$messageBoxErrorMsgStyle = exports.$messageBoxMessagePStyle = exports.$messageBoxMessageStyle = exports.$messageBoxStatusStyle = exports.$messageBoxInputStyle = exports.$messageBoxContainerStyle = exports.$messageBoxContentStyle = exports.$messageBoxHeaderBtnStyle = exports.$messageBoxTitleStyle = exports.$messageBoxHeaderCloseStyle = exports.$messageBoxHeaderStyle = exports.$messageBoxOverlayStyle = exports.$messageBoxStyle = exports.$messageBox = void 0;
+exports.useStyle = useStyle;
+exports.useType = useType;
+const var_1 = require("../../../styles/var");
+const td_message_style_1 = require("../td-message/td-message.style");
+exports.$messageBox = {
+    // 'title-color': getCssVar('text-color-primary'),
+    titleColor: var_1.$textColor.primary,
+    width: '420px',
+    borderRadius: '4px',
+    // 'box-shadow': getCssVar('box-shadow'),
+    boxShadow: var_1.$boxShadow,
+    // 'font-size': getCssVar('font-size-large'),
+    fontSize: var_1.$fontSizes.large,
+    // 'content-font-size': getCssVar('font-size-base'),
+    contentFontSize: var_1.$fontSizes.base,
+    // 'content-color': getCssVar('text-color-regular'),
+    contentColor: var_1.$textColor.regular,
+    errorFontSize: '12px',
+    paddingPrimary: '12px',
+    // 'font-line-height': getCssVar('font-line-height-primary'),
+    fontLineHeight: var_1.$fontLineHeightPrimary,
+};
+exports.$messageBoxStyle = {
+    display: 'inline-block',
+    position: 'relative',
+    // max-width: getCssVar('messagebox-width'),
+    maxWidth: exports.$messageBox.width,
+    width: '100%',
+    // padding: getCssVar('messagebox-padding-primary'),
+    padding: exports.$messageBox.paddingPrimary,
+    verticalAlign: 'middle',
+    // background-color: getCssVar('bg-color'),
+    backgroundColor: var_1.$bgColor.default,
+    // border-radius: getCssVar('messagebox-border-radius'),
+    borderRadius: exports.$messageBox.borderRadius,
+    // font-size: getCssVar('messagebox-font-size'),
+    fontSize: exports.$messageBox.fontSize,
+    // box-shadow: getCssVar('messagebox-box-shadow'),
+    boxShadow: exports.$messageBox.boxShadow.default,
+    textAlign: 'left',
+    overflow: 'hidden',
+    backfaceVisibility: 'hidden',
+    // To avoid small screen overflowing, see #1191,
+    boxSizing: 'border-box',
+    overflowWrap: 'break-word',
+};
+exports.$messageBoxOverlayStyle = {
+    textAlign: 'center',
+    position: 'fixed',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    padding: '16px',
+    overflow: 'auto',
+};
+exports.$messageBoxHeaderStyle = {
+    // paddingBottom: getCssVar('messagebox-padding-primary');
+    paddingBottom: exports.$messageBox.paddingPrimary
+};
+const $messageCloseSize = td_message_style_1.$message.closeSize;
+exports.$messageBoxHeaderCloseStyle = {
+    //   padding-right: calc(
+    //   getCssVar('messagebox-padding-primary') +
+    // var(
+    //   #{getCssVarName('message-close-size')},
+    //   map.get($message, 'close-size')
+    // )
+    paddingRight: parseInt(exports.$messageBox.paddingPrimary) + parseInt(td_message_style_1.$message.closeSize) + 'px',
+};
+exports.$messageBoxTitleStyle = {
+    //   font-size: getCssVar('messagebox-font-size');
+    fontSize: exports.$messageBox.fontSize,
+    // line-height: getCssVar('messagebox-font-line-height');
+    lineHeight: exports.$messageBox.fontLineHeight,
+    // color: getCssVar('messagebox-title-color');
+    color: exports.$messageBox.titleColor,
+};
+exports.$messageBoxHeaderBtnStyle = {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    padding: 0,
+    width: '40px',
+    height: '40px',
+    border: 'none',
+    outline: 'none',
+    background: 'transparent',
+    // font-size: var(
+    //   #{getCssVarName('message-close-size')},
+    //   map.get($message, 'close-size')
+    // );
+    fontSize: td_message_style_1.$message.closeSize,
+    cursor: 'pointer',
+};
+exports.$messageBoxContentStyle = {
+    // color: getCssVar('messagebox-content-color');
+    color: exports.$messageBox.contentColor,
+    // font-size: getCssVar('messagebox-content-font-size');
+    fontSize: exports.$messageBox.contentFontSize,
+};
+exports.$messageBoxContainerStyle = {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '12px',
+};
+exports.$messageBoxInputStyle = {
+    paddingTop: '12px'
+};
+exports.$messageBoxStatusStyle = {
+    fontSize: '24px',
+};
+exports.$messageBoxMessageStyle = {
+    margin: 0,
+};
+exports.$messageBoxMessagePStyle = {
+    margin: 0,
+    // line-height: getCssVar('messagebox-font-line-height');
+    lineHeight: exports.$messageBox.fontLineHeight,
+};
+exports.$messageBoxErrorMsgStyle = {
+    //   color: getCssVar('color-error');
+    color: var_1.$colors.error.base,
+    //   font-size: getCssVar('messagebox-error-font-size');
+    fontSize: exports.$messageBox.errorFontSize,
+    // line-height: getCssVar('messagebox-font-line-height');
+    lineHeight: exports.$messageBox.fontLineHeight,
+};
+exports.$messageBoxBtnsStyle = {
+    display: 'flex',
+    flexWrap: 'wrap',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    // padding-top: getCssVar('messagebox-padding-primary'),
+    paddingTop: exports.$messageBox.paddingPrimary,
+};
+function useStyle(config) {
+    useType(config);
+    const draggable = (config === null || config === void 0 ? void 0 : config.draggable) || false;
+    if (draggable) {
+        exports.$messageBoxHeaderStyle.cursor = 'move';
+        exports.$messageBoxHeaderStyle.userSelect = 'none';
+    }
+    if ((config === null || config === void 0 ? void 0 : config.showClose) !== false) {
+        exports.$messageBoxHeaderCloseStyle.display = 'block';
+        //   $messageBoxHeaderStyle.paddingRight =  calc(
+        //     getCssVar('messagebox-padding-primary') +
+        //   var(
+        //     #{getCssVarName('message-close-size')},
+        //     map.get($message, 'close-size')
+        // )
+        // );
+        exports.$messageBoxHeaderStyle.paddingRight = parseInt(exports.$messageBox.paddingPrimary) + parseInt($messageCloseSize) + 'px';
+    }
+    if (config === null || config === void 0 ? void 0 : config.center) {
+        exports.$messageBoxTitleStyle.display = 'flex';
+        exports.$messageBoxTitleStyle.alignItems = 'center';
+        exports.$messageBoxTitleStyle.justifyContent = 'center';
+        exports.$messageBoxTitleStyle.gap = '6px';
+        exports.$messageBoxStatusStyle.fontSize = 'inherit';
+        exports.$messageBoxBtnsStyle.justifyContent = 'center';
+        exports.$messageBoxContainerStyle.justifyContent = 'center';
+    }
+    else {
+        delete exports.$messageBoxTitleStyle.display;
+        delete exports.$messageBoxTitleStyle.alignItems;
+        delete exports.$messageBoxTitleStyle.justifyContent;
+        delete exports.$messageBoxTitleStyle.gap;
+        exports.$messageBoxStatusStyle.fontSize = '24px';
+        exports.$messageBoxBtnsStyle.justifyContent = 'flex-end';
+        delete exports.$messageBoxContainerStyle.justifyContent;
+    }
+}
+function useType(config) {
+    const type = (config === null || config === void 0 ? void 0 : config.type) || 'info';
+    const $messageBoxColor = var_1.$colors[type].base;
+    // $messageBoxIconStyle.color = $messageBoxColor;
+    exports.$messageBoxStatusStyle.color = $messageBoxColor;
+}

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

@@ -0,0 +1,30 @@
+import { UI } from '../../../ui/ui.abstract';
+import { INotificationPosition, ITdNotification, ITdNotificationConfig } from './td-notification.interface';
+export declare class TdNotification extends UI<undefined> implements ITdNotification {
+    className: 'TdNotification';
+    props: ITdNotificationConfig;
+    visible: boolean;
+    private transition;
+    private notification;
+    private group;
+    private title;
+    private content;
+    private closeBtn?;
+    static notifyId: number;
+    static notifications: Record<INotificationPosition, TdNotification[]>;
+    GAP_SIZE: number;
+    seed: number;
+    timer: (() => void) | undefined;
+    private verticalProperty;
+    constructor(option?: string | ITdNotificationConfig);
+    mounted(): void;
+    initEvents(): void;
+    static success(params?: ITdNotificationConfig): void;
+    static warning(params?: ITdNotificationConfig): void;
+    static error(params?: ITdNotificationConfig): void;
+    static info(params?: ITdNotificationConfig): void;
+    startTimer(): void;
+    clearTimer(): void;
+    close(): void;
+    onKeydown({ code }: KeyboardEvent): void;
+}

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

@@ -0,0 +1,234 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdNotification = void 0;
+const framework_1 = require("@type-dom/framework");
+const svgs_1 = require("@type-dom/svgs");
+const ui_abstract_1 = require("../../../ui/ui.abstract");
+const aria_1 = require("../../../aria");
+const td_notification_style_1 = require("./td-notification.style");
+const td_icon_class_1 = require("../../basic/td-icon/td-icon.class");
+class TdNotification extends ui_abstract_1.UI {
+    constructor(option) {
+        let params;
+        if (typeof option === 'string') {
+            params = { message: option };
+        }
+        else {
+            params = option;
+        }
+        super(params, 'fragment');
+        this.visible = false;
+        // the gap size between each notification
+        this.GAP_SIZE = 16;
+        this.seed = 1;
+        this.timer = undefined;
+        this.className = 'TdNotification';
+        (0, td_notification_style_1.useStyle)(params);
+        this.to = document.body;
+        this.transition = new framework_1.Transition({
+            name: 'fade',
+            emits: {
+                beforeLeave: (el, done) => {
+                    console.log('beforeLeave');
+                    (params === null || params === void 0 ? void 0 : params.onClose) && params.onClose();
+                },
+                afterLeave: (el, done) => {
+                    console.log('afterLeave');
+                    //   destroy
+                    this.destroy();
+                },
+            },
+        });
+        this.addChild(this.transition);
+        this.notification = new framework_1.Div({
+            attrObj: {
+                role: 'alert',
+            },
+            styleObj: td_notification_style_1.$notificationStyle,
+            events: {
+                mouseenter: () => {
+                    console.log('mouseenter');
+                },
+                mouseleave: () => {
+                    console.log('mouseleave');
+                },
+                click: () => {
+                    console.log('click');
+                },
+            },
+        });
+        this.transition.addChild(this.notification);
+        let iconComponent;
+        if ((params === null || params === void 0 ? void 0 : params.type) && svgs_1.TypeComponentsMap[params.type]) {
+            console.log('params.type is ', params.type);
+            iconComponent = new svgs_1.TypeComponentsMap[params.type]();
+        }
+        else {
+            iconComponent = params === null || params === void 0 ? void 0 : params.icon;
+        }
+        let icon;
+        if (iconComponent) {
+            icon = new td_icon_class_1.TdIcon({
+                name: 'icon',
+                styleObj: td_notification_style_1.$notificationIconStyle,
+                svgObj: iconComponent,
+            });
+            this.notification.addChild(icon);
+        }
+        this.group = new framework_1.Div({
+            name: 'group',
+            styleObj: td_notification_style_1.$notificationGroupStyle,
+        });
+        this.title = new framework_1.Head({
+            name: 'title',
+            nodeName: 'h2',
+            text: params === null || params === void 0 ? void 0 : params.title,
+            styleObj: td_notification_style_1.$notificationTitleStyle,
+        });
+        this.group.addChild(this.title);
+        this.content = new framework_1.Div({
+            name: 'content',
+            styleObj: td_notification_style_1.$notificationContentStyle,
+        });
+        if (params === null || params === void 0 ? void 0 : params.slot) {
+            this.content.slotChild(params.slot);
+        }
+        else {
+            if (params === null || params === void 0 ? void 0 : params.dangerouslyUseHTMLString) {
+                if (typeof params.message === 'string') {
+                    const parser = new framework_1.Parser();
+                    const el = parser.parseFromString(params.message);
+                    this.content.addChild(new framework_1.P({
+                        childNodes: [el],
+                    }));
+                }
+                else {
+                    console.warn('params.message is not a string . ');
+                }
+            }
+            else {
+                const p = new framework_1.P();
+                if ((params === null || params === void 0 ? void 0 : params.message) instanceof framework_1.TypeElement) {
+                    p.addChild(params.message);
+                }
+                else {
+                    p.addChild(new framework_1.TextNode(params === null || params === void 0 ? void 0 : params.message));
+                }
+                this.content.addChild(p);
+            }
+        }
+        this.group.addChild(this.content);
+        if ((params === null || params === void 0 ? void 0 : params.showClose) !== false) {
+            this.closeBtn = new td_icon_class_1.TdIcon({
+                name: 'close-btn',
+                styleObj: td_notification_style_1.$notificationCloseBtnStyle,
+                svgObj: new svgs_1.ElCloseSvg(),
+                events: {
+                    click: (evt) => {
+                        evt === null || evt === void 0 ? void 0 : evt.stopPropagation();
+                        this.close();
+                    },
+                },
+            });
+            this.group.addChild(this.closeBtn);
+        }
+        this.notification.addChild(this.group);
+        const position = (params === null || params === void 0 ? void 0 : params.position) || 'top-right';
+        const horizontal = position.endsWith('right') ? 'right' : 'left';
+        this.notification.ctrl.addStyleObj({ [horizontal]: '16px' });
+        this.verticalProperty = position.startsWith('top') ? 'top' : 'bottom';
+        let verticalOffset = (params === null || params === void 0 ? void 0 : params.offset) || 0;
+        console.log('verticalOffset is ', verticalOffset);
+        TdNotification.notifications[position].forEach((item) => {
+            verticalOffset += item.notification.dom.offsetHeight + this.GAP_SIZE;
+        });
+        verticalOffset = verticalOffset + this.GAP_SIZE;
+        const positionStyle = {
+            [this.verticalProperty]: `${verticalOffset}px`,
+            zIndex: 9999, // params?.zIndex ?? currentZIndex,
+        };
+        this.notification.ctrl.addStyleObj(positionStyle);
+        TdNotification.notifyId = TdNotification.notifyId + 1;
+        TdNotification.notifications[position].push(this);
+        this.props = this.setParams(params);
+        this.mount(this.to);
+    }
+    mounted() {
+        this.startTimer();
+        // nextZIndex()
+        this.visible = true;
+    }
+    initEvents() {
+        this.addEvent('keydown', document, (evt) => {
+            this.onKeydown(evt);
+        });
+    }
+    static success(params) {
+        new TdNotification(Object.assign({ type: 'success' }, params));
+    }
+    static warning(params) {
+        new TdNotification(Object.assign({ type: 'warning' }, params));
+    }
+    static error(params) {
+        new TdNotification(Object.assign({ type: 'error' }, params));
+    }
+    static info(params) {
+        new TdNotification(Object.assign({ type: 'info' }, params));
+    }
+    startTimer() {
+        var _a;
+        console.log('startTimer . ');
+        const duration = (_a = this.props.duration) !== null && _a !== void 0 ? _a : 4500;
+        if (duration > 0) {
+            ({ stop: this.timer } = (0, framework_1.useTimeoutFn)(() => {
+                if (this.visible)
+                    this.close();
+            }, duration));
+        }
+    }
+    clearTimer() {
+        var _a;
+        (_a = this.timer) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
+    close() {
+        this.visible = false;
+        this.notification.ctrl.hide();
+        const position = this.props.position || 'top-right';
+        this.destroy(); // todo 应该是 Transition 的 afterLeave 触发 destroy；  会删除props
+        TdNotification.notifications[position] = TdNotification.notifications[position].filter((notification) => notification !== this);
+        TdNotification.notifyId = TdNotification.notifyId - 1;
+        let verticalOffset = this.props.offset || 0;
+        console.log('height is ', verticalOffset);
+        TdNotification.notifications[position].forEach((item, index) => {
+            verticalOffset = verticalOffset + this.GAP_SIZE;
+            item.notification.ctrl.setStyleObj({
+                [this.verticalProperty]: `${verticalOffset}px`,
+            });
+            verticalOffset += item.notification.dom.offsetHeight; // + this.GAP_SIZE;
+        });
+    }
+    onKeydown({ code }) {
+        console.log('onKeydown ', code);
+        if (code === aria_1.EVENT_CODE.delete || code === aria_1.EVENT_CODE.backspace) {
+            this.clearTimer(); // press delete/backspace clear timer
+        }
+        else if (code === aria_1.EVENT_CODE.esc) {
+            // press esc to close the notification
+            if (this.visible) {
+                this.close();
+            }
+        }
+        else {
+            this.startTimer(); // resume timer
+        }
+    }
+}
+exports.TdNotification = TdNotification;
+TdNotification.notifyId = 0;
+// This should be a queue but considering there were `non-autoclosable` notifications.
+TdNotification.notifications = {
+    'top-left': [],
+    'top-right': [],
+    'bottom-left': [],
+    'bottom-right': [],
+};

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

@@ -0,0 +1,76 @@
+import { TypeElement, TypeSvgSvg } from '@type-dom/framework';
+import { IUI, IUIConfig } from '../../../ui/ui.interface';
+export type INotificationPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+export type INotificationType = 'success' | 'info' | 'warning' | 'error';
+export interface ITdNotification extends IUI {
+    className: 'TdNotification';
+}
+export interface ITdNotificationConfig extends IUIConfig {
+    /**
+     * @description custom class name for Notification
+     *     default: ''
+     */
+    customClass?: string;
+    /**
+     * @description whether `message` is treated as HTML string
+     */
+    dangerouslyUseHTMLString?: boolean;
+    /**
+     * @description duration before close. It will not automatically close if set 0
+     *     default: 4500
+     */
+    duration?: number;
+    /**
+     * @description custom icon component. It will be overridden by `type`
+     */
+    icon?: TypeSvgSvg;
+    /**
+     * @description notification dom id
+     *     default: ''
+     */
+    id?: string;
+    /**
+     * @description description text
+     *     default: ''
+     */
+    message?: string | TypeElement;
+    /**
+     * @description offset from the top edge of the screen. Every Notification instance of the same moment should have the same offset
+     *     default: 0
+     */
+    offset?: number;
+    /**
+     * @description callback function when notification clicked
+     *     default: () => undefined
+     */
+    onClick?: () => void;
+    /**
+     * @description callback function when closed
+     *     required: true
+     */
+    onClose?: () => void;
+    /**
+     * @description custom position
+     *     default: 'top-right'
+     */
+    position?: INotificationPosition;
+    /**
+     * @description whether to show a close button
+     *     default: true
+     */
+    showClose?: boolean;
+    /**
+     * @description title
+     *     default: ''
+     */
+    title?: string;
+    /**
+     * @description notification type
+     *     default: ''
+     */
+    type?: INotificationType;
+    /**
+     * @description initial zIndex
+     */
+    zIndex?: number;
+}

package/src/components/feedback/td-notification/td-notification.interface.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/src/components/feedback/td-notification/td-notification.style.d.ts

@@ -0,0 +1,28 @@
+import { IStyle } from '@type-dom/css-type';
+import { ITdNotificationConfig } from './td-notification.interface';
+export declare const $messageCloseSize: string;
+export declare const $notification: {
+    width: string;
+    padding: string;
+    radius: string;
+    shadow: string;
+    borderColor: string;
+    iconSize: string;
+    closeFontSize: string;
+    groupMarginLeft: string;
+    groupMarginRight: string;
+    contentFontSize: string;
+    contentColor: string;
+    titleFontSize: string;
+    titleColor: string;
+    closeColor: string;
+    closeHoverColor: string;
+};
+export declare const $notificationStyle: IStyle;
+export declare const $notificationGroupStyle: IStyle;
+export declare const $notificationTitleStyle: IStyle;
+export declare const $notificationContentStyle: IStyle;
+export declare const $notificationIconStyle: IStyle;
+export declare const $notificationCloseBtnStyle: IStyle;
+export declare function useStyle(config?: ITdNotificationConfig): void;
+export declare function useType(config?: ITdNotificationConfig): void;