bkui-vue 0.0.1-beta.56 → 0.0.1-beta.57

package/dist/index.esm.js

@@ -9275,69 +9275,18 @@ var Component$m = defineComponent({
 });
 const BkCollaspe = withInstall(Component$m);
 const propsMixin$1 = {
-  isShow: {
-    type: Boolean,
-    default: false
-  },
-  width: {
-    type: [Number, String],
-    default: "50%"
-  },
-  height: {
-    type: [Number, String],
-    default: "50%"
-  },
-  customClass: {
-    type: [Array, String],
-    default: ""
-  },
-  scrollable: {
-    type: Boolean,
-    default: true
-  },
-  showMask: {
-    type: Boolean,
-    default: true
-  },
-  closeIcon: {
-    type: Boolean,
-    default: true
-  },
-  escClose: {
-    type: Boolean,
-    default: true
-  },
-  maskClose: {
-    type: Boolean,
-    default: true
-  },
-  fullscreen: {
-    type: Boolean,
-    default: false
-  },
-  size: {
-    type: String,
-    default: "normal",
-    validator: (value) => {
-      const dialogSize = ["normal", "small", "medium", "large"];
-      if (dialogSize.indexOf(value) < 0) {
-        console.error(`dialogSize property is not valid: '${value}',\u3010${dialogSize.join(" | ")}\u3011`);
-        return false;
-      }
-      return true;
-    }
-  },
-  renderDirective: {
-    type: String,
-    default: "show",
-    validator: (value) => {
-      if (["show", "if"].indexOf(value) < 0) {
-        console.error(`type render-directive is not valid: '${value}'`);
-        return false;
-      }
-      return true;
-    }
-  }
+  isShow: PropTypes.bool.def(false),
+  width: PropTypes.string || PropTypes.number,
+  height: PropTypes.string || PropTypes.number,
+  customClass: PropTypes.string || PropTypes.array,
+  scrollable: PropTypes.bool.def(true),
+  showMask: PropTypes.bool.def(true),
+  closeIcon: PropTypes.bool.def(true),
+  escClose: PropTypes.bool.def(true),
+  maskClose: PropTypes.bool.def(true),
+  fullscreen: PropTypes.bool.def(false),
+  size: PropTypes.commonType(["normal", "small", "medium", "large"], "size").def("normal"),
+  draggable: PropTypes.bool.def(true)
 };
 var Component$l = defineComponent({
   name: "Modal",
@@ -9389,7 +9338,7 @@ var Component$l = defineComponent({
   render() {
     var _a, _b, _c, _d, _e, _f, _g, _h, _i;
     return createVNode("div", {
-      "class": ["bk-modal-wrapper", this.size, this.customClass, this.fullscreen ? "bk-model-fullscreen" : ""],
+      "class": ["bk-modal-wrapper", this.customClass],
       "style": this.compStyle
     }, [this.isShow ? createVNode("div", {
       "class": "bk-modal-body"
@@ -9413,96 +9362,119 @@ var Component$k = defineComponent({
     BkButton
   },
   props: __spreadProps(__spreadValues({}, propsMixin$1), {
-    width: {
-      type: [Number, String],
-      default: null
-    },
-    height: {
-      type: [Number, String],
-      default: null
-    },
-    confirmText: {
-      type: String,
-      default: "\u786E\u5B9A"
-    },
-    cancelText: {
-      type: String,
-      default: "\u53D6\u6D88"
-    },
-    title: {
-      type: String,
-      default: "Title"
-    },
-    headerAlign: {
-      type: String,
-      default: "left",
-      validator: (value) => {
-        const textAlign = ["left", "center", "right"];
-        if (textAlign.indexOf(value) < 0) {
-          console.error(`headerAlign property is not valid: '${value}',\u3010${textAlign.join(" | ")}\u3011`);
-          return false;
-        }
-        return true;
+    width: PropTypes.string.def("null") || PropTypes.number.def(),
+    height: PropTypes.string.def("null") || PropTypes.number.def(),
+    confirmText: PropTypes.string.def("\u786E\u5B9A"),
+    cancelText: PropTypes.string.def("\u53D6\u6D88"),
+    title: PropTypes.string.def("title"),
+    headerAlign: PropTypes.commonType(["left", "center", "right"], "headerAlign").def("left"),
+    footerAlign: PropTypes.commonType(["left", "center", "right"], "footerAlign").def("right"),
+    theme: PropTypes.commonType(["primary", "warning", "success", "danger"], "theme").def("primary"),
+    isLoading: PropTypes.bool.def(false)
+  }),
+  emits: ["closed", "update:isShow", "confirm"],
+  setup(props, {
+    emit
+  }) {
+    const data2 = reactive({
+      positionX: 0,
+      positionY: 0,
+      moveStyle: {
+        top: "",
+        left: ""
       }
-    },
-    footerAlign: {
-      type: String,
-      default: "right",
-      validator: (value) => {
-        const textAlign = ["left", "center", "right"];
-        if (textAlign.indexOf(value) < 0) {
-          console.error(`footerAlign property is not valid: '${value}',\u3010${textAlign.join(" | ")}\u3011`);
-          return false;
-        }
-        return true;
+    });
+    onMounted(() => {
+      if (props.escClose) {
+        addEventListener("keydown", escCloseHandler);
       }
-    },
-    theme: {
-      type: String,
-      default: "primary",
-      validator: (value) => {
-        if (["primary", "warning", "success", "danger"].indexOf(value) < 0) {
-          console.error(`theme property is not valid: '${value}'`);
-          return false;
-        }
-        return true;
+    });
+    onBeforeUnmount(() => {
+      if (props.escClose) {
+        removeEventListener("keydown", escCloseHandler);
       }
-    }
-  }),
-  emits: ["closed", "update:isShow", "confirm"],
-  mounted() {
-    if (this.escClose) {
-      addEventListener("keydown", this.escCloseHandler);
-    }
-  },
-  beforeDestory() {
-    if (this.escClose) {
-      removeEventListener("keydown", this.escCloseHandler);
-    }
-  },
-  methods: {
-    handleClose() {
-      this.$emit("update:isShow", false);
-      this.$emit("closed");
-    },
-    handleConfirm() {
-      this.$emit("update:isShow", false);
-      this.$emit("confirm");
-    },
-    escCloseHandler(e) {
-      if (this.isShow && this.closeIcon) {
+    });
+    watch(() => props.isShow, (val) => {
+      if (!val) {
+        data2.moveStyle = {
+          top: "50%",
+          left: "50%"
+        };
+        data2.positionX = 0;
+        data2.positionY = 0;
+      }
+    });
+    const handleClose = () => {
+      emit("update:isShow", false);
+      emit("closed");
+    };
+    const handleConfirm = () => {
+      emit("update:isShow", false);
+      emit("confirm");
+    };
+    const escCloseHandler = (e) => {
+      if (props.isShow && props.closeIcon) {
         if (e.keyCode === 27) {
-          this.handleClose();
+          handleClose();
         }
       }
-    }
+    };
+    const moveHandler = (e) => {
+      if (props.fullscreen) {
+        return false;
+      }
+      const odiv = e.target;
+      const parentHeight = e.currentTarget.parentNode.parentNode.offsetHeight;
+      const parentWidth = e.currentTarget.parentNode.parentNode.offsetWidth;
+      let disX;
+      let disY;
+      if (data2.positionX !== 0 && data2.positionY !== 0) {
+        disX = e.clientX - data2.positionX;
+        disY = e.clientY - data2.positionY;
+      } else {
+        disX = e.clientX - odiv.offsetLeft;
+        disY = e.clientY - odiv.offsetTop;
+      }
+      document.onmousemove = (e2) => {
+        const boxLeft = window.innerWidth - parentWidth;
+        const boxTop = window.innerHeight - parentHeight;
+        let left2 = e2.clientX - disX;
+        let top2 = e2.clientY - disY;
+        if (boxLeft / 2 - left2 <= 0) {
+          left2 = boxLeft / 2;
+        } else if (boxLeft / 2 + left2 <= 0) {
+          left2 = -boxLeft / 2;
+        }
+        if (boxTop / 2 - top2 <= 0) {
+          top2 = boxTop / 2;
+        } else if (boxTop / 2 + top2 <= 0) {
+          top2 = -boxTop / 2;
+        }
+        data2.positionX = left2;
+        data2.positionY = top2;
+        data2.moveStyle.left = `calc(50% + ${left2}px)`;
+        data2.moveStyle.top = `calc(50% + ${top2}px)`;
+      };
+      document.onmouseup = () => {
+        document.onmousemove = null;
+        document.onmouseup = null;
+      };
+    };
+    return {
+      data: data2,
+      handleClose,
+      handleConfirm,
+      escCloseHandler,
+      moveHandler
+    };
   },
   render() {
     const dialogSlot = {
       header: () => {
         var _a, _b, _c;
         return [createVNode("div", {
-          "class": "bk-dialog-tool"
+          "class": ["bk-dialog-tool", this.fullscreen || !this.draggable ? "" : "move", this.draggable ? "content-dragging" : ""],
+          "onMousedown": this.moveHandler
         }, [createVNode("span", {
           "class": ["bk-dialog-close", this.closeIcon ? "" : "close-icon"],
           "onClick": this.handleClose
@@ -9524,7 +9496,8 @@ var Component$k = defineComponent({
           "style": `text-align: ${this.footerAlign}`
         }, [(_c = (_b = (_a = this.$slots).footer) == null ? void 0 : _b.call(_a)) != null ? _c : createVNode(Fragment, null, [createVNode(BkButton, {
           "onClick": this.handleConfirm,
-          "theme": this.theme
+          "theme": this.theme,
+          "loading": this.isLoading
         }, {
           default: () => [this.confirmText]
         }), createVNode(BkButton, {
@@ -9537,7 +9510,8 @@ var Component$k = defineComponent({
     };
     const className = `bk-dialog-wrapper ${this.scrollable ? "scroll-able" : ""}`;
     return createVNode(BkModal, mergeProps(this.$props, {
-      "class": className
+      "class": [className, this.fullscreen ? "bk-model-fullscreen" : this.size],
+      "style": this.data.moveStyle
     }), _isSlot$4(dialogSlot) ? dialogSlot : {
       default: () => [dialogSlot]
     });
@@ -13393,10 +13367,10 @@ const useClass = (props, root) => {
   const contentClass = classes({
     [resolveClassName("table-body")]: true
   });
-  const footerClass = classes({
+  const footerClass = computed(() => classes({
     [resolveClassName("table-footer")]: true,
     ["is-hidden"]: !props.pagination || !props.data.length
-  });
+  }));
   const wrapperStyle = computed(() => ({
     minHeight: resolveNumberOrStringToPix(props.minHeight, "auto")
   }));
@@ -13532,7 +13506,7 @@ var Component$4 = defineComponent({
         "class": resolveClassName("table-fixed")
       }, null)
     }), createVNode("div", {
-      "class": footerClass
+      "class": footerClass.value
     }, [props.pagination && props.data.length && tableRender.renderTableFooter(localPagination.value)])]);
   }
 });