@type-dom/ui 0.1.0 → 0.1.2

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

@@ -0,0 +1,3 @@
+import { MessageBoxProps } from './td-message-box.interface';
+export declare const messageBoxProps: MessageBoxProps;
+export declare const emits: string[];

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.emits = exports.messageBoxProps = void 0;
+exports.messageBoxProps = {
+    modal: true,
+    lockScroll: true,
+    showClose: true,
+    closeOnClickModal: true,
+    closeOnPressEscape: true,
+    closeOnHashChange: true,
+    roundButton: false,
+    container: 'body',
+    boxType: '',
+};
+exports.emits = ['vanish', 'action'];

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

@@ -1,42 +1,60 @@
-import { InputEnum, ITypeConfig, ITypeElement, TypeElement, TypeSvgSvg } from '@type-dom/framework';
+import { InputEnum, ITypeFragment, TypeFragmentProps, TypeSvgSvg, TypeNode } from '@type-dom/framework';
 import { IStyle } from '@type-dom/css-type';
-import { ISize } from '../../../styles/size';
+import { ComponentSize } from '../../../constants/size';
 import { TdInput } from '../../form';
-export interface ITdMessageBox extends ITypeElement {
+import { MaybeRef, Signal } from '@type-dom/signals';
+export interface ITdMessageBox extends ITypeFragment {
     className: 'TdMessageBox';
+    props: MessageBoxProps;
+}
+export interface MessageBoxProps extends TypeFragmentProps, TdMessageBoxOptions, MessageBoxState {
+    buttonSize?: ComponentSize;
+    modal?: boolean;
+    lockScroll?: boolean;
+    showClose?: boolean;
+    closeOnClickModal?: boolean;
+    closeOnPressEscape?: boolean;
+    closeOnHashChange?: boolean;
+    center?: boolean;
+    draggable?: boolean;
+    overflow?: boolean;
+    roundButton?: boolean;
+    container?: string;
+    boxType?: IMessageBoxType;
 }
 type MessageType = '' | 'success' | 'warning' | 'info' | 'error';
 export type IMessageBoxType = '' | 'prompt' | 'alert' | 'confirm';
-export type MessageBoxData = IMessageBoxInputData & IAction;
-export type IAction = 'confirm' | 'close' | 'cancel';
+export type MessageBoxData = IMessageBoxInputData & Action;
+export type Action = 'confirm' | 'close' | 'cancel';
 export interface IMessageBoxInputData {
+    value: string;
     input?: TdInput;
-    action?: IAction;
+    action?: Action;
 }
 export interface MessageBoxInputValidator {
-    (value?: string): boolean | string;
+    (value?: string | number): boolean | string;
 }
-export declare interface IMessageBoxState {
+export declare interface MessageBoxState {
     autofocus?: boolean;
-    title?: string;
-    message?: string;
+    title?: string | TdMessageBoxOptions;
+    message?: string | TypeNode;
     type?: MessageType;
-    icon?: TypeSvgSvg;
+    icon?: typeof TypeSvgSvg;
     customClass?: string;
     customStyle?: IStyle;
     showInput?: boolean;
-    inputValue?: string;
+    inputValue?: Signal<string>;
     inputPlaceholder?: string;
-    inputType?: string;
+    inputType?: keyof typeof InputEnum | 'textarea';
     inputPattern?: RegExp;
     inputValidator?: MessageBoxInputValidator;
     inputErrorMessage?: string;
     showConfirmButton?: boolean;
     showCancelButton?: boolean;
-    action?: IAction;
+    action?: Action;
     dangerouslyUseHTMLString?: boolean;
-    confirmButtonText?: string;
-    cancelButtonText?: string;
+    confirmButtonText?: MaybeRef<string>;
+    cancelButtonText?: MaybeRef<string>;
     confirmButtonLoading?: boolean;
     cancelButtonLoading?: boolean;
     confirmButtonLoadingIcon?: TypeSvgSvg;
@@ -44,8 +62,8 @@ export declare interface IMessageBoxState {
     confirmButtonClass?: string;
     confirmButtonDisabled?: boolean;
     cancelButtonClass?: string;
-    editorErrorMessage?: string;
-    beforeClose?: (action: IAction, instance: IMessageBoxState, done: () => void) => void;
+    editorErrorMessage?: Signal<string>;
+    beforeClose?: (action: Action, instance: MessageBoxState, done: () => void) => void;
     callback?: Callback;
     distinguishCancelAndClose?: boolean;
     modalFade?: boolean;
@@ -54,24 +72,27 @@ export declare interface IMessageBoxState {
     validateError?: boolean;
     zIndex?: number;
 }
-export type Callback = (action: IAction) => void;
-export interface ITdMessageBoxConfig extends ITypeConfig {
+export type Callback = (action: Action) => void;
+/** Options used in MessageBox */
+export interface TdMessageBoxOptions {
     /**
      * auto focus when open message-box
      */
     autofocus?: boolean;
     /** Callback before MessageBox closes, and it will prevent MessageBox from closing */
-    beforeClose?: (action: IAction, instance: IMessageBoxState, done: () => void) => void;
+    beforeClose?: (action: Action, instance: MessageBoxState, done: () => void) => void;
     /** Custom class name for MessageBox */
     customClass?: string;
     /** Custom inline style for MessageBox */
     customStyle?: IStyle;
+    /** modal class name for MessageBox */
+    modalClass?: string;
     /** MessageBox closing callback if you don't prefer Promise */
     callback?: Callback;
-    /** Text content of cancel button */
-    cancelButtonText?: string;
-    /** Text content of confirm button */
-    confirmButtonText?: string;
+    /** Text content of cancel button, need to reactivity */
+    cancelButtonText?: MaybeRef<string>;
+    /** Text content of confirm button,  need to reactivity*/
+    confirmButtonText?: MaybeRef<string>;
     /** Loading Icon content of cancel button */
     cancelButtonLoadingIcon?: TypeSvgSvg;
     /** Loading Icon content of confirm button */
@@ -87,15 +108,15 @@ export interface ITdMessageBoxConfig extends ITypeConfig {
     /** Draggable MessageBox can overflow the viewport */
     overflow?: boolean;
     /** Content of the MessageBox */
-    message?: string | TypeElement | (() => TypeElement);
+    message?: string | TypeNode;
     /** Title of the MessageBox */
-    title?: string;
+    title?: string | TdMessageBoxOptions;
     /** Message type, used for icon display */
     type?: MessageType;
     /** Message box type */
     boxType?: IMessageBoxType;
     /** Custom icon component */
-    icon?: TypeSvgSvg;
+    icon?: typeof TypeSvgSvg;
     /** Whether message is treated as HTML string */
     dangerouslyUseHTMLString?: boolean;
     /** Whether to distinguish canceling and closing */
@@ -121,7 +142,7 @@ export interface ITdMessageBoxConfig extends ITypeConfig {
     /** Placeholder of input */
     inputPlaceholder?: string;
     /** Initial value of input */
-    inputValue?: string;
+    inputValue?: Signal<string>;
     /** Regexp for the input */
     inputPattern?: RegExp;
     /** Input Type: text, textArea, password or number */
@@ -131,12 +152,22 @@ export interface ITdMessageBoxConfig extends ITypeConfig {
     /** Error message when validation fails */
     inputErrorMessage?: string;
     /** Custom size of confirm and cancel buttons */
-    buttonSize?: ISize;
+    buttonSize?: ComponentSize;
     /** Custom element to append the message box to */
     appendTo?: HTMLElement | string;
-    emits?: {
-        vanish?: (action?: IAction, instance?: IMessageBoxState, done?: () => void) => void;
-        action?: (action?: IAction) => void;
-    };
+}
+export type TdMessageBoxShortcutMethod = ((message: TdMessageBoxOptions['message'], options?: TdMessageBoxOptions) => Promise<MessageBoxData>) & ((message: TdMessageBoxOptions['message'], title: TdMessageBoxOptions['title'], options?: TdMessageBoxOptions) => Promise<MessageBoxData>);
+export interface ITdMessageBoxFn {
+    /** Show a message box */
+    /** Show a message box */
+    (options: TdMessageBoxOptions): Promise<MessageBoxData>;
+    /** Show an alert message box */
+    alert: TdMessageBoxShortcutMethod;
+    /** Show a confirm message box */
+    confirm: TdMessageBoxShortcutMethod;
+    /** Show a prompt message box */
+    prompt: TdMessageBoxShortcutMethod;
+    /** Close current message box */
+    close(): void;
 }
 export {};

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

@@ -1,5 +1,5 @@
 import { IStyle } from '@type-dom/css-type';
-import { ITdMessageBoxConfig } from './td-message-box.interface';
+import { TdMessageBoxOptions } from './td-message-box.interface';
 export declare const $messageBox: {
     titleColor: string;
     width: string;
@@ -32,5 +32,5 @@ 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;
+export declare function useStyle(config?: TdMessageBoxOptions): void;
+export declare function useType(config?: TdMessageBoxOptions): void;

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

@@ -59,7 +59,7 @@ exports.$messageBoxOverlayStyle = {
 };
 exports.$messageBoxHeaderStyle = {
     // paddingBottom: getCssVar('messagebox-padding-primary');
-    paddingBottom: exports.$messageBox.paddingPrimary
+    paddingBottom: exports.$messageBox.paddingPrimary,
 };
 const $messageCloseSize = td_message_style_1.$message.closeSize;
 exports.$messageBoxHeaderCloseStyle = {
@@ -108,7 +108,7 @@ exports.$messageBoxContainerStyle = {
     gap: '12px',
 };
 exports.$messageBoxInputStyle = {
-    paddingTop: '12px'
+    paddingTop: '12px',
 };
 exports.$messageBoxStatusStyle = {
     fontSize: '24px',
@@ -153,7 +153,8 @@ function useStyle(config) {
         //     map.get($message, 'close-size')
         // )
         // );
-        exports.$messageBoxHeaderStyle.paddingRight = parseInt(exports.$messageBox.paddingPrimary) + parseInt($messageCloseSize) + 'px';
+        exports.$messageBoxHeaderStyle.paddingRight =
+            parseInt(exports.$messageBox.paddingPrimary) + parseInt($messageCloseSize) + 'px';
     }
     if (config === null || config === void 0 ? void 0 : config.center) {
         exports.$messageBoxTitleStyle.display = 'flex';

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

@@ -0,0 +1,3 @@
+export declare const TdNotification: import("./td-notification.interface").Notify;
+export default TdNotification;
+export type * from './td-notification.interface';

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdNotification = void 0;
+const notify_1 = require("./notify");
+// export const ElNotification = withInstallFunction(Notify, '$notify')
+exports.TdNotification = notify_1.default;
+exports.default = exports.TdNotification;

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

@@ -0,0 +1,15 @@
+import type { NotificationOptions, Notify } from './td-notification.interface';
+import { TypeNode } from '@type-dom/framework';
+import './style/index';
+/**
+ * This function gets called when user click `x` button or press `esc` or the time reached its limitation.
+ * Emitted by transition@before-leave event so that we can fetch the current notification.offsetHeight, if this was called
+ * by @after-leave the DOM element will be removed from the page thus we can no longer fetch the offsetHeight.
+ * @param {String} id notification id to be closed
+ * @param {Position} position the positioning strategy
+ * @param {Function} userOnClose the callback called when close passed by user
+ */
+export declare function close(id: string, position: NotificationOptions['position'], userOnClose?: (vm: TypeNode) => void): void;
+export declare function closeAll(): void;
+declare const _default: Notify;
+export default _default;

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

@@ -0,0 +1,151 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.close = close;
+exports.closeAll = closeAll;
+const utils_1 = require("@type-dom/utils");
+const framework_1 = require("@type-dom/framework");
+const td_notification_class_1 = require("./td-notification.class");
+const td_notification_const_1 = require("./td-notification.const");
+require("./style/index");
+// This should be a queue but considering there were `non-autoclosable` notifications.
+const notifications = {
+    'top-left': [],
+    'top-right': [],
+    'bottom-left': [],
+    'bottom-right': [],
+};
+// the gap size between each notification
+const GAP_SIZE = 16;
+let seed = 1;
+const notify = function (options = {}) {
+    if (!utils_1.isClient)
+        return { close: () => undefined };
+    if ((0, utils_1.isString)(options) || (0, framework_1.isVNode)(options)) {
+        options = { message: options };
+    }
+    const position = (options === null || options === void 0 ? void 0 : options.position) || 'top-right';
+    let verticalOffset = options.offset || 0;
+    notifications[position].forEach(({ vm }) => {
+        var _a;
+        const realDom = (_a = vm.downRealElement) === null || _a === void 0 ? void 0 : _a.dom;
+        verticalOffset += ((realDom === null || realDom === void 0 ? void 0 : realDom.offsetHeight) || 0) + GAP_SIZE;
+    });
+    verticalOffset += GAP_SIZE;
+    const id = `notification_${seed++}`;
+    const userOnClose = options.onClose;
+    const props = Object.assign(Object.assign({}, options), { offset: verticalOffset, id, onClose: () => {
+            close(id, position, userOnClose);
+        } });
+    let appendTo = document.body;
+    if ((0, utils_1.isElement)(options.appendTo)) {
+        appendTo = options.appendTo;
+    }
+    else if ((0, utils_1.isString)(options.appendTo)) {
+        appendTo = document.querySelector(options.appendTo);
+    }
+    // should fallback to default value with a warning
+    if (!(0, utils_1.isElement)(appendTo)) {
+        (0, utils_1.debugWarn)('ElNotification', 'the appendTo option is not an HTMLElement. Falling back to document.body.');
+        appendTo = document.body;
+    }
+    const container = document.createElement('div');
+    // const vm = createVNode(
+    //   NotificationConstructor,
+    //   props,
+    //   isFunction(props.message)
+    //     ? props.message
+    //     : isVNode(props.message)
+    //     ? () => props.message
+    //     : null
+    // )
+    props.emits = {};
+    props.emits.destroy = () => {
+        // render(null, container)
+        // container.removeChild(container.firstElementChild!);
+        vm.unmount();
+    };
+    const vm = new td_notification_class_1.TdNotification(props);
+    // vm.appContext = isUndefined(context) ? notify._context : context
+    // vm.props.emits = {};
+    // clean notification element preventing mem leak
+    // vm.props.emits.destroy = () => {
+    //   // render(null, container)
+    //   // container.removeChild(container.firstElementChild!);
+    //   vm.unmount();
+    // }
+    // instances will remove this item when close function gets called. So we do not need to worry about it.
+    // render(vm, container)
+    vm.mount(container);
+    notifications[position].push({ vm });
+    appendTo.appendChild(container.firstElementChild);
+    return {
+        // instead of calling the onClose function directly, setting this value so that we can have the full lifecycle
+        // for out component, so that all closing steps will not be skipped.
+        close: () => {
+            var _a;
+            // ;(vm.component!.exposed as { visible: Ref<boolean> }).visible.value =
+            //   false
+            (_a = vm.visible) === null || _a === void 0 ? void 0 : _a.set(false);
+        },
+    };
+};
+td_notification_const_1.notificationTypes.forEach((type) => {
+    notify[type] = (options = {}) => {
+        if ((0, utils_1.isString)(options) || (0, framework_1.isVNode)(options)) {
+            options = {
+                message: options,
+            };
+        }
+        return notify(Object.assign(Object.assign({}, options), { type }));
+    };
+});
+/**
+ * This function gets called when user click `x` button or press `esc` or the time reached its limitation.
+ * Emitted by transition@before-leave event so that we can fetch the current notification.offsetHeight, if this was called
+ * by @after-leave the DOM element will be removed from the page thus we can no longer fetch the offsetHeight.
+ * @param {String} id notification id to be closed
+ * @param {Position} position the positioning strategy
+ * @param {Function} userOnClose the callback called when close passed by user
+ */
+function close(id, position, userOnClose) {
+    var _a;
+    // maybe we can store the index when inserting the vm to notification list.
+    const orientedNotifications = notifications[position];
+    const idx = orientedNotifications.findIndex(({ vm }) => { var _a; return ((_a = vm.props) === null || _a === void 0 ? void 0 : _a.id) === id; });
+    if (idx === -1)
+        return;
+    const { vm } = orientedNotifications[idx];
+    if (!vm)
+        return;
+    // calling user's on close function before notification gets removed from DOM.
+    userOnClose === null || userOnClose === void 0 ? void 0 : userOnClose(vm);
+    // note that this is called @before-leave, that's why we were able to fetch this property.
+    const removedHeight = (_a = vm.divRef.get()) === null || _a === void 0 ? void 0 : _a.offsetHeight;
+    const verticalPos = position === null || position === void 0 ? void 0 : position.split('-')[0];
+    orientedNotifications.splice(idx, 1);
+    const len = orientedNotifications.length;
+    if (len < 1)
+        return;
+    // starting from the removing item.
+    for (let i = idx; i < len; i++) {
+        // new position equals the current offsetTop minus removed height plus 16px(the gap size between each item)
+        const { divRef } = orientedNotifications[i].vm;
+        const pos = Number.parseInt(divRef.get().style[verticalPos], 10) -
+            removedHeight -
+            GAP_SIZE;
+        orientedNotifications[i].vm.props.offset = pos;
+    }
+}
+function closeAll() {
+    // loop through all directions, close them at once.
+    for (const orientedNotifications of Object.values(notifications)) {
+        orientedNotifications.forEach(({ vm }) => {
+            var _a;
+            // same as the previous close method, we'd like to make sure lifecycle gets handle properly.
+            (_a = vm.visible) === null || _a === void 0 ? void 0 : _a.set(false);
+        });
+    }
+}
+notify.closeAll = closeAll;
+// notify._context = null
+exports.default = notify;

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

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

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

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

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

@@ -0,0 +1,2 @@
+import '../../../../components/base/style';
+import '../../../../theme-chalk/notification.scss';

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

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

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

@@ -1,30 +1,12 @@
-import { Transition, TypeFragment, TypeNode } from '@type-dom/framework';
-import { INotificationPosition, ITdNotification, ITdNotificationConfig } from './td-notification.interface';
+import { TypeFragment } from '@type-dom/framework';
+import { Signal } from '@type-dom/signals';
+import { ITdNotification, NotificationProps } from './td-notification.interface';
 export declare class TdNotification extends TypeFragment implements ITdNotification {
     className: 'TdNotification';
-    content: Transition;
-    props: ITdNotificationConfig;
-    visible: boolean;
-    private notification;
-    private group;
-    private title;
-    private groupContent;
-    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;
-    destroy(root?: TypeNode): 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;
+    props: NotificationProps;
+    visible?: Signal<boolean>;
+    close?: () => void;
+    divRef: Signal<HTMLElement | undefined>;
+    constructor(params?: NotificationProps);
+    setup(): void;
 }