tanxin-ui 0.2.0

package/lib/drawer/src/drawer.d.ts

@@ -0,0 +1,302 @@
+import type { PropType } from 'vue';
+import type { ButtonProps } from '../../button/src/button';
+export declare const drawerProps: {
+    placement: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    visible: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    resizable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    fullscreen: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    loading: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    width: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    height: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    closable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    closeText: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+    title: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+    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;
+    };
+    showFooter: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    cancelable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    cancelText: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    cancelType: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    cancelProps: {
+        type: PropType<ButtonProps>;
+        default: () => {};
+    };
+    okText: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    okType: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    okProps: {
+        type: PropType<ButtonProps>;
+        default: () => {};
+    };
+};
+declare const _default: import("vue").DefineComponent<{
+    placement: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    visible: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    resizable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    fullscreen: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    loading: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    width: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    height: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    closable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    closeText: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+    title: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+    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;
+    };
+    showFooter: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    cancelable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    cancelText: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    cancelType: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    cancelProps: {
+        type: PropType<ButtonProps>;
+        default: () => {};
+    };
+    okText: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    okType: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    okProps: {
+        type: PropType<ButtonProps>;
+        default: () => {};
+    };
+}, {
+    render: () => JSX.Element;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:visible" | "ok")[], "update:visible" | "ok", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    placement: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    visible: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    resizable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    fullscreen: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    loading: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    width: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    height: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    closable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    closeText: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+    title: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+    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;
+    };
+    showFooter: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    cancelable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    cancelText: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    cancelType: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    cancelProps: {
+        type: PropType<ButtonProps>;
+        default: () => {};
+    };
+    okText: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    okType: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    okProps: {
+        type: PropType<ButtonProps>;
+        default: () => {};
+    };
+}>> & {
+    "onUpdate:visible"?: (...args: any[]) => any;
+    onOk?: (...args: any[]) => any;
+}, {
+    title: string;
+    width: string | number;
+    height: string | number;
+    closable: boolean;
+    closeText: string;
+    visible: boolean;
+    loading: boolean;
+    placement: string;
+    showFooter: boolean;
+    resizable: boolean;
+    fullscreen: boolean;
+    showMask: boolean;
+    maskClosable: boolean;
+    esc: boolean;
+    cancelable: boolean;
+    cancelText: string;
+    cancelType: string;
+    cancelProps: ButtonProps;
+    okText: string;
+    okType: string;
+    okProps: ButtonProps;
+}>;
+export default _default;

package/lib/drawer/src/drawer.js

@@ -0,0 +1,349 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+var vue = require("vue");
+var type = require("../../utils/type.js");
+var useConfig = require("../../utils/hooks/useConfig.js");
+var index = require("../../icon/index.js");
+var index$1 = require("../../button/index.js");
+var ScrollbarWidth = require("../../utils/ScrollbarWidth2.js");
+require("../../utils/components/icons/Checkmark.js");
+require("../../utils/components/icons/CheckmarkCircle.js");
+require("../../utils/components/icons/CheckmarkSharp.js");
+require("../../utils/components/icons/CheckmarkCircleOutline.js");
+require("../../utils/components/icons/AlertCircle.js");
+require("../../utils/components/icons/AlertCircleOutline.js");
+require("../../utils/components/icons/InformationCircle.js");
+require("../../utils/components/icons/InformationCircleOutline.js");
+var CloseCircle = require("../../utils/components/icons/CloseCircle.js");
+require("../../utils/components/icons/CloseCircleOutline.js");
+require("../../utils/components/icons/HelpCircleSharp.js");
+require("../../utils/components/icons/EyeOffOutline.js");
+require("../../utils/components/icons/EyeOutline.js");
+var LoadingOutlined = require("../../utils/components/icons/LoadingOutlined.js");
+require("../../utils/components/icons/Close.js");
+var CloseOutline = require("../../utils/components/icons/CloseOutline.js");
+var ArrowsMaximize = require("../../utils/components/icons/ArrowsMaximize.js");
+var ArrowsMinimize = require("../../utils/components/icons/ArrowsMinimize.js");
+require("../../utils/components/icons/AddOutline.js");
+require("../../utils/components/icons/RemoveOutline.js");
+require("../../utils/components/icons/ChevronUp.js");
+require("../../utils/components/icons/ChevronDown.js");
+require("../../utils/components/icons/ChevronForward.js");
+require("../../utils/components/icons/ChevronLeft24Filled.js");
+require("../../utils/components/icons/ChevronRight24Filled.js");
+require("../../utils/components/icons/ChevronDoubleLeft16Filled.js");
+require("../../utils/components/icons/ChevronDoubleRight16Filled.js");
+require("../../utils/components/icons/CheckmarkOutline.js");
+require("../../utils/components/icons/IosCheckmark.js");
+require("../../utils/components/icons/Empty.js");
+require("../../utils/components/icons/Bars.js");
+require("../../utils/components/icons/ArrowUpCircle.js");
+require("../../utils/components/icons/ArrowUp.js");
+require("../../utils/components/icons/ArrowForward.js");
+require("../../utils/components/icons/TimeOutline.js");
+require("../../utils/components/icons/CalendarClearOutline.js");
+require("../../utils/components/icons/KeyboardArrowLeftRound.js");
+require("../../utils/components/icons/KeyboardArrowRightRound.js");
+require("../../utils/components/icons/KeyboardDoubleArrowLeftRound.js");
+require("../../utils/components/icons/KeyboardDoubleArrowRightRound.js");
+require("../../utils/components/icons/MenuFoldOutlined.js");
+require("../../utils/components/icons/IosArrowDown.js");
+require("../../utils/components/icons/IosArrowBack.js");
+require("../../utils/components/icons/IosArrowForward.js");
+require("../../utils/components/icons/ImageSharp.js");
+require("../../utils/components/icons/Pause.js");
+require("../../utils/components/icons/Refresh.js");
+require("../../utils/components/icons/QuestionCircle24Regular.js");
+require("../../utils/components/icons/CloudUploadOutline.js");
+require("../../utils/components/icons/UploadFileFilled.js");
+require("../../utils/components/icons/EllipsisHorizontal.js");
+require("../../utils/components/icons/ArrowNext24Filled.js");
+require("../../utils/components/icons/ArrowPrevious24Filled.js");
+require("../../utils/components/icons/ArrowDropDownSharp.js");
+require("../../utils/components/icons/ArrowDropUpSharp.js");
+require("../../utils/components/icons/ArrowForwardIosFilled.js");
+var transition = require("../../utils/transition.js");
+var common = require("../../utils/common.js");
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
+}
+const drawerProps = {
+  placement: type.PropTypes.oneOf(["left", "right", "top", "bottom"]).def("right"),
+  visible: type.PropTypes.bool.def(false),
+  resizable: type.PropTypes.bool.def(false),
+  fullscreen: type.PropTypes.bool.def(false),
+  loading: type.PropTypes.bool.def(false),
+  width: type.PropTypes.oneOfType([type.PropTypes.string, type.PropTypes.number]).def(520),
+  height: type.PropTypes.oneOfType([type.PropTypes.string, type.PropTypes.number]).def(300),
+  closable: type.PropTypes.bool.def(true),
+  closeText: type.PropTypes.string,
+  title: type.PropTypes.string,
+  showMask: type.PropTypes.bool.def(true),
+  maskClosable: type.PropTypes.bool.def(true),
+  esc: type.PropTypes.bool.def(true),
+  showFooter: type.PropTypes.bool.def(true),
+  cancelable: type.PropTypes.bool.def(true),
+  cancelText: type.PropTypes.string.def("\u5173\u95ED"),
+  cancelType: type.PropTypes.oneOf(["primary", "success", "warning", "danger", "info", "default"]).def("default"),
+  cancelProps: {
+    type: Object,
+    default: () => ({})
+  },
+  okText: type.PropTypes.string.def("\u786E\u5B9A"),
+  okType: type.PropTypes.oneOf(["primary", "success", "warning", "danger", "info", "default"]).def("primary"),
+  okProps: {
+    type: Object,
+    default: () => ({})
+  }
+};
+var Drawer = vue.defineComponent({
+  name: "TDrawer",
+  components: {
+    TIcon: index.TIcon,
+    CloseCircle: CloseCircle["default"],
+    LoadingOutlined: LoadingOutlined["default"],
+    ArrowsMaximize: ArrowsMaximize["default"],
+    ArrowsMinimize: ArrowsMinimize["default"],
+    CloseOutline: CloseOutline["default"],
+    TButton: index$1.TButton
+  },
+  inheritAttrs: false,
+  props: drawerProps,
+  emits: ["update:visible", "ok"],
+  setup(props, {
+    slots,
+    emit,
+    attrs
+  }) {
+    const {
+      prefixCls
+    } = useConfig.useConfig("drawer", props);
+    const visible = vue.ref(props.visible);
+    const refDialog = vue.ref();
+    const refHeader = vue.ref();
+    const fullscreen = vue.ref(props.fullscreen);
+    const classes = vue.computed(() => {
+      return [[`${prefixCls.value}-container`], {
+        [`is-fullscreen`]: fullscreen.value
+      }];
+    });
+    const styles = vue.computed(() => {
+      const style = {};
+      switch (props.placement) {
+        case "left":
+          style[`top`] = 0;
+          style[`left`] = 0;
+          if (props.width && !fullscreen.value) {
+            style[`width`] = common.getLength(props.width);
+            style[`height`] = "100vh";
+          }
+          break;
+        case "top":
+          style[`top`] = 0;
+          style[`left`] = 0;
+          if (props.height && !fullscreen.value) {
+            style[`height`] = common.getLength(props.height);
+            style[`width`] = "100%";
+          }
+          break;
+        case "bottom":
+          style[`bottom`] = 0;
+          style[`left`] = 0;
+          if (props.height && !fullscreen.value) {
+            style[`height`] = common.getLength(props.height);
+            style[`width`] = "100%";
+          }
+          break;
+        default:
+          style[`top`] = 0;
+          style[`right`] = 0;
+          if (props.width && !fullscreen.value) {
+            style[`width`] = common.getLength(props.width);
+            style[`height`] = "100vh";
+          }
+      }
+      return style;
+    });
+    const containerStyles = vue.computed(() => {
+      const style = {};
+      if (props.width && !fullscreen.value)
+        ;
+      return style;
+    });
+    const maskClasses = vue.computed(() => {
+      return [[`${prefixCls.value}-mask`], {
+        [`${prefixCls.value}-mask-disabled`]: !props.maskClosable
+      }];
+    });
+    vue.watch(() => props.visible, () => {
+      visible.value = props.visible;
+    });
+    vue.watch(() => visible.value, () => {
+      if (!visible.value)
+        loading.value = false;
+      setTimeout(() => {
+        handleAboutScrollbar();
+      }, 100);
+    });
+    const handleAboutScrollbar = () => {
+      if (!common.isClient)
+        return;
+      if (common.isMobile()) {
+        document.body.style.touchAction = visible.value ? "none" : null;
+        document.body.style.width = visible.value ? "100%" : null;
+      }
+      const hasScroll = common.hasScrollbar();
+      document.body.style.overflowY = visible.value ? "hidden" : null;
+      if (hasScroll) {
+        document.body.style.paddingRight = visible.value ? `${ScrollbarWidth.getScrollbarWidth()}px` : null;
+      }
+    };
+    const handleClose = () => {
+      visible.value = false;
+      emit("update:visible", false);
+    };
+    const handleKeyup = (event) => {
+      if (event.code == "Escape")
+        handleClose();
+    };
+    const dialogPosition = vue.ref();
+    vue.onMounted(() => {
+      if (!common.isClient)
+        return;
+      props.esc ? document.addEventListener("keyup", handleKeyup, true) : null;
+      handleAboutScrollbar();
+    });
+    vue.onBeforeUnmount(() => {
+      if (!common.isClient)
+        return;
+      props.esc ? document.removeEventListener("keyup", handleKeyup, true) : null;
+    });
+    const loading = vue.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 getTransitionName = () => {
+      if (props.placement == "top")
+        return "move-up";
+      else if (props.placement == "bottom")
+        return "move-down";
+      else
+        return `move-${props.placement}`;
+    };
+    const render = () => {
+      const maskTransitionProps = transition.getTransitionGroupProps("fade");
+      const transitionProps = transition.getTransitionGroupProps(getTransitionName());
+      const maskElement = props.showMask ? vue.createVNode(vue.Transition, maskTransitionProps, {
+        default: () => [vue.withDirectives(vue.createVNode("div", {
+          "class": maskClasses.value,
+          "onClick": props.maskClosable ? handleClose : null
+        }, null), [[vue.vShow, visible.value]])]
+      }) : null;
+      const cancelElement = slots.cancelText ? slots.cancelText() : props.cancelText;
+      const closeElement = slots.closeText ? slots.closeText() : props.closeText ? props.closeText : vue.createVNode(vue.resolveComponent("t-icon"), null, {
+        default: () => [vue.createVNode(CloseOutline["default"], null, null)]
+      });
+      const okElement = slots.okText ? slots.okText() : props.okText;
+      const titleElement = slots.title ? slots.title() : props.title;
+      const fullscreenElement = vue.computed(() => {
+        return vue.createVNode(vue.resolveComponent("t-icon"), {
+          "class": "fullscreen-icon"
+        }, {
+          default: () => [fullscreen.value ? vue.createVNode(ArrowsMinimize["default"], null, null) : vue.createVNode(ArrowsMaximize["default"], null, null)]
+        });
+      });
+      const footerElement = slots.footer ? slots.footer() : vue.createVNode(vue.Fragment, null, [props.cancelable ? vue.createVNode(vue.resolveComponent("t-button"), vue.mergeProps({
+        "type": props.cancelType
+      }, props.cancelProps, {
+        "onClick": handleClose
+      }), _isSlot(cancelElement) ? cancelElement : {
+        default: () => [cancelElement]
+      }) : null, vue.createVNode(vue.resolveComponent("t-button"), vue.mergeProps({
+        "type": props.okType
+      }, props.okProps, {
+        "loading": loading.value,
+        "onClick": handleOk
+      }), _isSlot(okElement) ? okElement : {
+        default: () => [okElement]
+      })]);
+      return vue.createVNode(vue.Teleport, {
+        "to": "body"
+      }, {
+        default: () => [vue.createVNode("div", {
+          "class": `${prefixCls.value}`
+        }, [maskElement, vue.createVNode("div", {
+          "class": classes.value,
+          "style": containerStyles.value
+        }, [vue.createVNode(vue.Transition, transitionProps, {
+          default: () => {
+            var _a;
+            return [vue.withDirectives(vue.createVNode("div", vue.mergeProps({
+              "class": `${prefixCls.value}-dialog`,
+              "style": styles.value
+            }, attrs, {
+              "ref": refDialog,
+              "aria-modal": "true",
+              "role": "dialog"
+            }), [vue.createVNode("div", {
+              "class": `${prefixCls.value}-content`
+            }, [titleElement || props.fullscreen || props.closable ? vue.createVNode("div", {
+              "ref": refHeader,
+              "class": `${prefixCls.value}-content-header`,
+              "onDblclick": handleFullscreen
+            }, [vue.createVNode("div", {
+              "class": `${prefixCls.value}-title`
+            }, [titleElement]), vue.createVNode("div", {
+              "class": `${prefixCls.value}-content-header-buttons`
+            }, [props.resizable ? vue.createVNode(vue.resolveComponent("t-button"), {
+              "class": `${prefixCls.value}-button`,
+              "show-wave": false,
+              "onClick": handleFullscreen
+            }, {
+              default: () => [fullscreenElement.value]
+            }) : null, props.closable ? vue.createVNode(vue.resolveComponent("t-button"), {
+              "class": `${prefixCls.value}-button`,
+              "show-wave": false,
+              "onClick": handleClose
+            }, _isSlot(closeElement) ? closeElement : {
+              default: () => [closeElement]
+            }) : null])]) : null, vue.createVNode("div", {
+              "class": `${prefixCls.value}-content-body`
+            }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]), props.showFooter ? vue.createVNode("div", {
+              "class": `${prefixCls.value}-content-footer`
+            }, [footerElement]) : null])]), [[vue.vShow, visible.value]])];
+          }
+        })])])]
+      });
+    };
+    return {
+      render
+    };
+  },
+  render() {
+    return this.render();
+  }
+});
+exports["default"] = Drawer;
+exports.drawerProps = drawerProps;