tanxin-ui 0.2.0

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

@@ -0,0 +1,171 @@
+import { createVNode, defineComponent, ref, onMounted, onUnmounted, resolveComponent, computed, mergeProps } from "vue";
+import { PropTypes } from "../../utils/type.js";
+import { useConfig } from "../../utils/hooks/useConfig.js";
+import { TIcon } from "../../icon/index.js";
+import "../../utils/components/icons/Checkmark.js";
+import CheckmarkCircle from "../../utils/components/icons/CheckmarkCircle.js";
+import "../../utils/components/icons/CheckmarkSharp.js";
+import "../../utils/components/icons/CheckmarkCircleOutline.js";
+import AlertCircle from "../../utils/components/icons/AlertCircle.js";
+import "../../utils/components/icons/AlertCircleOutline.js";
+import InformationCircle from "../../utils/components/icons/InformationCircle.js";
+import "../../utils/components/icons/InformationCircleOutline.js";
+import CloseCircle from "../../utils/components/icons/CloseCircle.js";
+import "../../utils/components/icons/CloseCircleOutline.js";
+import "../../utils/components/icons/HelpCircleSharp.js";
+import "../../utils/components/icons/EyeOffOutline.js";
+import "../../utils/components/icons/EyeOutline.js";
+import LoadingOutlined from "../../utils/components/icons/LoadingOutlined.js";
+import Close from "../../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 "../../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";
+const messageItemProps = {
+  type: {
+    type: String,
+    default: "info"
+  },
+  closable: PropTypes.bool.def(false),
+  duration: PropTypes.number.def(2),
+  showIcon: PropTypes.bool.def(true),
+  content: PropTypes.string,
+  closeText: PropTypes.string,
+  messageId: PropTypes.string,
+  colorful: PropTypes.bool.def(false),
+  onClose: PropTypes.func
+};
+const leftIcons = {
+  success: createVNode(CheckmarkCircle, null, null),
+  info: createVNode(InformationCircle, null, null),
+  warning: createVNode(AlertCircle, null, null),
+  danger: createVNode(CloseCircle, null, null),
+  loading: createVNode(LoadingOutlined, null, null)
+};
+var TMessageItem = defineComponent({
+  name: "TMessageItem",
+  components: {
+    TIcon,
+    CheckmarkCircle,
+    AlertCircle,
+    InformationCircle,
+    CloseCircle,
+    LoadingOutlined,
+    Close
+  },
+  inheritAttrs: false,
+  props: messageItemProps,
+  emits: ["afterClose"],
+  setup(props, {
+    slots,
+    emit,
+    attrs
+  }) {
+    const {
+      prefixCls
+    } = useConfig("message", props);
+    const closed = ref(false);
+    const showIcon = ref(props.showIcon);
+    const content = slots.content ? slots.content() : props.content;
+    const timerId = ref(null);
+    const clearCloseTimer = () => {
+      if (timerId.value) {
+        clearTimeout(timerId.value);
+        timerId.value = null;
+      }
+    };
+    const handleClose = () => {
+      var _a;
+      closed.value = true;
+      clearCloseTimer();
+      (_a = props.onClose) == null ? void 0 : _a.call(props);
+      emit("afterClose", props.messageId);
+    };
+    onMounted(() => {
+      if (props.duration == 0)
+        return;
+      timerId.value = setTimeout(() => {
+        handleClose();
+      }, props.duration * 1e3);
+    });
+    onUnmounted(() => {
+      clearCloseTimer();
+    });
+    const iconProps = {
+      spin: props.type == "loading"
+    };
+    const leftIcon = showIcon.value ? createVNode("div", {
+      "class": `${prefixCls.value}-icon`
+    }, [createVNode(resolveComponent("t-icon"), iconProps, {
+      default: () => [slots.icon ? slots.icon() : leftIcons[props.type]]
+    })]) : null;
+    const classes = computed(() => {
+      return [[`${prefixCls.value}`], {
+        [`${prefixCls.value}-${props.type}`]: props.type,
+        [`is-colorful`]: props.colorful
+      }];
+    });
+    const closeIcon = props.closable ? createVNode("button", {
+      "type": "button",
+      "onClick": handleClose,
+      "class": `${prefixCls.value}-close-btn`
+    }, [slots.closeText ? slots.closeText() : props.closeText ? props.closeText : createVNode(resolveComponent("t-icon"), null, {
+      default: () => [createVNode(Close, null, null)]
+    })]) : null;
+    const render = () => {
+      return createVNode("div", {
+        "class": `${prefixCls.value}-wrapper`
+      }, [createVNode("div", mergeProps(attrs, {
+        "class": classes.value
+      }), [leftIcon, createVNode("div", {
+        "class": `${prefixCls.value}-body`
+      }, [createVNode("div", {
+        "class": `${prefixCls.value}-body-content`
+      }, [content])]), closeIcon])]);
+    };
+    return {
+      render
+    };
+  },
+  render() {
+    return this.render();
+  }
+});
+export { TMessageItem as default, messageItemProps };

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

@@ -0,0 +1,126 @@
+import type { ExtractPropTypes } from 'vue';
+import type { messageItemProps } from './message-item';
+export declare const messageListProps: {
+    closable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    showIcon: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    closeText: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+    duration: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    colorful: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    maxCount: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    };
+    single: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    top: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+};
+declare type MessageItemProps = ExtractPropTypes<typeof messageItemProps>;
+declare const _default: import("vue").DefineComponent<{
+    closable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    showIcon: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    closeText: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+    duration: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    colorful: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    maxCount: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    };
+    single: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    top: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+}, {
+    createMsg: (options: Partial<MessageItemProps>) => string;
+    removeMsg: (messageId: String) => void;
+    clear: () => void;
+    render: () => JSX.Element;
+    prefixCls: import("vue").ComputedRef<string>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    closable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    showIcon: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    closeText: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+    duration: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    colorful: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    maxCount: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    };
+    single: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    top: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+}>>, {
+    top: string | number;
+    closable: boolean;
+    showIcon: boolean;
+    closeText: string;
+    single: boolean;
+    duration: number;
+    colorful: boolean;
+    maxCount: number;
+}>;
+export default _default;

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

@@ -0,0 +1,99 @@
+import { defineComponent, TransitionGroup, reactive, createVNode, Fragment, resolveComponent, mergeProps, isVNode } from "vue";
+import { PropTypes } from "../../utils/type.js";
+import { TIcon } from "../../icon/index.js";
+import TMessageItem from "./message-item.js";
+import { getTransitionGroupProps } from "../../utils/transition.js";
+import { useConfig } from "../../utils/hooks/useConfig.js";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const messageListProps = {
+  closable: PropTypes.bool.def(false),
+  showIcon: PropTypes.bool.def(true),
+  closeText: PropTypes.string,
+  duration: PropTypes.number.def(2),
+  colorful: PropTypes.bool.def(false),
+  maxCount: PropTypes.number,
+  single: PropTypes.bool.def(false),
+  top: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).def(16)
+};
+var MessageList = defineComponent({
+  name: "TMessageList",
+  components: {
+    TIcon,
+    TMessageItem,
+    TransitionGroup
+  },
+  inheritAttrs: false,
+  props: messageListProps,
+  setup(props) {
+    const {
+      prefixCls
+    } = useConfig("message", props);
+    let seed = 0;
+    const messageArr = reactive([]);
+    const render = () => {
+      let _slot;
+      const transitionProps = getTransitionGroupProps("move-up");
+      console.log("transitionProps=", transitionProps);
+      return createVNode(Fragment, null, [createVNode(resolveComponent("transition-group"), {
+        "tag": "div",
+        "name": "message-animation",
+        "class": `${prefixCls.value}-inner`
+      }, _isSlot(_slot = messageArr.map((item) => {
+        return createVNode(TMessageItem, mergeProps({
+          "key": `${item.messageId}`
+        }, item, {
+          "onAfterClose": removeMsg
+        }), null);
+      })) ? _slot : {
+        default: () => [_slot]
+      })]);
+    };
+    const createMsg = (options) => {
+      const params = Object.assign({
+        closable: props.closable,
+        showIcon: props.showIcon,
+        closeText: props.closeText,
+        duration: props.duration,
+        colorful: props.colorful
+      }, options);
+      params.messageId = `msg-${seed++}`;
+      if (props.single) {
+        if (messageArr.length > 0)
+          return;
+        else
+          messageArr.push(params);
+      } else {
+        messageArr.push(params);
+        if (messageArr.length >= props.maxCount)
+          messageArr.shift();
+      }
+      return params.messageId;
+    };
+    const removeMsg = (messageId) => {
+      for (let i = 0; i < messageArr.length; i++) {
+        if (messageArr[i].messageId === messageId) {
+          messageArr.splice(i, 1);
+          break;
+        }
+      }
+    };
+    const clear = () => {
+      for (let i = messageArr.length; i >= 0; i--) {
+        messageArr.splice(i, 1);
+      }
+    };
+    return {
+      createMsg,
+      removeMsg,
+      clear,
+      render,
+      prefixCls
+    };
+  },
+  render() {
+    return this.render();
+  }
+});
+export { MessageList as default, messageListProps };

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

@@ -0,0 +1,26 @@
+import type { ExtractPropTypes } from 'vue';
+import type { messageListProps } from './message-list';
+import type { messageItemProps } from './message-item';
+export declare type MessageListProps = ExtractPropTypes<typeof messageListProps>;
+export declare type MessageListParams = Partial<MessageListProps>;
+export declare type MessageItemProps = ExtractPropTypes<typeof messageItemProps>;
+export declare type MessageItemParams = Partial<MessageItemProps> | String;
+export declare type MessageFn = (options?: MessageItemProps) => string;
+export interface Message {
+    success: MessageFn;
+    warning: MessageFn;
+    info: MessageFn;
+    danger: MessageFn;
+}
+declare const message: {
+    (): void;
+    success(options: MessageItemParams, duration?: number): string;
+    info(options: MessageItemParams, duration?: number): string;
+    warning(options: MessageItemParams, duration?: number): string;
+    danger(options: MessageItemParams, duration?: number): string;
+    loading(options: MessageItemParams, duration?: number): string;
+    config(options: Partial<MessageListParams>): void;
+    clear(): any;
+    close(messageId: string): any;
+};
+export default message;

package/es/message/src/message.js

@@ -0,0 +1,63 @@
+import { ref, createApp, h } from "vue";
+import MessageList from "./message-list.js";
+import { isString } from "../../utils/type.js";
+import { getLength } from "../../utils/common.js";
+let listInstance;
+let messageConfig;
+const refMessageList = ref();
+let divEle;
+const getInstance = (props = {}) => {
+  const app = createApp({
+    render() {
+      return h(MessageList, Object.assign(props, { ref: refMessageList }));
+    }
+  });
+  const top = props.top ? getLength(props.top) : "16px";
+  divEle = document.createElement("div");
+  divEle.setAttribute("id", "msg-container");
+  divEle.setAttribute("style", `top: ${top}`);
+  document.body.appendChild(divEle);
+  app.mount("#msg-container");
+  divEle.setAttribute("class", `${refMessageList.value.prefixCls}-list`);
+  return refMessageList.value;
+};
+const newMessage = (type, options, duration = void 0) => {
+  const params = isString(options) ? { content: options } : options;
+  params.type = type;
+  if (duration != void 0)
+    params.duration = duration;
+  listInstance = listInstance || getInstance(messageConfig);
+  return listInstance.createMsg(params);
+};
+const message = () => {
+};
+message["success"] = (options, duration = void 0) => {
+  return newMessage("success", options, duration);
+};
+message["info"] = (options, duration = void 0) => {
+  return newMessage("info", options, duration);
+};
+message["warning"] = (options, duration = void 0) => {
+  return newMessage("warning", options, duration);
+};
+message["danger"] = (options, duration = void 0) => {
+  return newMessage("danger", options, duration);
+};
+message["loading"] = (options, duration = void 0) => {
+  return newMessage("loading", options, duration);
+};
+message["config"] = (options) => {
+  messageConfig = options;
+  if (refMessageList.value) {
+    listInstance = null;
+    document.body.removeChild(divEle);
+    refMessageList.value = null;
+  }
+};
+message["clear"] = () => {
+  return listInstance.clear();
+};
+message["close"] = (messageId) => {
+  return listInstance.removeMsg(messageId);
+};
+export { message as default };

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

@@ -0,0 +1,2 @@
+declare const TMessageBox: import("./src/message-box").MessageBox & import("@vue/runtime-core").Plugin;
+export { TMessageBox };

package/es/message-box/index.js

@@ -0,0 +1,4 @@
+import { withInstallFunction } from "../utils/type.js";
+import messageBox from "./src/message-box.js";
+const TMessageBox = withInstallFunction(messageBox, "$messageBox");
+export { TMessageBox };