tanxin-ui 0.2.0

package/es/message-box/src/message-box-item.d.ts

@@ -0,0 +1,310 @@
+import type { PropType, CSSProperties } from 'vue';
+import type { VueNode } from '../../utils/type';
+import type { ButtonProps } from '../../button/src/button';
+declare type MousePosition = {
+    x: number;
+    y: number;
+    width?: number;
+    height?: number;
+};
+export declare type MessageBoxItemType = 'success' | 'info' | 'warning' | 'danger' | 'confirm';
+export declare const messageBoxItemProps: {
+    type: {
+        type: PropType<MessageBoxItemType>;
+        default: string;
+    };
+    visible: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    showIcon: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    icon: PropType<VueNode | (() => VueNode)>;
+    center: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    styles: PropType<CSSProperties>;
+    loading: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    width: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    title: PropType<VueNode | (() => VueNode)>;
+    content: PropType<VueNode | (() => VueNode)>;
+    footer: PropType<VueNode | (() => VueNode)>;
+    showMask: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    maskClosable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    esc: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    cancelable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    cancelText: {
+        type: PropType<VueNode | (() => VueNode)>;
+        default: string;
+    };
+    cancelType: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    cancelProps: {
+        type: PropType<ButtonProps>;
+        default: () => {};
+    };
+    okText: {
+        type: PropType<VueNode | (() => VueNode)>;
+        default: string;
+    };
+    okType: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    okProps: {
+        type: PropType<ButtonProps>;
+        default: {};
+    };
+    onBoxClose: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
+        default: (...args: any[]) => any;
+    };
+    onClose: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
+        default: (...args: any[]) => any;
+    };
+    onOk: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
+        default: (...args: any[]) => any;
+    };
+    originPosition: {
+        type: PropType<MousePosition>;
+        default: () => {
+            x: number;
+            y: number;
+        };
+    };
+};
+declare const _default: import("vue").DefineComponent<{
+    type: {
+        type: PropType<MessageBoxItemType>;
+        default: string;
+    };
+    visible: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    showIcon: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    icon: PropType<VueNode | (() => VueNode)>;
+    center: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    styles: PropType<CSSProperties>;
+    loading: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    width: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    title: PropType<VueNode | (() => VueNode)>;
+    content: PropType<VueNode | (() => VueNode)>;
+    footer: PropType<VueNode | (() => VueNode)>;
+    showMask: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    maskClosable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    esc: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    cancelable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    cancelText: {
+        type: PropType<VueNode | (() => VueNode)>;
+        default: string;
+    };
+    cancelType: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    cancelProps: {
+        type: PropType<ButtonProps>;
+        default: () => {};
+    };
+    okText: {
+        type: PropType<VueNode | (() => VueNode)>;
+        default: string;
+    };
+    okType: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    okProps: {
+        type: PropType<ButtonProps>;
+        default: {};
+    };
+    onBoxClose: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
+        default: (...args: any[]) => any;
+    };
+    onClose: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
+        default: (...args: any[]) => any;
+    };
+    onOk: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
+        default: (...args: any[]) => any;
+    };
+    originPosition: {
+        type: PropType<MousePosition>;
+        default: () => {
+            x: number;
+            y: number;
+        };
+    };
+}, {
+    render: () => JSX.Element;
+    close: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    type: {
+        type: PropType<MessageBoxItemType>;
+        default: string;
+    };
+    visible: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    showIcon: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    icon: PropType<VueNode | (() => VueNode)>;
+    center: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    styles: PropType<CSSProperties>;
+    loading: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    width: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    title: PropType<VueNode | (() => VueNode)>;
+    content: PropType<VueNode | (() => VueNode)>;
+    footer: PropType<VueNode | (() => VueNode)>;
+    showMask: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    maskClosable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    esc: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    cancelable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    cancelText: {
+        type: PropType<VueNode | (() => VueNode)>;
+        default: string;
+    };
+    cancelType: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    cancelProps: {
+        type: PropType<ButtonProps>;
+        default: () => {};
+    };
+    okText: {
+        type: PropType<VueNode | (() => VueNode)>;
+        default: string;
+    };
+    okType: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    okProps: {
+        type: PropType<ButtonProps>;
+        default: {};
+    };
+    onBoxClose: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
+        default: (...args: any[]) => any;
+    };
+    onClose: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
+        default: (...args: any[]) => any;
+    };
+    onOk: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
+        default: (...args: any[]) => any;
+    };
+    originPosition: {
+        type: PropType<MousePosition>;
+        default: () => {
+            x: number;
+            y: number;
+        };
+    };
+}>>, {
+    type: MessageBoxItemType;
+    width: string | number;
+    onClose: (...args: any[]) => any;
+    showIcon: boolean;
+    center: boolean;
+    visible: boolean;
+    loading: boolean;
+    onOk: (...args: any[]) => any;
+    showMask: boolean;
+    maskClosable: boolean;
+    esc: boolean;
+    cancelable: boolean;
+    cancelText: VueNode | (() => VueNode);
+    cancelType: string;
+    cancelProps: ButtonProps;
+    okText: VueNode | (() => VueNode);
+    okType: string;
+    okProps: ButtonProps;
+    onBoxClose: (...args: any[]) => any;
+    originPosition: MousePosition;
+}>;
+export default _default;

package/es/message-box/src/message-box-item.js

@@ -0,0 +1,298 @@
+import { createVNode, defineComponent, ref, computed, onMounted, onBeforeUnmount, Transition, withDirectives, vShow, Fragment, resolveComponent, mergeProps, isVNode } from "vue";
+import { PropTypes, StrOrVNode, isFunction, isString } from "../../utils/type.js";
+import { useConfig } from "../../utils/hooks/useConfig.js";
+import { TIcon } from "../../icon/index.js";
+import { TButton } from "../../button/index.js";
+import { originHasScroll, handleAboutScrollbar } from "../../utils/scrollbarWidth.js";
+import "../../utils/components/icons/Checkmark.js";
+import "../../utils/components/icons/CheckmarkCircle.js";
+import "../../utils/components/icons/CheckmarkSharp.js";
+import CheckmarkCircleOutline from "../../utils/components/icons/CheckmarkCircleOutline.js";
+import "../../utils/components/icons/AlertCircle.js";
+import AlertCircleOutline from "../../utils/components/icons/AlertCircleOutline.js";
+import "../../utils/components/icons/InformationCircle.js";
+import InformationCircleOutline from "../../utils/components/icons/InformationCircleOutline.js";
+import "../../utils/components/icons/CloseCircle.js";
+import CloseCircleOutline from "../../utils/components/icons/CloseCircleOutline.js";
+import "../../utils/components/icons/HelpCircleSharp.js";
+import "../../utils/components/icons/EyeOffOutline.js";
+import "../../utils/components/icons/EyeOutline.js";
+import "../../utils/components/icons/LoadingOutlined.js";
+import "../../utils/components/icons/Close.js";
+import "../../utils/components/icons/CloseOutline.js";
+import "../../utils/components/icons/ArrowsMaximize.js";
+import "../../utils/components/icons/ArrowsMinimize.js";
+import "../../utils/components/icons/AddOutline.js";
+import "../../utils/components/icons/RemoveOutline.js";
+import "../../utils/components/icons/ChevronUp.js";
+import "../../utils/components/icons/ChevronDown.js";
+import "../../utils/components/icons/ChevronForward.js";
+import "../../utils/components/icons/ChevronLeft24Filled.js";
+import "../../utils/components/icons/ChevronRight24Filled.js";
+import "../../utils/components/icons/ChevronDoubleLeft16Filled.js";
+import "../../utils/components/icons/ChevronDoubleRight16Filled.js";
+import "../../utils/components/icons/CheckmarkOutline.js";
+import "../../utils/components/icons/IosCheckmark.js";
+import "../../utils/components/icons/Empty.js";
+import "../../utils/components/icons/Bars.js";
+import "../../utils/components/icons/ArrowUpCircle.js";
+import "../../utils/components/icons/ArrowUp.js";
+import "../../utils/components/icons/ArrowForward.js";
+import "../../utils/components/icons/TimeOutline.js";
+import "../../utils/components/icons/CalendarClearOutline.js";
+import "../../utils/components/icons/KeyboardArrowLeftRound.js";
+import "../../utils/components/icons/KeyboardArrowRightRound.js";
+import "../../utils/components/icons/KeyboardDoubleArrowLeftRound.js";
+import "../../utils/components/icons/KeyboardDoubleArrowRightRound.js";
+import "../../utils/components/icons/MenuFoldOutlined.js";
+import "../../utils/components/icons/IosArrowDown.js";
+import "../../utils/components/icons/IosArrowBack.js";
+import "../../utils/components/icons/IosArrowForward.js";
+import "../../utils/components/icons/ImageSharp.js";
+import "../../utils/components/icons/Pause.js";
+import "../../utils/components/icons/Refresh.js";
+import QuestionCircle24Regular from "../../utils/components/icons/QuestionCircle24Regular.js";
+import "../../utils/components/icons/CloudUploadOutline.js";
+import "../../utils/components/icons/UploadFileFilled.js";
+import "../../utils/components/icons/EllipsisHorizontal.js";
+import "../../utils/components/icons/ArrowNext24Filled.js";
+import "../../utils/components/icons/ArrowPrevious24Filled.js";
+import "../../utils/components/icons/ArrowDropDownSharp.js";
+import "../../utils/components/icons/ArrowDropUpSharp.js";
+import "../../utils/components/icons/ArrowForwardIosFilled.js";
+import { getTransitionGroupProps } from "../../utils/transition.js";
+import { isClient, getLengthNumber, getLength } from "../../utils/common.js";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const messageBoxItemProps = {
+  type: {
+    type: String,
+    default: "info"
+  },
+  visible: PropTypes.bool.def(true),
+  showIcon: PropTypes.bool.def(true),
+  icon: [Object, Function],
+  center: PropTypes.bool.def(false),
+  styles: Object,
+  loading: PropTypes.bool.def(false),
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).def(420),
+  title: StrOrVNode,
+  content: StrOrVNode,
+  footer: StrOrVNode,
+  showMask: PropTypes.bool.def(true),
+  maskClosable: PropTypes.bool.def(false),
+  esc: PropTypes.bool.def(false),
+  cancelable: PropTypes.bool.def(true),
+  cancelText: {
+    type: StrOrVNode,
+    default: "\u53D6\u6D88"
+  },
+  cancelType: PropTypes.oneOf(["primary", "success", "warning", "danger", "info", "default"]).def("default"),
+  cancelProps: {
+    type: Object,
+    default: () => ({})
+  },
+  okText: {
+    type: StrOrVNode,
+    default: "\u786E\u5B9A"
+  },
+  okType: PropTypes.oneOf(["primary", "success", "warning", "danger", "info", "default"]).def("primary"),
+  okProps: {
+    type: Object,
+    default: {}
+  },
+  onBoxClose: PropTypes.func,
+  onClose: PropTypes.func,
+  onOk: PropTypes.func,
+  originPosition: {
+    type: Object,
+    default: () => ({
+      x: 0,
+      y: 0
+    })
+  }
+};
+const leftIcons = {
+  success: createVNode(CheckmarkCircleOutline, null, null),
+  info: createVNode(InformationCircleOutline, null, null),
+  confirm: createVNode(QuestionCircle24Regular, null, null),
+  warning: createVNode(AlertCircleOutline, null, null),
+  danger: createVNode(CloseCircleOutline, null, null)
+};
+var TMessageBoxItem = defineComponent({
+  name: "TMessageBoxItem",
+  components: {
+    TIcon,
+    TButton,
+    CheckmarkCircleOutline,
+    AlertCircleOutline,
+    InformationCircleOutline,
+    CloseCircleOutline,
+    QuestionCircle24Regular
+  },
+  inheritAttrs: false,
+  props: messageBoxItemProps,
+  setup(props, {
+    attrs
+  }) {
+    const {
+      prefixCls
+    } = useConfig("msgbox", props);
+    const refDialog = ref();
+    const hasScroll = ref(false);
+    const classes = computed(() => {
+      return [[`${prefixCls.value}-container`], {
+        [`is-center`]: props.center,
+        [`${prefixCls.value}-${props.type}`]: props.type
+      }];
+    });
+    const styles = computed(() => {
+      const style = props.styles || {};
+      if (!isClient)
+        return style;
+      const scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
+      const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
+      const rect = {
+        x: (document.body.clientWidth - getLengthNumber(props.width)) / 2,
+        y: 100
+      };
+      const pos = {
+        x: rect.x + scrollLeft,
+        y: rect.y + scrollTop
+      };
+      console.log("pos", pos);
+      style["transform-origin"] = `${props.originPosition.x - pos.x}px ${props.originPosition.y - pos.y}px`;
+      return style;
+    });
+    const containerStyles = computed(() => {
+      const style = {};
+      if (props.width) {
+        style[`width`] = getLength(props.width);
+      }
+      return style;
+    });
+    const visible = ref(props.visible);
+    const maskClasses = computed(() => {
+      return [[`${prefixCls.value}-mask`], {
+        [`${prefixCls.value}-mask-disabled`]: !props.maskClosable
+      }];
+    });
+    const handleClose = () => {
+      if (!isClient)
+        return;
+      visible.value = false;
+      handleAboutScrollbar(document.body, hasScroll.value, hasScroll.value);
+      props.esc ? document.removeEventListener("keyup", handleKeyup, true) : null;
+      props.onBoxClose();
+    };
+    const handleKeyup = (event) => {
+      if (event.code == "Escape")
+        handleClose();
+    };
+    onMounted(() => {
+      if (!isClient)
+        return;
+      loading.value = false;
+      props.esc ? document.addEventListener("keyup", handleKeyup, true) : null;
+      hasScroll.value = originHasScroll(document.body);
+      handleAboutScrollbar(document.body, hasScroll.value, false);
+    });
+    onBeforeUnmount(() => {
+      if (!isClient)
+        return;
+      handleAboutScrollbar(document.body, hasScroll.value, hasScroll.value);
+      props.esc ? document.removeEventListener("keyup", handleKeyup, true) : null;
+    });
+    const loading = ref(false);
+    const handleOk = () => {
+      if (props.loading) {
+        loading.value = true;
+      }
+      if (props.onOk)
+        props.onOk();
+      if (!props.loading)
+        handleClose();
+    };
+    const getContent = (content) => {
+      if (isFunction(content))
+        return content();
+      else
+        return content;
+    };
+    const render = () => {
+      const maskTransitionProps = getTransitionGroupProps("fade");
+      const transitionProps = getTransitionGroupProps("zoom");
+      const maskElement = props.showMask ? createVNode(Transition, maskTransitionProps, {
+        default: () => [withDirectives(createVNode("div", {
+          "class": maskClasses.value,
+          "onClick": props.maskClosable ? handleClose : null
+        }, null), [[vShow, visible.value]])]
+      }) : null;
+      const cancelElement = getContent(props.cancelText);
+      const okElement = getContent(props.okText);
+      const titleElement = getContent(props.title);
+      const contentElement = getContent(props.content);
+      const footerElement = props.footer ? getContent(props.footer) : createVNode(Fragment, null, [props.type == "confirm" ? createVNode(resolveComponent("t-button"), mergeProps({
+        "type": props.cancelType
+      }, props.cancelProps, {
+        "onClick": handleClose
+      }), _isSlot(cancelElement) ? cancelElement : {
+        default: () => [cancelElement]
+      }) : null, createVNode(resolveComponent("t-button"), mergeProps({
+        "type": props.okType
+      }, props.okProps, {
+        "loading": loading.value,
+        "onClick": handleOk
+      }), _isSlot(okElement) ? okElement : {
+        default: () => [okElement]
+      })]);
+      const getIcon = () => {
+        if (!props.icon)
+          return null;
+        if (isFunction(props.icon))
+          return props.icon();
+        if (!isString(props.icon))
+          return props.icon;
+      };
+      const leftIcon = props.showIcon ? createVNode("div", {
+        "class": `${prefixCls.value}-icon`
+      }, [createVNode(resolveComponent("t-icon"), null, {
+        default: () => [getIcon() ? getIcon() : leftIcons[props.type]]
+      })]) : null;
+      return createVNode("div", {
+        "class": `${prefixCls.value}`
+      }, [maskElement, createVNode("div", {
+        "class": classes.value,
+        "style": containerStyles.value
+      }, [createVNode(Transition, transitionProps, {
+        default: () => [withDirectives(createVNode("div", mergeProps({
+          "class": `${prefixCls.value}-dialog`,
+          "style": styles.value
+        }, attrs, {
+          "ref": refDialog,
+          "aria-modal": "true",
+          "role": "dialog"
+        }), [createVNode("div", {
+          "class": `${prefixCls.value}-content`
+        }, [leftIcon, createVNode("div", {
+          "class": `${prefixCls.value}-body`
+        }, [titleElement ? createVNode("div", {
+          "class": `${prefixCls.value}-body-title`
+        }, [titleElement]) : null, createVNode("div", {
+          "class": `${prefixCls.value}-body-content`
+        }, [contentElement])])]), createVNode("div", {
+          "class": `${prefixCls.value}-footer`
+        }, [footerElement])]), [[vShow, visible.value]])]
+      })])]);
+    };
+    return {
+      render,
+      close: handleClose
+    };
+  },
+  render() {
+    return this.render();
+  }
+});
+export { TMessageBoxItem as default, messageBoxItemProps };

package/es/message-box/src/message-box.d.ts

@@ -0,0 +1,16 @@
+import type { ExtractPropTypes } from 'vue';
+import type { messageBoxItemProps } from './message-box-item';
+export declare type MessageBoxItemProps = ExtractPropTypes<typeof messageBoxItemProps>;
+export declare type MessageBoxItemParams = Partial<MessageBoxItemProps>;
+export declare type MessageBoxFn = (options?: MessageBoxItemParams) => {
+    close: Function;
+};
+export interface MessageBox {
+    success: MessageBoxFn;
+    warning: MessageBoxFn;
+    info: MessageBoxFn;
+    danger: MessageBoxFn;
+    confirm: MessageBoxFn;
+}
+declare const _default: MessageBox;
+export default _default;

package/es/message-box/src/message-box.js

@@ -0,0 +1,60 @@
+import { ref, createApp, h } from "vue";
+import TMessageBoxItem from "./message-box-item.js";
+import { isClient } from "../../utils/common.js";
+const clickPosition = ref({
+  x: 0,
+  y: 0
+});
+const updateMousePosition = (event) => {
+  console.log("event", event);
+  clickPosition.value = {
+    x: event.pageX,
+    y: event.pageY
+  };
+  console.log("box", clickPosition.value);
+};
+if (isClient)
+  document.addEventListener("click", updateMousePosition, true);
+const refMessageBoxItem = ref();
+let divEle;
+const handleClose = () => {
+  setTimeout(() => {
+    document.body.removeChild(divEle);
+  }, 300);
+};
+const newMessage = (type, options) => {
+  const params = Object.assign(options, {
+    type,
+    ref: refMessageBoxItem,
+    originPosition: clickPosition.value
+  });
+  params.onBoxClose = handleClose;
+  const app = createApp({
+    render() {
+      return h(TMessageBoxItem, params);
+    }
+  });
+  divEle = document.createElement("div");
+  divEle.setAttribute("id", "msgbox-container");
+  document.body.appendChild(divEle);
+  app.mount("#msgbox-container");
+  return refMessageBoxItem.value;
+};
+const messageBox = () => {
+};
+messageBox["success"] = (options) => {
+  return newMessage("success", options);
+};
+messageBox["info"] = (options) => {
+  return newMessage("info", options);
+};
+messageBox["warning"] = (options) => {
+  return newMessage("warning", options);
+};
+messageBox["danger"] = (options) => {
+  return newMessage("danger", options);
+};
+messageBox["confirm"] = (options) => {
+  return newMessage("confirm", options);
+};
+export { messageBox as default };