tanxin-ui 0.2.0

package/es/modal/src/modal.js

@@ -0,0 +1,455 @@
+import { defineComponent, ref, computed, watch, nextTick, onMounted, onBeforeUnmount, createVNode, Transition, withDirectives, vShow, resolveComponent, Fragment, mergeProps, isVNode, Teleport } from "vue";
+import { PropTypes } 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 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 "../../utils/components/icons/Close.js";
+import CloseOutline from "../../utils/components/icons/CloseOutline.js";
+import ArrowsMaximize from "../../utils/components/icons/ArrowsMaximize.js";
+import ArrowsMinimize from "../../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";
+import { getTransitionGroupProps } from "../../utils/transition.js";
+import { getLength, isClient, getLengthNumber } from "../../utils/common.js";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const messageItemProps = {
+  visible: PropTypes.bool.def(false),
+  resizable: PropTypes.bool.def(false),
+  fullscreen: PropTypes.bool.def(false),
+  center: PropTypes.bool.def(false),
+  loading: PropTypes.bool.def(false),
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).def(520),
+  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  closable: PropTypes.bool.def(true),
+  closeText: PropTypes.string,
+  title: PropTypes.string,
+  showMask: PropTypes.bool.def(true),
+  maskClosable: PropTypes.bool.def(true),
+  esc: PropTypes.bool.def(true),
+  cancelable: PropTypes.bool.def(true),
+  showFooter: PropTypes.bool.def(true),
+  bodyPadding: PropTypes.string,
+  cancelText: PropTypes.string.def("\u5173\u95ED"),
+  cancelType: PropTypes.oneOf(["primary", "success", "warning", "danger", "info", "default"]).def("default"),
+  cancelProps: {
+    type: Object,
+    default: () => ({})
+  },
+  okText: PropTypes.string.def("\u786E\u5B9A"),
+  okType: PropTypes.oneOf(["primary", "success", "warning", "danger", "info", "default"]).def("primary"),
+  okProps: {
+    type: Object,
+    default: () => ({})
+  },
+  draggable: PropTypes.bool.def(false),
+  sticky: PropTypes.bool.def(true),
+  stickyDistance: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).def(10),
+  resetPosition: PropTypes.bool.def(false)
+};
+let clickPosition = {
+  x: 0,
+  y: 0
+};
+var Modal = defineComponent({
+  name: "TModal",
+  components: {
+    TIcon,
+    CheckmarkCircle,
+    AlertCircle,
+    InformationCircle,
+    CloseCircle,
+    LoadingOutlined,
+    ArrowsMaximize,
+    ArrowsMinimize,
+    CloseOutline,
+    TButton
+  },
+  inheritAttrs: false,
+  props: messageItemProps,
+  emits: ["update:visible", "ok"],
+  setup(props, {
+    slots,
+    emit,
+    attrs
+  }) {
+    const {
+      prefixCls
+    } = useConfig("modal", props);
+    const visible = ref(props.visible);
+    const refDialog = ref();
+    const refHeader = ref();
+    const fullscreen = ref(props.fullscreen);
+    const classes = computed(() => {
+      return [[`${prefixCls.value}-container`], {
+        [`is-fullscreen`]: fullscreen.value,
+        [`is-center`]: props.center,
+        [`is-draggable`]: props.draggable && !fullscreen.value
+      }];
+    });
+    const styles = computed(() => {
+      const style = {};
+      if (props.width && !fullscreen.value) {
+        style[`width`] = getLength(props.width);
+        dialogPosition.value ? style[`max-width`] = "94%" : null;
+      }
+      if (props.height && !fullscreen.value) {
+        style[`height`] = getLength(props.height);
+      }
+      if (dialogPosition.value) {
+        style["left"] = `${dialogPosition.value.x}px`;
+        style["top"] = `${dialogPosition.value.y}px`;
+      }
+      return style;
+    });
+    const containerStyles = computed(() => {
+      const style = {};
+      if (props.width && !fullscreen.value) {
+        style[`width`] = dialogPosition.value ? "100%" : getLength(props.width);
+        style[`max-width`] = dialogPosition.value ? "100%" : "94%";
+      }
+      return style;
+    });
+    const bodyStyles = computed(() => {
+      const style = {};
+      if (props.bodyPadding) {
+        style[`--t-modal-body-padding`] = props.bodyPadding;
+      }
+      return style;
+    });
+    const maskClasses = computed(() => {
+      return [[`${prefixCls.value}-mask`], {
+        [`${prefixCls.value}-mask-disabled`]: !props.maskClosable
+      }];
+    });
+    watch(() => props.visible, () => {
+      visible.value = props.visible;
+    });
+    watch(() => props.loading, () => {
+      loading.value = props.loading;
+    });
+    watch(() => visible.value, () => {
+      if (!isClient)
+        return;
+      if (visible.value) {
+        nextTick(() => {
+          setTransformOrigin();
+        });
+        if (props.resetPosition)
+          dialogPosition.value = null;
+      } else
+        loading.value = false;
+      const hasScroll = originHasScroll(document.body);
+      if (visible.value)
+        handleAboutScrollbar(document.body, hasScroll, false);
+      else
+        handleAboutScrollbar(document.body, hasScroll, hasScroll);
+    });
+    const setTransformOrigin = () => {
+      if (!isClient)
+        return;
+      const scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
+      const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
+      const rect = refDialog.value.getBoundingClientRect();
+      const pos = {
+        left: rect.left + scrollLeft,
+        top: rect.top + scrollTop
+      };
+      const value = `${clickPosition.x - pos.left}px ${clickPosition.y - pos.top}px`;
+      const style = refDialog.value.style;
+      ["Webkit", "Moz", "Ms", "ms"].forEach((prefix) => {
+        style[`${prefix}TransformOrigin`] = value;
+      });
+      style[`transformOrigin`] = value;
+    };
+    const updateMousePosition = (event) => {
+      clickPosition = {
+        x: event.pageX,
+        y: event.pageY
+      };
+    };
+    const handleClose = () => {
+      visible.value = false;
+      emit("update:visible", false);
+    };
+    const handleKeyup = (event) => {
+      if (event.code == "Escape")
+        handleClose();
+    };
+    const mouseMoving = ref(false);
+    const dialogPosition = ref();
+    let mousePosition;
+    const handleMousedown = (event) => {
+      if (!isClient)
+        return;
+      if (!props.draggable || fullscreen.value)
+        return;
+      mouseMoving.value = true;
+      const rect = refDialog.value.getBoundingClientRect();
+      dialogPosition.value = {
+        x: rect.x,
+        y: rect.y,
+        width: rect.width,
+        height: rect.height
+      };
+      let e = event;
+      if (e.type == "touchstart")
+        e = event.touches[0];
+      mousePosition = {
+        x: e.clientX,
+        y: e.clientY
+      };
+      document.onselectstart = () => false;
+      document.addEventListener("mousemove", handleMousemove, true);
+      document.addEventListener("mouseup", handleMouseup, true);
+      document.addEventListener("touchmove", handleMousemove, true);
+      document.addEventListener("touchend", handleMouseup, true);
+    };
+    const stickyDistance = getLengthNumber(props.stickyDistance);
+    const handleMousemove = (event) => {
+      if (!isClient)
+        return;
+      if (!mouseMoving.value)
+        return;
+      let e = event;
+      if (e.type == "touchmove")
+        e = event.touches[0];
+      const diffX = e.clientX - mousePosition.x;
+      const diffY = e.clientY - mousePosition.y;
+      dialogPosition.value.x = dialogPosition.value.x + diffX;
+      dialogPosition.value.y = dialogPosition.value.y + diffY;
+      if (props.sticky) {
+        const clientWidth = document.documentElement.clientWidth;
+        const clientHeight = document.documentElement.clientHeight;
+        const dialogNext = {
+          x: dialogPosition.value.x + diffX,
+          y: dialogPosition.value.y + diffY
+        };
+        if (diffX < 0) {
+          if (dialogNext.x - 0 < stickyDistance) {
+            dialogPosition.value.x = 0;
+          }
+        } else if (diffX > 0) {
+          if (clientWidth - (dialogNext.x + dialogPosition.value.width) < stickyDistance) {
+            dialogPosition.value.x = clientWidth - dialogPosition.value.width;
+          }
+        }
+        if (diffY < 0) {
+          if (dialogNext.y - 0 < stickyDistance) {
+            dialogPosition.value.y = 0;
+          }
+        } else if (diffY > 0) {
+          if (clientHeight - (dialogNext.y + dialogPosition.value.height) < stickyDistance) {
+            dialogPosition.value.y = clientHeight - dialogPosition.value.height;
+          }
+        }
+      }
+      mousePosition = {
+        x: e.clientX,
+        y: e.clientY
+      };
+    };
+    const handleMouseup = () => {
+      if (!isClient)
+        return;
+      document.onselectstart = null;
+      mouseMoving.value = false;
+      document.removeEventListener("mousemove", handleMousemove, true);
+      document.removeEventListener("mouseup", handleMouseup, true);
+      document.removeEventListener("touchmove", handleMousemove, true);
+      document.removeEventListener("touchend", handleMouseup, true);
+    };
+    onMounted(() => {
+      if (!isClient)
+        return;
+      props.esc ? document.addEventListener("keyup", handleKeyup, true) : null;
+      document.addEventListener("click", updateMousePosition, true);
+      refHeader.value.addEventListener("mousedown", handleMousedown, true);
+      refHeader.value.addEventListener("touchstart", handleMousedown, {
+        capture: true,
+        passive: true
+      });
+    });
+    onBeforeUnmount(() => {
+      if (!isClient)
+        return;
+      props.esc ? document.removeEventListener("keyup", handleKeyup, true) : null;
+      document.removeEventListener("click", updateMousePosition, true);
+      refHeader.value.removeEventListener("mousedown", handleMousedown, true);
+      refHeader.value.removeEventListener("touchstart", handleMousedown, {
+        capture: true
+      });
+    });
+    const loading = ref(false);
+    const handleOk = () => {
+      if (props.loading) {
+        loading.value = true;
+      }
+      emit("ok");
+    };
+    let dialogPositionOld;
+    const handleFullscreen = () => {
+      if (!props.resizable)
+        return;
+      fullscreen.value = !fullscreen.value;
+      if (dialogPosition.value) {
+        if (fullscreen.value) {
+          dialogPositionOld = {
+            x: dialogPosition.value.x,
+            y: dialogPosition.value.y
+          };
+          dialogPosition.value.x = 0;
+          dialogPosition.value.y = 0;
+        } else if (dialogPositionOld) {
+          dialogPosition.value.x = dialogPositionOld.x;
+          dialogPosition.value.y = dialogPositionOld.y;
+        }
+      }
+    };
+    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 = slots.cancelText ? slots.cancelText() : props.cancelText;
+      const closeElement = slots.closeText ? slots.closeText() : props.closeText ? props.closeText : createVNode(resolveComponent("t-icon"), null, {
+        default: () => [createVNode(CloseOutline, null, null)]
+      });
+      const okElement = slots.okText ? slots.okText() : props.okText;
+      const titleElement = slots.title ? slots.title() : props.title;
+      const fullscreenElement = computed(() => {
+        return createVNode(resolveComponent("t-icon"), {
+          "class": "fullscreen-icon"
+        }, {
+          default: () => [fullscreen.value ? createVNode(ArrowsMinimize, null, null) : createVNode(ArrowsMaximize, null, null)]
+        });
+      });
+      const footerElement = slots.footer ? slots.footer() : createVNode(Fragment, null, [props.cancelable ? 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]
+      })]);
+      return createVNode(Teleport, {
+        "to": "body"
+      }, {
+        default: () => [createVNode("div", {
+          "class": `${prefixCls.value}`
+        }, [maskElement, createVNode("div", {
+          "class": classes.value,
+          "style": containerStyles.value
+        }, [createVNode(Transition, transitionProps, {
+          default: () => {
+            var _a;
+            return [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`
+            }, [createVNode("div", {
+              "ref": refHeader,
+              "class": `${prefixCls.value}-content-header`,
+              "onDblclick": handleFullscreen
+            }, [createVNode("div", {
+              "class": `${prefixCls.value}-title`
+            }, [titleElement]), createVNode("div", {
+              "class": `${prefixCls.value}-content-header-buttons`
+            }, [props.resizable ? createVNode(resolveComponent("t-button"), {
+              "class": `${prefixCls.value}-button`,
+              "show-wave": false,
+              "onClick": handleFullscreen
+            }, {
+              default: () => [fullscreenElement.value]
+            }) : null, props.closable ? createVNode(resolveComponent("t-button"), {
+              "class": `${prefixCls.value}-button`,
+              "show-wave": false,
+              "onClick": handleClose
+            }, _isSlot(closeElement) ? closeElement : {
+              default: () => [closeElement]
+            }) : null])]), createVNode("div", {
+              "class": `${prefixCls.value}-content-body`,
+              "style": bodyStyles.value
+            }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]), props.showFooter ? createVNode("div", {
+              "class": `${prefixCls.value}-content-footer`
+            }, [footerElement]) : null])]), [[vShow, visible.value]])];
+          }
+        })])])]
+      });
+    };
+    return {
+      render
+    };
+  },
+  render() {
+    return this.render();
+  }
+});
+export { Modal as default, messageItemProps };

package/es/notification/index.d.ts

@@ -0,0 +1,11 @@
+declare const TNotification: {
+    (): void;
+    success(options: import("./src/notification").NotificationItemParams, duration?: number): any;
+    info(options: import("./src/notification").NotificationItemParams, duration?: number): any;
+    warning(options: import("./src/notification").NotificationItemParams, duration?: number): any;
+    danger(options: import("./src/notification").NotificationItemParams, duration?: number): any;
+    config(options: Partial<Partial<import("./src/notification").NotificationListProps>>): void;
+    clear(): void;
+    close(messageId: string): any;
+} & import("@vue/runtime-core").Plugin;
+export { TNotification };

package/es/notification/index.js

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

package/es/notification/src/notification-item.d.ts

@@ -0,0 +1,150 @@
+import type { PropType } from 'vue';
+export declare type NotificationItemType = 'success' | 'info' | 'warning' | 'danger';
+export declare const notificationItemProps: {
+    type: {
+        type: PropType<NotificationItemType>;
+        default: string;
+    };
+    placement: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    closable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    duration: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    showIcon: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    title: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+    content: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+    closeText: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+    messageId: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+    colorful: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    onClose: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
+        default: (...args: any[]) => any;
+    };
+};
+declare const _default: import("vue").DefineComponent<{
+    type: {
+        type: PropType<NotificationItemType>;
+        default: string;
+    };
+    placement: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    closable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    duration: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    showIcon: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    title: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+    content: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+    closeText: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+    messageId: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+    colorful: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    onClose: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
+        default: (...args: any[]) => any;
+    };
+}, {
+    render: () => JSX.Element;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "afterClose"[], "afterClose", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    type: {
+        type: PropType<NotificationItemType>;
+        default: string;
+    };
+    placement: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    closable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    duration: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    showIcon: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    title: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+    content: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+    closeText: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+    messageId: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+    colorful: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    onClose: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
+        default: (...args: any[]) => any;
+    };
+}>> & {
+    onAfterClose?: (...args: any[]) => any;
+}, {
+    type: NotificationItemType;
+    title: string;
+    onClose: (...args: any[]) => any;
+    closable: boolean;
+    showIcon: boolean;
+    content: string;
+    closeText: string;
+    duration: number;
+    placement: string;
+    messageId: string;
+    colorful: boolean;
+}>;
+export default _default;