@type-dom/ui 0.1.2 → 0.2.0

package/src/components/feedback/td-alert/td-alert.const.d.ts

@@ -1,7 +0,0 @@
-import { AlertProps } from './td-alert.interface';
-export declare const alertEffects: readonly ["light", "dark"];
-export declare const alertProps: AlertProps;
-export declare const alertEmits: {
-    close: (evt?: MouseEvent) => evt is MouseEvent;
-};
-export type AlertEmits = typeof alertEmits;

package/src/components/feedback/td-alert/td-alert.const.js

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.alertEmits = exports.alertProps = exports.alertEffects = void 0;
-exports.alertEffects = ['light', 'dark'];
-exports.alertProps = {
-    title: '',
-    description: '',
-    type: 'info',
-    closable: true,
-    closeText: '',
-    effect: 'light',
-};
-exports.alertEmits = {
-    close: (evt) => evt instanceof MouseEvent,
-};

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

@@ -1,41 +0,0 @@
-import { ITypeElement, TypeTransitionProps } from '@type-dom/framework';
-export interface ITdAlert extends ITypeElement {
-    className: 'TdAlert';
-}
-export interface AlertProps extends TypeTransitionProps {
-    /**
-     * @description alert title.
-     *     default: ''
-     */
-    title?: string;
-    description?: string;
-    /**
-     * @description alert type.
-     *     default: 'info'
-     */
-    type?: 'success' | 'warning' | 'error' | 'info';
-    /**
-     * @description whether alert can be dismissed.
-     *     default: true
-     */
-    closable?: boolean;
-    /**
-     * @description text for replacing x button
-     *     default: ''
-     */
-    closeText?: string;
-    /**
-     * @description whether show icon
-     */
-    showIcon?: boolean;
-    /**
-     * @description should content be placed in center.
-     *     default: 'light'
-     */
-    center?: boolean;
-    effect?: IAlertEffect;
-    emits?: {
-        close?(): void;
-    };
-}
-export type IAlertEffect = 'dark' | 'light';

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

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

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

@@ -1,21 +0,0 @@
-import { IStyle } from '@type-dom/css-type';
-import { AlertProps } from './td-alert.interface';
-export declare const $alert: {
-    padding: string;
-    borderRadiusBase: string;
-    titleFontSize: string;
-    titleWithDescriptionFontSize: string;
-    descriptionFontSize: string;
-    closeFontSize: string;
-    closeCustomedFontSize: string;
-    iconSize: string;
-    iconLargeSize: string;
-};
-export declare const $alertStyle: IStyle;
-export declare const $alertContentStyle: IStyle;
-export declare const $alertIconStyle: IStyle;
-export declare const $alertTitleStyle: IStyle;
-export declare const $alertDescriptionStyle: IStyle;
-export declare const $alertCloseBtnStyle: IStyle;
-export declare function useStyle(config?: AlertProps): void;
-export declare function useType(config?: AlertProps): void;

package/src/components/feedback/td-alert/td-alert.style.js

@@ -1,102 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.$alertCloseBtnStyle = exports.$alertDescriptionStyle = exports.$alertTitleStyle = exports.$alertIconStyle = exports.$alertContentStyle = exports.$alertStyle = exports.$alert = void 0;
-exports.useStyle = useStyle;
-exports.useType = useType;
-const var_1 = require("../../../styles/var");
-exports.$alert = {
-    padding: '8px 16px',
-    // 'border-radius-base': getCssVar('border-radius-base'),
-    borderRadiusBase: var_1.$borderRadius.base,
-    titleFontSize: '14px',
-    titleWithDescriptionFontSize: '16px',
-    descriptionFontSize: '14px',
-    closeFontSize: '16px',
-    closeCustomedFontSize: '14px',
-    iconSize: '16px',
-    iconLargeSize: '28px',
-};
-exports.$alertStyle = {
-    width: '100%',
-    // padding: getCssVar('alert', 'padding'),
-    padding: exports.$alert.padding,
-    margin: 0,
-    boxSizing: 'border-box',
-    // border-radius: getCssVar('alert', 'border-radius-base'),
-    borderRadius: exports.$alert.borderRadiusBase,
-    position: 'relative',
-    // backgroundColor: getCssVar('color', 'white'),
-    backgroundColor: var_1.$colorWhite,
-    overflow: 'hidden',
-    opacity: 1,
-    display: 'flex',
-    alignItems: 'center',
-    // transition: opacity getCssVar('transition-duration', 'fast'),
-    transition: 'opacity ' + var_1.$transitionDurationFast,
-};
-exports.$alertContentStyle = {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: '4px',
-};
-exports.$alertIconStyle = {
-    // font-size: getCssVar('alert', 'icon-size'),
-    fontSize: exports.$alert.iconSize,
-    // width: getCssVar('alert', 'icon-size'),
-    width: exports.$alert.iconSize,
-    marginRight: '8px',
-};
-exports.$alertTitleStyle = {
-    // font-size: getCssVar('alert', 'title-font-size'),
-    fontSize: exports.$alert.titleFontSize,
-    lineHeight: '24px',
-};
-exports.$alertDescriptionStyle = {
-    // font-size: getCssVar('alert', 'description-font-size');
-    fontSize: exports.$alert.descriptionFontSize,
-    margin: 0,
-};
-exports.$alertCloseBtnStyle = {
-    // font-size: getCssVar('alert', 'close-font-size'),
-    fontSize: exports.$alert.closeFontSize,
-    opacity: 1,
-    position: 'absolute',
-    top: '12px',
-    right: '16px',
-    cursor: 'pointer',
-};
-function useStyle(config) {
-    useType(config);
-    if (config === null || config === void 0 ? void 0 : config.center) {
-        exports.$alertStyle.justifyContent = 'center';
-    }
-    else {
-        delete exports.$alertStyle.justifyContent;
-    }
-    const big = !!(config === null || config === void 0 ? void 0 : config.description) || !!(config === null || config === void 0 ? void 0 : config.slot);
-    if (big) {
-        exports.$alertIconStyle.fontSize = exports.$alert.iconLargeSize;
-        exports.$alertIconStyle.width = exports.$alert.iconLargeSize;
-        exports.$alertIconStyle.marginRight = '12px';
-    }
-    const withDescription = (config === null || config === void 0 ? void 0 : config.description) || (config === null || config === void 0 ? void 0 : config.slot);
-    if (withDescription) {
-        exports.$alertTitleStyle.fontSize = exports.$alert.titleWithDescriptionFontSize;
-    }
-}
-function useType(config) {
-    const effect = (config === null || config === void 0 ? void 0 : config.effect) || 'light';
-    const $alertBgColor = var_1.$colors[(config === null || config === void 0 ? void 0 : config.type) || 'info']['light-9'];
-    switch (effect) {
-        case 'light':
-            exports.$alertStyle.backgroundColor = $alertBgColor;
-            exports.$alertStyle.color = var_1.$colors[(config === null || config === void 0 ? void 0 : config.type) || 'info'].base;
-            exports.$alertDescriptionStyle.color = var_1.$colors[(config === null || config === void 0 ? void 0 : config.type) || 'info'].base;
-            break;
-        case 'dark':
-            exports.$alertStyle.backgroundColor = var_1.$colors[(config === null || config === void 0 ? void 0 : config.type) || 'info'].base;
-            exports.$alertStyle.color = var_1.$colorWhite;
-            break;
-    }
-    // if (config.)
-}

package/src/components/feedback/td-dialog/constants.d.ts

@@ -1,13 +0,0 @@
-import { Computed, Ref } from '@type-dom/signals';
-import { IStyle } from '@type-dom/css-type';
-import { InjectionKey } from '@type-dom/framework';
-import { UseNamespaceReturn } from '../../../hooks/use-namespace';
-export type DialogContext = {
-    dialogRef: Ref<HTMLElement | undefined>;
-    headerRef: Ref<HTMLElement | undefined>;
-    bodyId: Ref<string>;
-    ns: UseNamespaceReturn;
-    rendered: Ref<boolean>;
-    style: Computed<IStyle>;
-};
-export declare const dialogInjectionKey: InjectionKey<DialogContext>;

package/src/components/feedback/td-dialog/constants.js

@@ -1,6 +0,0 @@
-"use strict";
-// import type { CSSProperties, ComputedRef, InjectionKey, Ref } from 'vue'
-// import type { UseNamespaceReturn } from '@element-plus/hooks'
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.dialogInjectionKey = void 0;
-exports.dialogInjectionKey = Symbol('dialogInjectionKey');

package/src/components/feedback/td-dialog/style/css.d.ts

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

package/src/components/feedback/td-dialog/style/css.js

@@ -1,5 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-require("../../../base/style/css");
-require("@element-plus/theme-chalk/el-dialog.css");
-require("@element-plus/components/overlay/style/css");

package/src/components/feedback/td-dialog/style/index.d.ts

@@ -1,3 +0,0 @@
-import '../../../../components/base/style';
-import '../../../../theme-chalk/dialog.scss';
-import '../../../../components/feedback/td-overlay/style';

package/src/components/feedback/td-dialog/style/index.js

@@ -1,5 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-require("../../../../components/base/style");
-require("../../../../theme-chalk/dialog.scss");
-require("../../../../components/feedback/td-overlay/style");

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

@@ -1,15 +0,0 @@
-import { TypeFragment } from '@type-dom/framework';
-import { Signal } from '@type-dom/signals';
-import { DialogContentProps } from '../td-dialog-content/td-dialog-content.interface';
-import { TdDialogContent } from '../td-dialog-content/td-dialog-content.class';
-import { ITdDialog, DialogProps } from './td-dialog.interface';
-import './style/index';
-export declare class TdDialog extends TypeFragment implements ITdDialog {
-    className: 'TdDialog';
-    props: DialogContentProps & DialogProps;
-    visible?: Signal<boolean>;
-    dialogContentRef?: Signal<TdDialogContent | undefined>;
-    resetPosition?: () => void;
-    constructor(params?: DialogProps & DialogContentProps);
-    setup(): void;
-}

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

@@ -1,146 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TdDialog = void 0;
-const framework_1 = require("@type-dom/framework");
-const signals_1 = require("@type-dom/signals");
-const use_same_target_1 = require("../../../hooks/use-same-target");
-const use_namespace_1 = require("../../../hooks/use-namespace");
-const td_dialog_const_1 = require("./td-dialog.const");
-const use_deprecated_1 = require("../../../hooks/use-deprecated");
-const base_1 = require("../../base");
-const td_overlay_class_1 = require("../td-overlay/td-overlay.class");
-const td_dialog_content_class_1 = require("../td-dialog-content/td-dialog-content.class");
-const td_focus_trap_class_1 = require("../td-focus-trap/td-focus-trap.class");
-const constants_1 = require("./constants");
-const use_dialog_1 = require("./use-dialog");
-require("./style/index");
-// todo 最外层是 Teleport
-class TdDialog extends framework_1.TypeFragment {
-    constructor(params = {}) {
-        super();
-        // console.log('TdDialog . ');
-        this.className = 'TdDialog';
-        this.addEmits(td_dialog_const_1.dialogEmits);
-        this.assignProps(td_dialog_const_1.dialogProps);
-        this.props = this.useParams(params);
-    }
-    setup() {
-        const props = this.props;
-        const emit = this.emit;
-        const slots = (0, framework_1.useSlots)();
-        (0, use_deprecated_1.useDeprecated)({
-            scope: 'el-dialog',
-            from: 'the title slot',
-            replacement: 'the header slot',
-            version: '3.0.0',
-            ref: 'https://element-plus.org/en-US/component/dialog.html#slots',
-        }, (0, signals_1.computed)(() => !!(slots === null || slots === void 0 ? void 0 : slots.title)));
-        const ns = (0, use_namespace_1.useNamespace)('dialog');
-        const dialogRef = (0, signals_1.signal)();
-        const headerRef = (0, signals_1.signal)();
-        const dialogContentRef = (0, signals_1.signal)();
-        const { visible, titleId, bodyId, style, overlayDialogStyle, rendered, zIndex, afterEnter, afterLeave, beforeLeave, handleClose, onModalClick, onOpenAutoFocus, onCloseAutoFocus, onCloseRequested, onFocusoutPrevented, } = (0, use_dialog_1.useDialog)(props, dialogRef);
-        (0, framework_1.provide)(constants_1.dialogInjectionKey, {
-            dialogRef,
-            headerRef,
-            bodyId,
-            ns,
-            rendered,
-            style,
-        });
-        const overlayEvent = (0, use_same_target_1.useSameTarget)(onModalClick);
-        const draggable = (0, signals_1.computed)(() => props.draggable && !props.fullscreen);
-        const resetPosition = () => {
-            var _a, _b;
-            (_b = (_a = dialogContentRef.get()) === null || _a === void 0 ? void 0 : _a.resetPosition) === null || _b === void 0 ? void 0 : _b.call(_a);
-        };
-        (0, framework_1.defineExpose)({
-            /** @description whether the dialog is visible */
-            visible,
-            dialogContentRef,
-            resetPosition,
-        });
-        this.addChild(new base_1.TdTeleport({
-            to: props.appendTo,
-            disabled: props.appendTo !== 'body' ? false : !props.appendToBody,
-            slot: new framework_1.Transition({
-                name: 'dialog-fade',
-                onAfterEnter: afterEnter,
-                onAfterLeave: afterLeave,
-                onBeforeLeave: beforeLeave,
-                slot: new td_overlay_class_1.TdOverlay({
-                    vShow: visible,
-                    customMaskEvent: true,
-                    mask: props.modal,
-                    overlayClass: props.modalClass,
-                    attrObj: {
-                        zIndex: zIndex,
-                    },
-                    slot: new framework_1.Div({
-                        class: `${ns.namespace.get()}-overlay-dialog`,
-                        styleObj: overlayDialogStyle,
-                        attrObj: {
-                            role: 'dialog',
-                            ariaModal: true,
-                            ariaLabel: props.title,
-                            ariaLabelledby: !props.title ? titleId.get() : undefined,
-                            ariaDescribedby: bodyId.get(),
-                        },
-                        events: {
-                            click: overlayEvent.onClick,
-                            mousedown: overlayEvent.onMousedown,
-                            mouseup: overlayEvent.onMouseup,
-                        },
-                        slot: new td_focus_trap_class_1.TdFocusTrap({
-                            loop: true,
-                            trapped: visible,
-                            focusStartEl: 'container',
-                            events: {
-                                // 应该时监听自定义事件
-                                focusAfterTrapped: onOpenAutoFocus,
-                                focusAfterReleased: onCloseAutoFocus,
-                                focusoutPrevented: onFocusoutPrevented,
-                                releaseRequested: onCloseRequested,
-                            },
-                            slot: () => {
-                                var _a, _b, _c;
-                                return new td_dialog_content_class_1.TdDialogContent({
-                                    vIf: rendered,
-                                    refEl: dialogContentRef,
-                                    // v-bind: $attr
-                                    center: props.center,
-                                    alignCenter: props.alignCenter,
-                                    closeIcon: props.closeIcon,
-                                    draggable: draggable,
-                                    overflow: props.overflow,
-                                    fullscreen: props.fullscreen,
-                                    headerClass: props.headerClass,
-                                    bodyClass: props.bodyClass,
-                                    footerClass: props.footerClass,
-                                    showClose: props.showClose,
-                                    title: props.title,
-                                    ariaLevel: props.headerAriaLevel,
-                                    emits: {
-                                        close: handleClose,
-                                    },
-                                    slot: (_a = props.slot) !== null && _a !== void 0 ? _a : (_b = props.slots) === null || _b === void 0 ? void 0 : _b.default,
-                                    slots: {
-                                        header: !(slots === null || slots === void 0 ? void 0 : slots.title)
-                                            ? (_c = slots === null || slots === void 0 ? void 0 : slots.header) === null || _c === void 0 ? void 0 : _c.call(slots, {
-                                                close: handleClose,
-                                                titleId: titleId.get(),
-                                                titleClass: ns.e('title'),
-                                            })
-                                            : slots === null || slots === void 0 ? void 0 : slots.title,
-                                        footer: slots === null || slots === void 0 ? void 0 : slots.footer,
-                                    },
-                                });
-                            },
-                        }),
-                    }),
-                }),
-            }),
-        }));
-    }
-}
-exports.TdDialog = TdDialog;

package/src/components/feedback/td-dialog/td-dialog.const.d.ts

@@ -1,11 +0,0 @@
-import { DialogProps } from './td-dialog.interface';
-export declare const dialogProps: DialogProps;
-export declare const dialogEmits: {
-    open: () => boolean;
-    opened: () => boolean;
-    close: () => boolean;
-    closed: () => boolean;
-    "update:modelValue": (value: boolean) => boolean;
-    openAutoFocus: () => boolean;
-    closeAutoFocus: () => boolean;
-};

package/src/components/feedback/td-dialog/td-dialog.const.js

@@ -1,29 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.dialogEmits = exports.dialogProps = void 0;
-const utils_1 = require("@type-dom/utils");
-const event_1 = require("../../../constants/event");
-// import { dialogContentProps } from '../td-dialog-content/td-dialog-content.const';
-exports.dialogProps = {
-    showClose: true,
-    title: '',
-    ariaLevel: '2',
-    // ...dialogContentProps,
-    appendTo: 'body',
-    closeOnClickModal: true,
-    closeOnPressEscape: true,
-    lockScroll: true,
-    modal: true,
-    openDelay: 0,
-    closeDelay: 0,
-    headerAriaLevel: '2',
-};
-exports.dialogEmits = {
-    open: () => true,
-    opened: () => true,
-    close: () => true,
-    closed: () => true,
-    [event_1.UPDATE_MODEL_EVENT]: (value) => (0, utils_1.isBoolean)(value),
-    openAutoFocus: () => true,
-    closeAutoFocus: () => true,
-};

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

@@ -1,83 +0,0 @@
-import { ITypeElement, TypeFragmentProps } from '@type-dom/framework';
-import { DialogContentProps } from '../td-dialog-content/td-dialog-content.interface';
-export interface ITdDialog extends ITypeElement {
-    className: 'TdDialog';
-}
-type DoneFn = (cancel?: boolean) => void;
-export type DialogBeforeCloseFn = (done: DoneFn) => void;
-export interface DialogProps extends TypeFragmentProps, Omit<DialogContentProps, 'nodeName' | 'slots'> {
-    /**
-     * @description whether to append Dialog itself to body. A nested Dialog should have this attribute set to `true`
-     */
-    appendToBody?: boolean;
-    /**
-     * @description which element the Dialog appends to
-     *     default: 'body',
-     */
-    appendTo?: string;
-    /**
-     * @description callback before Dialog closes, and it will prevent Dialog from closing, use done to close the dialog
-     */
-    beforeClose?: DialogBeforeCloseFn;
-    /**
-     * @description destroy elements in Dialog when closed
-     */
-    destroyOnClose?: boolean;
-    /**
-     * @description whether the Dialog can be closed by clicking the mask
-     *     default: true,
-     */
-    closeOnClickModal?: boolean;
-    /**
-     * @description whether the Dialog can be closed by pressing ESC
-     *     default: true,
-     */
-    closeOnPressEscape?: boolean;
-    /**
-     * @description whether scroll of body is disabled while Dialog is displayed
-     *     default: true,
-     */
-    lockScroll?: boolean;
-    /**
-     * @description whether a mask is displayed
-     *     default: true,
-     */
-    modal?: boolean;
-    /**
-     * @description the Time(milliseconds) before open
-     *     default: 0,
-     */
-    openDelay?: number;
-    /**
-     * @description the Time(milliseconds) before close
-     *     default: 0,
-     */
-    closeDelay?: number;
-    /**
-     * @description value for `margin-top` of Dialog CSS, default is 15vh
-     */
-    top?: string;
-    /**
-     * @description visibility of Dialog
-     */
-    modelValue?: boolean;
-    /**
-     * @description custom class names for mask
-     */
-    modalClass?: string;
-    /**
-     * @description width of Dialog, default is 50%
-     */
-    width?: string | number;
-    /**
-     * @description same as z-index in native CSS, z-order of dialog
-     */
-    zIndex?: number;
-    trapFocus?: boolean;
-    /**
-     * @description header's aria-level attribute
-     *     default: '2',
-     */
-    headerAriaLevel?: string;
-}
-export {};

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

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

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

@@ -1,20 +0,0 @@
-import { IStyle } from '@type-dom/css-type';
-export declare const $dialog: {
-    width: string;
-    marginTop: string;
-    bgColor: string;
-    boxShadow: string;
-    titleFontSize: string;
-    contentFontSize: string;
-    fontLineHeight: string;
-    paddingPrimary: string;
-    borderRadius: string;
-};
-export declare const $dialogStyle: IStyle;
-export declare const $dialogHeaderStyle: IStyle;
-export declare const $dialogHeaderCloseStyle: IStyle;
-export declare const $dialogHeaderBtn: IStyle;
-export declare const $dialogTitleStyle: IStyle;
-export declare const $dialogBodyStyle: IStyle;
-export declare const $dialogFooterStyle: IStyle;
-export declare const $dialogOverlayStyle: IStyle;

package/src/components/feedback/td-dialog/td-dialog.style.js

@@ -1,89 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.$dialogOverlayStyle = exports.$dialogFooterStyle = exports.$dialogBodyStyle = exports.$dialogTitleStyle = exports.$dialogHeaderBtn = exports.$dialogHeaderCloseStyle = exports.$dialogHeaderStyle = exports.$dialogStyle = exports.$dialog = void 0;
-const var_1 = require("../../../styles/var");
-const td_message_style_1 = require("../td-message/td-message.style");
-exports.$dialog = {
-    width: '50%',
-    marginTop: '15vh',
-    // bgColor: getCssVar('bg-color'),
-    bgColor: var_1.$bgColor.default,
-    // boxShadow: getCssVar('box-shadow'),
-    boxShadow: var_1.$boxShadow.default,
-    // titleFontSize: getCssVar('font-size-large'),
-    titleFontSize: var_1.$fontSizes.large,
-    contentFontSize: '14px',
-    // fontLineHeight: getCssVar('font-line-height-primary'),
-    fontLineHeight: var_1.$fontLineHeightPrimary,
-    paddingPrimary: '16px',
-    // borderRadius: getCssVar('border-radius-small'),
-    borderRadius: var_1.$borderRadius.small,
-};
-exports.$dialogStyle = {
-    position: 'relative',
-    // margin: var(#{getCssVarName('dialog-margin-top')}, 15vh) auto 50px,
-    margin: exports.$dialog.marginTop + ' auto 50px',
-    // background: getCssVar('dialog', 'bg-color'),
-    background: exports.$dialog.bgColor,
-    // borderRadius: getCssVar('dialog', 'border-radius'),
-    borderRadius: exports.$dialog.borderRadius,
-    // boxShadow: getCssVar('dialog', 'box-shadow'),
-    boxShadow: exports.$dialog.boxShadow,
-    boxSizing: 'border-box',
-    // padding: getCssVar('dialog', 'padding-primary'),
-    padding: exports.$dialog.paddingPrimary,
-    // width: var(#{getCssVarName('dialog-width')}, 50%),
-    width: exports.$dialog.width,
-    overflowWrap: 'break-word',
-};
-exports.$dialogHeaderStyle = {
-    paddingBottom: exports.$dialog.paddingPrimary,
-};
-exports.$dialogHeaderCloseStyle = {
-    paddingRight: 'calc(' + exports.$dialog.paddingPrimary + ' + ' + td_message_style_1.$message.closeSize + ')',
-};
-exports.$dialogHeaderBtn = {
-    position: 'absolute',
-    top: 0,
-    right: 0,
-    padding: 0,
-    width: '48px',
-    height: '48px',
-    background: 'transparent',
-    border: 'none',
-    outline: 'none',
-    cursor: 'pointer',
-    //   font-size: var(
-    //   #{getCssVarName('message-close-size')},
-    //   map.get($message, 'close-size')
-    // );
-    fontSize: td_message_style_1.$message.closeSize,
-};
-exports.$dialogTitleStyle = {
-    // lineHeight: getCssVar('dialog-font-line-height'),
-    lineHeight: exports.$dialog.fontLineHeight,
-    // fontSize: getCssVar('dialog-title-font-size'),
-    fontSize: exports.$dialog.titleFontSize,
-    // color: getCssVar('text-color', 'primary'),
-    color: var_1.$textColor.primary,
-};
-exports.$dialogBodyStyle = {
-    // color: getCssVar('text-color', 'regular'),
-    color: var_1.$textColor.regular,
-    // font-size: getCssVar('dialog-content-font-size'),
-    fontSize: exports.$dialog.contentFontSize,
-};
-exports.$dialogFooterStyle = {
-    paddingTop: exports.$dialog.paddingPrimary,
-    // padding-top: getCssVar('dialog', 'padding-primary'),
-    textAlign: 'right',
-    boxSizing: 'border-box',
-};
-exports.$dialogOverlayStyle = {
-    position: 'fixed',
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
-    overflow: 'auto',
-};