vue-devui 1.3.4-alpha.3 → 1.4.0

package/search/index.es.js

@@ -29,12 +29,11 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import { computed, ref, watch, defineComponent, toRefs, createVNode, resolveDynamicComponent, mergeProps, provide, reactive, onUnmounted, Transition, unref, nextTick, withModifiers, Comment, Text, h, Fragment, inject, withDirectives, cloneVNode, onMounted, Teleport, createTextVNode, onBeforeUnmount, getCurrentInstance, shallowRef } from "vue";
+import { defineComponent, watch, provide, reactive, toRefs, createVNode, onUnmounted, Transition, mergeProps, ref, unref, nextTick, withModifiers, Comment, Text, h, Fragment, inject, withDirectives, cloneVNode, computed, onMounted, Teleport, createTextVNode, onBeforeUnmount, resolveDynamicComponent, getCurrentInstance, shallowRef } from "vue";
 import { offset, autoPlacement, arrow, shift, computePosition } from "@floating-ui/dom";
 const searchProps = {
   size: {
-    type: String,
-    default: "md"
+    type: String
   },
   placeholder: {
     type: String,
@@ -81,6 +80,51 @@ const searchProps = {
     default: void 0
   }
 };
+const formProps = {
+  data: {
+    type: Object,
+    default: () => ({})
+  },
+  layout: {
+    type: String,
+    default: "horizontal"
+  },
+  labelSize: {
+    type: String,
+    default: "md"
+  },
+  labelAlign: {
+    type: String,
+    default: "start"
+  },
+  rules: {
+    type: Object
+  },
+  messageType: {
+    type: String,
+    default: "popover"
+  },
+  popPosition: {
+    type: Array,
+    default: ["right", "bottom"]
+  },
+  validateOnRuleChange: {
+    type: Boolean,
+    default: false
+  },
+  showFeedback: {
+    type: Boolean,
+    default: false
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  size: {
+    type: String
+  }
+};
+const FORM_TOKEN = Symbol("dForm");
 function createBem(namespace, element, modifier) {
   let cls = namespace;
   if (element) {
@@ -104,43 +148,16 @@ function useNamespace(block, needDot = false) {
     em
   };
 }
-const SIZE_CLASS = {
-  lg: "lg",
-  md: "md",
-  sm: "sm"
-};
-const ICON_POSITION = {
-  right: "right",
-  left: "left"
-};
-const ns$2 = useNamespace("search");
-const getRootClass = (props, isFocus) => {
-  return computed(() => ({
-    [ns$2.b()]: true,
-    [ns$2.m("focus")]: isFocus.value,
-    [ns$2.m("disabled")]: props.disabled,
-    [ns$2.m("no-border")]: props.noBorder,
-    [ns$2.m(props.size)]: SIZE_CLASS[props.size],
-    [ns$2.m(props.iconPosition)]: ICON_POSITION[props.iconPosition]
-  }));
-};
-const keywordsHandles = (ctx, props) => {
-  const keywords = ref("");
-  watch(() => props.modelValue, (val) => {
-    keywords.value = val;
-  }, { immediate: true });
-  const onClearHandle = () => {
-    keywords.value = "";
-    ctx.emit("update:modelValue", "");
-    ctx.emit("search", "");
+function useFieldCollection() {
+  const itemContexts = [];
+  const addItemContext = (field) => {
+    itemContexts.push(field);
   };
-  const clearIconShow = computed(() => keywords.value.length > 0);
-  return {
-    keywords,
-    clearIconShow,
-    onClearHandle
+  const removeItemContext = (field) => {
+    itemContexts.splice(itemContexts.indexOf(field), 1);
   };
-};
+  return { itemContexts, addItemContext, removeItemContext };
+}
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 var lodash = { exports: {} };
 /**
@@ -5553,1111 +5570,815 @@ var lodash = { exports: {} };
     }
   }).call(commonjsGlobal);
 })(lodash, lodash.exports);
-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;
-      useEmitKeyword(value);
+function useFormValidation(itemContexts) {
+  const getValidateFields = (fields) => {
+    if (!itemContexts.length) {
+      return [];
+    }
+    const normalizedFields = lodash.exports.castArray(fields);
+    const filteredFields = normalizedFields.length ? itemContexts.filter((context) => context.field && normalizedFields.includes(context.field)) : itemContexts;
+    if (!filteredFields.length) {
+      return [];
     }
+    return filteredFields;
   };
-  const onClickHandle = () => {
-    if (!props.disabled) {
-      ctx.emit("search", keywords.value);
+  const execValidateFields = async (fields = []) => {
+    const validateFields2 = getValidateFields(fields);
+    if (!validateFields2.length) {
+      return true;
+    }
+    let errors = {};
+    for (const field of validateFields2) {
+      try {
+        await field.validate("");
+      } catch (err) {
+        errors = __spreadValues(__spreadValues({}, errors), err);
+      }
     }
+    if (!Object.keys(errors).length) {
+      return true;
+    }
+    return Promise.reject(errors);
   };
-  const KEYS_MAP = {
-    Enter: handleEnter
+  const validateFields = async (fields = [], callback) => {
+    try {
+      const result = await execValidateFields(fields);
+      if (result) {
+        callback == null ? void 0 : callback(result);
+      }
+      return result;
+    } catch (err) {
+      const invalidFields = err;
+      callback == null ? void 0 : callback(false, invalidFields);
+      return !callback && Promise.reject(invalidFields);
+    }
   };
-  const onInputKeydown = ($event) => {
-    var _a;
-    (_a = KEYS_MAP[$event.key]) == null ? void 0 : _a.call(KEYS_MAP, $event);
+  const validate = async (callback) => validateFields(void 0, callback);
+  const clearValidate = (fields = []) => {
+    getValidateFields(fields).forEach((field) => field.clearValidate());
   };
-  return {
-    onInputKeydown,
-    useEmitKeyword,
-    onClickHandle
+  const resetFields = (fields = []) => {
+    getValidateFields(fields).forEach((field) => field.resetField());
   };
-};
-const DEFAULT_PREFIX = "icon";
-const iconProps = {
-  name: {
+  return { validate, validateFields, resetFields, clearValidate };
+}
+defineComponent({
+  name: "DForm",
+  props: formProps,
+  emits: ["validate"],
+  setup(props, ctx) {
+    const ns2 = useNamespace("form");
+    const {
+      itemContexts,
+      addItemContext,
+      removeItemContext
+    } = useFieldCollection();
+    const {
+      validate,
+      validateFields,
+      resetFields,
+      clearValidate
+    } = useFormValidation(itemContexts);
+    const onSubmit = (e) => {
+      e.preventDefault();
+    };
+    watch(() => props.rules, () => {
+      if (props.validateOnRuleChange) {
+        validate();
+      }
+    }, {
+      deep: true
+    });
+    provide(FORM_TOKEN, reactive(__spreadProps(__spreadValues({}, toRefs(props)), {
+      emit: ctx.emit,
+      addItemContext,
+      removeItemContext
+    })));
+    ctx.expose({
+      validate,
+      validateFields,
+      resetFields,
+      clearValidate
+    });
+    return () => {
+      var _a, _b;
+      return createVNode("form", {
+        "onSubmit": onSubmit,
+        "class": ns2.b()
+      }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)]);
+    };
+  }
+});
+const formItemProps = {
+  label: {
+    type: String
+  },
+  field: {
     type: String,
-    default: "",
-    required: true
+    default: ""
   },
-  size: {
-    type: [Number, String],
-    default: "inherit"
+  required: {
+    type: Boolean,
+    default: false
   },
-  color: {
-    type: String,
-    default: "inherit"
+  messageType: {
+    type: String
   },
-  component: {
-    type: Object,
-    default: null
+  popPosition: {
+    type: Array
   },
-  classPrefix: {
-    type: String,
-    default: DEFAULT_PREFIX
+  rules: {
+    type: [Object, Array]
   },
-  operable: {
+  showFeedback: {
     type: Boolean,
-    default: false
+    default: void 0
   },
-  disabled: {
-    type: Boolean,
-    default: false
+  helpTips: {
+    type: String,
+    default: ""
   },
-  rotate: {
-    type: [Number, String]
+  feedbackStatus: {
+    type: String
+  },
+  extraInfo: {
+    type: String,
+    default: ""
   }
 };
-const svgIconProps = {
-  name: {
-    type: String,
-    default: "",
-    required: true
-  },
-  color: {
+const FORM_ITEM_TOKEN = Symbol("dFormItem");
+const LABEL_DATA = Symbol("labelData");
+const formLabelProps = {
+  helpTips: {
     type: String,
-    default: "inherit"
-  },
-  size: {
-    type: [Number, String],
-    default: "inherit"
+    default: ""
   }
 };
-var icon = "";
-var svgIcon = defineComponent({
-  name: "DSvgIcon",
-  props: svgIconProps,
-  setup(props) {
-    const {
-      name,
-      color,
-      size
-    } = toRefs(props);
-    const ns2 = useNamespace("svg-icon");
-    const iconName = computed(() => `#icon-${name.value}`);
-    const iconSize = computed(() => {
-      return typeof size.value === "number" ? `${size.value}px` : size.value;
-    });
-    const styles = {
-      width: iconSize.value,
-      height: iconSize.value
-    };
+const fixedOverlayProps = {
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  lockScroll: {
+    type: Boolean,
+    default: true
+  },
+  closeOnClickOverlay: {
+    type: Boolean,
+    default: true
+  }
+};
+function lockScroll() {
+  if (document.documentElement.scrollHeight > document.documentElement.clientHeight) {
+    const scrollTop = document.documentElement.scrollTop;
+    const style = document.documentElement.getAttribute("style");
+    document.documentElement.style.position = "fixed";
+    document.documentElement.style.top = `-${scrollTop}px`;
+    document.documentElement.style.width = document.documentElement.style.width || "100%";
+    document.documentElement.style.overflowY = "scroll";
     return () => {
-      return createVNode("svg", {
-        "class": ns2.b(),
-        "style": styles
-      }, [createVNode("use", {
-        "xlink:href": iconName.value,
-        "fill": color.value
-      }, null)]);
+      if (style) {
+        document.documentElement.setAttribute("style", style);
+      } else {
+        document.documentElement.removeAttribute("style");
+      }
+      document.documentElement.scrollTop = scrollTop;
     };
   }
-});
-function isUrl(value) {
-  return /^((http|https):)?\/\//.test(value);
+  return;
 }
-function useIconDom(props, ctx) {
-  const {
-    component,
-    name,
-    size,
-    color,
-    classPrefix,
-    rotate
-  } = toRefs(props);
-  const ns2 = useNamespace("icon");
-  const iconSize = computed(() => {
-    return typeof size.value === "number" ? `${size.value}px` : size.value;
-  });
-  const IconComponent = component.value ? resolveDynamicComponent(component.value) : resolveDynamicComponent(svgIcon);
-  const imgIconDom = () => {
-    return createVNode("img", mergeProps({
-      "src": name.value,
-      "alt": name.value.split("/")[name.value.split("/").length - 1],
-      "class": [(rotate == null ? void 0 : rotate.value) === "infinite" && ns2.m("spin")],
-      "style": {
-        width: iconSize.value || "",
-        transform: `rotate(${rotate == null ? void 0 : rotate.value}deg)`,
-        verticalAlign: "middle"
-      }
-    }, ctx.attrs), null);
-  };
-  const svgIconDom = () => {
-    return createVNode(IconComponent, mergeProps({
-      "name": name.value,
-      "color": color.value,
-      "size": iconSize.value,
-      "class": [(rotate == null ? void 0 : rotate.value) === "infinite" && ns2.m("spin")],
-      "style": {
-        transform: `rotate(${rotate == null ? void 0 : rotate.value}deg)`
-      }
-    }, ctx.attrs), null);
-  };
-  const fontIconDom = () => {
-    const fontIconClass = /^icon-/.test(name.value) ? name.value : `${classPrefix.value}-${name.value}`;
-    return createVNode("i", mergeProps({
-      "class": [classPrefix.value, fontIconClass, (rotate == null ? void 0 : rotate.value) === "infinite" && ns2.m("spin")],
-      "style": {
-        fontSize: iconSize.value,
-        color: color.value,
-        transform: `rotate(${rotate == null ? void 0 : rotate.value}deg)`
-      }
-    }, ctx.attrs), null);
-  };
-  const iconDom = () => {
-    return component.value ? svgIconDom() : isUrl(name.value) ? imgIconDom() : fontIconDom();
+function useFixedOverlay(props, ctx) {
+  let lockScrollCb;
+  const onClick = (event) => {
+    event.preventDefault();
+    ctx.emit("click", event);
+    if (props.closeOnClickOverlay) {
+      ctx.emit("update:modelValue", false);
+    }
   };
-  return {
-    iconDom
+  const removeBodyAdditions = () => {
+    lockScrollCb == null ? void 0 : lockScrollCb();
   };
+  watch(() => props.modelValue, (val) => {
+    if (val) {
+      props.lockScroll && (lockScrollCb = lockScroll());
+    } else {
+      removeBodyAdditions();
+    }
+  });
+  onUnmounted(removeBodyAdditions);
+  return { onClick };
 }
-var Icon = defineComponent({
-  name: "DIcon",
-  props: iconProps,
-  emits: ["click"],
+var fixedOverlay = "";
+defineComponent({
+  name: "DFixedOverlay",
+  inheritAttrs: false,
+  props: fixedOverlayProps,
+  emits: ["update:modelValue", "click"],
   setup(props, ctx) {
     const {
-      disabled,
-      operable
+      modelValue
     } = toRefs(props);
+    const ns2 = useNamespace("fixed-overlay");
     const {
-      iconDom
-    } = useIconDom(props, ctx);
-    const ns2 = useNamespace("icon");
-    const wrapClassed = computed(() => ({
-      [ns2.e("container")]: true,
-      [ns2.m("disabled")]: disabled.value,
-      [ns2.m("operable")]: operable.value,
-      [ns2.m("no-slots")]: !Object.keys(ctx.slots).length
-    }));
-    const onClick = (e) => {
-      if (disabled.value) {
-        return;
+      onClick
+    } = useFixedOverlay(props, ctx);
+    return () => createVNode(Transition, {
+      "name": ns2.m("fade")
+    }, {
+      default: () => {
+        var _a, _b;
+        return [modelValue.value && createVNode("div", mergeProps({
+          "class": ns2.b()
+        }, ctx.attrs, {
+          "onClick": onClick
+        }), [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)])];
       }
-      ctx.emit("click", e);
-    };
-    return () => {
-      var _a, _b, _c, _d;
-      return createVNode("div", {
-        "class": wrapClassed.value,
-        "onClick": onClick
-      }, [(_b = (_a = ctx.slots).prefix) == null ? void 0 : _b.call(_a), iconDom(), (_d = (_c = ctx.slots).suffix) == null ? void 0 : _d.call(_c)]);
-    };
+    });
   }
 });
-const inputProps = {
+const flexibleOverlayProps = {
   modelValue: {
-    type: String,
-    default: ""
-  },
-  disabled: {
     type: Boolean,
     default: false
   },
-  error: {
-    type: Boolean,
-    default: false
+  origin: {
+    type: Object,
+    require: true
   },
-  size: {
-    type: String
+  position: {
+    type: Array,
+    default: ["bottom"]
   },
-  validateEvent: {
-    type: Boolean,
-    default: true
+  offset: {
+    type: [Number, Object],
+    default: 8
   },
-  prefix: {
-    type: String,
-    default: ""
+  shiftOffset: {
+    type: Number
   },
-  suffix: {
+  align: {
     type: String,
-    default: ""
+    default: null
   },
-  showPassword: {
+  showArrow: {
     type: Boolean,
     default: false
   },
-  clearable: {
+  isArrowCenter: {
     type: Boolean,
-    default: false
-  },
-  placeholder: {
-    type: String,
-    default: ""
-  }
-};
-const formItemProps = {
-  label: {
-    type: String
-  },
-  field: {
-    type: String,
-    default: ""
+    default: true
   },
-  required: {
+  clickEventBubble: {
     type: Boolean,
     default: false
-  },
-  messageType: {
-    type: String
-  },
-  popPosition: {
-    type: Array
-  },
-  rules: {
-    type: [Object, Array]
-  },
-  showFeedback: {
-    type: Boolean,
-    default: void 0
-  },
-  helpTips: {
-    type: String,
-    default: ""
-  },
-  feedbackStatus: {
-    type: String
-  },
-  extraInfo: {
-    type: String,
-    default: ""
   }
 };
-const FORM_ITEM_TOKEN = Symbol("dFormItem");
-const LABEL_DATA = Symbol("labelData");
-const formProps = {
-  data: {
-    type: Object,
-    default: () => ({})
-  },
-  layout: {
-    type: String,
-    default: "horizontal"
-  },
-  labelSize: {
-    type: String,
-    default: "md"
-  },
-  labelAlign: {
-    type: String,
-    default: "start"
-  },
-  rules: {
-    type: Object
-  },
-  messageType: {
-    type: String,
-    default: "popover"
-  },
-  popPosition: {
-    type: Array,
-    default: ["right", "bottom"]
-  },
-  validateOnRuleChange: {
-    type: Boolean,
-    default: false
-  },
-  showFeedback: {
-    type: Boolean,
-    default: false
-  },
-  disabled: {
-    type: Boolean,
-    default: false
-  },
-  size: {
-    type: String
+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;
+    }
   }
-};
-const FORM_TOKEN = Symbol("dForm");
-function useFieldCollection() {
-  const itemContexts = [];
-  const addItemContext = (field) => {
-    itemContexts.push(field);
-  };
-  const removeItemContext = (field) => {
-    itemContexts.splice(itemContexts.indexOf(field), 1);
-  };
-  return { itemContexts, addItemContext, removeItemContext };
+  return window;
 }
-function useFormValidation(itemContexts) {
-  const getValidateFields = (fields) => {
-    if (!itemContexts.length) {
-      return [];
-    }
-    const normalizedFields = lodash.exports.castArray(fields);
-    const filteredFields = normalizedFields.length ? itemContexts.filter((context) => context.field && normalizedFields.includes(context.field)) : itemContexts;
-    if (!filteredFields.length) {
-      return [];
+function adjustArrowPosition(isArrowCenter, point, placement, originRect) {
+  let { x, y } = point;
+  if (!isArrowCenter) {
+    const { width, height } = originRect;
+    if (x && placement.includes("start")) {
+      x = 12;
     }
-    return filteredFields;
-  };
-  const execValidateFields = async (fields = []) => {
-    const validateFields2 = getValidateFields(fields);
-    if (!validateFields2.length) {
-      return true;
+    if (x && placement.includes("end")) {
+      x = Math.round(width - 24);
     }
-    let errors = {};
-    for (const field of validateFields2) {
-      try {
-        await field.validate("");
-      } catch (err) {
-        errors = __spreadValues(__spreadValues({}, errors), err);
-      }
+    if (y && placement.includes("start")) {
+      y = 10;
     }
-    if (!Object.keys(errors).length) {
-      return true;
+    if (y && placement.includes("end")) {
+      y = height - 14;
     }
-    return Promise.reject(errors);
+  }
+  return { x, y };
+}
+function useOverlay(props, emit) {
+  const overlayRef = ref();
+  const arrowRef = ref();
+  let originParent = null;
+  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 validateFields = async (fields = [], callback) => {
-    try {
-      const result = await execValidateFields(fields);
-      if (result) {
-        callback == null ? void 0 : callback(result);
-      }
-      return result;
-    } catch (err) {
-      const invalidFields = err;
-      callback == null ? void 0 : callback(false, invalidFields);
-      return !callback && Promise.reject(invalidFields);
+  const updatePosition = async () => {
+    const hostEl = props.origin;
+    const overlayEl = unref(overlayRef.value);
+    const arrowEl = unref(arrowRef.value);
+    const middleware = [
+      offset(props.offset),
+      autoPlacement({
+        alignment: props.align,
+        allowedPlacements: props.position
+      })
+    ];
+    props.showArrow && middleware.push(arrow({ element: arrowEl }));
+    props.shiftOffset !== void 0 && middleware.push(shift());
+    const { x, y, placement, middlewareData } = await computePosition(hostEl, overlayEl, {
+      strategy: "fixed",
+      middleware
+    });
+    let applyX = x;
+    let applyY = y;
+    if (props.shiftOffset !== void 0) {
+      const { x: shiftX, y: shiftY } = middlewareData.shift;
+      shiftX < 0 && (applyX -= props.shiftOffset);
+      shiftX > 0 && (applyX += props.shiftOffset);
+      shiftY < 0 && (applyY -= props.shiftOffset);
+      shiftY > 0 && (applyY += props.shiftOffset);
     }
+    emit("positionChange", placement);
+    Object.assign(overlayEl.style, { top: `${applyY}px`, left: `${applyX}px` });
+    props.showArrow && updateArrowPosition(arrowEl, placement, middlewareData.arrow, overlayEl);
   };
-  const validate = async (callback) => validateFields(void 0, callback);
-  const clearValidate = (fields = []) => {
-    getValidateFields(fields).forEach((field) => field.clearValidate());
-  };
-  const resetFields = (fields = []) => {
-    getValidateFields(fields).forEach((field) => field.resetField());
-  };
-  return { validate, validateFields, resetFields, clearValidate };
+  watch(() => props.modelValue, () => {
+    if (props.modelValue && props.origin) {
+      originParent = getScrollParent(props.origin);
+      nextTick(updatePosition);
+      originParent == null ? void 0 : originParent.addEventListener("scroll", updatePosition);
+      originParent !== window && window.addEventListener("scroll", updatePosition);
+      window.addEventListener("resize", updatePosition);
+    } else {
+      originParent == null ? void 0 : originParent.removeEventListener("scroll", updatePosition);
+      originParent !== window && window.removeEventListener("scroll", updatePosition);
+      window.removeEventListener("resize", updatePosition);
+    }
+  });
+  onUnmounted(() => {
+    originParent == null ? void 0 : originParent.removeEventListener("scroll", updatePosition);
+    originParent !== window && window.removeEventListener("scroll", updatePosition);
+    window.removeEventListener("resize", updatePosition);
+  });
+  return { arrowRef, overlayRef, updatePosition };
 }
-defineComponent({
-  name: "DForm",
-  props: formProps,
-  emits: ["validate"],
-  setup(props, ctx) {
-    const ns2 = useNamespace("form");
+var flexibleOverlay = "";
+const FlexibleOverlay = defineComponent({
+  name: "DFlexibleOverlay",
+  inheritAttrs: false,
+  props: flexibleOverlayProps,
+  emits: ["update:modelValue", "positionChange"],
+  setup(props, {
+    slots,
+    attrs,
+    emit,
+    expose
+  }) {
+    const ns2 = useNamespace("flexible-overlay");
     const {
-      itemContexts,
-      addItemContext,
-      removeItemContext
-    } = useFieldCollection();
+      clickEventBubble
+    } = toRefs(props);
     const {
-      validate,
-      validateFields,
-      resetFields,
-      clearValidate
-    } = useFormValidation(itemContexts);
-    const onSubmit = (e) => {
-      e.preventDefault();
-    };
-    watch(() => props.rules, () => {
-      if (props.validateOnRuleChange) {
-        validate();
-      }
-    }, {
-      deep: true
-    });
-    provide(FORM_TOKEN, reactive(__spreadProps(__spreadValues({}, toRefs(props)), {
-      emit: ctx.emit,
-      addItemContext,
-      removeItemContext
-    })));
-    ctx.expose({
-      validate,
-      validateFields,
-      resetFields,
-      clearValidate
+      arrowRef,
+      overlayRef,
+      updatePosition
+    } = useOverlay(props, emit);
+    expose({
+      updatePosition
     });
     return () => {
-      var _a, _b;
-      return createVNode("form", {
-        "onSubmit": onSubmit,
+      var _a;
+      return props.modelValue && createVNode("div", mergeProps({
+        "ref": overlayRef,
         "class": ns2.b()
-      }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)]);
+      }, attrs, {
+        "onClick": withModifiers(() => ({}), [clickEventBubble.value ? "" : "stop"]),
+        "onPointerup": withModifiers(() => ({}), ["stop"])
+      }), [(_a = slots.default) == null ? void 0 : _a.call(slots), props.showArrow && createVNode("div", {
+        "ref": arrowRef,
+        "class": ns2.e("arrow")
+      }, null)]);
     };
   }
 });
-const formLabelProps = {
-  helpTips: {
-    type: String,
-    default: ""
-  }
-};
-const fixedOverlayProps = {
-  modelValue: {
-    type: Boolean,
-    default: false
-  },
-  lockScroll: {
-    type: Boolean,
-    default: true
-  },
-  closeOnClickOverlay: {
-    type: Boolean,
-    default: true
-  }
-};
-function lockScroll() {
-  if (document.documentElement.scrollHeight > document.documentElement.clientHeight) {
-    const scrollTop = document.documentElement.scrollTop;
-    const style = document.documentElement.getAttribute("style");
-    document.documentElement.style.position = "fixed";
-    document.documentElement.style.top = `-${scrollTop}px`;
-    document.documentElement.style.width = document.documentElement.style.width || "100%";
-    document.documentElement.style.overflowY = "scroll";
-    return () => {
-      if (style) {
-        document.documentElement.setAttribute("style", style);
-      } else {
-        document.documentElement.removeAttribute("style");
-      }
-      document.documentElement.scrollTop = scrollTop;
-    };
-  }
-  return;
+const POPPER_TRIGGER_TOKEN = Symbol("popper-trigger");
+const isObject = (val) => val !== null && typeof val === "object";
+const ns$1 = useNamespace("popper-trigger");
+function wrapContent(content) {
+  return h("span", { class: ns$1.b() }, content);
 }
-function useFixedOverlay(props, ctx) {
-  let lockScrollCb;
-  const onClick = (event) => {
-    event.preventDefault();
-    ctx.emit("click", event);
-    if (props.closeOnClickOverlay) {
-      ctx.emit("update:modelValue", false);
-    }
-  };
-  const removeBodyAdditions = () => {
-    lockScrollCb == null ? void 0 : lockScrollCb();
-  };
-  watch(() => props.modelValue, (val) => {
-    if (val) {
-      props.lockScroll && (lockScrollCb = lockScroll());
-    } else {
-      removeBodyAdditions();
+function getFirstValidChild(nodes) {
+  for (const child of nodes) {
+    if (isObject(child)) {
+      if (child.type === Comment) {
+        continue;
+      }
+      if (child.type === "svg" || child.type === Text) {
+        return wrapContent(child);
+      }
+      if (child.type === Fragment) {
+        return getFirstValidChild(child.children);
+      }
+      return child;
     }
-  });
-  onUnmounted(removeBodyAdditions);
-  return { onClick };
+    return wrapContent(child);
+  }
+  return null;
 }
-var fixedOverlay = "";
-defineComponent({
-  name: "DFixedOverlay",
-  inheritAttrs: false,
-  props: fixedOverlayProps,
-  emits: ["update:modelValue", "click"],
-  setup(props, ctx) {
-    const {
-      modelValue
-    } = toRefs(props);
-    const ns2 = useNamespace("fixed-overlay");
+var PopperTrigger = defineComponent({
+  name: "DPopperTrigger",
+  setup(_, ctx) {
     const {
-      onClick
-    } = useFixedOverlay(props, ctx);
-    return () => createVNode(Transition, {
-      "name": ns2.m("fade")
-    }, {
-      default: () => {
-        var _a, _b;
-        return [modelValue.value && createVNode("div", mergeProps({
-          "class": ns2.b()
-        }, ctx.attrs, {
-          "onClick": onClick
-        }), [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)])];
+      slots,
+      attrs
+    } = ctx;
+    return () => {
+      var _a;
+      const defaultSlot = (_a = slots.default) == null ? void 0 : _a.call(slots, attrs);
+      const triggerRef = inject(POPPER_TRIGGER_TOKEN);
+      if (!defaultSlot) {
+        return null;
       }
-    });
+      const firstValidChild = getFirstValidChild(defaultSlot);
+      if (!firstValidChild) {
+        return null;
+      }
+      return withDirectives(cloneVNode(firstValidChild, attrs), [[{
+        mounted(el) {
+          triggerRef.value = el;
+        },
+        updated(el) {
+          triggerRef.value = el;
+        },
+        unmounted() {
+          triggerRef.value = null;
+        }
+      }]]);
+    };
   }
 });
-const flexibleOverlayProps = {
-  modelValue: {
+const popoverProps = {
+  isOpen: {
     type: Boolean,
     default: false
   },
-  origin: {
-    type: Object,
-    require: true
-  },
   position: {
     type: Array,
     default: ["bottom"]
   },
+  align: {
+    type: String,
+    default: null
+  },
   offset: {
     type: [Number, Object],
     default: 8
   },
-  shiftOffset: {
-    type: Number
+  content: {
+    type: String,
+    default: ""
   },
-  align: {
+  trigger: {
     type: String,
-    default: null
+    default: "click"
   },
-  showArrow: {
-    type: Boolean,
-    default: false
+  popType: {
+    type: String,
+    default: "default"
   },
-  isArrowCenter: {
+  showAnimation: {
     type: Boolean,
     default: true
   },
-  clickEventBubble: {
+  mouseEnterDelay: {
+    type: Number,
+    default: 150
+  },
+  mouseLeaveDelay: {
+    type: Number,
+    default: 100
+  },
+  disabled: {
     type: Boolean,
     default: false
   }
 };
-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;
+const TransformOriginMap = {
+  top: "50% calc(100% + 8px)",
+  bottom: "50% -8px",
+  left: "calc(100% + 8px)",
+  right: "-8px 50%"
+};
+function usePopover(props, visible, placement, origin, popoverRef) {
+  const { trigger, isOpen } = toRefs(props);
+  const overlayStyles = computed(() => ({
+    zIndex: "var(--devui-z-index-pop-up, 1060)",
+    transformOrigin: TransformOriginMap[placement.value]
+  }));
+  const onDocumentClick = (e) => {
+    var _a, _b;
+    if (!((_a = origin.value) == null ? void 0 : _a.contains(e.target)) && !((_b = popoverRef.value.$el) == null ? void 0 : _b.contains(e.target))) {
+      visible.value = false;
     }
-  }
-  return window;
+  };
+  watch(isOpen, (isOpenVal) => {
+    visible.value = isOpenVal;
+  });
+  watch(visible, () => {
+    if (visible.value && trigger.value !== "manually") {
+      document.addEventListener("click", onDocumentClick);
+    } else {
+      document.removeEventListener("click", onDocumentClick);
+    }
+  });
+  onUnmounted(() => {
+    document.removeEventListener("click", onDocumentClick);
+  });
+  return { overlayStyles };
 }
-function adjustArrowPosition(isArrowCenter, point, placement, originRect) {
-  let { x, y } = point;
-  if (!isArrowCenter) {
-    const { width, height } = originRect;
-    if (x && placement.includes("start")) {
-      x = 12;
+function usePopoverEvent(props, visible, origin) {
+  const { trigger, position, mouseEnterDelay, mouseLeaveDelay, disabled } = toRefs(props);
+  const isClick = computed(() => trigger.value === "click");
+  const placement = ref(position.value[0].split("-")[0]);
+  const isEnter = ref(false);
+  const onClick = () => {
+    if (disabled.value) {
+      return;
     }
-    if (x && placement.includes("end")) {
-      x = Math.round(width - 24);
+    isClick.value && (visible.value = !visible.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 = () => {
+    if (disabled.value) {
+      return;
     }
-    if (y && placement.includes("start")) {
-      y = 10;
+    if (!isClick.value) {
+      isEnter.value = true;
+      enter();
     }
-    if (y && placement.includes("end")) {
-      y = height - 14;
+  };
+  const onMouseleave = () => {
+    if (!isClick.value) {
+      isEnter.value = false;
+      leave();
     }
-  }
-  return { x, y };
-}
-function useOverlay(props, emit) {
-  const overlayRef = ref();
-  const arrowRef = ref();
-  let originParent = null;
-  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 = [
-      offset(props.offset),
-      autoPlacement({
-        alignment: props.align,
-        allowedPlacements: props.position
-      })
-    ];
-    props.showArrow && middleware.push(arrow({ element: arrowEl }));
-    props.shiftOffset !== void 0 && middleware.push(shift());
-    const { x, y, placement, middlewareData } = await computePosition(hostEl, overlayEl, {
-      strategy: "fixed",
-      middleware
-    });
-    let applyX = x;
-    let applyY = y;
-    if (props.shiftOffset !== void 0) {
-      const { x: shiftX, y: shiftY } = middlewareData.shift;
-      shiftX < 0 && (applyX -= props.shiftOffset);
-      shiftX > 0 && (applyX += props.shiftOffset);
-      shiftY < 0 && (applyY -= props.shiftOffset);
-      shiftY > 0 && (applyY += props.shiftOffset);
-    }
-    emit("positionChange", placement);
-    Object.assign(overlayEl.style, { top: `${applyY}px`, left: `${applyX}px` });
-    props.showArrow && updateArrowPosition(arrowEl, placement, middlewareData.arrow, overlayEl);
+  const quickLeave = () => {
+    isEnter.value = false;
+    visible.value = false;
   };
-  watch(() => props.modelValue, () => {
-    if (props.modelValue && props.origin) {
-      originParent = getScrollParent(props.origin);
-      nextTick(updatePosition);
-      originParent == null ? void 0 : originParent.addEventListener("scroll", updatePosition);
-      originParent !== window && window.addEventListener("scroll", updatePosition);
-      window.addEventListener("resize", updatePosition);
-    } else {
-      originParent == null ? void 0 : originParent.removeEventListener("scroll", updatePosition);
-      originParent !== window && window.removeEventListener("scroll", updatePosition);
-      window.removeEventListener("resize", updatePosition);
+  watch(disabled, (newVal) => {
+    if (newVal && visible.value) {
+      quickLeave();
     }
   });
-  onUnmounted(() => {
-    originParent == null ? void 0 : originParent.removeEventListener("scroll", updatePosition);
-    originParent !== window && window.removeEventListener("scroll", updatePosition);
-    window.removeEventListener("resize", updatePosition);
+  const handlePositionChange = (pos) => {
+    placement.value = pos.split("-")[0];
+  };
+  onMounted(() => {
+    if (trigger.value === "click") {
+      origin.value.addEventListener("click", onClick);
+    } else if (trigger.value === "hover") {
+      origin.value.addEventListener("mouseenter", onMouseenter);
+      origin.value.addEventListener("mouseleave", onMouseleave);
+    }
   });
-  return { arrowRef, overlayRef, updatePosition };
+  return { placement, handlePositionChange, onMouseenter, onMouseleave };
 }
-var flexibleOverlay = "";
-const FlexibleOverlay = defineComponent({
-  name: "DFlexibleOverlay",
+const ns = useNamespace("popover");
+function SuccessIcon$1() {
+  return createVNode("svg", {
+    "class": [ns.e("icon"), ns.em("icon", "success")],
+    "viewBox": "0 0 16 16",
+    "version": "1.1",
+    "xmlns": "http://www.w3.org/2000/svg"
+  }, [createVNode("g", {
+    "stroke": "none",
+    "stroke-width": "1",
+    "fill": "none",
+    "fill-rule": "evenodd"
+  }, [createVNode("circle", {
+    "cx": "8",
+    "cy": "8",
+    "r": "7"
+  }, null), createVNode("path", {
+    "d": "M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 Z",
+    "fill-rule": "nonzero"
+  }, null), createVNode("polygon", {
+    "stroke-width": "0.4",
+    "fill-rule": "nonzero",
+    "points": "8.16 10.48 7.32 11.32 6.48 10.48 6.48 10.48 3.6 7.68 4.44 6.84 7.28 9.68 11.52 5.44 12.36 6.28"
+  }, null)])]);
+}
+function WarningIcon() {
+  return createVNode("svg", {
+    "class": [ns.e("icon"), ns.em("icon", "warning")],
+    "viewBox": "0 0 16 16",
+    "version": "1.1",
+    "xmlns": "http://www.w3.org/2000/svg"
+  }, [createVNode("g", {
+    "stroke": "none",
+    "stroke-width": "1",
+    "fill": "none",
+    "fill-rule": "evenodd"
+  }, [createVNode("polygon", {
+    "points": "7.5 1.74501946 1.39184847 13.5954649 7.08947368         14.2207621 13.9973698 13.5954649 10.9383683 5.61273879 8.40084114 1.27624313"
+  }, null), createVNode("path", {
+    "d": "M8.51325441,0.127397589 C8.70423071,0.228333932         8.8605922,0.383286648 8.96244623,0.57254229 L15.8714442,13.4101975         C16.1549662,13.9370117 15.9538562,14.5918482 15.4222523,14.8728158         C15.2642579,14.9563203 15.0879506,15 14.9088903,15 L1.09089441,15         C0.488410063,15 0,14.5159904 0,13.9189343 C0,13.7414873 0.0440768395,13.5667684         0.128340519,13.4101975 L7.03733844,0.57254229 C7.32086049,0.0457280838 7.98165058,-0.153569987         8.51325441,0.127397589 Z M8.87894737,11.2105263 L7.08947368,11.2105263 L7.08947368,13         L8.87894737,13 L8.87894737,11.2105263 Z M8.96842105,4.5 L7,4.5 L7.08947368,9.86842105         L8.87894737,9.86842105 L8.96842105,4.5 Z"
+  }, null)])]);
+}
+function InfoIcon() {
+  return createVNode("svg", {
+    "class": [ns.e("icon"), ns.em("icon", "info")],
+    "viewBox": "0 0 16 16",
+    "version": "1.1",
+    "xmlns": "http://www.w3.org/2000/svg"
+  }, [createVNode("g", {
+    "stroke": "none",
+    "stroke-width": "1",
+    "fill": "none",
+    "fill-rule": "evenodd"
+  }, [createVNode("circle", {
+    "cx": "8",
+    "cy": "8",
+    "r": "7"
+  }, null), createVNode("g", {
+    "stroke-width": "1"
+  }, [createVNode("path", {
+    "d": "M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16           C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 Z M9,5 L7,5 L7,3 L9,3 L9,5 Z M9,12.6 L7,12.6 L7,6.6 L9,6.6 L9,12.6 Z"
+  }, null)])])]);
+}
+function ErrorIcon$1() {
+  return createVNode("svg", {
+    "class": [ns.e("icon"), ns.em("icon", "error")],
+    "width": "16px",
+    "height": "16px",
+    "viewBox": "0 0 16 16",
+    "version": "1.1",
+    "xmlns": "http://www.w3.org/2000/svg"
+  }, [createVNode("g", {
+    "stroke": "none",
+    "stroke-width": "1",
+    "fill": "none",
+    "fill-rule": "evenodd"
+  }, [createVNode("circle", {
+    "cx": "8",
+    "cy": "8",
+    "r": "7"
+  }, null), createVNode("path", {
+    "d": "M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8           C16,3.6 12.4,0 8,0 Z M9,12.6 L7,12.6 L7,10.6 L9,10.6 L9,12.6 Z M9,9.1 L7,9.1 L6.9,3.1 L9.1,3.1 L9,9.1 Z",
+    "fill-rule": "nonzero"
+  }, null)])]);
+}
+var popoverIcon = "";
+var PopoverIcon = defineComponent({
+  props: {
+    type: {
+      type: String,
+      default: "default"
+    }
+  },
+  setup(props) {
+    const ns2 = useNamespace("popover");
+    return () => props.type && props.type !== "default" && createVNode("span", {
+      "class": ns2.e("icon-wrap")
+    }, [props.type === "success" && createVNode(SuccessIcon$1, null, null), props.type === "warning" && createVNode(WarningIcon, null, null), props.type === "info" && createVNode(InfoIcon, null, null), props.type === "error" && createVNode(ErrorIcon$1, null, null)]);
+  }
+});
+var popover = "";
+var Popover = defineComponent({
+  name: "DPopover",
   inheritAttrs: false,
-  props: flexibleOverlayProps,
-  emits: ["update:modelValue", "positionChange"],
+  props: popoverProps,
+  emits: ["show", "hide"],
   setup(props, {
     slots,
     attrs,
-    emit,
-    expose
+    emit
   }) {
-    const ns2 = useNamespace("flexible-overlay");
     const {
-      clickEventBubble
+      content,
+      popType,
+      position,
+      align,
+      offset: offset2,
+      showAnimation
     } = toRefs(props);
+    const origin = ref();
+    const popoverRef = ref();
+    const visible = ref(false);
     const {
-      arrowRef,
-      overlayRef,
-      updatePosition
-    } = useOverlay(props, emit);
-    expose({
-      updatePosition
-    });
-    return () => {
-      var _a;
-      return props.modelValue && createVNode("div", mergeProps({
-        "ref": overlayRef,
-        "class": ns2.b()
-      }, attrs, {
-        "onClick": withModifiers(() => ({}), [clickEventBubble.value ? "" : "stop"]),
-        "onPointerup": withModifiers(() => ({}), ["stop"])
-      }), [(_a = slots.default) == null ? void 0 : _a.call(slots), props.showArrow && createVNode("div", {
-        "ref": arrowRef,
-        "class": ns2.e("arrow")
-      }, null)]);
-    };
-  }
-});
-const POPPER_TRIGGER_TOKEN = Symbol("popper-trigger");
-const isObject = (val) => val !== null && typeof val === "object";
-const ns$1 = useNamespace("popper-trigger");
-function wrapContent(content) {
-  return h("span", { class: ns$1.b() }, content);
-}
-function getFirstValidChild(nodes) {
-  for (const child of nodes) {
-    if (isObject(child)) {
-      if (child.type === Comment) {
-        continue;
+      placement,
+      handlePositionChange,
+      onMouseenter,
+      onMouseleave
+    } = usePopoverEvent(props, visible, origin);
+    const {
+      overlayStyles
+    } = usePopover(props, visible, placement, origin, popoverRef);
+    const ns2 = useNamespace("popover");
+    provide(POPPER_TRIGGER_TOKEN, origin);
+    watch(visible, (newVal) => {
+      if (newVal) {
+        emit("show");
+      } else {
+        emit("hide");
       }
-      if (child.type === "svg" || child.type === Text) {
-        return wrapContent(child);
+    });
+    return () => createVNode(Fragment, null, [createVNode(PopperTrigger, null, {
+      default: () => {
+        var _a;
+        return [(_a = slots.default) == null ? void 0 : _a.call(slots)];
       }
-      if (child.type === Fragment) {
-        return getFirstValidChild(child.children);
-      }
-      return child;
-    }
-    return wrapContent(child);
-  }
-  return null;
-}
-var PopperTrigger = defineComponent({
-  name: "DPopperTrigger",
-  setup(_, ctx) {
-    const {
-      slots,
-      attrs
-    } = ctx;
-    return () => {
-      var _a;
-      const defaultSlot = (_a = slots.default) == null ? void 0 : _a.call(slots, attrs);
-      const triggerRef = inject(POPPER_TRIGGER_TOKEN);
-      if (!defaultSlot) {
-        return null;
-      }
-      const firstValidChild = getFirstValidChild(defaultSlot);
-      if (!firstValidChild) {
-        return null;
-      }
-      return withDirectives(cloneVNode(firstValidChild, attrs), [[{
-        mounted(el) {
-          triggerRef.value = el;
-        },
-        updated(el) {
-          triggerRef.value = el;
-        },
-        unmounted() {
-          triggerRef.value = null;
-        }
-      }]]);
-    };
+    }), createVNode(Teleport, {
+      "to": "body"
+    }, {
+      default: () => [createVNode(Transition, {
+        "name": showAnimation.value ? ns2.m(`fade-${placement.value}`) : ""
+      }, {
+        default: () => [createVNode(FlexibleOverlay, mergeProps({
+          "modelValue": visible.value,
+          "onUpdate:modelValue": ($event) => visible.value = $event,
+          "ref": popoverRef,
+          "origin": origin.value,
+          "position": position.value,
+          "align": align.value,
+          "offset": offset2.value,
+          "class": [ns2.e("content"), popType.value !== "default" ? "is-icon" : ""],
+          "show-arrow": true,
+          "is-arrow-center": false,
+          "style": overlayStyles.value
+        }, attrs, {
+          "onPositionChange": handlePositionChange,
+          "onMouseenter": onMouseenter,
+          "onMouseleave": onMouseleave
+        }), {
+          default: () => {
+            var _a;
+            return [createVNode(PopoverIcon, {
+              "type": popType.value
+            }, null), ((_a = slots.content) == null ? void 0 : _a.call(slots)) || createVNode("span", null, [content.value])];
+          }
+        })]
+      })]
+    })]);
   }
 });
-const popoverProps = {
-  isOpen: {
-    type: Boolean,
-    default: false
-  },
-  position: {
-    type: Array,
-    default: ["bottom"]
-  },
-  align: {
-    type: String,
-    default: null
-  },
-  offset: {
-    type: [Number, Object],
-    default: 8
-  },
-  content: {
-    type: String,
-    default: ""
-  },
-  trigger: {
-    type: String,
-    default: "click"
-  },
-  popType: {
-    type: String,
-    default: "default"
-  },
-  showAnimation: {
-    type: Boolean,
-    default: true
-  },
-  mouseEnterDelay: {
-    type: Number,
-    default: 150
-  },
-  mouseLeaveDelay: {
-    type: Number,
-    default: 100
-  },
-  disabled: {
-    type: Boolean,
-    default: false
-  }
-};
-const TransformOriginMap = {
-  top: "50% calc(100% + 8px)",
-  bottom: "50% -8px",
-  left: "calc(100% + 8px)",
-  right: "-8px 50%"
-};
-function usePopover(props, visible, placement, origin, popoverRef) {
-  const { trigger, isOpen } = toRefs(props);
-  const overlayStyles = computed(() => ({
-    zIndex: "var(--devui-z-index-pop-up, 1060)",
-    transformOrigin: TransformOriginMap[placement.value]
-  }));
-  const onDocumentClick = (e) => {
-    var _a, _b;
-    if (!((_a = origin.value) == null ? void 0 : _a.contains(e.target)) && !((_b = popoverRef.value.$el) == null ? void 0 : _b.contains(e.target))) {
-      visible.value = false;
-    }
-  };
-  watch(isOpen, (isOpenVal) => {
-    visible.value = isOpenVal;
-  });
-  watch(visible, () => {
-    if (visible.value && trigger.value !== "manually") {
-      document.addEventListener("click", onDocumentClick);
-    } else {
-      document.removeEventListener("click", onDocumentClick);
-    }
-  });
-  onUnmounted(() => {
-    document.removeEventListener("click", onDocumentClick);
-  });
-  return { overlayStyles };
-}
-function usePopoverEvent(props, visible, origin) {
-  const { trigger, position, mouseEnterDelay, mouseLeaveDelay, disabled } = toRefs(props);
-  const isClick = computed(() => trigger.value === "click");
-  const placement = ref(position.value[0].split("-")[0]);
-  const isEnter = ref(false);
-  const onClick = () => {
-    if (disabled.value) {
-      return;
-    }
-    isClick.value && (visible.value = !visible.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 = () => {
-    if (disabled.value) {
-      return;
-    }
-    if (!isClick.value) {
-      isEnter.value = true;
-      enter();
-    }
-  };
-  const onMouseleave = () => {
-    if (!isClick.value) {
-      isEnter.value = false;
-      leave();
-    }
-  };
-  const quickLeave = () => {
-    isEnter.value = false;
-    visible.value = false;
-  };
-  watch(disabled, (newVal) => {
-    if (newVal && visible.value) {
-      quickLeave();
-    }
-  });
-  const handlePositionChange = (pos) => {
-    placement.value = pos.split("-")[0];
-  };
-  onMounted(() => {
-    if (trigger.value === "click") {
-      origin.value.addEventListener("click", onClick);
-    } else if (trigger.value === "hover") {
-      origin.value.addEventListener("mouseenter", onMouseenter);
-      origin.value.addEventListener("mouseleave", onMouseleave);
-    }
-  });
-  return { placement, handlePositionChange, onMouseenter, onMouseleave };
-}
-const ns = useNamespace("popover");
-function SuccessIcon$1() {
+function HelpTipsIcon() {
   return createVNode("svg", {
-    "class": [ns.e("icon"), ns.em("icon", "success")],
-    "viewBox": "0 0 16 16",
-    "version": "1.1",
-    "xmlns": "http://www.w3.org/2000/svg"
+    "width": "16px",
+    "height": "16px",
+    "viewBox": "0 0 16 16"
   }, [createVNode("g", {
     "stroke": "none",
     "stroke-width": "1",
     "fill": "none",
     "fill-rule": "evenodd"
-  }, [createVNode("circle", {
-    "cx": "8",
-    "cy": "8",
-    "r": "7"
-  }, null), createVNode("path", {
-    "d": "M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 Z",
+  }, [createVNode("g", null, [createVNode("path", {
+    "d": "M8.5,8.95852078 L8.5,11 L7.5,11 L7.5,8.5 C7.5,8.22385763             7.72385763,8 8,8 C9.1045695,8 10,7.1045695 10,6 C10,4.8954305             9.1045695,4 8,4 C6.8954305,4 6,4.8954305 6,6 L5,6 C5,4.34314575             6.34314575,3 8,3 C9.65685425,3 11,4.34314575 11,6 C11,7.48649814             9.91885667,8.72048173 8.5,8.95852078 L8.5,8.95852078 Z M8,16 C3.581722,16             0,12.418278 0,8 C0,3.581722 3.581722,0 8,0 C12.418278,0 16,3.581722 16,8 C16,12.418278             12.418278,16 8,16 Z M8,15 C11.8659932,15 15,11.8659932 15,8 C15,4.13400675 11.8659932,1 8,1             C4.13400675,1 1,4.13400675 1,8 C1,11.8659932 4.13400675,15 8,15 Z M7.5,12 L8.5,12 L8.5,13 L7.5,13 L7.5,12 Z",
+    "fill": "#293040",
     "fill-rule": "nonzero"
-  }, null), createVNode("polygon", {
-    "stroke-width": "0.4",
-    "fill-rule": "nonzero",
-    "points": "8.16 10.48 7.32 11.32 6.48 10.48 6.48 10.48 3.6 7.68 4.44 6.84 7.28 9.68 11.52 5.44 12.36 6.28"
-  }, null)])]);
+  }, null)])])]);
 }
-function WarningIcon() {
+function ErrorIcon() {
   return createVNode("svg", {
-    "class": [ns.e("icon"), ns.em("icon", "warning")],
-    "viewBox": "0 0 16 16",
-    "version": "1.1",
-    "xmlns": "http://www.w3.org/2000/svg"
+    "width": "14px",
+    "height": "14px",
+    "viewBox": "0 0 16 16"
   }, [createVNode("g", {
     "stroke": "none",
     "stroke-width": "1",
     "fill": "none",
     "fill-rule": "evenodd"
-  }, [createVNode("polygon", {
-    "points": "7.5 1.74501946 1.39184847 13.5954649 7.08947368         14.2207621 13.9973698 13.5954649 10.9383683 5.61273879 8.40084114 1.27624313"
-  }, null), createVNode("path", {
-    "d": "M8.51325441,0.127397589 C8.70423071,0.228333932         8.8605922,0.383286648 8.96244623,0.57254229 L15.8714442,13.4101975         C16.1549662,13.9370117 15.9538562,14.5918482 15.4222523,14.8728158         C15.2642579,14.9563203 15.0879506,15 14.9088903,15 L1.09089441,15         C0.488410063,15 0,14.5159904 0,13.9189343 C0,13.7414873 0.0440768395,13.5667684         0.128340519,13.4101975 L7.03733844,0.57254229 C7.32086049,0.0457280838 7.98165058,-0.153569987         8.51325441,0.127397589 Z M8.87894737,11.2105263 L7.08947368,11.2105263 L7.08947368,13         L8.87894737,13 L8.87894737,11.2105263 Z M8.96842105,4.5 L7,4.5 L7.08947368,9.86842105         L8.87894737,9.86842105 L8.96842105,4.5 Z"
+  }, [createVNode("circle", {
+    "cx": "8",
+    "cy": "8",
+    "r": "8"
+  }, null), createVNode("polygon", {
+    "points": "8.07106781 6.65685425 10.8994949 3.82842712 12.3137085         5.24264069 9.48528137 8.07106781 12.3137085 10.8994949 10.8994949 12.3137085         8.07106781 9.48528137 5.24264069 12.3137085 3.82842712 10.8994949 6.65685425         8.07106781 3.82842712 5.24264069 5.24264069 3.82842712"
   }, null)])]);
 }
-function InfoIcon() {
+function SuccessIcon() {
   return createVNode("svg", {
-    "class": [ns.e("icon"), ns.em("icon", "info")],
-    "viewBox": "0 0 16 16",
-    "version": "1.1",
-    "xmlns": "http://www.w3.org/2000/svg"
-  }, [createVNode("g", {
-    "stroke": "none",
-    "stroke-width": "1",
-    "fill": "none",
-    "fill-rule": "evenodd"
-  }, [createVNode("circle", {
-    "cx": "8",
-    "cy": "8",
-    "r": "7"
-  }, null), createVNode("g", {
-    "stroke-width": "1"
-  }, [createVNode("path", {
-    "d": "M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16           C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 Z M9,5 L7,5 L7,3 L9,3 L9,5 Z M9,12.6 L7,12.6 L7,6.6 L9,6.6 L9,12.6 Z"
-  }, null)])])]);
-}
-function ErrorIcon$1() {
-  return createVNode("svg", {
-    "class": [ns.e("icon"), ns.em("icon", "error")],
-    "width": "16px",
-    "height": "16px",
-    "viewBox": "0 0 16 16",
-    "version": "1.1",
-    "xmlns": "http://www.w3.org/2000/svg"
-  }, [createVNode("g", {
-    "stroke": "none",
-    "stroke-width": "1",
-    "fill": "none",
-    "fill-rule": "evenodd"
-  }, [createVNode("circle", {
-    "cx": "8",
-    "cy": "8",
-    "r": "7"
-  }, null), createVNode("path", {
-    "d": "M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8           C16,3.6 12.4,0 8,0 Z M9,12.6 L7,12.6 L7,10.6 L9,10.6 L9,12.6 Z M9,9.1 L7,9.1 L6.9,3.1 L9.1,3.1 L9,9.1 Z",
-    "fill-rule": "nonzero"
-  }, null)])]);
-}
-var popoverIcon = "";
-var PopoverIcon = defineComponent({
-  props: {
-    type: {
-      type: String,
-      default: "default"
-    }
-  },
-  setup(props) {
-    const ns2 = useNamespace("popover");
-    return () => props.type && props.type !== "default" && createVNode("span", {
-      "class": ns2.e("icon-wrap")
-    }, [props.type === "success" && createVNode(SuccessIcon$1, null, null), props.type === "warning" && createVNode(WarningIcon, null, null), props.type === "info" && createVNode(InfoIcon, null, null), props.type === "error" && createVNode(ErrorIcon$1, null, null)]);
-  }
-});
-var popover = "";
-var Popover = defineComponent({
-  name: "DPopover",
-  inheritAttrs: false,
-  props: popoverProps,
-  emits: ["show", "hide"],
-  setup(props, {
-    slots,
-    attrs,
-    emit
-  }) {
-    const {
-      content,
-      popType,
-      position,
-      align,
-      offset: offset2,
-      showAnimation
-    } = toRefs(props);
-    const origin = ref();
-    const popoverRef = ref();
-    const visible = ref(false);
-    const {
-      placement,
-      handlePositionChange,
-      onMouseenter,
-      onMouseleave
-    } = usePopoverEvent(props, visible, origin);
-    const {
-      overlayStyles
-    } = usePopover(props, visible, placement, origin, popoverRef);
-    const ns2 = useNamespace("popover");
-    provide(POPPER_TRIGGER_TOKEN, origin);
-    watch(visible, (newVal) => {
-      if (newVal) {
-        emit("show");
-      } else {
-        emit("hide");
-      }
-    });
-    return () => createVNode(Fragment, null, [createVNode(PopperTrigger, null, {
-      default: () => {
-        var _a;
-        return [(_a = slots.default) == null ? void 0 : _a.call(slots)];
-      }
-    }), createVNode(Teleport, {
-      "to": "body"
-    }, {
-      default: () => [createVNode(Transition, {
-        "name": showAnimation.value ? ns2.m(`fade-${placement.value}`) : ""
-      }, {
-        default: () => [createVNode(FlexibleOverlay, mergeProps({
-          "modelValue": visible.value,
-          "onUpdate:modelValue": ($event) => visible.value = $event,
-          "ref": popoverRef,
-          "origin": origin.value,
-          "position": position.value,
-          "align": align.value,
-          "offset": offset2.value,
-          "class": [ns2.e("content"), popType.value !== "default" ? "is-icon" : ""],
-          "show-arrow": true,
-          "is-arrow-center": false,
-          "style": overlayStyles.value
-        }, attrs, {
-          "onPositionChange": handlePositionChange,
-          "onMouseenter": onMouseenter,
-          "onMouseleave": onMouseleave
-        }), {
-          default: () => {
-            var _a;
-            return [createVNode(PopoverIcon, {
-              "type": popType.value
-            }, null), ((_a = slots.content) == null ? void 0 : _a.call(slots)) || createVNode("span", null, [content.value])];
-          }
-        })]
-      })]
-    })]);
-  }
-});
-function HelpTipsIcon() {
-  return createVNode("svg", {
-    "width": "16px",
-    "height": "16px",
-    "viewBox": "0 0 16 16"
-  }, [createVNode("g", {
-    "stroke": "none",
-    "stroke-width": "1",
-    "fill": "none",
-    "fill-rule": "evenodd"
-  }, [createVNode("g", null, [createVNode("path", {
-    "d": "M8.5,8.95852078 L8.5,11 L7.5,11 L7.5,8.5 C7.5,8.22385763             7.72385763,8 8,8 C9.1045695,8 10,7.1045695 10,6 C10,4.8954305             9.1045695,4 8,4 C6.8954305,4 6,4.8954305 6,6 L5,6 C5,4.34314575             6.34314575,3 8,3 C9.65685425,3 11,4.34314575 11,6 C11,7.48649814             9.91885667,8.72048173 8.5,8.95852078 L8.5,8.95852078 Z M8,16 C3.581722,16             0,12.418278 0,8 C0,3.581722 3.581722,0 8,0 C12.418278,0 16,3.581722 16,8 C16,12.418278             12.418278,16 8,16 Z M8,15 C11.8659932,15 15,11.8659932 15,8 C15,4.13400675 11.8659932,1 8,1             C4.13400675,1 1,4.13400675 1,8 C1,11.8659932 4.13400675,15 8,15 Z M7.5,12 L8.5,12 L8.5,13 L7.5,13 L7.5,12 Z",
-    "fill": "#293040",
-    "fill-rule": "nonzero"
-  }, null)])])]);
-}
-function ErrorIcon() {
-  return createVNode("svg", {
-    "width": "14px",
-    "height": "14px",
-    "viewBox": "0 0 16 16"
-  }, [createVNode("g", {
-    "stroke": "none",
-    "stroke-width": "1",
-    "fill": "none",
-    "fill-rule": "evenodd"
-  }, [createVNode("circle", {
-    "cx": "8",
-    "cy": "8",
-    "r": "8"
-  }, null), createVNode("polygon", {
-    "points": "8.07106781 6.65685425 10.8994949 3.82842712 12.3137085         5.24264069 9.48528137 8.07106781 12.3137085 10.8994949 10.8994949 12.3137085         8.07106781 9.48528137 5.24264069 12.3137085 3.82842712 10.8994949 6.65685425         8.07106781 3.82842712 5.24264069 5.24264069 3.82842712"
-  }, null)])]);
-}
-function SuccessIcon() {
-  return createVNode("svg", {
-    "width": "14px",
-    "height": "14px",
-    "viewBox": "0 0 16 16"
+    "width": "14px",
+    "height": "14px",
+    "viewBox": "0 0 16 16"
   }, [createVNode("g", {
     "stroke": "none",
     "stroke-width": "1",
@@ -7883,183 +7604,462 @@ function useFormItemValidate(props, _rules) {
       } else {
         return rule.trigger === triggerVal;
       }
-    }).map((_a) => {
-      var rule = __objRest(_a, []);
-      return rule;
-    });
-  };
-  const onValidateSuccess = () => {
-    validateState.value = "success";
-    validateMessage.value = "";
-    formContext.emit("validate", props.field, true, "");
-  };
-  const onValidateError = ({ errors }) => {
-    var _a;
-    validateState.value = "error";
-    validateMessage.value = ((_a = errors == null ? void 0 : errors[0]) == null ? void 0 : _a.message) || "";
-    formContext.emit("validate", props.field, false, validateMessage.value);
+    }).map((_a) => {
+      var rule = __objRest(_a, []);
+      return rule;
+    });
+  };
+  const onValidateSuccess = () => {
+    validateState.value = "success";
+    validateMessage.value = "";
+    formContext.emit("validate", props.field, true, "");
+  };
+  const onValidateError = ({ errors }) => {
+    var _a;
+    validateState.value = "error";
+    validateMessage.value = ((_a = errors == null ? void 0 : errors[0]) == null ? void 0 : _a.message) || "";
+    formContext.emit("validate", props.field, false, validateMessage.value);
+  };
+  const execValidate = async (rules2) => {
+    const ruleName = computedField.value;
+    const validator = new Schema({
+      [ruleName]: rules2
+    });
+    return validator.validate({ [ruleName]: fieldValue.value }, { firstFields: true }).then(() => {
+      onValidateSuccess();
+      return true;
+    }).catch((error) => {
+      onValidateError(error);
+      return Promise.reject(error);
+    });
+  };
+  const validate = async (trigger, callback) => {
+    if (isResetting) {
+      isResetting = false;
+      return false;
+    }
+    const rules2 = getRuleByTrigger(trigger);
+    if (!rules2.length) {
+      callback == null ? void 0 : callback(true);
+      return true;
+    }
+    validateState.value = "pending";
+    return execValidate(rules2).then(() => {
+      callback == null ? void 0 : callback(true);
+      return true;
+    }).catch((error) => {
+      const { fields } = error;
+      callback == null ? void 0 : callback(false, fields);
+      return lodash.exports.isFunction(callback) ? false : Promise.reject(fields);
+    });
+  };
+  const clearValidate = () => {
+    validateState.value = "";
+    validateMessage.value = "";
+  };
+  const resetField = async () => {
+    if (!formContext.data || !props.field) {
+      return;
+    }
+    const currentValue = getFieldValue(formContext.data, props.field);
+    if (!lodash.exports.isEqual(currentValue.value, initFieldValue)) {
+      isResetting = true;
+    }
+    currentValue.value = initFieldValue;
+    await nextTick();
+    clearValidate();
+  };
+  onMounted(() => {
+    initFieldValue = lodash.exports.clone(fieldValue.value);
+  });
+  return { validateState, validateMessage, validate, resetField, clearValidate };
+}
+var formItem = "";
+defineComponent({
+  name: "DFormItem",
+  props: formItemProps,
+  setup(props, ctx) {
+    const formContext = inject(FORM_TOKEN);
+    const _a = toRefs(props), {
+      messageType: itemMessageType,
+      popPosition: itemPopPosition,
+      showFeedback: itemShowFeedback
+    } = _a, otherProps = __objRest(_a, [
+      "messageType",
+      "popPosition",
+      "showFeedback"
+    ]);
+    const {
+      label,
+      helpTips,
+      feedbackStatus,
+      extraInfo
+    } = toRefs(props);
+    const showFeedback = computed(() => (itemShowFeedback == null ? void 0 : itemShowFeedback.value) !== void 0 ? itemShowFeedback.value : formContext.showFeedback);
+    const messageType = computed(() => (itemMessageType == null ? void 0 : itemMessageType.value) || formContext.messageType);
+    const popPosition = computed(() => (itemPopPosition == null ? void 0 : itemPopPosition.value) || formContext.popPosition);
+    const {
+      _rules
+    } = useFormItemRule(props);
+    const {
+      validateState,
+      validateMessage,
+      validate,
+      resetField,
+      clearValidate
+    } = useFormItemValidate(props, _rules);
+    const {
+      itemClasses,
+      isRequired
+    } = useFormItem(messageType, _rules, validateState);
+    const labelData = computed(() => ({
+      layout: formContext.layout,
+      labelSize: formContext.labelSize,
+      labelAlign: formContext.labelAlign
+    }));
+    provide(LABEL_DATA, labelData);
+    const context = reactive(__spreadProps(__spreadValues({}, otherProps), {
+      showFeedback,
+      messageType,
+      popPosition,
+      isRequired,
+      validateState,
+      validateMessage,
+      validate,
+      resetField,
+      clearValidate
+    }));
+    provide(FORM_ITEM_TOKEN, context);
+    ctx.expose({
+      resetField,
+      clearValidate
+    });
+    onMounted(() => {
+      if (props.field) {
+        formContext == null ? void 0 : formContext.addItemContext(context);
+      }
+    });
+    onBeforeUnmount(() => {
+      formContext == null ? void 0 : formContext.removeItemContext(context);
+    });
+    return () => createVNode("div", {
+      "class": itemClasses.value
+    }, [createVNode(FormLabel, {
+      "help-tips": helpTips.value
+    }, {
+      default: () => [label == null ? void 0 : label.value]
+    }), createVNode(FormControl, {
+      "feedback-status": feedbackStatus == null ? void 0 : feedbackStatus.value,
+      "extra-info": extraInfo.value
+    }, {
+      default: () => {
+        var _a2, _b;
+        return [(_b = (_a2 = ctx.slots).default) == null ? void 0 : _b.call(_a2)];
+      }
+    })]);
+  }
+});
+var formOperation = "";
+defineComponent({
+  name: "DFormOperation",
+  setup(props, ctx) {
+    const formContext = inject(FORM_TOKEN);
+    const LabelSizeMap = {
+      sm: 80,
+      md: 100,
+      lg: 150
+    };
+    const styles = computed(() => ({
+      marginLeft: formContext.layout === "horizontal" ? `${LabelSizeMap[formContext.labelSize] + 16}px` : void 0
+    }));
+    return () => {
+      var _a, _b;
+      return createVNode("div", {
+        "class": "devui-form-operation",
+        "style": styles.value
+      }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)]);
+    };
+  }
+});
+const useSearchClass = (props, isFocus) => {
+  const formContext = inject(FORM_TOKEN, void 0);
+  const ICON_POSITION = {
+    right: "right",
+    left: "left"
+  };
+  const ns2 = useNamespace("search");
+  const searchSize = computed(() => props.size || (formContext == null ? void 0 : formContext.size) || "md");
+  const rootClass = computed(() => ({
+    [ns2.b()]: true,
+    [ns2.m("focus")]: isFocus.value,
+    [ns2.m("disabled")]: props.disabled,
+    [ns2.m("no-border")]: props.noBorder,
+    [ns2.m(searchSize.value)]: !!searchSize.value,
+    [ns2.m(props.iconPosition)]: ICON_POSITION[props.iconPosition]
+  }));
+  return {
+    rootClass,
+    searchSize
+  };
+};
+const keywordsHandles = (ctx, props) => {
+  const keywords = ref("");
+  watch(() => props.modelValue, (val) => {
+    keywords.value = val;
+  }, { immediate: true });
+  const onClearHandle = () => {
+    keywords.value = "";
+    ctx.emit("update:modelValue", "");
+    ctx.emit("search", "");
+  };
+  const clearIconShow = computed(() => keywords.value.length > 0);
+  return {
+    keywords,
+    clearIconShow,
+    onClearHandle
+  };
+};
+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;
+      useEmitKeyword(value);
+    }
+  };
+  const onClickHandle = () => {
+    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);
+  };
+  return {
+    onInputKeydown,
+    useEmitKeyword,
+    onClickHandle
+  };
+};
+const DEFAULT_PREFIX = "icon";
+const iconProps = {
+  name: {
+    type: String,
+    default: "",
+    required: true
+  },
+  size: {
+    type: [Number, String],
+    default: "inherit"
+  },
+  color: {
+    type: String,
+    default: "inherit"
+  },
+  component: {
+    type: Object,
+    default: null
+  },
+  classPrefix: {
+    type: String,
+    default: DEFAULT_PREFIX
+  },
+  operable: {
+    type: Boolean,
+    default: false
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  rotate: {
+    type: [Number, String]
+  }
+};
+const svgIconProps = {
+  name: {
+    type: String,
+    default: "",
+    required: true
+  },
+  color: {
+    type: String,
+    default: "inherit"
+  },
+  size: {
+    type: [Number, String],
+    default: "inherit"
+  }
+};
+var icon = "";
+var svgIcon = defineComponent({
+  name: "DSvgIcon",
+  props: svgIconProps,
+  setup(props) {
+    const {
+      name,
+      color,
+      size
+    } = toRefs(props);
+    const ns2 = useNamespace("svg-icon");
+    const iconName = computed(() => `#icon-${name.value}`);
+    const iconSize = computed(() => {
+      return typeof size.value === "number" ? `${size.value}px` : size.value;
+    });
+    const styles = {
+      width: iconSize.value,
+      height: iconSize.value
+    };
+    return () => {
+      return createVNode("svg", {
+        "class": ns2.b(),
+        "style": styles
+      }, [createVNode("use", {
+        "xlink:href": iconName.value,
+        "fill": color.value
+      }, null)]);
+    };
+  }
+});
+function isUrl(value) {
+  return /^((http|https):)?\/\//.test(value);
+}
+function useIconDom(props, ctx) {
+  const {
+    component,
+    name,
+    size,
+    color,
+    classPrefix,
+    rotate
+  } = toRefs(props);
+  const ns2 = useNamespace("icon");
+  const iconSize = computed(() => {
+    return typeof size.value === "number" ? `${size.value}px` : size.value;
+  });
+  const IconComponent = component.value ? resolveDynamicComponent(component.value) : resolveDynamicComponent(svgIcon);
+  const imgIconDom = () => {
+    return createVNode("img", mergeProps({
+      "src": name.value,
+      "alt": name.value.split("/")[name.value.split("/").length - 1],
+      "class": [(rotate == null ? void 0 : rotate.value) === "infinite" && ns2.m("spin")],
+      "style": {
+        width: iconSize.value || "",
+        transform: `rotate(${rotate == null ? void 0 : rotate.value}deg)`,
+        verticalAlign: "middle"
+      }
+    }, ctx.attrs), null);
   };
-  const execValidate = async (rules2) => {
-    const ruleName = computedField.value;
-    const validator = new Schema({
-      [ruleName]: rules2
-    });
-    return validator.validate({ [ruleName]: fieldValue.value }, { firstFields: true }).then(() => {
-      onValidateSuccess();
-      return true;
-    }).catch((error) => {
-      onValidateError(error);
-      return Promise.reject(error);
-    });
+  const svgIconDom = () => {
+    return createVNode(IconComponent, mergeProps({
+      "name": name.value,
+      "color": color.value,
+      "size": iconSize.value,
+      "class": [(rotate == null ? void 0 : rotate.value) === "infinite" && ns2.m("spin")],
+      "style": {
+        transform: `rotate(${rotate == null ? void 0 : rotate.value}deg)`
+      }
+    }, ctx.attrs), null);
   };
-  const validate = async (trigger, callback) => {
-    if (isResetting) {
-      isResetting = false;
-      return false;
-    }
-    const rules2 = getRuleByTrigger(trigger);
-    if (!rules2.length) {
-      callback == null ? void 0 : callback(true);
-      return true;
-    }
-    validateState.value = "pending";
-    return execValidate(rules2).then(() => {
-      callback == null ? void 0 : callback(true);
-      return true;
-    }).catch((error) => {
-      const { fields } = error;
-      callback == null ? void 0 : callback(false, fields);
-      return lodash.exports.isFunction(callback) ? false : Promise.reject(fields);
-    });
+  const fontIconDom = () => {
+    const fontIconClass = /^icon-/.test(name.value) ? name.value : `${classPrefix.value}-${name.value}`;
+    return createVNode("i", mergeProps({
+      "class": [classPrefix.value, fontIconClass, (rotate == null ? void 0 : rotate.value) === "infinite" && ns2.m("spin")],
+      "style": {
+        fontSize: iconSize.value,
+        color: color.value,
+        transform: `rotate(${rotate == null ? void 0 : rotate.value}deg)`
+      }
+    }, ctx.attrs), null);
   };
-  const clearValidate = () => {
-    validateState.value = "";
-    validateMessage.value = "";
+  const iconDom = () => {
+    return component.value ? svgIconDom() : isUrl(name.value) ? imgIconDom() : fontIconDom();
   };
-  const resetField = async () => {
-    if (!formContext.data || !props.field) {
-      return;
-    }
-    const currentValue = getFieldValue(formContext.data, props.field);
-    if (!lodash.exports.isEqual(currentValue.value, initFieldValue)) {
-      isResetting = true;
-    }
-    currentValue.value = initFieldValue;
-    await nextTick();
-    clearValidate();
+  return {
+    iconDom
   };
-  onMounted(() => {
-    initFieldValue = lodash.exports.clone(fieldValue.value);
-  });
-  return { validateState, validateMessage, validate, resetField, clearValidate };
 }
-var formItem = "";
-defineComponent({
-  name: "DFormItem",
-  props: formItemProps,
+var Icon = defineComponent({
+  name: "DIcon",
+  props: iconProps,
+  emits: ["click"],
   setup(props, ctx) {
-    const formContext = inject(FORM_TOKEN);
-    const _a = toRefs(props), {
-      messageType: itemMessageType,
-      popPosition: itemPopPosition,
-      showFeedback: itemShowFeedback
-    } = _a, otherProps = __objRest(_a, [
-      "messageType",
-      "popPosition",
-      "showFeedback"
-    ]);
     const {
-      label,
-      helpTips,
-      feedbackStatus,
-      extraInfo
+      disabled,
+      operable
     } = toRefs(props);
-    const showFeedback = computed(() => (itemShowFeedback == null ? void 0 : itemShowFeedback.value) !== void 0 ? itemShowFeedback.value : formContext.showFeedback);
-    const messageType = computed(() => (itemMessageType == null ? void 0 : itemMessageType.value) || formContext.messageType);
-    const popPosition = computed(() => (itemPopPosition == null ? void 0 : itemPopPosition.value) || formContext.popPosition);
-    const {
-      _rules
-    } = useFormItemRule(props);
-    const {
-      validateState,
-      validateMessage,
-      validate,
-      resetField,
-      clearValidate
-    } = useFormItemValidate(props, _rules);
     const {
-      itemClasses,
-      isRequired
-    } = useFormItem(messageType, _rules, validateState);
-    const labelData = computed(() => ({
-      layout: formContext.layout,
-      labelSize: formContext.labelSize,
-      labelAlign: formContext.labelAlign
-    }));
-    provide(LABEL_DATA, labelData);
-    const context = reactive(__spreadProps(__spreadValues({}, otherProps), {
-      showFeedback,
-      messageType,
-      popPosition,
-      isRequired,
-      validateState,
-      validateMessage,
-      validate,
-      resetField,
-      clearValidate
+      iconDom
+    } = useIconDom(props, ctx);
+    const ns2 = useNamespace("icon");
+    const wrapClassed = computed(() => ({
+      [ns2.e("container")]: true,
+      [ns2.m("disabled")]: disabled.value,
+      [ns2.m("operable")]: operable.value,
+      [ns2.m("no-slots")]: !Object.keys(ctx.slots).length
     }));
-    provide(FORM_ITEM_TOKEN, context);
-    ctx.expose({
-      resetField,
-      clearValidate
-    });
-    onMounted(() => {
-      if (props.field) {
-        formContext == null ? void 0 : formContext.addItemContext(context);
-      }
-    });
-    onBeforeUnmount(() => {
-      formContext == null ? void 0 : formContext.removeItemContext(context);
-    });
-    return () => createVNode("div", {
-      "class": itemClasses.value
-    }, [createVNode(FormLabel, {
-      "help-tips": helpTips.value
-    }, {
-      default: () => [label == null ? void 0 : label.value]
-    }), createVNode(FormControl, {
-      "feedback-status": feedbackStatus == null ? void 0 : feedbackStatus.value,
-      "extra-info": extraInfo.value
-    }, {
-      default: () => {
-        var _a2, _b;
-        return [(_b = (_a2 = ctx.slots).default) == null ? void 0 : _b.call(_a2)];
+    const onClick = (e) => {
+      if (disabled.value) {
+        return;
       }
-    })]);
-  }
-});
-var formOperation = "";
-defineComponent({
-  name: "DFormOperation",
-  setup(props, ctx) {
-    const formContext = inject(FORM_TOKEN);
-    const LabelSizeMap = {
-      sm: 80,
-      md: 100,
-      lg: 150
+      ctx.emit("click", e);
     };
-    const styles = computed(() => ({
-      marginLeft: formContext.layout === "horizontal" ? `${LabelSizeMap[formContext.labelSize] + 16}px` : void 0
-    }));
     return () => {
-      var _a, _b;
+      var _a, _b, _c, _d;
       return createVNode("div", {
-        "class": "devui-form-operation",
-        "style": styles.value
-      }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)]);
+        "class": wrapClassed.value,
+        "onClick": onClick
+      }, [(_b = (_a = ctx.slots).prefix) == null ? void 0 : _b.call(_a), iconDom(), (_d = (_c = ctx.slots).suffix) == null ? void 0 : _d.call(_c)]);
     };
   }
 });
+const inputProps = {
+  modelValue: {
+    type: String,
+    default: ""
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  error: {
+    type: Boolean,
+    default: false
+  },
+  size: {
+    type: String
+  },
+  validateEvent: {
+    type: Boolean,
+    default: true
+  },
+  prefix: {
+    type: String,
+    default: ""
+  },
+  suffix: {
+    type: String,
+    default: ""
+  },
+  showPassword: {
+    type: Boolean,
+    default: false
+  },
+  clearable: {
+    type: Boolean,
+    default: false
+  },
+  placeholder: {
+    type: String,
+    default: ""
+  }
+};
 function useInputRender(props, ctx) {
   const formContext = inject(FORM_TOKEN, void 0);
   const formItemContext = inject(FORM_ITEM_TOKEN, void 0);
@@ -8442,7 +8442,10 @@ var Search = defineComponent({
     const t = createI18nTranslate("DSearch", app);
     const ns2 = useNamespace("search");
     const isFocus = ref(false);
-    const rootClasses = getRootClass(props, isFocus);
+    const {
+      rootClass,
+      searchSize
+    } = useSearchClass(props, isFocus);
     const {
       keywords,
       clearIconShow,
@@ -8468,7 +8471,7 @@ var Search = defineComponent({
     };
     return () => {
       const inputProps2 = {
-        size: props.size,
+        size: searchSize.value,
         disabled: props.disabled,
         autoFocus: props.autoFocus,
         modelValue: keywords.value,
@@ -8479,7 +8482,7 @@ var Search = defineComponent({
         onBlur
       };
       return createVNode("label", {
-        "class": rootClasses.value
+        "class": rootClass.value
       }, [props.iconPosition === "left" && createVNode("div", {
         "class": ns2.e("icon"),
         "onClick": onClickHandle