@type-dom/ui 0.1.0 → 0.1.1

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

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.$messageIconStyle = exports.$messageCloseBtnStyle = exports.$messageBadgeStyle = exports.$messageContentStyle = exports.$messageStyle = exports.$message = void 0;
-exports.useStyle = useStyle;
-exports.useType = useType;
+exports.useMessageStyle = useMessageStyle;
+exports.useMessageType = useMessageType;
 const var_1 = require("../../../styles/var");
 exports.$message = {
     // bgColor: getCssVar('color', 'info', 'light-9'),
@@ -14,7 +14,7 @@ exports.$message = {
     // closeIconColor: getCssVar('text-color-placeholder'),
     closeIconColor: var_1.$textColor.placeholder,
     // closeHoverColor: getCssVar('text-color-secondary'),
-    closeHoverColor: var_1.$textColor.secondary
+    closeHoverColor: var_1.$textColor.secondary,
 };
 exports.$messageStyle = {
     width: 'fit-content',
@@ -41,31 +41,31 @@ exports.$messageStyle = {
     display: 'flex',
     alignItems: 'center',
     gap: '8px',
-    zIndex: 9999,
+    zIndex: 99999,
 };
 exports.$messageContentStyle = {
     padding: 0,
     fontSize: '14px',
     lineHeight: 1,
-    margin: 0 // add by me  P 标签默认有 margin
+    margin: 0, // add by me  P 标签默认有 margin
 };
 exports.$messageBadgeStyle = {
     position: 'absolute',
     top: '-8px',
-    right: '-8px'
+    right: '-8px',
 };
 exports.$messageCloseBtnStyle = {
     cursor: 'pointer',
     // color: getCssVar('message', 'close-icon-color'),
     color: exports.$message.closeIconColor,
     // font-size: getCssVar('message', 'close-size'),
-    fontSize: exports.$message.closeSize
+    fontSize: exports.$message.closeSize,
 };
-function useStyle(config) {
+function useMessageStyle(config) {
     if (config === null || config === void 0 ? void 0 : config.center) {
         exports.$messageStyle.justifyContent = 'center';
     }
-    useType(config);
+    useMessageType(config);
     if (config === null || config === void 0 ? void 0 : config.plain) {
         // background-color: getCssVar('bg-color', 'overlay');
         exports.$messageStyle.backgroundColor = var_1.$bgColor.overlay;
@@ -81,7 +81,7 @@ function useStyle(config) {
     }
 }
 exports.$messageIconStyle = {};
-function useType(config) {
+function useMessageType(config) {
     const type = (config === null || config === void 0 ? void 0 : config.type) || 'info';
     //    @include css-var-from-global(
     //         ('message', 'bg-color'),

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

@@ -0,0 +1,5 @@
+import './style/index';
+declare const _MessageBox: import("./td-message-box.interface").ITdMessageBoxFn;
+export default _MessageBox;
+export declare const TdMessageBox: import("./td-message-box.interface").ITdMessageBoxFn;
+export type * from './td-message-box.interface';

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdMessageBox = void 0;
+const message_box_1 = require("./message-box");
+require("./style/index");
+const _MessageBox = message_box_1.default;
+exports.default = _MessageBox;
+exports.TdMessageBox = _MessageBox;

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

@@ -0,0 +1,3 @@
+import type { ITdMessageBoxFn } from './td-message-box.interface';
+declare const _default: ITdMessageBoxFn;
+export default _default;

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

@@ -0,0 +1,182 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const framework_1 = require("@type-dom/framework");
+const utils_1 = require("@type-dom/utils");
+const td_message_box_class_1 = require("./td-message-box.class");
+// component default merge props & data
+const messageInstance = new Map();
+const getAppendToElement = (props) => {
+    let appendTo = document.body;
+    if (props.appendTo) {
+        if ((0, utils_1.isString)(props.appendTo)) {
+            appendTo = document.querySelector(props.appendTo);
+        }
+        if ((0, utils_1.isElement)(props.appendTo)) {
+            appendTo = props.appendTo;
+        }
+        // should fallback to default value with a warning
+        if (!(0, utils_1.isElement)(appendTo)) {
+            (0, utils_1.debugWarn)('TdMessageBox', 'the appendTo option is not an HTMLElement. Falling back to document.body.');
+            appendTo = document.body;
+        }
+    }
+    return appendTo;
+};
+const initInstance = (props, container
+// appContext: AppContext | null = null
+) => {
+    // const vnode = createVNode(
+    //   MessageBoxConstructor,
+    //   props,
+    //   isFunction(props.message) || isVNode(props.message)
+    //     ? {
+    //       default: isFunction(props.message)
+    //         ? props.message
+    //         : () => props.message,
+    //     }
+    //     : null
+    // )
+    // vnode.appContext = appContext
+    // render(vnode, container)
+    const node = new td_message_box_class_1.TdMessageBox(props);
+    node.mount(container);
+    getAppendToElement(props).appendChild(container.firstElementChild);
+    return node;
+};
+const genContainer = () => {
+    return document.createElement('div');
+};
+const showMessage = (options) => {
+    var _a;
+    console.warn('showMessage options is ', options);
+    const container = genContainer();
+    // Adding destruct method.
+    // when transition leaves emitting `vanish` evt. so that we can do the clean job.
+    options.emits = {};
+    options.emits.vanish = () => {
+        console.warn('showMessage options emits vanish ');
+        // not sure if this causes mem leak, need proof to verify that.
+        // maybe calling out like 1000 msg-box then close them all.
+        // render(null, container) // todo
+        vm.unmount();
+        messageInstance.delete(vm); // Remove vm to avoid mem leak.
+        // here we were suppose to call document.body.removeChild(container.firstElementChild)
+        // but render(null, container) did that job for us. so that we do not call that directly
+    };
+    options.emits.action = (action) => {
+        const currentMsg = messageInstance.get(vm);
+        let resolve;
+        if (options.showInput) {
+            resolve = { value: vm.inputValue, action };
+        }
+        else {
+            resolve = action;
+        }
+        if (options.callback) {
+            options.callback(resolve, instance);
+        }
+        else {
+            if (action === 'cancel' || action === 'close') {
+                if (options.distinguishCancelAndClose && action !== 'cancel') {
+                    currentMsg.reject('close');
+                }
+                else {
+                    currentMsg.reject('cancel');
+                }
+            }
+            else {
+                currentMsg.resolve(resolve);
+            }
+        }
+    };
+    const instance = initInstance(options, container);
+    // This is how we use message box programmatically.
+    // Maybe consider releasing a template version?
+    // get component instance like v2.
+    const vm = instance;
+    // <
+    //   {
+    //     visible: boolean
+    //     doClose: () => void
+    //   } & MessageBoxState
+    // >
+    for (const prop in options) {
+        if ((0, utils_1.hasOwn)(options, prop) && !(0, utils_1.hasOwn)(vm.props, prop)) {
+            vm[prop] = options[prop];
+        }
+    }
+    // change visibility after everything is settled
+    (_a = vm.visible) === null || _a === void 0 ? void 0 : _a.set(true);
+    return vm;
+};
+function MessageBox(options
+// appContext: AppContext | null = null
+) {
+    console.warn('MessageBox options is ', options);
+    if (!utils_1.isClient)
+        return Promise.reject();
+    let callback;
+    if ((0, utils_1.isString)(options) || (0, framework_1.isVNode)(options)) {
+        options = {
+            message: options,
+        };
+    }
+    else {
+        callback = options.callback;
+    }
+    return new Promise((resolve, reject) => {
+        const vm = showMessage(options
+        // appContext ?? (MessageBox as ITdMessageBoxFn)._context
+        );
+        // collect this vm in order to handle upcoming events.
+        messageInstance.set(vm, {
+            options,
+            callback,
+            resolve,
+            reject,
+        });
+        console.warn('messageInstance is ', messageInstance);
+    });
+}
+const MESSAGE_BOX_VARIANTS = ['alert', 'confirm', 'prompt'];
+const MESSAGE_BOX_DEFAULT_OPTS = {
+    alert: { closeOnPressEscape: false, closeOnClickModal: false },
+    confirm: { showCancelButton: true },
+    prompt: { showCancelButton: true, showInput: true },
+};
+MESSAGE_BOX_VARIANTS.forEach((boxType) => {
+    MessageBox[boxType] = messageBoxFactory(boxType);
+});
+function messageBoxFactory(boxType) {
+    // console.warn('messageBoxFactory boxType is ', boxType);
+    return (message, title, options
+    // appContext?: AppContext | null
+    ) => {
+        let titleOrOpts = '';
+        if ((0, utils_1.isObject)(title)) {
+            options = title;
+            titleOrOpts = '';
+        }
+        else if ((0, utils_1.isUndefined)(title)) {
+            titleOrOpts = '';
+        }
+        else {
+            titleOrOpts = title;
+        }
+        return MessageBox(Object.assign(Object.assign({ title: titleOrOpts, message, type: '' }, MESSAGE_BOX_DEFAULT_OPTS[boxType]), options, {
+            boxType,
+        })
+        // appContext
+        );
+    };
+}
+MessageBox.close = () => {
+    // instance.setupInstall.doClose()
+    // instance.setupInstall.state.visible = false
+    messageInstance.forEach((_, vm) => {
+        vm.doClose();
+    });
+    messageInstance.clear();
+};
+// ;(MessageBox as ITdMessageBoxFn)._context = null
+exports.default = MessageBox;

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

@@ -0,0 +1,5 @@
+import '@element-plus/components/base/style/css';
+import '@element-plus/theme-chalk/el-message-box.css';
+import '@element-plus/components/button/style/css';
+import '@element-plus/components/input/style/css';
+import '@element-plus/components/overlay/style/css';

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

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

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

@@ -0,0 +1,5 @@
+import '../../../../components/base/style';
+import '../../../../theme-chalk/message-box.scss';
+import '../../../../components/basic/td-button/style';
+import '../../../../components/form/td-input/style';
+import '../../../../components/feedback/td-overlay/style';

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("../../../../components/base/style");
+require("../../../../theme-chalk/message-box.scss");
+require("../../../../components/basic/td-button/style");
+require("../../../../components/form/td-input/style");
+require("../../../../components/feedback/td-overlay/style");

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

@@ -1,42 +1,11 @@
-import { Transition, TypeFragment } from '@type-dom/framework';
-import { IAction, ITdMessageBox, ITdMessageBoxConfig } from './td-message-box.interface';
+import { TypeFragment } from '@type-dom/framework';
+import { Signal } from '@type-dom/signals';
+import { ITdMessageBox, MessageBoxProps } from './td-message-box.interface';
+import './style/index';
 export declare class TdMessageBox extends TypeFragment implements ITdMessageBox {
     className: 'TdMessageBox';
-    content: Transition;
-    props: ITdMessageBoxConfig;
-    private overlay;
-    private dialog;
-    private messageBox;
-    private header?;
-    private title?;
-    private visible;
-    private state;
-    private msgContent;
-    private container;
-    private inputDiv?;
-    private btns;
-    private cancelBtn?;
-    private confirmBtn;
-    private msgDiv?;
-    private input?;
-    private overlayEvent;
-    private errorMsg?;
-    private onDraggable;
-    private offDraggable;
-    constructor(params?: ITdMessageBoxConfig);
-    mounted(): void;
-    beforeDestroy(): void;
-    static info(params?: ITdMessageBoxConfig): TdMessageBox;
-    static alert(message: string, title?: string, params?: ITdMessageBoxConfig): void;
-    static confirm(message: string, title?: string, params?: ITdMessageBoxConfig): TdMessageBox;
-    static prompt(message: string, title?: string, params?: ITdMessageBoxConfig): TdMessageBox;
-    doClose(): void;
-    handleWrapperClick: () => void;
-    handleInputEnter: (e: KeyboardEvent) => void;
-    handleAction(action: IAction): void;
-    validate(): boolean;
-    getInputElement(): HTMLTextAreaElement | HTMLInputElement | undefined;
-    handleClose(): void;
-    onCloseRequested(): void;
-    getAppendToElement(props?: ITdMessageBoxConfig): HTMLElement;
+    props: MessageBoxProps;
+    visible?: Signal<boolean>;
+    constructor(params?: MessageBoxProps);
+    setup(): void;
 }