vue-devui 1.0.0-beta.18 → 1.0.0-beta.19

package/transfer/index.es.js

@@ -21,7 +21,8 @@ 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, toRefs } from "vue";
+import { computed, defineComponent, inject, createVNode, mergeProps, toRef, provide, ref, watch, withDirectives, resolveDirective, resolveComponent, Teleport, Transition, renderSlot, isVNode, onMounted, onUnmounted, unref, nextTick, toRefs, Fragment, createTextVNode, h, render, reactive } from "vue";
+import { shift, offset, autoPlacement, arrow, computePosition } from "@floating-ui/dom";
 const transferCommon = {
   showTooltip: {
     type: Boolean,
@@ -546,10 +547,6 @@ const searchProps = {
     type: String,
     default: ""
   },
-  onSearch: {
-    type: Function,
-    default: void 0
-  },
   "onUpdate:modelValue": {
     type: Function,
     default: void 0
@@ -581,9 +578,7 @@ const keywordsHandles = (ctx, props) => {
     keywords.value = "";
     ctx.emit("update:modelValue", "");
   };
-  const clearIconShow = computed(() => {
-    return keywords.value.length > 0;
-  });
+  const clearIconShow = computed(() => keywords.value.length > 0);
   return {
     keywords,
     clearIconShow,
@@ -1020,9 +1015,9 @@ var lodash = { exports: {} };
       return result;
     }
     function arrayPush(array, values) {
-      var index2 = -1, length = values.length, offset = array.length;
+      var index2 = -1, length = values.length, offset2 = array.length;
       while (++index2 < length) {
-        array[offset + index2] = values[index2];
+        array[offset2 + index2] = values[index2];
       }
       return array;
     }
@@ -2629,13 +2624,13 @@ var lodash = { exports: {} };
         while (++argsIndex < rangeLength) {
           result2[argsIndex] = args[argsIndex];
         }
-        var offset = argsIndex;
+        var offset2 = argsIndex;
         while (++rightIndex < rightLength) {
-          result2[offset + rightIndex] = partials[rightIndex];
+          result2[offset2 + rightIndex] = partials[rightIndex];
         }
         while (++holdersIndex < holdersLength) {
           if (isUncurried || argsIndex < argsLength) {
-            result2[offset + holders[holdersIndex]] = args[argsIndex++];
+            result2[offset2 + holders[holdersIndex]] = args[argsIndex++];
           }
         }
         return result2;
@@ -5182,9 +5177,9 @@ var lodash = { exports: {} };
         var isEscaping, isEvaluating, index2 = 0, interpolate = options.interpolate || reNoMatch, source = "__p += '";
         var reDelimiters = RegExp2((options.escape || reNoMatch).source + "|" + interpolate.source + "|" + (interpolate === reInterpolate ? reEsTemplate : reNoMatch).source + "|" + (options.evaluate || reNoMatch).source + "|$", "g");
         var sourceURL = "//# sourceURL=" + (hasOwnProperty.call(options, "sourceURL") ? (options.sourceURL + "").replace(/\s/g, " ") : "lodash.templateSources[" + ++templateCounter + "]") + "\n";
-        string.replace(reDelimiters, function(match, escapeValue, interpolateValue, esTemplateValue, evaluateValue, offset) {
+        string.replace(reDelimiters, function(match, escapeValue, interpolateValue, esTemplateValue, evaluateValue, offset2) {
           interpolateValue || (interpolateValue = esTemplateValue);
-          source += string.slice(index2, offset).replace(reUnescapedString, escapeStringChar);
+          source += string.slice(index2, offset2).replace(reUnescapedString, escapeStringChar);
           if (escapeValue) {
             isEscaping = true;
             source += "' +\n__e(" + escapeValue + ") +\n'";
@@ -5196,7 +5191,7 @@ var lodash = { exports: {} };
           if (interpolateValue) {
             source += "' +\n((__t = (" + interpolateValue + ")) == null ? '' : __t) +\n'";
           }
-          index2 = offset + match.length;
+          index2 = offset2 + match.length;
           return match;
         });
         source += "';\n";
@@ -6002,17 +5997,10 @@ var lodash = { exports: {} };
     }
   }).call(commonjsGlobal);
 })(lodash, lodash.exports);
-const KEYS_MAP = {
-  enter: "Enter"
-};
-const keydownHandles = (ctx, keywords, delay) => {
-  const onInputKeydown = ($event) => {
-    switch ($event.key) {
-      case KEYS_MAP.enter:
-        handleEnter($event);
-        break;
-    }
-  };
+const keydownHandles = (ctx, keywords, props) => {
+  const useEmitKeyword = lodash.exports.debounce((value) => {
+    ctx.emit("search", value);
+  }, props.delay);
   const handleEnter = ($event) => {
     if ($event.target instanceof HTMLInputElement) {
       const value = $event.target.value;
@@ -6020,11 +6008,17 @@ const keydownHandles = (ctx, keywords, delay) => {
     }
   };
   const onClickHandle = () => {
-    useEmitKeyword(keywords.value);
+    if (!props.disabled) {
+      ctx.emit("search", keywords.value);
+    }
+  };
+  const KEYS_MAP = {
+    Enter: handleEnter
+  };
+  const onInputKeydown = ($event) => {
+    var _a;
+    (_a = KEYS_MAP[$event.key]) == null ? void 0 : _a.call(KEYS_MAP, $event);
   };
-  const useEmitKeyword = lodash.exports.debounce((value) => {
-    ctx.emit("onSearch", value);
-  }, delay);
   return {
     onInputKeydown,
     useEmitKeyword,
@@ -6211,7 +6205,7 @@ var search = "";
 var DSearch = defineComponent({
   name: "DSearch",
   props: searchProps,
-  emits: ["update:modelValue", "onSearch"],
+  emits: ["update:modelValue", "search"],
   setup(props, ctx) {
     const rootClasses = getRootClass(props);
     const {
@@ -6223,7 +6217,7 @@ var DSearch = defineComponent({
       onInputKeydown,
       onClickHandle,
       useEmitKeyword
-    } = keydownHandles(ctx, keywords, props.delay);
+    } = keydownHandles(ctx, keywords, props);
     const onInputUpdate = (event) => {
       if (props.isKeyupSearch) {
         useEmitKeyword(event);
@@ -6278,115 +6272,396 @@ const transferDragProps = __spreadProps(__spreadValues(__spreadValues({}, transf
     default: () => null
   }
 });
-const tooltipProps = {
+var baseOverlay = "";
+function _isSlot$2(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const CommonOverlay = defineComponent({
+  setup(props, ctx) {
+    return () => {
+      let _slot;
+      return createVNode(Teleport, {
+        "to": "#d-overlay-anchor"
+      }, {
+        default: () => [createVNode(Transition, {
+          "name": "devui-overlay-fade"
+        }, _isSlot$2(_slot = renderSlot(ctx.slots, "default")) ? _slot : {
+          default: () => [_slot]
+        })]
+      });
+    };
+  }
+});
+const overlayProps = {
+  visible: {
+    type: Boolean
+  },
+  backgroundBlock: {
+    type: Boolean,
+    default: false
+  },
+  backgroundClass: {
+    type: String,
+    default: ""
+  },
+  backgroundStyle: {
+    type: [String, Object]
+  },
+  onBackdropClick: {
+    type: Function
+  },
+  backdropClose: {
+    type: Boolean,
+    default: true
+  },
+  hasBackdrop: {
+    type: Boolean,
+    default: true
+  }
+};
+const fixedOverlayProps = __spreadProps(__spreadValues({}, overlayProps), {
+  overlayStyle: {
+    type: [String, Object],
+    default: void 0
+  }
+});
+const overlayEmits = ["update:visible", "backdropClick"];
+function useOverlayLogic(props, ctx) {
+  const backgroundClass = computed(() => {
+    return [
+      "devui-overlay-background",
+      props.backgroundClass,
+      !props.hasBackdrop ? "devui-overlay-background__disabled" : "devui-overlay-background__color"
+    ];
+  });
+  const overlayClass = computed(() => {
+    return "devui-overlay";
+  });
+  const handleBackdropClick = (event) => {
+    var _a;
+    event.preventDefault();
+    (_a = props.onBackdropClick) == null ? void 0 : _a.call(props);
+    if (props.backdropClose) {
+      ctx.emit("update:visible", false);
+    }
+  };
+  const handleOverlayBubbleCancel = (event) => event.cancelBubble = true;
+  onMounted(() => {
+    const body = document.body;
+    const originOverflow = body.style.overflow;
+    const originPosition = body.style.position;
+    watch([() => props.visible, () => props.backgroundBlock], ([visible, backgroundBlock]) => {
+      if (backgroundBlock) {
+        const top = body.getBoundingClientRect().y;
+        if (visible) {
+          body.style.overflowY = "scroll";
+          body.style.position = visible ? "fixed" : "";
+          body.style.top = `${top}px`;
+        } else {
+          body.style.overflowY = originOverflow;
+          body.style.position = originPosition;
+          body.style.top = "";
+          window.scrollTo(0, -top);
+        }
+      }
+    });
+    onUnmounted(() => {
+      document.body.style.overflow = originOverflow;
+    });
+  });
+  return {
+    backgroundClass,
+    overlayClass,
+    handleBackdropClick,
+    handleOverlayBubbleCancel
+  };
+}
+var fixedOverlay = "";
+defineComponent({
+  name: "DFixedOverlay",
+  props: fixedOverlayProps,
+  emits: overlayEmits,
+  setup(props, ctx) {
+    const {
+      backgroundClass,
+      overlayClass,
+      handleBackdropClick,
+      handleOverlayBubbleCancel
+    } = useOverlayLogic(props, ctx);
+    return () => createVNode(CommonOverlay, null, {
+      default: () => [props.visible && createVNode("div", {
+        "class": backgroundClass.value,
+        "style": props.backgroundStyle,
+        "onClick": handleBackdropClick
+      }, [createVNode("div", {
+        "class": overlayClass.value,
+        "style": props.overlayStyle,
+        "onClick": handleOverlayBubbleCancel
+      }, [renderSlot(ctx.slots, "default")])])]
+    });
+  }
+});
+const flexibleOverlayProps = {
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  origin: {
+    type: Object,
+    require: true
+  },
   position: {
+    type: Array,
+    default: ["bottom"]
+  },
+  offset: {
+    type: [Number, Object],
+    default: 8
+  },
+  align: {
+    type: String,
+    default: null
+  },
+  showArrow: {
+    type: Boolean,
+    default: false
+  },
+  isArrowCenter: {
+    type: Boolean,
+    default: true
+  }
+};
+function getScrollParent(element) {
+  const overflowRegex = /(auto|scroll|hidden)/;
+  for (let parent = element; parent = parent.parentElement; parent.parentElement !== document.body) {
+    const style = window.getComputedStyle(parent);
+    if (overflowRegex.test(style.overflow + style.overflowX + style.overflowY)) {
+      return parent;
+    }
+  }
+  return window;
+}
+function adjustArrowPosition(isArrowCenter, point, placement, originRect) {
+  let { x, y } = point;
+  if (!isArrowCenter) {
+    const { width, height } = originRect;
+    if (x && placement.includes("start")) {
+      x = 12;
+    }
+    if (x && placement.includes("end")) {
+      x = Math.round(width - 24);
+    }
+    if (y && placement.includes("start")) {
+      y = 10;
+    }
+    if (y && placement.includes("end")) {
+      y = height - 14;
+    }
+  }
+  return { x, y };
+}
+function useOverlay(props, emit) {
+  const overlayRef = ref();
+  const arrowRef = ref();
+  const updateArrowPosition = (arrowEl, placement, point, overlayEl) => {
+    const { x, y } = adjustArrowPosition(props.isArrowCenter, point, placement, overlayEl.getBoundingClientRect());
+    const staticSide = {
+      top: "bottom",
+      right: "left",
+      bottom: "top",
+      left: "right"
+    }[placement.split("-")[0]];
+    Object.assign(arrowEl.style, {
+      left: x ? `${x}px` : "",
+      top: y ? `${y}px` : "",
+      right: "",
+      bottom: "",
+      [staticSide]: "-4px"
+    });
+  };
+  const updatePosition = async () => {
+    const hostEl = props.origin;
+    const overlayEl = unref(overlayRef.value);
+    const arrowEl = unref(arrowRef.value);
+    const middleware = [
+      shift(),
+      offset(props.offset),
+      autoPlacement({
+        alignment: props.align,
+        allowedPlacements: props.position
+      })
+    ];
+    props.showArrow && middleware.push(arrow({ element: arrowEl }));
+    const { x, y, placement, middlewareData } = await computePosition(hostEl, overlayEl, {
+      strategy: "fixed",
+      middleware
+    });
+    emit("positionChange", placement);
+    Object.assign(overlayEl.style, { top: `${y}px`, left: `${x}px` });
+    props.showArrow && updateArrowPosition(arrowEl, placement, middlewareData.arrow, overlayEl);
+  };
+  watch(() => props.modelValue, () => {
+    const originParent = getScrollParent(props.origin);
+    if (props.modelValue && props.origin) {
+      nextTick(updatePosition);
+      originParent.addEventListener("scroll", updatePosition);
+      originParent !== window && window.addEventListener("scroll", updatePosition);
+      window.addEventListener("resize", updatePosition);
+    } else {
+      originParent.removeEventListener("scroll", updatePosition);
+      originParent !== window && window.removeEventListener("scroll", updatePosition);
+      window.removeEventListener("resize", updatePosition);
+    }
+  });
+  onUnmounted(() => {
+    const originParent = getScrollParent(props.origin);
+    originParent.removeEventListener("scroll", updatePosition);
+    originParent !== window && window.removeEventListener("scroll", updatePosition);
+    window.removeEventListener("resize", updatePosition);
+  });
+  return { arrowRef, overlayRef, updatePosition };
+}
+var flexibleOverlay = "";
+const FlexibleOverlay = defineComponent({
+  name: "DFlexibleOverlay",
+  inheritAttrs: false,
+  props: flexibleOverlayProps,
+  emits: ["update:modelValue", "positionChange"],
+  setup(props, {
+    slots,
+    attrs,
+    emit,
+    expose
+  }) {
+    const {
+      arrowRef,
+      overlayRef,
+      updatePosition
+    } = useOverlay(props, emit);
+    expose({
+      updatePosition
+    });
+    return () => {
+      var _a;
+      return props.modelValue && createVNode("div", mergeProps({
+        "ref": overlayRef,
+        "class": "devui-flexible-overlay"
+      }, attrs), [(_a = slots.default) == null ? void 0 : _a.call(slots), props.showArrow && createVNode("div", {
+        "ref": arrowRef,
+        "class": "devui-flexible-overlay-arrow"
+      }, null)]);
+    };
+  }
+});
+const tooltipProps = {
+  content: {
     type: String,
+    default: ""
+  },
+  position: {
+    type: [String, Array],
     default: "top"
   },
   showAnimation: {
     type: Boolean,
     default: true
   },
-  content: {
-    type: String
+  mouseEnterDelay: {
+    type: Number,
+    default: 150
   },
   mouseLeaveDelay: {
-    type: String,
-    default: "150"
-  },
-  mouseEnterDelay: {
-    type: String,
-    default: "100"
+    type: Number,
+    default: 100
   }
 };
+const TransformOriginMap = {
+  top: "50% calc(100% + 8px)",
+  bottom: "50% -8px",
+  left: "calc(100% + 8px)",
+  right: "-8px 50%"
+};
+function useTooltip(origin, props) {
+  const { position, mouseEnterDelay, mouseLeaveDelay } = toRefs(props);
+  const visible = ref(false);
+  const isEnter = ref(false);
+  const positionArr = computed(() => typeof position.value === "string" ? [position.value] : position.value);
+  const placement = ref(positionArr.value[0]);
+  const overlayStyles = computed(() => ({
+    transformOrigin: TransformOriginMap[placement.value]
+  }));
+  const enter = lodash.exports.debounce(() => {
+    isEnter.value && (visible.value = true);
+  }, mouseEnterDelay.value);
+  const leave = lodash.exports.debounce(() => {
+    !isEnter.value && (visible.value = false);
+  }, mouseLeaveDelay.value);
+  const onMouseenter = () => {
+    isEnter.value = true;
+    enter();
+  };
+  const onMouseleave = () => {
+    isEnter.value = false;
+    leave();
+  };
+  const onPositionChange = (pos) => {
+    placement.value = pos;
+  };
+  onMounted(() => {
+    origin.value.addEventListener("mouseenter", onMouseenter);
+    origin.value.addEventListener("mouseleave", onMouseleave);
+  });
+  return { visible, placement, positionArr, overlayStyles, onPositionChange };
+}
 var tooltip = "";
 var DTooltip = defineComponent({
   name: "DTooltip",
   props: tooltipProps,
-  setup(props) {
-    const position = reactive({
-      left: 0,
-      top: 0
-    });
-    const arrowStyle = (attr, value) => {
-      document.getElementById("devui-arrow").style[attr] = value;
-    };
-    const slotElement = ref(null);
-    onMounted(() => {
-      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(() => {
-      slotElement.value.children[0].onmouseenter = null;
-      slotElement.value.children[0].onmouseleave = null;
-    });
+  setup(props, {
+    slots
+  }) {
+    const {
+      showAnimation,
+      content
+    } = toRefs(props);
+    const origin = ref();
+    const tooltipRef = ref();
+    const {
+      visible,
+      placement,
+      positionArr,
+      overlayStyles,
+      onPositionChange
+    } = useTooltip(origin, props);
     return () => {
-      const defaultSlot = renderSlot(useSlots(), "default");
-      return createVNode("div", {
-        "class": "devui-tooltip",
-        "id": "devui-tooltip"
-      }, [createVNode("div", {
-        "class": "slotElement",
-        "ref": slotElement
-      }, [defaultSlot])]);
+      var _a;
+      return createVNode(Fragment, null, [createVNode("div", {
+        "ref": origin,
+        "class": "devui-tooltip-reference"
+      }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]), createVNode(Teleport, {
+        "to": "body"
+      }, {
+        default: () => [createVNode(Transition, {
+          "name": showAnimation.value ? `devui-tooltip-fade-${placement.value}` : ""
+        }, {
+          default: () => [createVNode(FlexibleOverlay, {
+            "modelValue": visible.value,
+            "onUpdate:modelValue": ($event) => visible.value = $event,
+            "ref": tooltipRef,
+            "class": "devui-tooltip",
+            "origin": origin.value,
+            "position": positionArr.value,
+            "offset": 6,
+            "show-arrow": true,
+            "style": overlayStyles.value,
+            "onPositionChange": onPositionChange
+          }, {
+            default: () => [createVNode("span", {
+              "innerHTML": content.value
+            }, null)]
+          })]
+        })]
+      })]);
     };
   }
 });
@@ -6678,55 +6953,53 @@ var DTransferBase = defineComponent({
     }, [createTextVNode("\u65E0\u6570\u636E")])])])]);
   }
 });
+const iconProps = {
+  name: {
+    type: String,
+    default: "",
+    required: true
+  },
+  size: {
+    type: String,
+    default: "inherit"
+  },
+  color: {
+    type: String,
+    default: "inherit"
+  },
+  classPrefix: {
+    type: String,
+    default: "icon"
+  }
+};
 var Icon = defineComponent({
   name: "DIcon",
-  props: {
-    name: {
-      type: String,
-      required: true
-    },
-    size: {
-      type: String,
-      default: "inherit"
-    },
-    color: {
-      type: String,
-      default: "inherit"
-    },
-    classPrefix: {
-      type: String,
-      default: "icon"
-    }
-  },
+  props: iconProps,
   setup(props) {
-    return __spreadValues({}, props);
-  },
-  render() {
     const {
       name,
       size,
       color,
       classPrefix
-    } = this;
-    return /^((https?):)?\/\//.test(name) ? createVNode("img", {
-      "src": name,
-      "alt": name.split("/")[name.split("/").length - 1],
-      "style": {
-        width: size,
-        verticalAlign: "text-bottom"
-      }
-    }, null) : createVNode("i", {
-      "class": `${classPrefix} ${classPrefix}-${name}`,
-      "style": {
-        fontSize: size,
-        color
-      }
-    }, null);
+    } = toRefs(props);
+    return () => {
+      return /^((https?):)?\/\//.test(name.value) ? createVNode("img", {
+        "src": name.value,
+        "alt": name.value.split("/")[name.value.split("/").length - 1],
+        "style": {
+          width: size.value,
+          verticalAlign: "text-bottom"
+        }
+      }, null) : createVNode("i", {
+        "class": `${classPrefix.value} ${classPrefix.value}-${name.value}`,
+        "style": {
+          fontSize: size.value,
+          color: color.value
+        }
+      }, null);
+    };
   }
 });
-Icon.install = function(app) {
-  app.component(Icon.name, Icon);
-};
 class View {
   constructor() {
     __publicField(this, "top", "50%");
@@ -7010,6 +7283,7 @@ var DButton = defineComponent({
       }, [icon.value && createVNode(Icon, {
         "name": icon.value,
         "size": "12px",
+        "color": "",
         "class": iconClass.value
       }, null), createVNode("span", {
         "class": "button-content"
@@ -7221,8 +7495,9 @@ var Transfer = defineComponent({
       isFunction("afterTransfer") && props.afterTransfer.call(null, target);
     };
     const changeAllSource = (source, value) => {
-      if (source.filterData.every((item) => item.disabled))
+      if (source.filterData.every((item) => item.disabled)) {
         return;
+      }
       source.allChecked = value;
       if (value) {
         source.checkedValues = source.filterData.filter((item) => !item.disabled).map((item) => item.value);