vue-devui 1.0.0-beta.11 → 1.0.0-beta.15

package/transfer/index.es.js

@@ -17,8 +17,42 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { computed, defineComponent, inject, createVNode, mergeProps, toRef, provide, ref, watch, withDirectives, resolveDirective, resolveComponent, reactive, onMounted, onBeforeUnmount, renderSlot, useSlots, isVNode, createTextVNode } from "vue";
-const transferBaseProps = {
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import { computed, defineComponent, inject, createVNode, mergeProps, toRef, provide, ref, watch, withDirectives, resolveDirective, resolveComponent, reactive, onMounted, onBeforeUnmount, renderSlot, useSlots, isVNode, onUnmounted, createTextVNode, h, render } from "vue";
+const transferCommon = {
+  showTooltip: {
+    type: Boolean,
+    default: () => false
+  },
+  tooltipPosition: {
+    type: String,
+    default: () => "top"
+  }
+};
+const transferDragFunctions = {
+  onDragstart: {
+    type: Function
+  },
+  onDrop: {
+    type: Function
+  },
+  onDragleave: {
+    type: Function
+  },
+  onDragover: {
+    type: Function
+  },
+  onDragenter: {
+    type: Function
+  },
+  onDragend: {
+    type: Function
+  }
+};
+const transferBaseProps = __spreadProps(__spreadValues(__spreadValues({}, transferCommon), transferDragFunctions), {
   sourceOption: {
     type: Array,
     default() {
@@ -71,13 +105,13 @@ const transferBaseProps = {
     type: Number,
     default: () => 0
   },
-  showTooltip: {
+  isSourceDroppable: {
     type: Boolean,
     default: () => false
   },
-  tooltipPosition: {
-    type: String,
-    default: () => "top"
+  isTargetDroppable: {
+    type: Boolean,
+    default: () => false
   },
   scopedSlots: {
     type: Object
@@ -90,8 +124,11 @@ const transferBaseProps = {
   },
   onUpdateCheckeds: {
     type: Function
+  },
+  onDragend: {
+    type: Function
   }
-};
+});
 const getFilterData = (props, type) => {
   const newModel = [];
   const data = type === "source" ? props.sourceOption : props.targetOption;
@@ -994,6 +1031,15 @@ var DSearch = defineComponent({
     };
   }
 });
+const transferDragProps = __spreadProps(__spreadValues(__spreadValues({}, transferCommon), transferDragFunctions), {
+  itemData: {
+    type: Object
+  },
+  id: {
+    type: Number,
+    default: () => null
+  }
+});
 const tooltipProps = {
   position: {
     type: String,
@@ -1015,140 +1061,247 @@ const tooltipProps = {
     default: "100"
   }
 };
-const EventListener = {
-  listen: function(target, eventType, callback) {
-    if (target.addEventListener) {
-      target.addEventListener(eventType, callback, false);
-      return {
-        remove() {
-          target.removeEventListener(target, callback, false);
-        }
-      };
-    } else {
-      target.attchEvent(eventType, callback);
-      return {
-        remove() {
-          target.detachEvent(eventType, callback);
-        }
-      };
-    }
-  }
-};
 var tooltip = "";
 var DTooltip = defineComponent({
   name: "DTooltip",
   props: tooltipProps,
-  setup(props, ctx) {
+  setup(props) {
     const position = reactive({
       left: 0,
       top: 0
     });
-    const show = ref(false);
-    const slotElement = ref(null);
-    const tooltip2 = ref(null);
-    const arrow = ref(null);
-    const tooltipcontent = ref(null);
-    let enterEvent;
-    let leaveEvent;
     const arrowStyle = (attr, value) => {
-      arrow.value.style[attr] = value;
-    };
-    const delayShowTrue = function(fn, delay = props.mouseEnterDelay) {
-      let start;
-      if (parseInt(delay) >= 0) {
-        return function() {
-          if (start) {
-            clearTimeout(start);
-          }
-          start = setTimeout(fn, parseInt(delay));
-        };
-      } else {
-        console.error("the value of delay is bigger than 0 and the type of delay must be string!");
-        return;
-      }
+      document.getElementById("devui-arrow").style[attr] = value;
     };
+    const slotElement = ref(null);
     onMounted(() => {
-      if (!show.value) {
-        tooltip2.value.style.opacity = "0";
-      }
-      enterEvent = EventListener.listen(slotElement.value.children[0], "mouseenter", delayShowTrue(function() {
-        show.value = true;
-      }, props.mouseEnterDelay));
-      leaveEvent = EventListener.listen(slotElement.value.children[0], "mouseleave", function() {
-        if (show.value) {
-          setTimeout(function() {
-            show.value = false;
-          }, props.mouseLeaveDelay);
-        }
-      });
-    });
-    watch(show, function(newValue, oldValue) {
-      if (newValue) {
-        tooltip2.value.style.opacity = "1";
-        tooltip2.value.style.zIndex = "999";
-        arrow.value.style.border = "5px solid transparent";
-        switch (props.position) {
-          case "top":
-            position.left = slotElement.value.children[0].offsetLeft - tooltip2.value.offsetWidth / 2 + slotElement.value.children[0].offsetWidth / 2 - 5;
-            position.top = slotElement.value.children[0].offsetTop - 10 - tooltipcontent.value.offsetHeight;
-            arrowStyle("borderTop", "5px solid rgb(70, 77, 110)");
-            arrow.value.style.top = `${tooltipcontent.value.offsetHeight}px`;
-            arrow.value.style.left = `${tooltipcontent.value.offsetWidth / 2 + 5}px`;
-            break;
-          case "right":
-            position.left = slotElement.value.children[0].offsetLeft + slotElement.value.children[0].offsetWidth;
-            position.top = slotElement.value.children[0].offsetTop + slotElement.value.children[0].offsetHeight / 2 - tooltipcontent.value.offsetHeight / 2;
-            arrowStyle("borderRight", "5px solid rgb(70, 77, 110)");
-            arrow.value.style.top = `${tooltipcontent.value.offsetHeight / 2 - 5}px`;
-            arrow.value.style.left = "-0px";
-            break;
-          case "bottom":
-            position.top = slotElement.value.children[0].offsetHeight + slotElement.value.children[0].offsetTop + 10;
-            position.left = slotElement.value.children[0].offsetLeft + slotElement.value.children[0].offsetWidth / 2 - tooltipcontent.value.offsetWidth / 2 - 5;
-            arrowStyle("borderBottom", "5px solid rgb(70, 77, 110)");
-            arrow.value.style.top = "-10px";
-            arrow.value.style.left = `${tooltipcontent.value.offsetWidth / 2 + 5}px`;
-            break;
-          case "left":
-            position.top = slotElement.value.children[0].offsetTop + slotElement.value.children[0].offsetHeight / 2 - tooltipcontent.value.offsetHeight / 2;
-            position.left = slotElement.value.children[0].offsetLeft - 20 - tooltipcontent.value.offsetWidth;
-            arrowStyle("borderLeft", "5px solid rgb(70, 77, 110)");
-            arrow.value.style.left = `${tooltipcontent.value.offsetWidth + 10}px`;
-            arrow.value.style.top = `${tooltipcontent.value.offsetHeight / 2 - 5}px`;
-            break;
-          default:
-            console.error("The attribute position value is wrong, the value is one of top\u3001right\u3001left\u3001bottom");
-            break;
-        }
-        tooltip2.value.style.top = position.top + "px";
-        tooltip2.value.style.left = position.left + "px";
-      } else {
-        position.top = 0;
-        position.left = 0;
-        tooltip2.value.style.opacity = "0";
-      }
+      slotElement.value.children[0].onmouseenter = function() {
+        const tooltip2 = document.createElement("div");
+        const arrow = document.createElement("div");
+        const tooltipcontent = document.createElement("div");
+        tooltip2.classList.add("tooltip");
+        arrow.classList.add("arrow");
+        tooltipcontent.classList.add("tooltipcontent");
+        arrow.id = "devui-arrow";
+        tooltip2.id = "devui-tooltip1";
+        setTimeout(() => {
+          document.getElementById("devui-tooltip").appendChild(tooltip2);
+          tooltip2.appendChild(arrow);
+          tooltip2.appendChild(tooltipcontent);
+          tooltipcontent.innerHTML = props.content;
+          tooltip2.style.opacity = "1";
+          tooltip2.style.zIndex = "999";
+          arrow.style.border = "5px solid transparent";
+          switch (props.position) {
+            case "top":
+              position.left = slotElement.value.children[0].offsetLeft - tooltip2.offsetWidth / 2 + slotElement.value.children[0].offsetWidth / 2 - 5;
+              position.top = slotElement.value.children[0].offsetTop - 10 - tooltipcontent.offsetHeight;
+              arrow.style.top = `${tooltipcontent.offsetHeight}px`;
+              arrow.style.left = `${tooltipcontent.offsetWidth / 2 + 5}px`;
+              arrow.style.borderTop = "5px solid rgb(70, 77, 110)";
+              break;
+            case "bottom":
+              position.top = slotElement.value.children[0].offsetHeight + slotElement.value.children[0].offsetTop + 10;
+              position.left = slotElement.value.children[0].offsetLeft + slotElement.value.children[0].offsetWidth / 2 - tooltipcontent.offsetWidth / 2 - 5;
+              arrowStyle("borderBottom", "5px solid rgb(70, 77, 110)");
+              arrow.style.top = "-10px";
+              arrow.style.left = `${tooltipcontent.offsetWidth / 2 + 5}px`;
+              arrow.style.borderBottom = "5px solid rgb(70, 77, 110)";
+              break;
+            case "left":
+              position.top = slotElement.value.children[0].offsetTop + slotElement.value.children[0].offsetHeight / 2 - tooltipcontent.offsetHeight / 2;
+              position.left = slotElement.value.children[0].offsetLeft - 20 - tooltipcontent.offsetWidth;
+              arrowStyle("borderLeft", "5px solid rgb(70, 77, 110)");
+              arrow.style.left = `${tooltipcontent.offsetWidth + 10}px`;
+              arrow.style.top = `${tooltipcontent.offsetHeight / 2 - 5}px`;
+              arrow.style.borderLeft = "5px solid rgb(70, 77, 110)";
+              break;
+            case "right":
+              position.left = slotElement.value.children[0].offsetLeft + slotElement.value.children[0].offsetWidth;
+              position.top = slotElement.value.children[0].offsetTop + slotElement.value.children[0].offsetHeight / 2 - tooltipcontent.offsetHeight / 2;
+              arrowStyle("borderRight", "5px solid rgb(70, 77, 110)");
+              arrow.style.top = `${tooltipcontent.offsetHeight / 2 - 5}px`;
+              arrow.style.left = "-0px";
+              arrow.style.borderRight = "5px solid rgb(70, 77, 110)";
+              break;
+          }
+          tooltip2.style.top = position.top + 5 + "px";
+          tooltip2.style.left = position.left + "px";
+        }, props.mouseEnterDelay);
+      };
+      slotElement.value.children[0].onmouseleave = function() {
+        setTimeout(() => {
+          document.getElementById("devui-tooltip1").removeChild(document.getElementById("devui-arrow"));
+          document.getElementById("devui-tooltip").removeChild(document.getElementById("devui-tooltip1"));
+        }, props.mouseLeaveDelay);
+      };
     });
     onBeforeUnmount(() => {
-      enterEvent.remove();
-      leaveEvent.remove();
+      slotElement.value.children[0].onmouseenter = null;
+      slotElement.value.children[0].onmouseleave = null;
     });
     return () => {
       const defaultSlot = renderSlot(useSlots(), "default");
       return createVNode("div", {
-        "class": "devui-tooltip"
+        "class": "devui-tooltip",
+        "id": "devui-tooltip"
       }, [createVNode("div", {
         "class": "slotElement",
         "ref": slotElement
-      }, [defaultSlot]), createVNode("div", {
-        "class": "tooltip",
-        "ref": tooltip2
+      }, [defaultSlot])]);
+    };
+  }
+});
+const transferCheckboxProps = __spreadProps(__spreadValues({}, transferCommon), {
+  data: {
+    type: Object
+  },
+  id: {
+    type: Number
+  }
+});
+function _isSlot$1(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var DTransfeCheckbox = defineComponent({
+  name: "DTransferCheckbox",
+  components: {
+    DCheckbox,
+    DTooltip
+  },
+  props: transferCheckboxProps,
+  setup(props) {
+    const renderCheckbox = () => {
+      return createVNode(DCheckbox, {
+        "label": props.data.key,
+        "value": props.data.value,
+        "disabled": props.data.disabled,
+        "class": "devui-transfer-panel-body-list-item",
+        "key": props.id
+      }, null);
+    };
+    return () => {
+      let _slot;
+      return !props.showTooltip ? renderCheckbox() : createVNode(DTooltip, {
+        "class": "devui-transfer-panel-body-list-tooltip",
+        "position": props.tooltipPosition,
+        "content": props.data.key
+      }, _isSlot$1(_slot = renderCheckbox()) ? _slot : {
+        default: () => [_slot]
+      });
+    };
+  }
+});
+var devuiIcon = "";
+var DTransferDrag = defineComponent({
+  name: "DTransferDrag",
+  components: {
+    DTransfeCheckbox
+  },
+  props: transferDragProps,
+  setup(props) {
+    const dragRef = ref(null);
+    const dragHighlight = ref(false);
+    const dragOverNodeKey = ref("");
+    const dropPosition = ref(null);
+    const dragTimer = ref(null);
+    const calcDropPosition = (event) => {
+      const {
+        clientY
+      } = event;
+      const {
+        top,
+        bottom,
+        height
+      } = dragRef.value.getBoundingClientRect();
+      const des = Math.max(height * 0.25, 2);
+      if (clientY <= top + des) {
+        return -1;
+      }
+      if (clientY >= bottom - des) {
+        return 1;
+      }
+      return 0;
+    };
+    const resetState = () => {
+      dragOverNodeKey.value = "";
+      dropPosition.value = null;
+      dragHighlight.value = null;
+    };
+    onUnmounted(() => {
+      clearTimeout(dragTimer.value);
+    });
+    return () => {
+      const state = dragOverNodeKey.value === props.itemData.key;
+      return createVNode("div", {
+        "class": {
+          "devui-transfer-panel-body-list-item": true,
+          "devui-transfer-drag-dragging": dragHighlight.value,
+          "devui-transfer-drag-over": state && dropPosition.value === 0,
+          "devui-transfer\u2013drag-over-top": state && dropPosition.value === -1,
+          "devui-transfer\u2013drag-over-bottom": state && dropPosition.value === 1
+        },
+        "onDragenter": (event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          clearTimeout(dragTimer.value);
+          const curDropPosition = calcDropPosition(event);
+          if (props.itemData.key === dragOverNodeKey.value && curDropPosition === 0) {
+            resetState();
+            return;
+          }
+          dragTimer.value = setTimeout(() => {
+            dragOverNodeKey.value = props.itemData.key;
+            dropPosition.value = curDropPosition;
+          }, 0);
+          props.onDragenter && props.onDragenter(event, props.itemData);
+        },
+        "onDragover": (event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          if (props.itemData.key === dragOverNodeKey.value) {
+            const curDropPosition = calcDropPosition(event);
+            if (curDropPosition === dropPosition.value) {
+              return;
+            }
+            dropPosition.value = curDropPosition;
+          }
+          props.onDragover && props.onDragover(event, props.itemData);
+        },
+        "onDragleave": (event) => {
+          event.stopPropagation();
+          resetState();
+          props.onDragleave && props.onDragleave(event, props.itemData);
+        },
+        "onDrop": (event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          resetState();
+          props.onDrop && props.onDrop(event, props.itemData);
+        },
+        "onDragend": (event) => {
+          event.stopPropagation();
+          props.onDragend && props.onDragend(event, props.itemData);
+        }
       }, [createVNode("div", {
-        "class": "arrow",
-        "ref": arrow
-      }, null), createVNode("div", {
-        "class": "tooltipcontent",
-        "ref": tooltipcontent
-      }, [props.content])])]);
+        "class": "devui-transfer-panel-body-list-drag",
+        "draggable": true,
+        "ref": dragRef,
+        "onDragstart": (event) => {
+          event.stopPropagation();
+          dragHighlight.value = true;
+          props.onDragstart && props.onDragstart(event, props.itemData);
+        }
+      }, [createVNode("span", {
+        "class": "devui-transfer-panel-body-list-drag__icon"
+      }, [createVNode(resolveComponent("d-icon"), {
+        "name": "drag-small"
+      }, null)]), createVNode(DTransfeCheckbox, {
+        "data": props.itemData,
+        "id": props.id,
+        "showTooltip": props.showTooltip,
+        "tooltipPosition": props.tooltipPosition
+      }, null)])]);
     };
   }
 });
@@ -1161,54 +1314,98 @@ var DTransferBase = defineComponent({
     DSearch,
     DCheckboxGroup,
     DCheckbox,
-    DTooltip
+    DTransferDrag,
+    DTransfeCheckbox
   },
   props: transferBaseProps,
   setup(props, ctx) {
+    const allHalfchecked = ref(false);
     const modelValues = computed(() => props.checkedValues);
+    const dragWrapClass = computed(() => {
+      const isDrag = props.isSourceDroppable || props.isTargetDroppable;
+      return `devui-transfer-panel-body-list devui-transfer-panel-body-${isDrag ? "" : "no"}drag`;
+    });
     const searchQuery = computed(() => props.filter);
     const baseClass = TransferBaseClass(props);
+    const dropItem = ref(null);
+    watch(() => props.checkedNum, (nVal) => {
+      if (props.allChecked) {
+        allHalfchecked.value = !props.allChecked;
+      } else {
+        allHalfchecked.value = nVal !== 0;
+      }
+    }, {
+      immediate: true
+    });
     const updateSearchQuery = (val) => ctx.emit("changeQuery", val);
-    const renderCheckbox = (props2, key, showTooltip = false, tooltipPosition = "top") => {
-      const checkbox2 = createVNode(DCheckbox, {
-        "class": "devui-transfer-panel-body-list-item",
-        "label": props2.key,
-        "value": props2.value,
-        "disabled": props2.disabled,
-        "key": key
-      }, null);
-      return !showTooltip ? checkbox2 : createVNode(DTooltip, {
-        "position": tooltipPosition,
-        "content": props2.key
-      }, _isSlot(checkbox2) ? checkbox2 : {
-        default: () => [checkbox2]
+    const renderCheckboxGroup = () => {
+      let _slot;
+      return createVNode(DCheckboxGroup, {
+        "modelValue": modelValues.value,
+        "onChange": (values) => ctx.emit("updateCheckeds", values)
+      }, _isSlot(_slot = props.sourceOption.map((item, idx) => {
+        return createVNode(DTransfeCheckbox, {
+          "data": item,
+          "id": idx,
+          "showTooltip": props.showTooltip,
+          "tooltipPosition": props.tooltipPosition
+        }, null);
+      })) ? _slot : {
+        default: () => [_slot]
+      });
+    };
+    const renderDragCheckboxGroup = () => {
+      let _slot2;
+      return createVNode(DCheckboxGroup, {
+        "modelValue": modelValues.value,
+        "onChange": (values) => ctx.emit("updateCheckeds", values)
+      }, _isSlot(_slot2 = props.sourceOption.map((item, idx) => {
+        return createVNode(DTransferDrag, {
+          "itemData": item,
+          "id": idx,
+          "showTooltip": props.showTooltip,
+          "tooltipPosition": props.tooltipPosition,
+          "onDrop": (event, item2) => {
+            dropItem.value = item2;
+          },
+          "onDragend": (event, dragItem) => {
+            props.onDragend && props.onDragend(dragItem, dropItem.value);
+          }
+        }, null);
+      })) ? _slot2 : {
+        default: () => [_slot2]
       });
     };
     return {
       baseClass,
       searchQuery,
+      dragWrapClass,
       modelValues,
+      dropItem,
+      allHalfchecked,
       updateSearchQuery,
-      renderCheckbox
+      renderCheckboxGroup,
+      renderDragCheckboxGroup
     };
   },
   render() {
-    let _slot;
     const {
       title,
       baseClass,
       checkedNum,
       allChecked,
+      allHalfchecked,
       sourceOption,
       allCount,
       updateSearchQuery,
       search: search2,
       searchQuery,
-      modelValues,
+      dragWrapClass,
       height,
-      showTooltip,
-      tooltipPosition,
-      renderCheckbox
+      isSourceDroppable,
+      isTargetDroppable,
+      renderCheckboxGroup,
+      renderDragCheckboxGroup
     } = this;
     return createVNode("div", {
       "class": baseClass
@@ -1217,8 +1414,11 @@ var DTransferBase = defineComponent({
     }, [createVNode("div", {
       "class": "devui-transfer-panel-header-allChecked"
     }, [createVNode(DCheckbox, {
+      "halfchecked": allHalfchecked,
       "modelValue": allChecked,
-      "onChange": (value) => this.$emit("changeAllSource", value)
+      "onChange": (value) => {
+        this.$emit("changeAllSource", value);
+      }
     }, _isSlot(title) ? title : {
       default: () => [title]
     })]), createVNode("div", {
@@ -1231,18 +1431,11 @@ var DTransferBase = defineComponent({
       "modelValue": searchQuery,
       "onUpdate:modelValue": updateSearchQuery
     }, null)]), createVNode("div", {
-      "class": "devui-transfer-panel-body-list",
+      "class": dragWrapClass,
       "style": {
         height
       }
-    }, [sourceOption.length ? createVNode(DCheckboxGroup, {
-      "modelValue": modelValues,
-      "onChange": (values) => this.$emit("updateCheckeds", values)
-    }, _isSlot(_slot = sourceOption.map((item, idx) => {
-      return renderCheckbox(item, idx, showTooltip, tooltipPosition);
-    })) ? _slot : {
-      default: () => [_slot]
-    }) : createVNode("div", {
+    }, [sourceOption.length ? isSourceDroppable || isTargetDroppable ? renderDragCheckboxGroup() : renderCheckboxGroup() : createVNode("div", {
       "class": "devui-transfer-panel-body-list-empty"
     }, [createTextVNode("\u65E0\u6570\u636E")])])])]);
   }
@@ -1296,12 +1489,208 @@ var Icon = defineComponent({
 Icon.install = function(app) {
   app.component(Icon.name, Icon);
 };
+class View {
+  constructor() {
+    __publicField(this, "top", "50%");
+    __publicField(this, "left", "50%");
+  }
+}
+const componentProps = {
+  message: String,
+  backdrop: Boolean,
+  view: {
+    type: Object,
+    default: () => new View()
+  },
+  zIndex: Number,
+  isFull: {
+    type: Boolean,
+    default: false
+  }
+};
+class LoadingProps {
+  constructor() {
+    __publicField(this, "target");
+    __publicField(this, "message");
+    __publicField(this, "loadingTemplateRef");
+    __publicField(this, "backdrop", true);
+    __publicField(this, "positionType", "relative");
+    __publicField(this, "view", new View());
+    __publicField(this, "zIndex");
+  }
+}
+var loading = "";
+var Loading = defineComponent({
+  name: "DLoading",
+  inheritAttrs: false,
+  props: componentProps,
+  setup(props) {
+    const style = {
+      top: props.view.top,
+      left: props.view.left,
+      zIndex: props.zIndex
+    };
+    if (!props.message) {
+      style.background = "none";
+    }
+    const isShow = ref(false);
+    const open = () => {
+      isShow.value = true;
+    };
+    const close = () => {
+      isShow.value = false;
+    };
+    return {
+      style,
+      isShow,
+      open,
+      close
+    };
+  },
+  render() {
+    var _a;
+    const {
+      isShow,
+      isFull,
+      backdrop,
+      style,
+      message,
+      $slots
+    } = this;
+    return isShow && createVNode("div", {
+      "class": ["devui-loading-contanier", isFull ? "devui-loading--full" : ""]
+    }, [((_a = $slots.default) == null ? void 0 : _a.call($slots)) || createVNode("div", {
+      "class": "devui-loading-wrapper"
+    }, [backdrop ? createVNode("div", {
+      "class": "devui-loading-mask"
+    }, null) : null, createVNode("div", {
+      "style": style,
+      "class": "devui-loading-area"
+    }, [createVNode("div", {
+      "class": "devui-busy-default-spinner"
+    }, [createVNode("div", {
+      "class": "devui-loading-bar1"
+    }, null), createVNode("div", {
+      "class": "devui-loading-bar2"
+    }, null), createVNode("div", {
+      "class": "devui-loading-bar3"
+    }, null), createVNode("div", {
+      "class": "devui-loading-bar4"
+    }, null)]), message ? createVNode("span", {
+      "class": "devui-loading-text"
+    }, [message]) : null])])]);
+  }
+});
+const COMPONENT_CONTAINER_SYMBOL = Symbol("dev_component_container");
+function createComponent(Component, props, children = null) {
+  const vnode = h(Component, __spreadValues({}, props), children);
+  const container = document.createElement("div");
+  vnode[COMPONENT_CONTAINER_SYMBOL] = container;
+  render(vnode, container);
+  return vnode.component;
+}
+function unmountComponent(ComponnetInstance) {
+  render(null, ComponnetInstance == null ? void 0 : ComponnetInstance.vnode[COMPONENT_CONTAINER_SYMBOL]);
+}
+const loadingConstructor = defineComponent(Loading);
+const cacheInstance = new WeakSet();
+const isEmpty = (val) => {
+  if (!val)
+    return true;
+  if (Array.isArray(val))
+    return val.length === 0;
+  if (val instanceof Set || val instanceof Map)
+    return val.size === 0;
+  if (val instanceof Promise)
+    return false;
+  if (typeof val === "object") {
+    try {
+      return Object.keys(val).length === 0;
+    } catch (e) {
+      return false;
+    }
+  }
+  return false;
+};
+const getType = (vari) => {
+  return Object.prototype.toString.call(vari).slice(8, -1).toLowerCase();
+};
+const isPromise = (value) => {
+  const type = getType(value);
+  switch (type) {
+    case "promise":
+      return [value];
+    case "array":
+      if (value.some((val) => getType(val) !== "promise")) {
+        console.error(new TypeError("Binding values should all be of type Promise"));
+        return "error";
+      }
+      return value;
+    default:
+      return false;
+  }
+};
+const unmount = (el) => {
+  cacheInstance.delete(el);
+  el.instance.proxy.close();
+  unmountComponent(el.instance);
+};
+const toggleLoading = (el, binding) => {
+  if (binding.value) {
+    const vals = isPromise(binding.value);
+    if (vals === "error")
+      return;
+    el.instance.proxy.open();
+    el.appendChild(el.mask);
+    cacheInstance.add(el);
+    if (vals) {
+      Promise.all(vals).catch((err) => {
+        console.error(new Error("Promise handling errors"), err);
+      }).finally(() => {
+        unmount(el);
+      });
+    }
+  } else {
+    unmount(el);
+  }
+};
+const removeAttribute = (el) => {
+  el.removeAttribute("zindex");
+  el.removeAttribute("positiontype");
+  el.removeAttribute("backdrop");
+  el.removeAttribute("message");
+  el.removeAttribute("view");
+  el.removeAttribute("loadingtemplateref");
+};
+const handleProps = (el, vprops) => {
+  const props = __spreadValues(__spreadValues({}, new LoadingProps()), vprops);
+  const loadingTemplateRef = props.loadingTemplateRef;
+  const loadingInstance = createComponent(loadingConstructor, __spreadValues({}, props), loadingTemplateRef ? () => loadingTemplateRef : null);
+  el.style.position = props.positionType;
+  el.options = props;
+  el.instance = loadingInstance;
+  el.mask = loadingInstance.proxy.$el;
+};
+const loadingDirective = {
+  mounted: function(el, binding, vnode) {
+    handleProps(el, vnode.props);
+    removeAttribute(el);
+    !isEmpty(binding.value) && toggleLoading(el, binding);
+  },
+  updated: function(el, binding, vnode) {
+    if (!isEmpty(binding.value) && cacheInstance.has(el) || isEmpty(binding.value) && !cacheInstance.has(el))
+      return;
+    !cacheInstance.has(el) && handleProps(el, vnode.props);
+    removeAttribute(el);
+    toggleLoading(el, binding);
+  }
+};
 const buttonProps = {
   type: {
     type: String,
     default: "button"
   },
-  btnStyle: {
+  variant: {
     type: String,
     default: "primary"
   },
@@ -1343,6 +1732,9 @@ const buttonProps = {
 var button = "";
 var DButton = defineComponent({
   name: "DButton",
+  directives: {
+    devLoading: loadingDirective
+  },
   props: buttonProps,
   setup(props, ctx) {
     const buttonContent = ref(null);
@@ -1356,15 +1748,15 @@ var DButton = defineComponent({
     const hasContent = computed(() => ctx.slots.default);
     const btnClass = computed(() => {
       const {
-        btnStyle,
+        variant,
         size,
         position,
         bordered,
         icon
       } = props;
-      const origin = `devui-btn devui-btn-${btnStyle} devui-btn-${size} devui-btn-${position}`;
+      const origin = `devui-btn devui-btn-${variant} devui-btn-${size} devui-btn-${position}`;
       const borderedClass = bordered ? "bordered" : "";
-      const btnIcon = !!icon && !hasContent.value && btnStyle !== "primary" ? "d-btn-icon" : "";
+      const btnIcon = !!icon && !hasContent.value && variant !== "primary" ? "d-btn-icon" : "";
       const btnIconWrap = !!icon ? "d-btn-icon-wrap" : "";
       return `${origin} ${borderedClass} ${btnIcon} ${btnIconWrap}`;
     });
@@ -1388,9 +1780,9 @@ var DButton = defineComponent({
         showLoading,
         width
       } = props;
-      return withDirectives(createVNode("div", mergeProps({
+      return createVNode("div", mergeProps({
         "class": "devui-btn-host"
-      }, ctx.attrs), [createVNode("button", {
+      }, ctx.attrs), [withDirectives(createVNode("button", {
         "class": btnClass.value,
         "type": type,
         "disabled": disabled,
@@ -1404,7 +1796,7 @@ var DButton = defineComponent({
       }, null) : null, createVNode("span", {
         "class": "button-content",
         "ref": buttonContent
-      }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)])])]), [[resolveDirective("dLoading"), showLoading]]);
+      }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)])]), [[resolveDirective("devLoading"), showLoading]])]);
     };
   }
 });
@@ -1460,7 +1852,7 @@ var DTransferOperation = defineComponent({
     };
   }
 });
-const transferProps = {
+const transferProps = __spreadProps(__spreadValues({}, transferCommon), {
   sourceOption: {
     type: Array,
     require: true,
@@ -1503,14 +1895,6 @@ const transferProps = {
     type: Boolean,
     default: () => false
   },
-  showTooltip: {
-    type: Boolean,
-    default: () => false
-  },
-  tooltipPosition: {
-    type: String,
-    default: () => "top"
-  },
   beforeTransfer: {
     type: Function
   },
@@ -1531,8 +1915,11 @@ const transferProps = {
   },
   afterTransfer: {
     type: Function
+  },
+  onDragend: {
+    type: Function
   }
-};
+});
 const headerSlot = (ctx, name) => {
   return !ctx.slots[`${name}-header`] ? null : () => ctx.slots[`${name}-header`] && ctx.slots[`${name}-header`]();
 };
@@ -1561,7 +1948,7 @@ var Transfer = defineComponent({
     watch(() => props.targetOption, () => {
       rightOptions = reactive(initState(props, "target"));
     });
-    watch(() => leftOptions.keyword, (nVal) => {
+    watch(() => leftOptions.keyword, () => {
       searchFilterData(leftOptions);
     });
     watch(() => leftOptions.checkedValues, (values) => {
@@ -1570,7 +1957,7 @@ var Transfer = defineComponent({
     }, {
       deep: true
     });
-    watch(() => rightOptions.keyword, (nVal) => {
+    watch(() => rightOptions.keyword, () => {
       searchFilterData(rightOptions);
     });
     watch(() => rightOptions.checkedValues, (values) => {
@@ -1654,6 +2041,13 @@ var Transfer = defineComponent({
     const isFunction = (type) => {
       return props[type] && typeof props[type] === "function";
     };
+    const dataSort = (target, dragItem, dropItem, direction) => {
+      const startIndex = target.filterData.findIndex((item) => item.key === dragItem.key);
+      const endIndex = target.filterData.findIndex((item) => item.key === dropItem.key);
+      target.filterData.splice(endIndex, 1, dragItem);
+      target.filterData.splice(startIndex, 1, dropItem);
+      props.onDragend && props.onDragend(direction, dragItem, dropItem);
+    };
     return () => {
       return createVNode("div", {
         "class": "devui-transfer"
@@ -1670,9 +2064,11 @@ var Transfer = defineComponent({
         "allCount": leftOptions.data.length,
         "showTooltip": props.showTooltip,
         "tooltipPosition": props.tooltipPosition,
+        "isSourceDroppable": props.isSourceDroppable,
         "onChangeAllSource": (value) => changeAllSource(leftOptions, value),
         "onUpdateCheckeds": updateLeftCheckeds,
-        "onChangeQuery": (value) => changeQueryHandle(leftOptions, "left", value)
+        "onChangeQuery": (value) => changeQueryHandle(leftOptions, "left", value),
+        "onDragend": (dragItem, dropItem) => dataSort(leftOptions, dragItem, dropItem, "left")
       }, {
         header: headerSlot(ctx, "left"),
         body: bodySlot(ctx, "left")
@@ -1701,9 +2097,11 @@ var Transfer = defineComponent({
         "allCount": rightOptions.data.length,
         "showTooltip": props.showTooltip,
         "tooltipPosition": props.tooltipPosition,
+        "isTargetDroppable": props.isTargetDroppable,
         "onChangeAllSource": (value) => changeAllSource(rightOptions, value),
         "onUpdateCheckeds": updateRightCheckeds,
-        "onChangeQuery": (value) => changeQueryHandle(rightOptions, "right", value)
+        "onChangeQuery": (value) => changeQueryHandle(rightOptions, "right", value),
+        "onDragend": (dragItem, dropItem) => dataSort(rightOptions, dragItem, dropItem, "right")
       }, {
         header: headerSlot(ctx, "right"),
         body: bodySlot(ctx, "right")
@@ -1717,7 +2115,7 @@ Transfer.install = function(app) {
 var index = {
   title: "Transfer \u7A7F\u68AD\u6846",
   category: "\u6570\u636E\u5F55\u5165",
-  status: "10%",
+  status: "40%",
   install(app) {
     app.use(Transfer);
   }